<!DOCTYPE html>
<html lang="en" dir="ltr" data-startbar="dark" data-bs-theme="light">
<head>
<meta charset="utf-8" />
<title>Forexo | Forexo - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
</head>
<!-- Top Bar Start -->
<body>
<!-- Top Bar Start -->
<div class="topbar d-print-none">
<div class="container-fluid">
<nav class="topbar-custom d-flex justify-content-between" id="topbar-custom">
<ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">
<li>
<button class="nav-link mobile-menu-btn nav-icon" id="togglemenu">
<i class="iconoir-menu-scale"></i>
</button>
</li>
<li class="hide-phone app-search">
<form role="search" action="#" method="get">
<input type="search" name="search" class="form-control top-search mb-0" placeholder="Search here...">
<button type="submit"><i class="iconoir-search"></i></button>
</form>
</li>
</ul>
<ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">
<li class="topbar-item">
<a class="btn btn-soft-primary" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#watchlist" aria-controls="watchlist">
Watchlist
</a>
</li>
<!-- <li class="topbar-item">
<a class=" btn btn-primary" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#watchlist" aria-controls="watchlist">
Watchlist
</a>
</li> -->
<li class="dropdown">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us_flag.jpg" alt="" class="thumb-sm rounded-circle">
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><img src="assets/images/flags/us_flag.jpg" alt="" height="15" class="me-2">English</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="15" class="me-2">Spanish</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/germany_flag.jpg" alt="" height="15" class="me-2">German</a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="15" class="me-2">French</a>
</div>
</li><!--end topbar-language-->
<li class="topbar-item">
<a class="nav-link nav-icon" href="javascript:void(0);" id="light-dark-mode">
<i class="icofont-moon dark-mode"></i>
<i class="icofont-sun light-mode"></i>
</a>
</li>
<li class="dropdown topbar-item">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="icofont-bell-alt"></i>
<span class="alert-badge"></span>
</a>
<div class="dropdown-menu stop dropdown-menu-end dropdown-lg py-0">
<h5 class="dropdown-item-text m-0 py-3 d-flex justify-content-between align-items-center">
Notifications <a href="#" class="badge text-body-tertiary badge-pill">
<i class="iconoir-plus-circle fs-4"></i>
</a>
</h5>
<ul class="nav nav-tabs nav-tabs-custom nav-success nav-justified mb-1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link mx-0 active" data-bs-toggle="tab" href="#All" role="tab" aria-selected="true">
All <span class="badge bg-primary-subtle text-primary badge-pill ms-1">24</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link mx-0" data-bs-toggle="tab" href="#Projects" role="tab" aria-selected="false" tabindex="-1">
Projects
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link mx-0" data-bs-toggle="tab" href="#Teams" role="tab" aria-selected="false" tabindex="-1">
Team
</a>
</li>
</ul>
<div class="ms-0" style="max-height:230px;" data-simplebar>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="All" role="tabpanel" aria-labelledby="all-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-wolf fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">Dummy text of the printing and industry.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">10 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-apple-swift fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Meeting with designers</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">40 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-birthday-cake fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">UX 3 Task complete.</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
<div class="tab-pane fade" id="Projects" role="tabpanel" aria-labelledby="projects-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">40 min ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-birthday-cake fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">UX 3 Task complete.</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
<div class="tab-pane fade" id="Teams" role="tabpanel" aria-labelledby="teams-tab" tabindex="0">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">1 hr ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-drone fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-end text-muted ps-2">2 hrs ago</small>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 bg-primary-subtle text-primary thumb-md rounded-circle">
<i class="iconoir-user fs-4"></i>
</div>
<div class="flex-grow-1 ms-2 text-truncate">
<h6 class="my-0 fw-normal text-dark fs-13">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
</div>
</div>
<!-- All-->
<a href="pages-notifications.html" class="dropdown-item text-center text-dark fs-13 py-2">
View All <i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown topbar-item">
<a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-lg rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end py-0">
<div class="d-flex align-items-center dropdown-item py-2 bg-secondary-subtle">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-md rounded-circle">
</div>
<div class="flex-grow-1 ms-2 text-truncate align-self-center">
<h6 class="my-0 fw-medium text-dark fs-13">William Martin</h6>
<small class="text-muted mb-0">Front End Developer</small>
</div><!--end media-body-->
</div>
<div class="dropdown-divider mt-0"></div>
<small class="text-muted px-2 pb-1 d-block">Account</small>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-user fs-18 me-1 align-text-bottom"></i> Profile</a>
<a class="dropdown-item" href="pages-faq.html"><i class="las la-wallet fs-18 me-1 align-text-bottom"></i> Earning</a>
<small class="text-muted px-2 py-1 d-block">Settings</small>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-cog fs-18 me-1 align-text-bottom"></i>Account Settings</a>
<a class="dropdown-item" href="pages-profile.html"><i class="las la-lock fs-18 me-1 align-text-bottom"></i> Security</a>
<a class="dropdown-item" href="pages-faq.html"><i class="las la-question-circle fs-18 me-1 align-text-bottom"></i> Help Center</a>
<div class="dropdown-divider mb-0"></div>
<a class="dropdown-item text-danger" href="auth-login.html"><i class="las la-power-off fs-18 me-1 align-text-bottom"></i> Logout</a>
</div>
</li>
</ul><!--end topbar-nav-->
</nav>
<!-- end navbar-->
</div>
</div>
<!-- Top Bar End -->
<!-- leftbar-tab-menu -->
<div class="startbar d-print-none">
<!--start brand-->
<div class="brand">
<a href="index.html" class="logo">
<span>
<img src="assets/images/logo-sm.png" alt="logo-small" class="logo-sm">
</span>
<span class="">
<img src="assets/images/logo-light.png" alt="logo-large" class="logo-lg logo-light">
<img src="assets/images/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">
</span>
</a>
</div>
<!--end brand-->
<!--start startbar-menu-->
<div class="startbar-menu" >
<div class="startbar-collapse" id="startbarCollapse" data-simplebar>
<div class="d-flex align-items-start flex-column w-100">
<!-- Navigation -->
<ul class="navbar-nav mb-auto w-100">
<li class="menu-label pt-0 mt-0">
<span>Main Menu</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarForex" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarForex">
<i class="iconoir-dollar-circle menu-icon"></i>
<span>Forex</span>
</a>
<div class="collapse " id="sidebarForex">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Dashboard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-accounts.html">My Accounts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-copy-accounts.html">Copy Accounts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-withdrawal.html">Withdrawal Request</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forex-transactions.html">Transactions</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarForex-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarCrypto" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarCrypto">
<i class="iconoir-bitcoin-circle menu-icon"></i>
<span>Crypto</span>
</a>
<div class="collapse " id="sidebarCrypto">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="crypto-index.html">Dashboard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-exchange.html">Exchange</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-portfolio.html">Portfolio</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-wallet.html">Wallet</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="crypto-news.html">Crypto News</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarCrypto-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-chat.html">
<i class="iconoir-chat-lines menu-icon"></i>
<span>Chat</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-contact-list.html">
<i class="iconoir-list menu-icon"></i>
<span>Contact List</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-calendar.html">
<i class="iconoir-calendar menu-icon"></i>
<span>Calendar</span>
</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="apps-invoice.html">
<i class="iconoir-page menu-icon"></i>
<span>Ivoice</span>
</a>
</li><!--end nav-item-->
<li class="menu-label mt-2">
<small class="label-border">
<div class="border_left hidden-xs"></div>
<div class="border_right"></div>
</small>
<span>Components</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarElements" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarElements">
<i class="iconoir-compact-disc menu-icon"></i>
<span>UI Elements</span>
</a>
<div class="collapse " id="sidebarElements">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="ui-alerts.html">Alerts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-avatar.html">Avatar</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-buttons.html">Buttons</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-badges.html">Badges</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-cards.html">Cards</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-carousels.html">Carousels</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-dropdowns.html">Dropdowns</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-grids.html">Grids</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-images.html">Images</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-list.html">List</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-modals.html">Modals</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-navs.html">Navs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-navbar.html">Navbar</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-paginations.html">Paginations</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-popover-tooltips.html">Popover & Tooltips</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-progress.html">Progress</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-spinners.html">Spinners</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-tabs-accordions.html">Tabs & Accordions</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-typography.html">Typography</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="ui-videos.html">Videos</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarElements-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarAdvancedUI" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarAdvancedUI">
<i class="iconoir-peace-hand menu-icon"></i>
<span>Advanced UI</span><span class="badge rounded text-success bg-success-subtle ms-1">New</span>
</a>
<div class="collapse " id="sidebarAdvancedUI">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="advanced-animation.html">Animation</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-clipboard.html">Clip Board</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-dragula.html">Dragula</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-files.html">File Manager</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-highlight.html">Highlight</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-rangeslider.html">Range Slider</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-ratings.html">Ratings</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-ribbons.html">Ribbons</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-sweetalerts.html">Sweet Alerts</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="advanced-toasts.html">Toasts</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarAdvancedUI-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarForms" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarForms">
<i class="iconoir-journal-page menu-icon"></i>
<span>Forms</span>
</a>
<div class="collapse " id="sidebarForms">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="forms-elements.html">Basic Elements</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-advanced.html">Advance Elements</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-validation.html">Validation</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-wizard.html">Wizard</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-editors.html">Editors</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-uploads.html">File Upload</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="forms-img-crop.html">Image Crop</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarForms-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarCharts" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarCharts">
<i class="iconoir-candlestick-chart menu-icon"></i>
<span>Charts</span>
</a>
<div class="collapse " id="sidebarCharts">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="charts-apex.html">Apex</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-justgage.html">JustGage</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-chartjs.html">Chartjs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="charts-toast-ui.html">Toast</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarCharts-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarTables" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarTables">
<i class="iconoir-table-rows menu-icon"></i>
<span>Tables</span>
</a>
<div class="collapse " id="sidebarTables">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="tables-basic.html">Basic</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="tables-datatable.html">Datatables</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="tables-editable.html">Editable</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarTables-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarIcons" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarIcons">
<i class="iconoir-trophy menu-icon"></i>
<span>Icons</span>
</a>
<div class="collapse " id="sidebarIcons">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="icons-fontawesome.html">Font Awesome</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-lineawesome.html">Line Awesome</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-icofont.html">Icofont</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="icons-iconoir.html">Iconoir</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarIcons-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarMaps" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarMaps">
<i class="iconoir-navigator-alt menu-icon"></i>
<span>Maps</span>
</a>
<div class="collapse " id="sidebarMaps">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="maps-google.html">Google Maps</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="maps-leaflet.html">Leaflet Maps</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="maps-vector.html">Vector Maps</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarMaps-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarEmailTemplates" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarEmailTemplates">
<i class="iconoir-send-mail menu-icon"></i>
<span>Email Templates</span>
</a>
<div class="collapse " id="sidebarEmailTemplates">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="email-templates-basic.html">Basic Action Email</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="email-templates-alert.html">Alert Email</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="email-templates-billing.html">Billing Email</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarEmailTemplates-->
</li><!--end nav-item-->
<li class="menu-label mt-2">
<small class="label-border">
<div class="border_left hidden-xs"></div>
<div class="border_right"></div>
</small>
<span>Crafted</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#sidebarPages" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarPages">
<i class="iconoir-page-star menu-icon"></i>
<span>Pages</span>
</a>
<div class="collapse " id="sidebarPages">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-profile.html">Profile</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-notifications.html">Notifications</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-timeline.html">Timeline</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-treeview.html">Treeview</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-starter.html">Starter Page</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-pricing.html">Pricing</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-blogs.html">Blogs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-faq.html">FAQs</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="pages-gallery.html">Gallery</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarPages-->
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="#sidebarAuthentication" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="sidebarAuthentication">
<i class="iconoir-fingerprint-lock-circle menu-icon"></i>
<span>Authentication</span>
</a>
<div class="collapse " id="sidebarAuthentication">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="auth-login.html">Log in</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-register.html">Register</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-recover-pw.html">Re-Password</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-lock-screen.html">Lock Screen</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-maintenance.html">Maintenance</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-404.html">Error 404</a>
</li><!--end nav-item-->
<li class="nav-item">
<a class="nav-link" href="auth-500.html">Error 500</a>
</li><!--end nav-item-->
</ul><!--end nav-->
</div><!--end startbarAuthentication-->
</li><!--end nav-item-->
</ul><!--end navbar-nav--->
<div class="update-msg text-center">
<div class="d-flex justify-content-center align-items-center thumb-lg update-icon-box rounded-circle mx-auto">
<i class="iconoir-peace-hand h3 align-self-center mb-0 text-primary"></i>
</div>
<h5 class="mt-3">Mannat Themes</h5>
<p class="mb-3 text-muted">Forexo is a high quality web applications.</p>
<a href="javascript: void(0);" class="btn text-primary shadow-sm rounded-pill">Upgrade your plan</a>
</div>
</div>
</div><!--end startbar-collapse-->
</div><!--end startbar-menu-->
</div><!--end startbar-->
<div class="startbar-overlay d-print-none"></div>
<!-- end leftbar-tab-menu-->
<div class="page-wrapper">
<!-- Page Content-->
<div class="page-content">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Textual Inputs</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="row">
<div class="col-lg-6">
<div class="mb-3 row">
<label for="example-text-input" class="col-sm-2 col-form-label text-end">Text</label>
<div class="col-sm-10">
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-email-input" class="col-sm-2 col-form-label text-end">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-tel-input" class="col-sm-2 col-form-label text-end">Telephone</label>
<div class="col-sm-10">
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-password-input" class="col-sm-2 col-form-label text-end">Password</label>
<div class="col-sm-10">
<input class="form-control" type="password" value="hunter2" id="example-password-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-number-input" class="col-sm-2 col-form-label text-end">Number</label>
<div class="col-sm-10">
<input class="form-control" type="number" value="42" id="example-number-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-datetime-local-input" class="col-sm-2 col-form-label text-end">Date and time</label>
<div class="col-sm-10">
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
</div>
</div>
<div class="mb-3 row">
<label for="exampleColorInput" class="col-sm-2 col-form-label text-end">Color</label>
<div class="col-sm-10">
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#0b51b7" title="Choose your color">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label text-end">Select</label>
<div class="col-sm-10">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label for="example-text-input-lg" class="col-sm-2 col-form-label text-end">Large</label>
<div class="col-sm-10">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" id="example-text-input-lg">
</div>
</div>
<div class="mb-3 row">
<label for="example-text-input-sm" class="col-sm-2 col-form-label text-end">Small</label>
<div class="col-sm-10">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" id="example-text-input-sm">
</div>
</div>
</div><!--end col-->
<div class="col-lg-6">
<div class="mb-3 row">
<label for="example-search-input" class="col-sm-2 col-form-label text-end">Search</label>
<div class="col-sm-10">
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-url-input" class="col-sm-2 col-form-label text-end">URL</label>
<div class="col-sm-10">
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-date-input" class="col-sm-2 col-form-label text-end">Date</label>
<div class="col-sm-10">
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-month-input" class="col-sm-2 col-form-label text-end">Month</label>
<div class="col-sm-10">
<input class="form-control" type="month" value="2011-08" id="example-month-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-week-input" class="col-sm-2 col-form-label text-end">Week</label>
<div class="col-sm-10">
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
</div>
</div>
<div class="mb-3 row">
<label for="example-time-input" class="col-sm-2 col-form-label text-end">Time</label>
<div class="col-sm-10">
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
</div>
</div>
<div class="mb-3 row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label text-end">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="mb-3 row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label text-end">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="name@example.com">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</div>
<div class="mb-3 row has-error">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label text-end">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="name@example.com">
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>
</div>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Basic Form</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultdemo">
<label class="form-check-label" for="flexCheckDefaultdemo">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger">Cancel</button>
</form>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Horizontal Form</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form>
<div class="mb-3 row">
<label for="horizontalInput1" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="horizontalInput1" placeholder="Enter Email">
</div>
</div>
<div class="mb-3 row">
<label for="horizontalInput2" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="horizontalInput2" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-sm-10 ms-auto">
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultdemo2">
<label class="form-check-label" for="flexCheckDefaultdemo2">
Remember me
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 ms-auto">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
</div>
</form>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Custom Styles</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form class="">
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label for="username" class="form-label">Name</label>
<input type="text" class="form-control" id="username" required="">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label" for="useremail">Email address</label>
<input type="email" class="form-control" id="useremail" required="">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label" for="subject">Subject</label>
<input type="text" class="form-control" id="subject" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" rows="5" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-end">
<button type="submit" class="btn btn-primary px-4">Send Message</button>
</div>
</div>
</form>
</div><!--end card-body-->
</div><!--end card-->
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Inline Form</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form class="row align-items-center">
<div class="col-auto">
<label class="form-label visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="form-label visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div><!--end card-body-->
</div><!--end card-->
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Input Size</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form>
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
<input class="form-control form-control-sm " type="text" placeholder=".form-control-sm">
</form>
</div><!--end card-body-->
</div><!--end card-->
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">File Browser</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Upload</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputGroupFile02">
<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>
<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Form Controls</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form>
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="exampleFormControlSelect1">Example select</label>
<select class="form-select" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="exampleFormControlSelect2">Example multiple select</label>
<select multiple="" class="form-select" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="">
<label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
</div><!--end card-body-->
</div><!--end card-->
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Range</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
<label for="customRange2" class="form-label">Min and max</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
<label for="customRange3" class="form-label">Steps</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
</div><!--end card-body-->
</div><!--end card-->
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Switches</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="row">
<div class="col-lg-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch </label>
</div>
</div><!--end col-->
<div class="col-lg-4">
<div class="form-check form-switch form-switch-secondary">
<input class="form-check-input" type="checkbox" id="customSwitchSecondary" checked>
<label class="form-check-label" for="customSwitchSecondary">Secondary</label>
</div>
<div class="form-check form-switch form-switch-success">
<input class="form-check-input" type="checkbox" id="customSwitchSuccess" checked>
<label class="form-check-label" for="customSwitchSuccess">Success</label>
</div>
<div class="form-check form-switch form-switch-warning">
<input class="form-check-input" type="checkbox" id="customSwitchWarning" checked>
<label class="form-check-label" for="customSwitchWarning">Warning</label>
</div>
<div class="form-check form-switch form-switch-info">
<input class="form-check-input" type="checkbox" id="customSwitchInfo" checked>
<label class="form-check-label" for="customSwitchInfo">Info</label>
</div>
</div><!--end col-->
<div class="col-lg-4">
<div class="form-check form-switch form-switch-danger">
<input class="form-check-input" type="checkbox" id="customSwitchDanger" checked>
<label class="form-check-label" for="customSwitchDanger">Danger</label>
</div>
<div class="form-check form-switch form-switch-dark">
<input class="form-check-input" type="checkbox" id="customSwitchDark" checked>
<label class="form-check-label" for="customSwitchDark">Dark</label>
</div>
<div class="form-check form-switch form-switch-purple">
<input class="form-check-input" type="checkbox" id="customSwitchPurple" checked>
<label class="form-check-label" for="customSwitchPurple">Purple</label>
</div>
<div class="form-check form-switch form-switch-pink">
<input class="form-check-input" type="checkbox" id="customSwitchPink" checked>
<label class="form-check-label" for="customSwitchPink">Pink</label>
</div>
</div><!--end col-->
</div><!--end row-->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Checkboxs</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form class="form">
<div class="mb-3 row">
<label class="col-md-3 my-2 control-label">Checkboxes</label>
<div class="col-md-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled">
Disabled checked checkbox
</label>
</div>
</div>
</div> <!--end row-->
<div class="row mb-3">
<label class="col-md-3 my-2 control-label">Inline Checkboxes</label>
<div class="col-md-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">HTML5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Css3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">Javascript</label>
</div>
</div>
</div><!--end row-->
<div class="row">
<label class="col-md-3 my-1 control-label">Button Checkbox</label>
<div class="col-md-9">
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary btn-sm" for="btn-check-outlined">Single toggle</label><br>
</div>
</div> <!--end row-->
</form><!--end form-->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Radios</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form class="form">
<div class="mb-3 row">
<label class="col-md-3 my-2 control-label">Radios</label>
<div class="col-md-9">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
</div> <!-- end row -->
<div class="row mb-3">
<label class="col-md-3 my-1 control-label">Inline Radios</label>
<div class="col-md-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">HTML5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Css</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">Javascript</label>
</div>
</div>
</div> <!--end row-->
<div class="row">
<label class="col-md-3 my-1 control-label">Button Radios</label>
<div class="col-md-9">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success btn-sm" for="success-outlined">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger btn-sm" for="danger-outlined">Danger radio</label>
</div>
</div> <!--end row-->
</form><!--end form-->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Input Groups Static</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@mannatthemes.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://mannatthemes.com</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
<div class="col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Input Groups Buttons</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<form>
<div class="mb-3 row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
</div>
</div>
<div class="input-group mb-3">
<button class="btn btn-secondary" type="button" id="button-addon1"><i class="fas fa-search"></i></button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-secondary" type="button" id="button-addon2">Go!</button>
</div>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="button-addon3">
<button class="btn btn-secondary" type="button" id="button-addon2">Submit</button>
</div>
<div class="input-group">
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-secondary" type="button">Button</button>
</div>
</form>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
</div><!-- container -->
<!--Start Rightbar-->
<!--Start Rightbar/offcanvas-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
<div class="offcanvas-header border-bottom justify-content-between">
<h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
<button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h6>Account Settings</h6>
<div class="p-2 text-start mt-3">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch1">
<label class="form-check-label" for="settings-switch1">Auto updates</label>
</div><!--end form-switch-->
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch2" checked>
<label class="form-check-label" for="settings-switch2">Location Permission</label>
</div><!--end form-switch-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="settings-switch3">
<label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
</div><!--end form-switch-->
</div><!--end /div-->
<h6>General Settings</h6>
<div class="p-2 text-start mt-3">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch4">
<label class="form-check-label" for="settings-switch4">Show me Online</label>
</div><!--end form-switch-->
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="settings-switch5" checked>
<label class="form-check-label" for="settings-switch5">Status visible to all</label>
</div><!--end form-switch-->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="settings-switch6">
<label class="form-check-label" for="settings-switch6">Notifications Popup</label>
</div><!--end form-switch-->
</div><!--end /div-->
</div><!--end offcanvas-body-->
</div>
<!--end Rightbar/offcanvas-->
<!--end Rightbar-->
<!--Start Footer-->
<footer class="footer text-center text-sm-start d-print-none">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card mb-0 rounded-bottom-0">
<div class="card-body">
<p class="text-muted mb-0">
©
<script> document.write(new Date().getFullYear()) </script>
Forexo
<span
class="text-muted d-none d-sm-inline-block float-end">
Crafted with
<i class="iconoir-heart text-danger"></i>
by Mannatthemes</span>
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
</div>
<!-- end page content -->
</div>
<!-- end page-wrapper -->
<!-- Javascript -->
<!-- vendor js -->
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/iconify-icon/iconify-icon.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
<!--end body-->
</html>