Search results

Fixed Sidebar in Angular Sidebar component

The following example demonstrates how to render sidebar with fixed position. When scroll the main content area, the position of the sidebar will not change.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    @ViewChild('sidebar')
    public sidebar: SidebarComponent;
    public width: string = '290px';
    public onCreated(args: any) {
         this.sidebar.element.style.visibility = '';
    }
    openClick(): void {
        this.sidebar.toggle();
    }

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component'

@NgModule({
    imports: [SidebarModule, BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
        <!-- declaration of sidebar element -->
        <div id="wrapper">
            <!--Sidebar element declaration -->
            <ejs-sidebar id="default-sidebar" #sidebar [width]='width' (created)="onCreated($event)" style="visibility: hidden" >
                    <div class="sidebar-header header-cover" style="background-color:#0378d5">
                            <div class="image-container">
                                <div class="sidebar-image">
                                </div>
                            </div>
                            <div style="padding: 0 0 5px 0;">
                                <a class="sidebar-brand" href="#settings-dropdown">
                                    john.doe@gmail.com
                                </a>
                                <span class="sf-icon-down icon"></span>
                            </div>
                        </div>

                        <!-- Sidebar navigation -->
                        <ul class="nav sidebar-nav">
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-file"></i>
                                    <span class="e-text"> Inbox</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-starred"></i>
                                    <span class="e-text"> Starred</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-recent"></i>
                                    <span class="e-text">Snoozed</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-important"></i>
                                    <span class="e-text">Important</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-offline"></i>
                                    <span class="e-text"> Sent</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="sf-icon-sidebar sf-icon-backup"></i>
                                    <span class="e-text"> Draft</span>
                                </a>
                            </li>
                        </ul>
            </ejs-sidebar>
            <!-- main content declaration -->
            <div>
                    <div class="content">
                        <div id="left">
                            <span id="hamburger" class="e-icons menu default" (click)="openClick()"></span>
                        </div>
                        <div id="center">
                            <span>Inbox</span>
                        </div>
                        <div id="right">
                            <span class="sf-icon-search"></span>
                        </div>
                    </div>
                    <div>
                        <div class="e-control e-listview e-list-template e-touch">
                            <ul class="e-list-parent e-ul ">
                                <li class="e-list-group-item e-level-1" role="group" data-uid="group-list-item-Today"
                                    aria-level="1">
                                    <div class="e-text-content" role="presentation"><span class style="width: 100%; margin-left: 2%; margin-top: -2%;">Today</span></div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">Albert Lives</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Opening for Sales Manager</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hello Uta Morgan,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Ila Russo</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Business dinner invitation
                                        </span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hello Jelani Moreno,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Garth Owen</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Application for Job Title</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hello Ila Russo,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Annual Conference</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Annual Conference</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Annual Conference</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Annual Conference</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">
                                                Nichole Rivas</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Annual Conference</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Hi Igor Mccoy,</span></span>
                                    </div>
                                </li>
                                <li class="e-list-item">
                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                        <span class="e-avatar e-icon sf-icon-profile"></span>
                                        <div>
                                            <span class="e-list-item-header e-name">Ursula Patterson</span>
                                        </div>
                                        <span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
                                        <span class="e-list-item-header sf-icon-star">
                                            <span class="e-list-text">Programmer Position Application</span></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--end of main content declaration -->
        </div>
</div>
.control-section {        
  overflow: hidden;
}

.e-listview .e-list-parent {
  margin: 0 ;
  padding: 15px 0 15px 0 ;
}

.e-listview .e-list-group-item {
  background-color: #ffffff ;
}
body {
  overflow: hidden;
}
.e-second-heading {
  color: rgba(0, 0, 0, 0.64) ;
  display: block;
  font-size: 15px ;
  font-weight: 500 ;
}

.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
  top: 1.5666em;
  border-radius: 50%;
  border-color: #4f4b4b ;
  border: 1px solid #BADA55;
}

.e-listview {
  overflow: initial;
}


.sf-icon-profile:before {
  float: right;
  content: '\e717';
  font-size: 25px;
  padding-top:8px;
  padding-right:7px;
}

.e-avatar {
  background: none;
  color: #000;
}

.e-today {
  height: 50px;
  padding: 15px;
}

.e-today span {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  font-size: 15px;
  font-weight: 600;
  height: 36px;
}

.content {
  height: 47px;
  background: #0378d5;
  width: 100%;
}

#left {
  float: left;
  width: 30px;
  height: 47px;
}

#center {
  display: inline-block;
  margin: 0 auto;
  width: 0px;
  height: 47px;
  padding: 9px 0 12px 0;
  font-size: 18px;
  color: #ffff;
  float: left;
  text-align: center;
  padding-left: 40px;
}

#right {
  float: right;
  width: 28px;
  height: 47px;
  padding: 16px 0 0 0;
  color: #ffff;

}

.sf-icon-file:before {
  content: '\e701';

}

.sf-icon-share:before {
  content: '\e70b';
}


.sf-icon-starred:before {
  content: '\e708';
}

.sf-icon-star:before {
  content: '\e707';
  font-size: 15px;
  color: #000;
  float: right;

}

.sf-icon-recent:before {
  content: '\e70c';
}

.sf-icon-important:before {
  content: '\e713';
}

.e-sidebar.e-left {
  border: none;
}

.sf-icon-offline:before {
  content: '\e714';
  font-size: 30px;
}

.sf-icon-backup:before {
  content: '\e712';

}

.sf-icon-down:before {
  content: '\e709';

}

.sf-icon-search:before {
  content: '\e711';
  font-size: 18px;

}

.sf-icon-sidebar {
  content: '\e701';
  color: #000000;
  display: inline-block;
  margin-right: 16px;
  width: 40px;
  text-align: left;
  font-size: 20px ;
  vertical-align: middle;
}

ul.nav.sidebar-nav {
  padding: 5px 0 5px 0;
  margin: 0px;
  max-height:200px;
  overflow-y: auto;
}

.sidebar-nav {
  list-style: none;
  padding: 5px 0 5px 0;
}

a.sidebar-brand {
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
}

.nav.sidebar-nav li:hover {
  text-decoration: none;
  background-color: #eee;
}

span.sf-icon-down.icon {
  font-size: 12px;
}

.sidebar-nav li a {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: block;
  height: 48px;
  line-height: 48px;
  width:241px;
  padding: 0 56px 0 20px;
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  font-size: 14px;

}

/* sample-level styles */
.image-container {
  padding: 18px 0 0 16px;
}

.sidebar-image {
  background: url(https://ej2.syncfusion.com/showcase/angular/expensetracker/assets/images/user.svg) no-repeat scroll 0 0 transparent;
  background-position-x: left;
  height: 85px;
  width: 100%;
  background-size: 85px;
  /* margin-left: 20px; */
}

.sidebar-brand {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  padding-right: 40px;
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  display: inline-flex;
}

.sidebar-image img {
  width: 54px;
  height: 54px;
  margin: 16px;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#default-sidebar {
  color: #ffffff;
  position:fixed; 
  overflow: hidden;
}

/* sample-level styles */

#hamburger.menu {
  font-size: 23px;
  cursor: pointer;
  float: left;
  line-height: 50px;
  position: absolute;
  z-index: 1000;
  margin-left: 25px;
  color: #ffff;
}

#hamburger.menu:before {
  content: '\e10d';
}

#hamburger.menu.e-rtl {
  position: relative;
  float: right;
}

@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjciQ6oAAAEoAAAAVmNtYXBH1Ec8AAABsAAAAHJnbHlmKcXfOQAAAkAAAAg4aGVhZBLt+DYAAADQAAAANmhoZWEHogNsAAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQukCgIAAAIkAAAAGm1heHABGQEOAAABCAAAACBuYW1lR4040wAACngAAAJtcG9zdEFgIbwAAAzoAAAArAABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAAlbrm7l8PPPUACwPoAAAAANfuWa8AAAAA1+5ZrwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAAMAQIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QLhkANS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABeAAAADgAIAAIABuEC4QnhD+ES4RvhkP//AADhAuEJ4QvhEuEa4ZD//wAAAAAAAAAAAAAAAAABAA4ADgAOABYAFgAYAAAAAQACAAYABAADAAgABwAKAAkABQALAAAAAAAAAB4AQABaAQYB5gJkAnoCjgKwA8oEHAAAAAIAAAAAA+oDlQAEAAoAAAEFESERCQEVCQE1AgcBZv0mAXQB5P4c/g4Cw/D+lwFpAcP+s24BTf6qbgAAAAEAAAAAA+oD6gALAAATCQEXCQEHCQEnCQF4AYgBiGP+eAGIY/54/nhjAYj+eAPr/ngBiGP+eP54YwGI/nhjAYgBiAAAAwAAAAAD6gOkAAMABwALAAA3IRUhESEVIREhFSEVA9b8KgPW/CoD1vwq6I0B64wB640AAAEAAAAAA+oD4QCaAAABMx8aHQEPDjEPAh8bIT8bNS8SPxsCAA0aGhgMDAsLCwoKCgkJCQgHBwYGBgUEBAMCAgECAwUFBggICQoLCwwMDg0GAgEBAgIDBAMIBiIdHh0cHBoZFhUSEAcFBgQDAwEB/CoBAQMDBAUGBw8SFRYYGhsbHB0cHwsJBQQEAwIBAQMEDg0NDAsLCQkJBwYGBAMCAQEBAgIDBAQFBQYGBwgICAkJCgoKCwsLDAwMGRoD4gMEBwQFBQYGBwgICAkKCgsLDAwNDQ4ODxAQEBEWFxYWFhYVFRQUExIRERAOFxMLCggIBgYFBgQMDAwNDg4QDxERERIJCQkKCQkJFRQJCQoJCQgJEhERERAPDw4NDQsMBwgFBgYICQkKDAwODw8RERMTExUUFhUWFxYWFxEQEBAPDg4NDQwMCwsKCgkICAgHBgYFBQQEBQQAAAAAAwAAAAAD8wPzAEEAZQDFAAABMx8FFREzHwYdAg8GIS8GPQI/BjM1KwEvBT0CPwUzNzMfBR0CDwUrAi8FPQI/BTMnDw8fFz8XLxcPBgI+BQQDAwMCAT8EBAMDAwIBAQIDAwMEBP7cBAQDAwMCAQECAwMDBAQ/PwQEAwMDAgEBAgMDAwQE0AUEAwMDAgEBAgMDAwQFfAUEAwMDAgEBAgMDAwQFvRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRocHR4eHyAgISIiISAgHx4eHRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRsbHR4eHyAgISIiISAgHx4eAqYBAgIDBAQE/rMBAQEDAwQEBGgEBAQDAgIBAQEBAgIDBAQEaAQEBAMDAQEB0AECAwMDBAVoBAQDAwMCAeUBAgIEAwQEaAUEAwMDAgEBAgMDAwQFaAQEAwQCAgElERMVFhcZGhwdHh4fICAhIiIhICAfHh4dGxsZFxYVExEQDgsJCAUDAQEDBQcKCw4QERMVFhcZGxsdHh4fICAhIiIhICAfHh4dHBoZFxYVExEQDgsKBwUDAQEDBQcKCw4AAAIAAAAAA9MD6QALAE8AAAEOAQcuASc+ATceAQEHBgcnJgYPAQYWHwEGFBcHDgEfAR4BPwEWHwEeATsBMjY/ATY3FxY2PwE2Ji8BNjQnNz4BLwEuAQ8BJi8BLgErASIGApsBY0tKYwICY0pLY/7WEy4nfAkRBWQEAwdqAwNqBwMEZAURCXwnLhMBDgnICg4BEy4mfQkRBGQFAwhpAwNpCAMFZAQSCH0mLhMBDgrICQ4B9UpjAgJjSkpjAgJjAZWEFB4yBAYIrggSBlIYMhhSBhIIrggFAzIfE4QJDAwJhBQeMgQGCK4IEgZSGDIYUgYSCK4IBQMyHxOECQwMAAEAAAAAAwED6gAFAAAJAicJAQEbAef+FhoBzf4zA+v+Ff4VHwHMAc0AAAAAAQAAAAADAQPqAAUAAAEXCQEHAQLlHf4zAc0a/hYD6x7+M/40HwHrAAEAAAAAA/MD8wALAAATCQEXCQE3CQEnCQENAY7+cmQBjwGPZP5yAY5k/nH+cQOP/nH+cWQBjv5yZAGPAY9k/nEBjwAAAwAAAAAD8wPzAEAAgQEBAAAlDw4rAS8dPQE/DgUVDw4BPw47AR8dBRUfHTsBPx09AS8dKwEPHQL1DQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgIBAgIEAwUFBgYHBwkICQoCygECAgQDBQUGBgcHCQgJCv3QDQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgL8fgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGRoaGRkZGBcYFhYWFRQUExIREQ8PDg0MCwoJCAcFBQMCAgMFBQcICQoLDA0ODw8RERITFBQVFhYWGBcYGRkZGhoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwLFCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFREREREQEBAQDw8PDg4ODQ31ERERERAQEBAPDw8ODg4NDQIwCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFRoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwICAwUFBwgJCgsMDQ4PDxEREhMUFBUWFhYYFxgZGRkaGhkZGRgXGBYWFhUUFBMSEREPDw4NDAsKCQgHBQUDAgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGQAAAQAAAAAD6gPqAEMAABMhHw8RDw8hLw8RPw6aAswNDgwMDAsKCggIBwUFAwIBAQIDBQUHCAgKCgsMDAwODf00DQ4MDAwLCgoICAcFBQMCAQECAwUFBwgICgoLDAwMDgPrAQIDBQUHCAgKCgsLDA0NDv00Dg0NDAsLCgoICAcFBQMCAQECAwUFBwgICgoLCwwNDQ4CzA4NDQwLCwoKCAgHBQUDAgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA0AAQABAAAAAAACAAcADgABAAAAAAADAA0AFQABAAAAAAAEAA0AIgABAAAAAAAFAAsALwABAAAAAAAGAA0AOgABAAAAAAAKACwARwABAAAAAAALABIAcwADAAEECQAAAAIAhQADAAEECQABABoAhwADAAEECQACAA4AoQADAAEECQADABoArwADAAEECQAEABoAyQADAAEECQAFABYA4wADAAEECQAGABoA+QADAAEECQAKAFgBEwADAAEECQALACQBayBlLWljb25zLW1ldHJvUmVndWxhcmUtaWNvbnMtbWV0cm9lLWljb25zLW1ldHJvVmVyc2lvbiAxLjBlLWljb25zLW1ldHJvRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwAtAG0AZQB0AHIAbwBlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0AB2hvbWUtMDELQ2xvc2UtaWNvbnMHbWVudS0wMQR1c2VyB0JUX2luZm8PU2V0dGluZ19BbmRyb2lkDWNoZXZyb24tcmlnaHQMY2hldnJvbi1sZWZ0CE1UX0NsZWFyDE1UX0p1bmttYWlscwRzdG9wAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
  font-family: 'e-sb-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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AAATMzUjBSElByclMzUjNTM1IwUXEQE3JwUBIQLIyAESAs/+/mVm/ezIyMjIAvfx/Sry8gFoAWf9MQGBIXycUVEsIUwhnZMBU/6tk8D3AR8ABAAAAAADzgPqAA8AIAAvADsAACUjJzcjFwcjAwYCFyEuAQcBHgEXPgE3LgEnNDY1JiMOASUzMhYdARQGKwEVLwE3FQceARc+ATcuAScOAQJeJjsvZDI2Lj+tjgMDryP1EP5EA5Rvb5MFY38CAxMTb5QCA3QKDAwKdzs4d5ACWUFDWAECWUFDWCuHV1SKARAm/v4Rv4sEASJxkwICkm8FgmAJEAcDA5OiDAooCgwpLChMIy9DVwICWUFDWAICWAAAAgAAAAAD3QPqAA0AGQAANxUhNS4BJw4BIiYnDgETHgEXPgE3LgEnDgEQA84DknEvc39zL3GS1AOac3SaAwOadHOahIKCdaMRJCgoJBGjAeF0mgMDmnR0mgICmgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBlLXNiLWljb25zUmVndWxhcmUtc2ItaWNvbnNlLXNiLWljb25zVmVyc2lvbiAxLjBlLXNiLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAHMAYgAtAGkAYwBvAG4AcwBlAC0AcwBiAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AcwBiAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbAAltYWlsLXNlbmQLaW5ib3gtMDItd2YLaW5ib3gtMDEtd2YFaW5ib3gPb3Blbi1tZXNzYWdlLXdmDGFycm93aGVhZC0wMRBhcnJvd2hlYWQtdG9wLXdmCXJhdGluZy13ZgtyYXRpbmctLS0wMxFhcnJvd2hlYWQtZG93bi0wMQlmb2xkZXItMDMIdXNlcnMtd2YIY2xvY2stMDIGdXBsb2FkCG9uZWRyaXZlEWNsb3VkLWRvd25sb2FkLXdmD3dvcmstb2ZmbGluZS13ZglzZWFyY2gtd2YPbm90ZS1tZW1vLTAxLXdmDGltcG9ydGFudC13ZglzZW50LW1haWwIaW5ib3gtd2YLbWFpbC0tLXNlbnQJdXNlci1iYWNrDHVzZXItcHJvZmlsZQAAAAA=) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="sf-icon-"],
[class*=" sf-icon-"] {
  font-family: 'e-sb-icons' ;
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span.e-text {
  color: #000000;
}

.title {
  text-align: center;
  font-size: 20px;
  padding: 15px;
}

.sub-title {
  text-align: center;
  font-size: 16px;
  padding: 10px;
}

.center {
  text-align: center;
  display: none;
  font-size: 13px;
  font-weight: 400;
  margin-top: 20px;
}

[class^="sf-icon-"],
[class*=" sf-icon-"] {
  font-family: 'e-sb-icons' ;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

li.e-list-item {
  border-bottom: 0.5px solid #80808070 !important;
  cursor: pointer;
}

.e-content-animation{
  border-bottom: 0.5px solid #80808070;
  height: 477px;
  overflow: hidden;
}