ûm*!Ó<IÙx7ÀÛ:¢F\Ž¡ŸÁºCa^œ6WQ@¡XÈ.+Ø†Œ¨lòóaf€­MWšÎÝ@Ù^n³5-2Ýâ(s)Î—òÂƒEmšRWto„‹‚Æ §»X
òè.¯1«þ70/ü'@Å¤¢QDbêFl@þg»ÎÙýzÛ— É[z3:ÜÏGÎ1=–Q´Ha8×Ò(¯èH0VR­÷
EÓãAXÀ)Ä}‰îC¥ ÈŒå—íà:M‘˜|WEß­Ñ_	ÏÑH÷Wóí|—Ø¨¤"‰ ÷‹H]{dZø¸yþƒh`nûŒ
S7µŽ™«zÑe«ZZèô:¤£‘S±Á¬B¼|Û~¾…
6I8ƒöp¼OSç(fÊÏ(àÊeš^Wä
ðO_³à×ÇNw.ú»zvã`ëŽó$‘m·á¬õý.
@P!ægdGÔ…võnF²•9–²µí»yr³pÚïsªˆì é¡‹ÂpÔUy†ÜÜ tˆÄáÂØaE¼?›6MFfdíã_åla×íØ!¼^E«IhÒ\'Úã¶þxCRÕ®ø~Ï¸ñÿñ9x+½‰Í´mÜò†¸ €ú„ó±Ê¯Ø¡ô}eç²ŠHÎ_‘~¼	Msãªž)ºÞþÁ)®È€GŠÕq„÷qã9ì8/m<ƒ€’XÄÛtKP€#Ê¹èÜm1R ¶ýÅâåÑµãÏõ„«è1)ï®êüA)…§w;µ«ë´O2œíhæ]‹AÉg:Ó*• E“ÅðÏq¹%Ù,?icËo˜TÇo*ŠÉÏ¹RÝœ_ÇÙ&÷Ý4¯3NsÅŠÍ:¦Õ=¤ŠRùZ¹xþ&ƒH‰ú2œÁ_Àj7žÌ~éC•Ø“[Ú¿¿ÏúLÓÀ¿ïëyÍÌlÐÚãZ­ËÒžó}ô*ŠÉÏ¹RÝœ_ÇÙ&ÆûÛ±‹!IÂt¯ÉÕ†ìýÐê¿„¥•E£½Š*aÏUfdç­(G´gIp¹¥±Û¤6¥©ç3‘È´<è2åì¾¹RM:O$( ¼@½5Ô€ÜÚ6˜eá`ÔÂ‚€+îqßET]è$E¨·ƒAð=ŒÂfˆ|xñÛÑxþ(ŒŒ\Ã&Àç‰ÚMåì¾¹RM:O$( ¼@½ÊÎ­ý®vC[£ÚjˆÒ®9c*ÔêIm)‹`ïÃ˜ÖØUÄÖK€hi1\ðÕ©Wë™^n‡oLÅ‘l¿ÒûGP4Z$2w2»RæDOâ™Çªøª‡¯U^’ôŒ,"ŸTCIô±Æ´mð¼öÍ
.3n®6è†CO¾fÕª×°°Ék õk}ÒµV9¦«Ó7¤çoô¤¶Õ…©ˆUYªu5<R¦I8"¼ÔVÔÿfj”öAu/)$Æ#5à•WùHˆV	(@dùEõ.ú»zvã`ëŽó$‘m·á¬›±^ é/ÉÐlkàØ­bì %×¬9*ôØ|Žº{7¤b5Ï…#DxIQ•škâÂók©Ù°Çñ„øïZr}W­Ãh™*ÁÁw½ó·íS&}Vµ«ìœü!R®‡$öR^ÈÃ27ìPB~T,+Ÿ}ªQËšØ` :Î#¶Í9iúC-}¿F]ˆ §ÿ-,âó
p~wÈñFö5¶Ö„Úë—ˆ  ¿ ö¼ú°:A:J½vi’®6è†CO¾fÕª×°°ÉkñZŸ65<n5ð±á©gö™XÂá¶ö“Œ;G×ûGtÛa^«Ì²&Ij8	¸‹.ú»zvã`ëŽó$‘m·á¬£ìù‡ð¸ØŠÑER²7¤b5Ï…#DxIQ•škâÑª?Ù×hfÎ@±'•ï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;8ÌóC†v‰˜0”ê¯Ñg);Ñâ¼À‹šw¿x%ŽÌÞ£	£Áf˜ðMÉŒ¢ò#GD¼¹X›7I4‹Jãþ%
$‰d=¨

tîb¾A„ûªìhêw:lDÞ;$Sv£f,ìær¢}ZƒƒÜßZku;üXlp–Û÷‹ö‰-Š0zE\•·»Äá^f)¨h³Ã‰ÏÍRJÿÎÜÿ—s€y_yù˜¨ÃÍa	Ù0-rB3v«–àBÚ²lÔëÝ“èXíÐÚ¶EŠÑÿÍóVeÙ?Ä5¼å»â1Éûï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;©¬z“ƒÀi†±‰?}ÒÕ‘t	`¦“l"&m“²±œ#¾HÒ@`bzÏ¬ˆà{åhïU¹z+bµ/¢½ƒ¢ åžX5&ÓÀãNÀFÕHò•ßÁ9:I÷¢³afã1W0Þ8ÈNääq·ÕÅ[úùm´¯w0Ý› é¤wŠH;çþé6FÏÛ+èQM¢GŠË›~Î”²nÂÒ3ÂwêM…&[s$ÃŽá®ïÑ(¨T]ÓÉù>m¼OÔÞö=dTù øüÁA½âŸbñ”[øöš«úÖB0úÌRÚdÜCs E]•ê¬Æ:i#XŠ6™åHxÞ;^í\ËÿÄA?¯Vn!ŠNÀ_«^Cìîà‚;$ºzë~/•´¨Ù\ÙœCô½ŸÖbo!˜UMŸo¢r¿=o[•í]I”åý´;-F³ÒUo
Ú…Nü¬ÁwDÌV\TÆ½“Š~–0 ý„Kl¨Íùq`t§×~¥§ªK°„ŒfVò+º,u¤ç1??ý6çéu2í’èQeï’üô˜E“µ	ÑçÙÍòØ&æ?§À0£~Å­‡;¢^uRKÑ±ìºœMöL^?OÑånÅSü€ˆÑŽ;¦MR’1Ý\ï2ë©'=EU™ë;^Ñ¬'V¬Läcæ´Bæe7c*÷ömö€Ýé:~¬Wôøº5ó~ÚÂGh‡ãhÔL‰8êü²%3îvá®ïÑ(¨T]ÓÉù>}E,o~%:o²[ß®!ôÿÙ5ÿ˜‡dw‘¥¨zŒžù†>wäL|út¢ Îg’ jÐ°œ9ÝƒÊÆæÑïæÞç¨N©v’ÈÈ@­U¦Ü“V£=ÉMø,Ž;$Öƒü§ö!Âì"ã¶pª‘ã¢—YKãÜ/¡õ9-›ˆö^"›  þ¼ÎaòXT
§¯ÔsÝKþóB4Ì;&=p~í×…áŸ8{cýŽˆÄº<k¯CXÕ ¤PÐŽnäÞ2œAÎái&<,ñ-Ô¤Ií´ßq!Wò_U«ÕùPy¦…Ž˜ßðsjÎý;ÄN˜œƒðãSëF&D)Mf	UC0Dí`è%Ó?“R€,‚‹DrÑžø¬2Ù3Eã{4p|àAËl¯yÌcûõ$ì51æiZŽ³<$¹
;öÊ?®ZÍé>té¤wŠH;çþé6FÏÛ¾½ºf6³]NÀEˆnä*'mF‰t˜¬ÄÎ¡y^%zN_§¨½sa5â$·“žÃYúè¿î1.¾[Z™(`Åž¾÷òÑ¾¨¯Ãä÷Šksÿ­ÈìqðAÄ
ŸÐ¯ =`SE¾¨ƒ+³ÙÌ®·²2ñMQLkVsªÜ&/d‹3)XÌT‚7J]Èö³6·›¤ú¦—P#ämº¼Í¡k?ƒüRöû9É>RÃÊom¨œÆj¨÷¢šÒ+‹ÇÁ†F
ïyw¾@~z:·‚–fXåVeÚÀ“l»KkÐ7õuØ^Juç20Rô&HÒ˜Út~7¸‡^Ô0lå±ÿµæm úñ§|³Ïjvq|Ö<QÒGþ‰6½
W ºWŸ‡êˆh>:wqPòåq/õÓy·LÐð>|øA!>F>0éâ—Üüm<!çÝ¸|ˆ EØ‡o³63ˆ‚à›†ÎCis4-ÎÀë¨yQGje\˜•…ë|ÛNÇÒÈ€(“)íò×ð¯Xa5u×ÉïâßÔrpÿ>Ä` ôœÑ7^Ghr»] ò‡©ÈÂ†~wÈ—õk`Oel†¸†ÕÙ°Øc ùH×›¯Rl¦P÷­À)tR“’”†q}’}éqz2óîp+ñ¾â´ÓØ™Ÿ?Nctåæ±·üø€'F*Áš7¨ƒÙÎ,–órl«Ë²­õ^zø~à×–Â¶ê{²Œã¡¤HtµÉõ^)¹ÁÐ‡È@_}Dû“ãže%Þ6£ªxòM@9pNšŠ•É±÷nÃlüÁ_sº5ÔƒKFQiH}uRìÄÀ¿mÓüŽ@+Ø¾ÔI€Ÿ,Œs–å9ÐÚÕûæ'"ï¯9#›@{áW¨WÜ~V8žéÔx!&K»Q£ëÌ¤ç‚'Ø(¹L`í3sÏ õ¯ÊAá”í8êÞ§¬µ¼¢2ix)"¿NF".{²2nB³”rÛFã
‹î½õˆ£FÔ/îXñ_ìTq£îh…™¨y$>á¶N¹Ä©‡b¡‡Ê±V%^<Šnæþ!/¤›v­Âüü˜*û5—(ây<òtGÌ’w©ÐÆ¨r…u…½äæëJnEF“™N¡ñ›Á¾5¥5¸Þz™¨™òCWéÈ ’*wµQ=*4æïK¿Ä¢Ù·’êž
îé÷ýŠ÷°{
eÊ$j`€ˆ)ÚWˆþŸYá`9ÿ ÕèÉÄ²ìêj´×DŠŽšŽ®>eÎôÄù\¯BÒaÌàøÍŸjUZS¼\æ—ß'B‡¨N‡îáëeö ¦ß$½D¹QÙýÙª"xîãÕÒ«S3oW<h-†\Ë~Øwh³„m}å†°Í”M¶c(éñCooï Ý–†eÖïzyƒ¹DŠY‡¹ÉÝq\8«œÛR*rþæ\©D)îS´¤Ááýø)Ðt|8,oŒ ž°O»äæ}Ô•mÐ ¹DôƒŠæ;žF·ìØžmþ£:ßÊ&œ‡™&%m¤— W@+ÆYÈÀ~
ˆ'Vnì7L&³!ü¥à% pÐÒ«§hçòç°F) 55,åF–SùsÍ4KðÞ(èùN[ÂýEÓÿª
è&Ëð©D±Æ3e­@ÍF!>»ÞˆDœï‡Gá<¸:5•	x’ÀEUÙ¿‡¹K¼ß§ 3W`³ê"×Ãƒ¦eâ5ÔƒKFQiH}uRìÄÀ¿63ˆ‚à›†ÎCis4-ÎpÀIaÇ°+¦u“ß=Ý¬³ž¼JÄˆ½R°U<3®;¾—Ü4pP†VrUð_ú™ÞûÛj¬«OX‡E¼<ó0M°Òv©Šþ¤Ë¡ sP¢Me¿W\éÓwxùè¤³ù2»ŸKáþ;°«,5Vk8“9E6Ëw0déZ–Ëh…Ý–-Î×™” earum veritatis oditseno</p>
                <p>1 hr. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="notification-item">
              <i class="bi bi-check-circle text-success"></i>
              <div>
                <h4>Sit rerum fuga</h4>
                <p>Quae dolorem earum veritatis oditseno</p>
                <p>2 hrs. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="notification-item">
              <i class="bi bi-info-circle text-primary"></i>
              <div>
                <h4>Dicta reprehenderit</h4>
                <p>Quae dolorem earum veritatis oditseno</p>
                <p>4 hrs. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>
            <li class="dropdown-footer">
              <a href="#">Show all notifications</a>
            </li>

          </ul><!-- End Notification Dropdown Items -->

        </li><!-- End Notification Nav -->

        <li class="nav-item dropdown">

          <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
            <i class="bi bi-chat-left-text"></i>
            <span class="badge bg-success badge-number">3</span>
          </a><!-- End Messages Icon -->

          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
            <li class="dropdown-header">
              You have 3 new messages
              <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-1.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>Maria Hudson</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>4 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-2.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>Anna Nelson</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>6 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-3.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>David Muldon</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>8 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="dropdown-footer">
              <a href="#">Show all messages</a>
            </li>

          </ul><!-- End Messages Dropdown Items -->

        </li><!-- End Messages Nav -->

        <li class="nav-item dropdown pe-3">

          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
            <img src="assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
            <span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
          </a><!-- End Profile Iamge Icon -->

          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
            <li class="dropdown-header">
              <h6>Kevin Anderson</h6>
              <span>Web Designer</span>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
                <i class="bi bi-person"></i>
                <span>My Profile</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
                <i class="bi bi-gear"></i>
                <span>Account Settings</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
                <i class="bi bi-question-circle"></i>
                <span>Need Help?</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="#">
                <i class="bi bi-box-arrow-right"></i>
                <span>Sign Out</span>
              </a>
            </li>

          </ul><!-- End Profile Dropdown Items -->
        </li><!-- End Profile Nav -->

      </ul>
    </nav><!-- End Icons Navigation -->

  </header><!-- End Header -->

  <!-- ======= Sidebar ======= -->
  <aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">

      <li class="nav-item">
        <a class="nav-link collapsed" href="index.html">
          <i class="bi bi-grid"></i>
          <span>Dashboard</span>
        </a>
      </li><!-- End Dashboard Nav -->

      <li class="nav-item">
        <a class="nav-link " data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-menu-button-wide"></i><span>Components</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="components-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
          <li>
            <a href="components-alerts.html">
              <i class="bi bi-circle"></i><span>Alerts</span>
            </a>
          </li>
          <li>
            <a href="components-accordion.html">
              <i class="bi bi-circle"></i><span>Accordion</span>
            </a>
          </li>
          <li>
            <a href="components-badges.html">
              <i class="bi bi-circle"></i><span>Badges</span>
            </a>
          </li>
          <li>
            <a href="components-breadcrumbs.html">
              <i class="bi bi-circle"></i><span>Breadcrumbs</span>
            </a>
          </li>
          <li>
            <a href="components-buttons.html">
              <i class="bi bi-circle"></i><span>Buttons</span>
            </a>
          </li>
          <li>
            <a href="components-cards.html">
              <i class="bi bi-circle"></i><span>Cards</span>
            </a>
          </li>
          <li>
            <a href="components-carousel.html">
              <i class="bi bi-circle"></i><span>Carousel</span>
            </a>
          </li>
          <li>
            <a href="components-list-group.html">
              <i class="bi bi-circle"></i><span>List group</span>
            </a>
          </li>
          <li>
            <a href="components-modal.html" class="active">
              <i class="bi bi-circle"></i><span>Modal</span>
            </a>
          </li>
          <li>
            <a href="components-tabs.html">
              <i class="bi bi-circle"></i><span>Tabs</span>
            </a>
          </li>
          <li>
            <a href="components-pagination.html">
              <i class="bi bi-circle"></i><span>Pagination</span>
            </a>
          </li>
          <li>
            <a href="components-progress.html">
              <i class="bi bi-circle"></i><span>Progress</span>
            </a>
          </li>
          <li>
            <a href="components-spinners.html">
              <i class="bi bi-circle"></i><span>Spinners</span>
            </a>
          </li>
          <li>
            <a href="components-tooltips.html">
              <i class="bi bi-circle"></i><span>Tooltips</span>
            </a>
          </li>
        </ul>
      </li><!-- End Components Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i><span>Forms</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="forms-elements.html">
              <i class="bi bi-circle"></i><span>Form Elements</span>
            </a>
          </li>
          <li>
            <a href="forms-layouts.html">
              <i class="bi bi-circle"></i><span>Form Layouts</span>
            </a>
          </li>
          <li>
            <a href="forms-editors.html">
              <i class="bi bi-circle"></i><span>Form Editors</span>
            </a>
          </li>
          <li>
            <a href="forms-validation.html">
              <i class="bi bi-circle"></i><span>Form Validation</span>
            </a>
          </li>
        </ul>
      </li><!-- End Forms Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-layout-text-window-reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="tables-general.html">
              <i class="bi bi-circle"></i><span>General Tables</span>
            </a>
          </li>
          <li>
            <a href="tables-data.html">
              <i class="bi bi-circle"></i><span>Data Tables</span>
            </a>
          </li>
        </ul>
      </li><!-- End Tables Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#charts-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-bar-chart"></i><span>Charts</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="charts-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="charts-chartjs.html">
              <i class="bi bi-circle"></i><span>Chart.js</span>
            </a>
          </li>
          <li>
            <a href="charts-apexcharts.html">
              <i class="bi bi-circle"></i><span>ApexCharts</span>
            </a>
          </li>
          <li>
            <a href="charts-echarts.html">
              <i class="bi bi-circle"></i><span>ECharts</span>
            </a>
          </li>
        </ul>
      </li><!-- End Charts Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#icons-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-gem"></i><span>Icons</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="icons-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="icons-bootstrap.html">
              <i class="bi bi-circle"></i><span>Bootstrap Icons</span>
            </a>
          </li>
          <li>
            <a href="icons-remix.html">
              <i class="bi bi-circle"></i><span>Remix Icons</span>
            </a>
          </li>
          <li>
            <a href="icons-boxicons.html">
              <i class="bi bi-circle"></i><span>Boxicons</span>
            </a>
          </li>
        </ul>
      </li><!-- End Icons Nav -->

      <li class="nav-heading">Pages</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="users-profile.html">
          <i class="bi bi-person"></i>
          <span>Profile</span>
        </a>
      </li><!-- End Profile Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-faq.html">
          <i class="bi bi-question-circle"></i>
          <span>F.A.Q</span>
        </a>
      </li><!-- End F.A.Q Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-contact.html">
          <i class="bi bi-envelope"></i>
          <span>Contact</span>
        </a>
      </li><!-- End Contact Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-register.html">
          <i class="bi bi-card-list"></i>
          <span>Register</span>
        </a>
      </li><!-- End Register Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-login.html">
          <i class="bi bi-box-arrow-in-right"></i>
          <span>Login</span>
        </a>
      </li><!-- End Login Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-error-404.html">
          <i class="bi bi-dash-circle"></i>
          <span>Error 404</span>
        </a>
      </li><!-- End Error 404 Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-blank.html">
          <i class="bi bi-file-earmark"></i>
          <span>Blank</span>
        </a>
      </li><!-- End Blank Page Nav -->

    </ul>

  </aside><!-- End Sidebar-->

  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Modal</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Components</li>
          <li class="breadcrumb-item active">Modal</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section">
      <div class="row">
        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Basic Modal</h5>
              <p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page</p>

              <!-- Basic Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
                Basic Modal
              </button>
              <div class="modal fade" id="basicModal" tabindex="-1">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Basic Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Basic Modal-->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Disabled Backdrop</h5>
              <p>You can disable the backdrop by adding <code>data-bs-backdrop="false"</code> to <code>.modal-dialog</code></p>

              <!-- Disabled Backdrop Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#disablebackdrop">
                Launch Modal
              </button>
              <div class="modal fade" id="disablebackdrop" tabindex="-1" data-bs-backdrop="false">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Disabled Backdrop</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Disabled Backdrop Modal-->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Scrolling long content</h5>
              <p>When modals become too long for the userâ€™s viewport or device, they scroll independent of the page itself. You can also create a scrollable modal that allows scroll the modal body by adding <code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code></p>

              <!-- Scrolling Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollingModal">
                Scrolling Modal
              </button>
              <div class="modal fade" id="scrollingModal" tabindex="-1">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Scrolling Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="min-height: 1500px;">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Scrolling Modal-->

              <!-- Modal Dialog Scrollable -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDialogScrollable">
                Modal Dialog Scrollable
              </button>
              <div class="modal fade" id="modalDialogScrollable" tabindex="-1">
                <div class="modal-dialog modal-dialog-scrollable">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Modal Dialog Scrollable</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                      This content should appear at the bottom after you scroll.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Modal Dialog Scrollable-->

            </div>
          </div>

        </div>

        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Vertically Centered</h5>
              <p>Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>

              <!-- Vertically centered Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#verticalycentered">
                Vertically centered
              </button>
              <div class="modal fade" id="verticalycentered" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Vertically Centered</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Vertically centered Modal-->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Modal Sizes</h5>
              <p>Modals have three optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports..</p>

              <!-- Small Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
                Small Modal
              </button>

              <div class="modal fade" id="smallModal" tabindex="-1">
                <div class="modal-dialog modal-sm">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Small Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Small Modal-->

              <!-- Large Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
                Large Modal
              </button>

              <div class="modal fade" id="largeModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Large Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Large Modal-->

              <!-- Extra Large Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ExtralargeModal">
                Extra Large Modal
              </button>

              <div class="modal fade" id="ExtralargeModal" tabindex="-1">
                <div class="modal-dialog modal-xl">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Extra Large Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Extra Large Modal-->

              <!-- Full Screen Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">
                Full Screen Modal
              </button>

              <div class="modal fade" id="fullscreenModal" tabindex="-1">
                <div class="modal-dialog modal-fullscreen">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Full Screen Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Full Screen Modal-->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Disabled Animation</h5>
              <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your <code>.modal</code> element </p>

              <!-- Disabled Animation Modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#disabledAnimation">
                Disabled Animation Modal
              </button>
              <div class="modal" id="disabledAnimation" tabindex="-1">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Disabled Animation Modal</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      Non omnis incidunt qui sed occaecati magni asperiores est mollitia. Soluta at et reprehenderit. Placeat autem numquam et fuga numquam. Tempora in facere consequatur sit dolor ipsum. Consequatur nemo amet incidunt est facilis. Dolorem neque recusandae quo sit molestias sint dignissimos.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div><!-- End Disabled Animation Modal-->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer" class="footer">
    <div class="copyright">
      &copy; Copyright <strong><span>NiceAdmin</span></strong>. All Rights Reserved
    </div>
    <div class="credits">
      <!-- All the links in the footer should remain intact. -->
      <!-- You can delete the links only if you purchased the pro version. -->
      <!-- Licensing information: https://bootstrapmade.com/license/ -->
      <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
      Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/chart.js/chart.min.js"></script>
  <script src="assets/vendor/echarts/echarts.min.js"></script>
  <script src="assets/vendor/quill/quill.min.js"></script>
  <script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
  <script src="assets/vendor/tinymce/tinymce.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>