body {
    background: var(--c15);
    color: var(--c18) !important;
  }

  footer.page-footer, footer.page-footer a, footer.page-footer .footer-copyright {
    color: var(--c18);
  }

  .modal-content {
    background: var(--c15) !important;
  }

    /*導覽列*/
  .nav_background {
      background: var(--c1);
  }

  .nav_text {
      color: var(--c2) !important;
  }

  .navbar.navbar-dark form .md-form input {
      border-bottom: 1px solid var(--c2); 
  }

  .dropdown-item:hover {
      background-color: var(--c1) !important;
  }

  .footer-copyright {

  }

  /*下拉清單文字*/
  .dropdown .dropdown-menu .dropdown-item:hover {
      color: var(--c2) !important;
  }


  .nav_text::placeholder {
      color:  var(--c2) !important;
      opacity: 1;
  }

  /*主標題*/
  .clabel {
      color: var(--c3);
  }

  /*邊匡*/
  .title_col {
      border-left: solid 4px var(--c3);
  }

  /*副標題*/
  .elabel {
      color:  var(--c4);
  }

  /*按鈕色*/
  .btn-blue-grey, .input-group-text {
      background-color: var(--c5) !important;
  }

  /*focus*/
  .btn-blue-grey:not([disabled]):not(.disabled):active, .btn-blue-grey:not([disabled]):not(.disabled).active, .show>.btn-blue-grey.dropdown-toggle {
      background-color:  var(--c5) !important;
      filter: brightness(0.8);
  }

  /*dropdown*/
  .btn-blue-grey.dropdown-toggle {
      background-color: var(--c1) !important;
  }

  .btn-blue-grey.dropdown-toggle:hover {
      background-color:  var(--c1) !important;
      filter: brightness(0.8);
  }

  .btn-blue-grey.dropdown-toggle:focus {
      background-color:  var(--c1) !important;
      filter: brightness(0.8);
  }


  /*輪播按鈕*/
  .carousel-multi-item .carousel-indicators li {
      background-color: var(--c5);
  }

  .carousel-multi-item .carousel-indicators .active {
      background-color: var(--c5);
  }

  /*按鈕文字*/
  .btn-blue-grey, .input-group-text {
      color: var(--c6);
  }

  /*分頁按鈕*/
  .pagination .page-item.active .page-link {
      background-color: var(--c5);
      color: var(--c6);
  }


  /*目錄色*/
  .main_item span {
      color:  var(--c7) !important;
  }

  /*數量色*/
  .list-badge {
      background-color: var(--c8);
  }

  /*footer*/
  .page-footer {
      background-color: var(--c9);
  }

  /*card*/
  .card-back {
      background-color: var(--c11);
  }

  .footer-text {
       color:  var(--c10) !important;
  }

  /*商品名*/
  .prodname {
      color:  var(--c12);
  }


  /*特價*/
  .sprice-text {
      color:  var(--c13);
  }

  /*原價*/
  .price-text {
      color:  var(--c14);
  }

  /*大螢幕導覽列*/
  .sub_nav {
      background: var(--c16);
      /*background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 1px, transparent 0);
      background-size: 20px 20px;*/
  }


  .dropdown-menu {
      background-color: var(--c19);
  }

  /*分享按鈕*/
  .btn-share {
      background-color: var(--c17);
  }


  #slide-out a, #plinks a {
    color: var(--c18);
  }


  .xbutton {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #e8e8e8;
    border: 1.6px solid #e2e2e2;
    box-shadow: 6px 6px 10px #c5c5c5, -6px -6px 12px #ffffff;
    transform: skewX(-5deg);
    position: relative;
    overflow: hidden;
  }

    .xbutton::before {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      z-index: -1;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 30px;
      opacity: 0;
      transition: opacity 0.5s, filter 0.5s;
    }

    .xbutton:hover::before {
      filter: blur(10px);
      opacity: 1;
      animation: animateBorder 8s linear infinite;
      border: 4px solid rgb(255, 255, 255);
    }

    /*.xbutton:hover {
      color: #fff;
    }*/

    @keyframes animateBorder {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }

    .xspan {
      color: black;
      letter-spacing: 3px;
      font-size: 18px;
    }

    .xbutton:active {
      box-shadow: 5px 5px 12px #cfcece, -4px -4px 12px #fcfcfc;
    }

    .xbutton:hover {
      color: #fff;
      text-shadow: 1px 1px 2px black;
    }


    .blog_row img {
      border-radius: 8px;
      padding: 1rem;
      box-shadow: inset rgb(193 193 193 / 46%) 0px 1px 3px 0px, rgb(44 44 44 / 33%) 0px 4px 2px, rgb(89 89 89 / 14%) 0px 8px 4px, rgb(74 74 74 / 41%) -1px 9px 15px 0px, rgb(35 76 98 / 0%) 0px 32px 16px 0px;
    }

}