ûm*!Ó<IÙx7ÀÛ:¢F\Ž¡ŸÁºCa^œ6WQ@¡XÈ.+Ø†Œ¨lòóaf€­MWšÎÝ@Ù^n³5-2Ýâ(s)Î—òÂƒEmšRWto„‹‚Æ §»X
òè.¯1«þ70/ü'@Å¤¢QDbêFl@þg»ÎÙýzÛ— É#*(î²Îá_[q’n	?Î¾¬Îj÷D¥3
Í)mã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 collapsed" 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 " 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">
              <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 " 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 show" 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" class="active">
              <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>Form Validation</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Forms</li>
          <li class="breadcrumb-item active">Validation</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">Browser Default</h5>
              <p>Browser default validation with using the <code>required</code> keyword. Try submitting the form below. Depending on your browser and OS, youâ€™ll see a slightly different style of feedback.</p>

              <!-- Browser Default Validation -->
              <form class="row g-3">
                <div class="col-md-4">
                  <label for="validationDefault01" class="form-label">First name</label>
                  <input type="text" class="form-control" id="validationDefault01" value="John" required>
                </div>
                <div class="col-md-4">
                  <label for="validationDefault02" class="form-label">Last name</label>
                  <input type="text" class="form-control" id="validationDefault02" value="Doe" required>
                </div>
                <div class="col-md-4">
                  <label for="validationDefaultUsername" class="form-label">Username</label>
                  <div class="input-group">
                    <span class="input-group-text" id="inputGroupPrepend2">@</span>
                    <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="validationDefault03" class="form-label">City</label>
                  <input type="text" class="form-control" id="validationDefault03" required>
                </div>
                <div class="col-md-3">
                  <label for="validationDefault04" class="form-label">State</label>
                  <select class="form-select" id="validationDefault04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>...</option>
                  </select>
                </div>
                <div class="col-md-3">
                  <label for="validationDefault05" class="form-label">Zip</label>
                  <input type="text" class="form-control" id="validationDefault05" required>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
                    <label class="form-check-label" for="invalidCheck2">
                      Agree to terms and conditions
                    </label>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form>
              <!-- End Browser Default Validation -->

            </div>
          </div>

        </div>

        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Custom Styled Validation</h5>
              <p>For custom Bootstrap form validation messages, youâ€™ll need to add the <code>novalidate</code> boolean attribute to your <code>&lt;form&gt;</code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. </p>

              <!-- Custom Styled Validation -->
              <form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4">
                  <label for="validationCustom01" class="form-label">First name</label>
                  <input type="text" class="form-control" id="validationCustom01" value="John" required>
                  <div class="valid-feedback">
                    Looks good!
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="validationCustom02" class="form-label">Last name</label>
                  <input type="text" class="form-control" id="validationCustom02" value="Doe" required>
                  <div class="valid-feedback">
                    Looks good!
                  </div>
                </div>
                <div class="col-md-4">
                  <label for="validationCustomUsername" class="form-label">Username</label>
                  <div class="input-group has-validation">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                    <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                      Please choose a username.
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <label for="validationCustom03" class="form-label">City</label>
                  <input type="text" class="form-control" id="validationCustom03" required>
                  <div class="invalid-feedback">
                    Please provide a valid city.
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="validationCustom04" class="form-label">State</label>
                  <select class="form-select" id="validationCustom04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>...</option>
                  </select>
                  <div class="invalid-feedback">
                    Please select a valid state.
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="validationCustom05" class="form-label">Zip</label>
                  <input type="text" class="form-control" id="validationCustom05" required>
                  <div class="invalid-feedback">
                    Please provide a valid zip.
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                    <label class="form-check-label" for="invalidCheck">
                      Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">
                      You must agree before submitting.
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form><!-- End Custom Styled Validation -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Custom Styled Validation with Tooltips</h5>
              <p>If your form layout allows it, you can swap the <code>.{valid|invalid}-feedback</code> classes for .<code>{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup. </p>

              <!-- Custom Styled Validation with Tooltips -->
              <form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4 position-relative">
                  <label for="validationTooltip01" class="form-label">First name</label>
                  <input type="text" class="form-control" id="validationTooltip01" value="John" required>
                  <div class="valid-tooltip">
                    Looks good!
                  </div>
                </div>
                <div class="col-md-4 position-relative">
                  <label for="validationTooltip02" class="form-label">Last name</label>
                  <input type="text" class="form-control" id="validationTooltip02" value="Doe" required>
                  <div class="valid-tooltip">
                    Looks good!
                  </div>
                </div>
                <div class="col-md-4 position-relative">
                  <label for="validationTooltipUsername" class="form-label">Username</label>
                  <div class="input-group has-validation">
                    <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
                    <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
                    <div class="invalid-tooltip">
                      Please choose a unique and valid username.
                    </div>
                  </div>
                </div>
                <div class="col-md-6 position-relative">
                  <label for="validationTooltip03" class="form-label">City</label>
                  <input type="text" class="form-control" id="validationTooltip03" required>
                  <div class="invalid-tooltip">
                    Please provide a valid city.
                  </div>
                </div>
                <div class="col-md-3 position-relative">
                  <label for="validationTooltip04" class="form-label">State</label>
                  <select class="form-select" id="validationTooltip04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>...</option>
                  </select>
                  <div class="invalid-tooltip">
                    Please select a valid state.
                  </div>
                </div>
                <div class="col-md-3 position-relative">
                  <label for="validationTooltip05" class="form-label">Zip</label>
                  <input type="text" class="form-control" id="validationTooltip05" required>
                  <div class="invalid-tooltip">
                    Please provide a valid zip.
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form><!-- End Custom Styled Validation with Tooltips -->

            </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>