<!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-md-12">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Optional Sizes</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="table-responsive">
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Size</th>
<th>Class</th>
<th>Modal max-width</th>
<th>Modal Demo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td><code>.modal-sm</code></td>
<td><code>300px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalSmall">
Launch demo modal
</button>
</td>
</tr>
<tr>
<td>Default</td>
<td class="text-muted">None</td>
<td><code>500px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
Launch demo modal
</button>
</td>
</tr>
<tr>
<td>Large</td>
<td><code>.modal-lg</code></td>
<td><code>800px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalLarge">
Launch demo modal
</button>
</td>
</tr>
<tr>
<td>Extra large</td>
<td><code>.modal-xl</code></td>
<td><code>1140px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#bd-example-modal-xl">
Launch demo modal
</button>
</td>
</tr>
<tr>
<td>Default (Center Modal)</td>
<td class="text-muted"><code>.modal-dialog-centered</code></td>
<td><code>500px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
Launch demo modal
</button>
</td>
</tr>
<tr>
<td>Default (Scroll Modal)</td>
<td class="text-muted"><code>.modal-dialog-scrollable</code></td>
<td><code>500px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
Launch demo modal
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade bd-example-modal-sm" id="exampleModalSmall" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="mySmallModalLabel">Small Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="text-center py-3">
<img src="assets/images/users/avatar-5.jpg" alt="" class="thumb-lg rounded-circle d-block mx-auto mb-1">
<h5 class="mb-1">Good Morning!</h5>
<p class="mb-0 text-muted">Hi, Aaron Gish ! Congratulations.</p>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalDefault" tabindex="-1" role="dialog" aria-labelledby="exampleModalDefaultLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">Default Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade bd-example-modal-lg" id="exampleModalLarge" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="myLargeModalLabel">Large Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-4 text-center">
<img src="assets/images/extra/card/find.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-8 align-self-center">
<div class="error-content text-center">
<h1 class="fw-bold display-5">404!</h1>
<h4 class=" mb-3">Looks like you've got lost...</h4>
<button type="button" class="btn btn-primary">Back to Dashboard</button>
</div>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade bd-example-modal-xl" id="bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="myExtraLargeModalLabel">Extra Large Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<h5 class="mt-0">Overflowing text to show scroll behavior</h5>
<p>Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor
fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor
fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor
fringilla.</p>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="exampleModalCenterTitle">Center Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="exampleModalScrollableTitle">Center Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Fullscreen Modal</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="table-responsive">
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Class</th>
<th>Availability</th>
<th>Modal Demo</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.modal-fullscreen</code></td>
<td>Always</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
</td>
</tr>
<tr>
<td><code>.modal-fullscreen-sm-down</code></td>
<td>Below <code>576px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
</td>
</tr>
<tr>
<td><code>.modal-fullscreen-md-down</code></td>
<td>Below <code>768px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
</td>
</tr>
<tr>
<td><code>.modal-fullscreen-lg-down</code></td>
<td>Below <code>992px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
</td>
</tr>
<tr>
<td><code>.modal-fullscreen-xl-down</code></td>
<td>Below <code>1200px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
</td>
</tr>
<tr>
<td><code>.modal-fullscreen-xxl-down</code></td>
<td>Below <code>1400px</code></td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenLabel">Full screen modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenSmLabel">Full screen below sm</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenMdLabel">Full screen below md</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenLgLabel">Full screen below lg</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenXlLabel">Full screen below xl</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div><!--end card-body-->
</div><!--end card-->
</div> <!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<h4 class="card-title">Theme Color Modal</h4>
</div><!--end col-->
</div> <!--end row-->
</div><!--end card-header-->
<div class="card-body pt-0">
<div class="button-items">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalPrimary">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModalSecondary">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModalSuccess">Success</button>
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModalWarning">Warning</button>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModalInfo">Info</button>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModalDanger">Danger</button>
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModalDark">Dark</button>
</div>
<div class="modal fade" id="exampleModalPrimary" tabindex="-1" role="dialog" aria-labelledby="exampleModalPrimary1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<h6 class="modal-title m-0 text-white" id="exampleModalPrimary1">Primary Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalSecondary" tabindex="-1" role="dialog" aria-labelledby="exampleModalSecondary1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-secondary">
<h6 class="modal-title m-0 text-white" id="exampleModalSecondary1">Secondary Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalSuccess1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h6 class="modal-title m-0 text-white" id="exampleModalSuccess1">Success Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalWarning" tabindex="-1" role="dialog" aria-labelledby="exampleModalWarning1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-warning">
<h6 class="modal-title m-0 text-white" id="exampleModalWarning1">Warning Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalInfo" tabindex="-1" role="dialog" aria-labelledby="exampleModalInfo1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-info">
<h6 class="modal-title m-0 text-white" id="exampleModalInfo1">Info Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalDanger" tabindex="-1" role="dialog" aria-labelledby="exampleModalDanger1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-danger">
<h6 class="modal-title m-0 text-white" id="exampleModalDanger1">Danger Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
<div class="modal fade" id="exampleModalDark" tabindex="-1" role="dialog" aria-labelledby="exampleModalDark1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-dark">
<h6 class="modal-title m-0 text-white" id="exampleModalDark1">Drak Modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<div class="modal-body">
<div class="row">
<div class="col-lg-3 text-center align-self-center">
<img src="assets/images/extra/card/btc.png" alt="" class="img-fluid">
</div><!--end col-->
<div class="col-lg-9">
<h5>Crypto Market Services</h5>
<span class="badge bg-light text-dark">Disable Services</span>
<small class="text-muted ms-2">07 Oct 2024</small>
<ul class="mt-2 mb-0">
<li>Lorem Ipsum is dummy text.</li>
<li>It is a long established reader.</li>
<li>Contrary to popular belief, Lorem simply.</li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-dark btn-sm">Save changes</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
</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>