djordje.djoric
/
secure-sharing


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>AdminLTE 3 | Navbar & Tabs</title>

    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../plugins/fontawesome-free/css/all.min.css" rel="stylesheet">
    <!-- SweetAlert2 -->
    <link href="../../plugins/sweetalert2/sweetalert2.min.css" rel="stylesheet">
    <!-- Toastr -->
    <link href="../../plugins/toastr/toastr.min.css" rel="stylesheet">
    <!-- Theme style -->
    <link href="../../dist/css/adminlte.min.css" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a class="nav-link" href="../../index3.html">Home</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Navbar Search -->
            <li class="nav-item">
                <a class="nav-link" data-target="#main-header-search" data-widget="navbar-search" href="#"
                   role="button">
                    <i class="fas fa-search"></i>
                </a>
                <div class="navbar-search-block" id="main-header-search">
                    <form class="form-inline">
                        <div class="input-group input-group-sm">
                            <input aria-label="Search" class="form-control form-control-navbar" placeholder="Search"
                                   type="search">
                            <div class="input-group-append">
                                <button class="btn btn-navbar" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-navbar" data-widget="navbar-search" type="button">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>

            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-comments"></i>
                    <span class="badge badge-danger navbar-badge">3</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <a class="dropdown-item" href="#">
                        <!-- Message Start -->
                        <div class="media">
                            <img alt="User Avatar" class="img-size-50 mr-3 img-circle"
                                 src="../../dist/img/user1-128x128.jpg">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Brad Diesel
                                    <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">Call me whenever you can

                                </p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <!-- Message Start -->
                        <div class="media">
                            <img alt="User Avatar" class="img-size-50 img-circle mr-3"
                                 src="../../dist/img/user8-128x128.jpg">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    John Pierce
                                    <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">I got your message bro</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <!-- Message Start -->
                        <div class="media">
                            <img alt="User Avatar" class="img-size-50 img-circle mr-3"
                                 src="../../dist/img/user3-128x128.jpg">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Nora Silvester
                                    <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">The subject goes here</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item dropdown-footer" href="#">See All Messages</a>
                </div>
            </li>
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">15</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">15 Notifications</span>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                        <span class="float-right text-muted text-sm">3 mins</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <i class="fas fa-users mr-2"></i> 8 friend requests
                        <span class="float-right text-muted text-sm">12 hours</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item dropdown-footer" href="#">See All Notifications</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-slide="true" data-widget="control-sidebar" href="#" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a class="brand-link" href="../../index3.html">
            <img alt="AdminLTE Logo" class="brand-image img-circle elevation-3" src="../../dist/img/AdminLTELogo.png"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img alt="User Image" class="img-circle elevation-2" src="../../dist/img/user2-160x160.jpg">
                </div>
                <div class="info">
                    <a class="d-block" href="#">Alexander Pierce</a>
                </div>
            </div>

            <!-- SidebarSearch Form -->
            <div class="form-inline">
                <div class="input-group" data-widget="sidebar-search">
                    <input aria-label="Search" class="form-control form-control-sidebar" placeholder="Search"
                           type="search">
                    <div class="input-group-append">
                        <button class="btn btn-sidebar">
                            <i class="fas fa-search fa-fw"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-accordion="false" data-widget="treeview"
                    role="menu">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                Dashboard
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../../index.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v1</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../../index2.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v2</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../../index3.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v3</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../widgets.html">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                Widgets
                                <span class="right badge badge-danger">New</span>
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-copy"></i>
                            <p>
                                Layout Options
                                <i class="fas fa-angle-left right"></i>
                                <span class="badge badge-info right">6</span>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/top-nav.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Top Navigation</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/top-nav-sidebar.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Top Navigation + Sidebar</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/boxed.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Boxed</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/fixed-sidebar.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Fixed Sidebar</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/fixed-sidebar-custom.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Fixed Sidebar <small>+ Custom Area</small></p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/fixed-topnav.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Fixed Navbar</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/fixed-footer.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Fixed Footer</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../layout/collapsed-sidebar.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Collapsed Sidebar</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-chart-pie"></i>
                            <p>
                                Charts
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../charts/chartjs.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>ChartJS</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../charts/flot.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Flot</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../charts/inline.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Inline</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../charts/uplot.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>uPlot</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item menu-open">
                        <a class="nav-link active" href="#">
                            <i class="nav-icon fas fa-tree"></i>
                            <p>
                                UI Elements
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/general.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>General</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/icons.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Icons</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/buttons.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Buttons</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/sliders.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Sliders</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/modals.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Modals & Alerts</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="../UI/navbar.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Navbar & Tabs</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/timeline.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Timeline</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../UI/ribbons.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Ribbons</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>
                                Forms
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../forms/general.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>General Elements</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../forms/advanced.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Advanced Elements</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../forms/editors.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Editors</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../forms/validation.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Validation</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-table"></i>
                            <p>
                                Tables
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../tables/simple.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Simple Tables</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../tables/data.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>DataTables</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../tables/jsgrid.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>jsGrid</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-header">EXAMPLES</li>
                    <li class="nav-item">
                        <a class="nav-link" href="../calendar.html">
                            <i class="nav-icon far fa-calendar-alt"></i>
                            <p>
                                Calendar
                                <span class="badge badge-info right">2</span>
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../gallery.html">
                            <i class="nav-icon far fa-image"></i>
                            <p>
                                Gallery
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../kanban.html">
                            <i class="nav-icon fas fa-columns"></i>
                            <p>
                                Kanban Board
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon far fa-envelope"></i>
                            <p>
                                Mailbox
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../mailbox/mailbox.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Inbox</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../mailbox/compose.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Compose</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../mailbox/read-mail.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Read</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-book"></i>
                            <p>
                                Pages
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/invoice.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Invoice</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/profile.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Profile</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/e-commerce.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>E-commerce</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/projects.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Projects</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/project-add.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Project Add</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/project-edit.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Project Edit</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/project-detail.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Project Detail</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/contacts.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Contacts</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/faq.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>FAQ</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/contact-us.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Contact us</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon far fa-plus-square"></i>
                            <p>
                                Extras
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>
                                        Login & Register v1
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/login.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Login v1</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/register.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Register v1</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/forgot-password.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Forgot Password v1</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/recover-password.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Recover Password v1</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>
                                        Login & Register v2
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/login-v2.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Login v2</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/register-v2.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Register v2</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/forgot-password-v2.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Forgot Password v2</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../examples/recover-password-v2.html">
                                            <i class="far fa-circle nav-icon"></i>
                                            <p>Recover Password v2</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/lockscreen.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Lockscreen</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/legacy-user-menu.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Legacy User Menu</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/language-menu.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Language Menu</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/404.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Error 404</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/500.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Error 500</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/pace.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Pace</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../examples/blank.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Blank Page</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../../starter.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Starter Page</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-search"></i>
                            <p>
                                Search
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="../search/simple.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Simple Search</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../search/enhanced.html">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Enhanced</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-header">MISCELLANEOUS</li>
                    <li class="nav-item">
                        <a class="nav-link" href="../../iframe.html">
                            <i class="nav-icon fas fa-ellipsis-h"></i>
                            <p>Tabbed IFrame Plugin</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://adminlte.io/docs/3.1/">
                            <i class="nav-icon fas fa-file"></i>
                            <p>Documentation</p>
                        </a>
                    </li>
                    <li class="nav-header">MULTI LEVEL EXAMPLE</li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-circle nav-icon"></i>
                            <p>Level 1</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon fas fa-circle"></i>
                            <p>
                                Level 1
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Level 2</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>
                                        Level 2
                                        <i class="right fas fa-angle-left"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <i class="far fa-dot-circle nav-icon"></i>
                                            <p>Level 3</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <i class="far fa-dot-circle nav-icon"></i>
                                            <p>Level 3</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <i class="far fa-dot-circle nav-icon"></i>
                                            <p>Level 3</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Level 2</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-circle nav-icon"></i>
                            <p>Level 1</p>
                        </a>
                    </li>
                    <li class="nav-header">LABELS</li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon far fa-circle text-danger"></i>
                            <p class="text">Important</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon far fa-circle text-warning"></i>
                            <p>Warning</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="nav-icon far fa-circle text-info"></i>
                            <p>Informational</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>
                            Navbar & Tabs
                            <small>new</small>
                        </h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Navbar & Tabs</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fas fa-edit"></i>
                                    Navbar Examples
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <h4>Default Navbar <small>(navbar-light)</small></h4>
                                        <nav class="navbar navbar-expand navbar-light">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search1"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search1">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <h4>Default Navbar <small>(navbar-white navbar-light)</small></h4>
                                        <nav class="navbar navbar-expand navbar-white navbar-light">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search2"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search2">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <h4 class="mt-4">Primary Navbar <small><b>recommended</b> (navbar-primary
                                            navbar-dark)</small></h4>
                                        <nav class="navbar navbar-expand navbar-primary navbar-dark">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search3"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search3">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <h4 class="mt-4">Primary Navbar <small>(navbar-primary navbar-light)</small>
                                        </h4>
                                        <nav class="navbar navbar-expand navbar-primary navbar-light">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search4"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search4">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <h4 class="mt-4">Orange Navbar <small><b>recommended</b> (navbar-orange
                                            navbar-light)</small></h4>
                                        <nav class="navbar navbar-expand navbar-orange navbar-light">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search5"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search5">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <h4 class="mt-4">Orange Navbar <small>(navbar-orange navbar-dark)</small></h4>
                                        <nav class="navbar navbar-expand navbar-orange navbar-dark">
                                            <!-- Left navbar links -->
                                            <ul class="navbar-nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
                                                            class="fas fa-bars"></i></a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="../../index3.html">Home</a>
                                                </li>
                                                <li class="nav-item d-none d-sm-inline-block">
                                                    <a class="nav-link" href="#">Contact</a>
                                                </li>
                                            </ul>

                                            <!-- Right navbar links -->
                                            <ul class="navbar-nav ml-auto">
                                                <!-- Navbar Search -->
                                                <li class="nav-item">
                                                    <a class="nav-link" data-target="#navbar-search6"
                                                       data-widget="navbar-search" href="#" role="button">
                                                        <i class="fas fa-search"></i>
                                                    </a>
                                                    <div class="navbar-search-block" id="navbar-search6">
                                                        <form class="form-inline">
                                                            <div class="input-group input-group-sm">
                                                                <input aria-label="Search"
                                                                       class="form-control form-control-navbar" placeholder="Search"
                                                                       type="search">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-navbar" type="submit">
                                                                        <i class="fas fa-search"></i>
                                                                    </button>
                                                                    <button class="btn btn-navbar" data-widget="navbar-search"
                                                                            type="button">
                                                                        <i class="fas fa-times"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </li>

                                                <!-- Messages Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-comments"></i>
                                                        <span class="badge badge-danger navbar-badge">3</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 mr-3 img-circle"
                                                                     src="../../dist/img/user1-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Brad Diesel
                                                                        <span class="float-right text-sm text-danger"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">Call me whenever you can

                                                                    </p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user8-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        John Pierce
                                                                        <span class="float-right text-sm text-muted"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">I got your message bro</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <!-- Message Start -->
                                                            <div class="media">
                                                                <img alt="User Avatar"
                                                                     class="img-size-50 img-circle mr-3"
                                                                     src="../../dist/img/user3-128x128.jpg">
                                                                <div class="media-body">
                                                                    <h3 class="dropdown-item-title">
                                                                        Nora Silvester
                                                                        <span class="float-right text-sm text-warning"><i
                                                                                class="fas fa-star"></i></span>
                                                                    </h3>
                                                                    <p class="text-sm">The subject goes here</p>
                                                                    <p class="text-sm text-muted"><i
                                                                            class="far fa-clock mr-1"></i> 4 Hours Ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <!-- Message End -->
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Messages</a>
                                                    </div>
                                                </li>
                                                <!-- Notifications Dropdown Menu -->
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                                        <i class="far fa-bell"></i>
                                                        <span class="badge badge-warning navbar-badge">15</span>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                                        <span class="dropdown-item dropdown-header">15 Notifications</span>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-envelope mr-2"></i> 4 new messages
                                                            <span class="float-right text-muted text-sm">3 mins</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-users mr-2"></i> 8 friend requests
                                                            <span class="float-right text-muted text-sm">12 hours</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="fas fa-file mr-2"></i> 3 new reports
                                                            <span class="float-right text-muted text-sm">2 days</span>
                                                        </a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item dropdown-footer" href="#">See All
                                                            Notifications</a>
                                                    </div>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                                        <i class="fas fa-expand-arrows-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-slide="true" data-widget="control-sidebar"
                                                       href="#" role="button">
                                                        <i class="fas fa-th-large"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- ./row -->
                <div class="row">
                    <div class="col-12">
                        <h4>Nav Tabs inside Card Header <small>card-tabs / card-outline-tabs</small></h4>
                    </div>
                </div>
                <!-- ./row -->
                <div class="row">
                    <div class="col-12 col-sm-6">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-one-home" aria-selected="true" class="nav-link active"
                                           data-toggle="pill" href="#custom-tabs-one-home" id="custom-tabs-one-home-tab"
                                           role="tab">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-one-profile" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-one-profile"
                                           id="custom-tabs-one-profile-tab" role="tab">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-one-messages" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-one-messages"
                                           id="custom-tabs-one-messages-tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-one-settings" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-one-settings"
                                           id="custom-tabs-one-settings-tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div aria-labelledby="custom-tabs-one-home-tab" class="tab-pane fade show active" id="custom-tabs-one-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="custom-tabs-one-profile-tab" class="tab-pane fade" id="custom-tabs-one-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="custom-tabs-one-messages-tab" class="tab-pane fade" id="custom-tabs-one-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="custom-tabs-one-settings-tab" class="tab-pane fade" id="custom-tabs-one-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                                    <li class="pt-2 px-3"><h3 class="card-title">Card Title</h3></li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-two-home" aria-selected="true" class="nav-link active"
                                           data-toggle="pill" href="#custom-tabs-two-home" id="custom-tabs-two-home-tab"
                                           role="tab">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-two-profile" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-two-profile"
                                           id="custom-tabs-two-profile-tab" role="tab">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-two-messages" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-two-messages"
                                           id="custom-tabs-two-messages-tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-two-settings" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-two-settings"
                                           id="custom-tabs-two-settings-tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-two-tabContent">
                                    <div aria-labelledby="custom-tabs-two-home-tab" class="tab-pane fade show active" id="custom-tabs-two-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="custom-tabs-two-profile-tab" class="tab-pane fade" id="custom-tabs-two-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="custom-tabs-two-messages-tab" class="tab-pane fade" id="custom-tabs-two-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="custom-tabs-two-settings-tab" class="tab-pane fade" id="custom-tabs-two-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6">
                        <div class="card card-primary card-outline card-tabs">
                            <div class="card-header p-0 pt-1 border-bottom-0">
                                <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-three-home" aria-selected="true" class="nav-link active"
                                           data-toggle="pill" href="#custom-tabs-three-home"
                                           id="custom-tabs-three-home-tab" role="tab">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-three-profile" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-three-profile"
                                           id="custom-tabs-three-profile-tab" role="tab">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-three-messages" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-three-messages"
                                           id="custom-tabs-three-messages-tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-three-settings" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-three-settings"
                                           id="custom-tabs-three-settings-tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-three-tabContent">
                                    <div aria-labelledby="custom-tabs-three-home-tab" class="tab-pane fade show active" id="custom-tabs-three-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="custom-tabs-three-profile-tab" class="tab-pane fade" id="custom-tabs-three-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="custom-tabs-three-messages-tab" class="tab-pane fade" id="custom-tabs-three-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="custom-tabs-three-settings-tab" class="tab-pane fade" id="custom-tabs-three-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="card card-primary card-outline card-outline-tabs">
                            <div class="card-header p-0 border-bottom-0">
                                <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-four-home" aria-selected="true" class="nav-link active"
                                           data-toggle="pill" href="#custom-tabs-four-home"
                                           id="custom-tabs-four-home-tab" role="tab">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-four-profile" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-four-profile"
                                           id="custom-tabs-four-profile-tab" role="tab">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-four-messages" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-four-messages"
                                           id="custom-tabs-four-messages-tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-four-settings" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-four-settings"
                                           id="custom-tabs-four-settings-tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-four-tabContent">
                                    <div aria-labelledby="custom-tabs-four-home-tab" class="tab-pane fade show active" id="custom-tabs-four-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="custom-tabs-four-profile-tab" class="tab-pane fade" id="custom-tabs-four-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="custom-tabs-four-messages-tab" class="tab-pane fade" id="custom-tabs-four-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="custom-tabs-four-settings-tab" class="tab-pane fade" id="custom-tabs-four-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h4>Nav Tabs Overlay for loading</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-five-tab" role="tablist">
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-five-overlay" aria-selected="true" class="nav-link active"
                                           data-toggle="pill" href="#custom-tabs-five-overlay"
                                           id="custom-tabs-five-overlay-tab" role="tab">Overlay</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-five-overlay-dark" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-five-overlay-dark"
                                           id="custom-tabs-five-overlay-dark-tab" role="tab">Overlay
                                            Dark</a>
                                    </li>
                                    <li class="nav-item">
                                        <a aria-controls="custom-tabs-five-normal" aria-selected="false" class="nav-link"
                                           data-toggle="pill" href="#custom-tabs-five-normal"
                                           id="custom-tabs-five-normal-tab" role="tab">Normal Tab</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-five-tabContent">
                                    <div aria-labelledby="custom-tabs-five-overlay-tab" class="tab-pane fade show active" id="custom-tabs-five-overlay"
                                         role="tabpanel">
                                        <div class="overlay-wrapper">
                                            <div class="overlay"><i class="fas fa-3x fa-sync-alt fa-spin"></i>
                                                <div class="text-bold pt-2">Loading...</div>
                                            </div>
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada
                                            lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam
                                            ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor
                                            felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi,
                                            vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique
                                            senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu
                                            lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim
                                            sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin
                                            porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus
                                            pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum
                                            at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
                                        </div>
                                    </div>
                                    <div aria-labelledby="custom-tabs-five-overlay-dark-tab" class="tab-pane fade" id="custom-tabs-five-overlay-dark"
                                         role="tabpanel">
                                        <div class="overlay-wrapper">
                                            <div class="overlay dark"><i class="fas fa-3x fa-sync-alt fa-spin"></i>
                                                <div class="text-bold pt-2">Loading...</div>
                                            </div>
                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna,
                                            iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor.
                                            Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique.
                                            Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat
                                            urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at
                                            consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse
                                            platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
                                        </div>
                                    </div>
                                    <div aria-labelledby="custom-tabs-five-normal-tab" class="tab-pane fade" id="custom-tabs-five-normal"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                    </div>
                </div>
                <!-- /.row -->
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i>
                            Vertical Tabs Examples
                        </h3>
                    </div>
                    <div class="card-body">
                        <h4>Left Sided</h4>
                        <div class="row">
                            <div class="col-5 col-sm-3">
                                <div aria-orientation="vertical" class="nav flex-column nav-tabs h-100" id="vert-tabs-tab"
                                     role="tablist">
                                    <a aria-controls="vert-tabs-home" aria-selected="true" class="nav-link active"
                                       data-toggle="pill" href="#vert-tabs-home" id="vert-tabs-home-tab"
                                       role="tab">Home</a>
                                    <a aria-controls="vert-tabs-profile" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-profile" id="vert-tabs-profile-tab"
                                       role="tab">Profile</a>
                                    <a aria-controls="vert-tabs-messages" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-messages" id="vert-tabs-messages-tab"
                                       role="tab">Messages</a>
                                    <a aria-controls="vert-tabs-settings" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-settings" id="vert-tabs-settings-tab"
                                       role="tab">Settings</a>
                                </div>
                            </div>
                            <div class="col-7 col-sm-9">
                                <div class="tab-content" id="vert-tabs-tabContent">
                                    <div aria-labelledby="vert-tabs-home-tab" class="tab-pane text-left fade show active" id="vert-tabs-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="vert-tabs-profile-tab" class="tab-pane fade" id="vert-tabs-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="vert-tabs-messages-tab" class="tab-pane fade" id="vert-tabs-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="vert-tabs-settings-tab" class="tab-pane fade" id="vert-tabs-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="mt-4">Right Sided <small>(nav-tabs-right)</small></h4>
                        <div class="row">
                            <div class="col-7 col-sm-9">
                                <div class="tab-content" id="vert-tabs-right-tabContent">
                                    <div aria-labelledby="vert-tabs-right-home-tab" class="tab-pane fade show active" id="vert-tabs-right-home"
                                         role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                        ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non
                                        magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper
                                        ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis
                                        aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada
                                        fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus
                                        porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est
                                        vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus
                                        rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris
                                        lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia
                                        erat eget sapien porta consectetur.
                                    </div>
                                    <div aria-labelledby="vert-tabs-right-profile-tab" class="tab-pane fade" id="vert-tabs-right-profile"
                                         role="tabpanel">
                                        Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris
                                        pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor
                                        sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus
                                        orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a
                                        luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus.
                                        Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc
                                        euismod pellentesque diam.
                                    </div>
                                    <div aria-labelledby="vert-tabs-right-messages-tab" class="tab-pane fade" id="vert-tabs-right-messages"
                                         role="tabpanel">
                                        Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris.
                                        Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget
                                        condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum
                                        orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna
                                        a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam
                                        vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet
                                        sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum,
                                        lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem
                                        eu risus tincidunt eleifend ac ornare magna.
                                    </div>
                                    <div aria-labelledby="vert-tabs-right-settings-tab" class="tab-pane fade" id="vert-tabs-right-settings"
                                         role="tabpanel">
                                        Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis
                                        tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque
                                        tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum
                                        consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec
                                        pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam.
                                        Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst.
                                        Praesent imperdiet accumsan ex sit amet facilisis.
                                    </div>
                                </div>
                            </div>
                            <div class="col-5 col-sm-3">
                                <div aria-orientation="vertical" class="nav flex-column nav-tabs nav-tabs-right h-100"
                                     id="vert-tabs-right-tab" role="tablist">
                                    <a aria-controls="vert-tabs-right-home" aria-selected="true" class="nav-link active"
                                       data-toggle="pill" href="#vert-tabs-right-home" id="vert-tabs-right-home-tab"
                                       role="tab">Home</a>
                                    <a aria-controls="vert-tabs-right-profile" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-right-profile"
                                       id="vert-tabs-right-profile-tab" role="tab">Profile</a>
                                    <a aria-controls="vert-tabs-right-messages" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-right-messages"
                                       id="vert-tabs-right-messages-tab" role="tab">Messages</a>
                                    <a aria-controls="vert-tabs-right-settings" aria-selected="false" class="nav-link"
                                       data-toggle="pill" href="#vert-tabs-right-settings"
                                       id="vert-tabs-right-settings-tab" role="tab">Settings</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.card -->
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i>
                            Tabs Custom Content Examples
                        </h3>
                    </div>
                    <div class="card-body">
                        <h4>Custom Content Below</h4>
                        <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                            <li class="nav-item">
                                <a aria-controls="custom-content-below-home" aria-selected="true" class="nav-link active"
                                   data-toggle="pill" href="#custom-content-below-home"
                                   id="custom-content-below-home-tab" role="tab">Home</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-below-profile" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-below-profile"
                                   id="custom-content-below-profile-tab" role="tab">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-below-messages" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-below-messages"
                                   id="custom-content-below-messages-tab" role="tab">Messages</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-below-settings" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-below-settings"
                                   id="custom-content-below-settings-tab" role="tab">Settings</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="custom-content-below-tabContent">
                            <div aria-labelledby="custom-content-below-home-tab" class="tab-pane fade show active" id="custom-content-below-home"
                                 role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna
                                feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula.
                                Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque
                                habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin
                                id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim
                                sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor
                                porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non
                                consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus.
                                Cras lacinia erat eget sapien porta consectetur.
                            </div>
                            <div aria-labelledby="custom-content-below-profile-tab" class="tab-pane fade" id="custom-content-below-profile"
                                 role="tabpanel">
                                Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus
                                ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                                posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula
                                placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet
                                ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
                            </div>
                            <div aria-labelledby="custom-content-below-messages-tab" class="tab-pane fade" id="custom-content-below-messages"
                                 role="tabpanel">
                                Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus
                                volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce
                                nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue
                                ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur
                                eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur,
                                ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex
                                vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus.
                                Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
                            </div>
                            <div aria-labelledby="custom-content-below-settings-tab" class="tab-pane fade" id="custom-content-below-settings"
                                 role="tabpanel">
                                Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus
                                turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis
                                vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum
                                pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget
                                aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac
                                habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
                            </div>
                        </div>
                        <div class="tab-custom-content">
                            <p class="lead mb-0">Custom Content goes here</p>
                        </div>
                        <h4 class="mt-5 ">Custom Content Above</h4>
                        <ul class="nav nav-tabs" id="custom-content-above-tab" role="tablist">
                            <li class="nav-item">
                                <a aria-controls="custom-content-above-home" aria-selected="true" class="nav-link active"
                                   data-toggle="pill" href="#custom-content-above-home"
                                   id="custom-content-above-home-tab" role="tab">Home</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-above-profile" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-above-profile"
                                   id="custom-content-above-profile-tab" role="tab">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-above-messages" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-above-messages"
                                   id="custom-content-above-messages-tab" role="tab">Messages</a>
                            </li>
                            <li class="nav-item">
                                <a aria-controls="custom-content-above-settings" aria-selected="false" class="nav-link"
                                   data-toggle="pill" href="#custom-content-above-settings"
                                   id="custom-content-above-settings-tab" role="tab">Settings</a>
                            </li>
                        </ul>
                        <div class="tab-custom-content">
                            <p class="lead mb-0">Custom Content goes here</p>
                        </div>
                        <div class="tab-content" id="custom-content-above-tabContent">
                            <div aria-labelledby="custom-content-above-home-tab" class="tab-pane fade show active" id="custom-content-above-home"
                                 role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus
                                ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna
                                feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula.
                                Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque
                                habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin
                                id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim
                                sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor
                                porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non
                                consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus.
                                Cras lacinia erat eget sapien porta consectetur.
                            </div>
                            <div aria-labelledby="custom-content-above-profile-tab" class="tab-pane fade" id="custom-content-above-profile"
                                 role="tabpanel">
                                Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus
                                ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                                posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula
                                placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet
                                ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
                            </div>
                            <div aria-labelledby="custom-content-above-messages-tab" class="tab-pane fade" id="custom-content-above-messages"
                                 role="tabpanel">
                                Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus
                                volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce
                                nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue
                                ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur
                                eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur,
                                ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex
                                vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus.
                                Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
                            </div>
                            <div aria-labelledby="custom-content-above-settings-tab" class="tab-pane fade" id="custom-content-above-settings"
                                 role="tabpanel">
                                Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus
                                turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis
                                vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum
                                pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget
                                aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac
                                habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="float-right d-none d-sm-block">
            <b>Version</b> 3.1.0
        </div>
        <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
</body>
</html>