<p>
    <a href="#" class="btn btn--primary">Primary button</a>
</p>
<p>
    <a href="#" class="btn btn--secondary">Secondary button</a>
</p>
<p>
    <a href="#" class="btn btn--tertiary">Tertiary button</a>
</p>
<p>
    <a href="#" class="btn btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </a>
</p>

<p>
    <a href="#" class="btn">Link as button</a>
</p>
<p>
    <button type="button" class="btn">Button as button</button>
</p>
<p>
    <input type="submit" class="btn" value="Input / submit as button" />
</p>
<p>
    <span class="btn btn--disabled">Disabled button</span>
</p>

<p>
    <button class="btn">Default button</button>
    <button class="btn btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</p>
<p>
    <button class="btn btn--large">Large button</button>
    <button class="btn btn--large btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</p>

<a href="#" id="js-navbar-main-toggle-open" class="navbar-main__toggle--open link--no-underline" style="position: static; background-color: #301942; padding: 10px;">
    <span class="icon icon--menu icon--left" aria-hidden="true"></span> Menu
</a>
<nav id="js-navbar-main" class="navbar-main" role="navigation">
    <a href="#" id="js-navbar-main-toggle-close" class="navbar-main__toggle--close close close--large">
        <span class="icon icon--close" aria-hidden="true"></span>
        <span class="visually-hidden">Close</span>
    </a>
    <div class="navbar-main__body" style="padding: 0;">
        <ul id="js-navbar-main-nav" class="navbar-main__nav" aria-labelledby="js-navbar-main-toggle-open">
            <li>
                <a href="#" title="Recruitments">
                    <span class="icon icon--candidate-ok-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Recruitments
                </a>
            </li>
            <li>
                <a href="#" title="Jobs.cz Database">
                    <span class="icon icon--candidates-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Jobs.cz Database
                </a>
            </li>
            <li>
                <a href="#" title="Candidate Search">
                    <span class="icon icon--candidate-search icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Candidate Search
                </a>
            </li>
            <li class="active" title="Statistics">
                <a href="#">
                    <span class="icon icon--cart-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Statistics
                </a>
            </li>
        </ul>
        <ul class="navbar-main__nav navbar-main__nav--right">
            <li>
                <a href="#" title="Calendar">
                    <span class="icon icon--calendar icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    <span class="hidden-md hidden-lg">Calendar</span>
                </a>
            </li>
        </ul>
    </div>
</nav>

<span class="caret"></span>
<span class="caret caret--up"></span>

<span class="caret caret--sm"></span>
<span class="caret"></span>
<span class="caret caret--lg"></span>

<div class="filters">
    <div class="filters__header">
        <p class="filters__title text-nowrap"><span class="icon icon--filters icon--left icon--middle" aria-hidden="true"></span><strong>Filters</strong></p>
        <button type="button" class="no-btn link filters__reset text-right"><span class="icon icon--cross icon--left icon--middle" aria-hidden="true"></span>Reset filters</button>
    </div>
    <div class="filters__body">
        <div class="filters__controls">
            <div class="filters__control">
                <select id="select2-single--c">
                    <option value="option-1" selected>Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
            <div class="filters__control">
                <select id="select2-single--d">
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
            <div class="filters__control">
                <select id="select2-single--e">
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
            <div class="filters__actions">
                <button type="button" class="no-btn link mr--u-7 text-nowrap" data-action="filters-toggle">Show more<span class="caret caret--sm ml--u-5"></span></button>
            </div>
        </div>
    </div>
</div>

<script>
    // Example of filter initialization
    // $("#select2-single--a").select2({
    //     width: "style",
    //     allowClear: true,
    //     placeholder: "Please select",
    //     containerCssClass: "select2-filter",
    //     dropdownCssClass: "select2-filter"
    // });
</script>
<select id="select2-single--a" class="select2-container--block">
    <option value=""></option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
</select>

<select id="select2-single--b">
    <option value=""></option>
    <option value="option-1">Option 1</option>
    <option value="option-2" selected="selected">Option 2</option>
    <option value="option-3">Option 3</option>
</select>

<script>
// DEMO
document.addEventListener('DOMContentLoaded', function (e) {
    var slider = document.getElementById("nouislider");
    noUiSlider.create(slider, {
        start: [10, 40],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        },
        pips: {
            mode: 'steps',
            density: 10
        }
    });
});
</script>
<div style="padding-bottom: 55px;">
    <div id="nouislider"></div>
</div>

<p>
<span class="ui-slider--filter__wrapper" role="slider">
    <span id="sliderSimple" class="ui-slider--filter"></span>
    <span id="sliderSimpleValue" class="ui-slider--filter__value"></span>
</span>
</p>

<p>
<span class="ui-slider--filter__wrapper" role="slider">
    <span id="sliderRange" class="ui-slider--filter"></span>
    <span id="sliderRangeValue" class="ui-slider--filter__value"></span>
</span>
</p>

<script>
    // Trigger animation
    // For Donut Chart initialization use javascript function: triggerDonutChartAnimation($('.donut-chart'));
</script>
<p>
    <label>
        Set chart value:
        <input type="range" min="0" max="50" value="0" id="demo-chart-value-setter" style="display: inline-block; width: auto; vertical-align: middle;">
    </label>
</p>
<div class="grid grid--middle">
    <div class="col col-4--md">
        <div class="donut-chart donut-chart--small block--center" data-slice="0" data-total="50" data-warning="75" id="demo-chart">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">0</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div><!--
    --><div class="col col-4--md">
        <div class="donut-chart block--center" data-slice="15" data-total="100">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">15</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div><!--
    --><div class="col col-4--md">
        <div class="donut-chart donut-chart--large block--center" data-slice="42" data-total="100">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">42</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialization (combined with hunt [https://jeremenichelli.github.io/hunt/]):
    // hunt($('#demo-pie-chart'), {
    //     in: function() {
    //         $(this).drawPieChart([
    //                 { title: 'Jobs.cz',         value: 75,  color: '#19325a' },
    //                 { title: 'Prace.cz',        value: 54,  color: '#cb2026' },
    //                 { title: 'Práce za rohem',  value: 21,  color: '#00adef' },
    //                 { title: 'Monster',         value: 8,   color: '#883cd2' },
    //                 { title: 'Other',           value: 5,   color: '#b1b1b1' }
    //             ],
    //             {
    //                 tipClass: 'pie-chart__tip'
    //             }
    //         );
    //     }
    // });
</script>
<div class="pie-chart-wrapper">
    <div class="pie-chart" id="demo-pie-chart"></div>
</div>

<script>
    // Init gauge
    $(function() {
        $('#gauge-1').gauge({
            value: 92,
            threshold: 80,
            legendLabel: 'Moneta Bank'
        });
        $('#gauge-2').gauge({
            value: 0,
            threshold: 0,
            legendLabel: 'LIDL Česká republika'
        });
    });
</script>
<div class="grid grid--middle">
    <div class="col col-4--md">
        <div class="gauge" id="gauge-1"></div>
    </div>
    <div class="col col-4--md">
        <div class="gauge" id="gauge-2"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div class="grid">
    <div class="col col-6--md">
        <h2>Pie chart</h2>
        <div class="frame frame--flat">
            <script>
                $(function() {
                    var options = {
                        chart: {
                            type: 'pie'
                        },
                        series: [44, 55, 13, 33],
                        labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
                        legend: {
                            position: 'right'
                        }
                    }
                    var chart = new ApexCharts(document.querySelector("#apexchart-pie"), options);
                    chart.render();
                });
            </script>
            <div id="apexchart-pie"></div>
        </div>
    </div>
    <div class="col col-6--md">
        <h2>Line chart</h2>
        <div class="frame frame--flat">
            <script>
                $(function() {
                    var options = {
                        chart: {
                            type: 'line',
                            toolbar: {
                                show: false
                            }
                        },
                        series: [{
                            name: 'sales',
                            data: [30,40,35,50,49,60,70,91,125]
                        }],
                        xaxis: {
                            categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
                        },
                        grid: {
                            show: true,
                            borderColor: '#f2f2f2',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            }
                        }
                    }
                    var chart = new ApexCharts(document.querySelector("#apexchart-line"), options);
                    chart.render();
                });
            </script>
            <div id="apexchart-line"></div>
        </div>
    </div>
</div>

<div class="pit">
    I am in the pit.
</div>

<script>
    // Alert intialization
    // For alerts initialization use following javascript function: showAlerts();
</script>
<div class="tray">
    <div class="alert alert--success js-alert" role="alert">
        <span class="icon icon--success alert__icon" aria-hidden="true"></span>
        I am a <strong>success</strong> alert message. <a href="#">Well done</a>
        <button type="button" class="close alert__close" data-dismiss="alert">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </button>
    </div>
    <div class="alert alert--danger js-alert" role="alert">
        <span class="icon icon--danger alert__icon" aria-hidden="true"></span>
        I am a <strong>danger</strong> alert message. <a href="#">Save me</a>
        <button type="button" class="close alert__close" data-dismiss="alert">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </button>
    </div>
</div>
<p>
    <button type="button" id="js-show-alerts" class="btn btn--primary">Show alerts</button>
</p>

<p>
    <button type="button" class="btn btn--primary" data-toggle="modal" data-target="#myModal">Standard modal</button>
</p>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="myModalLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                    Vestibulum viverra condimentum neque, at tincidunt neque lobortis ut. Sed pellentesque eget nisl quis consectetur.
                    Fusce vel lobortis ante. Curabitur luctus ante ac risus viverra sodales.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae consectetur lorem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                </p>
                <div class="modal__controls">
                    <button type="button" class="btn btn--primary">Save</button>
                    <a href="#" title="" data-dismiss="modal" aria-hidden="true" class="secondary-action">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

<p>
    <button type="button" class="btn btn--primary" data-toggle="modal" data-target="#modalWide">Wide modal</button>
</p>
<div class="modal modal--wide fade js-modal-wide" id="modalWide" tabindex="-1" role="dialog" aria-labelledby="modalWideLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="modalSideLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <div class="py--u-8 text-center bg-white">CV</div>
                <div class="modal__controls">
                    <button type="button" class="btn btn--primary">Done</button>
                    <a href="#" title="" data-dismiss="modal" aria-hidden="true" class="secondary-action">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="profile-preview">
    <span class="profile-preview__photo profile-photo">
        <img src="dist/images/cand-photo.jpg" alt="Philip Morris" class="profile-photo__image img-responsive">
    </span>
    <p class="profile-preview__body">
        <strong class="profile-preview__body__title">Philip Morris</strong>
        <span class="profile-preview__body__subtitle">Head of Backoffice</span>
    </p>
</div>

<p>
   Standard close button -
   <a href="#" class="close">
       <span class="icon icon--close" aria-hidden="true"></span>
       <span class="visually-hidden">Close</span>
   </a>
</p>
<p>
   Large close button -
   <a href="#" class="close close--large">
       <span class="icon icon--close" aria-hidden="true"></span>
       <span class="visually-hidden">Close</span>
   </a>
</p>

<div class="listing">
    <div class="listing__data">
        <div class="listing-row">
            <div class="grid">
                <div class="col listing-row__cell">
                    Listing row content
                </div>
            </div>
        </div>
    </div>
    <div class="listing__footer">
        <a href="#">+ something else</a>
    </div>
</div>

<div class="listing listing--has-actions">
    <div class="listing__data">
        <div class="listing-row">
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--tertiary">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Listing row content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="listing listing--has-actions listing--has-multiactions">
    <div class="listing__header">
        <div class="listing-row__control">
            <input id="listing-check-header" type="checkbox" name="listing-check-header">
            <label for="listing-check-header" class="no-label"> </label>
        </div>
        <div class="listing-row__body">
            <a class="btn offset-right--u-6">Multi action</a>
            <div class="dropdown">
                <a href="#" id="dropdownLabel" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle">
                    <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Action Menu</span>
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                    <div class="arrow"></div>
                    <ul class="dropdown-menu__list">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="listing__data">
        <div class="listing-row">
            <div class="listing-row__control">
                <input id="listing-check-row-1" type="checkbox" name="listing-check-row-1">
                <label for="listing-check-row-1" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--tertiary">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Listing row
                    </div>
                </div>
            </div>
        </div>
        <div class="listing-row listing-row--selected">
            <div class="listing-row__control">
                <input id="listing-check-row-2" type="checkbox" name="listing-check-row-2" checked>
                <label for="listing-check-row-2" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--tertiary">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Selected listing row
                    </div>
                </div>
            </div>
        </div>
        <div class="listing-row listing-row--new">
            <div class="listing-row__control">
                <input id="listing-check-row-3" type="checkbox" name="listing-check-row-3">
                <label for="listing-check-row-3" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--tertiary">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        New listing row
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="listing">
    <div class="listing__data listing__data--empty">
        <p>Nothing to say.</p>
    </div>
</div>

<div class="listing-row offset-in-bottom--u-5">
    <div class="listing-row__body cand-status-listing-row-panel">
        <div class="grid">
            <div class="col col-6--md listing-row__cell col-3--lg">
                <div class="flex pr--u-6 pr--u-0-md">
                    <div class="text-break-word flex-item--break">
                        <div>
                            <a href="#" class="mr--u-5 link--detail">Hojer Jindřich</a>
                            <div class="icon-group">
                                <div class="icon-group__icon inline">
                                    <span class="icon icon--middle icon--share" aria-hidden="true"></span>
                                </div>
                                <div class="icon-group__icon inline">
                                    <span class="icon icon--middle icon--documents" aria-hidden="true"></span>
                                </div>
                                <div class="icon-group__icon inline">
                                    <span class="icon icon--middle icon--recycle" aria-hidden="true"></span>
                                </div>
                            </div>
                        </div>
                        <div class="rating">
                            <span class="stars" data-stars="3"><span class="visually-hidden">Rating: 3/5</span></span>
                        </div>
                        <p class="text-gray--light telephone-or-add-link">
                            <a href="tel:123456789" class="call-btn"><span class="icon icon--phone icon--left icon--middle" aria-hidden="true"></span>123456789</a>
                        </p>
                    </div>
                    <p class="pl--u-6 ml--auto text-nowrap attachments-icon-panel">
                        <a class="inline-block" href="#"><span class="icon icon--attachment icon--left" aria-hidden="true"></span>1</a>
                    </p>
                </div>
            </div>
            <div class="col col-6--md listing-row__cell col-3--lg">
                <div class="grid grid--compact">
                    <div class="col col-6--md mb--u-6 mb--u-0-md">
                        <div>
                            <span class="rec-phase--invited cand-stat-recr-phase-action-widget">
                              <span class="rec-phase mr--u-4"><span class="rec-phase__round">4. kolo</span><span class="rec-phase__date-time">6. 1. 2020</span></span>
                            </span>
                        </div>
                    </div>
                    <div class="col col-6--md">
                        <p>
                            <span class="icon-group">
                                <span class="icon-group__icon"><a href="#"><span class="icon icon--mail icon--middle" aria-hidden="true"></span></a></span>
                                <span class="icon-group__icon text-green"><span class="icon icon--middle icon--tick" aria-hidden="true"></span></span>
                            </span>
                            <span class="text-small">17. 1. 2020</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col col-6--md col-3--lg listing-row__cell col-3--lg">
                <div class="grid grid--compact">
                    <div class="col col-6--md mb--u-6 mb--u-0-md">
                        <div class="cand-sources-panel">
                            <ul class="list-unstyled mb--u-0">
                                <li>
                                    <span>Databáze uchazečů</span>
                                    <br class="hidden-xs">
                                    <span>14. 10. 2019</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col-6--md">
                        <div class="labels">
                            <div class="labels">
                                <span class="label">English</span><a href="#" id="id78c" title="Upravit"><span class="icon icon--edit icon--middle" aria-hidden="true"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col col-6--md listing-row__cell col-3--lg">
                <div class="single-note">
                    <span>Pozvání do 3. kola: Pozvat ještě Jardu</span><br>
                    <div class="flex flex--baseline">
                        <a class="order-1" href="#">Poznámky (8)</a>
                        <div class="single-note__meta order-2 ml--auto pl--u-5 text-small">
                            <span class="icon icon--candidate icon--left" aria-hidden="true"></span>
                            <span>16. 1. 2020</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="listing-row">
    <div class="listing-row__body">
        <div class="grid">
            <div class="col col-6--md listing-row__cell col-3--lg">
                <p>
                    <a href="#" class="mr--u-5">Obchodní zástupce</a>
                    <span class="icon-group inline-block">
                        <span class="icon-group__icon">
                            <a href="#" title="Náhled"><span class="icon icon--magnifier icon--middle" aria-hidden="true"></span></a>
                        </span>
                    </span>
                </p>
                <p class="text-small">
                    <span class="text-gray--light">Nováková Petra</span>
                    <span class="icon icon--candidates icon--right icon--middle"></span>
                </p>
            </div>
            <div class="col col-6--md listing-row__cell col-3--lg">
                <div class="inline-block mr--u-6 candidate-group">
                    <a class="candidate-group__body" href="#">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large">
                                <strong>7</strong>
                            </span>
                            <span class="badge badge--super">1</span>
                        </span>
                        <span class="candidate-group__label">Neposouzen</span>
                    </a>
                </div>
                <div class="inline-block mr--u-6 pr--u-6 candidate-group candidate-group--in-process border-right border-right-gray--lightest">
                    <a class="candidate-group__body" href="#">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large">
                                <strong>2</strong>
                            </span>
                        </span>
                        <span class="candidate-group__label">Ve hře</span>
                    </a>
                </div>
                <div class="inline-block candidate-group">
                    <a class="candidate-group__body" href="#">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large">
                                <strong>19</strong>
                            </span>
                        </span>
                        <span class="candidate-group__label">Uchazečů</span>
                    </a>
                </div>
            </div>
            <div class="col listing-row__cell col-6--md col-3--lg">
                <p><span class="text-base">22. 3. 2020 – 21. 4. 2020</span></p>
                <p class="text-small">
                    <span class="text-gray"><strong>Kariérní sekce</strong></span>
                </p>
                <p class="mt--u-5">Zhlédnuto: 5</p>
            </div>
            <div class="col listing-row__cell col-6--md col-3--lg">
                <a class="block px--u-5 py--u-4 bg-gray--lightest link-secondary" href="#">+ Nová poznámka</a>
            </div>
        </div>
    </div>
</div>

<div class="listing-row offset-in-bottom--u-5">
    <div class="grid"><!--
        --><div class="col col-4--md"><!--
            --><div class="listing-row__cell">
                <div class="profile-preview profile-preview--inline">
                    <span class="profile-preview__photo profile-photo">
                        <span class="profile-photo__initials">IN</span>
                    </span>
                    <p class="profile-preview__body">
                        <span class="profile-preview__body__title">Ivana Novotná</span>
                        <span class="icon-group">
                            <span class="icon-group__icon" title="101 expired">
                                <span class="icon icon--minus-hexagon icon--medium icon--middle text-red--dark" aria-hidden="true"></span>
                                <span class="visually-hidden">101 expired</span>
                            </span>
                        </span>
                    </p>
                </div>
            </div>
        </div><!--
        --><div class="col col-8--md">
            <div class="grid"><!--
                --><div class="col col-12--sm">
                    <div class="labels offset-bottom--u-7">
                        <span class="label">Marketing</span><span class="label">Obchodní zástupce</span>
                    </div>
                </div><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p>Online marketing specialist pro mezinárodní produkt mezinárodní společnosti</p>
                </div><!--
                --><div class="col col-6--md listing-row__cell">
                    <span class="rec-phase rec-phase--suitable">
                        <span class="rec-phase__round">Round 1</span>
                        <span class="rec-phase__date-time">24. 12. 2015, 11:00</span>
                    </span>
                </div><!--
            --></div>
            <div class="grid"><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p>Online marketing specialist</p>
                </div><!--
                --><div class="col col-6--md listing-row__cell">
                    <span class="rec-phase rec-phase--rejected">
                        <span class="rec-phase__round">Rejected</span>
                        <span class="rec-phase__date-time">24. 12. 2015</span>
                    </span>
                </div><!--
            --></div>
            <div class="grid"><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p><em>a 4 další reakce</em></p>
                </div><!--
            --></div>
        </div><!--
    --></div>
</div>

<div class="pagination">
    <ul class="pagination__list" role="navigation">
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--transparent">1</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--transparent">3</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--active">4</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--transparent">5</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--transparent">50</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</div>

<div class="demo__canvas demo__canvas--dark" style="position: relative;">
<span class="preloader {$modifiers}">
    <span class="preloader__caption visually-hidden">Loading…</span>
</span>
</div>

<a href="#" class="btn btn--primary" data-show-overlay>Show overlay</a>
<div class="overlay {$modifiers}" style="display: none;">
    <span class="preloader preloader--large preloader--centered">
        <span class="preloader__caption visually-hidden">Loading…</span>
    </span>
</div>

<button type="button" class="btn btn--primary" data-toggle="modal" data-target="#myModalOverlay">Standard modal with Overlay</button>
<div class="modal fade" id="myModalOverlay" tabindex="-1" role="dialog" aria-labelledby="myModalOverlayLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="myModalOverlayLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                    Vestibulum viverra condimentum neque, at tincidunt neque lobortis ut. Sed pellentesque eget nisl quis consectetur.
                    Fusce vel lobortis ante. Curabitur luctus ante ac risus viverra sodales.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae consectetur lorem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                </p>
            </div>
        </div>
        <div class="overlay overlay--modal">
            <span class="preloader preloader--centered">
                <span class="preloader__caption visually-hidden">Loading…</span>
            </span>
        </div>
    </div>
</div>

<div class="demo__canvas demo__canvas--dark" style="position: relative;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar lacus ut tortor iaculis, laoreet lacinia purus vehicula. Proin at tincidunt nunc, sed feugiat mauris. Maecenas eget neque non felis rhoncus viverra quis sed odio. Morbi rutrum, arcu non dictum posuere, orci eros condimentum dui, at pharetra arcu felis vitae augue. Aenean vitae velit sapien. Praesent tempor mattis arcu, in lacinia diam dignissim non. Mauris ac risus nibh. Curabitur id convallis nisi. Donec euismod at lacus vitae interdum. Phasellus laoreet sem nulla, ut pellentesque nunc pretium eget. Vestibulum non euismod mi. Donec enim urna, imperdiet at convallis ultricies, egestas non diam. Integer quis sapien nulla. Curabitur ut lobortis ante, sit amet rutrum magna. Vivamus eu odio ante. In mollis felis vitae ullamcorper fermentum.</p>
    <div class="overlay overlay--block">
        <span class="preloader preloader--centered">
            <span class="preloader__caption visually-hidden">Loading…</span>
        </span>
    </div>
</div>

<span class="badge-holder">
    <a href="#">16 candidates</a> <span class="badge {$modifiers}">3</span>
</span>

<span class="rec-phase {$modifiers}">
    <span class="rec-phase__state">Recruitment phase</span>
</span>

<span class="rec-phase">
    <span class="rec-phase__round">Round 1</span>
    <span class="rec-phase__date-time">24.12. 15:00</span>
</span>

<span class="candidate-count">
    <span class="candidate-count__icon">
        <span class="icon icon--medium icon--left icon--middle icon--candidate gray-lighter" aria-hidden="true"></span>
    </span>
    <span class="candidate-count__total">23</span>
    <span class="badge badge--super">4</span>
</span>

<div class="frame">
    <div class="content-tabs">
        <div class="content-tabs__head">
            <ul class="content-tabs__tabs" role="tablist">
                <li id="tab-1" class="content-tab content-tab--active" role="tab">
                    <span class="icon icon--file-pdf content-tab__icon" aria-hidden="true"></span>
                    <span class="content-tab__title">Arnold_Schwarzenegger_CV-german.pdf</span>
                </li>
                <li id="tab-2" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--vq-disable content-tab__icon" aria-hidden="true"></span>
                        <span class="content-tab__title">Sylvester Stallone Video Questionnaire</span>
                    </a>
                </li>
                <li id="tab-3" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--psychometry content-tab__icon" aria-hidden="true"></span>
                        <span class="content-tab__title">TomášKorunaCV.docx</span>
                    </a>
                </li>
                <li id="tab-4" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--flexidot icon--middle" aria-hidden="true">64</span>
                        <span class="content-tab__title">FlexiDot-osobni-informace</span>
                    </a>
                </li>
                <li class="content-tab content-tab--more">
                    <a href="#">+ 5 more</a>
                </li>
            </ul>
        </div>
        <div class="content-tabs__main" aria-labeledby="tab-1" role="tabpanel">
            <div class="content-tabs__hint">
                If the attachment is not displayed correctly, you can <a href="#">download it</a>.
            </div>
            <div class="content-tabs__header">
                <div class="grid grid--middle">
                    <div class="col col-6--md col-6--lg">
                        <p class="file">
                            <span class="icon icon--file-word icon--left"></span>
                            <span class="name">CV.docx</span>
                            <span class="status mr--u-5">16. 10. 2019</span>
                        </p>
                    </div>
                    <div class="col col-6--md col-6--lg left-to-right">
                        <p>
                            <a href="#" class="text-nowrap"><span class="icon icon--print icon--medium icon--middle icon--left" aria-hidden="true"></span>Tisk</a>
                            <a href="#" class="text-nowrap ml--u-7"><span class="icon icon--download icon--medium icon--middle icon--left" aria-hidden="true"></span>Stáhnout</a>
                            <a href="#" class="text-nowrap ml--u-7"><span class="icon icon--trash icon--medium icon--middle icon--left" aria-hidden="true"></span>Smazat</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="content-tabs__body">
                <span style="display: block; width: 100%; height: 200px; line-height: 200px; text-align: center;">CV</span>
            </div>
            <div class="content-tabs__footer">
                <p>Additional information</p>
            </div>
        </div>
    </div>
</div>

<div class="notes-wrapper">
    <div class="notes-wrapper__body notes-wrapper__body--preview">
        <div class="note note--add">
            <p class="note__actions print-hidden">
                <a href="#" class="note__action">
                    <span class="icon icon--plus" aria-hidden="true"></span>
                    <span class="note__action-text">Add note</span>
                </a>
            </p>
        </div>
        <div class="note note--active">
            <form>
                <p class="note__header">
                    <span class="pull-left">Alex Manager</span>
                    <span class="note--unimportant pull-right" style="visibility: hidden">Saving</span>
                </p>
                <p class="note__body">
                    <textarea></textarea>
                </p>
                <p class="note__footer">
                    <a class="btn note__btn">Done</a>
                </p>
            </form>
        </div>
        <div class="note">
            <p class="note__header print-hidden">
                <span class="pull-left">Alex Manager</span>
                <span class="pull-right">14.2.2014 12:34</span>
            </p>
            <p class="note__body">Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.</p>
            <p class="note__footer print-hidden">
                <a href="#" title="Edit note">
                    <span class="icon icon--edit icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Edit note</span>
                </a>
                <a href="#" title="Delete note">
                    <span class="icon icon--trash icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Delete note</span>
                </a>
            </p>
        </div>
        <div class="note">
            <p class="note__header print-hidden">
                <span class="pull-left">Alex Manager</span>
                <span class="pull-right">14.2.2014 12:34</span>
            </p>
            <p class="note__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum felis in mauris placerat eleifend et eu augue. Proin maximus nisi vel felis aliquam, ac venenatis sem dapibus. Sed dapibus, urna eget sollicitudin semper, enim tellus sagittis velit, id convallis lorem ante a lacus. Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.</p>
        <p class="note__footer print-hidden">
                <a href="#" title="Edit note">
                    <span class="icon icon--edit icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Edit note</span>
                </a>
                <a href="#" title="Delete note">
                    <span class="icon icon--trash icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Delete note</span>
                </a>
            </p>
        </div>
    </div>
    <div class="notes-wrapper__footer">
        <a href="#">Show all notes</a>
    </div>
</div>

<p class="single-note">Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien…</p>

<div class="login">
    <div class="login__header">
        <h1 class="brand">
            <svg width="100" height="25" aria-label="Teamio">
                <image width="100" height="25" src="dist/images/teamio-black.png" xlink:href="dist/images/teamio-black.svg" />
            </svg>
        </h1>
    </div>
    <div class="login__frame">
        <h1>Welcome,</h1>
        <p class="offset-bottom--u-8">before you can review list of candidates, set your new password that will be used to access Teamio.</p>
        <span style="display: block; text-align: center; line-height: 150px; color: #ccc; background-color: #eee;">Login form</span>
    </div>
</div>

<form role="form" class="login-form">
    <fieldset class="login-form__section">
        <label for="password" class="form-group__label"><strong>Yout new password</strong></label>
        <input type="password" id="password" class="form-control login-form__password">
        <span class="login-form__password-toggle">
            <input id="reveal-password" type="checkbox" name="reveal_password" data-reveal-password="password" />
            <label for="reveal-password">Show</label>
        </span>
    </fieldset>
    <button type="submit" class="btn btn--primary">Login</button>
</form>

<div class="clearfix">
    <div class="popover top" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover top</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover right" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover right</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover bottom" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover bottom</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover left" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover left</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
</div>

<p>
    <button type="button" class="btn btn--primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</p>

<p>
    <span class="lm-opinion lm-opinion--waiting">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">Waiting for reaction:</span>
        Winnie Pooh
    </span>
</p>
<p>
    <span class="lm-opinion lm-opinion--suitable">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">To invite:</span>
        Piglet
    </span>
</p>
<p>
    <span class="lm-opinion lm-opinion--unsuitable">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">Not suitable:</span>
        Tigger
    </span>
</p>
<p>
    <span class="lm-opinion lm-opinion--later">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">Later:</span>
        Rabbit
    </span>
</p>

<div class="clearfix">
    <div class="user-menu">
        <div class="user-menu__header logged-user" data-toggle-user-menu="js-user-menu">
            <div class="logged-user__name"><strong>Jana Nováková</strong></div>
            <div class="logged-user__company">Státní plavební správa</div>
            <span class="caret caret--sm user-menu-large-screen-indicator"></span>
        </div>
        <div class="user-menu__dropdown" id="js-user-menu">
            <ul class="user-menu__menu">
                <li class="user-menu__menu-item">
                    <a href="#">Change company</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">
                        <span class="icon icon--medium icon--middle icon--left icon--settings" aria-hidden="true"></span>
                        Settings
                    </a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">
                        <span class="icon icon--medium icon--middle icon--left icon--off" aria-hidden="true"></span>
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="clearfix">
    <div class="user-menu user-menu--narrow">
        <div class="user-menu__header selected-language" data-toggle-user-menu="js-lang-menu">
            <div class="selected-language__name">Čeština</div>
            <span class="caret caret--sm user-menu-large-screen-indicator"></span>
        </div>
        <div class="user-menu__dropdown" id="js-lang-menu">
            <ul class="user-menu__menu">
                <li class="user-menu__menu-item">
                    <a href="#">Čeština</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">English</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">Polski</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="widget" aria-labelledby="widgetLabel1">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel1">Active vacancies</h2>
        <a class="widget__header-action btn btn--primary">
            <span class="icon icon--plus icon--middle" aria-hidden="true"></span><!--
            --><span class="offset-left--u-4 hidden-xs">New vacancy</span>
        </a>
    </div>
    <div class="widget__main">
        <div class="widget__body">
            <div class="widget__info">
                <p>Optional info message.</p>
            </div>
            <span style="display: block; line-height: 80px; text-align: center; background-color: #ddd;">Widget rows</span>
        </div>
        <div class="widget__footer widget__footer--inside">
            <a href="#">+ Show 10 more rows</a>
        </div>
    </div>
    <div class="widget__footer">
        <a href="#">All vacancies</a>
    </div>
</div>

<div style="max-width: 320px;">
    <div class="widget" aria-labelledby="widgetLabel2">
        <div class="widget__header">
            <h2 class="widget__header-title" id="widgetLabel2"><strong>58 157</strong> interesting CVs</h2>
        </div>
        <div class="widget__main">
            <div class="widget__body widget__body--padded text-center">
                <p class="offset-top--u-5 offset-bottom--u-7"><img src="dist/images/widget-jobs-cv.svg" alt="" class="img-responsive img-responsive--center"></p>
                <a href="#" class="btn btn--link">Search CVs</a>
            </div>
        </div>
    </div>
</div>

<div class="widget" aria-labelledby="widgetLabel3">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel3">Active vacancies</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body">
            <div class="widget__info">
                <div class="grid text-center"><!--
                    --><div class="col col-6--md">
                        <a href="#" class="link--no-underline">
                            <p>
                                <span class="icon icon--people icon--middle widget__info__icon widget__info__icon--above" aria-hidden="true"></span>
                                <span class="btn btn--primary">New vacancy</span>
                            </p>
                        </a>
                    </div><!--
                    --><div class="col col-6--md widget__info__secondary-action">
                        <a href="#" class="link--no-underline">
                            <p>
                                <span class="icon icon--cart-full icon--middle widget__info__icon widget__info__icon--above" aria-hidden="true"></span>
                                <span class="btn btn--link">Discounted packages</span>
                            </p>
                        </a>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel4">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel4">Waiting after interview</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--interview-waiting widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                        --><div class="col col--fluid col-12--sm">
                        <p>There are no candidates after interview waiting for your reaction.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel5">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel5">Scheduled interviews</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--interview-schedule widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                        --><div class="col col--fluid col-12--sm">
                        <p>There are no scheduled interviews.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel6">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel6">Total not evaluated</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--candidates widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                    --><div class="col col--fluid col-12--sm">
                        <p>There are no not evaluated candidates.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>

<div class="candidate-group">
    <a href="#" class="candidate-group__body">
        <span class="candidate-count">
            <span class="candidate-count__total"><strong>23</strong></span>
            <span class="badge badge--super">4</span>
        </span>
        <span class="candidate-group__label">neposouzení</span>
    </a>
</div>

<div class="blog-preview">
    <a href="#" class="blog-preview__link">
        <div class="blog-preview__item">
            <div class="blog-preview__item-image">
                <img src="dist/images/blog-preview.jpg" alt="">
            </div>
            <div class="blog-preview__item-body">
                <h3 class="blog-preview__item-body__title">Nový formulář hledání CV</h3>
                <p class="blog-preview__item-body__date">12. 5. 2015</p>
            </div>
        </div>
    </a>
    <a href="#" class="blog-preview__link">
        <div class="blog-preview__item">
            <div class="blog-preview__item-image">
                <img src="dist/images/blog-preview.jpg" alt="">
            </div>
            <div class="blog-preview__item-body">
                <h3 class="blog-preview__item-body__title">Zlepšujeme doručitelnost e-mailů uchazečům</h3>
                <p class="blog-preview__item-body__date">4. 3. 2015</p>
            </div>
        </div>
    </a>
</div>

<div class="data-row data-row-vacancy">
    <div class="grid grid--compact grid--middle"><!--
        --><div class="col col-6--md">
            <div class="data-row__heading">
                SCALA Developer with fluent Chinese
            </div>
        </div><!--
        --><div class="col col-6--md">
            <div class="data-row__candidate-groups">
                <div class="candidate-group">
                    <a href="#" class="candidate-group__body">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large"><strong>23</strong></span>
                            <span class="badge badge--super">4</span>
                        </span>
                        <span class="candidate-group__label">neposouzení</span>
                    </a>
                </div>
                <div class="candidate-group">
                    <a href="#" class="candidate-group__body">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large"><strong>18</strong></span>
                        </span>
                        <span class="candidate-group__label">ve hře</span>
                    </a>
                </div>
            </div><!--
        --></div><!--
    --></div>
</div>

<div class="data-row data-row-schedule">
    <div class="data-row-schedule__header data-row-schedule__header--emphasize">
        <span class="data-row-schedule__header__title">21 days</span>
        <span class="data-row-schedule__header__subtitle">after round 1</span>
    </div>
    <div class="data-row-schedule__body">
        <div class="data-row-schedule__body__title">
            <a href="#">Jana Nováková</a>
        </div>
        <div class="data-row-schedule__body__subtitle">
            <div class="data-row-schedule__body__subtitle__line-1">SCALA Developer with fluent Chinese</div>
            <div class="data-row-schedule__body__subtitle__line-2">(Round 2)</div>
        </div>
    </div>
</div>
<div class="data-row data-row-schedule">
    <div class="data-row-schedule__header data-row-schedule__duration">
        <span class="data-row-schedule__header__title">4 days</span>
        <span class="data-row-schedule__header__subtitle">after round 2</span>
    </div>
    <div class="data-row-schedule__body">
        <div class="data-row-schedule__body__title">
            <a href="#">Robert Blecha</a>
        </div>
        <div class="data-row-schedule__body__subtitle">
            <div class="data-row-schedule__body__subtitle__line-1">UX designer</div>
            <div class="data-row-schedule__body__subtitle__line-2">(Round 3)</div>
        </div>
    </div>
</div>

<div class="banner-container">
    <div class="banner">
        <a href="#" class="banner__close close">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </a>
        <div class="grid grid--fluid grid--compact">
            <div class="col col--fluid banner__icon">
                <span class="icon icon--info"></span>
            </div>
            <div class="col col--fluid">
                <div class="banner__body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id finibus ante. Aliquam sit amet orci sed lacus faucibus tempor vitae et mi.</p>
                    <p>Pellentesque eu ligula gravida, efficitur elit vitae, varius mi. Morbi aliquet massa purus, vitae porttitor ante efficitur sed. Cras et viverra purus, vel euismod magna.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="banner banner--error">
        <a href="#" class="banner__close close">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </a>
        <div class="grid grid--fluid grid--compact grid--middle">
            <div class="col col--fluid banner__icon">
                <span class="icon icon--warning"></span>
            </div>
            <div class="col col--fluid">
                <div class="banner__body">
                    <p>
                        We are sorry, something has broken.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="breadcrumbs">
    <div class="container">
        <a href="#" class="breadcrumbs__link">Recruitments</a>
        <span class="breadcrumbs__separator">/</span>
        <a href="#" class="breadcrumbs__link">Marketing Specialist</a>
        <span class="breadcrumbs__separator">/</span>
        <a href="#" class="breadcrumbs__link">Candidate list</a>
        <span class="breadcrumbs__separator">/</span>
        <span class="breadcrumbs__current-page">Elena Diana</span>
    </div>
</div>

<span class="icon-group">
    <span class="icon-group__icon" title="GDPR expired">
        <span class="icon icon--minus-hexagon icon--medium icon--middle text-red--dark" aria-hidden="true"></span>
        <span class="visually-hidden">GDPR expired</span>
    </span>
    <span class="icon-group__icon" title="E-mail">
        <span class="icon icon--mail icon--medium icon--middle" aria-hidden="true"></span>
        <span class="visually-hidden">E-mail</span>
    </span>
</span>

<div class="dropdown">
    <a href="#" id="dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--tertiary btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li class="dropdown-header">Dropdown header</li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropup">
    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--tertiary btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel2">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropdown--right">
    <a href="#" id="dropdownLabel3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--tertiary btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel3">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropdown--right dropup">
    <a id="dropdownLabel4" role="button" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--tertiary btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel4">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>

<span class="label {$modifiers}">Marketing</span><br>

<p>
    <span class="profile-photo">
        <img src="dist/images/cand-photo.jpg" alt="Philip Morris" class="profile-photo__image img-responsive">
    </span>
</p>
<p>
    <span class="profile-photo">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>
<p>
    <span class="profile-photo profile-photo--male">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>
<p>
    <span class="profile-photo profile-photo--female">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>

<div class="profile"></div>

<a href="#collapse-demo" class="collapse-toggle--has-caret collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-demo">
    <span class="caret caret--sm"></span>Tell me more…
</a>
<div class="collapse" id="collapse-demo">
    <p>Praesent vehicula sed libero sed lobortis. Donec vestibulum nibh est, ac condimentum ligula maximus tempus. Maecenas imperdiet turpis condimentum ornare cursus. Proin eu posuere risus. Vivamus efficitur, nisi quis bibendum mollis, velit leo sollicitudin leo, in consectetur nibh nunc eget eros.</p>
</div>

<span class="stars {$modifiers}" data-stars="2.5"><span class="visually-hidden">Rating: 3/5</span></span>

<ul>
    <li><img src="dist/images/flag-en.png" alt="en" class="flag flag--left"> English</li>
    <li><img src="dist/images/flag-bg.png" alt="bg" class="flag flag--left"> Bulgarian</li>
    <li><img src="dist/images/flag-cs.png" alt="cs" class="flag flag--left"> Czech</li>
    <li><img src="dist/images/flag-fi.png" alt="fi" class="flag flag--left"> Finnish</li>
    <li><img src="dist/images/flag-fr.png" alt="fr" class="flag flag--left"> French</li>
    <li><img src="dist/images/flag-it.png" alt="it" class="flag flag--left"> Italian</li>
    <li><img src="dist/images/flag-hu.png" alt="hu" class="flag flag--left"> Hungarian</li>
    <li><img src="dist/images/flag-de.png" alt="de" class="flag flag--left"> German</li>
    <li><img src="dist/images/flag-pl.png" alt="pl" class="flag flag--left"> Polish</li>
    <li><img src="dist/images/flag-ro.png" alt="ro" class="flag flag--left"> Romanian</li>
    <li><img src="dist/images/flag-ru.png" alt="ru" class="flag flag--left"> Russian</li>
    <li><img src="dist/images/flag-sk.png" alt="sk" class="flag flag--left"> Slovak</li>
    <li><img src="dist/images/flag-es.png" alt="es" class="flag flag--left"> Spanish</li>
    <li><img src="dist/images/flag-tr.png" alt="tr" class="flag flag--left"> Turkish</li>
    <li><img src="dist/images/flag-uk.png" alt="uk" class="flag flag--left"> Ukrainian</li>
    <li><img src="dist/images/flag-est.png" alt="uk" class="flag flag--left"> Estonian</li>
    <li><img src="dist/images/flag-lt.png" alt="uk" class="flag flag--left"> Lithuanian</li>
    <li><img src="dist/images/flag-lv.png" alt="uk" class="flag flag--left"> Latvian</li>
</ul>

<div class="name-panel" style="max-width: 400px;">
    <div class="name-panel__frame">
        <div class="name-panel__section name-panel__header">
            <div class="name-panel__header__body">
                <div class="name-panel__rating">
                    <span class="stars" data-stars="3"><span class="visually-hidden">Rating: 3/5</span></span> <a href="#">(2)</a>
                </div>
                <div class="name-panel__header__name">
                    <h1 class="mb--u-0 mr--u-6 inline-block">Nový Radek</h1>
                    <a class="inline-block name-panel__header__reaction-count text-no-decoration" href="#"><span class="icon icon--recycle icon--middle icon--medium icon--left" aria-hidden="true"></span><span class="text-semibold">6</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="name-panel__section name-panel__actions">
            <div class="actions">
                <a class="btn action--invite" href="#">Předvybrat</a>
                <a class="btn action--reject" href="#">Zamítnout</a>
                <div class="dropdown">
                    <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle"><span class="icon icon--dots btn__icon" aria-hidden="true"></span><span class="visually-hidden">Menu akcí</span></a>
                    <div class="dropdown-menu" role="menu">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="name-panel__section name-panel__status">
            <div class="inline-block mr--u-7 rec-phase--not-evaluated">
                <span class="rec-phase mr--u-4">
                    <span class="rec-phase__state">Neposouzen</span>
                    <span class="rec-phase__date-time">28. 2. 2020</span>
                </span>
            </div>
        </div>
        <div class="name-panel__section name-panel__labels">
            <div class="labels">
                <span class="label">Marketing</span>
                <span class="label">English</span>
                <a href="#" title="Upravit"><span class="icon icon--edit icon--middle" aria-hidden="true"></span></a>
            </div>
        </div>
        <div class="name-panel__footer">
            <div class="name-panel__section name-panel__contact">
                <p>
                    <span class="icon icon--phone icon--middle icon--medium icon--left" aria-hidden="true"></span>
                    <a href="tel:+420123456789">+420 123 456 789</a>
                </p>
                <p>
                    <span class="icon icon--mail icon--middle icon--medium icon--left" aria-hidden="true"></span>
                    <a href="mailto:radek.novy@mail.cz">radek.novy@mail.cz</a>
                </p>
            </div>
            <div class="name-panel__section name-panel__links">
                <p>
                    <span class="icon icon--muted icon--linkedin icon--middle icon--medium icon--left" aria-hidden="true"></span>
                    <a href="#">+ Přidat LinkedIn profil</a>
                </p>
            </div>
            <div class="name-panel__section name-panel__section--line-before name-panel__consent">
                <p class="text-gray">
                    Souhlas se zpracováním osobních údajů <span>udělen</span>.
                    Údaje uvidíte <span>do</span> <span>21. 5. 2021</span>.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="richtext">
    <h2>Donec quis ante egestas</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis condimentum hendrerit. In sodales consectetur massa, sit amet feugiat mi vehicula sed. Duis eu nisi lectus. Vivamus et elementum quam, finibus laoreet tellus.</p>
    <p>Cras vitae velit nunc. Proin neque nibh, euismod vulputate hendrerit et, hendrerit placerat felis. Integer lobortis nisl arcu, vitae euismod tortor consectetur eu. Suspendisse eget urna congue, interdum arcu vitae, pretium neque. Cras a egestas erat. In hac habitasse platea dictumst.</p>
    <h2>Nullam fermentum iaculis leo</h2>
    <p>Proin vitae augue enim. Donec lectus ante, ultrices sit amet lectus nec, pharetra egestas arcu.</p>
    <ul>
        <li>Sed ac risus gravida, euismod quam et, hendrerit mi.</li>
        <li>Duis sit amet dolor elementum, commodo massa id, porttitor felis.</li>
        <li>Suspendisse potenti.</li>
        <li>Nullam fermentum iaculis leo, quis porta justo pellentesque eget.</li>
    </ul>
    <p>Nam vitae elit lacus, at luctus tellus. Nam gravida magna sed velit imperdiet aliquet. Maecenas eget mauris id lorem sodales varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dictum iaculis mi, non laoreet mauris sodales quis. Nulla adipiscing cursus lobortis.</p>
</div>

<div class="candidate-pipeline">
    <div class="candidate-group candidate-group--not-evaluated">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">62</span>
                <span class="badge badge--super">17</span>
            </span>
            <span class="candidate-group__label">not evaluated</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--in-process">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">49</span>
            </span>
            <span class="candidate-group__label">in process</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--out-of-process">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">27</span>
            </span>
            <span class="candidate-group__label">out of process</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--all">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">138</span>
            </span>
            <span class="candidate-group__label">candidates</span>
        </a>
    </div>
</div>

<div class="candidate-pipeline">
    <div class="candidate-group candidate-group--empty candidate-group--not-evaluated">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">not evaluated</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--in-process">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">in process</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--out-of-process">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">out of process</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--all">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">candidates</span>
        </span>
    </div>
</div>

<p><span class="vacancy-status vacancy-status--active">Active</span></p>
<p><span class="vacancy-status vacancy-status--suspended">Suspended</span></p>
<p><span class="vacancy-status vacancy-status--archived">Archived</span></p>
<p><span class="vacancy-status vacancy-status--draft">Draft</span></p>

<div class="content-header {$modifiers}">
    <h1 class="content-header__title">Credit and Collections Analyst (German and French)</h1>
    <div class="content-header__actions">
        <a class="btn">Edit</a>
    </div>
</div>

<table class="table-summary table--wide valign-bottom">
    <thead>
    <tr>
        <th class="text-left text-uppercase">Total</th>
        <th class="table__col--u-10 text-large text-right">160</th>
        <th class="table__col--u-10 text-right">100 %</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><span class="color-flag color-flag--jobs"></span>Jobs.cz</td>
        <td class="text-large text-right">75</td>
        <td class="text-right">47 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--prace"></span>Prace.cz</td>
        <td class="text-large text-right">54</td>
        <td class="text-right">34 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--pracezarohem"></span>PraceZaRohem</td>
        <td class="text-large text-right">21</td>
        <td class="text-right">13 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--monster"></span>Monster</td>
        <td class="text-large text-right">8</td>
        <td class="text-right">5 %</td>
    </tr>
    <tr>
        <td><span class="color-flag"></span><a href="#">+ 6 others</a></td>
        <td class="text-large text-right">2</td>
        <td class="text-right">1 %</td>
    </tr>
    </tbody>
</table>

<table class="table-summary table-summary--empty table--wide valign-bottom">
    <thead>
    <tr>
        <th class="text-left text-uppercase">Total</th>
        <th class="table__col--u-10 text-large text-right">0</th>
    </tr>
    </thead>
</table>

<span class="color-flag {$modifiers}"></span>

<p class="message {$modifiers}">Nullam ut eros egestas, <a href="#">fringilla neque</a> in, accumsan nisi.</p>

<div class="logo-block {$modifiers}">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.</p>
</div>

<div class="tile tile--has-state tile--has-decoration">
    <div class="tile__state">
        <span class="tick tick--green tile__state-object">
            <span class="icon--tick" aria-hidden="true"></span>
        </span>
    </div>
    <div class="tile__decoration">
        <img src="dist/images/graph-upward-trend.svg" alt="" class="tile__decoration-object">
    </div>
    <div class="tile__body">
        <h2 class="tile__title">Nullam enim lectus</h2>
        <p>Curabitur et tincidunt nibh, at faucibus dui. Ut vel ipsum euismod, elementum nulla sed, rhoncus neque. Duis vel iaculis sem. Vivamus eu pharetra libero, vulputate rutrum tellus.</p>
        <div class="tile__actions">
            <a href="#" class="btn btn--primary">Primary action</a>
            <a href="#" class="secondary-action">Secondary action</a>
        </div>
    </div>
</div>

<div class="grid">
    <div class="col col-6--md">
        <ul class="timeline">
            <li class="timeline__item timeline__item--yellow timeline-event">
                <h4 class="timeline-event__title">Vacancy published on Jobs.cz</h4>
                <p class="timeline-event__body">1 credit</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">18. June 2016, 14:30</span>
                    Jakub Šikovný
                </p>
            </li>
            <li class="timeline__item timeline__item--green timeline-event">
                <h4 class="timeline-event__title">Vacancy published on Prace.cz</h4>
                <p class="timeline-event__body">1 credis</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">14. June 2016, 9:30</span>
                    Petr Mocný
                </p>
            </li>
            <li class="timeline__item timeline__item--more">
                <a href="#">Show more</a>
            </li>
        </ul>
    </div>
    <div class="col col-6--md">
        <ul class="timeline timeline--has-icons">
            <li class="timeline__item timeline__item--violet timeline-event">
                <div class="timeline-event__icon"><span class="icon icon--star" aria-hidden="true"></span></div>
                <h4 class="timeline-event__title">Vacancy published on Jobs.cz</h4>
                <p class="timeline-event__body">1 credit</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">18. June 2016, 14:30</span>
                    Jakub Šikovný
                </p>
            </li>
            <li class="timeline__item timeline__item--orange timeline-event">
                <div class="timeline-event__icon"><span class="icon icon--bubble-ok" aria-hidden="true"></span></div>
                <h4 class="timeline-event__title">Vacancy published on Prace.cz</h4>
                <p class="timeline-event__body">1 credis</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">14. June 2016, 9:30</span>
                    Petr Mocný
                </p>
            </li>
            <li class="timeline__item timeline__item--more">
                <a href="#">Show more</a>
            </li>
        </ul>
    </div>
</div>

<script>
    // Manually trigger animation of progress bars:
    // triggerProgressBarAnimation($('.progress'));
</script>
<p class="text-gray--light"><strong class="progress-label" data-progress-label="progress-bar">35</strong>/50 credits</p>
<span class="progress" data-slice="9" data-total="50" data-progress-id="progress-bar">
    <span class="progress__bar"></span>
</span>

<span class="tick {$modifiers}">
    <span class="icon--tick" aria-hidden="true"></span>
</span>

<span class="pill">
    <span class="pill__body">
        <span class="text-teamio-pink offset-right--u-4">Petr Hruška</span>
        <span class="text-gray--light">Grafton</span>
    </span>
</span>
<span class="pill pill--dismissable">
    <span class="pill__body">
        <span class="text-teamio-pink offset-right--u-4">Jan Novák</span>
        <span class="text-gray--light">Addecco</span>
    </span>
    <a href="#" class="pill__close close">
        <span class="icon icon--close" aria-hidden="true"></span>
        <span class="visually-hidden">Remove</span>
    </a>
</span>

<ul class="icon-list">
    <li class="icon-list__item icon-list__item--plus text-green">List item 1</li>
    <li class="icon-list__item icon-list__item--plus text-green">List item 2</li>
    <li class="icon-list__item icon-list__item--minus text-gray--light">List item 3</li>
    <li class="icon-list__item icon-list__item--minus text-gray--light">List item 4</li>
</ul>

<ol class="progress-list">
    <li class="progress-list__item progress-list__item--success">Great success</li>
    <li class="progress-list__item progress-list__item--error">Epic fail</li>
    <li class="progress-list__item progress-list__item--active">Processing now...</li>
    <li class="progress-list__item">This can wait</li>
</ol>

<em class="highlight">This is important</em>

<span class="state {$modifiers}">State</span>

<a href="#" class="block-link">
    <p>
        Aenean eu <span class="block-link__fake-link">nulla quis arcu</span> efficitur molestie mollis ut nibh. Nulla facilisi.
    </p>
</a>

<div class="listing listing--has-actions listing--has-multiactions inbox-listing">
    <div class="listing__data">
        <div class="listing-row inbox-row offset-in-bottom--u-5" data-visited="false">
            <div class="listing-row__control">
                <input id="inbox-listing-check-row-1" type="checkbox" name="inbox-listing-check-row-1">
                <label for="inbox-listing-check-row-1" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="inbox-dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--tertiary btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="inbox-dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col col-4--md col-3--lg">
                        <p class="text-break-word"><a href="#" class="inbox-name">Lukáš Nebudil</a></p>
                    </div>
                    <div class="col col-4--md col-6--lg">
                        <p class="mail-preview">
                            <span class="mail-preview__subject">Fwd: Zájem o pozici HW Engineer</span>
                            <span class="mail-preview__body text-gray--light">Dobrý den, zaujala mě vaše nabídka práce na pozici HW Inženýr…</span>
                        </p>
                    </div>
                    <div class="col col-4--md col-3--lg text-right">
                        <p class="pull-left text-left text-break-word inbox-from email">
                            <span class="email__name">From: Dana Malá</span><br>
                            <span class="email__address text-gray--light">maladana@lmc.cz</span>
                        </p>
                        <p class="inbox-date-time">14:42</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="frame {$modifiers}">
    <h2>Vivamus sed tristique augue</h2>
    <p>Nam sed posuere ipsum, vel scelerisque massa. Etiam iaculis augue sed finibus dignissim. Phasellus sit amet dictum felis, at aliquet urna. Mauris scelerisque convallis tempus. Ut et nunc nec augue fringilla tristique sit amet at ipsum. Vestibulum molestie massa mauris, vel commodo augue ullamcorper non. Nullam enim velit, venenatis ut est vitae, vestibulum eleifend magna. Etiam id tellus vel est feugiat ullamcorper. Donec cursus tortor ac imperdiet vulputate. Vivamus eleifend, magna vitae laoreet facilisis, nisi ipsum iaculis purus, in scelerisque justo quam eget ipsum.</p>
</div>

<p class="file">
    <span class="icon icon--file-pdf" aria-hidden="true"></span>
    <span class="name">My new CV – 2023.pdf</span>
    <span class="status">16. 2. 2016</span>
</p>

<div class="nav-prev-next" role="navigation">
    <button class="nav-prev-next__prev btn btn--circle">
        <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Prev</span>
    </button>
    <span class="nav-prev-next__count"><strong>15</strong> from 34</span>
    <button class="nav-prev-next__next btn btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<ul role="tablist" class="tabs {$modifiers}">
    <li class="tabs__tab tabs__tab--active"><a href="#tab1" role="tab" aria-controls="tab1" class="tabs__tab-link">Tab 1</a></li>
    <li class="tabs__tab"><a href="#tab2" role="tab" aria-controls="tab2" class="tabs__tab-link">Tab 2</a></li>
    <li class="tabs__tab"><a href="#tab3" role="tab" aria-controls="tab3" class="tabs__tab-link">Tab 3</a></li>
    <li class="tabs__tab"><a href="#tab4" role="tab" aria-controls="tab4" class="tabs__tab-link">Tab 4<span class="label label--success ml--u-5 mr--u-0">New</span></a></li>
</ul>

<script>
    $(function() {
        // Teamio UI defaults:
        //$('.tooltip').tooltipster({
        //    theme: 'tooltipster-borderless',
        //    delay: 100,
        //    animationDuration: 100,
        //    maxWidth: 240,
        //    trigger: 'custom',
        //    triggerOpen: {
        //        mouseenter: true,
        //        touchstart: true,
        //        tap: true
        //    },
        //    triggerClose: {
        //        mouseleave: true,
        //        originClick: true,
        //        touchleave: true,
        //        tap: true
        //    }
        //});
        $('.demo-tooltip').tooltipster({
            theme: 'tooltipster-borderless',
            delay: 100,
            animationDuration: 100,
            maxWidth: 240,
            trigger: 'click'
        });
    });
</script>
<button class="btn demo-tooltip" data-tooltip-content="#tooltip-content">Click me</button>
<div class="tooltip-templates">
    <div id="tooltip-content">
        <p><strong>Morbi fringilla</strong> auctor neque, at molestie velit consequat quis.</p>
        <p>Nullam efficitur leo sed porttitor fringilla. Sed in eros vel diam luctus luctus. Nunc at nisl orci. Aenean eu augue dignissim, tempor velit non, vestibulum lorem.</p>
    </div>
</div>

<div class="empty">
    <span class="empty__icon icon icon--bubble-ok" aria-hidden="true"></span>
    <p class="empty__info">Well done.</p>
</div>

<div class="boxes">
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--key icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Password</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--candidate icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">My account</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--notification icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Notifications</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--language icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Language</p>
        </a>
    </div>
</div>

<div class="steps">
    <div class="steps__container">
        <ol class="steps__list list-unstyled">
            <li class="steps-item">
                <a href="#">
                  <span class="steps-item__body">
                      <span class="steps-item__order">1</span>
                      <span class="steps-item__title">Rise</span>
                  </span>
                </a>
            </li>
            <li class="steps-item steps-item--active">
                <strong class="steps-item__body">
                    <span class="steps-item__order">2</span>
                    <span class="steps-item__title">Shine</span>
                </strong>
            </li>
            <li class="steps-item">
                <span class="steps-item__body">
                    <span class="steps-item__order">3</span>
                    <span class="steps-item__title">Fall</span>
                </span>
            </li>
        </ol>
    </div>
</div>

<div class="page-loader">
    <div class="page-loader__header">
        <div class="page-loader__header-step page-loader__header-step--1">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaše pozice <span class="icon icon--documents" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--2">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaše uchazeče <span class="icon icon--candidates" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--3">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaši historii <span class="icon icon--clock" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--4">
            <div class="page-loader__title">
                <h1>A také <span class="text-teamio-pink">všechno ostatní <span class="icon icon--attachment" aria-hidden="true"></span></span>, na nic nezapomeneme.</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--final">
            <div class="page-loader__title">
                <h1><span class="icon icon--tick icon--left text-green" aria-hidden="true"></span> Paráda, a je to hotovo!</h1>
            </div>
            <div class="page-loader__subtitle">
                <p><a href="#" class="btn btn--success">Přejít do Teamio Smart</a></p>
            </div>
        </div>
    </div>
    <div class="page-loader__progress mb--u-7"></div>
    <p class="text-gray--light">Pokud máte nějaké otázky, napište nám na <a href="mailto:email@email.cz" class="link-secondary">email@email.cz</a> nebo zavolejte na <a href="tel:00420123456789" class="link-secondary">+420 123 456 789</a>.</p>
</div>

<div class="grid flex flex-wrap flex-nowrap-md offer">
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <h2 class="offer-box__title">Inzerát na Jobs.cz</h2>
            <p>
                <del class="text-large"></del><br>
                7 900 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn">Inzerovat</button>
            </p>
            <div class="offer-box__footer">
                <ul class="text-left text-gray--light mb--u-0">
                    <li>1 inzerát na Jobs.cz</li>
                    <li>Inzerát je vystaven na 30 dní</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <p class="offer-box__label"><span class="label label--danger text-uppercase">Nabídka jen pro první nákup!</span></p>
            <h2 class="offer-box__title">1x na Jobs.cz a 1x na Prace.cz</h2>
            <p>
                <del class="text-large">11 999 Kc</del><br>
                7 900 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn btn--primary">Inzerovat z balíčku</button>
            </p>
            <div class="offer-box__footer">
                <ul class=" text-left text-gray--light mb--u-0">
                    <li>1 inzerát na Jobs.cz a 1 inzerát na Prace.cz</li>
                    <li>Každý inzerát je vystaven na 30 dní</li>
                    <li>Celý balíček je možné vyčerpat do jednoho roku</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <h2 class="offer-box__title">3 inzeráty na Jobs.cz</h2>
            <p>
                <del class="text-large">23 700 Kc</del><br>
                20 100 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn">Inzerovat z balíčku</button>
            </p>
            <div class="offer-box__footer">
                <ul class="text-left text-gray--light mb--u-0">
                    <li>3 inzeráty na Jobs.cz</li>
                    <li>Každý inzerát je vystaven na 30 dní</li>
                    <li>Celý balíček je možné vyčerpat do jednoho roku</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="grid">
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <span class="icon icon--file-image text-gray--lighter file-upload__image-placeholder " aria-hidden="true"></span>
                </div>
            </div>
            <button class="btn file-upload__action">Nahrát logo</button>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <img src="dist/images/teamio-dark.png" alt="" class="file-upload__preview-image img-responsive">
                </div>
            </div>
            <a href="#" class="file-upload__action"><span class="icon icon--trash icon--middle icon--left" aria-hidden="true"></span>Odebrat logo</a>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <span class="icon icon--file-image text-gray--lighter file-upload__image-placeholder " aria-hidden="true"></span>
                </div>
                <div class="form-group">
                    <label for="pobocka" class="form-group__label">Pobočka</label>
                    <select id="pobocka" class="form-control">
                        <option>LMC</option>
                        <option>LMC Polska</option>
                    </select>
                </div>
            </div>
            <button class="btn file-upload__action">Nahrát logo</button>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <img src="dist/images/teamio-dark.png" alt="" class="file-upload__preview-image img-responsive">
                </div>
                <p class="form-group">
                    <strong>Pobočka:</strong>
                    LMC Polska
                </p>
            </div>
            <div class="file-upload__footer">
                <a href="#"><span class="icon icon--trash icon--middle icon--left" aria-hidden="true"></span>Odebrat logo</a>
            </div>
        </div>
    </div>
</div>

<div class="listing listing--has-multiactions">
    <div class="listing-row job-board-row">
        <div class="listing-row__control">
            <input id="listing-check-row-1" type="checkbox" name="listing-check-row-1" checked="">
            <label for="listing-check-row-1" class="no-label"> </label>
        </div>
        <div class="listing-row__body">
            <div class="grid">
                <div class="col">
                    <div class="job-board-row__header flex">
                        <div class="flex-shrink-0 mr--u-6">
                            <img src="dist/images/jobboard-logo-pracezarohem.svg" width="50" height="50" alt="Práce za rohem">
                        </div>
                        <div class="job-board-row__option">
                            <p class="job-board-row__option-body mb--u-0">
                                <label for="listing-check-row-1"><strong>Práce za rohem - mobilní aplikace</strong></label><br>
                                <span>Najděte uchazeče, kteří chtějí pracovat právě ve vaší lokalitě. Práce za rohem nabízí uchazečům moderní mobilní aplikaci, s pomocí které snadno najdou práci svých snů.</span>
                            </p>
                            <div class="job-board-row__option-aside"></div>
                        </div>
                    </div>
                    <div class="job-board-row__body ml--logo-block-md mt--u-7">
                        <p class="form-group__label">Doba vystavení</p>
                        <div class="form-group mw-100">
                            <div class="job-board-row__option mb--u-6">
                                <div class="job-board-row__option-body">
                                    <span>30 dní</span>
                                </div>
                                <div class="job-board-row__option-aside ml--u-0"><strong>3 000 Kč</strong></div>
                            </div>
                        </div>
                        <hr>
                        <p class="form-group__label">Zvýraznění inzerátu</p>
                        <div class="form-group mw-100">
                            <div class="job-board-row__option mb--u-6">
                                <div class="job-board-row__option-body">
                                    <input id="zvyrazneni-1-pzr" type="checkbox">
                                    <label for="zvyrazneni-1-pzr">Zvýraznění inzerátu na Práce za Rohem</label>
                                    <p class="job-board-row__option-note">Inzerát bude zvýrazněn po dobu 14 dní v relevantních výsledcích hledání v mobilní aplikaci Práce za Rohem. Získáte tak vyšší návštěvnost inzerátu.</p>
                                </div>
                                <div class="job-board-row__option-aside"><strong>1 800 Kč</strong></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="phone-frame">
    <div class="phone-frame__body">
        <img src="dist/images/pzr-ad-preview.png" alt="" class="img-responsive">
    </div>
</div>

<div class="remote-interview">
    <div class="remote-interview__main">
        <!-- video iframe -->
        <iframe style="border: 0; background-color: #e9e9e9;"></iframe>
    </div>
    <div class="remote-interview__aside">
        <h2 class="mb--u-0">20. 12. 2020 v 15:00</h2>
        <p>Marketing specialist pro Brno</p>
        <p>
            <span class="form-group__label">Personalista:</span><br>
            <span class="icon icon--candidate-glasses icon--left" aria-hidden="true"></span> Kateřina Kratochvílová<br>
            <span class="icon icon--phone icon--left" aria-hidden="true"></span> 777 000 333<br>
            <span class="icon icon--mail icon--left" aria-hidden="true"></span><a href="#"> jana.novakova@mail</a>
        </p>
    </div>
</div>

<div class="flex">
    <div class="flex-none mr--u-6">
        <img src="dist/images/jobboard-logo-jobs.svg" alt="Jobs.cz" class="job-board-logo">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.</p>
</div>
<p>Available logos:</p>
<div class="demo-logos">
    <img src="dist/images/jobboard-logo-jobs.svg" alt="Jobs.cz" class="job-board-logo">
    <img src="dist/images/jobboard-logo-prace.svg" alt="Prace.cz" class="job-board-logo">
    <img src="dist/images/jobboard-logo-jobs-prace.svg" alt="Jobs.cz & Prace.cz" class="job-board-logo">
    <img src="dist/images/jobboard-logo-pracezarohem.svg" alt="Práce za rohem.cz" class="job-board-logo">
    <img src="dist/images/jobboard-logo-pracazarogiem.svg" alt="Praca za rogiem" class="job-board-logo">
    <img src="dist/images/jobboard-logo-profesia.svg" alt="Profesia" class="job-board-logo">
    <img src="dist/images/jobboard-logo-monster.svg" alt="Monster" class="job-board-logo">
    <img src="dist/images/jobboard-logo-atmoskop.svg" alt="Atmoskop" class="job-board-logo">
    <img src="dist/images/jobboard-logo-jobote.svg" alt="Jobote" class="job-board-logo">
    <img src="dist/images/jobboard-logo-teamio.svg" alt="Teamio" class="job-board-logo">
    <img src="dist/images/jobboard-logo-techloop.svg" alt="Techloop" class="job-board-logo">
    <img src="dist/images/jobboard-logo-bestjobs.svg" alt="Bestjobs" class="job-board-logo">
    <img src="dist/images/jobboard-logo-cv.svg" alt="CV" class="job-board-logo">
    <img src="dist/images/jobboard-logo-olx-pl.svg" alt="OLX" class="job-board-logo">
    <img src="dist/images/jobboard-logo-rabota.svg" alt="Rabota.ua" class="job-board-logo">
    <img src="dist/images/jobboard-logo-export.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-intranet.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-package.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-pages.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-sections.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-temporary-job.svg" alt="" class="job-board-logo">
    <img src="dist/images/jobboard-logo-gift.svg" alt="" class="job-board-logo">
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
    $(function() {
        // date range picker: http://www.daterangepicker.com/
        (function() {
            var $rangeInput = $('#reportrange');
            var start = moment().subtract(29, 'days');
            var end = moment();
            function cb(start, end) {
                $('#reportrange .date').html(start.format('D. M. YYYY') + ' – ' + end.format('D. M. YYYY'));
            }
            $rangeInput.daterangepicker({
                startDate: start,
                endDate: end,
                opens: 'left',
                ranges: {
                    'Dnes': [moment(), moment()],
                    'Včera': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Posledních 7 dní': [moment().subtract(6, 'days'), moment()],
                    'Posledních 30 dní': [moment().subtract(29, 'days'), moment()],
                    'Tento měsíc': [moment().startOf('month'), moment().endOf('month')],
                    'Minulý měsíc': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                "locale": {
                    "format": "D. M. YYYY",
                    "separator": " – ",
                    "applyLabel": "Vybrat",
                    "cancelLabel": "Zrušit",
                    "fromLabel": "Od",
                    "toLabel": "Do",
                    "customRangeLabel": "Vlastní",
                    "weekLabel": "T",
                    "daysOfWeek": [
                        "Ne",
                        "Po",
                        "Út",
                        "St",
                        "Čt",
                        "Pá",
                        "So"
                    ],
                    "monthNames": [
                        "Leden",
                        "Únor",
                        "Březen",
                        "Duben",
                        "Květen",
                        "Červen",
                        "Červenec",
                        "Srpen",
                        "Září",
                        "Říjen",
                        "Listopad",
                        "Prosinec"
                    ],
                    "firstDay": 1
                },
            }, cb);
            cb(start, end);
            $rangeInput.on('show.daterangepicker', function(e) {
                var $input = $(this),
                    inputWidth = $input.outerWidth();
                $input.addClass('form-control--focus');
                $('.daterangepicker:visible .ranges ul').width(inputWidth - 2);
            })
            $rangeInput.on('hide.daterangepicker', function(e) {
                var $input = $(this);
                $input.removeClass('form-control--focus');
            })
        })();
    });
</script>
<div id="reportrange" class="date-range-picker form-control cursor-pointer user-select-none mw-250px">
    <span class="icon icon--calendar icon--left" aria-hidden="true"></span>
    <span class="date"></span>
</div>

<div class="board">
  <div class="board__column">
    <div class="board__column-header">
      <h2 class="h3 board__column-title">
        Neposouzení <span class="text-muted">(1)</span>
      </h2>
      <div class="board__column-action">
        <div class="dropdown dropdown--right dropdown--fixed">
            <a href="#" id="dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--ghost">
                <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Context Menu</span>
            </a>
            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                <div class="arrow"></div>
                <ul class="dropdown-menu__list">
                    <li class="dropdown-header">Dropdown header</li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                </ul>
            </div>
        </div>
      </div>
    </div>
    <div class="board__column-body">
      <div class="board-card board-card--has-actions mb--u-6">
        <div class="board-card__header">
          <p>
            <strong>
              <a href="#">Plíšková Karolína</a>
            </strong>
          </p>
          <div class="board-card__header-action">
            <div class="dropdown dropdown--right dropdown--fixed">
            <a href="#" id="dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--ghost">
              <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
              <span class="visually-hidden">Context Menu</span>
            </a>
            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
              <div class="arrow"></div>
              <ul class="dropdown-menu__list">
                <li class="dropdown-header">Dropdown header</li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
              </ul>
            </div>
          </div>
        </div>
        </div>
        <div class="board-card__body">
          <p class="text-small">
            <span class="icon icon--mail icon--left icon--middle text-gray-500" aria-hidden="true"></span>
            pliskova.karolina@email.cz
          </p>
          <p class="text-small">
            <span class="icon icon--phone icon--left icon--middle text-gray-500" aria-hidden="true"></span>
            720 753 908
          </p>
        </div>
        <div class="board-card__footer">
          <p class="text-small text-gray-700">
            <strong>Zareagoval/a</strong> 23.12.2021
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="board__column"></div>
  <div class="board__column"></div>
  <div class="board__column"></div>
  <div class="board__column"></div>
  <div class="board__column"></div>
  <div class="board__column"></div>
</div>

<div class="board-card board-card--has-actions">
    <div class="board-card__header">
        <p>
            <strong>
                <a href="#">Plíšková Karolína</a>
            </strong>
        </p>
        <div class="board-card__header-action">
            <div class="dropdown dropdown--right dropdown--fixed">
                <a href="#" id="dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle btn--tertiary">
                    <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Context Menu</span>
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                    <div class="arrow"></div>
                    <ul class="dropdown-menu__list">
                        <li class="dropdown-header">Dropdown header</li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="board-card__body">
        <p class="text-small">
            <span class="icon icon--mail icon--left icon--middle text-gray-500" aria-hidden="true"></span>
            pliskova.karolina@email.cz
        </p>
        <p class="text-small">
            <span class="icon icon--phone icon--left icon--middle text-gray-500" aria-hidden="true"></span>
            720 753 908
        </p>
    </div>
    <div class="board-card__footer">
        <p class="text-small text-gray-700">
            <strong>Zareagoval/a</strong> 23.12.2021
        </p>
    </div>
</div>