<div class="md-navigate">
    <div class="md-popup">
        c</div>
    <ul class="md-alfabet">
        <li class="md-item-star"><span class="mbsc-ic mbsc-ic-star3"></span</li>
        <li class="md-item-A" data-selected="true">A</li>
        <li class="md-item-B">B</li>
        <li class="md-item-C">C</li>
        <!-- Showing partial data. Download full source. -->
    </ul>
    <ul id="demo" class="md-list">
        <li class="md-no-bookmark">
            <div class="md-nob-title">Traveling to the same place frequently?</div>
            <div class="md-nob-txt">You can bookmark airports by tapping on the star to the left and they will show up here.</div>
            <div class="md-nob-separator"></div>
            <img class="md-nob-img" src="https://img.mobiscroll.com/demos/lv-bookmark.png" >
        </li>
        <li data-role="list-divider" class="headerA">A</li>
        <li data-icon="star">Abilene, TEXAS<span class="md-iata">(ABI)</span></li>
        <li data-icon="star">Agana / Tamuning, GUAM<span class="md-iata">(GUM)</span></li>
        <li data-icon="star">Aguadilla, PUERTO RICO<span class="md-iata">(BQN)</span></li>
        <li data-icon="star">Akron / Canton, OHIO<span class="md-iata">(CAK)</span></li>
        <li data-role="list-divider" class="headerB">B</li>
        <li data-icon="star">Baltimore / Glen Burnie, MARYLAND<span class="md-iata">(BWI)</span></li>
        <li data-icon="star">Bangor, MAINE<span class="md-iata">(BGR)</span></li>
        <li data-icon="star">Bar Harbor, MAINE<span class="md-iata">(BHB)</span></li>
        <li data-icon="star">Baton Rouge, LOUISIANA<span class="md-iata">(BTR)</span></li>
        <!-- Showing partial data. Download full source. -->
    </ul>
</div>

.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }

.md-navigate .md-list .mbsc-lv-item {
    padding-right: 4em;
    backface-visibility: hidden;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.md-popup {
    position: fixed;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 100px;
    background: rgba(78, 204, 196, .6);
    color: #fff;
    font-size: 56px;
    font-family: sans-serif;
    line-height: 100px;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    transition: opacity 300ms;
}

.md-show-popup {
    opacity: 1;
}

.md-alfabet .mbsc-ms-item {
    min-width: 2.5em;
}

.md-iata {
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -9px;
}

.example-full .md-popup

    {
    position: fixed;
}

.md-item-star .mbsc-ic-star3 {
    font-size: 14px;
}

/* no bookmark section */

.md-navigate .md-list .mbsc-lv-item.md-no-bookmark {
    display: none;
    padding: 1.5em 2.5em;
    height: 571px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.md-nob-separator {
    height: 1px;
    margin-bottom: 38px;
    width: 100%;
    background: #CACACA;
}

.md-nob-title {
    text-align: center;
    padding: 1em;
    font-size: 16px;
}

.md-nob-txt {
    text-align: center;
    padding: 1em 0 2em 0;
    color: #a0a0a0;
    font-size: 14px;
}

.md-navigate .mbsc-lv .md-no-bookmark.mbsc-lv-item .md-nob-img {
    position: static;
    display: block;
    max-width: 274px;
    width: 274px;
    max-height: initial;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-bottom: 14px;
    transform: none;
}

.md-no-bookmark {
    display: none;
    padding: 2em;
    background: #f7f7f7;
    font-size: 16px;
}

.md-navigate .md-no-bookmark.mbsc-lv-item-active:after {
    background: none !important;
}