| Server IP : 92.204.40.98 / Your IP : 216.73.216.201 Web Server : LiteSpeed System : Linux amster.dnsfors.com 4.18.0-553.111.1.el8_10.x86_64 #1 SMP Sun Mar 8 20:06:07 EDT 2026 x86_64 User : tmksyste ( 2190) PHP Version : 8.3.31 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/tmksyste/domains/tmksystems.in/private_html/crmapp/bkp/ |
Upload File : |
<!doctype html>
<html lang="en" data-layout="vertical" data-sidebar="dark" data-sidebar-image="img-1" data-sidebar-size="lg" data-preloader="disable" data-theme="default" data-topbar="light" data-bs-theme="light" data-theme-color="0">
<!-- Mirrored from themesbrand.com/dosix/layouts/ui-modals.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 16 Jul 2024 06:03:03 GMT -->
<head>
<meta charset="utf-8">
<title>Modals | Dosix - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Minimal Admin & Dashboard Template" name="description">
<meta content="Themesbrand" name="author">
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Fonts css load -->
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link id="fontsLink" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Layout config Js -->
<script src="assets/js/layout.js"></script>
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css">
<!-- App Css-->
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css">
<!-- custom Css-->
<link href="assets/css/custom.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Begin page -->
<div id="layout-wrapper">
<!-- ========== App Menu ========== -->
<div class="app-menu navbar-menu">
<!-- LOGO -->
<div class="navbar-brand-box">
<a href="index.html" class="logo logo-dark">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="22">
</span>
</a>
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="22">
</span>
</a>
<button type="button" class="btn btn-sm p-0 fs-3xl header-item float-end btn-vertical-sm-hover" id="vertical-hover">
<i class="ri-record-circle-line"></i>
</button>
<div class="vertical-menu-btn-wrapper header-item vertical-icon">
<button type="button" class="btn btn-sm px-0 fs-xl vertical-menu-btn topnav-hamburger shadow hamburger-icon" id="topnav-hamburger-icon">
<i class='bx bx-chevrons-right'></i>
<i class='bx bx-chevrons-left'></i>
</button>
</div>
</div>
<div id="scrollbar">
<div class="container-fluid">
<div id="two-column-menu">
</div>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a href="#sidebarHospital" class="nav-link menu-link collapsed" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarHospital">
<i class=" bx bx-buildings"></i> <span data-key="t-hospital">Hospital</span>
</a>
<div class="collapse menu-dropdown" id="sidebarHospital">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="index.html" class="nav-link" data-key="t-dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a href="doctor-appointments.html" class="nav-link" data-key="t-appointments">Appointments</a>
</li>
<li class="nav-item">
<a href="doctor-staff-list.html" class="nav-link" data-key="t-staff-list">Staff List</a>
</li>
<li class="nav-item">
<a href="doctor-list.html" class="nav-link" data-key="t-doctors">Doctors</a>
</li>
<li class="nav-item">
<a href="doctor-patients.html" class="nav-link" data-key="t-patients">Patients</a>
</li>
<li class="nav-item">
<a href="doctor-department.html" class="nav-link" data-key="t-department">Department</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarEcommerce" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarEcommerce">
<i class="bx bx-cart-alt"></i> <span data-key="t-ecommerce">Ecommerce</span>
</a>
<div class="collapse menu-dropdown" id="sidebarEcommerce">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="dashboard-ecommerce.html" class="nav-link" data-key="t-dashboard"> Dashboard </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-products.html" class="nav-link" data-key="t-products"> Products </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-product-details.html" class="nav-link" data-key="t-product-overview"> Product Overview </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-add-product.html" class="nav-link" data-key="t-add-product"> Add Product </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-cart.html" class="nav-link" data-key="t-shopping-cart"> Shopping Cart </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-checkout.html" class="nav-link" data-key="t-checkout"> Checkout </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-orders.html" class="nav-link" data-key="t-orders"> Orders </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-customers.html" class="nav-link" data-key="t-customers"> Customers </a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="apps-calendar.html" class="nav-link menu-link"> <i class="bx bx-calendar"></i> <span data-key="t-calendar">Calendar</span> </a>
</li>
<li class="nav-item">
<a href="apps-chat.html" class="nav-link menu-link"> <i class="bx bx-chat"></i> <span data-key="t-chat">Chat</span> </a>
</li>
<li class="nav-item">
<a href="apps-email.html" class="nav-link menu-link"> <i class="bx bx-envelope"></i> <span data-key="t-email">Email</span> </a>
</li>
<li class="nav-item">
<a href="#sidebarInvoices" class="nav-link menu-link collapsed" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarInvoices">
<i class="bx bx-file"></i> <span data-key="t-invoices">Invoices</span>
</a>
<div class="collapse menu-dropdown" id="sidebarInvoices">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="apps-invoices-list.html" class="nav-link" data-key="t-list-view">List View</a>
</li>
<li class="nav-item">
<a href="apps-invoices-overview.html" class="nav-link" data-key="t-overview">Overview</a>
</li>
<li class="nav-item">
<a href="apps-invoices-create.html" class="nav-link" data-key="t-create-invoice">Create Invoice</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarAuth" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAuth">
<i class="bx bx-user-circle"></i> <span data-key="t-authentication">Authentication</span>
</a>
<div class="collapse menu-dropdown" id="sidebarAuth">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="auth-signin.html" class="nav-link" role="button" data-key="t-signin"> Sign In </a>
</li>
<li class="nav-item">
<a href="auth-signup.html" class="nav-link" role="button" data-key="t-signup"> Sign Up </a>
</li>
<li class="nav-item">
<a href="auth-pass-reset.html" class="nav-link" role="button" data-key="t-password-reset">
Password Reset
</a>
</li>
<li class="nav-item">
<a href="auth-pass-change.html" class="nav-link" role="button" data-key="t-password-create">
Password Create
</a>
</li>
<li class="nav-item">
<a href="auth-lockscreen.html" class="nav-link" role="button" data-key="t-lock-screen">
Lock Screen
</a>
</li>
<li class="nav-item">
<a href="auth-logout.html" class="nav-link" role="button" data-key="t-logout"> Logout </a>
</li>
<li class="nav-item">
<a href="auth-success-msg.html" class="nav-link" role="button" data-key="t-success-message"> Success Message </a>
</li>
<li class="nav-item">
<a href="auth-twostep.html" class="nav-link" role="button" data-key="t-two-step-verification"> Two Step Verification </a>
</li>
<li class="nav-item">
<a href="#sidebarErrors" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarErrors" data-key="t-errors"> Errors </a>
<div class="collapse menu-dropdown" id="sidebarErrors">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="auth-404.html" class="nav-link" data-key="t-404-error"> 404 Error </a>
</li>
<li class="nav-item">
<a href="auth-500.html" class="nav-link" data-key="t-500"> 500 </a>
</li>
<li class="nav-item">
<a href="auth-503.html" class="nav-link" data-key="t-503"> 503 </a>
</li>
<li class="nav-item">
<a href="auth-offline.html" class="nav-link" data-key="t-offline-page"> Offline Page </a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarPages" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPages">
<i class="bx bxs-contact"></i> <span data-key="t-pages">Pages</span>
</a>
<div class="collapse menu-dropdown" id="sidebarPages">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="pages-starter.html" class="nav-link" data-key="t-starter"> Starter </a>
</li>
<li class="nav-item">
<a href="pages-profile.html" class="nav-link" data-key="t-profile"> Profile </a>
</li>
<li class="nav-item">
<a href="pages-profile-settings.html" class="nav-link" data-key="t-profile-setting"> Profile Settings </a>
</li>
<li class="nav-item">
<a href="pages-timeline.html" class="nav-link" data-key="t-timeline"> Timeline </a>
</li>
<li class="nav-item">
<a href="pages-faqs.html" class="nav-link" data-key="t-faqs"> FAQs </a>
</li>
<li class="nav-item">
<a href="pages-pricing.html" class="nav-link" data-key="t-pricing"> Pricing </a>
</li>
<li class="nav-item">
<a href="pages-maintenance.html" class="nav-link" data-key="t-maintenance"> Maintenance </a>
</li>
<li class="nav-item">
<a href="pages-coming-soon.html" class="nav-link" data-key="t-coming-soon"> Coming Soon </a>
</li>
<li class="nav-item">
<a href="pages-privacy-policy.html" class="nav-link" data-key="t-privacy-policy"> Privacy Policy </a>
</li>
<li class="nav-item">
<a href="pages-term-conditions.html" class="nav-link" data-key="t-term-conditions"> Term & Conditions </a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarUI" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarUI">
<i class="bx bx-cube"></i> <span data-key="t-bootstrap-ui">Bootstrap UI</span>
</a>
<div class="collapse menu-dropdown mega-dropdown-menu" id="sidebarUI">
<div class="row">
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-alerts.html" class="nav-link" data-key="t-alerts">Alerts</a>
</li>
<li class="nav-item">
<a href="ui-badges.html" class="nav-link" data-key="t-badges">Badges</a>
</li>
<li class="nav-item">
<a href="ui-buttons.html" class="nav-link" data-key="t-buttons">Buttons</a>
</li>
<li class="nav-item">
<a href="ui-colors.html" class="nav-link" data-key="t-colors">Colors</a>
</li>
<li class="nav-item">
<a href="ui-cards.html" class="nav-link" data-key="t-cards">Cards</a>
</li>
<li class="nav-item">
<a href="ui-carousel.html" class="nav-link" data-key="t-carousel">Carousel</a>
</li>
<li class="nav-item">
<a href="ui-dropdowns.html" class="nav-link" data-key="t-dropdowns">Dropdowns</a>
</li>
<li class="nav-item">
<a href="ui-grid.html" class="nav-link" data-key="t-grid">Grid</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-images.html" class="nav-link" data-key="t-images">Images</a>
</li>
<li class="nav-item">
<a href="ui-tabs.html" class="nav-link" data-key="t-tabs">Tabs</a>
</li>
<li class="nav-item">
<a href="ui-accordions.html" class="nav-link" data-key="t-accordion-collapse">Accordion & Collapse</a>
</li>
<li class="nav-item">
<a href="ui-modals.html" class="nav-link" data-key="t-modals">Modals</a>
</li>
<li class="nav-item">
<a href="ui-offcanvas.html" class="nav-link" data-key="t-offcanvas">Offcanvas</a>
</li>
<li class="nav-item">
<a href="ui-placeholders.html" class="nav-link" data-key="t-placeholders">Placeholders</a>
</li>
<li class="nav-item">
<a href="ui-progress.html" class="nav-link" data-key="t-progress">Progress</a>
</li>
<li class="nav-item">
<a href="ui-notifications.html" class="nav-link" data-key="t-notifications">Notifications</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-media.html" class="nav-link" data-key="t-media-object">Media object</a>
</li>
<li class="nav-item">
<a href="ui-embed-video.html" class="nav-link" data-key="t-embed-video">Embed Video</a>
</li>
<li class="nav-item">
<a href="ui-typography.html" class="nav-link" data-key="t-typography">Typography</a>
</li>
<li class="nav-item">
<a href="ui-lists.html" class="nav-link" data-key="t-lists">Lists</a>
</li>
<li class="nav-item">
<a href="ui-links.html" class="nav-link" data-key="t-links">Links</a>
</li>
<li class="nav-item">
<a href="ui-general.html" class="nav-link" data-key="t-general">General</a>
</li>
<li class="nav-item">
<a href="ui-ribbons.html" class="nav-link" data-key="t-ribbons">Ribbons</a>
</li>
<li class="nav-item">
<a href="ui-utilities.html" class="nav-link" data-key="t-utilities">Utilities</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarAdvanceUI" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAdvanceUI">
<i class="bx bx-layer"></i> <span data-key="t-advance-ui">Advance UI</span>
</a>
<div class="collapse menu-dropdown" id="sidebarAdvanceUI">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="advance-ui-sweetalerts.html" class="nav-link" data-key="t-sweet-alerts">Sweet Alerts</a>
</li>
<li class="nav-item">
<a href="advance-ui-nestable.html" class="nav-link" data-key="t-nestable-list">Nestable List</a>
</li>
<li class="nav-item">
<a href="advance-ui-scrollbar.html" class="nav-link" data-key="t-scrollbar">Scrollbar</a>
</li>
<li class="nav-item">
<a href="advance-ui-swiper.html" class="nav-link" data-key="t-swiper-slider">Swiper Slider</a>
</li>
<li class="nav-item">
<a href="advance-ui-ratings.html" class="nav-link" data-key="t-ratings">Ratings</a>
</li>
<li class="nav-item">
<a href="advance-ui-highlight.html" class="nav-link" data-key="t-highlight">Highlight</a>
</li>
<li class="nav-item">
<a href="advance-ui-scrollspy.html" class="nav-link" data-key="t-scrollSpy">ScrollSpy</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="widgets.html">
<i class="bx bx-pen"></i> <span data-key="t-widgets">Widgets</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarForms" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarForms">
<i class="bx bx-copy-alt"></i> <span data-key="t-forms">Forms</span>
</a>
<div class="collapse menu-dropdown" id="sidebarForms">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="forms-elements.html" class="nav-link" data-key="t-basic-elements">Basic Elements</a>
</li>
<li class="nav-item">
<a href="forms-select.html" class="nav-link" data-key="t-form-select">Form Select</a>
</li>
<li class="nav-item">
<a href="forms-checkboxs-radios.html" class="nav-link" data-key="t-checkboxes-radios">Checkboxes & Radios</a>
</li>
<li class="nav-item">
<a href="forms-pickers.html" class="nav-link" data-key="t-pickers">Pickers</a>
</li>
<li class="nav-item">
<a href="forms-masks.html" class="nav-link" data-key="t-input-masks">Input Masks</a>
</li>
<li class="nav-item">
<a href="forms-advanced.html" class="nav-link" data-key="t-advanced">Advanced</a>
</li>
<li class="nav-item">
<a href="forms-range-sliders.html" class="nav-link" data-key="t-range-slider">Range Slider</a>
</li>
<li class="nav-item">
<a href="forms-validation.html" class="nav-link" data-key="t-validation">Validation</a>
</li>
<li class="nav-item">
<a href="forms-wizard.html" class="nav-link" data-key="t-wizard">Wizard</a>
</li>
<li class="nav-item">
<a href="forms-editors.html" class="nav-link" data-key="t-editors">Editors</a>
</li>
<li class="nav-item">
<a href="forms-file-uploads.html" class="nav-link" data-key="t-file-uploads">File Uploads</a>
</li>
<li class="nav-item">
<a href="forms-layouts.html" class="nav-link" data-key="t-form-layouts">Form Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarTables" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarTables">
<i class="bx bx-table"></i> <span data-key="t-tables">Tables</span>
</a>
<div class="collapse menu-dropdown" id="sidebarTables">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="tables-basic.html" class="nav-link" data-key="t-basic-tables">Basic Tables</a>
</li>
<li class="nav-item">
<a href="tables-gridjs.html" class="nav-link" data-key="t-grid-js">Grid Js</a>
</li>
<li class="nav-item">
<a href="tables-listjs.html" class="nav-link" data-key="t-list-js">List Js</a>
</li>
<li class="nav-item">
<a href="tables-datatables.html" class="nav-link" data-key="t-datatables">Datatables</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarCharts" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarCharts">
<i class="bx bx-pie-chart-alt-2"></i> <span data-key="t-apexcharts">Apexcharts</span>
</a>
<div class="collapse menu-dropdown" id="sidebarCharts">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="charts-apex-line.html" class="nav-link" data-key="t-line">Line</a>
</li>
<li class="nav-item">
<a href="charts-apex-area.html" class="nav-link" data-key="t-area">Area</a>
</li>
<li class="nav-item">
<a href="charts-apex-column.html" class="nav-link" data-key="t-column">Column</a>
</li>
<li class="nav-item">
<a href="charts-apex-bar.html" class="nav-link" data-key="t-bar">Bar</a>
</li>
<li class="nav-item">
<a href="charts-apex-mixed.html" class="nav-link" data-key="t-mixed">Mixed</a>
</li>
<li class="nav-item">
<a href="charts-apex-timeline.html" class="nav-link" data-key="t-timeline">Timeline</a>
</li>
<li class="nav-item">
<a href="charts-apex-range-area.html" class="nav-link" data-key="t-range-area">Range Area</a>
</li>
<li class="nav-item">
<a href="charts-apex-funnel.html" class="nav-link" data-key="t-funnel">Funnel</a>
</li>
<li class="nav-item">
<a href="charts-apex-candlestick.html" class="nav-link" data-key="t-candlstick">Candlstick</a>
</li>
<li class="nav-item">
<a href="charts-apex-boxplot.html" class="nav-link" data-key="t-boxplot">Boxplot</a>
</li>
<li class="nav-item">
<a href="charts-apex-bubble.html" class="nav-link" data-key="t-bubble">Bubble</a>
</li>
<li class="nav-item">
<a href="charts-apex-scatter.html" class="nav-link" data-key="t-scatter">Scatter</a>
</li>
<li class="nav-item">
<a href="charts-apex-heatmap.html" class="nav-link" data-key="t-heatmap">Heatmap</a>
</li>
<li class="nav-item">
<a href="charts-apex-treemap.html" class="nav-link" data-key="t-treemap">Treemap</a>
</li>
<li class="nav-item">
<a href="charts-apex-pie.html" class="nav-link" data-key="t-pie">Pie</a>
</li>
<li class="nav-item">
<a href="charts-apex-radialbar.html" class="nav-link" data-key="t-radialbar">Radialbar</a>
</li>
<li class="nav-item">
<a href="charts-apex-radar.html" class="nav-link" data-key="t-radar">Radar</a>
</li>
<li class="nav-item">
<a href="charts-apex-polar.html" class="nav-link" data-key="t-polar-area">Polar Area</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarIcons" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarIcons">
<i class="bx bx-traffic-cone"></i> <span data-key="t-icons">Icons</span>
</a>
<div class="collapse menu-dropdown" id="sidebarIcons">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="icons-remix.html" class="nav-link" data-key="t-remix">Remix</a>
</li>
<li class="nav-item">
<a href="icons-boxicons.html" class="nav-link" data-key="t-boxicons">Boxicons</a>
</li>
<li class="nav-item">
<a href="icons-materialdesign.html" class="nav-link" data-key="t-material-design">Material Design</a>
</li>
<li class="nav-item">
<a href="icons-bootstrap.html" class="nav-link" data-key="t-bootstrap">Bootstrap</a>
</li>
<li class="nav-item">
<a href="icons-phosphor.html" class="nav-link" data-key="t-phosphor">Phosphor</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarMaps" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarMaps">
<i class="bx bx-map-alt"></i> <span data-key="t-maps">Maps</span>
</a>
<div class="collapse menu-dropdown" id="sidebarMaps">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="maps-google.html" class="nav-link" data-key="t-google">Google</a>
</li>
<li class="nav-item">
<a href="maps-vector.html" class="nav-link" data-key="t-vector">Vector</a>
</li>
<li class="nav-item">
<a href="maps-leaflet.html" class="nav-link" data-key="t-leaflet">Leaflet</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="#sidebarMultilevel" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarMultilevel">
<i class="bx bx-share-alt"></i> <span data-key="t-multi-level">Multi Level</span>
</a>
<div class="collapse menu-dropdown" id="sidebarMultilevel">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-1.1"> Level 1.1 </a>
</li>
<li class="nav-item">
<a href="#sidebarAccount" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAccount" data-key="t-level-1.2"> Level
1.2
</a>
<div class="collapse menu-dropdown" id="sidebarAccount">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-2.1"> Level 2.1 </a>
</li>
<li class="nav-item">
<a href="#sidebarCrm" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarCrm" data-key="t-level-2.2"> Level 2.2
</a>
<div class="collapse menu-dropdown" id="sidebarCrm">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-3.1"> Level 3.1
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-3.2"> Level 3.2
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Sidebar -->
</div>
<div class="dropdown sidebar-user mt-4">
<button type="button" class="btn sidebar-user-button shadow-none w-100" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center overflow-hidden">
<img class="rounded-circle header-profile-user" src="assets/images/users/32/avatar-1.jpg" alt="Header Avatar">
<span class="text-start ms-xl-2 overflow-hidden flex-grow-1 sideba-user-content">
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text text-truncate mb-0" data-key="t-dixie-allen">Dixie Allen</span>
<span class="d-none d-xl-block ms-1 fs-sm user-name-sub-text" data-key="t-founder">Founder</span>
</span>
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<h6 class="dropdown-header">Welcome Dixie!</h6>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-account-circle text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Profile</span></a>
<a class="dropdown-item" href="apps-chat.html"><i class="mdi mdi-message-text-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Messages</span></a>
<a class="dropdown-item" href="apps-tickets-overview.html"><i class="mdi mdi-calendar-check-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Taskboard</span></a>
<a class="dropdown-item" href="pages-faqs.html"><i class="mdi mdi-lifebuoy text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Help</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-wallet text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Balance : <b>$8451.36</b></span></a>
<a class="dropdown-item" href="pages-profile-settings.html"><span class="badge bg-success-subtle text-success mt-1 float-end">New</span><i class="mdi mdi-cog-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Settings</span></a>
<a class="dropdown-item" href="auth-lockscreen.html"><i class="mdi mdi-lock text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Lock screen</span></a>
<a class="dropdown-item" href="auth-logout.html"><i class="mdi mdi-logout text-muted fs-lg align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
</div>
</div>
<div class="sidebar-background"></div>
</div>
<!-- Left Sidebar End -->
<!-- Vertical Overlay-->
<div class="vertical-overlay"></div>
<div class="topbar-wrapper shadow">
<header id="page-topbar">
<div class="layout-width">
<div class="navbar-header">
<div class="d-flex">
<!-- LOGO -->
<div class="navbar-brand-box horizontal-logo">
<a href="index.html" class="logo logo-dark">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="22">
</span>
</a>
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="22">
</span>
</a>
</div>
<div class="header-item flex-shrink-0 me-3 vertical-btn-wrapper">
<button type="button" class="btn btn-sm px-0 fs-xl vertical-menu-btn topnav-hamburger border hamburger-icon" id="topnav-hamburger-icon">
<i class='bx bx-chevrons-right arrow-right'></i>
<i class='bx bx-chevrons-left arrow-left'></i>
</button>
</div>
<h4 class="mb-sm-0 header-item page-title lh-base">Modals</h4>
</div>
<div class="d-flex align-items-center">
<div class="dropdown d-none d-md-flex topbar-head-dropdown header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-search fs-3xl"></i>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-search-dropdown">
<form class="p-3">
<div class="form-group m-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
<button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="dropdown ms-1 topbar-head-dropdown header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="header-lang-img" src="assets/images/flags/us.svg" alt="Header Language" height="20" class="rounded">
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language py-2" data-lang="en" title="English">
<img src="assets/images/flags/us.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">English</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="sp" title="Spanish">
<img src="assets/images/flags/spain.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">Española</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="gr" title="German">
<img src="assets/images/flags/germany.svg" alt="user-image" class="me-2 rounded" height="18"> <span class="align-middle">Deutsche</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="it" title="Italian">
<img src="assets/images/flags/italy.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">Italiana</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ru" title="Russian">
<img src="assets/images/flags/russia.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">русский</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ch" title="Chinese">
<img src="assets/images/flags/china.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">中国人</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="fr" title="French">
<img src="assets/images/flags/french.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">français</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ar" title="Arabic">
<img src="assets/images/flags/ae.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">عربي</span>
</a>
</div>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-cart-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<i class='bx bx-shopping-bag fs-3xl'></i>
<span class="position-absolute topbar-badge cartitem-badge fs-3xs translate-middle badge rounded-pill bg-info">5</span>
</button>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-end p-0 product-list" aria-labelledby="page-header-cart-dropdown">
<div class="p-3 border-bottom">
<div class="row align-items-center">
<div class="col">
<h6 class="m-0 fs-lg fw-semibold"> My Cart <span class="badge bg-secondary fs-sm cartitem-badge ms-1">7</span></h6>
</div>
<div class="col-auto">
<a href="#!">View All</a>
</div>
</div>
</div>
<div data-simplebar style="max-height: 300px;">
<div class="p-3">
<div class="text-center empty-cart" id="empty-cart">
<div class="avatar-md mx-auto my-3">
<div class="avatar-title bg-info-subtle text-info fs-2 rounded-circle">
<i class='bx bx-cart'></i>
</div>
</div>
<h5 class="mb-3">Your Cart is Empty!</h5>
<a href="#!" class="btn btn-success w-md mb-3">Shop Now</a>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-1.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Blive Printed Men Round Neck</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">327.49</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="2" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">654.98</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-5.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Sportwear</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Willage Volleyball Ball</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">49.06</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="3" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">147.18</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-10.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Cotton collar tshirts for men</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">53.33</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="3" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">159.99</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-11.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Jeans blue men boxer</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">164.37</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="1" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">164.37</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-8.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Full Sleeve Solid Men Sweatshirt</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">180.00</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="1" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">180.00</span></h5>
</div>
</div>
</div>
<div id="count-table">
<table class="table table-borderless mb-0 fw-semibold">
<tbody>
<tr>
<td>Sub Total :</td>
<td class="text-end cart-subtotal">$1306.52</td>
</tr>
<tr>
<td>Discount <span class="text-muted">(DOSIX15)</span>:</td>
<td class="text-end cart-discount">- $195.98</td>
</tr>
<tr>
<td>Shipping Charge :</td>
<td class="text-end cart-shipping">$65.00</td>
</tr>
<tr>
<td>Estimated Tax (12.5%) : </td>
<td class="text-end cart-tax">$163.31</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="p-3 border-bottom-0 border-start-0 border-end-0 border-dashed border" id="checkout-elem">
<div class="d-flex justify-content-between align-items-center pb-3">
<h5 class="m-0 text-muted">Total:</h5>
<div class="px-2">
<h5 class="m-0 cart-total">$1338.86</h5>
</div>
</div>
<a href="apps-ecommerce-checkout.html" class="btn btn-info text-center w-100">
Checkout
</a>
</div>
</div>
</div>
<div class="ms-1 header-item d-none d-sm-flex">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" data-toggle="fullscreen">
<i class='bx bx-fullscreen fs-3xl'></i>
</button>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle mode-layout" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-sun align-middle fs-3xl"></i>
</button>
<div class="dropdown-menu p-2 dropdown-menu-end" id="light-dark-mode">
<a href="#!" class="dropdown-item" data-mode="light"><i class="bx bx-sun align-middle me-2"></i> Default (light mode)</a>
<a href="#!" class="dropdown-item" data-mode="dark"><i class="bx bx-moon align-middle me-2"></i> Dark</a>
<a href="#!" class="dropdown-item" data-mode="auto"><i class="bx bx-desktop align-middle me-2"></i> Auto (system default)</a>
</div>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<i class='bx bx-notification fs-3xl'></i>
<span class="position-absolute topbar-badge fs-3xs translate-middle badge rounded-pill bg-danger"><span class="notification-badge">3</span><span class="visually-hidden">unread messages</span></span>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-notifications-dropdown">
<div class="dropdown-head rounded-top">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-0 fs-lg fw-semibold"> Notifications <span class="badge bg-danger-subtle text-danger fs-sm notification-badge"> 3</span></h6>
</div>
<div class="col-auto dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" class="link-secondary fs-md"><i class="bi bi-three-dots-vertical"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">All Clear</a></li>
<li><a class="dropdown-item" href="#">Mark all as read</a></li>
<li><a class="dropdown-item" href="#">Archive All</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="pb-2 ps-0" id="notificationItemsTabContent">
<div data-simplebar style="max-height: 300px;" class="pe-0">
<h6 class="text-overflow text-muted fs-sm my-2 notification-title px-3">Today</h6>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-3.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-danger rounded-circle">
<span class="visually-hidden">Un Active</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1 text-muted"><b>Angela Bernier</b> mentioned you in <a href="#!">This Project</a></p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 48 min ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check02">
<label class="form-check-label" for="all-notification-check02"></label>
</div>
</div>
</div>
</div>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-2.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-success rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 1 hrs ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check02">
<label class="form-check-label" for="all-notification-check02"></label>
</div>
</div>
</div>
</div>
<h6 class="text-overflow text-muted fs-sm my-3 px-3 notification-title">Read Before</h6>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-8.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-warning rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1">We talked about a project on linkedin.</p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check04">
<label class="form-check-label" for="all-notification-check04"></label>
</div>
</div>
</div>
</div>
</div>
<div class="notification-actions" id="notification-actions">
<div class="d-flex text-muted justify-content-center align-items-center">
Select <div id="select-content" class="text-body fw-semibold px-1">0</div> Result <button type="button" class="btn btn-link link-danger p-0 ms-2" data-bs-toggle="modal" data-bs-target="#removeNotificationModal">Remove</button>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown ms-sm-3 header-item topbar-user">
<button type="button" class="btn shadow-none" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center">
<img class="rounded-circle header-profile-user" src="assets/images/users/32/avatar-1.jpg" alt="Header Avatar">
<span class="text-start ms-xl-2">
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">Richard Marshall</span>
<span class="d-none d-xl-block ms-1 fs-sm user-name-sub-text">Founder</span>
</span>
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<h6 class="dropdown-header">Welcome Richard!</h6>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-account-circle text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Profile</span></a>
<a class="dropdown-item" href="apps-chat.html"><i class="mdi mdi-message-text-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Messages</span></a>
<a class="dropdown-item" href="apps-tickets-overview.html"><i class="mdi mdi-calendar-check-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Taskboard</span></a>
<a class="dropdown-item" href="pages-faqs.html"><i class="mdi mdi-lifebuoy text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Help</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-wallet text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Balance : <b>$8451.36</b></span></a>
<a class="dropdown-item" href="pages-profile-settings.html"><span class="badge bg-success-subtle text-success mt-1 float-end">New</span><i class="mdi mdi-cog-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Settings</span></a>
<a class="dropdown-item" href="auth-lockscreen.html"><i class="mdi mdi-lock text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Lock screen</span></a>
<a class="dropdown-item" href="auth-logout.html"><i class="mdi mdi-logout text-muted fs-lg align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- removeNotificationModal -->
<div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="NotificationModalbtn-close"></button>
</div>
<div class="modal-body p-md-5">
<div class="text-center">
<div class="text-danger">
<i class="bi bi-trash display-4"></i>
</div>
<div class="mt-4 fs-base">
<h4 class="mb-1">Are you sure ?</h4>
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
</div>
</div>
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete It!</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- removeCartModal -->
<div id="removeCartModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-cartmodal"></button>
</div>
<div class="modal-body p-md-5">
<div class="text-center">
<div class="text-danger">
<i class="bi bi-trash display-5"></i>
</div>
<div class="mt-4">
<h4>Are you sure ?</h4>
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this product ?</p>
</div>
</div>
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn w-sm btn-danger" id="remove-cartproduct">Yes, Delete It!</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Base UI</a></li>
<li class="breadcrumb-item active">Modals</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Default Modal</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted text-muted">Use <code>modal-dialog</code> class to show default modal.</p>
<div>
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#myModal">Standard Modal</button>
<div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-base">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
<p class="text-muted">It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Vertically Centered Modal</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>modal-dialog-centered</code> class to show vertically center the modal.</p>
<div>
<!-- center modal -->
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target=".bs-example-modal-center">Center Modal</button>
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-exclamation-triangle text-warning display-5"></i>
<div class="mt-4">
<h4 class="mb-3">Oops something went wrong!</h4>
<p class="text-muted mb-4"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<a href="javascript:void(0);" class="btn btn-danger">Try Again</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
</div>
<!---end row-->
<div class="row">
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Grids in Modals</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>container-fluid</code> class within the modal-body to utilize the Bootstrap grid system within a modal by nesting.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalgrid">
Launch Demo Modal
</button>
<div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalgridLabel">Grid Modals</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="javascript:void(0);">
<div class="row g-3">
<div class="col-xxl-6">
<div>
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter firstname">
</div>
</div>
<!--end col-->
<div class="col-xxl-6">
<div>
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter lastname">
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<label class="form-label">Gender</label>
<div>
<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">Male</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">Female</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">Others</label>
</div>
</div>
</div>
<!--end col-->
<div class="col-xxl-6">
<label for="emailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="Enter your email">
</div>
<!--end col-->
<div class="col-xxl-6">
<label for="passwordInput" class="form-label">Password</label>
<input type="password" class="form-control" id="passwordInput" value="451326546">
</div>
<!--end col-->
<div class="col-lg-12">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<!--end col-->
</div>
<!--end row-->
</form>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Static Backdrop Modal</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>data-bs-backdrop="static"</code> to modal not to close when clicking outside the modal.</p>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Static Backdrop Modal
</button>
<!-- staticBackdrop Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="ph ph-confetti display-5 text-success"></i>
<div class="mt-4">
<h4 class="mb-3">You've made it!</h4>
<p class="text-muted mb-4"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<a href="javascript:void(0);" class="btn btn-link link-danger fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<a href="javascript:void(0);" class="btn btn-success">Completed</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row">
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Toggle Between Modal</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes. Please note multiple modals cannot be open at the same time. this method simply toggles between two separate modals.</p>
<div>
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#firstmodal">Open First Modal</button>
<!-- First modal dialog -->
<div class="modal fade" id="firstmodal" aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-exclamation-triangle text-warning display-5"></i>
<div class="mt-4 pt-4">
<h4>Uh oh, something went wrong!</h4>
<p class="text-muted"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<!-- Toogle to second dialog -->
<button class="btn btn-warning" data-bs-target="#secondmodal" data-bs-toggle="modal" data-bs-dismiss="modal">
Continue
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Second modal dialog -->
<div class="modal fade" id="secondmodal" aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-people text-primary display-5"></i>
<div class="mt-4 pt-3">
<h4 class="mb-3">Follow-Up Email</h4>
<p class="text-muted mb-4">Hide this modal and show the first with the button below Automatically Send your invitees a follow -Up email.</p>
<div class="hstack gap-2 justify-content-center">
<!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
<button class="btn btn-subtle-danger" data-bs-target="#firstmodal" data-bs-toggle="modal" data-bs-dismiss="modal">Back to
First
</button>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Tooltips and Popovers </h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted"><a href="https://getbootstrap.com/docs/5.1/components/tooltips/">Tooltips</a> and <a href="https://getbootstrap.com/docs/5.1/components/popovers/">Popovers</a> can be placed within modals as needed.When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalPopovers">
Launch Demo Modal
</button>
<!-- tooltips and popovers modal -->
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tooltips and Popovers Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">Popover in a Modal</h5>
<p class="text-muted">You only need to know a little to make a big <a href="#" class="popover-test fw-medium text-decoration-underline link-success" data-bs-toggle="popover" title="Common Types of Fonts" data-bs-content="They're a good choice for more traditional projects." data-bs-container="body" data-bs-placement="bottom" data-bs-original-title="Popover Title">Popover on Click </a> you do every day. So let's get started. First, some common types of fonts and what you need to know about them triggers a popover on click.</p>
<h5 class="fs-lg">Tooltips in a Modal</h5>
<p class="text-muted">Opposites attract, and that’s a fact. It’s in our <a href="#" class="tooltip-test text-decoration-underline fw-medium" title="Morton Bayer" data-bs-container="#exampleModalPopovers" data-bs-toggle="tooltip" data-bs-original-title="Tooltip title">graphic design</a> to be interested in the unusual, and that’s why using <a href="#" class="tooltip-test text-decoration-underline" title="Web Developers" data-bs-toggle="tooltip" data-bs-container="#exampleModalPopovers" data-bs-original-title="Tooltip title">design</a> contrasting colors in Graphic Design is a must.</p>
</div>
<div class="modal-footer">
<div class="mx-auto">
<a href="javascript:void(0);" class="btn btn-link fw-medium">Read More <i class="ri-arrow-right-line ms-1 align-middle"></i></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row">
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Scrollable Modal</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use<code> modal-dialog-scrollable</code> class to create a modal scrollable.</p>
<div>
<!-- Scrollable modal -->
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Scrollable Modal</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Scrollable
Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary, like sans serif with serif, short with tall, or decorative with simple. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<h6 class="fs-lg my-3">Graphic Design</h6>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Opposites attract, and that’s a fact. It’s in our nature to be interested in the unusual, and that’s why using contrasting colors in Graphic Design is a must. It’s eye-catching, it makes a statement, it’s impressive graphic design. Increase or decrease the letter spacing depending.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<div class="col-xxl-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Varying Modal Content</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>event.relatedTarget</code> and HTML <code>data-bs-*</code> attributes to vary the contents of the modal depending on which button was clicked.</p>
<div>
<div class="hstack gap-2 flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingcontentModal" data-bs-whatever="Mary">Open Modal for Mary</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingcontentModal" data-bs-whatever="Jennifer">Open Modal for Jennifer</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingcontentModal" data-bs-whatever="Roderick">Open Modal for Roderick</button>
</div>
<!-- Varying modal content -->
<div class="modal fade" id="varyingcontentModal" tabindex="-1" aria-labelledby="varyingcontentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="varyingcontentModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="customer-name" class="col-form-label">Customer Name:</label>
<input type="text" class="form-control" id="customer-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text" rows="4"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Back</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Optional Sizes</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>modal-fullscreen</code>, <code>modal-xl</code>, <code>modal-lg</code>, or <code>modal-sm</code> class to modal-dialog class to set different size modal respectively.</p>
<div>
<div class="hstack flex-wrap gap-2">
<!-- Fullscreen modal -->
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target=".exampleModalFullscreen">Fullscreen Modal</button>
<!-- Extra Large modal -->
<button type="button" class="btn btn-info " data-bs-toggle="modal" data-bs-target=".bs-example-modal-xl">Extra large Modal</button>
<!-- Large modal -->
<button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg">Large Modal</button>
<!-- Small modal -->
<button type="button" class="btn btn-danger " data-bs-toggle="modal" data-bs-target=".bs-example-modal-sm">Small Modal</button>
</div>
<!-- Full screen modal content -->
<div class="modal fade exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenLabel">Fullscreen
Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary, like sans serif with serif, short with tall, or decorative with simple. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<h6 class="fs-lg my-3">Graphic Design</h6>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Opposites attract, and that’s a fact. It’s in our nature to be interested in the unusual, and that’s why using contrasting colors in Graphic Design is a must. It’s eye-catching, it makes a statement, it’s impressive graphic design. Increase or decrease the letter spacing depending.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Extra Large modal example -->
<div class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myExtraLargeModalLabel">Extra large
modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary, like sans serif with serif, short with tall, or decorative with simple. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<h6 class="fs-lg my-3">Graphic Design</h6>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Opposites attract, and that’s a fact. It’s in our nature to be interested in the unusual, and that’s why using contrasting colors in Graphic Design is a must. It’s eye-catching, it makes a statement, it’s impressive graphic design. Increase or decrease the letter spacing depending.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Large modal example -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Large modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary, like sans serif with serif, short with tall, or decorative with simple. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<h6 class="fs-lg my-3">Graphic Design</h6>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Opposites attract, and that’s a fact. It’s in our nature to be interested in the unusual, and that’s why using contrasting colors in Graphic Design is a must. It’s eye-catching, it makes a statement, it’s impressive graphic design. Increase or decrease the letter spacing depending.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Small modal example -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySmallModalLabel">Small modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Fullscreen Responsive Modals</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted text-muted">Below mentioned modifier classes are used to show fullscreen modal as per minimum screen requirement.</p>
<div>
<div class="hstack gap-2 flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreeexampleModal">
Fullscreen modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full Screen Below sm</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full Screen Below md</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full Screen Below lg</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full Screen Below xl</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full Screen Below xxl</button>
</div>
<div class="modal fade" id="fullscreeexampleModal" tabindex="-1" aria-labelledby="fullscreeexampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullscreeexampleModalLabel">Full screen modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">For that very reason, I went on a quest and spoke to many different professional graphic designers and asked them what graphic design tips they live.</p>
</div>
</div>
<h6 class="fs-lg my-3">Graphic Design</h6>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Opposites attract, and that’s a fact. It’s in our nature to be interested in the unusual, and that’s why using contrasting colors in Graphic Design is a must. It’s eye-catching, it makes a statement, it’s impressive graphic design. Increase or decrease the letter spacing depending.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<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">
<h5 class="modal-title" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<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">
<h5 class="modal-title" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<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">
<h5 class="modal-title" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<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">
<h5 class="modal-title" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6 class="fs-base">Give your text a good structure</h6>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2">
<p class="text-muted mb-0">Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">Too much or too little spacing, as in the example below, can make things unpleasant for the reader. The goal is to make your text as comfortable to read as possible. </p>
</div>
</div>
<div class="d-flex mt-2">
<div class="flex-shrink-0">
<i class="ri-checkbox-circle-fill text-success"></i>
</div>
<div class="flex-grow-1 ms-2 ">
<p class="text-muted mb-0">In some designs, you might adjust your tracking to create a certain artistic effect. It can also help you fix fonts that are poorly spaced to begin with.</p>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Animation Modals</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>fadeInRight</code>, <code>fadeInLeft</code>, <code>fadeInUp</code>, <code>flip</code>, or <code>zoomIn</code> class to modal class to set different modal with animation effect respectively.</p>
<div>
<div class="hstack gap-2 flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fadeInRightModal">Fade In Right Modal</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fadeInleftModal">Fade In Left Modal</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fadeInUpModal">Fade In Up Modal</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#flipModal">Flip Modal</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#zoomInModal">Zoom In Modal</button>
</div>
<div id="fadeInRightModal" class="modal fade fadeInRight" tabindex="-1" aria-labelledby="fadeInRightModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fadeInRightModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="fadeInleftModal" class="modal fade fadeInLeft" tabindex="-1" aria-labelledby="fadeInleftModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fadeInleftModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal fadeInUp -->
<div id="fadeInUpModal" class="modal fade fadeInUp" tabindex="-1" aria-labelledby="fadeInUpModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fadeInUpModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal flip -->
<div id="flipModal" class="modal fade flip" tabindex="-1" aria-labelledby="flipModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="flipModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal Blur -->
<div id="zoomInModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="zoomInModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="zoomInModalLabel">Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="fs-lg">
Overflowing text to show scroll behavior
</h5>
<p class="text-muted">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p class="text-muted">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
</div>
<!---end row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Modal Positions</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted text-muted">Use <code>modal-dialog-right</code>, <code>modal-dialog-bottom</code>, or <code>modal-dialog-bottom-right</code> class to modal-dialog class to set modal at different positions respectively.</p>
<div>
<div class="hstack gap-2 flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#topmodal">Top Modal</button>
<button type="button" class="btn btn-secondary " data-bs-toggle="modal" data-bs-target="#top-rightmodal">Top Right Modal</button>
<button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#bottomModal">Bottom Modal</button>
<button type="button" class="btn btn-danger " data-bs-toggle="modal" data-bs-target="#bottom-rightModal">Bottom Right Modal</button>
</div>
<div id="topmodal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-emoji-smile display-5 text-success"></i>
<div class="mt-4">
<h4 class="mb-3">Your event has been created.</h4>
<p class="text-muted mb-4"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<a href="javascript:void(0);" class="btn btn-success">Completed</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="top-rightmodal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-right">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-emoji-smile display-5 text-success"></i>
<div class="mt-4">
<h4 class="mb-3">Your event has been created.</h4>
<p class="text-muted mb-4"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<a href="javascript:void(0);" class="btn btn-success">Completed</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal fadeInUp -->
<div id="bottomModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-bottom">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-emoji-smile display-5 text-success"></i>
<div class="mt-4">
<h4 class="mb-3">Your event has been created.</h4>
<p class="text-muted mb-4">The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<a href="javascript:void(0);" class="btn btn-success">Completed</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal flip -->
<div id="bottom-rightModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-bottom-right">
<div class="modal-content">
<div class="modal-body text-center p-5">
<i class="bi bi-emoji-smile display-5 text-success"></i>
<div class="mt-4">
<h4 class="mb-3">Your event has been created.</h4>
<p class="text-muted mb-4"> The transfer was not successfully received by us. the email of the recipient wasn't correct.</p>
<div class="hstack gap-2 justify-content-center">
<a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
<a href="javascript:void(0);" class="btn btn-success">Completed</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div>
</div>
<!---end row-->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<script>document.write(new Date().getFullYear())</script> © Dosix.
</div>
<div class="col-sm-6">
<div class="text-sm-end d-none d-sm-block">
Design & Develop by Themesbrand
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
<!--start back-to-top-->
<button class="btn btn-dark btn-icon" id="back-to-top">
<i class="bi bi-caret-up fs-3xl"></i>
</button>
<!--end back-to-top-->
<!--preloader-->
<div id="preloader">
<div id="status">
<div class="spinner-border text-primary avatar-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="customizer-setting d-none d-md-block">
<div class="btn btn-info p-2 text-uppercase rounded-end-0 shadow-lg" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
<i class="bi bi-gear mb-1"></i> Customizer
</div>
</div>
<!-- Theme Settings -->
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
<div class="d-flex align-items-center p-3 offcanvas-header border-bottom">
<div class="me-2">
<h5 class="mb-1">Admin Builder</h5>
<p class="text-muted mb-0">Choose your themes & layouts etc.</p>
</div>
<button type="button" class="btn-close ms-auto" id="customizerclose-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div data-simplebar class="h-100">
<div class="p-4">
<h6 class="fs-lg mb-1">Layout</h6>
<p class="text-muted fs-md">Choose your layout</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Vertical</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
<span class="d-flex h-100 flex-column gap-1">
<span class="bg-light d-flex p-1 gap-1 align-items-center">
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
</span>
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Horizontal</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Two Column</h5>
</div>
<!-- end col -->
</div>
<h6 class="mt-4 fs-lg mb-1">Color Scheme</h6>
<p class="text-muted fs-md">Choose Light or Dark Scheme.</p>
<div class="colorscheme-cardradio">
<div class="row g-3">
<div class="col-6">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-light" value="light">
<label class="form-check-label p-0 bg-transparent" for="layout-mode-light">
<img src="assets/images/custom-theme/light-mode.png" alt="" class="img-fluid">
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-6">
<div class="form-check card-radio dark">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-dark" value="dark">
<label class="form-check-label p-0 bg-transparent" for="layout-mode-dark">
<img src="assets/images/custom-theme/dark-mode.png" alt="" class="img-fluid">
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
</div>
</div>
<div id="layout-width">
<h6 class="mt-4 fs-lg mb-1">Layout Width</h6>
<p class="text-muted fs-md">Choose Fluid or Boxed layout.</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-fluid" value="fluid">
<label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Fluid</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-boxed" value="boxed">
<label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-width-boxed">
<span class="d-flex gap-1 h-100 border-start border-end">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Boxed</h5>
</div>
</div>
</div>
<h6 class="mt-4 fs-lg mb-1">Topbar Color</h6>
<p class="text-muted fs-md">Choose Light or Dark Topbar Color.</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-primary d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
</div>
<div id="sidebar-size">
<h6 class="mt-4 fs-lg mb-1">Sidebar Size</h6>
<p class="text-muted fs-md">Choose a size of Sidebar.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-default" value="lg">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Default</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-compact" value="md">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Compact</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small" value="sm">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Small (Icon View)</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small-hover" value="sm-hover">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small-hover">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Small Hover View</h5>
</div>
</div>
</div>
<div id="sidebar-view">
<h6 class="mt-4 fs-lg mb-1">Sidebar View</h6>
<p class="text-muted fs-md">Choose Default or Detached Sidebar view.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-default" value="default">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Default</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-detached" value="detached">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
</span>
<span class="d-flex gap-1 h-100 p-1 px-2">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
</span>
<span class="bg-light d-block p-1 mt-auto px-2"></span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Detached</h5>
</div>
</div>
</div>
<div id="sidebar-color">
<h6 class="mt-4 fs-lg mb-1">Sidebar Color</h6>
<p class="text-muted fs-md">Choose a color of Sidebar.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
<div class="col-4">
<button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient" aria-expanded="false" aria-controls="collapseBgGradient">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</button>
<h5 class="fs-sm text-center fw-medium mt-2">Gradient</h5>
</div>
</div>
<!-- end row -->
<div class="collapse" id="collapseBgGradient">
<div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient" value="gradient">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient">
<span class="avatar-title rounded-circle bg-vertical-gradient"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-2" value="gradient-2">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-2">
<span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-3" value="gradient-3">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-3">
<span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-4" value="gradient-4">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-4">
<span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
</label>
</div>
</div>
</div>
</div>
<div id="sidebar-img">
<h6 class="mt-4 fw-semibold fs-base">Sidebar Images</h6>
<p class="text-muted fs-md">Choose a image of Sidebar.</p>
<div class="d-flex gap-2 flex-wrap img-switch">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-none" value="none">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
<span class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
<i class="ri-close-fill fs-3xl"></i>
</span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-01" value="img-1">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
<img src="assets/images/sidebar/img-sm-1.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-02" value="img-2">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
<img src="assets/images/sidebar/img-sm-2.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-03" value="img-3">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
<img src="assets/images/sidebar/img-sm-3.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-04" value="img-4">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
<img src="assets/images/sidebar/img-sm-4.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
</div>
</div>
<div id="preloader-menu">
<h6 class="mt-4 fw-semibold fs-base">Preloader</h6>
<p class="text-muted fs-md">Choose a preloader.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-custom" value="enable">
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-custom">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
<!-- <div id="preloader"> -->
<span class="d-flex align-items-center justify-content-center">
<span class="spinner-border text-primary avatar-xxs m-auto" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</span>
<!-- </div> -->
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Enable</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-none" value="disable">
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-none">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Disable</h5>
</div>
</div>
</div><!-- end preloader-menu -->
</div>
</div>
</div>
<div class="offcanvas-footer border-top p-3 text-center">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
</div>
<div class="col-6">
<a href="#!" target="_blank" class="btn btn-primary w-100">Buy Now</a>
</div>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/js/plugins.js"></script>
<!-- prismjs plugin -->
<script src="assets/libs/prismjs/prism.js"></script>
<!-- Lord Icon -->
<script src="../../../cdn.lordicon.com/libs/mssddfmo/lord-icon-2.1.0.js"></script>
<!-- Modal Js -->
<script src="assets/js/pages/modal.init.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
<!-- Mirrored from themesbrand.com/dosix/layouts/ui-modals.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 16 Jul 2024 06:03:24 GMT -->
</html>