Default page

Edit File: base-toast.html

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />

<link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

<link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />

<title>Toast | Expodash - Admin & Dashboard Template</title>

<link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">

<link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">

<link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">

<script src="./../assets/js/color-modes.min.js"></script>

</head>

<body>
    
    
    
    <div class="main-wrapper">
      
      
      
      <aside
        class="edash-menu position-fixed z-1030 start-0 top-0 end-0 bottom-0 bg-body-tertiary border-end"
        id="edash-menu"
      >
        
        <div
          class="edash-menu-header ht-80 d-flex align-items-center px-5 py-4 position-relative"
        >
          <a href="index.html" class="edash-logo">
            <img
              src="./../assets/images/logo-main.png"
              alt="logo"
              class="img-fluid edash-logo-main"
            />
            <img
              src="./../assets/images/logo-abbr.png"
              alt="logo"
              class="img-fluid edash-logo-abbr"
            />
          </a>
        </div>
        
        
        <nav
          class="edash-sidebar-nav position-relative z-2"
          id="edash-sidebar-nav"
          style="height: calc(100vh - 5rem)"
        >
          <ul class="edash-metismenu" id="edash-metismenu">
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Navigations
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-airplay"></i>
                <span class="mm-text">Dashboards</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="index.html">eCommerce</a></li>
                <li>
                  <a class="sub-menu" href="./index-analytics.html">Analytics</a>
                </li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Webapps
            </li>
            <li>
              <a href="./app-chat.html">
                <i class="fi fi-rr-comment-alt-dots"></i>
                <span class="mm-text">Chat</span>
              </a>
            </li>
            <li>
              <a href="./app-email.html">
                <i class="fi fi-rr-envelope-dot"></i>
                <span class="mm-text">Email</span>
              </a>
            </li>
            <li>
              <a href="./app-invoice.html">
                <i class="fi fi-rr-file-invoice"></i>
                <span class="mm-text">Invoice</span>
              </a>
            </li>
            <li>
              <a href="./app-kanban.html">
                <i class="fi fi-rr-square-kanban"></i>
                <span class="mm-text">Kanban</span>
              </a>
            </li>
            <li>
              <a href="./app-calendar.html">
                <i class="fi fi-rr-calendar"></i>
                <span class="mm-text">Calendar</span>
              </a>
            </li>
            <li>
              <a href="./app-file-manager.html">
                <i class="fi fi-rr-move-to-folder"></i>
                <span class="mm-text">File Manager</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Components
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-layers"></i>
                <span class="mm-text">Base</span>
              </a>
              <ul>
                <li>
                  <a href="./base-accordion.html" class="sub-menu">Accordion</a>
                </li>
                <li><a href="./base-avatar.html" class="sub-menu">Avatar</a></li>
                <li><a href="./base-button.html" class="sub-menu">Button</a></li>
                <li><a href="./base-card.html" class="sub-menu">Card</a></li>
                <li><a href="./base-carousel.html" class="sub-menu">Carousel</a></li>
                <li><a href="./base-dropdown.html" class="sub-menu">Dropdown</a></li>
                <li><a href="./base-modal.html" class="sub-menu">Modal</a></li>
                <li><a href="./base-navtab.html" class="sub-menu">NavTab</a></li>
                <li><a href="./base-toast.html" class="sub-menu">Toast</a></li>
                <li>
                  <a href="./base-miscellaneous.html" class="sub-menu"
                    >Miscellaneous</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-heart"></i>
                <span class="mm-text">Icons</span>
              </a>
              <ul>
                <li><a href="./icon-feather.html" class="sub-menu">Feather</a></li>
                <li><a href="./icon-flaticon.html" class="sub-menu">Flaticon</a></li>
                <li>
                  <a href="./icon-bootstrap.html" class="sub-menu">Bootstrap</a>
                </li>
                <li>
                  <a href="./icon-fontawesome.html" class="sub-menu">Fontawesome</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-list"></i>
                <span class="mm-text">Tables</span>
              </a>
              <ul>
                <li><a href="./table-default.html" class="sub-menu">Default</a></li>
                <li><a href="./table-bstable.html" class="sub-menu">bsTable</a></li>
                <li><a href="./table-footable.html" class="sub-menu">fooTable</a></li>
                <li>
                  <a href="./table-datatable.html" class="sub-menu">dataTable</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-chart-histogram"></i>
                <span class="mm-text">Charts</span>
              </a>
              <ul>
                <li><a href="./chart-apex.html" class="sub-menu">Apex</a></li>
                <li><a href="./chart-float.html" class="sub-menu">Float</a></li>
                <li><a href="./chart-chartjs.html" class="sub-menu">ChartJS</a></li>
                <li><a href="./chart-peity.html" class="sub-menu">Peity</a></li>
                <li><a href="./chart-progress.html" class="sub-menu">Progress</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-layout"></i>
                <span class="mm-text">Forms</span>
              </a>
              <ul>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);"
                    >Advanced</a
                  >
                  <ul>
                    <li>
                      <a href="./form-adv-radio.html" class="sub-menu">Radios</a>
                    </li>
                    <li>
                      <a href="./form-adv-switch.html" class="sub-menu">Switchs</a>
                    </li>
                    <li>
                      <a href="./form-adv-check.html" class="sub-menu">Checkbox</a>
                    </li>
                  </ul>
                </li>
                <li><a href="./form-elements.html" class="sub-menu">Elements</a></li>
                <li>
                  <a href="./form-validation.html" class="sub-menu">Validation</a>
                </li>
                <li>
                  <a href="./form-touchspin.html" class="sub-menu">TouchSpin</a>
                </li>
                <li>
                  <a href="./form-inputmask.html" class="sub-menu">InputMask</a>
                </li>
                <li><a href="./form-repeater.html" class="sub-menu">Repeater</a></li>
                <li>
                  <a href="./form-nouislider.html" class="sub-menu">noUiSlider</a>
                </li>
                <li>
                  <a href="./form-maxlength.html" class="sub-menu">Maxlength</a>
                </li>
                <li>
                  <a href="./form-clipboard.html" class="sub-menu">Clipboard</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-list-dropdown"></i>
                <span class="mm-text">Selects</span>
              </a>
              <ul>
                <li><a href="./select-select2.html" class="sub-menu">Select2</a></li>
                <li>
                  <a href="./select-selectize.html" class="sub-menu">Selectize</a>
                </li>
                <li><a href="./select-tagify.html" class="sub-menu">Tagify</a></li>
                <li><a href="./select-choices.html" class="sub-menu">Choices</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-object-group"></i>
                <span class="mm-text">Editors</span>
              </a>
              <ul>
                <li><a href="./editor-quill.html" class="sub-menu">Quill</a></li>
                <li><a href="./editor-tinymce.html" class="sub-menu">TinyMCE</a></li>
                <li>
                  <a href="./editor-summernote.html" class="sub-menu">Summernote</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-eye-dropper"></i>
                <span class="mm-text">Pickers</span>
              </a>
              <ul>
                <li>
                  <a href="./picker-flatpickr.html" class="sub-menu">Flatpickr</a>
                </li>
                <li>
                  <a href="./picker-selectpicker.html" class="sub-menu"
                    >SelectPicker</a
                  >
                </li>
                <li>
                  <a href="./picker-timepicker.html" class="sub-menu">TimePicker</a>
                </li>
                <li>
                  <a href="./picker-bsdatepicker.html" class="sub-menu"
                    >BsDatePicker</a
                  >
                </li>
                <li>
                  <a href="./picker-daterangepicker.html" class="sub-menu"
                    >DaterangePicker</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-marker"></i>
                <span class="mm-text">Maps</span>
              </a>
              <ul>
                <li><a href="./map-gmaps.html" class="sub-menu">Google Maps</a></li>
                <li><a href="./map-vector.html" class="sub-menu">Vector Maps</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-apps-add"></i>
                <span class="mm-text">Extended</span>
              </a>
              <ul>
                <li>
                  <a href="./extended-sweetalert2.html" class="sub-menu"
                    >SweetAlert2</a
                  >
                </li>
                <li>
                  <a href="./extended-gLightbox.html" class="sub-menu">GLightbox</a>
                </li>
                <li>
                  <a href="./extended-owlcarousel.html" class="sub-menu"
                    >owlCarousel</a
                  >
                </li>
                <li><a href="./extended-swiper.html" class="sub-menu">Swiper</a></li>
                <li><a href="./extended-jstree.html" class="sub-menu">jsTree</a></li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Pages
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-circle-user"></i>
                <span class="mm-text">Account</span>
              </a>
              <ul>
                <li>
                  <a href="./account-overview.html" class="sub-menu">Overview</a>
                </li>
                <li>
                  <a href="./account-activity.html" class="sub-menu">Activity</a>
                </li>
                <li><a href="./account-contact.html" class="sub-menu">Contact</a></li>
                <li><a href="./account-project.html" class="sub-menu">Project</a></li>
                <li><a href="./account-billing.html" class="sub-menu">Billing</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-user-gear"></i>
                <span class="mm-text">Settings</span>
              </a>
              <ul>
                <li>
                  <a href="./settings-account.html" class="sub-menu">Account</a>
                </li>
                <li>
                  <a href="./settings-security.html" class="sub-menu">Security</a>
                </li>
                <li>
                  <a href="./settings-billing.html" class="sub-menu"
                    >Billing & Plans</a
                  >
                </li>
                <li>
                  <a href="./settings-notification.html" class="sub-menu"
                    >Notification</a
                  >
                </li>
                <li>
                  <a href="./settings-integration.html" class="sub-menu"
                    >Integration</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-browser"></i>
                <span class="mm-text">General</span>
              </a>
              <ul>
                <li><a href="./general-starter.html" class="sub-menu">Starter</a></li>
                <li><a href="./general-pricing.html" class="sub-menu">Pricing</a></li>
                <li>
                  <a href="./general-helpdesk.html" class="sub-menu">Helpdesk</a>
                </li>
                <li>
                  <a href="general-maintenance.html" class="sub-menu">Maintenance</a>
                </li>
                <li>
                  <a href="general-commingsoon.html" class="sub-menu">Comming Soon</a>
                </li>
                <li>
                  <a href="./general-privacy.html" class="sub-menu"
                    >Privacy & Policy</a
                  >
                </li>
                <li>
                  <a href="./general-terms.html" class="sub-menu"
                    >Terms of Services</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-lock"></i>
                <span class="mm-text">Authentication</span>
              </a>
              <ul>
                <li><a href="./auth-login.html" class="sub-menu">Login</a></li>
                <li><a href="./auth-register.html" class="sub-menu">Register</a></li>
                <li><a href="./auth-reset.html" class="sub-menu">Resetting</a></li>
                <li><a href="./auth-recover.html" class="sub-menu">Recovery</a></li>
                <li>
                  <a href="./auth-otp.html" class="sub-menu">Two-factor (OTP)</a>
                </li>
                <li>
                  <a href="./auth-lockscreen.html" class="sub-menu">Lock Screen</a>
                </li>
                <li><a href="auth-404.html" class="sub-menu">Error-404</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-settings-sliders"></i>
                <span class="mm-text">Menu Level</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="javascript:void(0);">Level-1</a></li>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);">Level-1</a>
                  <ul>
                    <li>
                      <a class="sub-menu" href="javascript:void(0);">Level-2</a>
                    </li>
                    <li>
                      <a class="sub-menu has-arrow" href="javascript:void(0);"
                        >Level-2</a
                      >
                      <ul>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="disabled">
              <a href="javascript:void(0);">
                <i class="fi fi-rr-ban"></i>
                <span class="mm-text">Disabled</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Supports
            </li>
            <li>
              <a href="mailto:wrapcoders@gmail.com">
                <i class="fi fi-rr-life-ring"></i>
                <span class="mm-text">Supports</span>
              </a>
            </li>
            <li>
              <a href="./../../docs/documentation.html" target="_blank">
                <i class="fi fi-rr-book-alt"></i>
                <span class="mm-text">Documentation</span>
              </a>
            </li>
          </ul>
          <div class="card text-center mx-3 mt-6 mb-4 bg-primary-subtle">
            <div class="card-body vstack gap-4">
              <i
                class="fi fi-rr-rocket-lunch fs-1 text-primary"
                style="transform: rotate(320deg)"
              ></i>
              <div>
                <h5 class="mb-2 text-primary">Help Center</h5>
                <p class="fs-13 fw-light mb-0 text-primary">
                  Expodash is a production ready multi dashboard to get started up and
                  running easily.
                </p>
              </div>
              <a
                href="mailto:wrapcoders@gmail.com"
                class="btn btn-primary text-white w-100"
                >Get Support</a
              >
            </div>
          </div>
        </nav>
        
      </aside>

<main id="edash-main">
        
        
        
        <header
          class="edash-header sticky-top d-flex align-items-end ht-80"
          id="edash-header-sticky"
        >
          <div
            class="edash-header-container container-xxl w-100 ht-70 px-4 bg-body-tertiary border rounded-3 d-flex align-items-center justify-content-between position-relative"
            id="edash-header-container"
          >
            
            <div class="edash-header-left d-flex align-items-center gap-2">
              
              <div class="edash-minimenu-toggle d-none d-xl-flex">
                <div id="edash-menu-mini">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-sr-menu-burger"></i>
                  </a>
                </div>
                <div id="edash-menu-expand" style="display: none">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-rr-arrow-right"></i>
                  </a>
                </div>
              </div>
              
              
              <div class="edash-menu-toggle d-xl-none">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  id="edash-menu-show"
                >
                  <i class="fi fi-sr-menu-burger"></i>
                </a>
              </div>
              
              
              <div class="edash-search-wrapper">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40 ms-1"
                  id="edash-search-show"
                >
                  <i class="fi fi-rr-search"></i>
                </a>
                <form
                  action="#"
                  class="edash-search position-absolute start-0 top-0 end-0 bottom-0 w-100 z-1090"
                >
                  <div
                    class="input-group ps-3 ps-md-4 pe-md-2 bg-body-tertiary rounded-3"
                    style="height: calc(5rem - 0.75rem)"
                  >
                    <span class="input-group-text border-0">
                      <i class="fi fi-rr-search"></i>
                    </span>
                    <input
                      type="text"
                      class="form-control border-0 fw-medium text-muted"
                      placeholder="Search...."
                    />
                    <span class="input-group-text border-0" id="edash-search-hide">
                      <button type="button" class="btn-close"></button>
                    </span>
                  </div>
                </form>
              </div>
              
            </div>
            
            
            <div class="edash-header-right d-flex align-items-center gap-1 gap-sm-2">
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <img
                    src="./../assets/images/flags/1x1/us.svg"
                    class="img-fluid rounded-circle wd-20 ht-20"
                    alt=""
                  />
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/us.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (US)</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/fr.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Français</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/ru.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Russian</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/de.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Deutsch</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/bd.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Bangeli</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/gb.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (UK)</span>
                    </a>
                  </li>
                </ul>
              </div>
              
              
              <div class="dropdown">
                <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
                  <symbol id="sun-fill" viewBox="0 0 24 24">
                    <path
                      d="M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5Zm0-8c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3Zm1-5V1c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1Zm0,19v-3c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1ZM5,12c0-.55-.45-1-1-1H1c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1Zm19,0c0-.55-.45-1-1-1h-3c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1ZM6.71,6.71c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm14,14c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm-16,0l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29ZM18.71,6.71l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Z"
                    ></path>
                  </symbol>
                  <symbol id="moon-stars-fill" viewBox="0 0 24 24">
                    <path
                      d="M15,24a12.021,12.021,0,0,1-8.914-3.966,11.9,11.9,0,0,1-3.02-9.309A12.122,12.122,0,0,1,13.085.152a13.061,13.061,0,0,1,5.031.205,2.5,2.5,0,0,1,1.108,4.226c-4.56,4.166-4.164,10.644.807,14.41a2.5,2.5,0,0,1-.7,4.32A13.894,13.894,0,0,1,15,24Zm.076-22a10.793,10.793,0,0,0-1.677.127,10.093,10.093,0,0,0-8.344,8.8A9.927,9.927,0,0,0,7.572,18.7,10.476,10.476,0,0,0,18.664,21.43a.5.5,0,0,0,.139-.857c-5.929-4.478-6.4-12.486-.948-17.449a.459.459,0,0,0,.128-.466.49.49,0,0,0-.356-.361A10.657,10.657,0,0,0,15.076,2Z"
                    ></path>
                  </symbol>
                  <symbol id="circle-half" viewBox="0 0 24 24">
                    <path
                      d="M12,0C5.38,0,0,5.38,0,12s5.38,12,12,12,12-5.38,12-12S18.62,0,12,0Zm0,22V2c5.51,0,10,4.49,10,10s-4.49,10-10,10Z"
                    ></path>
                  </symbol>
                </svg>
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  id="bd-theme"
                  aria-expanded="false"
                  data-bs-toggle="dropdown"
                  aria-label="Toggle theme (dark)"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <svg class="theme-icon-active wd-20 ht-20" fill="currentColor">
                    <use href="#moon-stars-fill"></use>
                  </svg>
                </a>
                <ul class="dropdown-menu dropdown-menu-end min-wd-200">
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="light"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#sun-fill"></use>
                      </svg>
                      <span class="ms-3">Light</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="dark"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#moon-stars-fill"></use>
                      </svg>
                      <span class="ms-3">Dark</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="auto"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#circle-half"></use>
                      </svg>
                      <span class="ms-3">Auto</span>
                    </a>
                  </li>
                </ul>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-bell"></i>
                  <div
                    class="position-absolute top-10 start-50 translate-middle wd-6 ht-6 bg-danger rounded-circle"
                    data-bs-toggle="tooltip"
                    data-bs-trigger="hover"
                    title="12+ Unread Notification"
                  ></div>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white px-4 py-4">
                    <h5 class="fw-semibold text-white mb-1">
                      <span>Notifications</span>
                      <span class="badge bg-warning ms-1 rounded-pill">12+</span>
                    </h5>
                    <p class="fs-13 mb-0">You have 12+ unread notification</p>
                  </div>
                  <div
                    class="list-group list-group-flush ht-300 position-relative init-perfect-scroll-bar"
                  >
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-danger-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-megaphone text-danger"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          Congratulate
                          <span class="fw-semibold text-dark">Socrates Itumay</span> for
                          work anniversaries
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 15 12:32pm</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-edit text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Althea Cabardo</span> just
                          created a new blog post
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-info-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-comment-alt-dots text-info"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Adrian Monino</span> added
                          new comment on your photo
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-success-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-badge-check text-success"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Kenneth Hune</span>
                          accepted your request
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex border-bottom-0"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-file-medical-alt text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          December monthly financial <strong>report</strong> is
                          generated
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                  </div>
                  <div
                    class="px-4 py-3 border-top d-flex justify-content-between align-items-center"
                  >
                    <a href="javascript:void(0);">Make as Read</a>
                    <a href="javascript:void(0);" class="icon-link icon-link-hover">
                      <span>View Alls</span>
                      <i class="fi fi-rr-arrow-small-right bi"></i>
                    </a>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-interrogation"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white text-center px-6 py-12">
                    <h4 class="fw-semibold text-white mb-2">Help Center</h4>
                    <p class="fs-13">
                      This greeting is courteous and professional, setting a positive
                      tone for your ticket.
                    </p>
                    <a href="javascript:void(0);" class="btn btn-sm btn-warning"
                      >Get Support</a
                    >
                  </div>
                  <div class="row g-2 p-3">
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Introduction</a
                      >
                      <a href="javascript:void(0);" class="dropdown-item">Orders</a>
                      <a href="javascript:void(0);" class="dropdown-item">Products</a>
                      <a href="javascript:void(0);" class="dropdown-item">Customers</a>
                      <a href="javascript:void(0);" class="dropdown-item">Suppliers</a>
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Customization</a
                      >
                    </div>
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item">Partners</a>
                      <a href="javascript:void(0);" class="dropdown-item">Members</a>
                      <a href="javascript:void(0);" class="dropdown-item">Components</a>
                      <a href="javascript:void(0);" class="dropdown-item">Projects</a>
                      <a href="javascript:void(0);" class="dropdown-item">Records</a>
                      <a href="javascript:void(0);" class="dropdown-item">Support</a>
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-apps-add"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-lg">
                  <div class="row text-center align-items-center gx-0 gy-0">
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gmail.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gmail
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/dropbox.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Dropbox
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/google-drive.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gdrive
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/figma.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Figma
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/github.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Github
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gitlab.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gitlab
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/instagram.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Instagram
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/pinterest.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Pinterest
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/facebook.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Facebook
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/shopify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Shopify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/spotify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Spotify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/whatsapp.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Whatsapp
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <div class="avatar avatar-md rounded-circle">
                    <img
                      src="./../assets/images/avatar/1.png"
                      alt="Avatar"
                      class="img-fluid rounded-circle"
                    />
                    <div class="avatar-indicator active"></div>
                  </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-md p-0">
                  <div class="px-4 py-3 d-flex border-bottom">
                    <div class="avatar avatar-md flex-shrink-0">
                      <img
                        src="./../assets/images/avatar/1.png"
                        alt="Avatar"
                        class="img-fluid rounded"
                      />
                    </div>
                    <div class="flex-grow-1 ms-3">
                      <h6 class="text-dark mb-1">Alexandra Della</h6>
                      <span class="fs-13 text-muted">Premium Member</span>
                    </div>
                  </div>
                  <div class="px-2 py-3">
                    <a href="./account-overview.html" class="dropdown-item">
                      <i class="fi fi-rs-user"></i>
                      <span class="ms-3">Profile</span>
                    </a>
                    <a href="./account-activity.html" class="dropdown-item">
                      <i class="fi fi-rr-pulse"></i>
                      <span class="ms-3">Activity</span>
                    </a>
                    <a href="./account-project.html" class="dropdown-item">
                      <i class="fi fi-rr-file-invoice-dollar"></i>
                      <span class="ms-3">Projects</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./general-pricing.html" class="dropdown-item">
                      <i class="fi fi-rr-usd-circle"></i>
                      <span class="ms-3">Pricing</span>
                    </a>
                    <a href="./settings-account.html" class="dropdown-item">
                      <i class="fi fi-rr-settings"></i>
                      <span class="ms-3">Settings</span>
                    </a>
                    <a href="./general-helpdesk.html" class="dropdown-item">
                      <i class="fi fi-rr-seal-question"></i>
                      <span class="ms-3">Helpdesk</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./auth-login.html" class="dropdown-item text-danger">
                      <i class="fi fi-rr-exit"></i>
                      <span class="ms-3">Logout</span>
                    </a>
                  </div>
                </div>
              </div>
              
            </div>
            
          </div>
        </header>

<div
          class="edash-page-container container-xxl"
          id="edash-page-container"
        >
          
          <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">
            <div class="col-12">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h2 class="h4 fw-semibold text-dark">Toast</h2>
                  <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Components</a>
                      </li>
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Base UI</a>
                      </li>
                      <li class="breadcrumb-item active" aria-current="page">
                        Toast
                      </li>
                    </ol>
                  </nav>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <a
                    href="https://getbootstrap.com/docs/5.3/components/toasts/"
                    class="btn btn-md btn-primary"
                    target="_blank"
                    >Official Docs</a
                  >
                </div>
              </div>
            </div>
          </div>
          
          
          <div class="edash-content-section row g-3 g-md-4">
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Basic</h4>
                </div>
                <div class="card-body">
                  <div
                    class="toast fade show"
                    role="alert"
                    aria-live="assertive"
                    aria-atomic="true"
                  >
                    <div class="toast-header">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                        x="0"
                        y="0"
                        viewBox="0 0 512 512"
                        style="enable-background: new 0 0 512 512"
                        xml:space="preserve"
                        class=""
                      >
                        <g>
                          <path
                            d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                            fill="#ff7058"
                            data-original="#ff7058"
                            class=""
                          ></path>
                          <path
                            d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                            fill="#ff7058"
                            data-original="#ff7058"
                            class=""
                          ></path>
                          <path
                            d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                            fill="#ff7058"
                            data-original="#ff7058"
                            class=""
                          ></path>
                          <path
                            d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                            fill="#f8b64c"
                            data-original="#f8b64c"
                          ></path>
                          <path
                            d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                            fill="#ff7058"
                            data-original="#ff7058"
                            class=""
                          ></path>
                          <path
                            d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                            style="opacity: 0.1; enable-background: new"
                            fill="#231f20"
                            data-original="#231f20"
                          ></path>
                          <path
                            d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                            fill="#ffd15c"
                            data-original="#ffd15c"
                            class=""
                          ></path>
                          <path
                            d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                            fill="#f8b64c"
                            data-original="#f8b64c"
                          ></path>
                        </g>
                      </svg>
                      <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                      <small>11 mins ago</small>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="toast"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="toast-body">
                      Hello, world! This is a toast message.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Live</h4>
                </div>
                <div class="card-body">
                  <button
                    type="button"
                    class="btn btn-primary"
                    id="liveToastBtn"
                  >
                    Show live toast
                  </button>
                  <div class="toast-container position-fixed top-0 end-0 p-3">
                    <div
                      id="liveToast"
                      class="toast"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small>11 mins ago</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">
                        Hello, world! This is a toast message.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Stacking</h4>
                </div>
                <div class="card-body">
                  
                  <div class="toast-container position-static">
                    <div
                      class="toast fade show"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small class="text-body-secondary">2 seconds ago</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">
                        Heads up, toasts will stack automatically
                      </div>
                    </div>
                    <div
                      class="toast fade show"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small class="text-body-secondary">just now</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">See? Just like this.</div>
                    </div>
                    <div
                      class="toast fade show"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small class="text-body-secondary">2 seconds ago</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">
                        Heads up, toasts will stack automatically
                      </div>
                    </div>
                    <div
                      class="toast fade show"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small class="text-body-secondary">just now</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">See? Just like this.</div>
                    </div>
                    <div
                      class="toast fade show"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small class="text-body-secondary">2 seconds ago</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">
                        Heads up, toasts will stack automatically
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">liveStacking</h4>
                </div>
                <div class="card-body">
                  <button
                    type="button"
                    class="btn btn-primary"
                    id="liveStackingButton"
                  >
                    liveStacking Toast
                  </button>
                  <div
                    id="liveStackingContainer"
                    class="toast-container position-fixed top-0 end-0 p-3 z-index-3"
                  >
                    <div
                      class="toast"
                      role="alert"
                      aria-live="assertive"
                      aria-atomic="true"
                      data-toast-livestack="stack"
                    >
                      <div class="toast-header">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          version="1.1"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                          x="0"
                          y="0"
                          viewBox="0 0 512 512"
                          style="enable-background: new 0 0 512 512"
                          xml:space="preserve"
                          class=""
                        >
                          <g>
                            <path
                              d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              fill="#ff7058"
                              data-original="#ff7058"
                              class=""
                            ></path>
                            <path
                              d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                              style="opacity: 0.1; enable-background: new"
                              fill="#231f20"
                              data-original="#231f20"
                            ></path>
                            <path
                              d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                              fill="#ffd15c"
                              data-original="#ffd15c"
                              class=""
                            ></path>
                            <path
                              d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                              fill="#f8b64c"
                              data-original="#f8b64c"
                            ></path>
                          </g>
                        </svg>
                        <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                        <small>11 mins ago</small>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="toast"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="toast-body">
                        Hello, world! This is a toast message.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Custom</h4>
                </div>
                <div class="card-body">
                  <div class="row g-4">
                    <div class="col-lg-4">
                      <div
                        class="toast fade w-100 show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="toast-header">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            version="1.1"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                            x="0"
                            y="0"
                            viewBox="0 0 512 512"
                            style="enable-background: new 0 0 512 512"
                            xml:space="preserve"
                            class=""
                          >
                            <g>
                              <path
                                d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                style="opacity: 0.1; enable-background: new"
                                fill="#231f20"
                                data-original="#231f20"
                              ></path>
                              <path
                                d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                fill="#ffd15c"
                                data-original="#ffd15c"
                                class=""
                              ></path>
                              <path
                                d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                            </g>
                          </svg>
                          <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                          <small class="text-body-secondary"
                            >5 minutes ago</small
                          >
                        </div>
                        <div class="toast-body">
                          <p>
                            Hello, world! This is a toast message. Lorem ipsum
                            dolor sit amet consectetur adipisicing elit.
                            Ducimus, impedit consectetur?
                          </p>
                          <div
                            class="mt-2 pt-3 border-top hstack gap-3 justify-content-end"
                          >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-danger"
                              data-bs-dismiss="toast"
                              >Close</a
                            >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-primary"
                              >Submit</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast fade w-100 show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="toast-header">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            version="1.1"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                            x="0"
                            y="0"
                            viewBox="0 0 512 512"
                            style="enable-background: new 0 0 512 512"
                            xml:space="preserve"
                            class=""
                          >
                            <g>
                              <path
                                d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                style="opacity: 0.1; enable-background: new"
                                fill="#231f20"
                                data-original="#231f20"
                              ></path>
                              <path
                                d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                fill="#ffd15c"
                                data-original="#ffd15c"
                                class=""
                              ></path>
                              <path
                                d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                            </g>
                          </svg>
                          <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                          <small class="text-body-secondary"
                            >5 minutes ago</small
                          >
                        </div>
                        <div class="toast-body">
                          <p>
                            Hello, world! This is a toast message. Lorem ipsum
                            dolor sit amet consectetur adipisicing elit.
                            Ducimus, impedit consectetur?
                          </p>
                          <div
                            class="mt-2 pt-3 border-top hstack gap-3 justify-content-end"
                          >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-danger"
                              data-bs-dismiss="toast"
                              >Close</a
                            >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-primary"
                              >Submit</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast fade w-100 show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="toast-header">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            version="1.1"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                            x="0"
                            y="0"
                            viewBox="0 0 512 512"
                            style="enable-background: new 0 0 512 512"
                            xml:space="preserve"
                            class=""
                          >
                            <g>
                              <path
                                d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                style="opacity: 0.1; enable-background: new"
                                fill="#231f20"
                                data-original="#231f20"
                              ></path>
                              <path
                                d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                fill="#ffd15c"
                                data-original="#ffd15c"
                                class=""
                              ></path>
                              <path
                                d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                            </g>
                          </svg>
                          <h6 class="ms-2 me-auto mb-0">Toast Notification</h6>
                          <small class="text-body-secondary"
                            >5 minutes ago</small
                          >
                        </div>
                        <div class="toast-body">
                          <p>
                            Hello, world! This is a toast message. Lorem ipsum
                            dolor sit amet consectetur adipisicing elit.
                            Ducimus, impedit consectetur?
                          </p>
                          <div
                            class="mt-2 pt-3 border-top hstack gap-3 justify-content-end"
                          >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-danger"
                              data-bs-dismiss="toast"
                              >Close</a
                            >
                            <a
                              href="javascript:void(0);"
                              class="fs-12 text-uppercase link-primary"
                              >Submit</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">solidColor</h4>
                </div>
                <div class="card-body">
                  <div class="row g-4">
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-primary border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-secondary border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-danger border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-success border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-warning border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-info border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-white">
                              Toast Notification
                            </h6>
                          </div>
                          <button
                            type="button"
                            class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">softColor</h4>
                </div>
                <div class="card-body">
                  <div class="row g-4">
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-primary-subtle border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-primary">
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-primary"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-secondary-subtle text-secondary border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6
                              class="ms-2 me-auto mb-0 d-inline text-secondary"
                            >
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-secondary"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-danger-subtle text-danger border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-danger">
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-danger"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-success-subtle text-success border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-success">
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-success"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-warning-subtle text-warning border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-warning">
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-warning"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div
                        class="toast align-items-center bg-info-subtle text-info border-0 fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="d-flex">
                          <div class="toast-body">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              version="1.1"
                              xmlns:xlink="http://www.w3.org/1999/xlink"
                              width="20"
                              height="20"
                              x="0"
                              y="0"
                              viewBox="0 0 512 512"
                              style="enable-background: new 0 0 512 512"
                              xml:space="preserve"
                              class=""
                            >
                              <g>
                                <path
                                  d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  fill="#ff7058"
                                  data-original="#ff7058"
                                  class=""
                                ></path>
                                <path
                                  d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                  style="opacity: 0.1; enable-background: new"
                                  fill="#231f20"
                                  data-original="#231f20"
                                ></path>
                                <path
                                  d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                  fill="#ffd15c"
                                  data-original="#ffd15c"
                                  class=""
                                ></path>
                                <path
                                  d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                  fill="#f8b64c"
                                  data-original="#f8b64c"
                                ></path>
                              </g>
                            </svg>
                            <h6 class="ms-2 me-auto mb-0 d-inline text-info">
                              Toast Notification
                            </h6>
                          </div>
                          <a
                            href="javascript:void(0);"
                            class="hstack me-2 m-auto text-info"
                            data-bs-dismiss="toast"
                          >
                            <i class="fi fi-rr-cross-small"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Placement</h4>
                </div>
                <div class="card-body">
                  <form>
                    <div class="mb-3">
                      <label for="selectToastPlacement">Toast placement</label>
                      <select
                        class="form-select mt-2"
                        id="selectToastPlacement"
                      >
                        <option value="" selected="">
                          Select a position...
                        </option>
                        <option value="top-0 start-0">Top left</option>
                        <option value="top-0 start-50 translate-middle-x">
                          Top center
                        </option>
                        <option value="top-0 end-0">Top right</option>
                        <option value="top-50 start-0 translate-middle-y">
                          Middle left
                        </option>
                        <option value="top-50 start-50 translate-middle">
                          Middle center
                        </option>
                        <option value="top-50 end-0 translate-middle-y">
                          Middle right
                        </option>
                        <option value="bottom-0 start-0">Bottom left</option>
                        <option value="bottom-0 start-50 translate-middle-x">
                          Bottom center
                        </option>
                        <option value="bottom-0 end-0">Bottom right</option>
                      </select>
                    </div>
                  </form>
                  <div
                    aria-live="polite"
                    aria-atomic="true"
                    class="bg-body-secondary position-relative rounded-3 ht-400"
                  >
                    <div class="toast-container p-3" id="toastPlacement">
                      <div
                        class="toast fade show"
                        role="alert"
                        aria-live="assertive"
                        aria-atomic="true"
                      >
                        <div class="toast-header">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            version="1.1"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                            x="0"
                            y="0"
                            viewBox="0 0 512 512"
                            style="enable-background: new 0 0 512 512"
                            xml:space="preserve"
                            class=""
                          >
                            <g>
                              <path
                                d="M469.333 347.2c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 20.267-20.267 32-48 32-76.8s-11.733-56.533-32-76.8c-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0C499.2 191.467 512 223.467 512 256.533s-12.8 65.067-36.267 88.533c-2.133 1.067-4.266 2.134-6.4 2.134z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M438.4 316.267c-2.133 0-4.267-1.067-5.333-2.133-3.2-3.2-3.2-8.533 0-11.733 11.733-11.733 19.2-27.733 19.2-45.867 0-17.067-6.4-33.067-19.2-45.867-3.2-3.2-3.2-8.533 0-11.733 3.2-3.2 8.533-3.2 11.733 0 14.933 14.933 23.467 35.2 23.467 57.6s-8.533 41.6-23.467 57.6c-2.133 1.066-4.267 2.133-6.4 2.133zM42.667 165.867c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-20.267 20.267-32 48-32 76.8s11.733 56.533 32 76.8c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0C12.8 321.6 0 289.6 0 256.533S12.8 191.467 36.267 168c2.133-1.067 4.266-2.133 6.4-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M73.6 196.8c2.133 0 4.267 1.067 5.333 2.133 3.2 3.2 3.2 8.533 0 11.733-11.733 11.733-19.2 27.733-19.2 45.867s6.4 33.067 19.2 45.867c3.2 3.2 3.2 8.533 0 11.733-3.2 3.2-8.533 3.2-11.733 0-14.933-16-22.4-36.267-22.4-57.6s8.533-41.6 23.467-57.6c1.066-1.066 3.2-2.133 5.333-2.133z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M256 137.067c-27.733 0-50.133-22.4-50.133-50.133S228.267 36.8 256 36.8s50.133 22.4 50.133 50.133-22.4 50.134-50.133 50.134zm0-68.267c-10.667 0-19.2 8.533-19.2 19.2s8.533 19.2 19.2 19.2 19.2-8.533 19.2-19.2-8.533-19.2-19.2-19.2z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133C306.133 465.6 282.667 475.2 256 475.2s-49.067-10.667-67.2-26.667c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                fill="#ff7058"
                                data-original="#ff7058"
                                class=""
                              ></path>
                              <path
                                d="M345.6 414.4c-5.333 12.8-12.8 24.533-22.4 34.133H188.8c-9.6-9.6-18.133-21.333-22.4-34.133h179.2z"
                                style="opacity: 0.1; enable-background: new"
                                fill="#231f20"
                                data-original="#231f20"
                              ></path>
                              <path
                                d="M409.6 384.533H102.4V241.6C102.4 156.267 170.667 88 256 88s153.6 68.267 153.6 153.6v142.933z"
                                fill="#ffd15c"
                                data-original="#ffd15c"
                                class=""
                              ></path>
                              <path
                                d="M393.6 369.6H118.4c-25.6 0-45.867 20.267-45.867 45.867v9.6a9.56 9.56 0 0 0 9.6 9.6h347.733a9.56 9.56 0 0 0 9.6-9.6v-9.6c.001-24.534-21.333-45.867-45.866-45.867z"
                                fill="#f8b64c"
                                data-original="#f8b64c"
                              ></path>
                            </g>
                          </svg>
                          <h6 class="ms-2 me-auto mb-0 d-inline">
                            Toast placements
                          </h6>
                          <small class="text-body-secondary"
                            >3 minutes ago</small
                          >
                          <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="toast"
                            aria-label="Close"
                          ></button>
                        </div>
                        <div class="toast-body">
                          Heads up, toasts will stack automatically
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Options</h4>
                </div>
                <div class="table-responsive">
                  <table class="table mb-0">
                    <thead>
                      <tr>
                        <th>Reference</th>
                        <th>Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <code>Overview</code>
                        </td>
                        <td>
                          Things to know when using the toast plugin:<br />
                          <ul class="mb-0">
                            <li>
                              Toasts are opt-in for performance reasons, so
                              <strong>you must initialize them yourself</strong
                              >.
                            </li>
                            <li>
                              Toasts will automatically hide if you do not
                              specify <code>autohide: false</code>.
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Basic</code>
                        </td>
                        <td>
                          To encourage extensible and predictable toasts, we
                          recommend a header and body. Toast headers use
                          <code>display: flex</code>, allowing easy alignment of
                          content thanks to our margin and flexbox utilities.<br />Toasts
                          are as flexible as you need and have very little
                          required markup. At a minimum, we require a single
                          element to contain your “toasted” content and strongly
                          encourage a dismiss button.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Live example</code>
                        </td>
                        <td>
                          Click the button below to show a toast (positioned
                          with our utilities in the lower right corner) that has
                          been hidden by default.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Stacking</code>
                        </td>
                        <td>
                          You can stack toasts by wrapping them in a toast
                          container, which will vertically add some spacing.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>liveStacking</code>
                        </td>
                        <td>
                          You can stack toasts by wrapping them in a toast
                          container, which will vertically add some spacing.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Custom content</code>
                        </td>
                        <td>
                          Customize your toasts by removing sub-components,
                          tweaking them with <code>utilities</code>">, or by
                          adding your own markup. Here we've created a simpler
                          toast by removing the default
                          <code>.toast-header</code>, adding a custom hide icon
                          from
                          <a href="https://icons.getbootstrap.com/"
                            >Bootstrap Icons</a
                          >, and using some <code>flexbox utilities</code> to
                          adjust the layout.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Color schemes</code>
                        </td>
                        <td>
                          Building on the above example, you can create
                          different toast color schemes with our
                          <code>color</code> and
                          <code>background</code> utilities. Here we've added
                          <code>.text-bg-primary</code> to the
                          <code>.toast</code>, and then added
                          <code>.btn-close-white</code> to our close button. For
                          a crisp edge, we remove the default border with
                          <code>.border-0</code>.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Placement</code>
                        </td>
                        <td>
                          Place toasts with custom CSS as you need them. The top
                          right is often used for notifications, as is the top
                          middle. If you're only ever going to show one toast at
                          a time, put the positioning styles right on the
                          <code>.toast</code>.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Documentations</code>
                        </td>
                        <td>
                          Please visit:
                          <a
                            href="https://getbootstrap.com/docs/5.3/components/toasts/"
                            target="_blank"
                            rel="noopener noreferrer"
                            >https://getbootstrap.com/docs/5.3/components/toasts/</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            
          </div>
          
        </div>
        
        
        
        
        
        
        <footer
          class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 ht-64 bg-body-tertiary"
          id="edash-footer-container"
        >
          <div class="hstack">
            <span class="text-muted">
              <script>
                document.write(new Date().getFullYear());
              </script>
              ©
            </span>
            <span class="vr mx-2 bg-body-secondary"></span>
            <a href="mailto:wrapcoders@gmail.com">Expodash</a>
          </div>
          <div class="d-flex align-items-center gap-3">
            <a
              href="./../../docs/documentation.html"
              target="_blank"
              class="d-none d-sm-block"
              >Docs</a
            >
            <a href="wrapcoders@gmail.com" target="_blank" class="d-none d-sm-block"
              >About</a
            >
            <a href="wrapcoders@gmail.com" target="_blank">Support</a>
            <a
              href="https://codecanyon.net/item/expodash-bootstrap-5-admin-dashboard-template/52160996"
              target="_blank"
              >Purchase</a
            >
          </div>
        </footer>

</main>
      
      
      
      <div class="edash-menu-backdrop" id="edash-menu-hide"></div>
    </div>
    
    
    
    
    
    
    
    <script src="./../assets/js/vendors.min.js"></script>

<script src="./../assets/js/common-init.min.js"></script>

<script>
      // Toast Script
      function initializeToast() {
        // Get toast trigger and toast element
        const toastTrigger = document.getElementById("liveToastBtn");
        const toastLiveExample = document.getElementById("liveToast");

if (toastTrigger) {
          // Create or get the Bootstrap Toast instance
          const toastBootstrap =
            bootstrap.Toast.getOrCreateInstance(toastLiveExample);

// Show toast on trigger click
          toastTrigger.addEventListener("click", () => {
            toastBootstrap.show();
          });
        }
      }

// Live Stacking Script
      function initializeLiveStacking() {
        // Select elements
        const button = document.getElementById("liveStackingButton");
        const container = document.getElementById("liveStackingContainer");
        const targetElement = document.querySelector(
          '[data-toast-livestack="stack"]'
        );

// Remove base element markup
        targetElement.parentNode.removeChild(targetElement);

// Handle button click
        button.addEventListener("click", (e) => {
          e.preventDefault();
          const newToast = targetElement.cloneNode(true);
          container.append(newToast);
          const toast = bootstrap.Toast.getOrCreateInstance(newToast);
          toast.show();
        });
      }

// Toast Placement Script
      function initializeToastPlacement() {
        document
          .getElementById("selectToastPlacement")
          .addEventListener("change", function () {
            var selectedPlacement = this.value;
            var toastContainer = document.getElementById("toastPlacement");
            toastContainer.className =
              "toast-container p-3 " + selectedPlacement;
          });
      }

// Initialize all scripts
      function initializeScripts() {
        initializeToast();
        initializeLiveStacking();
        initializeToastPlacement();
      }

// Call the initialization function once the document is ready
      document.addEventListener("DOMContentLoaded", function () {
        initializeScripts();
      });
    </script>
    
  </body>
</html>