Tryag File Manager

/home/ltman.eemo.co.kr/public_html/www/complete-ui_plugins.html

<!DOCTYPE html>

<head>
  <title>Plugins - HTML Complete UI - Appwork</title>

<link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css">
  <link rel="stylesheet" href="assets/vendor/fonts/ionicons.css">
  <link rel="stylesheet" href="assets/vendor/fonts/linearicons.css">
  <link rel="stylesheet" href="assets/vendor/fonts/open-iconic.css">
  <link rel="stylesheet" href="assets/vendor/fonts/pe-icon-7-stroke.css">

<link rel="stylesheet" href="assets/vendor/css/rtl/bootstrap.css" class="theme-settings-bootstrap-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/appwork.css" class="theme-settings-appwork-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/theme-corporate.css" class="theme-settings-theme-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/colors.css" class="theme-settings-colors-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/uikit.css">

<script src="assets/vendor/js/theme-settings.js"></script>
  <script>
    window.themeSettings = new ThemeSettings({
      cssPath: 'assets/vendor/css/rtl/',
      themesPath: 'assets/vendor/css/rtl/'
    });
  </script>

<script src="assets/vendor/js/pace.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="assets/vendor/libs/clipboard/clipboard.js"></script>

<link rel="stylesheet" href="assets/vendor/libs/bootstrap-slider/bootstrap-slider.css">
  <link rel="stylesheet" href="assets/vendor/libs/nouislider/nouislider.css">
  <link rel="stylesheet" href="assets/vendor/libs/select2/select2.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-tagsinput/bootstrap-tagsinput.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-select/bootstrap-select.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-multiselect/bootstrap-multiselect.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.css">
  <link rel="stylesheet" href="assets/vendor/libs/timepicker/timepicker.css">
  <link rel="stylesheet" href="assets/vendor/libs/minicolors/minicolors.css">
  <link rel="stylesheet" href="assets/vendor/libs/fullcalendar/fullcalendar.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.css">
  <link rel="stylesheet" href="assets/vendor/libs/growl/growl.css">
  <link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-markdown/bootstrap-markdown.css">
  <link rel="stylesheet" href="assets/vendor/libs/quill/typography.css">
  <link rel="stylesheet" href="assets/vendor/libs/quill/editor.css">
  <link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead.css">
  <link rel="stylesheet" href="assets/vendor/libs/datatables/datatables.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-table/bootstrap-table.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-sortable/bootstrap-sortable.css">
  <link rel="stylesheet" href="assets/vendor/libs/dropzone/dropzone.css">
  <link rel="stylesheet" href="assets/vendor/libs/flow-js/flow.css">
  <link rel="stylesheet" href="assets/vendor/libs/dragula/dragula.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-duallistbox/bootstrap-duallistbox.css">
  <link rel="stylesheet" href="assets/vendor/libs/nestable/nestable.css">
  <link rel="stylesheet" href="assets/vendor/libs/jstree/themes/default/style.css">
  <link rel="stylesheet" href="assets/vendor/libs/ladda/ladda.css">
  <link rel="stylesheet" href="assets/vendor/libs/vegas/vegas.css">
  <link rel="stylesheet" href="assets/vendor/libs/swiper/swiper.css">
  <link rel="stylesheet" href="assets/vendor/libs/cropper/cropper.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.css">
  <link rel="stylesheet" href="assets/vendor/libs/bootstrap-tour/bootstrap-tour.css">
  <link rel="stylesheet" href="assets/vendor/libs/spinkit/spinkit.css">
  <link rel="stylesheet" href="assets/vendor/libs/photoswipe/photoswipe.css">
  <link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery.css">
  <link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery-indicator.css">
  <link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery-video.css">
  <link rel="stylesheet" href="assets/vendor/libs/smartwizard/smartwizard.css">
  <link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css">
  <link rel="stylesheet" href="assets/vendor/libs/plyr/plyr.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<style>
    #main-header { font-weight: bold; font-size: 1.6875rem; margin: 0 0 -.3125rem 0; padding: .9375rem 3.125rem; line-height: 2.5rem; }
    #main-header-path { opacity: .4; }

.no-ie10, .no-ie11 { display: block; background: #fff9e5; color: #66645c; border-left: 4px solid #e6d292; padding: 10px; margin: 24px 0; direction: ltr !important; }
    .no-ie10:before, .no-ie11:before { content: attr(data-name); font-weight: bold; }
    .no-ie10:after { content: " doesn't support Internet Explorer 10 and below."; }
    .no-ie11:after { content: " doesn't support Internet Explorer 11 and below."; }
    .no-ie10.no-message:after, .no-ie11.no-message:after { display: none; }

/* Page background */
    .ui-block, .cui-bottom-spacer { background: transparent; }

/* Blocks */
    .ui-block { padding: 1.875rem 3.125rem; border-top: .3125rem solid rgba(49,68,82,.07); }

/* Headings */
    .ui-block-heading { margin: 0 -3.125rem; padding: 0 3.125rem; }
    h3.ui-block-heading { font-size: 1.25rem; }
    h4.ui-block-heading { margin-top: 1.875rem; padding-top: 1.875rem; padding-bottom: 1.875rem; text-transform: uppercase; color: rgba(24, 28, 33, .4); border-top: .0625rem solid rgba(49,68,82,.05); font-size: .6875rem; }
    h4.ui-block-heading:first-of-type { margin-top: 0; border: 0; }

/* Description */
    .ui-block-description { display: block; font-size: .9375rem; color: rgba(0,0,0,.3); margin: .5rem 0 0 0; }
    .ui-block-description[href]:after { content: " →"; }

/* Material-only elements */
    html:not(.material-style) .material-style-only { display: none !important; }

/* Code examples */
    .cui-example-code,
    .cui-example-code-static { display: none; direction: ltr !important; text-align: left !important; }
    .cui-example-code-static { display: block; }
    .cui-example-code.active { display: block; }
    .cui-example-code pre,
    .cui-example-code-static pre { max-height: 37.5rem; border: .1875rem solid rgba(49,68,82,.04); margin-bottom: 1.875rem; }
    .cui-example-code code,
    .cui-example-code-static code { margin: 0; max-height: calc(37.5rem - .375rem); overflow: auto; padding: 1.25rem 1.875rem; background: rgba(49,68,82,.04); }
    .cui-example-code-toggle { display: block; line-height: 1.25; font-weight: 800; background: rgba(49,68,82,.05); direction: ltr !important; color: #aaa; padding: .1875rem .3125rem; border-radius: .125rem; white-space: nowrap; font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9em; }
    .cui-example-code-toggle:hover, .cui-example-code-toggle.active { color: #fff; background: #333; }
    .cui-example-code-toggle::after { vertical-align: middle; display: none; padding-left: .375rem; }
    .cui-example-code-toggle:hover::after, .cui-example-code-toggle.active::after { display: inline-block;  }
    .cui-example-code-toggle::after { content: 'SHOW CODE'; }
    .cui-example-code-toggle.active::after { content: 'HIDE CODE'; }
    .cui-example-code-static pre { margin: 1.875rem 0 0 0; }

/* Spacing */
    .cui-bottom-spacer { height: 12rem; }
    .cui-example-vertical-spacing > * + * { margin-top: 1.875rem !important; margin-bottom: 0 !important; }
    .cui-example-vertical-spacing-sm > * + * { margin-top: .9375rem !important; margin-bottom: 0 !important; }
    .cui-example-vertical-spacing-lg > * + * { margin-top: 5rem !important; margin-bottom: 0 !important; }
    .cui-example-inline-spacing > *, .cui-example-paragraph-spacing > p > * { margin: 0 .375rem .9375rem 0; }
    .cui-example-paragraph-spacing > p { margin: 0; }

/* Extras */
    .cui-utils-example-border-color > * { display: inline-block; width: 5rem; height: 5rem; margin: 0 .625rem .625rem 0; border: .1875rem solid; }
    .cui-utils-example-bg-color .col-sm { padding: .9375rem 1.25rem; margin-bottom: .9375rem; }

/* RTL */
    [dir=rtl] .cui-example-inline-spacing > *, [dir=rtl] .cui-example-paragraph-spacing > p > * { margin-right: 0; margin-left: .375rem; }
    [dir=rtl] .cui-utils-example-border-color > * { margin-right: 0; margin-left: .625rem; }

.rtl-only { display: none !important; direction: ltr !important; text-align: left !important; }
    [dir=rtl] .rtl-only { display: block !important; }
  </style>
  
</head>

<h1 id="main-header" class="bg-dark text-white">
    <span id="main-header-path">HTML Complete UI &nbsp;/&nbsp;</span>
    <div class="d-inline-block position-relative">
      <a href="javascript:void(0)" class="dropdown-toggle text-white" data-toggle="dropdown">Plugins</a>
      <div class="dropdown-menu mt-3">
        <a href="complete-ui_base.html" class="dropdown-item text-big py-2 px-4"><span class="d-inline-block py-1 px-2">Base</span></a>

<a href="complete-ui_charts.html" class="dropdown-item text-big py-2 px-4"><span class="d-inline-block py-1 px-2">Charts</span></a>
      </div>
    </div>
  </h1>

<div class="ui-block">
    <h3 class="ui-block-heading">Numeral.js</h3>
    <a target="_blank" href="https://github.com/adamwdraper/Numeral-js" class="ui-block-description">https://github.com/adamwdraper/Numeral-js</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/numeral/numeral.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          $('#numeral-example-1').html(numeral(1000.1234).format('0,0'));
          $('#numeral-example-2').html(numeral(1000.1234).format('0,0.00'));
          $('#numeral-example-3').html(numeral(1000.1234).format('+0,0'));
          $('#numeral-example-4').html(numeral(1000.1234).format('.00'));
          $('#numeral-example-5').html(numeral(1000.1234).format('$0,0.00'));
        });
      </script>
      
    </div>
  </div>

<div class="ui-block" style="overflow: hidden;">
    <h3 class="ui-block-heading">Bootstrap Slider</h3>
    <a target="_blank" href="https://github.com/seiyria/bootstrap-slider" class="ui-block-description">https://github.com/seiyria/bootstrap-slider</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-slider/bootstrap-slider.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-slider/bootstrap-slider.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div>
        Filter by price interval:
        <input id="bs-slider-2" type="text" value data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]">
        <strong class="float-left small">€ 10</strong>
        <strong class="float-right small">€ 1000</strong>
      </div>

<script>
        $(function() {
          $('#bs-slider-1').slider({
            formatter: function(value) {
              return 'Value: ' + value;
            },
          });

$('#bs-slider-2').slider();

$('#bs-slider-3').slider({
            reversed: true,
          });

$('#bs-slider-4').slider({
            reversed: true,
          });

$('#bs-slider-5').slider();

$('#bs-slider-6').slider({
            ticks:        [0, 100, 200, 300, 400],
            ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
          });

$('#bs-slider-7').slider({
            ticks:        [0, 100, 200, 300, 400],
            ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
            reversed:     true,
          });

$('.bs-slider-variant').slider();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">noUiSlider</h3>
    <a target="_blank" href="https://refreshless.com/nouislider/" class="ui-block-description">https://refreshless.com/nouislider/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/nouislider/nouislider.css"&gt;
      &lt;script src="assets/vendor/libs/nouislider/nouislider.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

noUiSlider.create(document.getElementById('nouislider-1'), {
            start: [ 80 ],
            connect: [true, false],
            direction: isRtl ? 'rtl' : 'ltr',
            range: {
              'min': 0,
              'max': 100,
            }
          });

// Vertical

var slider = document.getElementById('nouislider-2');

slider.style.height = '200px';
          slider.style.margin = '0 auto 30px';

noUiSlider.create(slider, {
            start: [ 1450 ],
            connect: [true, false],
            orientation: 'vertical',
            direction: 'rtl',
            step: 150,
            range: {
              'min': 1300,
              'max': 3250
            }
          });

// Range

noUiSlider.create(document.getElementById('nouislider-3'), {
            start: [ 4000, 8000 ],
            step: 1000,
            connect: true,
            direction: isRtl ? 'rtl' : 'ltr',
            range: {
              'min': [  2000 ],
              'max': [ 10000 ]
            }
          });

// Full

noUiSlider.create(document.getElementById('nouislider-4'), {
            start: [ 1450, 2050, 2350, 3000 ],
            connect: true,
            behaviour: 'tap-drag',
            step: 150,
            tooltips: true,
            range: {
              'min': 1000,
              'max': 3750
            },
            pips: {
              mode: 'steps',
              stepped: true,
              density: 4
            },
            direction: isRtl ? 'rtl' : 'ltr',
          });

var slider2 = document.getElementById('nouislider-5');

slider2.style.height = '400px';
          slider2.style.margin = '0 auto 30px';

noUiSlider.create(slider2, {
            start: [ 1450, 2050, 2350, 3000 ],
            connect: true,
            direction: 'rtl',
            orientation: 'vertical',
            behaviour: 'tap-drag',
            step: 150,
            tooltips: true,
            range: {
              'min': 1000,
              'max': 3750
            },
            pips: {
              mode: 'steps',
              stepped: true,
              density: 4
            }
          });

// Colors

var slider3 = document.getElementById('nouislider-6');
          var slider4 = document.getElementById('nouislider-7');
          var slider5 = document.getElementById('nouislider-8');
          var slider6 = document.getElementById('nouislider-9');
          var slider7 = document.getElementById('nouislider-10');
          var slider8 = document.getElementById('nouislider-11');
          var slider9 = document.getElementById('nouislider-12');

var options =  {
            start: [ 2050, 3000 ],
            connect: true,
            behaviour: 'tap-drag',
            step: 150,
            tooltips: true,
            range: {
              'min': 1000,
              'max': 3750
            },
            pips: {
              mode: 'steps',
              stepped: true,
              density: 4
            },
            direction: isRtl ? 'rtl' : 'ltr'
          };

noUiSlider.create(slider3, options);
          noUiSlider.create(slider4, options);
          noUiSlider.create(slider5, options);
          noUiSlider.create(slider6, options);
          noUiSlider.create(slider7, options);
          noUiSlider.create(slider8, options);
          noUiSlider.create(slider9, options);
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Select2</h3>
    <a target="_blank" href="https://select2.github.io" class="ui-block-description">https://select2.github.io</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/select2/select2.css"&gt;
      &lt;script src="assets/vendor/libs/select2/select2.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <select class="select2-demo form-control" style="width: 100%" data-allow-clear="true">
        <option></option>
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </select>

<select class="select2-demo form-control" multiple style="width: 100%">
        <optgroup label="Alaskan/Hawaiian Time Zone">
          <option value="AK">Alaska</option>
          <option value="HI">Hawaii</option>
        </optgroup>
        <optgroup label="Pacific Time Zone">
          <option value="CA">California</option>
          <option value="NV">Nevada</option>
          <option value="OR">Oregon</option>
          <option value="WA" selected>Washington</option>
        </optgroup>
        <optgroup label="Mountain Time Zone">
          <option value="AZ">Arizona</option>
          <option value="CO">Colorado</option>
          <option value="ID">Idaho</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NM">New Mexico</option>
          <option value="ND">North Dakota</option>
          <option value="UT">Utah</option>
          <option value="WY">Wyoming</option>
        </optgroup>
        <optgroup label="Central Time Zone">
          <option value="AL">Alabama</option>
          <option value="AR">Arkansas</option>
          <option value="IL">Illinois</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="OK">Oklahoma</option>
          <option value="SD">South Dakota</option>
          <option value="TX">Texas</option>
          <option value="TN">Tennessee</option>
          <option value="WI">Wisconsin</option>
        </optgroup>
        <optgroup label="Eastern Time Zone">
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="IN">Indiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="NH" selected>New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="OH">Ohio</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WV">West Virginia</option>
        </optgroup>
      </select>

<select class="select2-demo form-control" style="width: 100%" disabled>
        <option value="1">One</option>
        <option value="2" selected>Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
      </select>

<select class="select2-demo form-control" multiple style="width: 100%" disabled>
        <option value="1" selected>One</option>
        <option value="2" selected>Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
      </select>

<div class="select2-primary">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-secondary">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-success">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-info">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-warning">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-danger">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="select2-dark">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="is-valid">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>
      <div class="is-valid">
        <select class="select2-demo form-control" style="width: 100%">
          <option value="1">One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<div class="is-invalid">
        <select class="select2-demo form-control" multiple style="width: 100%">
          <option value="1" selected>One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>
      <div class="is-invalid">
        <select class="select2-demo form-control" style="width: 100%">
          <option value="1">One</option>
          <option value="2" selected>Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
        </select>
      </div>

<script>
        $(function() {
          $('.select2-demo').each(function() {
            $(this)
              .wrap('<div class="position-relative"></div>')
              .select2({
                placeholder: 'Select value',
                dropdownParent: $(this).parent()
              });
          })
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Tagsinput</h3>
    <a target="_blank" href="https://github.com/bootstrap-tagsinput/bootstrap-tagsinput" class="ui-block-description">https://github.com/bootstrap-tagsinput/bootstrap-tagsinput</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-tagsinput/bootstrap-tagsinput.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-tagsinput/bootstrap-tagsinput.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<select multiple data-role="tagsinput" class="form-control">
        <option value="Amsterdam">Amsterdam</option>
        <option value="Washington">Washington</option>
        <option value="Sydney">Sydney</option>
        <option value="Beijing">Beijing</option>
        <option value="Cairo">Cairo</option>
      </select>

<script>
        $(function() {
          var $el = $('#bs-tagsinput-1');

$el.tagsinput({
            tagClass: function(item) {
              switch (item.continent) {
                case 'Europe'   : return 'badge badge-primary';
                case 'America'  : return 'badge badge-danger';
                case 'Australia': return 'badge badge-success';
                case 'Africa'   : return 'badge badge-default';
                case 'Asia'     : return 'badge badge-warning';
              }
            },

itemValue: 'value',
            itemText:  'text',
          });

$el.tagsinput('add', { value: 1,  text: 'Amsterdam',  continent: 'Europe' });
          $el.tagsinput('add', { value: 4,  text: 'Washington', continent: 'America' });
          $el.tagsinput('add', { value: 7,  text: 'Sydney',     continent: 'Australia' });
          $el.tagsinput('add', { value: 10, text: 'Beijing',    continent: 'Asia' });
          $el.tagsinput('add', { value: 13, text: 'Cairo',      continent: 'Africa' });

$('#bs-tagsinput-2').tagsinput({ tagClass: 'badge badge-primary' });
          $('#bs-tagsinput-3').tagsinput({ tagClass: 'badge badge-secondary' });
          $('#bs-tagsinput-4').tagsinput({ tagClass: 'badge badge-success' });
          $('#bs-tagsinput-5').tagsinput({ tagClass: 'badge badge-info' });
          $('#bs-tagsinput-6').tagsinput({ tagClass: 'badge badge-warning' });
          $('#bs-tagsinput-7').tagsinput({ tagClass: 'badge badge-danger' });
          $('#bs-tagsinput-8').tagsinput({ tagClass: 'badge badge-dark' });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Select</h3>
    <a target="_blank" href="https://github.com/silviomoreto/bootstrap-select" class="ui-block-description">https://github.com/silviomoreto/bootstrap-select</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-select/bootstrap-select.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-select/bootstrap-select.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <select class="selectpicker" data-style="btn-default">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
      <br>

<select class="selectpicker" data-style="btn-default">
        <optgroup label="Picnic">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </optgroup>
        <optgroup label="Camping">
          <option>Tent</option>
          <option>Flashlight</option>
          <option>Toilet Paper</option>
        </optgroup>
      </select>
      <br>

<select class="selectpicker" data-style="btn-default" multiple data-icon-base="ion" data-tick-icon="ion-md-checkmark">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
      <br>

<select class="selectpicker" data-style="btn-default" data-live-search="true">
        <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
        <option data-tokens="mustard">Burger, Shake and a Smile</option>
        <option data-tokens="frosting">Sugar, Spice and all things nice</option>
      </select>
      <br>

<select class="selectpicker show-tick" data-style="btn-default" data-icon-base="ion" data-tick-icon="ion-md-checkmark">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
      <br>

<select class="selectpicker show-tick" data-style="btn-default" data-icon-base="ion" data-tick-icon="ion-md-checkmark">
        <option data-icon="ion-md-color-fill">Mustard</option>
        <option data-icon="ion-md-cafe">Ketchup</option>
        <option data-icon="ion-md-settings">Relish</option>
      </select>
      <br>

<select class="selectpicker" data-style="btn-default" data-show-subtext="true">
        <option data-subtext="French's">Mustard</option>
        <option data-subtext="Heinz">Ketchup</option>
        <option data-subtext="Sweet">Relish</option>
      </select>
      <br>

<div class="row">
        <div class="col-sm-4 mb-3">
          <select class="selectpicker" data-style="btn-primary">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>
        </div>
        <div class="col-sm-4 mb-3">
          <select class="selectpicker" data-style="btn-success">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>
        </div>
        <div class="col-sm-4 mb-3">
          <select class="selectpicker" data-style="btn-warning">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>
        </div>
      </div>

<script>
        $(function () {
          $('.selectpicker').selectpicker();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Multiselect</h3>
    <a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect" class="ui-block-description">https://github.com/davidstutz/bootstrap-multiselect</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-multiselect/bootstrap-multiselect.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-multiselect/bootstrap-multiselect.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <select id="bs-multiselect-1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
      </select>

<select id="bs-multiselect-2" multiple>
        <option value="cheese">Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
        <option value="mushrooms">Mushrooms</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="onions">Onions</option>
      </select>

<select id="bs-multiselect-3" multiple>
        <optgroup label="Group 1">
          <option value="1-1">Option 1.1</option>
          <option value="1-2" selected="selected">Option 1.2</option>
          <option value="1-3" selected="selected">Option 1.3</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="2-1">Option 2.1</option>
          <option value="2-2">Option 2.2</option>
          <option value="2-3">Option 2.3</option>
        </optgroup>
      </select>
      <br><br>

<select id="bs-multiselect-4" multiple>
        <optgroup label="Group 1">
          <option value="1-1">Option 1.1</option>
          <option value="1-2" selected="selected">Option 1.2</option>
          <option value="1-3" selected="selected">Option 1.3</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="2-1">Option 2.1</option>
          <option value="2-2">Option 2.2</option>
          <option value="2-3">Option 2.3</option>
        </optgroup>
      </select>

<script>
        $(function() {
          $('#bs-multiselect-1,#bs-multiselect-2,#bs-multiselect-3').multiselect();
          $('#bs-multiselect-4').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true,
            buttonWidth: '100%',
            maxHeight: 400,
            dropUp: true,
            templates: {
              filter: '<li class="multiselect-item filter"><div class="input-group input-group-sm"><span class="input-group-prepend"><span class="input-group-text"><i class="ion ion-ios-search"></i></span></span><input class="form-control multiselect-search" type="text"></div></li>',
              filterClearBtn: '<span class="input-group-append"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="ion ion-md-close"></i></button></span>',
            }
          });

// RTL
          if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
            $('#bs-multiselect-1,#bs-multiselect-2,#bs-multiselect-3,#bs-multiselect-4')
              .next('.btn-group')
              .find('.dropdown-menu')
              .addClass('dropdown-menu-right');
          }
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Datepicker</h3>
    <a target="_blank" href="https://bootstrap-datepicker.readthedocs.io/en/latest/" class="ui-block-description">https://bootstrap-datepicker.readthedocs.io/en/latest/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<input type="text" class="form-control" id="datepicker-features">

<div class="input-daterange input-group" id="datepicker-range">
        <input type="text" class="form-control" name="start">
        <div class="input-group-append">
          <span class="input-group-text">to</span>
        </div>
        <input type="text" class="form-control" name="end">
      </div>

<div id="datepicker-inline"></div>

<script>
        $(function() {
          var isRtl = $('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl';

$('#datepicker-base').datepicker({
            orientation: isRtl ? 'auto right' : 'auto left'
          });
          $('#datepicker-features').datepicker({
            calendarWeeks:         true,
            todayBtn:              'linked',
            daysOfWeekDisabled:    '1',
            clearBtn:              true,
            todayHighlight:        true,
            multidate:             true,
            daysOfWeekHighlighted: '1,2',
            orientation: isRtl ? 'auto left' : 'auto right',

beforeShowMonth: function(date) {
              if (date.getMonth() === 8) {
                return false;
              }
            },

beforeShowYear: function(date){
              if (date.getFullYear() === 2014) {
                return false;
              }
            }
          });
          $('#datepicker-range').datepicker({
            orientation: isRtl ? 'auto right' : 'auto left'
          });
          $('#datepicker-inline').datepicker();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Daterangepicker</h3>
    <a target="_blank" href="http://www.daterangepicker.com" class="ui-block-description">http://www.daterangepicker.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/moment/moment.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

$('#daterange-1').daterangepicker({
            opens: (isRtl ? 'left' : 'right'),
            showWeekNumbers: true
          });

$('#daterange-2').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            locale: {
              format: 'MM/DD/YYYY h:mm A'
            },
            opens: (isRtl ? 'left' : 'right')
          });

$('#daterange-3').daterangepicker({
              singleDatePicker: true,
              showDropdowns: true,
              opens: (isRtl ? 'left' : 'right')
            }, function(start, end, label) {
              var years = moment().diff(start, 'years');

alert("You are " + years + " years old.");
            }
          );

// Button

var start = moment().subtract(29, 'days');
          var end = moment();

function cb(start, end) {
            $('#daterange-4').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
          }

$('#daterange-4').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
           },
           opens: (isRtl ? 'left' : 'right')
          }, cb);

cb(start, end);

// *******************************************************************
          // Replace icons

$('#daterange-1, #daterange-2, #daterange-3, #daterange-4').each(function() {
            var obj = $(this).data('daterangepicker');
            var _updateCalendars = obj.updateCalendars;

obj.updateCalendars = function() {
              // Call original function
              _updateCalendars.call(obj)

// Replace icons
              obj.container.find('.prev > i').each(function() { this.className = 'ion ion-ios-arrow-back' });
              obj.container.find('.next > i').each(function() { this.className = 'ion ion-ios-arrow-forward' });
              obj.container.find('.daterangepicker_input > i').each(function() { this.className = 'ion ion-md-calendar' });
              obj.container.find('.calendar-time > i').each(function() { this.className = 'ion ion-md-time' });
            };
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Material DateTimePicker</h3>
    <a target="_blank" href="https://github.com/T00rk/bootstrap-material-datetimepicker" class="ui-block-description">https://github.com/T00rk/bootstrap-material-datetimepicker</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/moment/moment.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          $('#b-m-dtp-date').bootstrapMaterialDatePicker({
            weekStart: 0,
            time: false,
            clearButton: true
          });

$('#b-m-dtp-time').bootstrapMaterialDatePicker({
            date: false,
            shortTime: false,
            format: 'HH:mm'
          });

$('#b-m-dtp-datetime').bootstrapMaterialDatePicker({
            weekStart: 1,
            format : 'dddd DD MMMM YYYY - HH:mm',
            shortTime: true,
            nowButton : true,
            minDate : new Date()
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">jQuery Timepicker</h3>
    <a target="_blank" href="https://github.com/jonthornton/jquery-timepicker" class="ui-block-description">https://github.com/jonthornton/jquery-timepicker</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/timepicker/timepicker.css"&gt;
      &lt;script src="assets/vendor/libs/timepicker/timepicker.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

$('#timepicker-example-1').timepicker({
            scrollDefault: 'now',
            orientation: (isRtl ? 'r' : 'l')
          });

$('#timepicker-example-2').timepicker({
            minTime: '2:00pm',
            maxTime: '11:30pm',
            showDuration: true,
            orientation: (isRtl ? 'r' : 'l')
          });

$('#timepicker-example-3').timepicker({
            disableTimeRanges: [
              ['1am', '2am'],
              ['3am', '4:01am']
            ],
            orientation: (isRtl ? 'r' : 'l')
          });

$('#timepicker-example-4').timepicker({
            'timeFormat': 'H:i:s',
            orientation: (isRtl ? 'r' : 'l')
          });
          $('#timepicker-example-5').timepicker({
            'timeFormat': 'h:i A',
            orientation: (isRtl ? 'r' : 'l')
          });

$('#timepicker-example-6').timepicker({
            'step': 15,
            orientation: (isRtl ? 'r' : 'l')
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Minicolors</h3>
    <a target="_blank" href="https://github.com/claviska/jquery-minicolors" class="ui-block-description">https://github.com/claviska/jquery-minicolors</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/minicolors/minicolors.css"&gt;
      &lt;script src="assets/vendor/libs/minicolors/minicolors.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

$('#minicolors-hue').minicolors({
            control:  'hue',
            position: 'bottom ' + (isRtl ? 'right' : 'left'),
          });

$('#minicolors-saturation').minicolors({
            control:  'saturation',
            position: 'bottom ' + (isRtl ? 'left' : 'right'),
          });

$('#minicolors-wheel').minicolors({
            control:  'wheel',
            position: 'top ' + (isRtl ? 'left' : 'right'),
          });

$('#minicolors-opacity').minicolors({
            control: 'wheel',
            opacity: true,
            position: 'bottom ' + (isRtl ? 'right' : 'left'),
          });

$('#minicolors-brightness').minicolors({
            control:  'brightness',
            position: 'top ' + (isRtl ? 'right' : 'left'),
          });

$('#minicolors-hidden').minicolors({
            position: 'bottom ' + (isRtl ? 'right' : 'left'),
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Fullcalendar</h3>
    <a target="_blank" href="https://fullcalendar.io/" class="ui-block-description">https://fullcalendar.io/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/fullcalendar/fullcalendar.css"&gt;
      &lt;script src="assets/vendor/libs/fullcalendar/fullcalendar.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/moment/moment.js"&gt;&lt;/script&gt;
    </samp>

<div class="alert alert-warning mt-4">
      <strong>Fullcalendar</strong> has partial support of IE10.
    </div>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <form class="modal modal-top fade" id="fullcalendar-default-view-modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Add an event</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label class="form-label">Title</label>
                <input type="text" class="form-control">
              </div>
              <div class="form-group">
                <label class="form-label">Type</label>
                <select class="custom-select">
                  <option value="" selected>Default</option>
                  <option value="fc-event-success">Success</option>
                  <option value="fc-event-info">Info</option>
                  <option value="fc-event-warning">Warning</option>
                  <option value="fc-event-danger">Danger</option>
                  <option value="fc-event-dark">Dark</option>
                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default md-btn-flat" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary md-btn-flat">Save</button>
            </div>
          </div>
        </div>
      </form>

<script>
        $(function () {
          var today = new Date();
          var y = today.getFullYear();
          var m = today.getMonth();
          var d = today.getDate();

var eventList = [{
            title: 'All Day Event',
            start: new Date(y, m, d - 12)
          },
          {
            title: 'Long Event',
            start: new Date(y, m, d - 8),
            end: new Date(y, m, d - 5),
            className: 'fc-event-warning'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d - 6, 16, 0)
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d + 1, 16, 0),
            className: 'fc-event-success',
          },
          {
            title: 'Conference',
            start: new Date(y, m, d - 4),
            end: new Date(y, m, d - 2),
          },
          {
            title: 'Meeting',
            start: new Date(y, m, d - 3, 10, 30),
            end: new Date(y, m, d - 3, 12, 30),
            className: 'fc-event-danger'
          },
          {
            title: 'Lunch',
            start: new Date(y, m, d  - 3, 12, 0),
            className: 'fc-event-info'
          },
          {
            title: 'Meeting',
            start: new Date(y, m, d - 3, 14, 30),
            className: 'fc-event-dark'
          },
          {
            title: 'Happy Hour',
            start: new Date(y, m, d - 3, 17, 30)
          },
          {
            title: 'Dinner',
            start: new Date(y, m, d - 3, 20, 0)
          },
          {
            title: 'Birthday Party',
            start: new Date(y, m, d - 2, 7, 0)
          },
          {
            title: 'Background event',
            start: new Date(y, m, d + 5),
            end: new Date(y, m, d + 7),
            rendering: 'background'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: new Date(y, m, d + 13)
          }];

// Default view
          // color classes: [ fc-event-success | fc-event-info | fc-event-warning | fc-event-danger | fc-event-dark ]
          $('#fullcalendar-default-view').fullCalendar({
            // Bootstrap styling
            themeSystem: 'bootstrap4',
            bootstrapFontAwesome: {
              close: ' ion ion-md-close',
              prev: ' ion ion-ios-arrow-back scaleX--1-rtl',
              next: ' ion ion-ios-arrow-forward scaleX--1-rtl',
              prevYear: ' ion ion-ios-arrow-dropleft-circle scaleX--1-rtl',
              nextYear: ' ion ion-ios-arrow-dropright-circle scaleX--1-rtl'
            },

header: {
              left: 'title',
              center: 'month,agendaWeek,agendaDay',
              right: 'prev,next today'
            },

defaultDate: today,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            weekNumbers: true, // Show week numbers
            nowIndicator: true, // Show "now" indicator
            firstDay: 1, // Set "Monday" as start of a week
            businessHours: {
              dow: [1, 2, 3, 4, 5], // Monday - Friday
              start: '9:00',
              end: '18:00',
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: eventList,
            select: function (start, end) {
              $('#fullcalendar-default-view-modal')
                .on('shown.bs.modal', function() {
                  $(this).find('input[type="text"]').trigger('focus');
                })
                .on('hidden.bs.modal', function() {
                  $(this)
                    .off('shown.bs.modal hidden.bs.modal submit')
                    .find('input[type="text"], select').val('');
                  $('#fullcalendar-default-view').fullCalendar('unselect');
                })
                .on('submit', function(e) {
                  e.preventDefault();
                  var title = $(this).find('input[type="text"]').val();
                  var className = $(this).find('select').val() || null;

if (title) {
                    var eventData = {
                      title: title,
                      start: start,
                      end: end,
                      className: className
                    }
                    $('#fullcalendar-default-view').fullCalendar('renderEvent', eventData, true);
                  }

$(this).modal('hide');
                })
                .modal('show');
            },
            eventClick: function(calEvent, jsEvent, view) {
              alert('Event: ' + calEvent.title);
            }
          });

// List view
          // color classes: [ fc-event-success | fc-event-info | fc-event-warning | fc-event-danger | fc-event-dark ]
          $('#fullcalendar-list-view').fullCalendar({
            // Bootstrap styling
            themeSystem: 'bootstrap4',
            bootstrapFontAwesome: {
              close: ' ion ion-md-close',
              prev: ' ion ion-ios-arrow-back scaleX--1-rtl',
              next: ' ion ion-ios-arrow-forward scaleX--1-rtl',
              prevYear: ' ion ion-ios-arrow-dropleft-circle scaleX--1-rtl',
              nextYear: ' ion ion-ios-arrow-dropright-circle scaleX--1-rtl'
            },

header: {
              left: 'title',
              center: 'listDay,listWeek,month',
              right: 'prev,next today'
            },

// customize the button names,
            views: {
              listDay: {
                buttonText: 'list day'
              },
              listWeek: {
                buttonText: 'list week'
              }
            },

defaultView: 'listWeek',
            defaultDate: today,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: eventList
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Autosize</h3>
    <a target="_blank" href="https://github.com/jackmoore/autosize" class="ui-block-description">https://github.com/jackmoore/autosize</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/autosize/autosize.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          autosize($('#autosize-demo'));
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Vanilla Text Mask</h3>
    <a target="_blank" href="https://github.com/text-mask/text-mask/tree/master/vanilla#readme" class="ui-block-description">https://github.com/text-mask/text-mask/tree/master/vanilla#readme</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/vanilla-text-mask/vanilla-text-mask.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/vanilla-text-mask/text-mask-addons.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          // Phone
          //

vanillaTextMask.maskInput({
            inputElement: $('#text-mask-phone')[0],
            mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
          });

// Number
          //

vanillaTextMask.maskInput({
            inputElement: $('#text-mask-number')[0],
            mask: textMaskAddons.createNumberMask({
              prefix: '$'
            })
          });

// Email
          //

vanillaTextMask.maskInput({
            inputElement: $('#text-mask-email')[0],
            mask: textMaskAddons.emailMask
          });

// Date
          //

vanillaTextMask.maskInput({
            inputElement: $('#text-mask-date')[0],
            mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
            pipe: textMaskAddons.createAutoCorrectedDatePipe('mm/dd/yyyy')
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootbox</h3>
    <a target="_blank" href="http://bootboxjs.com" class="ui-block-description">http://bootboxjs.com</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/bootbox/bootbox.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-inline-spacing">
      <button id="bootbox-alert" class="btn btn-warning">Alert</button>
      <button id="bootbox-confirm" class="btn btn-danger">Confirm</button>
      <button id="bootbox-prompt" class="btn btn-success">Prompt</button>
      <button id="bootbox-custom" class="btn btn-info">Custom</button>

<script>
        $(function() {
          $('#bootbox-alert').on('click', function() {
            bootbox.alert({
              message:   'Hello world!',
              className: 'bootbox-sm',

callback: function() {
                alert('Hello world callback');
              },
            });
          });

$('#bootbox-confirm').on('click', function() {
            bootbox.confirm({
              message:   'Are you sure?',
              className: 'bootbox-sm',

callback: function(result) {
                alert('Confirm result: ' + result);
              },
            });
          });

$('#bootbox-prompt').on('click', function() {
            bootbox.prompt({
              title: 'What is your name?',

callback: function(result) {
                if (result === null) {
                  alert('Prompt dismissed');
                } else {
                  alert('Hi ' + result + '!');
                }
              },
            });
          });

$('#bootbox-custom').on('click', function() {
            bootbox.dialog({
              title:     'Custom title',
              message:   'I am a custom dialog',
              className: 'bootbox-lg',

buttons: {
                success: {
                  label:     'Success!',
                  className: 'btn-success',

callback: function() {
                    alert('great success');
                  },
                },
                danger: {
                  label:     'Danger!',
                  className: 'btn-danger',

callback: function() {
                    alert('uh oh, look out!');
                  },
                },
                main: {
                  label:     'Click ME!',
                  className: 'btn-primary',

callback: function() {
                    alert('Primary button');
                  },
                }
              },
            });
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap SweetAlert</h3>
    <a target="_blank" href="https://github.com/lipis/bootstrap-sweetalert" class="ui-block-description">https://github.com/lipis/bootstrap-sweetalert</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-inline-spacing">
      <button class="btn btn-lg btn-default" id="sweetalert-example-1">Basic</button>
      <button class="btn btn-lg btn-default" id="sweetalert-example-2">Full</button>
      <button class="btn btn-lg btn-default" id="sweetalert-example-3">With loader</button>
      <button class="btn btn-lg btn-info" id="sweetalert-example-4">Info</button>
      <button class="btn btn-lg btn-success" id="sweetalert-example-5">Success</button>
      <button class="btn btn-lg btn-warning" id="sweetalert-example-6">Warning</button>
      <button class="btn btn-lg btn-danger" id="sweetalert-example-7">Danger</button>

<script>
        $(function() {
          $('#sweetalert-example-1').click(function(){
            swal("Here's a message!", "It's pretty, isn't it?")
          });

$('#sweetalert-example-2').click(function(){
            swal({
              title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",
              type: "warning",
              showCancelButton: true,
              confirmButtonClass: "btn-danger",
              confirmButtonText: "Yes, delete it!",
              cancelButtonText: "No, cancel plx!",
              closeOnConfirm: false,
              closeOnCancel: false
            },
            function(isConfirm) {
              if (isConfirm) {
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
              } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
              }
            });
          });

$('#sweetalert-example-3').click(function(){
            swal({
              title: "Ajax request example",
              text: "Submit to run ajax request",
              type: "info",
              showCancelButton: true,
              closeOnConfirm: false,
              showLoaderOnConfirm: true
            }, function () {
              setTimeout(function () {
                swal("Ajax request finished!");
              }, 2000);
            });
          });

$('#sweetalert-example-4').click(function(){
            swal({
              title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",
              type: "info",
              showCancelButton: true,
              confirmButtonClass: 'btn-info',
              confirmButtonText: 'Info!'
            });
          });

$('#sweetalert-example-5').click(function(){
            swal({
              title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",
              type: "success",
              showCancelButton: true,
              confirmButtonClass: 'btn-success',
              confirmButtonText: 'Success!'
            });
          });

$('#sweetalert-example-6').click(function(){
            swal({
              title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",
              type: "warning",
              showCancelButton: true,
              confirmButtonClass: 'btn-warning',
              confirmButtonText: 'Warning!'
            });
          });

$('#sweetalert-example-7').click(function(){
            swal({
              title: "Are you sure?",
              text: "You will not be able to recover this imaginary file!",
              type: "error",
              showCancelButton: true,
              confirmButtonClass: 'btn-danger',
              confirmButtonText: 'Danger!'
            });
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Growl</h3>
    <a target="_blank" href="https://github.com/ksylvest/jquery-growl" class="ui-block-description">https://github.com/ksylvest/jquery-growl</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/growl/growl.css"&gt;
      &lt;script src="assets/vendor/libs/growl/growl.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-inline-spacing">
      <button id="growl-default" class="btn btn-default">Default</button>
      <button id="growl-notice" class="btn btn-info">Notice</button>
      <button id="growl-warning" class="btn btn-warning">Warning</button>
      <button id="growl-error" class="btn btn-danger">Error</button>
      <button id="growl-static" class="btn btn-default">Static</button>
      <button id="growl-small" class="btn btn-default">Small</button>
      <button id="growl-large" class="btn btn-default">Large</button>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

$('#growl-default').click(function() {
            $.growl({
              title:    'Growl',
              message:  'The kitten is awake!',
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-notice').click(function() {
            $.growl.notice({
              message:  'The kitten is cute!',
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-warning').click(function() {
            $.growl.warning({
              message:  'The kitten is ugly!',
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-error').click(function() {
            $.growl.error({
              message:  'The kitten is attacking!',
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-static').click(function() {
            $.growl({
              title:    'Growl',
              message:  'The kitten is awake!',
              duration: 9999 * 9999,
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-small').click(function() {
            $.growl({
              title:   'Growl',
              message: 'The kitten is awake!',
              size:    'small',
              location: isRtl ? 'tl' : 'tr'
            });
          });

$('#growl-large').click(function() {
            $.growl({
              title:   'Growl',
              message: 'The kitten is awake!',
              size:    'large',
              location: isRtl ? 'tl' : 'tr'
            });
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Toastr</h3>
    <a target="_blank" href="https://github.com/CodeSeven/toastr" class="ui-block-description">https://github.com/CodeSeven/toastr</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.css"&gt;
      &lt;script src="assets/vendor/libs/toastr/toastr.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="row">
        <div class="col-xs-12 col-md-7">
          <div class="form-group">
            <label class="form-label" for="toastr-title">Title</label>
            <input id="toastr-title" name="toastr-title" type="text" class="form-control" placeholder="Enter a title...">
          </div>
          <div class="form-group">
            <label class="form-label" for="toastr-message">Message</label>
            <input id="toastr-message" name="toastr-message" type="text" class="form-control" placeholder="Enter a message...">
          </div>
          <div class="form-group">
            <label class="form-label" for="toastr-type">Type</label>
            <select class="custom-select form-control" id="toastr-type" name="toastr-type">
              <option value="success" selected>Success</option>
              <option value="info">Info</option>
              <option value="warning">Warning</option>
              <option value="error">Error</option>
            </select>
          </div>
          <div class="form-group custom-controls-stacked">
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="toastr-close-button">
              <span class="custom-control-label">Close button</span>
            </label>
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="toastr-progress-bar">
              <span class="custom-control-label">Progress bar</span>
            </label>
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="toastr-prevent-duplicates">
              <span class="custom-control-label">Prevent duplicates</span>
            </label>
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="toastr-newest-on-top">
              <span class="custom-control-label">Newest on top</span>
            </label>
          </div>
        </div>
        <div class="col-xs-12 col-md-5">
          <div class="form-group custom-controls-stacked">
            <label class="form-label mb-2">Position</label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-right" checked>
              <span class="custom-control-label">Top Right</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-right">
              <span class="custom-control-label">Bottom Right</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-left">
              <span class="custom-control-label">Bottom Left</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-left">
              <span class="custom-control-label">Top Left</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-full-width">
              <span class="custom-control-label">Top Full Width</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-full-width">
              <span class="custom-control-label">Bottom Full Width</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-center">
              <span class="custom-control-label">Top Center</span>
            </label>
            <label class="custom-control custom-radio">
              <input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-center">
              <span class="custom-control-label">Bottom Center</span>
            </label>
          </div>
        </div>
      </div>

<hr>

<button class="btn btn-primary mr-1" id="toastr-show">Show toast</button>
      <button class="btn btn-default mr-1" id="toastr-clear">Clear toasts</button>

<script>
        $(function() {
          var curMsgIndex = -1;

function getMessage() {
            var msgs = [
              'My name is Inigo Montoya. You killed my father. Prepare to die!',
              'Are you the six fingered man?',
              'Inconceivable!',
              'I do not think that means what you think it means.',
              'Have fun storming the castle!',
            ];

curMsgIndex++;

if (curMsgIndex === msgs.length) { curMsgIndex = 0; }

return msgs[curMsgIndex];
          };

$('#toastr-show').click(function() {
            var msg   = $('#toastr-message').val() || getMessage();
            var title = $('#toastr-title').val() || '';
            var type  = $('#toastr-type').val();

toastr[type](msg, title, {
              positionClass:     $('input[name="toastr-position"]:checked').val(),
              closeButton:       $('#toastr-close-button').prop('checked'),
              progressBar:       $('#toastr-progress-bar').prop('checked'),
              preventDuplicates: $('#toastr-prevent-duplicates').prop('checked'),
              newestOnTop:       $('#toastr-newest-on-top').prop('checked'),
              rtl:               $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl'
            });
          });

$('#toastr-clear').on('click', function() {
            toastr.clear();
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Markdown</h3>
    <a target="_blank" href="https://github.com/toopay/bootstrap-markdown" class="ui-block-description">https://github.com/toopay/bootstrap-markdown</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-markdown/bootstrap-markdown.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-markdown/bootstrap-markdown.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/markdown/markdown.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <textarea id="bs-markdown" class="form-control" rows="10">### Hello there
How are you?

I have bellow task for you :

Select from this text...
Click the bold on THIS WORD and make THESE ONE italic
Link GOOGLE to google.com
Test to insert image (and try to tab after write the image description)
Test Preview
And ending here... Click "List"

Enjoy!</textarea>

<script>
        $(function() {
          $('#bs-markdown').markdown({
            iconlibrary: 'fa',
            footer: '<div id="md-character-footer"></div><small id="md-character-counter" class="text-muted">350 character left</small>',

onChange: function(e) {
              var contentLength = e.getContent().length;

if (contentLength > 350) {
                $('#md-character-counter')
                  .removeClass('text-muted')
                  .addClass('text-danger')
                  .html((contentLength - 350) + ' character surplus.');
              } else {
                $('#md-character-counter')
                  .removeClass('text-danger')
                  .addClass('text-muted')
                  .html((350 - contentLength) + ' character left.');
              }
            },
          });

// Update character counter
          $('#markdown').trigger('change');

// *******************************************************************
          // Fix icons

$('.md-editor .fa-header').removeClass('fa fa-header').addClass('fas fa-heading');
          $('.md-editor .fa-picture-o').removeClass('fa fa-picture-o').addClass('far fa-image');
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Quill</h3>
    <a target="_blank" href="https://github.com/quilljs/quill" class="ui-block-description">https://github.com/quilljs/quill</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/quill/typography.css"&gt;
      &lt;link rel="stylesheet" href="assets/vendor/libs/quill/editor.css"&gt;
      &lt;script&gt;
        // Quill does not support IE 10 and below so don't load it to prevent console errors
        if (typeof document.documentMode !== 'number' || document.documentMode &gt; 10) {
          document.write('\x3Cscript src="assets/vendor/libs/quill/quill.js"&gt;\x3C/script&gt;');
        }
      &lt;/script&gt;
    </samp>

<div class="alert alert-warning mt-4">
      Don't forget to sanitize HTML output on the server side to avoid XSS vulnerability.
    </div>

<div class="alert alert-info mt-4">
      <p>
        Quill uses <code>.ql-*</code> classes for formatting. To display content
        properly you need to include <code>assets/vendor/libs/quill/typography.css</code>
        file in the <code>&lt;head&gt;</code> section and place Quill-generated content
        within <code>.ql-content</code> element.
      </p>
      <hr>
      <pre>&lt;head&gt;
  ...
  &lt;link rel="stylesheet" href="assets/vendor/libs/quill/typography.css"&gt;
  ...
&lt;/head&gt;
&lt;body&gt;
  ...
  &lt;div class="ql-content"&gt;
    &lt;p&gt;&lt;strong class="ql-font-monospace"&gt;Quill&lt;/strong&gt;-generated &lt;span class="ql-size-large"&gt;content&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  ...
&lt;/body&gt;</pre>
    </div>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          if (!window.Quill) {
            return $('#quill-editor,#quill-toolbar,#quill-bubble-editor,#quill-bubble-toolbar').remove();
          }

var editor = new Quill('#quill-editor', {
            modules: {
              toolbar: '#quill-toolbar'
            },
            placeholder: 'Type something',
            theme: 'snow'
          });

// Get HTML content:
          //
          // var content = editor.root.innerHTML;
          //

var bubbleEditor = new Quill('#quill-bubble-editor', {
            placeholder: 'Compose an epic...',
            modules: {
              toolbar: '#quill-bubble-toolbar'
            },
            theme: 'bubble'
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Typeahead</h3>
    <a target="_blank" href="https://github.com/twitter/typeahead.js/" class="ui-block-description">https://github.com/twitter/typeahead.js/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead.css"&gt;
      &lt;script src="assets/vendor/libs/typeahead-js/typeahead.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <label class="form-label">Enter a country name:</label>
      <input id="typeahead-input" class="form-control" type="text" autocomplete="off">

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

var substringMatcher = function(strs) {
            return function findMatches(q, cb) {
              var matches, substringRegex;

// an array that will be populated with substring matches
              matches = [];

// regex used to determine if a string contains the substring `q`
              substrRegex = new RegExp(q, 'i');

// iterate through the pool of strings and for any string that
              // contains the substring `q`, add it to the `matches` array
              $.each(strs, function(i, str) {
                if (substrRegex.test(str)) {
                  matches.push(str);
                }
              });

cb(matches);
            };
          };

var countries = [
            'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda',
            'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan',
            'Bahamas, The', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium',
            'Belize', 'Benin', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana',
            'Brazil', 'Brunei ', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia',
            'Cameroon', 'Canada', 'Cabo Verde', 'Central African Republic', 'Chad', 'Chile',
            'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic of the',
            'Congo, Republic of the', 'Costa Rica', 'Cote d\'Ivoire', 'Croatia', 'Cuba',
            'Curacao', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica',
            'Dominican Republic', 'Timor-Leste', 'Ecuador', 'Egypt', 'El Salvador',
            'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland',
            'France', 'Gabon', 'Gambia, The', 'Georgia', 'Germany', 'Ghana', 'Greece',
            'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Holy See',
            'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran',
            'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan',
            'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kosovo', 'Kuwait',
            'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya',
            'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar',
            'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands',
            'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Monaco',
            'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal',
            'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Korea',
            'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestinian Territories', 'Panama',
            'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal',
            'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia',
            'Saint Vincent and the Grenadines', 'Samoa ', 'San Marino', 'Sao Tome and Principe',
            'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore',
            'Sint Maarten', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa',
            'South Korea', 'South Sudan', 'Spain ', 'Sri Lanka', 'Sudan', 'Suriname',
            'Swaziland ', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania',
            'Thailand ', 'Timor-Leste', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia',
            'Turkey', 'Turkmenistan', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates',
            'United Kingdom', 'United States of America', 'Uruguay', 'Uzbekistan',
            'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe '
          ];

if (isRtl) {
            $('#typeahead-input').attr('dir', 'rtl');
          }

$('#typeahead-input').typeahead({
            hint: !isRtl,
            highlight: true,
            minLength: 1
          },
          {
            name: 'countries',
            source: substringMatcher(countries)
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">DataTables</h3>
    <a target="_blank" href="https://datatables.net" class="ui-block-description">https://datatables.net</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/datatables/datatables.css"&gt;
      &lt;script src="assets/vendor/libs/datatables/datatables.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div class="table-responsive">
        <table class="datatables-demo table table-striped table-bordered">
          <thead>
            <tr>
              <th>Rendering engine</th>
              <th>Browser</th>
              <th>Platform(s)</th>
              <th>Engine version</th>
              <th>CSS grade</th>
            </tr>
          </thead>
          <tbody>
            <tr class="odd gradeX">
              <td>Trident</td>
              <td>Internet
                Explorer 4.0</td>
              <td>Win 95+</td>
              <td class="center"> 4</td>
              <td class="center">X</td>
            </tr>
            <tr class="even gradeC">
              <td>Trident</td>
              <td>Internet
                Explorer 5.0</td>
              <td>Win 95+</td>
              <td class="center">5</td>
              <td class="center">C</td>
            </tr>
            <tr class="odd gradeA">
              <td>Trident</td>
              <td>Internet
                Explorer 5.5</td>
              <td>Win 95+</td>
              <td class="center">5.5</td>
              <td class="center">A</td>
            </tr>
            <tr class="even gradeA">
              <td>Trident</td>
              <td>Internet
                Explorer 6</td>
              <td>Win 98+</td>
              <td class="center">6</td>
              <td class="center">A</td>
            </tr>
            <tr class="odd gradeA">
              <td>Trident</td>
              <td>Internet Explorer 7</td>
              <td>Win XP SP2+</td>
              <td class="center">7</td>
              <td class="center">A</td>
            </tr>
            <tr class="even gradeA">
              <td>Trident</td>
              <td>AOL browser (AOL desktop)</td>
              <td>Win XP</td>
              <td class="center">6</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Firefox 1.0</td>
              <td>Win 98+ / OSX.2+</td>
              <td class="center">1.7</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Firefox 1.5</td>
              <td>Win 98+ / OSX.2+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Firefox 2.0</td>
              <td>Win 98+ / OSX.2+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Firefox 3.0</td>
              <td>Win 2k+ / OSX.3+</td>
              <td class="center">1.9</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Camino 1.0</td>
              <td>OSX.2+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Camino 1.5</td>
              <td>OSX.3+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Netscape 7.2</td>
              <td>Win 95+ / Mac OS 8.6-9.2</td>
              <td class="center">1.7</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Netscape Browser 8</td>
              <td>Win 98SE+</td>
              <td class="center">1.7</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Netscape Navigator 9</td>
              <td>Win 98+ / OSX.2+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.0</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.1</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.1</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.2</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.2</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.3</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.3</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.4</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.4</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.5</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.5</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.6</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">1.6</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.7</td>
              <td>Win 98+ / OSX.1+</td>
              <td class="center">1.7</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Mozilla 1.8</td>
              <td>Win 98+ / OSX.1+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Seamonkey 1.1</td>
              <td>Win 98+ / OSX.2+</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Gecko</td>
              <td>Epiphany 2.20</td>
              <td>Gnome</td>
              <td class="center">1.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>Safari 1.2</td>
              <td>OSX.3</td>
              <td class="center">125.5</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>Safari 1.3</td>
              <td>OSX.3</td>
              <td class="center">312.8</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>Safari 2.0</td>
              <td>OSX.4+</td>
              <td class="center">419.3</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>Safari 3.0</td>
              <td>OSX.4+</td>
              <td class="center">522.1</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>OmniWeb 5.5</td>
              <td>OSX.4+</td>
              <td class="center">420</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>iPod Touch / iPhone</td>
              <td>iPod</td>
              <td class="center">420.1</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Webkit</td>
              <td>S60</td>
              <td>S60</td>
              <td class="center">413</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 7.0</td>
              <td>Win 95+ / OSX.1+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 7.5</td>
              <td>Win 95+ / OSX.2+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 8.0</td>
              <td>Win 95+ / OSX.2+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 8.5</td>
              <td>Win 95+ / OSX.2+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 9.0</td>
              <td>Win 95+ / OSX.3+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 9.2</td>
              <td>Win 88+ / OSX.3+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera 9.5</td>
              <td>Win 88+ / OSX.3+</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Opera for Wii</td>
              <td>Wii</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Nokia N800</td>
              <td>N800</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>Presto</td>
              <td>Nintendo DS browser</td>
              <td>Nintendo DS</td>
              <td class="center">8.5</td>
              <td class="center">C/A<sup>1</sup></td>
            </tr>
            <tr class="gradeC">
              <td>KHTML</td>
              <td>Konqureror 3.1</td>
              <td>KDE 3.1</td>
              <td class="center">3.1</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeA">
              <td>KHTML</td>
              <td>Konqureror 3.3</td>
              <td>KDE 3.3</td>
              <td class="center">3.3</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeA">
              <td>KHTML</td>
              <td>Konqureror 3.5</td>
              <td>KDE 3.5</td>
              <td class="center">3.5</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeX">
              <td>Tasman</td>
              <td>Internet Explorer 4.5</td>
              <td>Mac OS 8-9</td>
              <td class="center">-</td>
              <td class="center">X</td>
            </tr>
            <tr class="gradeC">
              <td>Tasman</td>
              <td>Internet Explorer 5.1</td>
              <td>Mac OS 7.6-9</td>
              <td class="center">1</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeC">
              <td>Tasman</td>
              <td>Internet Explorer 5.2</td>
              <td>Mac OS 8-X</td>
              <td class="center">1</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeA">
              <td>Misc</td>
              <td>NetFront 3.1</td>
              <td>Embedded devices</td>
              <td class="center">-</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeA">
              <td>Misc</td>
              <td>NetFront 3.4</td>
              <td>Embedded devices</td>
              <td class="center">-</td>
              <td class="center">A</td>
            </tr>
            <tr class="gradeX">
              <td>Misc</td>
              <td>Dillo 0.8</td>
              <td>Embedded devices</td>
              <td class="center">-</td>
              <td class="center">X</td>
            </tr>
            <tr class="gradeX">
              <td>Misc</td>
              <td>Links</td>
              <td>Text only</td>
              <td class="center">-</td>
              <td class="center">X</td>
            </tr>
            <tr class="gradeX">
              <td>Misc</td>
              <td>Lynx</td>
              <td>Text only</td>
              <td class="center">-</td>
              <td class="center">X</td>
            </tr>
            <tr class="gradeC">
              <td>Misc</td>
              <td>IE Mobile</td>
              <td>Windows Mobile 6</td>
              <td class="center">-</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeC">
              <td>Misc</td>
              <td>PSP browser</td>
              <td>PSP</td>
              <td class="center">-</td>
              <td class="center">C</td>
            </tr>
            <tr class="gradeU">
              <td>Other browsers</td>
              <td>All others</td>
              <td>-</td>
              <td class="center">-</td>
              <td class="center">U</td>
            </tr>
          </tbody>
        </table>
      </div>

<div class="card">
        <h6 class="card-header">
          DataTable within card
        </h6>
        <div class="card-datatable table-responsive">
          <table class="datatables-demo table table-striped table-bordered">
            <thead>
              <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
              </tr>
            </thead>
            <tbody>
              <tr class="odd gradeX">
                <td>Trident</td>
                <td>Internet
                  Explorer 4.0</td>
                <td>Win 95+</td>
                <td class="center"> 4</td>
                <td class="center">X</td>
              </tr>
              <tr class="even gradeC">
                <td>Trident</td>
                <td>Internet
                  Explorer 5.0</td>
                <td>Win 95+</td>
                <td class="center">5</td>
                <td class="center">C</td>
              </tr>
              <tr class="odd gradeA">
                <td>Trident</td>
                <td>Internet
                  Explorer 5.5</td>
                <td>Win 95+</td>
                <td class="center">5.5</td>
                <td class="center">A</td>
              </tr>
              <tr class="even gradeA">
                <td>Trident</td>
                <td>Internet
                  Explorer 6</td>
                <td>Win 98+</td>
                <td class="center">6</td>
                <td class="center">A</td>
              </tr>
              <tr class="odd gradeA">
                <td>Trident</td>
                <td>Internet Explorer 7</td>
                <td>Win XP SP2+</td>
                <td class="center">7</td>
                <td class="center">A</td>
              </tr>
              <tr class="even gradeA">
                <td>Trident</td>
                <td>AOL browser (AOL desktop)</td>
                <td>Win XP</td>
                <td class="center">6</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Firefox 1.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td class="center">1.7</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Firefox 1.5</td>
                <td>Win 98+ / OSX.2+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Firefox 2.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Firefox 3.0</td>
                <td>Win 2k+ / OSX.3+</td>
                <td class="center">1.9</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Camino 1.0</td>
                <td>OSX.2+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Camino 1.5</td>
                <td>OSX.3+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Netscape 7.2</td>
                <td>Win 95+ / Mac OS 8.6-9.2</td>
                <td class="center">1.7</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Netscape Browser 8</td>
                <td>Win 98SE+</td>
                <td class="center">1.7</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Netscape Navigator 9</td>
                <td>Win 98+ / OSX.2+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.0</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.1</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.1</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.2</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.2</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.3</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.3</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.4</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.4</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.5</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.5</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.6</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">1.6</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.7</td>
                <td>Win 98+ / OSX.1+</td>
                <td class="center">1.7</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Mozilla 1.8</td>
                <td>Win 98+ / OSX.1+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Seamonkey 1.1</td>
                <td>Win 98+ / OSX.2+</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Gecko</td>
                <td>Epiphany 2.20</td>
                <td>Gnome</td>
                <td class="center">1.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>Safari 1.2</td>
                <td>OSX.3</td>
                <td class="center">125.5</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>Safari 1.3</td>
                <td>OSX.3</td>
                <td class="center">312.8</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>Safari 2.0</td>
                <td>OSX.4+</td>
                <td class="center">419.3</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>Safari 3.0</td>
                <td>OSX.4+</td>
                <td class="center">522.1</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>OmniWeb 5.5</td>
                <td>OSX.4+</td>
                <td class="center">420</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>iPod Touch / iPhone</td>
                <td>iPod</td>
                <td class="center">420.1</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Webkit</td>
                <td>S60</td>
                <td>S60</td>
                <td class="center">413</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 7.0</td>
                <td>Win 95+ / OSX.1+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 7.5</td>
                <td>Win 95+ / OSX.2+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 8.0</td>
                <td>Win 95+ / OSX.2+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 8.5</td>
                <td>Win 95+ / OSX.2+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 9.0</td>
                <td>Win 95+ / OSX.3+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 9.2</td>
                <td>Win 88+ / OSX.3+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera 9.5</td>
                <td>Win 88+ / OSX.3+</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Opera for Wii</td>
                <td>Wii</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Nokia N800</td>
                <td>N800</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>Presto</td>
                <td>Nintendo DS browser</td>
                <td>Nintendo DS</td>
                <td class="center">8.5</td>
                <td class="center">C/A<sup>1</sup></td>
              </tr>
              <tr class="gradeC">
                <td>KHTML</td>
                <td>Konqureror 3.1</td>
                <td>KDE 3.1</td>
                <td class="center">3.1</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeA">
                <td>KHTML</td>
                <td>Konqureror 3.3</td>
                <td>KDE 3.3</td>
                <td class="center">3.3</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeA">
                <td>KHTML</td>
                <td>Konqureror 3.5</td>
                <td>KDE 3.5</td>
                <td class="center">3.5</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeX">
                <td>Tasman</td>
                <td>Internet Explorer 4.5</td>
                <td>Mac OS 8-9</td>
                <td class="center">-</td>
                <td class="center">X</td>
              </tr>
              <tr class="gradeC">
                <td>Tasman</td>
                <td>Internet Explorer 5.1</td>
                <td>Mac OS 7.6-9</td>
                <td class="center">1</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeC">
                <td>Tasman</td>
                <td>Internet Explorer 5.2</td>
                <td>Mac OS 8-X</td>
                <td class="center">1</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeA">
                <td>Misc</td>
                <td>NetFront 3.1</td>
                <td>Embedded devices</td>
                <td class="center">-</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeA">
                <td>Misc</td>
                <td>NetFront 3.4</td>
                <td>Embedded devices</td>
                <td class="center">-</td>
                <td class="center">A</td>
              </tr>
              <tr class="gradeX">
                <td>Misc</td>
                <td>Dillo 0.8</td>
                <td>Embedded devices</td>
                <td class="center">-</td>
                <td class="center">X</td>
              </tr>
              <tr class="gradeX">
                <td>Misc</td>
                <td>Links</td>
                <td>Text only</td>
                <td class="center">-</td>
                <td class="center">X</td>
              </tr>
              <tr class="gradeX">
                <td>Misc</td>
                <td>Lynx</td>
                <td>Text only</td>
                <td class="center">-</td>
                <td class="center">X</td>
              </tr>
              <tr class="gradeC">
                <td>Misc</td>
                <td>IE Mobile</td>
                <td>Windows Mobile 6</td>
                <td class="center">-</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeC">
                <td>Misc</td>
                <td>PSP browser</td>
                <td>PSP</td>
                <td class="center">-</td>
                <td class="center">C</td>
              </tr>
              <tr class="gradeU">
                <td>Other browsers</td>
                <td>All others</td>
                <td>-</td>
                <td class="center">-</td>
                <td class="center">U</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

<script>
        $(function() {
          $('.datatables-demo').dataTable();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Table</h3>
    <a target="_blank" href="https://github.com/wenzhixin/bootstrap-table" class="ui-block-description">https://github.com/wenzhixin/bootstrap-table</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-table/bootstrap-table.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-table/bootstrap-table.js"&gt;&lt;/script&gt;

&lt;!-- External plugins --&gt;
      &lt;script src="assets/vendor/libs/tableexport/tableexport.js">&lt;/script&gt;
      &lt;script src="assets/vendor/libs/moment/moment.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/bootstrap-table/extensions/*"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div id="bootstrap-table-toolbar">
        <button id="bootstrap-table-remove" class="btn btn-danger" disabled>
          <i class="ion ion-md-close"></i> Delete
        </button>
      </div>

<script>
        $(function() {
          var $table = $('#bootstrap-table-example');
          var $remove = $('#bootstrap-table-remove');
          var selections = [];

function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
              return row.id;
            });
          }

$table.bootstrapTable({
            height: 500,
            iconsPrefix: 'opacity-75 ion',
            icons: {
              paginationSwitchDown: 'ion-ios-arrow-down icon-chevron-down',
              paginationSwitchUp: 'ion-ios-arrow-up icon-chevron-up',
              refresh: 'ion-md-refresh icon-refresh',
              columns: 'ion-md-apps icon-th',
              detailOpen: 'ion-md-add icon-plus',
              detailClose: 'ion-md-remove icon-minus',
              export: 'ion-md-cloud-download icon-share'
            },
            detailFormatter: function detailFormatter(index, row) {
              var html = [];

$.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + (typeof value === 'undefined' ? false : value) + '</p>');
              });

return html.join('');
            },
            columns: [
              [
                {
                  field: 'state',
                  checkbox: true,
                  rowspan: 2,
                  align: 'center',
                  valign: 'middle'
                }, {
                  title: 'Item ID',
                  field: 'id',
                  rowspan: 2,
                  align: 'center',
                  valign: 'middle',
                  sortable: true,
                  footerFormatter: function totalTextFormatter(data) {
                    return 'Total';
                  }
                }, {
                  title: 'Item Detail',
                  colspan: 3,
                  align: 'center'
                }
              ],
              [
                {
                  field: 'name',
                  title: 'Item Name',
                  sortable: true,
                  editable: true,
                  footerFormatter: function totalNameFormatter(data) {
                    return data.length;
                  },
                  align: 'center'
                }, {
                  field: 'price',
                  title: 'Item Price',
                  sortable: true,
                  align: 'center',
                  editable: {
                    type: 'text',
                    title: 'Item Price',
                    validate: function (value) {
                      value = $.trim(value);

if (!value) { return 'This field is required'; }
                      if (!/^\$/.test(value)) { return 'This field needs to start width $.' }

var data = $table.bootstrapTable('getData');
                      var index = $(this).parents('tr').data('index');

// console.log(data[index]);
                      return '';
                    }
                  },
                  footerFormatter: function totalPriceFormatter(data) {
                    var total = 0;

$.each(data, function (i, row) {
                      total += +(row.price.substring(1));
                    });

return '$' + total;
                  }
                }, {
                  field: 'operate',
                  title: 'Item Operate',
                  align: 'center',
                  events: {
                    'click .like': function (e, value, row, index) {
                      alert('You click like action, row: ' + JSON.stringify(row));
                    },
                    'click .remove': function (e, value, row, index) {
                      $table.bootstrapTable('remove', {
                        field: 'id',
                        values: [row.id]
                      });
                    }
                  },
                  formatter: function operateFormatter(value, row, index) {
                    return [
                      '<a class="btn btn-xs icon-btn btn-outline-default borderless like" href="javascript:void(0)" title="Like">',
                      '<i class="ion ion-md-heart"></i>',
                      '</a>  ',
                      '<a class="btn btn-xs icon-btn btn-outline-danger borderless remove" href="javascript:void(0)" title="Remove">',
                      '<i class="ion ion-md-close"></i>',
                      '</a>'
                    ].join('');
                  }
                }
              ]
            ]
          });

// Make bootstrapTable compatible with Bootstrap 4
          if ($('body').attr('dir') !== 'rtl' && $('html').attr('dir') !== 'rtl') {
            $('.bootstrap-table .pull-right .dropdown-menu').addClass('dropdown-menu-right');
            $('.bootstrap-table .pull-left .dropdown-menu').removeClass('dropdown-menu-right');
          } else {
            $('.bootstrap-table .pull-left .dropdown-menu').addClass('dropdown-menu-right');
          }

// sometimes footer render error.
          setTimeout(function () {
            $table.bootstrapTable('resetView');
          }, 200);

$table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
            // save your data, here just save the current page
            selections = getIdSelections();
            // push or splice the selections if you want to save all data selections
          });

$table.on('all.bs.table', function(e, name, args) {
            // console.log(name, args);
          });

$remove.click(function() {
            var ids = getIdSelections();

$table.bootstrapTable('remove', {
              field: 'id',
              values: ids
            });
            $remove.prop('disabled', true);
          });

});
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Sortable</h3>
    <a target="_blank" href="https://github.com/drvic10k/bootstrap-sortable" class="ui-block-description">https://github.com/drvic10k/bootstrap-sortable</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-sortable/bootstrap-sortable.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-sortable/bootstrap-sortable.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div class="table-responsive">
        <table class='table table-bordered table-striped sortable'>
          <thead>
            <tr>
              <th style="width: 20%; vertical-align: middle;" rowspan="2" class='az' data-defaultsign="nospan" data-defaultsort="asc"><i class="ion ion-ios-navigate"></i>&nbsp; Name</th>
              <th colspan="4" data-mainsort="3" style="text-align: center;">Results</th>
              <th data-defaultsort="disabled"></th>
            </tr>
            <tr>
              <th style="width: 20%" colspan="2" data-mainsort="1" data-firstsort="desc">Round 1</th>
              <th style="width: 20%">Round 2</th>
              <th style="width: 20%">Total</th>
              <th style="width: 20%" data-defaultsign="month">Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Jack Jackson</td>
              <td>30.51</td>
              <td>17.77</td>
              <td>14.99</td>
              <td>63.27</td>
              <td data-dateformat="DD-MM-YYYY">04-07-2013</td>
            </tr>
            <tr>
              <td class="sorted">Steven White</td>
              <td>6.21</td>
              <td>67.31</td>
              <td>84.32</td>
              <td>157.84</td>
              <td data-dateformat="DD-MM-YYYY">14-11-2016</td>
            </tr>
            <tr>
              <td class="sorted">Peter White</td>
              <td>15.53</td>
              <td>7.54</td>
              <td>37.36</td>
              <td>60.43</td>
              <td data-dateformat="DD-MM-YYYY">25-11-2012</td>
            </tr>
            <tr>
              <td class="sorted">Steven Spielberg</td>
              <td>0.25</td>
              <td>7.74</td>
              <td>15.19</td>
              <td>23.18</td>
              <td data-dateformat="DD-MM-YYYY">14-12-2001</td>
            </tr>
            <tr>
              <td class="sorted">Frank White</td>
              <td>24.81</td>
              <td>5.02</td>
              <td>18.1</td>
              <td>47.93</td>
              <td data-dateformat="DD-MM-YYYY">11.05.2016</td>
            </tr>
            <tr>
              <td class="sorted">Peter Jackson</td>
              <td>25.54</td>
              <td>26.32</td>
              <td>5.45</td>
              <td>57.31</td>
              <td data-dateformat="DD-MM-YYYY">09.04.2003</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Dropzone</h3>
    <a target="_blank" href="http://www.dropzonejs.com" class="ui-block-description">http://www.dropzonejs.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/dropzone/dropzone.css"&gt;
      &lt;script src="assets/vendor/libs/dropzone/dropzone.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div>
        <form action="/upload" class="dropzone needsclick" id="dropzone-demo">
          <div class="dz-message needsclick">
            Drop files here or click to upload
            <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
          </div>
          <div class="fallback">
            <input name="file" type="file" multiple>
          </div>
        </form>
      </div>

<script>
        $(function() {
          $('#dropzone-demo').dropzone({
            parallelUploads: 2,
            maxFilesize:     50000,
            filesizeBase:    1000,
            addRemoveLinks:  true,
          });

// Mock the file upload progress (only for the demo)
          //
          Dropzone.prototype.uploadFiles = function(files) {
            var minSteps         = 6;
            var maxSteps         = 60;
            var timeBetweenSteps = 100;
            var bytesPerStep     = 100000;
            var isUploadSuccess  = Math.round(Math.random());

var self = this;

for (var i = 0; i < files.length; i++) {

var file = files[i];
              var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));

for (var step = 0; step < totalSteps; step++) {
                var duration = timeBetweenSteps * (step + 1);

setTimeout(function(file, totalSteps, step) {
                  return function() {
                    file.upload = {
                      progress: 100 * (step + 1) / totalSteps,
                      total: file.size,
                      bytesSent: (step + 1) * file.size / totalSteps
                    };

self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
                    if (file.upload.progress == 100) {

if (isUploadSuccess) {
                        file.status =  Dropzone.SUCCESS;
                        self.emit('success', file, 'success', null);
                      } else {
                        file.status =  Dropzone.ERROR;
                        self.emit('error', file, 'Some upload error', null);
                      }

self.emit('complete', file);
                      self.processQueue();
                    }
                  };
                }(file, totalSteps, step), duration);
              }
            }
          };
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Flow.js</h3>
    <a target="_blank" href="https://github.com/flowjs/flow.js" class="ui-block-description">https://github.com/flowjs/flow.js</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/flow-js/flow.css"&gt;
      &lt;script src="assets/vendor/libs/flow-js/flow.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="flow-error alert alert-danger">
        Your browser, unfortunately, is not supported by Flow.js. The library requires support for <a href="http://www.w3.org/TR/FileAPI/">the HTML5 File API</a> along with <a href="http://www.w3.org/TR/FileAPI/#normalization-of-params">file slicing</a>.
      </div>

<div class="flow-drop py-5 px-3" ondragenter="$(this).addClass('flow-dragover')" ondragend="$(this).removeClass('flow-dragover')" ondrop="$(this).removeClass('flow-dragover')">
        <h4>Drop files here to upload or</h4>
        <button type="button" class="flow-browse btn btn-secondary">Select from your computer</button>
        <button type="button" class="flow-browse-image btn btn-secondary">Select images</button>
        <button type="button" class="flow-browse-folder btn btn-secondary">Select folder</button>
      </div>

<script>
        $(function() {
          var r = new Flow({
            target: 'http://posttestserver.com/post.php',
            permanentErrors: [500, 501],
            maxChunkRetries: 1,
            chunkRetryInterval: 5000,
            simultaneousUploads: 1
          });

// Flow.js isn't supported, fall back on a different method
          if (!r.support) {
            $('.flow-error').show();
            return ;
          }

// Show a place for dropping/selecting files
          $('.flow-drop').show();
          r.assignDrop($('.flow-drop')[0]);
          r.assignBrowse($('.flow-browse')[0]);
          r.assignBrowse($('.flow-browse-folder')[0], true);
          r.assignBrowse($('.flow-browse-image')[0], false, false, {accept: 'image/*'});

// Handle file add event
          r.on('fileAdded', function(file){
            // Show progress bar
            $('.flow-progress, .flow-list').removeClass('d-none');

// Add the file to the list
            $('.flow-list').append(
              '<li class="flow-file list-group-item flow-file-'+file.uniqueIdentifier+'">' +
                '<div class="flow-progress media">' +
                  '<div class="media-body">' +
                    '<div><strong class="flow-file-name"></strong> - <em class="flow-file-progress"><span class="text-muted">Waiting...</span></em></div>' +
                    '<div><small class="flow-file-size text-muted"></small></div>' +
                  '</div>' +
                  '<div class="align-self-center ml-3">' +
                    '<button type="button" class="flow-file-download btn btn-sm icon-btn btn-outline-primary"><i class="ion ion-md-download"></i></button>' +
                    '<button type="button" class="flow-file-pause btn btn-sm icon-btn btn-outline-warning"><i class="ion ion-md-pause"></i></button> ' +
                    '<button type="button" class="flow-file-resume btn btn-sm icon-btn btn-outline-success"><i class="ion ion-md-play"></i></button> ' +
                    '<button type="button" class="flow-file-cancel btn btn-sm icon-btn btn-outline-danger"><i class="ion ion-md-close"></i></button>' +
                  '</div>' +
                '</div>' +
              '</li>'
            );
            var $self = $('.flow-file-'+file.uniqueIdentifier);
            $self.find('.flow-file-name').text(file.name);
            $self.find('.flow-file-size').text(readablizeBytes(file.size));
            $self.find('.flow-file-download').attr('href', '/download/' + file.uniqueIdentifier).hide();
            $self.find('.flow-file-pause').on('click', function () {
              file.pause();
              $self.find('.flow-file-pause').hide();
              $self.find('.flow-file-resume').show();
            });
            $self.find('.flow-file-resume').on('click', function () {
              file.resume();
              $self.find('.flow-file-pause').show();
              $self.find('.flow-file-resume').hide();
            }).hide();
            $self.find('.flow-file-cancel').on('click', function () {
              file.cancel();
              $self.remove();
            });
          });
          r.on('filesSubmitted', function(file) {
            r.upload();
          });
          r.on('complete', function(){
            // Hide pause/resume when the upload has completed
            $('.flow-progress .progress-resume-link, .flow-progress .progress-pause-link').hide();
          });
          r.on('fileSuccess', function(file,message){
            var $self = $('.flow-file-'+file.uniqueIdentifier);
            // Reflect that the file upload has completed
            $self.find('.flow-file-progress').text('(completed)');
            $self.find('.flow-file-pause, .flow-file-resume').remove();
            $self.find('.flow-file-download').attr('href', '/download/' + file.uniqueIdentifier).show();
          });
          r.on('fileError', function(file, message){
            // Reflect that the file upload has resulted in error
            $('.flow-file-'+file.uniqueIdentifier+' .flow-file-progress')
              .addClass('text-danger')
              .text('(file could not be uploaded: ' + message + ')');
          });
          r.on('fileProgress', function(file){
            // if (!file.averageSpeed || file.averageSpeed.indexOf('undefined') !== -1) { return; }
            console.log(file.averageSpeed)

// Handle progress for both the file and the overall upload
            $('.flow-file-'+file.uniqueIdentifier+' .flow-file-progress')
              .html(Math.floor(file.progress()*100) + '% '
                + readablizeBytes(file.averageSpeed) + '/s '
                + secondsToStr(file.timeRemaining()) + ' remaining') ;
            $('.flow-progress .progress-bar').css({width:Math.floor(r.progress()*100) + '%'});
          });
          r.on('uploadStart', function(){
            // Show pause, hide resume
            $('.flow-progress .progress-resume-link').hide();
            $('.flow-progress .progress-pause-link').show();
          });
          r.on('catchAll', function() {
            console.log.apply(console, arguments);
          });
          window.r = {
            pause: function () {
              r.pause();
              // Show resume, hide pause
              $('.flow-file-resume').show();
              $('.flow-file-pause').hide();
              $('.flow-progress .progress-resume-link').show();
              $('.flow-progress .progress-pause-link').hide();
            },
            cancel: function() {
              r.cancel();
              $('.flow-progress .progress-resume-link').hide();
              $('.flow-progress .progress-pause-link').hide();
              $('.flow-progress .progress-bar').css({width: '0%'});
              $('.flow-file').remove();
            },
            upload: function() {
              $('.flow-file-pause').show();
              $('.flow-file-resume').hide();
              r.resume();
            },
            flow: r
          };

function readablizeBytes(bytes) {
            if (!bytes) { return '0 kB'; }

<div class="ui-block">
    <h3 class="ui-block-heading">Dragula</h3>
    <a target="_blank" href="https://github.com/bevacqua/dragula" class="ui-block-description">https://github.com/bevacqua/dragula</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/dragula/dragula.css"&gt;
      &lt;script src="assets/vendor/libs/dragula/dragula.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="row">
        <div id="dragula-left" class="col">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              You can move these elements between these two containers
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Moving them anywhere else isn't quite possible
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Anything can be moved around. That includes images, <a href='https://github.com/bevacqua/dragula'>links</a>, or any other nested elements.
              <img src="assets/img/bg/4.jpg" alt="" class="w-100 my-3">
              <sub>(You can still click on links, as usual!)</sub>
            </div>
          </div>
        </div>
        <div id="dragula-right" class="col">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              There's also the possibility of moving elements around in the same container, changing their position
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              This is the default use case. You only need to specify the containers you want to use
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              More interactive use cases lie ahead
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              <p>Moving <code>&lt;input/&gt;</code> elements works just fine. You can still focus them, too.</p>
              <input placeholder='See?' class="form-control">
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a>
            </div>
          </div>
        </div>
      </div>

<h4 class="ui-block-heading">Copying</h4>

<div class="row">
        <div id="dragula-left-copy" class="col-6">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              When elements are copyable, they can't be sorted in their origin container
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Copying prevents original elements from being dragged. A copy gets created and <em>that</em> gets dragged instead
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Whenever that happens, a <code>cloned</code> event is raised
            </div>
          </div>
        </div>
        <div id="dragula-right-copy" class="col-6">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              Note that the clones get destroyed if they're not dropped into another container
            </div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
            </div>
          </div>
        </div>
      </div>

<h4 class="ui-block-heading">Drag handle</h4>

<div class="row">
        <div id="dragula-left-drag-handles" class="col-6">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              <span class="handle ion ion-ios-move d-inline-block bg-primary text-white p-2 mr-2 mb-1"></span>Move me, but you can use the plus sign to drag me around.</div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              <span class="handle ion ion-ios-move d-inline-block bg-primary text-white p-2 mr-2 mb-1"></span>Note that <code>handle</code> element in the <code>moves</code> handler is just the original event target.</div>
          </div>
        </div>
        <div id="dragula-right-drag-handles" class="col-6">
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              <span class="handle ion ion-ios-move d-inline-block bg-primary text-white p-2 mr-2 mb-1"></span>This might also be useful if you want multiple children of an element to be able to trigger a drag event.</div>
          </div>
          <div class="dragula-example card card-condenced">
            <div class="card-body">
              <span class="handle ion ion-ios-move d-inline-block bg-primary text-white p-2 mr-2 mb-1"></span>You can also use the <code>moves</code> option to determine whether an element can be dragged at all from a container, <em>drag handle or not</em>.</div>
          </div>
        </div>
      </div>

<style>
        .dragula-example {
          margin-bottom: 6px;
        }
      </style>

<script>
        $(function() {
          dragula([$('#dragula-left')[0], $('#dragula-right')[0]], {
            revertOnSpill: true
          });

// Copying
          dragula([$('#dragula-left-copy')[0], $('#dragula-right-copy')[0]], {
            copy: true
          });

// Drag handle
          dragula([$('#dragula-left-drag-handles')[0], $('#dragula-right-drag-handles')[0]], {
            moves: function (el, container, handle) {
              return handle.classList.contains('handle');
            }
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Sortable.js</h3>
    <a target="_blank" href="https://github.com/RubaXa/Sortable" class="ui-block-description">https://github.com/RubaXa/Sortable</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/sortablejs/sortable.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<style>
        .sortable-example {
          margin: 0;
          padding: 0;
        }
        .sortable-example li {
          padding: 6px 10px;
          margin-bottom: 8px;
          list-style: none;
        }
        .sortable-example-inline li {
          margin-right: 8px;
          display: inline-block;
        }
        [dir=rtl] .sortable-example-inline li {
          margin-right: 0;
          margin-left: 8px;
        }

#sortable-3 {
          width: 220px;
        }
        #sortable-3 img {
          margin-right: 8px;
          margin-bottom: 8px;
          width: 100px;
          height: 100px;
          border-radius: 999px;
          display: block;
          float: left;
        }
        [dir=rtl] #sortable-3 img {
          margin-right: 0;
          margin-left: 8px;
          float: right;
        }
      </style>

<script>
        $(function() {
          Sortable.create(document.getElementById('sortable-1'), { animation: 150 });
          Sortable.create(document.getElementById('sortable-2'), { animation: 150 });
          Sortable.create(document.getElementById('sortable-3'), { animation: 150 });
          Sortable.create(document.getElementById('sortable-4'), {
            animation: 150,
            handle: '.ion'
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Swiper</h3>
    <a target="_blank" href="https://github.com/nolimits4web/swiper/" class="ui-block-description">https://github.com/nolimits4web/swiper/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/swiper/swiper.css"&gt;
      &lt;script src="assets/vendor/libs/swiper/swiper.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing-lg">
      <div class="swiper-container" id="swiper-default">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
      </div>

<div class="swiper-container" id="swiper-with-arrows">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-button-next custom-icon"><i class="lnr lnr-chevron-right text-primary"></i></div>
        <div class="swiper-button-prev custom-icon"><i class="lnr lnr-chevron-left text-primary"></i></div>
      </div>

<div class="swiper-container" id="swiper-with-pagination">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-with-fraction-pagination">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-with-progress">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next custom-icon"><i class="lnr lnr-chevron-right"></i></div>
        <div class="swiper-button-prev custom-icon"><i class="lnr lnr-chevron-left"></i></div>
      </div>

<div class="swiper-container" id="swiper-with-scrollbar">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>

<div class="swiper-container" id="swiper-vertical">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-multiple-slides">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-fade-effect">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
        <div class="swiper-button-next custom-icon"><i class="lnr lnr-chevron-right small"></i></div>
        <div class="swiper-button-prev custom-icon"><i class="lnr lnr-chevron-left small"></i></div>
      </div>

<div class="swiper-container" id="swiper-3d-cube-effect">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-3d-coverflow-effect">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

<div class="swiper-container" id="swiper-3d-flip-effect">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next custom-icon"><i class="lnr lnr-chevron-right text-muted"></i></div>
        <div class="swiper-button-prev custom-icon"><i class="lnr lnr-chevron-left text-muted"></i></div>
      </div>

<style>
        .swiper-container .swiper-slide {
          padding: 5rem 0;
          text-align: center;
          font-size: 1.5rem;
          background: #ecebed;
        }

#swiper-vertical {
          max-height: 195px;
        }

#swiper-3d-cube-effect {
          max-width: 300px;
        }

#swiper-3d-coverflow-effect .swiper-slide {
          max-width: 300px;
        }

#swiper-3d-flip-effect,
        #swiper-3d-flip-effect .swiper-slide {
          max-width: 300px;
        }

#swiper-3d-flip-effect {
          padding: 50px;
        }
      </style>

<script>
        $(function() {
          var defaultSwiper = new Swiper('#swiper-default');

var swiperWithArrows = new Swiper('#swiper-with-arrows', {
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          });

var swiperWithPagination = new Swiper('#swiper-with-pagination', {
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          });

var swiperWithFractionPagination = new Swiper('#swiper-with-fraction-pagination', {
            pagination: {
              el: '.swiper-pagination',
              type: 'fraction'
            }
          });

var swiperWithProgress = new Swiper('#swiper-with-progress', {
            pagination: {
              el: '.swiper-pagination',
              type: 'progressbar'
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          });

var swiperWithScrollbar = new Swiper('#swiper-with-scrollbar', {
            scrollbar: {
              el: '.swiper-scrollbar',
              hide: true
            }
          });

var verticalSwiper = new Swiper('#swiper-vertical', {
            direction: 'vertical',
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          });

var swiperMultipleSlides = new Swiper('#swiper-multiple-slides', {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          });

var swiperFadeEffect = new Swiper('#swiper-fade-effect', {
            effect: 'fade',
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          });

var swiper3dCubeEffect = new Swiper('#swiper-3d-cube-effect', {
            effect: 'cube',
            grabCursor: true,
            cubeEffect: {
              shadow: true,
              slideShadows: true,
              shadowOffset: 20,
              shadowScale: 0.94
            },
            pagination: {
              el: '.swiper-pagination'
            }
          });

var swiper3dCoverflowEffect = new Swiper('#swiper-3d-coverflow-effect', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
              rotate: 50,
              stretch: 0,
              depth: 100,
              modifier: 1,
              slideShadows : true
            },
            pagination: {
              el: '.swiper-pagination'
            }
          });

var swiper3dFlipEffect = new Swiper('#swiper-3d-flip-effect', {
            effect: 'flip',
            grabCursor: true,
            pagination: {
              el: '.swiper-pagination'
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Knob</h3>
    <a target="_blank" href="http://anthonyterrien.com/knob/" class="ui-block-description">http://anthonyterrien.com/knob/</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/knob/knob.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          $('.knob-example input').knob();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Menu</h3>
    <a target="_blank" href="https://github.com/dgoguerra/bootstrap-menu" class="ui-block-description">https://github.com/dgoguerra/bootstrap-menu</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/bootstrap-menu/bootstrap-menu.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div id="bs-menu-example" class="position-relative text-center" style="height: 300px; border:1px solid #ddd">
        <span style="line-height: 300px">Right click anywhere inside this box</span>
      </div>

<script>
        $(function() {
          var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';

new BootstrapMenu('#bs-menu-example', {
            menuPosition: isRtl ? 'belowRight' : 'belowLeft',
            actionsGroups: [
              ['actionName', 'anotherActionName' ],
              ['thirdActionName']
            ],
            actions: {
              actionName: {
                name: 'Action',
                onClick: function() {
                  toastr.info("'Action' clicked!");
                }
              },
              anotherActionName: {
                name: 'Another action',
                iconClass: 'ion ion-md-create',
                onClick: function() {
                  toastr.info("'Another action' clicked!");
                }
              },
              thirdActionName: {
                name: 'A third action',
                iconClass: 'ion ion-md-unlock',
                onClick: function() {
                  toastr.info("'A third action' clicked!");
                }
              }
            }
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Dual Listbox</h3>
    <a target="_blank" href="http://www.virtuosoft.eu/code/bootstrap-duallistbox/" class="ui-block-description">http://www.virtuosoft.eu/code/bootstrap-duallistbox/</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-duallistbox/bootstrap-duallistbox.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-duallistbox/bootstrap-duallistbox.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <select multiple="multiple" size="10" id="duallistbox-example">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3" selected="selected">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6" selected="selected">Option 6</option>
        <option value="option7">Option 7</option>
        <option value="option8">Option 8</option>
        <option value="option9">Option 9</option>
        <option value="option0">Option 10</option>
        <option value="option0">Option 11</option>
        <option value="option0">Option 12</option>
        <option value="option0">Option 13</option>
        <option value="option0">Option 14</option>
        <option value="option0">Option 15</option>
        <option value="option0">Option 16</option>
        <option value="option0">Option 17</option>
        <option value="option0">Option 18</option>
        <option value="option0">Option 19</option>
        <option value="option0">Option 20</option>
      </select>

<script>
        $(function() {
          $('#duallistbox-example').bootstrapDualListbox({
            nonSelectedListLabel: 'Non-selected',
            selectedListLabel: 'Selected',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Nestable</h3>
    <a target="_blank" href="https://github.com/dbushell/Nestable" class="ui-block-description">https://github.com/dbushell/Nestable</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/nestable/nestable.css"&gt;
      &lt;script src="assets/vendor/libs/nestable/nestable.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div>
        <div id="nestable-menu" class="mb-4">
          <button type="button" class="btn btn-default btn-sm" data-action="expand-all">Expand All</button>
          <button type="button" class="btn btn-default btn-sm" data-action="collapse-all">Collapse All</button>
        </div>

</div>
          <div class="col-md-6">

</div>
        </div>
      </div>

<div>
        
        <h6 class="mt-5 mb-4">Custom drag handle example</h6>

<style type="text/css">
        #nestable2 .dd-handle {
          background: #f6f6f6;
          padding: .625rem 1.25rem;
        }

#nestable2 button[data-action] {
          margin-top: .625rem;
        }

html:not([dir=rtl]) body:not([dir=rtl]) #nestable2 button[data-action]~.dd-handle {
          padding-left: 2rem;
        }

[dir=rtl] #nestable2 button[data-action]~.dd-handle {
          padding-right: 2rem;
        }

/* Custom drag handle */

.dd-custom-drag-handle .dd-handle {
          border: 0;
          float: left;
          margin: 1px;
          font-size: .625rem;
          line-height: 1.25rem;
        }

.dd-custom-drag-handle .dd-handle>* {
          vertical-align: middle;
        }

[dir=rtl] .dd-custom-drag-handle .dd-handle {
          float: right;
        }
      </style>

<script>
        $(function() {
          function updateOutput(e) {
            var list   = e.length ? e : $(e.target);
            var output = list.data('output');

output.val(window.JSON ? window.JSON.stringify(list.nestable('serialize')) :
                                     'JSON browser support required for this demo.');
          };

$('#nestable').nestable({ group: 1 }).on('change', updateOutput);
          $('#nestable2').nestable({ group: 1 }).on('change', updateOutput);

// output initial serialised data
          updateOutput($('#nestable').data('output', $('#nestable-output')));
          updateOutput($('#nestable2').data('output', $('#nestable2-output')));

$('#nestable-menu').on('click', function(e) {
            var target = $(e.target);
            var action = target.data('action');

if (action === 'expand-all') {
              $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
              $('.dd').nestable('collapseAll');
            }
          });

$('#nestable3').nestable();
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">jsTree</h3>
    <a target="_blank" href="https://www.jstree.com" class="ui-block-description">https://www.jstree.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/jstree/themes/default/style.css"&gt;
      &lt;script src="assets/vendor/libs/jstree/jstree.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div class="row">
        <div class="col-md-6">
          <h6>Default</h6>

<div id="jstree-example-1" style="margin-top:20px;min-height:200px;border:1px solid #ddd;padding:20px;">
            <ul>
              <li>css
                <ul>
                  <li data-jstree='{"icon" : "jstree-file"}'>app.css</li>
                  <li data-jstree='{"icon" : "jstree-file"}'>style.css</li>
                </ul>
              </li>
              <li class="jstree-open">img
                <ul>
                  <li data-jstree='{"icon" : "jstree-file"}'>bg.jpg</li>
                  <li data-jstree='{"icon" : "jstree-file"}'>logo.png</li>
                  <li data-jstree='{"icon" : "jstree-file"}'>avatar.png</li>
                </ul>
              </li>
              <li class="jstree-open">js
                <ul>
                  <li data-jstree='{"icon" : "jstree-file"}'>jquery.js</li>
                  <li data-jstree='{"icon" : "jstree-file"}'>app.js</li>
                </ul>
              </li>
              <li class="text-primary" data-jstree='{"icon" : "jstree-file"}'> index.html</li>
              <li class="text-primary" data-jstree='{"icon" : "jstree-file"}'> page-one.html</li>
              <li data-jstree='{"icon" : "jstree-file"}'> page-two.html</li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <h6>Custom icons</h6>

<script>
        $(function() {
          $('#jstree-example-1').jstree();
          $('#jstree-example-2').jstree({
            core : {
              data : [
                {
                  text: 'css',
                  children: [
                    { text: 'app.css', type: 'css' },
                    { text: 'style.css', type: 'css' },
                  ],
                },
                {
                  text: 'img',
                  state: {
                    opened: true
                  },
                  children: [
                    { text: 'bg.jpg', type: 'img' },
                    { text: 'logo.png', type: 'img' },
                    { text: 'avatar.png', type: 'img' },
                  ],
                },
                {
                  text: 'js',
                  state: {
                    opened: true
                  },
                  children: [
                    { text: 'jquery.js', type: 'js' },
                    { text: 'app.js', type: 'js' },
                  ],
                },
                { text: 'index.html', type: 'html' },
                { text: 'page-one.html', type: 'html' },
                { text: 'page-two.html', type: 'html' }
              ]
            },
            plugins: [ 'types' ],
            types: {
              default: { icon: 'ion ion-ios-folder' },
              html: { icon: 'ion ion-logo-html5 text-danger' },
              css: { icon: 'ion ion-logo-css3 text-info' },
              img: { icon: 'ion ion-ios-image text-success' },
              js: { icon: 'ion ion-logo-nodejs text-warning' }
            }
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Ladda</h3>
    <a target="_blank" href="https://github.com/hakimel/Ladda" class="ui-block-description">https://github.com/hakimel/Ladda</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/ladda/ladda.css"&gt;
      &lt;script src="assets/vendor/libs/ladda/ladda.js"&gt;&lt;/script&gt;

&lt;script src="assets/vendor/libs/spin/spin.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div class="row button-demo">
        <div class="col">
          <h6>expand-left</h6>
          <button class="btn btn-primary ladda-button" data-style="expand-left">Submit</button>
        </div>

<div class="col">
          <h6>expand-right</h6>
          <button class="btn btn-primary ladda-button" data-style="expand-right">Submit</button>
        </div>

<div class="col">
          <h6>expand-up</h6>
          <button class="btn btn-primary ladda-button" data-style="expand-up">Submit</button>
        </div>

<div class="col">
          <h6>expand-down</h6>
          <button class="btn btn-primary ladda-button" data-style="expand-down">Submit</button>
        </div>
      </div>

<div class="row button-demo">
        <div class="col">
          <h6>contract</h6>
          <button class="btn btn-success ladda-button" data-style="contract">Submit</button>
        </div>

<div class="col">
          <h6>contract-overlay</h6>
          <button class="btn btn-success ladda-button" data-style="contract-overlay" style="z-index: 10;">Submit</button>
        </div>

<div class="col">
          <h6>zoom-in</h6>
          <button class="btn btn-success ladda-button" data-style="zoom-in">Submit</button>
        </div>

<div class="col">
          <h6>zoom-out</h6>
          <button class="btn btn-success ladda-button" data-style="zoom-out">Submit</button>
        </div>
      </div>

<div class="row button-demo">
        <div class="col">
          <h6>slide-left</h6>
          <button class="btn btn-info ladda-button" data-style="slide-left">Submit</button>
        </div>

<div class="col">
          <h6>slide-right</h6>
          <button class="btn btn-info ladda-button" data-style="slide-right">Submit</button>
        </div>

<div class="col">
          <h6>slide-up</h6>
          <button class="btn btn-info ladda-button" data-style="slide-up">Submit</button>
        </div>

<div class="col">
          <h6>slide-down</h6>
          <button class="btn btn-info ladda-button" data-style="slide-down">Submit</button>
        </div>
      </div>

<div class="row">
        <h5 class="col mt-5 mb-4">Built-in progress bar</h5>
      </div>

<div class="row progress-demo">
        <div class="col">
          <h6>expand-right</h6>
          <button class="btn btn-danger ladda-button" data-style="expand-right">Submit</button>
        </div>

<div class="col">
          <h6>contract</h6>
          <button class="btn btn-danger ladda-button" data-style="contract">Submit</button>
        </div>
      </div>

<script>
        $(function() {
          // Bind normal buttons
          Ladda.bind( '.button-demo button', { timeout: 2000 } );

// Bind progress buttons and simulate loading progress
          Ladda.bind( '.progress-demo button', {
            callback: function( instance ) {
              var progress = 0;
              var interval = setInterval( function() {
                progress = Math.min( progress + Math.random() * 0.1, 1 );
                instance.setProgress( progress );

if( progress === 1 ) {
                  instance.stop();
                  clearInterval( interval );
                }
              }, 200 );
            }
          } );
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">jQuery Validation</h3>
    <a target="_blank" href="https://jqueryvalidation.org" class="ui-block-description">https://jqueryvalidation.org</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/validate/validate.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <form id="validation-form">
        <div class="form-group">
          <label class="form-label">Email</label>
          <input type="text" class="form-control" name="validation-email" placeholder="Email">
          <small class="form-text text-muted">Example block-level help text here.</small>
        </div>
        <div class="form-group">
          <label class="form-label">Password</label>
          <input type="password" class="form-control" name="validation-password" placeholder="Password">
          <small class="form-text text-muted">Example block-level help text here.</small>
        </div>
        <div class="form-group">
          <label class="form-label">Confirm password</label>
          <input type="password" class="form-control" name="validation-password-confirmation" placeholder="Confirm password">
        </div>
        <div class="form-group">
          <label class="form-label">Required</label>
          <input type="text" class="form-control" name="validation-required" placeholder="Required">
        </div>
        <div class="form-group">
          <label class="form-label">URL</label>
          <input type="text" class="form-control" name="validation-url" placeholder="Url">
        </div>
        <div class="form-group">
          <label class="form-label">Phone</label>
          <input type="text" class="form-control" name="validation-phone" placeholder="Phone: (999) 999-9999">
        </div>
        <div class="form-group">
          <label class="form-label">Select</label>
          <select class="form-control" name="validation-select">
            <option value>Select gear...</option>
            <optgroup label="Climbing">
              <option value="pitons">Pitons</option>
              <option value="cams">Cams</option>
              <option value="nuts">Nuts</option>
              <option value="bolts">Bolts</option>
              <option value="stoppers">Stoppers</option>
              <option value="sling">Sling</option>
            </optgroup>
            <optgroup label="Skiing">
              <option value="skis">Skis</option>
              <option value="skins">Skins</option>
              <option value="poles">Poles</option>
            </optgroup>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Multiselect</label>
          <select class="form-control" name="validation-multiselect" multiple>
            <optgroup label="Climbing">
              <option value="pitons">Pitons</option>
              <option value="cams">Cams</option>
              <option value="nuts">Nuts</option>
              <option value="bolts">Bolts</option>
              <option value="stoppers">Stoppers</option>
              <option value="sling">Sling</option>
            </optgroup>
            <optgroup label="Skiing">
              <option value="skis">Skis</option>
              <option value="skins">Skins</option>
              <option value="poles">Poles</option>
            </optgroup>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Select2</label>
          <div>
            <select class="form-control" name="validation-select2" style="width: 100%">
              <option></option>
              <option value="ANGULAR">AngularJS</option>
              <option value="REACT">React</option>
              <option value="BACKBONE">Backbone</option>
              <option value="EMBER">Ember</option>
              <option value="TODOMVC">TodoMVC</option>
              <option value="POLYMER">Polymer</option>
              <option value="KNOCKOUT">Knockout</option>
              <option value="AURELIA">Aurelia</option>
              <option value="SPINE">Spine</option>
              <option value="BRICK">Brick</option>
              <option value="NUCLEAR">Nuclear.js</option>
              <option value="DOJO">Dojo</option>
              <option value="MATRESHKA">Matreshka</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Select2 Multiple</label>
          <div>
            <select class="form-control" name="validation-select2-multi" multiple style="width: 100%">
              <optgroup label="Climbing">
                <option value="pitons">Pitons</option>
                <option value="cams">Cams</option>
                <option value="nuts">Nuts</option>
                <option value="bolts">Bolts</option>
                <option value="stoppers">Stoppers</option>
                <option value="sling">Sling</option>
              </optgroup>
              <optgroup label="Skiing">
                <option value="skis">Skis</option>
                <option value="skins">Skins</option>
                <option value="poles">Poles</option>
              </optgroup>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Bootstrap Tagsinput</label>
          <div>
            <input type="text" value="" data-role="tagsinput" class="form-control" name="validation-bs-tagsinput">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Text</label>
          <textarea class="form-control" name="validation-text"></textarea>
        </div>
        <div class="form-group">
          <label class="form-label">File</label>
          <div>
            <input type="file" class="validation-file" name="validation-file">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Switcher</label><br>
          <label class="switcher switcher-primary d-block">
            <input type="checkbox" class="switcher-input" name="validation-switcher">
            <span class="switcher-indicator">
              <span class="switcher-yes"></span>
              <span class="switcher-no"></span>
            </span>
            <span class="switcher-label">Check me</span>
          </label>
        </div>
        <div class="form-group">
          <label class="form-label">Radios</label>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="validation-radios">
              Option one is this and that—be sure to include why it's great
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="validation-radios">
              Option two can be something else and selecting it will deselect option one
            </label>
          </div>
          <div class="form-check disabled">
            <label class="form-check-label">
              <input class="form-check-input" type="radio" name="validation-radios">
              Option three is disabled
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Custom radios</label>
          <div class="custom-controls-stacked">
            <label class="custom-control custom-radio">
              <input name="validation-radios-custom" type="radio" class="custom-control-input">
              <span class="custom-control-label">Option one is this and that—be sure to include why it's great</span>
            </label>
            <label class="custom-control custom-radio">
              <input name="validation-radios-custom" type="radio" class="custom-control-input">
              <span class="custom-control-label">Option two can be something else and selecting it will deselect option one</span>
            </label>
            <label class="custom-control custom-radio">
              <input name="validation-radios-custom" type="radio" class="custom-control-input">
              <span class="custom-control-label">Option three is disabled</span>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Checkbox</label>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" name="validation-checkbox">
              Check me out
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Checkbox group</label>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" name="validation-checkbox-group-1">
              One
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" name="validation-checkbox-group-2">
              Two
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Custom checkbox</label><br>
          <label class="custom-control custom-checkbox d-block">
            <input type="checkbox" class="custom-control-input" name="validation-checkbox-custom">
            <span class="custom-control-label">Check me</span>
          </label>
        </div>
        <div class="form-group">
          <label class="form-label">Custom checkbox group</label>
          <div class="custom-controls-stacked">
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" name="validation-checkbox-custom-group-1">
              <span class="custom-control-label">One</span>
            </label>
            <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" name="validation-checkbox-custom-group-2">
              <span class="custom-control-label">Two</span>
            </label>
          </div>
        </div>

<button type="submit" class="btn btn-primary">Submit</button>
      </form>

<script>
        $(function() {
          // Initialize Select2 select box
          $('select[name="validation-select2"]').select2({
            allowClear:  true,
            placeholder: 'Select a framework...',
          }).change(function() {
            $(this).valid();
          });

// Initialize Select2 multiselect box
          $('select[name="validation-select2-multi"]').select2({
            placeholder: 'Select gear...',
          }).change(function() {
            $(this).valid();
          });

// Trigger validation on tagsinput change
          $('input[name="validation-bs-tagsinput"]').on('itemAdded itemRemoved', function() {
            $(this).valid();
          });

// Add phone validator
          $.validator.addMethod(
            'phone_format',
            function(value, element) {
              return this.optional(element) || /^$\d{3}$[ ]\d{3}\-\d{4}$/.test(value);
            },
            'Invalid phone number.'
          );

// Initialize validation
          $('#validation-form').validate({
            ignore: '.ignore, .select2-input',
            focusInvalid: false,
            rules: {
              'validation-email': {
                required: true,
                email: true
              },
              'validation-password': {
                required: true,
                minlength: 6,
                maxlength: 20
              },
              'validation-password-confirmation': {
                required: true,
                minlength: 6,
                equalTo: 'input[name="validation-password"]'
              },
              'validation-required': {
                required: true
              },
              'validation-url': {
                required: true,
                url: true
              },
              'validation-phone': {
                required: true,
                phone_format: true
              },
              'validation-select': {
                required: true
              },
              'validation-multiselect': {
                required: true,
                minlength: 2
              },
              'validation-select2': {
                required: true
              },
              'validation-select2-multi': {
                required: true,
                minlength: 2
              },
              'validation-bs-tagsinput': {
                required: true
              },
              'validation-text': {
                required: true
              },
              'validation-file': {
                required: true
              },
              'validation-switcher': {
                required: true
              },
              'validation-radios': {
                required: true
              },
              'validation-radios-custom': {
                required: true
              },
              'validation-checkbox': {
                required: true
              },
              'validation-checkbox-custom': {
                required: true
              },

// Checkbox groups
              //

'validation-checkbox-group-1': {
                require_from_group: [1, 'input[name="validation-checkbox-group-1"], input[name="validation-checkbox-group-2"]']
              },
              'validation-checkbox-group-2': {
                require_from_group: [1, 'input[name="validation-checkbox-group-1"], input[name="validation-checkbox-group-2"]']
              },

'validation-checkbox-custom-group-1': {
                require_from_group: [1, 'input[name="validation-checkbox-custom-group-1"], input[name="validation-checkbox-custom-group-2"]']
              },
              'validation-checkbox-custom-group-2': {
                require_from_group: [1, 'input[name="validation-checkbox-custom-group-1"], input[name="validation-checkbox-custom-group-2"]']
              }
            },

// Errors
            //

errorPlacement: function errorPlacement(error, element) {
              var $parent = $(element).parents('.form-group');

// Do not duplicate errors
              if ($parent.find('.jquery-validation-error').length) { return; }

$parent.append(
                error.addClass('jquery-validation-error small form-text invalid-feedback')
              );
            },
            highlight: function(element) {
              var $el = $(element);
              var $parent = $el.parents('.form-group');

$el.addClass('is-invalid');

// Select2 and Tagsinput
              if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                $el.parent().addClass('is-invalid');
              }
            },
            unhighlight: function(element) {
              $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
            }
          });

});
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Vegas</h3>
    <a target="_blank" href="https://vegas.jaysalvat.com" class="ui-block-description">https://vegas.jaysalvat.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/vegas/vegas.css"&gt;
      &lt;script src="assets/vendor/libs/vegas/vegas.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div id="vegas-dark-overlay-example" class="vegas-overlay-black">
        <h3 class="text-center text-white py-4 my-5">Dark overlay</h3>
      </div>

<div id="vegas-light-overlay-example" class="vegas-overlay-white">
        <h3 class="text-default text-center py-4 my-5">Light overlay</h3>
      </div>

<div id="vegas-fixed-bg-example" class="vegas-fixed-background">
        <h3 class="text-center text-white py-4 my-5">Fixed background</h3>
      </div>

<script>
        $(function() {
          $('#vegas-example').vegas({
            slides: [
              { src: "assets/img/bg/1.jpg" },
              { src: "assets/img/bg/2.jpg" },
              { src: "assets/img/bg/3.jpg" },
              { src: "assets/img/bg/4.jpg" },
              { src: "assets/img/bg/5.jpg" }
            ],
            transition: [ 'fade', 'zoomOut', 'zoomIn', 'blur' ],
            animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]
          });

// Progess color
          $('#vegas-example .vegas-timer-progress').css('background', 'rgba(0,0,0,.2)');

// Overlays
          $('#vegas-dark-overlay-example, #vegas-light-overlay-example').vegas({
            overlay: true,
            timer: false,
            shuffle: true,
            slides: [
              { src: "assets/img/bg/1.jpg" },
              { src: "assets/img/bg/2.jpg" },
              { src: "assets/img/bg/3.jpg" },
              { src: "assets/img/bg/4.jpg" },
              { src: "assets/img/bg/5.jpg" }
            ],
            transition: [ 'fade', 'blur' ],
          });

// Fixed bg
          $('#vegas-fixed-bg-example').vegas({
            overlay: false,
            timer: false,
            shuffle: true,
            slides: [
              { src: "assets/img/bg/1.jpg" },
              { src: "assets/img/bg/2.jpg" },
              { src: "assets/img/bg/3.jpg" },
              { src: "assets/img/bg/4.jpg" },
              { src: "assets/img/bg/5.jpg" }
            ],
            transition: [ 'fade', 'blur' ],
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Cropper</h3>
    <a target="_blank" href="https://github.com/fengyuanchen/cropperjs" class="ui-block-description">https://github.com/fengyuanchen/cropperjs</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/cropper/cropper.css"&gt;
      &lt;script src="assets/vendor/libs/cropper/cropper.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

</div>
        <div class="col-md-3">

<div class="mb-3 clearfix">
            <div class="cropper-example-preview lg"></div>
            <div class="cropper-example-preview md"></div>
            <div class="cropper-example-preview sm"></div>
            <div class="cropper-example-preview xs"></div>
          </div>

<div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">X</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataX" placeholder="x" readonly>
            <div class="input-group-append">
              <div class="input-group-text">px</div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">Y</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataY" placeholder="y" readonly>
            <div class="input-group-append">
              <div class="input-group-text">px</div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">Width</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataWidth" placeholder="width" readonly>
            <div class="input-group-append">
              <div class="input-group-text">px</div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">Height</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataHeight" placeholder="height" readonly>
            <div class="input-group-append">
              <div class="input-group-text">px</div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">Rotate</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataRotate" placeholder="rotate" readonly>
            <div class="input-group-append">
              <div class="input-group-text">deg</div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">ScaleX</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataScaleX" placeholder="scaleX" readonly>
          </div>
          <div class="input-group input-group-sm mb-1">
            <div class="input-group-prepend">
              <div class="input-group-text">ScaleY</div>
            </div>
            <input type="text" class="form-control" id="cropper-example-dataScaleY" placeholder="scaleY" readonly>
          </div>

</div>
      </div>
      <div class="row">
        <div class="cropper-example-buttons col-md-9">

<div class="btn-group mb-1">
            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-toggle="cropper-example-tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
              Get Cropped Canvas
            </button>
            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }" data-toggle="cropper-example-tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;160,&nbsp;height:&nbsp;90})">
              160&times;90
            </button>
            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" data-toggle="cropper-example-tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;320,&nbsp;height:&nbsp;180})">
              320&times;180
            </button>
          </div>

</div>
      </div>

<div class="modal fade cropper-example-cropped" id="cropper-example-getCroppedCanvasModal" aria-hidden="true" aria-labelledby="cropper-example-getCroppedCanvasTitle" role="dialog" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="cropper-example-getCroppedCanvasTitle">Cropped</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body ie-mh-1"></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <a class="btn btn-primary" id="cropper-example-download" href="javascript:void(0);" download="cropped.jpg">Download</a>
            </div>
          </div>
        </div>
      </div>

<style>
        .cropper-example-container,
        .cropper-example-preview {
          background-color: #f7f7f7;
          width: 100%;
          text-align: center;
        }

/* Container */
        .cropper-example-container {
          min-height: 200px;
          max-height: 400px;
          margin-bottom: 1rem;
          overflow: hidden;
        }
        .cropper-example-container > img {
          max-width: 100%;
        }

@media (min-width: 768px) {
          .cropper-example-container {
            min-height: 400px;
          }
        }

/* Preview */
        .cropper-example-preview {
          float: left;
          margin-right: .5rem;
          margin-bottom: .5rem;
          overflow: hidden;
          max-width: 100% !important;
        }
        [dir=rtl] .cropper-example-preview {
          direction: ltr;
          float: right;
          margin-right: 0;
          margin-left: .5rem;
        }
        .cropper-example-preview > img {
          max-width: 100%;
        }
        .cropper-example-preview.lg {
          width: 16rem;
          height: 9rem;
        }
        .cropper-example-preview.md {
          width: 8rem;
          height: 4.5rem;
        }
        .cropper-example-preview.sm {
          width: 4rem;
          height: 2.25rem;
        }
        .cropper-example-preview.xs {
          width: 2rem;
          height: 1.125rem;
          margin-right: 0;
        }
        [dir=rtl] .cropper-example-preview.xs {
          margin-left: 0;
        }

/* Modal */
        .cropper-example-cropped .modal-body {
          text-align: center;
        }
        .cropper-example-cropped .modal-body > img,
        .cropper-example-cropped .modal-body > canvas {
          max-width: 100%;
        }
        .cropper-example-cropped .close {
          position: absolute;
          right: 20px;
          top: 20px;
        }
      </style>

<script>
        $(function () {
          $('[data-toggle="cropper-example-tooltip"]').tooltip({ container: 'body' });

var URL = window.URL || window.webkitURL;
          var $image = $('#cropper-example-image');
          var $download = $('#cropper-example-download');
          var options = {
            aspectRatio: 16 / 9,
            preview: '.cropper-example-preview',
            crop: function (e) {
              $('#cropper-example-dataX').val(Math.round(e.detail.x));
              $('#cropper-example-dataY').val(Math.round(e.detail.y));
              $('#cropper-example-dataHeight').val(Math.round(e.detail.height));
              $('#cropper-example-dataWidth').val(Math.round(e.detail.width));
              $('#cropper-example-dataRotate').val(e.detail.rotate);
              $('#cropper-example-dataScaleX').val(e.detail.scaleX);
              $('#cropper-example-dataScaleY').val(e.detail.scaleY);
            }
          };

var originalImageURL = $image.attr('src');
          var uploadedImageURL;

// Cropper
          $image.cropper(options);

// IE10 fix
          if (typeof document.documentMode === 'number' && document.documentMode < 11) {
            options = $.extend({}, options, {zoomOnWheel: false});
            setTimeout(function() {
              $image.cropper('destroy').cropper(options);
            }, 1000);
          }

// Buttons
          if (!$.isFunction(document.createElement('canvas').getContext)) {
            $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
          }
          if (typeof document.createElement('cropper').style.transition === 'undefined') {
            $('button[data-method="rotate"]').prop('disabled', true);
            $('button[data-method="scale"]').prop('disabled', true);
          }

// Download
          if (typeof $download[0].download === 'undefined') {
            $download.addClass('disabled');
          }

// Methods
          $('.cropper-example-buttons').on('click', '[data-method]', function () {
            var $this = $(this);
            var data = $this.data();
            var result;

if ($this.prop('disabled') || $this.hasClass('disabled')) {
              return;
            }

if ($image.data('cropper') && data.method) {
              data = $.extend({}, data); // Clone a new one

if (data.method === 'rotate') {
                $image.cropper('clear');
              }

result = $image.cropper(data.method, data.option, data.secondOption);

if (data.method === 'rotate') {
                $image.cropper('crop');
              }

switch (data.method) {
                case 'scaleX':
                case 'scaleY':
                  $(this).data('option', -data.option);
                  break;

case 'getCroppedCanvas':
                  if (result) {

// Bootstrap's Modal
                    $('#cropper-example-getCroppedCanvasModal').modal().find('.modal-body').html(result);

if (!$download.hasClass('disabled')) {
                      $download.attr('href', result.toDataURL('image/jpeg'));
                    }
                  }

break;

case 'destroy':
                  if (uploadedImageURL) {
                    URL.revokeObjectURL(uploadedImageURL);
                    uploadedImageURL = '';
                    $image.attr('src', originalImageURL);
                  }

break;
              }
            }
          });

// Import image
          var $inputImage = $('#cropper-example-inputImage');

if (URL) {
            $inputImage.change(function () {
              var files = this.files;
              var file;

if (!$image.data('cropper')) {
                return;
              }

if (files && files.length) {
                file = files[0];

if (/^image\/\w+$/.test(file.type)) {
                  if (uploadedImageURL) {
                    URL.revokeObjectURL(uploadedImageURL);
                  }

uploadedImageURL = URL.createObjectURL(file);
                  $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                  $inputImage.val('');
                } else {
                  window.alert('Please choose an image file.');
                }
              }
            });
          } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
          }
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Maxlength</h3>
    <a target="_blank" href="https://github.com/mimo84/bootstrap-maxlength" class="ui-block-description">https://github.com/mimo84/bootstrap-maxlength</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          $('.bootstrap-maxlength-example').each(function() {
            $(this).maxlength({
              warningClass: 'label label-success',
              limitReachedClass: 'label label-danger',
              separator: ' out of ',
              preText: 'You typed ',
              postText: ' chars available.',
              validate: true,
              threshold: +this.getAttribute('maxlength')
            });
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Bootstrap Tour</h3>
    <a target="_blank" href="http://bootstraptour.com" class="ui-block-description">http://bootstraptour.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/bootstrap-tour/bootstrap-tour.css"&gt;
      &lt;script src="assets/vendor/libs/bootstrap-tour/bootstrap-tour.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="row">
        <div class="col-sm-4" id="tour-1">
          <p>Lorem ipsum dolor sit amet, nam ut odio essent indoctum, an graecis detracto intellegat cum.</p>
        </div>
        <div class="col-sm-4">
          <p>Duo te aperiri accommodare voluptatibus.</p>
        </div>
        <div class="col-sm-4" id="tour-2">
          <p>Eam unum facilis accusata no, facer libris pro ei, vim verterem mandamus intellegam cu.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6" id="tour-3">
          <p>Qui nobis docendi ut.</p>
        </div>
        <div class="col-sm-6">
          <p>Ad sea illud quidam oblique, nec ipsum discere intellegebat an.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <p>Quem natum constituam mei ut, et vim graeco aliquam periculis.</p>
        </div>
        <div class="col-sm-3" id="tour-5">
          <p>Vix eu tritani mentitum.</p>
        </div>
        <div class="col-sm-3">
          <p>Diam iracundia definitiones ea eam.</p>
        </div>
        <div class="col-sm-3" id="tour-4">
          <p>Mel nonumes adolescens an, at duo modus partiendo maiestatis, sed integre honestatis cu.</p>
        </div>
      </div>

<button class="btn btn-default" id="bs-tour-example">Start tour</button>

<script>
        $(function() {
          var tour = new Tour({
            backdrop: true,
            steps: [
              {
                element: "#tour-1",
                title: "Title of first step",
                content: "Content of first step",
                smartPlacement: true
              },
              {
                element: "#tour-2",
                title: "Title of second step",
                content: "Content of second step",
                smartPlacement: true
              },
              {
                element: "#tour-3",
                title: "Title of third step",
                content: "Content of third step",
                smartPlacement: true
              },
              {
                element: "#tour-4",
                title: "Title of fourth step",
                content: "Content of fourth step",
                smartPlacement: true
              },
              {
                element: "#tour-5",
                title: "Title of fifth step",
                content: "Content of fifth step",
                smartPlacement: true
              }
            ]
          });
          // Initialize the tour
          tour.init();

$('#bs-tour-example').click(function() {
            tour.restart();
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Pwstrength-bootstrap</h3>
    <a target="_blank" href="https://github.com/ablanco/jquery.pwstrength.bootstrap" class="ui-block-description">https://github.com/ablanco/jquery.pwstrength.bootstrap</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/pwstrength-bootstrap/pwstrength-bootstrap.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<style>
        .pwstrength-progress.progress {
          margin: 3px 0;
          height: 3px;
        }
        .password-verdict {
          font-size: 12px;
          font-weight: 700;
          display: block;
          text-align: right;
        }
        [dir=rtl] .password-verdict {
          text-align: left;
        }
      </style>

<script>
        $(function() {
          $('#pwstrength-example').pwstrength({
            ui: {
              progressExtraCssClasses: 'pwstrength-progress',
              useVerdictCssClass: true,
              showErrors: true
            }
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block" style="overflow: hidden;">
    <h3 class="ui-block-heading">Clipboard</h3>
    <a target="_blank" href="https://clipboardjs.com" class="ui-block-description">https://clipboardjs.com</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/clipboard/clipboard.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <textarea id="clipboard-example" rows="3" class="form-control">Lorem ipsum dolor sit amet, nec an eros dicam, vero apeirian ei est. Eu duo stet adhuc insolens, movet vitae audire duo an, mei in delectus luptatum.</textarea>
      <br>

<script>
        $(function() {
          if (Clipboard.isSupported()) {
            new Clipboard('.clipboard-example-btn');
          } else {
            $('.clipboard-example-btn').prop('disabled', true);
          }
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Masonry</h3>
    <a target="_blank" href="http://masonry.desandro.com" class="ui-block-description">http://masonry.desandro.com</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/masonry/masonry.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<style>
        .masonry-grid {
          background: #f8f8f8
        }

/* clearfix */
        .masonry-grid:after {
          content: '';
          display: block;
          clear: both;
        }

/* ---- masonry-grid-item ---- */

.masonry-grid-item {
          width: 160px;
          height: 120px;
          float: left;
          background: rgba(0,0,0,.05);
          border: 2px solid rgba(0,0,0,.05);
          border-radius: 5px;
        }

.masonry-grid-item--width2 { width: 320px; }
        .masonry-grid-item--width3 { width: 480px; }
        .masonry-grid-item--width4 { width: 640px; }

.masonry-grid-item--height2 { height: 200px; }
        .masonry-grid-item--height3 { height: 260px; }
        .masonry-grid-item--height4 { height: 360px; }
      </style>

<script>
        $(function() {
          $('.masonry-grid').masonry({
            itemSelector: '.masonry-grid-item',
            columnWidth: 160,
            originLeft: !($('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl')
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Spinkit</h3>
    <a target="_blank" href="https://github.com/tobiasahlin/SpinKit" class="ui-block-description">https://github.com/tobiasahlin/SpinKit</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/spinkit/spinkit.css"&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="ui-block">
    <h3 class="ui-block-heading">BlockUI</h3>
    <a target="_blank" href="http://malsup.com/jquery/block/" class="ui-block-description">http://malsup.com/jquery/block/</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/block-ui/block-ui.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="card mb-3" id="block-ui-element-example">
        <div class="card-header">
          Card title
        </div>
        <div class="card-body">
          <p>
            Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis
            neglegentur ut, oporteat salutandi dignissim at mea. Pericula erroribus
            quaerendum ex duo, his autem accusamus ad, alienum detracto rationibus
            vis et. No est volumus ocurreret vituperata.
          </p>
          <p>
            At pri facete recteque, eos omittam hendrerit maiestatis et. Ut aliquip
            regione pericula mea, sed te ornatus vivendum, tritani persius atomorum
            id pro. Laoreet epicurei ei duo. Ad nulla senserit sit, has ne prima option.
          </p>
        </div>
      </div>

<button type="button" class="btn btn-default" id="block-ui-block-page">Block page</button>
      <button type="button" class="btn btn-default" id="block-ui-block-element">Block element</button>
      <button type="button" class="btn btn-default" id="block-ui-unblock-element">Unblock element</button>

<script>
        $(function() {
          $('#block-ui-block-page').click(function() {
            $.blockUI({
              message: '<div class="sk-folding-cube sk-primary"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div><h5 style="color: #444">LOADING...</h5>',
              css: {
                backgroundColor: 'transparent',
                border: '0',
                zIndex: 9999999
              },
              overlayCSS:  {
                backgroundColor: '#fff',
                opacity: 0.8,
                zIndex: 9999990
              }
            });

setTimeout(function() {
              $.unblockUI();
            }, 5000);
          });

$('#block-ui-block-element').click(function() {
            $('#block-ui-element-example').block({
              message: '<div class="sk-wave sk-primary"><div class="sk-rect sk-rect1"></div> <div class="sk-rect sk-rect2"></div> <div class="sk-rect sk-rect3"></div> <div class="sk-rect sk-rect4"></div> <div class="sk-rect sk-rect5"></div></div>',
              css: {
                backgroundColor: 'transparent',
                border: '0'
              },
              overlayCSS:  {
                backgroundColor: '#fff',
                opacity: 0.8
              }
            });
          });

$('#block-ui-unblock-element').click(function() {
            $('#block-ui-element-example').unblock();
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Photoswipe</h3>
    <a target="_blank" href="http://photoswipe.com" class="ui-block-description">http://photoswipe.com</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/photoswipe/photoswipe.css"&gt;
      &lt;script src="assets/vendor/libs/photoswipe/photoswipe.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          // Utility function (see src/libs/photoswipe/photoswipe.es6)
          // See the docs: http://photoswipe.com/documentation/getting-started.html
          //
          initPhotoSwipeFromDOM('#photoswipe-example');
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Blueimp Gallery</h3>
    <a target="_blank" href="https://github.com/blueimp/Gallery" class="ui-block-description">https://github.com/blueimp/Gallery</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery.css"&gt;
      &lt;link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery-indicator.css"&gt;
      &lt;link rel="stylesheet" href="assets/vendor/libs/blueimp-gallery/gallery-video.css"&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery-fullscreen.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery-indicator.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery-video.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery-vimeo.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/libs/blueimp-gallery/gallery-youtube.js"&gt;&lt;/script&gt;
    </samp>

<div class="alert alert-warning rtl-only mt-5">
      Blueimp Gallery does not support touch events and slide animation in RTL mode.
    </div>

<h4 class="ui-block-heading">Examples</h4>

<div class="row" id="blueimp-gallery-example">
        <div class="col-md-3">
          <a href="assets/img/bg/1.jpg" class="img-thumbnail" title="Image 1"><img src="assets/img/bg/1.jpg" class="img-fluid" alt="Image 1"></a>
        </div>
        <div class="col-md-3">
          <a href="assets/img/bg/2.jpg" class="img-thumbnail" title="Image 2"><img src="assets/img/bg/2.jpg" class="img-fluid" alt="Image 2"></a>
        </div>
        <div class="col-md-3">
          <a href="assets/img/bg/3.jpg" class="img-thumbnail" title="Image 3"><img src="assets/img/bg/3.jpg" class="img-fluid" alt="Image 3"></a>
        </div>
        <div class="col-md-3">
          <a href="assets/img/bg/4.jpg" class="img-thumbnail" title="Image 4"><img src="assets/img/bg/4.jpg" class="img-fluid" alt="Image 4"></a>
        </div>
      </div>

<h4 class="ui-block-heading">Carousel</h4>

<script>
        $(function() {
          // Lightbox
          $('#blueimp-gallery-example').on('click', '.img-thumbnail', function(e) {
            e.preventDefault();

var links = $('#blueimp-gallery-example').find('.img-thumbnail');

window.blueimpGallery(links, {
              container: '#blueimp-gallery-example-container',
              carousel: true,
              hidePageScrollbars: true,
              disableScroll: true,
              index: this
            });
          });

// Carousel
          window.blueimpGallery([
            'assets/img/bg/1.jpg',
            'assets/img/bg/2.jpg',
            'assets/img/bg/3.jpg',
            'assets/img/bg/4.jpg',
            'assets/img/bg/5.jpg',
          ], {
            container: '#blueimp-carousel-example',
            carousel: true
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">IdleTimer</h3>
    <a target="_blank" href="https://github.com/thorst/jquery-idletimer" class="ui-block-description">https://github.com/thorst/jquery-idletimer</a>

<samp class="cui-example-code-static">
      &lt;script src="assets/vendor/libs/idletimer/idletimer.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="row">
        <div class="col-md-6">
          <h5>Document <small>5 second timeout</small></h5>
          <div class="btn-group">
            <button type="button" id="idletimer-doc-Pause" class="btn btn-default btn-sm">Pause</button>
            <button type="button" id="idletimer-doc-Resume" class="btn btn-default btn-sm">Resume</button>
            <button type="button" id="idletimer-doc-Elapsed" class="btn btn-default btn-sm">Elapsed</button>
            <button type="button" id="idletimer-doc-Init" class="btn btn-default btn-sm">Init</button>
            <button type="button" id="idletimer-doc-Destroy" class="btn btn-default btn-sm">Destroy</button>
          </div>
          <br><br>
          <textarea rows="10" cols="30" id="idletimer-doc-Status" class="form-control"></textarea><br>
        </div>
        <div class="col-md-6">
          <h5>Element <small>3 second timeout</small></h5>
          <div class="btn-group">
            <button type="button" id="idletimer-el-Reset" class="btn btn-default btn-sm">Reset</button>
            <button type="button" id="idletimer-el-LastActive" class="btn btn-default btn-sm">Last Active</button>
            <button type="button" id="idletimer-el-Remaining" class="btn btn-default btn-sm">Remaining</button>
            <button type="button" id="idletimer-el-State" class="btn btn-default btn-sm">State</button>
          </div>
          <br><br>
          <textarea rows="10" cols="30" id="idletimer-el-Status" class="form-control"></textarea><br>
        </div>
      </div>

<script>
        // Idle on document
        //

$(function() {
          var docTimeout = 5000;

// Handle raised idle/active events
          $(document).on("idle.idleTimer", function(event, elem, obj) {
            $("#idletimer-doc-Status")
              .val(function(i, v) {
                return v + "Idle @ " + moment().format() + " \n";
              })
              .removeClass("alert-success")
              .addClass("alert-warning");
          });
          $(document).on("active.idleTimer", function(event, elem, obj, e) {
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Active [" + e.type + "] [" + e.target.nodeName + "] @ " + moment().format() + " \n";
              })
              .addClass("alert-success")
              .removeClass("alert-warning");
          });

// Handle button events
          $("#idletimer-doc-Pause").click(function() {
            $(document).idleTimer("pause");
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Paused @ " + moment().format() + " \n";
              });
            $(this).blur();
            return false;
          });
          $("#idletimer-doc-Resume").click(function() {
            $(document).idleTimer("resume");
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Resumed @ " + moment().format() + " \n";
              });
            $(this).blur();
            return false;
          });
          $("#idletimer-doc-Elapsed").click(function() {
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Elapsed (since becoming active): " + $(document).idleTimer("getElapsedTime") + " \n";
              });
            $(this).blur();
            return false;
          });
          $("#idletimer-doc-Destroy").click(function() {
            $(document).idleTimer("destroy");
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Destroyed: @ " + moment().format() + " \n";
              })
              .removeClass("alert-success")
              .removeClass("alert-warning");
            $(this).blur();
            return false;
          });
          $("#idletimer-doc-Init").click(function() {
            // for demo purposes show init with just object
            $(document).idleTimer({ timeout: docTimeout });
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Init: @ " + moment().format() + " \n";
              });

//Apply classes for default state
            if ($(document).idleTimer("isIdle")) {
              $('#idletimer-doc-Status')
                .removeClass("alert-success")
                .addClass("alert-warning");
            } else {
              $('#idletimer-doc-Status')
                .addClass("alert-success")
                .removeClass("alert-warning");
            }
            $(this).blur();
            return false;
          });

//Clear old statuses
          $('#idletimer-doc-Status').val('');

//Start timeout, passing no options
          //Same as $.idleTimer(docTimeout, docOptions);
          $(document).idleTimer(docTimeout);

//For demo purposes, style based on initial state
          if ($(document).idleTimer("isIdle")) {
            $("#idletimer-doc-Status")
            .val(function(i, v) {
              return v + "Initial Idle State @ " + moment().format() + " \n";
            })
            .removeClass("alert-success")
            .addClass("alert-warning");
          } else {
            $('#idletimer-doc-Status')
              .val(function(i, v) {
                return v + "Initial Active State @ " + moment().format() + " \n";
              })
              .addClass("alert-success")
              .removeClass("alert-warning");
          }
        });

// Idle on element
        //

$(function() {
          var elTimeout = 3000;

// Handle raised idle/active events
          $('#idletimer-el-Status').on("idle.idleTimer", function(event, elem, obj) {
            //If you dont stop propagation it will bubble up to document event handler
            event.stopPropagation();

$('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "Idle @ " + moment().format() + " \n";
              })
              .removeClass("alert-success")
              .addClass("alert-warning");

});
          $('#idletimer-el-Status').on("active.idleTimer", function(event) {
            //If you dont stop propagation it will bubble up to document event handler
            event.stopPropagation();

$('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "Active @ " + moment().format() + " \n";
              })
              .addClass("alert-success")
              .removeClass("alert-warning");
          });

// Handle button events
          $("#idletimer-el-Reset").click(function() {
            $('#idletimer-el-Status')
              .idleTimer("reset")
              .val(function(i, v) {
                return v + "Reset @ " + moment().format() + " \n";
              });

//Apply classes for default state
            if ($("#idletimer-el-Status").idleTimer("isIdle")) {
              $('#idletimer-el-Status')
                .removeClass("alert-success")
                .addClass("alert-warning");
            } else {
              $('#idletimer-el-Status')
                .addClass("alert-success")
                .removeClass("alert-warning");
            }
            $(this).blur();
            return false;
          });
          $("#idletimer-el-Remaining").click(function() {
            $('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "Remaining: " + $("#idletimer-el-Status").idleTimer("getRemainingTime") + " \n";
              });
            $(this).blur();
            return false;
          });
          $("#idletimer-el-LastActive").click(function() {
            $('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "LastActive: " + $("#idletimer-el-Status").idleTimer("getLastActiveTime") + " \n";
              });
            $(this).blur();
            return false;
          });
          $("#idletimer-el-State").click(function() {
            $('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "State: " + ($("#idletimer-el-Status").idleTimer("isIdle")? "idle":"active") + " \n";
              });
            $(this).blur();
            return false;
          });

//Clear value if there was one cached & start time
          $('#idletimer-el-Status').val('').idleTimer(elTimeout);

//For demo purposes, show initial state
          if ($("#idletimer-el-Status").idleTimer("isIdle")) {
            $("#idletimer-el-Status")
              .val(function(i, v) {
                return v + "Initial Idle @ " + moment().format() + " \n";
              })
              .removeClass("alert-success")
              .addClass("alert-warning");
          } else {
            $('#idletimer-el-Status')
              .val(function(i, v) {
                return v + "Initial Active @ " + moment().format() + " \n";
              })
              .addClass("alert-success")
              .removeClass("alert-warning");
          }
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">SmartWizard</h3>
    <a target="_blank" href="https://github.com/techlab/SmartWizard" class="ui-block-description">https://github.com/techlab/SmartWizard</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/smartwizard/smartwizard.css"&gt;
      &lt;script src="assets/vendor/libs/smartwizard/smartwizard.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div id="smartwizard-1">
        <ul>
          <li><a href="#smartwizard-1-step-1" class="mb-3">
              <span class="sw-number">1</span>
              <div class="text-muted small">FIRST STEP</div>
              Keyboard
            </a></li>
          <li><a href="#smartwizard-1-step-2" class="mb-3">
              <span class="sw-number">2</span>
              <div class="text-muted small">SECOND STEP</div>
              Effects
            </a></li>
          <li><a href="#smartwizard-1-step-3" class="mb-3">
              <span class="sw-number">3</span>
              <div class="text-muted small">THIRD STEP</div>
              Pager
            </a></li>
        </ul>

<div class="mb-3">
          <div id="smartwizard-1-step-1" class="card animated fadeIn">
            <div class="card-body">
              Step Content 1
            </div>
          </div>
          <div id="smartwizard-1-step-2" class="card animated fadeIn">
            <div class="card-body">
              Step Content 2
            </div>
          </div>
          <div id="smartwizard-1-step-3" class="card animated fadeIn">
            <div class="card-body">
              Step Content 3
            </div>
          </div>
        </div>
      </div>

<script>
        $(function() {
          $('#smartwizard-1').smartWizard({
            autoAdjustHeight: false,
            backButtonSupport: false,
            useURLhash: false,
            showStepURLhash: false
          });
        });
      </script>
      
    </div>

<div class="cui-example">
      <div id="smartwizard-2">
        <ul>
          <li><a href="#smartwizard-2-step-1" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-keypad"></span>
              Keyboard
              <div class="text-muted small">Set up shortcuts</div>
            </a></li>
          <li><a href="#smartwizard-2-step-2" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-color-wand"></span>
              Effects
              <div class="text-muted small">Add effects</div>
            </a></li>
          <li><a href="#smartwizard-2-step-3" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-md-copy"></span>
              Pager
              <div class="text-muted small">Select pager options</div>
            </a></li>
          <li><a href="#smartwizard-2-step-4" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-md-notifications-outline"></span>
              Notifications
              <div class="text-muted small">Set up notifications</div>
            </a></li>
        </ul>

<div class="mb-3">
          <div id="smartwizard-2-step-1" class="card animated fadeIn">
            <div class="card-body">
              Step Content 1
            </div>
          </div>
          <div id="smartwizard-2-step-2" class="card animated fadeIn">
            <div class="card-body">
              Step Content 2
            </div>
          </div>
          <div id="smartwizard-2-step-3" class="card animated fadeIn">
            <div class="card-body">
              Step Content 3
            </div>
          </div>
          <div id="smartwizard-2-step-4" class="card animated fadeIn">
            <div class="card-body">
              Step Content 4
            </div>
          </div>
        </div>
      </div>

<script>
        $(function() {
          $('#smartwizard-2').smartWizard({
            autoAdjustHeight: false,
            backButtonSupport: false,
            useURLhash: false,
            showStepURLhash: false
          });
        });
      </script>
      
    </div>

<h4 class="ui-block-heading">Boxed steps</h4>

<div class="cui-example">
      <div id="smartwizard-3">
        <ul class="card px-4 pt-3 mb-3">
          <li><a href="#smartwizard-3-step-1" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">1</span>
              <div class="text-muted small">FIRST STEP</div>
              Keyboard
            </a></li>
          <li><a href="#smartwizard-3-step-2" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">2</span>
              <div class="text-muted small">SECOND STEP</div>
              Effects
            </a></li>
          <li><a href="#smartwizard-3-step-3" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">3</span>
              <div class="text-muted small">THIRD STEP</div>
              Pager
            </a></li>
        </ul>

<div class="mb-3">
          <div id="smartwizard-3-step-1" class="card animated fadeIn">
            <div class="card-body">
              Step Content 1
            </div>
          </div>
          <div id="smartwizard-3-step-2" class="card animated fadeIn">
            <div class="card-body">
              Step Content 2
            </div>
          </div>
          <div id="smartwizard-3-step-3" class="card animated fadeIn">
            <div class="card-body">
              Step Content 3
            </div>
          </div>
        </div>
      </div>

<script>
        $(function() {
          $('#smartwizard-3').smartWizard({
            autoAdjustHeight: false,
            backButtonSupport: false,
            useURLhash: false,
            showStepURLhash: false
          });
        });
      </script>
      
    </div>

<h4 class="ui-block-heading">Vertical</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <div id="smartwizard-4" class="smartwizard-vertical-left">
        <ul>
          <li><a href="#smartwizard-4-step-1" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-keypad"></span>
              <div class="text-muted small">FIRST STEP</div>
              Keyboard
            </a></li>
          <li><a href="#smartwizard-4-step-2" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-color-wand"></span>
              <div class="text-muted small">SECOND STEP</div>
              Effects
            </a></li>
          <li><a href="#smartwizard-4-step-3" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-md-copy"></span>
              <div class="text-muted small">THIRD STEP</div>
              Pager
            </a></li>
        </ul>

<div class="mb-3">
          <div id="smartwizard-4-step-1" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 1
            </div>
          </div>
          <div id="smartwizard-4-step-2" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 2
            </div>
          </div>
          <div id="smartwizard-4-step-3" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 3
            </div>
          </div>
        </div>
      </div>

<div id="smartwizard-5" class="smartwizard-vertical-right">
        <ul>
          <li><a href="#smartwizard-5-step-1" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-keypad"></span>
              <div class="text-muted small">FIRST STEP</div>
              Keyboard
            </a></li>
          <li><a href="#smartwizard-5-step-2" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-ios-color-wand"></span>
              <div class="text-muted small">SECOND STEP</div>
              Effects
            </a></li>
          <li><a href="#smartwizard-5-step-3" class="text-nowrap mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-icon ion ion-md-copy"></span>
              <div class="text-muted small">THIRD STEP</div>
              Pager
            </a></li>
        </ul>

<div>
          <div id="smartwizard-5-step-1" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 1
            </div>
          </div>
          <div id="smartwizard-5-step-2" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 2
            </div>
          </div>
          <div id="smartwizard-5-step-3" class="card animated fadeIn mb-3">
            <div class="card-body">
              Step Content 3
            </div>
          </div>
        </div>
      </div>

<script>
        $(function() {
          $('#smartwizard-4, #smartwizard-5').smartWizard({
            autoAdjustHeight: false,
            backButtonSupport: false,
            useURLhash: false,
            showStepURLhash: false
          });

// Change markup
          //

$('#smartwizard-4 .sw-toolbar').appendTo($('#smartwizard-4 .sw-container'));
          $('#smartwizard-5 .sw-toolbar').appendTo($('#smartwizard-5 .sw-container'));
        });
      </script>
      
    </div>

<h4 class="ui-block-heading">Validation</h4>

<div class="cui-example">
      <form id="smartwizard-6" action="javascript:void(0)">
        <ul class="card px-4 pt-3 mb-3">
          <li><a href="#smartwizard-6-step-1" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">1</span>
              <div class="text-muted small">FIRST STEP</div>
              Account
            </a></li>
          <li><a href="#smartwizard-6-step-2" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">2</span>
              <div class="text-muted small">SECOND STEP</div>
              Profile
            </a></li>
          <li><a href="#smartwizard-6-step-3" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">3</span>
              <div class="text-muted small">THIRD STEP</div>
              Hints
            </a></li>
          <li><a href="#smartwizard-6-step-4" class="mb-3">
              <span class="sw-done-icon ion ion-md-checkmark"></span>
              <span class="sw-number">4</span>
              <div class="text-muted small">THIRD STEP</div>
              Finish
            </a></li>
        </ul>

<div class="mb-3">
          <div id="smartwizard-6-step-1" class="card animated fadeIn">
            <div class="card-body">
              <div class="form-group">
                <label>User name <span class="text-danger">*</span></label>
                <input name="wizard-userName" type="text" class="form-control required">
              </div>
              <div class="form-group">
                <label>Password <span class="text-danger">*</span></label>
                <input name="wizard-password" type="text" class="form-control required">
              </div>
              <div class="form-group">
                <label>Confirm Password <span class="text-danger">*</span></label>
                <input name="wizard-confirm" type="text" class="form-control required">
              </div>

<p><span class="text-danger">*</span> Mandatory</p>
            </div>
          </div>
          <div id="smartwizard-6-step-2" class="card animated fadeIn">
            <div class="card-body">
              <div class="form-group">
                <label>First name <span class="text-danger">*</span></label>
                <input name="wizard-name" type="text" class="form-control required">
              </div>
              <div class="form-group">
                <label>Last name <span class="text-danger">*</span></label>
                <input name="wizard-surname" type="text" class="form-control required">
              </div>
              <div class="form-group">
                <label>Email <span class="text-danger">*</span></label>
                <input name="wizard-email" type="text" class="form-control required email">
              </div>
              <div class="form-group">
                <label>Address</label>
                <input name="wizard-address" type="text" class="form-control">
              </div>

<p><span class="text-danger">*</span> Mandatory</p>
            </div>
          </div>
          <div id="smartwizard-6-step-3" class="card animated fadeIn">
            <div class="card-body">
              <ul>
                <li>Foo</li>
                <li>Bar</li>
                <li>Foobar</li>
              </ul>
            </div>
          </div>
          <div id="smartwizard-6-step-4" class="card animated fadeIn">
            <div class="card-body">
              <div class="form-group">
                <label class="custom-control custom-checkbox">
                  <input type="checkbox" name="wizard-acceptTerms" class="custom-control-input required">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">I agree with the Terms and Conditions.</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </form>

<script>
        $(function() {
          var $form = $('#smartwizard-6');
          var $btnFinish = $('<button class="btn-finish btn btn-primary hidden mr-2" type="button">Finish</button>');

// Set up validator
          $form.validate({
            errorPlacement: function errorPlacement(error, element) {
              $(element).parents('.form-group').append(
                error.addClass('invalid-feedback small d-block')
              )
            },
            highlight: function(element) {
              $(element).addClass('is-invalid');
            },
            unhighlight: function(element) {
              $(element).removeClass('is-invalid');
            },
            rules: {
              'wizard-confirm': {
                equalTo: 'input[name="wizard-password"]'
              }
            }
          });

// Initialize wizard
          $form
            .smartWizard({
              autoAdjustHeight: false,
              backButtonSupport: false,
              useURLhash: false,
              showStepURLhash: false,
              toolbarSettings: {
                toolbarExtraButtons: [$btnFinish]
              }
            })
            .on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
              // stepDirection === 'forward' :- this condition allows to do the form validation
              // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
              if (stepDirection === 'forward'){ return $form.valid(); }
              return true;
            })
            .on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
              var $btn = $form.find('.btn-finish');

// Enable finish button only on last step
              if (stepNumber === 3) {
                $btn.removeClass('hidden');
              } else {
                $btn.addClass('hidden');
              }
            });

// Click on finish button
          $form.find('.btn-finish').on('click', function(){
            if (!$form.valid()){ return; }

// Submit form
            alert("Great! We're ready to submit form.");
            return false;
          });
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Perfect-scrollbar</h3>
    <a target="_blank" href="https://github.com/noraesae/perfect-scrollbar" class="ui-block-description">https://github.com/noraesae/perfect-scrollbar</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css"&gt;
      &lt;script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div id="perfect-scrollbar-example-1" style="height: 250px">
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
      </div>

<div id="perfect-scrollbar-example-2" class="ps-inverted bg-dark text-white" style="height: 250px">
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
        <p>Lorem ipsum dolor sit amet, an per nibh volumus, quem esse liber ei duo. Eos aperiri copiosae prodesset ut, ea soleat deterruisset mel. Eos ad indoctum theophrastus, in civibus constituto pri. Cu ceteros intellegat mei.</p>
        <p>Persius forensibus eos id, ex his erant ubique. Vel justo maiorum eu, te sit dolore necessitatibus, suas bonorum scaevola at eos. Omnesque tacimates vulputate ex est, probatus sadipscing no est, eam tamquam habemus definitiones ea. Vidit commune sea ea.</p>
        <p>Mel ea aeque saepe intellegam, laudem assueverit reformidans vel et, his ei copiosae invenire similique. Aliquip aperiri facilisi sea te, populo iuvaret sensibus pri ne. Pri ne falli impedit cotidieque, eu sit quaestio postulant, at soluta mucius offendit eos. Habemus feugait imperdiet quo ut. Quo viris facilisi cu, at sed feugait convenire. Ad nam purto illum deleniti.</p>
        <p>Nam commune propriae ex, ut putent percipit pri, at cum quod inani. Pri duis assueverit at, fugit sententiae nec ex. At cibo decore incorrupte vix, debet constituam ne eum. Pri habemus nominavi oporteat ea, eum brute erant cetero at, habeo facete euismod sit an.</p>
        <p>Modo persius vocibus eum te, quem noster ei quo, duo aliquid consequat eu. Ex solet detracto adipiscing usu. Sed et partem volumus, erat nostrum sit ei. Vis brute assum ignota te, eu solum nullam feugiat his. Has et senserit postulant persecuti, enim vivendum his id. Et perfecto definitiones mea. Meis postulant vituperatoribus at duo, malorum facilisis mea in.</p>
      </div>

<script>
        $(function() {
          new PerfectScrollbar(document.getElementById('perfect-scrollbar-example-1'));
          new PerfectScrollbar(document.getElementById('perfect-scrollbar-example-2'));
          new PerfectScrollbar(document.getElementById('perfect-scrollbar-example-3'));
        });
      </script>
      
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Plyr</h3>
    <a target="_blank" href="https://github.com/Selz/plyr" class="ui-block-description">https://github.com/Selz/plyr</a>

<samp class="cui-example-code-static">
      &lt;link rel="stylesheet" href="assets/vendor/libs/plyr/plyr.css"&gt;
      &lt;script src="assets/vendor/libs/plyr/plyr.js"&gt;&lt;/script&gt;
    </samp>

<h4 class="ui-block-heading">Examples</h4>

<script>
        $(function() {
          var options = {
            tooltips: {
              controls: false,
              seek: true
            }
          };

var videoPlayer = plyr.setup(document.getElementById('plyr-video-player'), options)[0];
          var audioPlayer = plyr.setup(document.getElementById('plyr-audio-player'), options)[0];

// RTL: Fix time displaying
          if ($('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl') {
            function plyrRtlTooltip(instance, e) {
              var duration = instance.getDuration();
              var container = instance.getContainer();

if (!options.tooltips.seek || duration === 0 || !container) { return; }

var clientRect = container.querySelector('.plyr__progress').getBoundingClientRect();

// Revert percents
              var percent = 100 - (100 / clientRect.width * (e.pageX - clientRect.left));

percent = percent < 0 ? 0 : (percent > 100 ? 100 : percent);

var time = duration / 100 * percent;

var secs = ("0" + parseInt(time % 60)).slice(-2);
              var mins = ("0" + parseInt((time / 60) % 60)).slice(-2);
              var hours = parseInt((time / 60 / 60) % 60);
              var displayHours = parseInt((duration / 60 / 60) % 60) > 0;

container.querySelector('.plyr__progress .plyr__tooltip').innerHTML =
                (displayHours ? hours + ":" : "") + mins + ":" + secs;
            }

videoPlayer.on('mouseenter mouseleave mousemove', function(e) {
              plyrRtlTooltip(videoPlayer, e);
            });
            audioPlayer.on('mouseenter mouseleave mousemove', function(e) {
              plyrRtlTooltip(audioPlayer, e);
            });
          }
        });
      </script>
      
    </div>
  </div>

function hasClass(el, cls) {
        return el.className.split(' ').indexOf(cls) !== -1;
      }

function sanitizeSource(source, blacklist) {
        source = source
          .replace(/\r/g, '')
          .replace(/\t/g, '  ')
          .replace(/^ *\n/, '\n')
          .replace(/[\s\n]+$/, '')
          .replace(new RegExp('\\n' + source.match(/^\n( *)/)[1], 'g'), '\n');

blacklist = (blacklist || []).concat(CLASS_BLACKLIST);

if (blacklist) {
          source = source.replace(/class="([^"]+)"/g, function(m, clsStr) {
            var clsArr = clsStr.replace(/^\s+|\s+$/, '').replace(/\s+/g, ' ').split(' ');

for (var i = 0, l = blacklist.length, clsInd; i < l; i++) {
              if ((clsInd = clsArr.indexOf(blacklist[i])) !== -1) {
                clsArr.splice(clsInd, 1);
              }
            }

return 'class="' + clsArr.join(' ') + '"';
          });
        }

// Remove material-only code
        if (!MATERIAL_STYLE) {
          source = source.replace(/\n\s+[\s\S]+?/g, '');
        }

return source
          .replace(/\s+class=""/ig, '')
          .replace(/([a-z]+)=""/ig, '$1')
          .replace(/javascript:void$0$/g, '#')
          .replace(/data-src="holder\.js.+?"/g, 'src="..."')
          .replace(/\n[ ]*?/g, '')
          .replace(/\n[ ]*?/g, '')
          .replace(/^\n/, '');
      }

Array.prototype.slice.call(document.querySelectorAll('.cui-example-code-static')).forEach(function(parentEl) {
        var preEl = document.createElement('pre');
        var codeEl = document.createElement('code');
        var lang = parentEl.getAttribute('data-lang') || 'html';

codeEl.className = 'hljs ' + lang + ' xml';

preEl.appendChild(codeEl);

var blacklistStr = (parentEl.getAttribute('data-blacklist') || null);
        var blacklist = (blacklistStr && blacklistStr.split(',')) || null;

codeEl.innerHTML = hljs.highlight(lang, sanitizeSource(parentEl.innerHTML.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>'), blacklist)).value;
        parentEl.innerHTML = '';

parentEl.appendChild(preEl);
      });

Array.prototype.slice.call(document.querySelectorAll('.cui-example')).forEach(function(parentEl) {
        var wrapperEl = document.createElement('div');
        var preEl = document.createElement('pre');
        var codeEl = document.createElement('code');

var materialOnly = hasClass(parentEl, 'material-style-only');

wrapperEl.className = 'cui-example-code' + (materialOnly ? ' material-style-only' : '');
        codeEl.className = 'hljs html xml';

preEl.appendChild(codeEl);
        wrapperEl.appendChild(preEl);

var blacklistStr = (parentEl.getAttribute('data-blacklist') || null);
        var blacklist = (blacklistStr && blacklistStr.split(',')) || null;

codeEl.innerHTML = hljs.highlight('html', sanitizeSource(parentEl.innerHTML, blacklist)).value;

parentEl.parentNode.insertBefore(wrapperEl, parentEl);

// Get .ui-block-heading element
        var heading = wrapperEl.previousElementSibling;

while (heading && !hasClass(heading, 'ui-block-heading')) {
          heading = heading.previousElementSibling;
        }

var toggler = document.createElement('a');

if (heading) {
          toggler.className = 'cui-example-code-toggle float-right' + (materialOnly ? ' material-style-only' : '');
          toggler.innerHTML = '&lt;/&gt';
          toggler.setAttribute('href', '#');

heading.appendChild(toggler);

toggler.addEventListener('click', function(e) {
            e.preventDefault();

if (hasClass(toggler, 'active')) {
              toggler.className = toggler.className.replace(' active', '');
              wrapperEl.className = wrapperEl.className.replace(' active', '');
            } else {
              toggler.className += ' active';
              wrapperEl.className += ' active';
            }

return false;
          });
        }
      });
    })();
  </script>

<script src="assets/vendor/libs/popper/popper.js"></script>
  <script src="assets/vendor/js/bootstrap.js"></script>

<script src="assets/vendor/libs/numeral/numeral.js"></script>
  <script src="assets/vendor/libs/bootstrap-slider/bootstrap-slider.js"></script>
  <script src="assets/vendor/libs/nouislider/nouislider.js"></script>
  <script src="assets/vendor/libs/select2/select2.js"></script>
  <script src="assets/vendor/libs/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
  <script src="assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
  <script src="assets/vendor/libs/bootstrap-multiselect/bootstrap-multiselect.js"></script>
  <script src="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>
  <script src="assets/vendor/libs/moment/moment.js"></script>
  <script src="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js"></script>
  <script src="assets/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
  <script src="assets/vendor/libs/timepicker/timepicker.js"></script>
  <script src="assets/vendor/libs/minicolors/minicolors.js"></script>
  <script src="assets/vendor/libs/fullcalendar/fullcalendar.js"></script>
  <script src="assets/vendor/libs/autosize/autosize.js"></script>
  <script src="assets/vendor/libs/vanilla-text-mask/vanilla-text-mask.js"></script>
  <script src="assets/vendor/libs/vanilla-text-mask/text-mask-addons.js"></script>
  <script src="assets/vendor/libs/bootbox/bootbox.js"></script>
  <script src="assets/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.js"></script>
  <script src="assets/vendor/libs/growl/growl.js"></script>
  <script src="assets/vendor/libs/toastr/toastr.js"></script>
  <script src="assets/vendor/libs/markdown/markdown.js"></script>
  <script src="assets/vendor/libs/bootstrap-markdown/bootstrap-markdown.js"></script>
  <script>
  // Quill does not support IE 10 and below so don't load it to prevent console errors
  if (typeof document.documentMode !== 'number' || document.documentMode > 10) {
    document.open();
    document.write('\x3Cscript src="assets/vendor/libs/quill/quill.js">\x3C/script>');
    document.close();
  }
</script>
  <script src="assets/vendor/libs/typeahead-js/typeahead.js"></script>
  <script src="assets/vendor/libs/datatables/datatables.js"></script>
  <script src="assets/vendor/libs/tableexport/tableexport.js"></script>
  <script src="assets/vendor/libs/bootstrap-table/bootstrap-table.js"></script>
  <script src="assets/vendor/libs/bootstrap-table/extensions/export/export.js"></script>
  <script src="assets/vendor/libs/bootstrap-sortable/bootstrap-sortable.js"></script>
  <script src="assets/vendor/libs/dropzone/dropzone.js"></script>
  <script src="assets/vendor/libs/flow-js/flow.js"></script>
  <script src="assets/vendor/libs/dragula/dragula.js"></script>
  <script src="assets/vendor/libs/sortablejs/sortable.js"></script>
  <script src="assets/vendor/libs/knob/knob.js"></script>
  <script src="assets/vendor/libs/bootstrap-menu/bootstrap-menu.js"></script>
  <script src="assets/vendor/libs/bootstrap-duallistbox/bootstrap-duallistbox.js"></script>
  <script src="assets/vendor/libs/nestable/nestable.js"></script>
  <script src="assets/vendor/libs/jstree/jstree.js"></script>
  <script src="assets/vendor/libs/spin/spin.js"></script>
  <script src="assets/vendor/libs/ladda/ladda.js"></script>
  <script src="assets/vendor/libs/validate/validate.js"></script>
  <script src="assets/vendor/libs/vegas/vegas.js"></script>
  <script src="assets/vendor/libs/swiper/swiper.js"></script>
  <script src="assets/vendor/libs/cropper/cropper.js"></script>
  <script src="assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.js"></script>
  <script src="assets/vendor/libs/bootstrap-tour/bootstrap-tour.js"></script>
  <script src="assets/vendor/libs/pwstrength-bootstrap/pwstrength-bootstrap.js"></script>
  <script src="assets/vendor/libs/clipboard/clipboard.js"></script>
  <script src="assets/vendor/libs/masonry/masonry.js"></script>
  <script src="assets/vendor/libs/block-ui/block-ui.js"></script>
  <script src="assets/vendor/libs/photoswipe/photoswipe.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery-fullscreen.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery-indicator.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery-video.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery-vimeo.js"></script>
  <script src="assets/vendor/libs/blueimp-gallery/gallery-youtube.js"></script>
  <script src="assets/vendor/libs/idletimer/idletimer.js"></script>
  <script src="assets/vendor/libs/smartwizard/smartwizard.js"></script>
  <script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  <script src="assets/vendor/libs/plyr/plyr.js"></script>
</body>

</html>