File: /home/emblazeone/public_html/lyyt/backend/web/quantum/demo7/forms.checkbox-radio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>QuantumPro | UI Elements - Forms - Basic Inputs</title>
<!-- ================== GOOGLE FONTS ==================-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500" rel="stylesheet">
<!-- ======================= GLOBAL VENDOR STYLES ========================-->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/metismenu/dist/metisMenu.css">
<link rel="stylesheet" href="../assets/vendor/switchery-npm/index.css">
<link rel="stylesheet" href="../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<!-- ======================= LINE AWESOME ICONS ===========================-->
<link rel="stylesheet" href="../assets/css/icons/line-awesome.min.css">
<!-- ======================= DRIP ICONS ===================================-->
<link rel="stylesheet" href="../assets/css/icons/dripicons.min.css">
<!-- ======================= MATERIAL DESIGN ICONIC FONTS =================-->
<link rel="stylesheet" href="../assets/css/icons/material-design-iconic-font.min.css">
<!-- ======================= GLOBAL COMMON STYLES ============================-->
<link rel="stylesheet" href="../assets/css/common/main.bundle.css">
<!-- ======================= LAYOUT TYPE ===========================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/core/main.css">
<!-- ======================= MENU TYPE ===========================================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/menu-type/content.css">
<!-- ======================= THEME COLOR STYLES ===========================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/themes/theme-i.css">
</head>
<body class="content-menu">
<!-- CONTENT WRAPPER -->
<div id="app">
<!-- TOP TOOLBAR WRAPPER -->
<nav class="top-toolbar navbar navbar-mobile navbar-tablet">
<ul class="navbar-nav nav-left">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="aside-left-open">
<i class="icon dripicons-align-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav nav-center site-logo">
<li>
<a href="index.html">
<div class="logo_mobile">
<svg id="logo_mobile" width="30" height="30" viewBox="0 0 54.03 56.55">
<defs>
<linearGradient id="logo_background_mobile_color">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
</defs>
<path id="logo_path_mobile" class="cls-2" d="M90.32,0c14.2-.28,22.78,7.91,26.56,18.24a39.17,39.17,0,0,1,1,4.17l.13,1.5A15.25,15.25,0,0,1,118.1,29v.72l-.51,3.13a30.47,30.47,0,0,1-3.33,8,15.29,15.29,0,0,1-2.5,3.52l.06.07c.57.88,1.43,1.58,2,2.41,1.1,1.49,2.36,2.81,3.46,4.3.41.55,1,1,1.41,1.56.68.92,1.16,1.89.32,3.06-.08.12-.08.24-.19.33a2.39,2.39,0,0,1-2.62.07,4.09,4.09,0,0,1-.7-.91c-.63-.85-1.41-1.61-2-2.48-1-1.42-2.33-2.67-3.39-4.1a16.77,16.77,0,0,1-1.15-1.37c-.11,0-.06,0-.13.07-.41.14-.65.55-1,.78-.72.54-1.49,1.08-2.24,1.56A29.5,29.5,0,0,1,97.81,53c-.83.24-1.6.18-2.5.39a16.68,16.68,0,0,1-3.65.26H90.58L88,53.36A36.87,36.87,0,0,1,82.71,52a27.15,27.15,0,0,1-15.1-14.66c-.47-1.1-.7-2.17-1.09-3.39-1-3-1.45-8.86-.51-12.38a29,29,0,0,1,2.56-7.36c3.56-6,7.41-9.77,14.08-12.57a34.92,34.92,0,0,1,4.8-1.3Zm.13,4.1c-.45.27-1.66.11-2.24.26a32.65,32.65,0,0,0-4.74,1.37A23,23,0,0,0,71,18.7,24,24,0,0,0,71.13,35c2.78,6.66,7.2,11.06,14.21,13.42,1.16.39,2.52.59,3.84.91l1.47.07a7.08,7.08,0,0,0,2.43,0H94c.89-.21,1.9-.28,2.75-.46V48.8A7.6,7.6,0,0,1,95.19,47c-.78-1-1.83-1.92-2.62-3s-1.86-1.84-2.62-2.87c-2-2.7-4.45-5.1-6.66-7.62-.57-.66-1.14-1.32-1.66-2-.22-.29-.59-.51-.77-.85a2.26,2.26,0,0,1,.58-2.61,2.39,2.39,0,0,1,2.24-.2,4.7,4.7,0,0,1,1.22,1.3l.51.46c.5.68,1,1.32,1.6,2,2.07,2.37,4.38,4.62,6.27,7.17.94,1.26,2.19,2.3,3.14,3.58l1,1c.82,1.1,1.8,2,2.62,3.13.26.35.65.6.9,1A23.06,23.06,0,0,0,105,45c.37-.27,1-.51,1.15-1h-.06c-.18-.51-.73-.83-1-1.24-.74-1-1.64-1.88-2.37-2.87-1.8-2.44-3.89-4.6-5.7-7-.61-.82-1.44-1.52-2-2.34-.85-1.16-3.82-3.73-1.54-5.41a2.27,2.27,0,0,1,1.86-.26c.9.37,2.33,2.43,2.94,3.26s1.27,1.31,1.79,2c1.44,1.95,3.11,3.66,4.54,5.6.41.55,1,1,1.41,1.56.66.89,1.46,1.66,2.11,2.54.29.39.61,1.06,1.09,1.24.54-1,1.34-1.84,1.92-2.8a25.69,25.69,0,0,0,2.5-6.32c1.27-4.51.32-10.37-1.15-13.81A22.48,22.48,0,0,0,100.75,5.94a35.12,35.12,0,0,0-6.08-1.69A20.59,20.59,0,0,0,90.45,4.11Z" transform="translate(-65.5)" fill="url(#logo_background_mobile_color)"/>
</svg>
</div>
<h1 class="brand-text">QuantumPro</h1>
</a>
</li>
</ul>
<ul class="navbar-nav nav-right">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="mobile-topbar-toggle">
<i class="icon dripicons-dots-3 rotate-90"></i>
</a>
</li>
</ul>
</nav>
<nav class="top-toolbar navbar navbar-desktop flex-nowrap">
<ul class="navbar-nav nav-left">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="content-menu-close">
<i class="icon dripicons-align-left"></i>
</a>
</li>
<li class="nav-item nav-text dropdown dropdown-menu-md">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>
Dropdown
</span>
<i class="la la-angle-down menu-arrow-down"></i>
</a>
<div class="dropdown-menu menu-icons dropdown-menu-left">
<div class="form-group form-filter">
<input type="text" placeholder="Filter location..." class="form-control filter-input" data-search-trigger="open">
<i data-q-action="clear-filter" class="icon dripicons-cross clear-filter"></i>
<ul class="list-reset filter-list" data-scroll="minimal-dark">
<li><a class="dropdown-item" href="#">New York, N.Y.</a></li>
<li><a class="dropdown-item" href="#">Los Angeles, Calif.</a></li>
<li> <a class="dropdown-item" href="#">Chicago, Ill.</a></li>
<li> <a class="dropdown-item" href="#">Houston, Tex.</a></li>
<li> <a class="dropdown-item" href="#"> Philadelphia, Pa.</a></li>
<li> <a class="dropdown-item" href="#"> Phoenix, Ariz. </a></li>
<li> <a class="dropdown-item" href="#"> San Antonio, Tex.</a></li>
<li> <a class="dropdown-item" href="#">San Diego, Calif. </a></li>
<li> <a class="dropdown-item" href="#"> Dallas, Tex.</a></li>
<li> <a class="dropdown-item" href="#">San Jose, Calif. </a></li>
<li> <a class="dropdown-item" href="#"> Austin, Tex.</a></li>
<li> <a class="dropdown-item" href="#"> Jacksonville, Fla.</a></li>
<li> <a class="dropdown-item" href="#">San Francisco, Calif. </a></li>
<li> <a class="dropdown-item" href="#">Indianapolis, Ind. </a></li>
<li> <a class="dropdown-item" href="#"> Columbus, Ohio</a></li>
<li> <a class="dropdown-item" href="#">Fort Worth, Tex. </a></li>
<li> <a class="dropdown-item" href="#"> Charlotte, N.C.</a></li>
<li> <a class="dropdown-item" href="#"> Detroit, Mich.</a></li>
<li> <a class="dropdown-item" href="#">El Paso, Tex. </a></li>
<li> <a class="dropdown-item" href="#">Seattle, Wash.</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item nav-text dropdown dropdown-menu-xl">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>
Mega Menu
</span>
<i class="la la-angle-down menu-arrow-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-left">
<div class="row">
<div class="col">
<h3 class="menu-header">Shop Top Categories</h3>
<ul class="list-items">
<li>
<a href="javascript:void(0);">T-Shirts</a>
</li>
<li>
<a href="javascript:void(0);">Tank Tops & Fitted Tees</a>
</li>
<li>
<a href="javascript:void(0);">Polos & Button-Ups</a>
</li>
<li>
<a href="javascript:void(0);">Women's Tops</a>
</li>
<li>
<a href="javascript:void(0);">Dresses & Skirts</a>
</li>
<li>
<a href="javascript:void(0);">Sweaters & Cardigans</a>
</li>
<li>
<a href="javascript:void(0);">Hoodies</a>
</li>
<li>
<a href="javascript:void(0);">Jackets & Outerwear</a>
</li>
<li>
<a href="javascript:void(0);">Activewear & Swimwear</a>
</li>
<li>
<a href="javascript:void(0);">Men's Jeans</a>
</li>
</ul>
</div>
<div class="col">
<h3 class="menu-header">Accessories</h3>
<ul class="list-items">
<li>
<a href="javascript:void(0);">Footwear</a>
</li>
<li>
<a href="javascript:void(0);">Keychains & Bag Accessories</a>
</li>
<li>
<a href="javascript:void(0);">Wallets</a>
</li>
<li>
<a href="javascript:void(0);">Hats & Hair</a>
</li>
<li>
<a href="javascript:void(0);">Ties & Cufflinks</a>
</li>
<li>
<a href="javascript:void(0);">Belts & Suspenders</a>
</li>
<li>
<a href="javascript:void(0);">Scarves</a>
</li>
<li>
<a href="javascript:void(0);">Pouches & Coin Purses</a>
</li>
<li>
<a href="javascript:void(0);">Sunglasses</a>
</li>
<li>
<a href="javascript:void(0);">Other Accessories</a>
</li>
</ul>
</div>
<div class="col">
<figure class="tint">
<div class="promo">
<h3>Grand Opening Sale!</h3>
<h4>Save up to 30% off.</h4>
<button class="btn btn-primary btn-rounded">Shop Now</button>
</div>
<img src="../assets/img/demos/ecom-header.jpg" alt="">
</figure>
</div>
</div>
</div>
</li>
</ul>
<ul class="site-logo">
<li>
<!-- START LOGO -->
<a href="index.html">
<div class="logo">
<svg id="logo" width="25" height="25" viewBox="0 0 54.03 56.55">
<defs>
<linearGradient id="logo_background_color">
<stop class="stop1" offset="30%"/>
<stop class="stop2" offset="80%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
</defs>
<path id="logo_path" class="cls-2" d="M90.32,0c14.2-.28,22.78,7.91,26.56,18.24a39.17,39.17,0,0,1,1,4.17l.13,1.5A15.25,15.25,0,0,1,118.1,29v.72l-.51,3.13a30.47,30.47,0,0,1-3.33,8,15.29,15.29,0,0,1-2.5,3.52l.06.07c.57.88,1.43,1.58,2,2.41,1.1,1.49,2.36,2.81,3.46,4.3.41.55,1,1,1.41,1.56.68.92,1.16,1.89.32,3.06-.08.12-.08.24-.19.33a2.39,2.39,0,0,1-2.62.07,4.09,4.09,0,0,1-.7-.91c-.63-.85-1.41-1.61-2-2.48-1-1.42-2.33-2.67-3.39-4.1a16.77,16.77,0,0,1-1.15-1.37c-.11,0-.06,0-.13.07-.41.14-.65.55-1,.78-.72.54-1.49,1.08-2.24,1.56A29.5,29.5,0,0,1,97.81,53c-.83.24-1.6.18-2.5.39a16.68,16.68,0,0,1-3.65.26H90.58L88,53.36A36.87,36.87,0,0,1,82.71,52a27.15,27.15,0,0,1-15.1-14.66c-.47-1.1-.7-2.17-1.09-3.39-1-3-1.45-8.86-.51-12.38a29,29,0,0,1,2.56-7.36c3.56-6,7.41-9.77,14.08-12.57a34.92,34.92,0,0,1,4.8-1.3Zm.13,4.1c-.45.27-1.66.11-2.24.26a32.65,32.65,0,0,0-4.74,1.37A23,23,0,0,0,71,18.7,24,24,0,0,0,71.13,35c2.78,6.66,7.2,11.06,14.21,13.42,1.16.39,2.52.59,3.84.91l1.47.07a7.08,7.08,0,0,0,2.43,0H94c.89-.21,1.9-.28,2.75-.46V48.8A7.6,7.6,0,0,1,95.19,47c-.78-1-1.83-1.92-2.62-3s-1.86-1.84-2.62-2.87c-2-2.7-4.45-5.1-6.66-7.62-.57-.66-1.14-1.32-1.66-2-.22-.29-.59-.51-.77-.85a2.26,2.26,0,0,1,.58-2.61,2.39,2.39,0,0,1,2.24-.2,4.7,4.7,0,0,1,1.22,1.3l.51.46c.5.68,1,1.32,1.6,2,2.07,2.37,4.38,4.62,6.27,7.17.94,1.26,2.19,2.3,3.14,3.58l1,1c.82,1.1,1.8,2,2.62,3.13.26.35.65.6.9,1A23.06,23.06,0,0,0,105,45c.37-.27,1-.51,1.15-1h-.06c-.18-.51-.73-.83-1-1.24-.74-1-1.64-1.88-2.37-2.87-1.8-2.44-3.89-4.6-5.7-7-.61-.82-1.44-1.52-2-2.34-.85-1.16-3.82-3.73-1.54-5.41a2.27,2.27,0,0,1,1.86-.26c.9.37,2.33,2.43,2.94,3.26s1.27,1.31,1.79,2c1.44,1.95,3.11,3.66,4.54,5.6.41.55,1,1,1.41,1.56.66.89,1.46,1.66,2.11,2.54.29.39.61,1.06,1.09,1.24.54-1,1.34-1.84,1.92-2.8a25.69,25.69,0,0,0,2.5-6.32c1.27-4.51.32-10.37-1.15-13.81A22.48,22.48,0,0,0,100.75,5.94a35.12,35.12,0,0,0-6.08-1.69A20.59,20.59,0,0,0,90.45,4.11Z" transform="translate(-65.5)" fill="url(#logo_background_color)"/>
</svg>
</div>
<h1 class="brand-text">QuantumPro</h1>
</a>
<!-- END LOGO -->
</li>
</ul>
<ul class="navbar-nav nav-right">
<li class="nav-item">
<a href="javascript:void(0)" class="open-search-button" data-q-action="open-site-search">
<i class="icon dripicons-search"></i>
</a>
</li>
<li class="nav-item dropdown dropdown-menu-lg">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon dripicons-view-apps"></i>
</a>
<div class="dropdown-menu dropdown-menu-right p-0">
<div class="dropdown-menu-grid">
<div class="menu-grid-row">
<div><a class="dropdown-item border-bottom border-right" href="apps.mail.html"><i class="icon dripicons-mail"></i><span>Mail</span></a></div>
<div><a class="dropdown-item border-bottom" href="apps.messages.html"><i class="icon dripicons-message"></i><span>Messages</span></a></div>
</div>
<div class="menu-grid-row">
<div><a class="dropdown-item border-right" href="apps.contacts.html"><i class="icon dripicons-archive"></i><span>Contacts</span></a></div>
<div> <a class="dropdown-item" href="apps.calendar.html"><i class="icon dripicons-calendar"></i><span>Calendar</span></a></div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-notifications dropdown-menu-lg">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon dripicons-bell"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="card card-notification">
<div class="card-header">
<h5 class="card-title">Notifications</h5>
<ul class="actions top-right">
<li>
<a href="javascript:void(0);" data-q-action="open-notifi-config">
<i class="icon dripicons-gear"></i>
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="card-container-wrapper">
<div class="card-container">
<div class="timeline timeline-border">
<div class="timeline-list">
<div class="timeline-info">
<div>Prep for bi-weekly meeting with <a href="javascript:void(0)"><strong>Steven Weinberg</strong></a> </div>
<small class="text-muted">07/05/18, 2:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-primary">
<div class="timeline-info">
<div>Skype call with development team</div>
<small class="text-muted">07/07/18, 1:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-accent">
<div class="timeline-info">
<div>Programming control system</div>
<small class="text-muted">07/09/18, 10:00 AM - 6:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-success">
<div class="timeline-info">
<div>Lunch with Peter Higgs</div>
<small class="text-muted">07/10/18, 12:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-warning">
<div class="timeline-info">
<div><a href="#"><strong>Approve Request</strong></a> for new training material by</div>
<small class="text-muted">07/11/18, 9:00 AM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-info">
<div class="timeline-info">
<div><a href="#"><strong>RSVP</strong></a> for this year's hackathon.</div>
<small class="text-muted">07/11/18, 1:30 PM</small>
</div>
</div>
</div>
</div>
<div class="card-container">
<h6 class="p-0 m-0">
Show notifications from:
</h6>
<div class="row m-b-20 m-t-30">
<div class="col-10"><span class="title"><i class="icon dripicons-calendar"></i>Calendar</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked /></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-mail"></i>Email</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked/></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-message"></i>Messages</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" /></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-stack"></i>Projects</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-pill user-avatar" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<img src="../assets/img/avatars/1.jpg" class="w-35 rounded-circle" alt="Albert Einstein">
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-accout">
<div class="dropdown-header pb-3">
<div class="media d-user">
<img class="align-self-center mr-3 w-40 rounded-circle" src="../assets/img/avatars/1.jpg" alt="Albert Einstein">
<div class="media-body">
<h5 class="mt-0 mb-0">Albert Einstein</h5>
<span>support@authenticgoods.co</span>
</div>
</div>
</div>
<a class="dropdown-item" href="apps.messages.html"><i class="icon dripicons-mail"></i> Message <span class="badge badge-accent rounded-circle w-15 h-15 p-0 font-size-10">4</span></a>
<a class="dropdown-item" href="pages.profile.html"><i class="icon dripicons-user"></i> Profile</a>
<a class="dropdown-item" href="pages.my-account.html"><i class="icon dripicons-gear"></i> Account Settings </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="icon dripicons-lock"></i> Lock Account</a>
<a class="dropdown-item" href="auth.sign-in.html"><i class="icon dripicons-lock-open"></i> Sign Out</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="aside-right-open">
<i class="icon dripicons-align-right"></i>
</a>
</li>
</ul>
<form role="search" action="pages.search.html" class="navbar-form">
<div class="form-group">
<input type="text" placeholder="Search and press enter..." class="form-control navbar-search" autocomplete="off">
<i data-q-action="close-site-search" class="icon dripicons-cross close-search"></i>
</div>
<button type="submit" class="d-none">Submit</button>
</form>
</nav>
<!-- END TOP TOOLBAR WRAPPER -->
<div class="content-wrapper">
<!-- MENU SIDEBAR WRAPPER -->
<aside class="sidebar sidebar-left">
<div class="sidebar-content">
<nav class="main-menu">
<ul class="nav metismenu">
<li class="sidebar-header"><span>NAVIGATION</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-meter"></i><span>Dashboard</span></a>
<ul class="collapse nav-sub" aria-expanded="true">
<li><a href="index.html"><span>Default</span></a></li>
<li><a href="dashboard.analytics.html"><span>Analytics</span></a></li>
<li><a href="dashboard.financials.html"><span>Financials</span></a></li>
<li><a href="dashboard.ecommerce.html"><span>Ecommerce</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-article"></i><span>Page Layouts</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="layout.blank.html"><span>Blank Page</span></a></li>
<li><a href="layout.1-column-wide.html"><span>1 Column Wide</span></a></li>
<li><a href="layout.1-column-boxed.html"><span>1 Column Boxed</span></a></li>
<li><a href="layout.tabbed-header.html"><span>Tabbed Header</span></a></li>
<li><a href="layout.left-sidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="layout.right-sidebar.html"><span>Right Sidebar</span></a></li>
<li><a href="layout.left-right-sidebars.html"><span>Left & Right Sidebars</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-browser"></i><span>Custom Pages</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="pages.profile.html"><span>Profile</span></a></li>
<li><a href="pages.help-center.html"><span>Help Center</span></a></li>
<li><a href="pages.search.html"><span>Search</span></a></li>
<li><a href="pages.pricing-tables.html"><span>Pricing Tables</span></a></li>
<li><a href="pages.my-account.html"><span>My Account</span></a></li>
<li><a href="pages.invoice-template.html"><span>Invoice Template</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-view-thumb"></i><span>Cards</span></a>
<ul class="collapse nav-sub">
<li><a href="cards.basic-content-types.html"><span>Content Types</span></a></li>
<li><a href="cards.basic-layouts.html"><span>Layouts</span></a></li>
<li><a href="cards.basic-navigation.html"><span>Navigation</span></a></li>
<li><a href="cards.basic-actions.html"><span>Actions</span></a></li>
</ul>
</li>
<li class="sidebar-header"><span>UI ELEMENTS</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-jewel"></i><span>UI Kit</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="ui.alerts.html"><span>Alerts</span></a></li>
<li><a href="ui.badges.html"><span>Badges</span></a></li>
<li><a href="ui.buttons.html"><span>Buttons</span></a></li>
<li><a href="ui.colors.html"><span>Colors</span></a></li>
<li><a href="ui.icons.html"><span>Icons</span></a></li>
<li><a href="ui.list-groups.html"><span>List Groups</span></a></li>
<li><a href="ui.progress-bars.html"><span>Progress Bars</span></a></li>
<li><a href="ui.preloaders.html"><span>Preloaders</span></a></li>
<li><a href="ui.typography.html"><span>Typography</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-stack"></i><span>Components</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="components.carousels.html"><span>Carousels</span></a></li>
<li><a href="components.tabs-pills.html"><span>Tabs & Pills</span></a></li>
<li><a href="components.dropdowns.html"><span>Dropdowns</span></a></li>
<li><a href="components.modals.html"><span>Modals</span></a></li>
<li><a href="components.sweetalert2.html"><span>SweetAlert2</span></a></li>
<li><a href="components.scrollable.html"><span>Scrollable</span></a></li>
<li><a href="components.tooltips-popovers.html"><span>Tooltips & Popovers</span></a></li>
<li><a href="components.ui-blocking.html"><span>UI Blocking</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-graph-bar"></i><span>Charts</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="charts.chartjs.html"><span>Chart.js</span></a></li>
<li><a href="charts.c3charts.html"><span>C3 Charts</span></a></li>
<li><a href="charts.morrisjs.html"><span>Morris.js</span></a></li>
<li><a href="charts.chartist.html"><span>Chartist</span></a></li>
</ul>
</li>
<li class="nav-dropdown active">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-to-do"></i><span>Forms</span></a>
<ul class="collapse in nav-sub">
<li class="nav-dropdown active">
<a class="has-arrow" href="#">Basic Elements</a>
<ul class="collapse in nav-sub">
<li><a href="forms.basic-inputs.html"><span>Basic Inputs</span></a></li>
<li class="active"><a href="forms.checkbox-radio.html"><span>Checkbox & Radio</span></a></li>
<li><a href="forms.input-groups.html"><span>Input Groups</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Layouts</a>
<ul class="collapse nav-sub">
<li><a href="forms.form-groups.html"><span>Form Groups</span></a></li>
<li><a href="forms.form-grid.html"><span>Form Grid</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Advanced Elements</a>
<ul class="collapse nav-sub">
<li><a href="forms.input-mask.html"><span>Input Mask</span></a></li>
<li><a href="forms.select2.html"><span>Select2</span></a></li>
<li><a href="forms.range-sliders.html"><span>Range Sliders</span></a></li>
<li><a href="forms.switches.html"><span>Switches</span></a></li>
<li><a href="forms.date-pickers.html"><span>Date Pickers</span></a></li>
<li><a href="forms.dropzone.html"><span>Dropzone</span></a></li> <li><a href="forms.wysiwyg.html"><span>WYSIWYG</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Validation</a>
<ul class="collapse nav-sub">
<li><a href="forms.basic-validation.html"><span>Basic Validation</span></a></li>
<li><a href="forms.jquery-validation.html"><span>jQuery Validation</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Wizards</a>
<ul class="collapse nav-sub">
<li><a href="forms.vertical-wizard.html"><span>Vertical Wizard</span></a></li>
<li><a href="forms.horizontal-wizard.html"><span>Horizontal Wizard</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-blog"></i><span>Tables</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="tables.basic.html"><span>Basic Tables</span></a></li>
<li><a href="tables.data.html"><span>Data Tables</span></a></li>
</ul>
</li>
<li class="sidebar-header"><span>APP VIEWS</span></li>
<li><a href="apps.mail.html"><i class="icon dripicons-mail"></i><span>Mail</span></a></li>
<li><a href="apps.messages.html"><i class="icon dripicons-message"></i><span>Messages</span></a></li>
<li><a href="apps.contacts.html"><i class="icon dripicons-archive"></i><span>Contacts</span></a></li>
<li><a href="apps.calendar.html"><i class="icon dripicons-calendar"></i><span>Calendar</span></a></li>
<li class="sidebar-header"><span>EXTRAS</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-lock"></i><span>Authentication</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="auth.sign-in.html"><span>Sign In</span></a></li>
<li><a href="auth.register.html"><span>Register</span></a></li>
<li><a href="auth.forgot-password.html"><span>Forgot Password</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false">
<i class="icon dripicons-folder"></i><span>Menu Levels</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li>
<a href="javascript:;">
Level 1.1
</a>
</li>
<li>
<a href="javascript:;">
Level 1.2
</a>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false">
Level 1.3
</a>
<ul class="collapse nav-sub" aria-expanded="false">
<li>
<a href="javascript:;">
Level 2.1
</a>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="helper-classes.html"><i class="icon dripicons-help"></i><span>Helper Classes</span></a></li>
</ul>
</div>
</aside>
<!-- END MENU SIDEBAR WRAPPER -->
<div class="content container-fluid">
<header class="page-header">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h1 class="separator">Checkbox & Radio</h1>
<nav class="breadcrumb-wrapper" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="icon dripicons-home"></i></a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Checkbox & Radio</li>
</ol>
</nav>
</div>
<ul class="actions top-right">
<li class="dropdown">
<a href="javascript:void(0)" class="btn btn-fab" data-toggle="dropdown" aria-expanded="false">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-icon-menu dropdown-menu-right">
<div class="dropdown-header">
Quick Actions
</div>
<a href="#" class="dropdown-item">
<i class="icon dripicons-clockwise"></i> Refresh
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-gear"></i> Manage Widgets
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-cloud-download"></i> Export
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-help"></i> Support
</a>
</div>
</li>
</ul>
</div>
</header>
<section class="page-content container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card">
<h5 class="card-header">Bootstrap Default</h5>
<div class="card-body">
<p class="f-w-400 font-size-16 ">Checkboxes</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
<label class="form-check-label" for="defaultCheck2">
Default checkbox checked
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3" disabled>
<label class="form-check-label" for="defaultCheck3">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4" disabled checked>
<label class="form-check-label" for="defaultCheck3">
Disabled checkbox checked
</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Inline Checkboxes</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Radio buttons</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
<label class="form-check-label" for="exampleRadios2">
Default radio checked
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Inline Radios</p>
<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">1</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">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<h5 class="card-header">Custom Solid</h5>
<div class="card-body">
<p class="f-w-400 font-size-16 ">Checkboxes</p>
<div class="custom-control custom-checkbox form-check">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox form-check">
<input type="checkbox" class="custom-control-input" id="customCheck2" checked>
<label class="custom-control-label" for="customCheck2">Custom checkbox checked</label>
</div>
<div class="custom-control custom-checkbox form-check">
<input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
<label class="custom-control-label" for="customCheck3">Disabled checkbox</label>
</div>
<div class="custom-control custom-checkbox form-check">
<input type="checkbox" class="custom-control-input" id="customCheck4" disabled checked>
<label class="custom-control-label" for="customCheck4">Disabled checkbox</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Inline Checkboxes</p>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="customcheckboxInline1" name="customcheckboxInline1" class="custom-control-input">
<label class="custom-control-label" for="customcheckboxInline1">1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="customcheckboxInline2" name="customcheckboxInline1" class="custom-control-input">
<label class="custom-control-label" for="customcheckboxInline2">2</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="customcheckboxInline3" name="customcheckboxInline3" class="custom-control-input" disabled>
<label class="custom-control-label" for="customcheckboxInline3">3 (disabled)</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Radio buttons</p>
<div class="custom-control custom-radio form-check">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio form-check">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>
<label class="custom-control-label" for="customRadio2">Custom radio checked</label>
</div>
<div class="custom-control custom-radio form-check">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadio3">Custom radio disabled</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Inline Radios</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">2</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline3" name="customRadioInline3" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioInline3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<h5 class="card-header">Custom Solid States</h5>
<div class="card-body">
<p class="f-w-400 font-size-16 ">Checkboxes</p>
<div class="custom-control custom-checkbox checkbox-primary form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck1" checked>
<label class="custom-control-label" for="stateCheck1">Checkbox Primary</label>
</div>
<div class="custom-control custom-checkbox checkbox-secondary form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck2" checked>
<label class="custom-control-label" for="stateCheck2">Checkbox Secondary</label>
</div>
<div class="custom-control custom-checkbox checkbox-accent form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck3" checked>
<label class="custom-control-label" for="stateCheck3">Checkbox Accent</label>
</div>
<div class="custom-control custom-checkbox checkbox-success form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck4" checked>
<label class="custom-control-label" for="stateCheck4">Checkbox Success</label>
</div>
<div class="custom-control custom-checkbox checkbox-info form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck5" checked>
<label class="custom-control-label" for="stateCheck5">Checkbox Info</label>
</div>
<div class="custom-control custom-checkbox checkbox-warning form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck6" checked>
<label class="custom-control-label" for="stateCheck6">Checkbox warning</label>
</div>
<div class="custom-control custom-checkbox checkbox-danger form-check">
<input type="checkbox" class="custom-control-input" id="stateCheck7" checked>
<label class="custom-control-label" for="stateCheck7">Checkbox Danger</label>
</div>
<p class="f-w-400 font-size-16 m-t-20">Radio buttons</p>
<div class="custom-control custom-radio radio-primary form-check">
<input type="radio" id="stateRadio1" name="stateRadio1" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio1">Radio Primary</label>
</div>
<div class="custom-control custom-radio radio-secondary form-check">
<input type="radio" id="stateRadio2" name="stateRadio2" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio2">Radio Secondary</label>
</div>
<div class="custom-control custom-radio radio-accent form-check">
<input type="radio" id="stateRadio3" name="stateRadio3" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio3">Radio Accent</label>
</div>
<div class="custom-control custom-radio radio-success form-check">
<input type="radio" id="stateRadio4" name="stateRadio4" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio4">Radio Success</label>
</div>
<div class="custom-control custom-radio radio-info form-check">
<input type="radio" id="stateRadio5" name="stateRadio5" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio5">Radio Info</label>
</div>
<div class="custom-control custom-radio radio-warning form-check">
<input type="radio" id="stateRadio6" name="stateRadio6" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio6">Radio Warning</label>
</div>
<div class="custom-control custom-radio radio-danger form-check">
<input type="radio" id="stateRadio7" name="stateRadio7" class="custom-control-input" checked>
<label class="custom-control-label" for="stateRadio7">Radio Danger</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<h5 class="card-header">Custom Outline States</h5>
<div class="card-body">
<p class="f-w-400 font-size-16 ">Checkboxes</p>
<label class="control control-outline control-primary control--checkbox">Primary Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-secondary control--checkbox">Secondary Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-accent control--checkbox">Accent Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-success control--checkbox">Success Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-info control--checkbox">Info Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-warning control--checkbox">Warning Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-danger control--checkbox">Danger Checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<p class="f-w-400 font-size-16 m-t-20">Radio buttons</p>
<label class="control control-outline control-primary control--radio">Primary Radio
<input type="radio" name="stateRadio8" id="stateRadio8" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-secondary control--radio">Secondary Radio
<input type="radio" name="stateRadio9" id="stateRadio9" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-accent control--radio">Accent Radio
<input type="radio" name="stateRadio10" id="stateRadio10" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-success control--radio">Success Radio
<input type="radio" name="stateRadio11" id="stateRadio11" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-info control--radio">Info Radio
<input type="radio" name="stateRadio12" id="stateRadio12" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-warning control--radio">Warning Radio
<input type="radio" name="stateRadio13" id="stateRadio13" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control-outline control-danger control--radio">Danger Radio
<input type="radio" name="stateRadio14" id="stateRadio14" checked="checked">
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- SIDEBAR QUICK PANNEL WRAPPER -->
<aside class="sidebar sidebar-right">
<div class="sidebar-content">
<div class="tab-panel m-b-30" id="sidebar-tabs">
<ul class="nav nav-tabs primary-tabs">
<li class="nav-item" role="presentation"><a href="#sidebar-settings" class="nav-link active show" data-toggle="tab" aria-expanded="true">Settings</a></li>
<li class="nav-item" role="presentation"><a href="#sidebar-contact" class="nav-link" data-toggle="tab" aria-expanded="true">Contacts</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fadeIn active" id="sidebar-settings">
<div class="sidebar-settings-wrapper">
<h5 class="m-t-30 m-b-20">Colors with dark sidebar</h5>
<div class="row m-0">
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-a.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-a.css">
<input type="radio" name="setting-theme" checked="checked">
<span class="icon-check dark"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-a"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-b.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-b.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-b"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-c.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-c.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-c"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-d.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-d.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-d"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-e.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-e.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-e"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-f.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-f.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-f"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-g.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-g.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-g"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-h.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-h.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-h"></span>
</span>
</label>
</div>
</div>
</div>
<h5 class="m-t-30 m-b-20">Colors with light sidebar</h5>
<div class="row m-0">
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-i.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-i.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-menu-dark"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-j.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-j.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-j"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-k.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-k.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-k"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-l.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-l.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-l"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-m.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-m.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-m"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-n.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-n.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-n"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-o.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-o.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-o"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-p.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-p.css">
<input type="radio" name="setting-theme" />
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-p"></span>
</span>
</label>
</div>
</div>
</div>
</div>
<div>
<h5 class="m-t-30 m-b-20">Layouts</h5>
<ul class="list-reset">
<li>
<div class="custom-control custom-radio radio-primary form-check">
<input type="radio" id="layoutStatic" name="layoutMode" class="custom-control-input" checked="checked" value="">
<label class="custom-control-label" for="layoutStatic">Static Layout</label>
</div>
</li>
<li>
<div class="custom-control custom-radio radio-primary form-check">
<input type="radio" id="layoutFixed" name="layoutMode" class="custom-control-input" value="layout-fixed">
<label class="custom-control-label" for="layoutFixed">Fixed Layout</label>
</div>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="sidebar-contact">
<!--START SEARCH WRAPPER -->
<div class="search-wrapper m-b-30">
<button type="submit" class="search-button-submit"><i class="icon dripicons-search site-search-icon"></i></button>
<input type="text" class="form-control search-input no-focus-border" placeholder="Search contacts...">
<a href="javascript:void(0)" class="close-search-button" data-q-action="close-site-search">
<i class="icon dripicons-cross site-search-close-icon"></i>
</a>
</div>
<!--END START SEARCH WRAPPER -->
<!--START RIGHT SIDEBAR CONTACT LIST -->
<div class="qt-scroll" data-scroll="minimal-dark">
<div class="list-view-group-header">a</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/01.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Abby Pugh</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/06.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Allison Selleck</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">b</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/07.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Bently Hinton</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/11.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Brad Friedman </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/02.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Boston Nather</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/16.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Brayan Bunnell</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">c</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/08.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Carter Titchen</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/13.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Carla Fraser </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">d</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/03.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">David Petrie</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
</ul>
<div class="list-view-group-header">e</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/12.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Ellie Sweetser</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/09.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Eric Eskridge</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
<div class="list-view-group-header">f</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/04.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Farrah Yulikova</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/05.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Florence Buren</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/14.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Francesca Koehn </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">g</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/10.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Glynn Slade</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
<div class="list-view-group-header">h</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/14.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Haley Molaroni </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">i</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/07.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Isaac Seldin</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/13.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Ivy Dancelli</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">j</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/18.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Jax Scharf</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/17.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Jen Pritsinas </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">m</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/20.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Marco Heginbotham</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/21.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Marisa Gelber </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">p</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/22.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Penny Withka</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/23.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Pixie Clayborne </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">s</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/25.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Sheldon Luntz</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/26.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Sam Kendall </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">z</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/27.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Zack Mohanram</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
</div>
<!--END RIGHT SIDEBAR CONTACT LIST -->
</div>
</div>
</div>
</div>
</aside>
<!-- END SIDEBAR QUICK PANNEL WRAPPER -->
</div>
</div>
<!-- END CONTENT WRAPPER -->
<!-- ================== GLOBAL VENDOR SCRIPTS ==================-->
<script src="../assets/vendor/modernizr/modernizr.custom.js"></script>
<script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/js-storage/js.storage.js"></script>
<script src="../assets/vendor/js-cookie/src/js.cookie.js"></script>
<script src="../assets/vendor/pace/pace.js"></script>
<script src="../assets/vendor/metismenu/dist/metisMenu.js"></script>
<script src="../assets/vendor/switchery-npm/index.js"></script>
<script src="../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- ================== GLOBAL APP SCRIPTS ==================-->
<script src="../assets/js/global/app.js"></script>
</body>
</html>