@extends('dashboard.base')

@section('content')

<div class="container-fluid">
            <div class="fade-in">
              <div class="row">
                <div class="col-md-12">
                  <div class="card">
                    <div class="card-header">3d Switch</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-3d c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked="" disabled><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-3d c-switch-primary">
                        <input class="c-switch-input" type="checkbox" disabled><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch default</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch default - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-pill c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch outline</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch outline - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-pill c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch outline alternative</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch outline alternative - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-pill c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                      <label class="c-switch c-switch-pill c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text outline</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text outline - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text outline alternative</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with text outline alternative - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon outline</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon outline - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-success">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-info">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon outline alternative</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-header">Switch with icon outline alternative - pills</div>
                    <div class="card-body">
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-success-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-info-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                      <label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger-alt">
                        <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider" data-checked="&#x2713" data-unchecked="&#x2715"></span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-md-12">
                  <div class="card">
                    <div class="card-header">Sizes</div>
                    <div class="card-body p-0">
                      <table class="table table-hover table-striped table-align-middle mb-0">
                        <thead>
                          <tr>
                            <th>Size</th>
                            <th>Example</th>
                            <th>CSS Class</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>Large</td>
                            <td>
                              <label class="c-switch c-switch-lg c-switch-3d c-switch-primary">
                                <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                              </label>
                            </td>
                            <td>Add following class<code>.c-switch-lg</code></td>
                          </tr>
                          <tr>
                            <td>Normal</td>
                            <td>
                              <label class="c-switch c-switch-3d c-switch-primary">
                                <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                              </label>
                            </td>
                            <td>-</td>
                          </tr>
                          <tr>
                            <td>Small</td>
                            <td>
                              <label class="c-switch c-switch-sm c-switch-3d c-switch-primary">
                                <input class="c-switch-input" type="checkbox" checked=""><span class="c-switch-slider"></span>
                              </label>
                            </td>
                            <td>Add following class<code>.c-switch-sm</code></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
              </div>
              <!-- /.row-->
            </div>
          </div>

@endsection

@section('javascript')

@endsection