@media (prefers-color-scheme: dark) {

    body {
        background: var(--c15);
        color: var(--c18) !important;
        --color: rgb(52 52 52 / 30%);
        background-color: #191a1a;
          background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
              linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
          background-size: 55px 55px;
    }


    .xbutton {
              --black: #000000;
        --ch-black: #14464740;
        --eer-black: #3a3a3a;
        --night-rider: #444444;
        --white: #ffffff;
        --af-white: #f3f3f3;
        --ch-white: #e1e1e1;
      border-radius: 12px;
      width: 140px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0px 15px;
      color: white;
      position: relative;
      cursor: pointer;
      font-weight: 500;
      transition-duration: .2s;
      background-color: var(--ch-black);
      border: 3px solid #30526029;
    }

    .xbutton:hover {
        background-color: #461c3c3d;
        border: 3px solid #6030483d; 
    }

    .xbutton:before, .xbutton:after {
      content: '';
      position: absolute;
      left: -2px;
      top: -2px;
      border-radius: 10px;
      background: linear-gradient(45deg, 
      var(--ch-black), var(--eer-black),
      var(--night-rider), var(--ch-white), var(--night-rider), 
        var(--eer-black), var(--ch-black),var(--ch-black));
      background-size: 200%;
      width: calc(90% + 8px);
      height: calc(50% + 4px);
      z-index: -1;
      animation: steam 20s linear infinite;
    }

    @keyframes steam {
      0% {
        background-position: 0 0;
      }

      50% {
        background-position: 400% 0;
      }

      100% {
        background-position: 0 0;
      }
    }

    .xbutton:after {
      filter: blur(50px);
    }

    .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;
    }

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

    .accordion a {
        color: var(--c18);
        font-size: .9rem;
        cursor: pointer;
    }


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

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

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

    .title_col hr {
        border-color: var(--c3);
    }

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

    /*按鈕色*/
    .btn-blue-grey,
    .input-group-text {
        background-color: var(--c1) !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);
    }

    /*目錄色*/
    .list-group-item-color {
        color: var(--c7) !important;
    }


    /*下拉清單文字*/
    .dropdown-menu .list-group-item-color,
    h6.list-group-item-color,
    a.list-group-item-color {
        color: var(--c7) !important;
    }



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

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

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


    .card-back {
        background-color: inherit;
    }


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

    #menu_btn:hover {

    }

    #menu_btn {
        border-radius: 6px;
        border: 3px solid white;
    }

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

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

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

    /*大螢幕導覽列*/
    .sub_nav {
        background: var(--c16);
    }


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

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

    hr {
        border-top-color: white;
    }

    hr.gray_line {
        border-top-color: gray;
    }

    #pmodal .h3-responsive.prodname {
        filter: brightness(3);
    }

    #pmodal .container.modal-content {
        border: 2px solid #4685abb5;
        box-shadow: rgb(26 142 162 / 56%) 0px 22px 70px 4px, inset rgb(26 142 162 / 56%) 0px -20px 5px 17px;
    }

    #pmodal {
        background: #072e3b;
    }




    @media (hover: hover) and (pointer: fine) {
        #accordion1 a:hover {
            background: #68a1c075;
        }
    }

    #accordion1 .card-body {
        background: linear-gradient(to bottom, #16222a, #3a6073);
    }


    @media (min-width: 1200px) {

        /*body {
            background-image: var(--page_name2);
            background-repeat: no-repeat;
            background-size: contain;
        }*/

    }


    /*  訂單紀錄*/
    #orderEx .card-body {
        background: #bccee4;
        box-shadow: inset rgb(43 5 5 / 51%) 0px 20px 20px -20px;
        color: #191919;
    }


    #orderEx .card-header {
      background: linear-gradient(to bottom, #ffffffa3, #c5c5c5cf);
      color: #191919;
    }

    #orderEx small {
        font-size: .9rem;
    }


    #full_menu {
      background: linear-gradient(to bottom, #232526, #414345);
    }


    @media (hover: hover) and (pointer: fine) {
      #full_menu h4:hover {
          background: #95cafd;
          color: #191919;
      }

    /*.user-dd:hover .light_btn,
    .user-dd.show .light_btn,
    .user-dd:focus-within .light_btn,
    .user-dd:has(.dropdown-menu:hover) .light_btn{
      background-color: white;
      color: #000;
    }*/

    /*.user-dd:hover .btn_label,
    .user-dd.show .btn_label,
    .user-dd:focus-within .btn_label,
    .user-dd:has(.dropdown-menu:hover) .btn_label{
        display: inline-block !important;
    }*/

    #menu_group a.light_btn:hover {
/*        filter: invert(1);*/
        background: white !important;
        color: #000 !important;
    }

    /*#menu_group a.light_btn:hover span.btn_label {
      display: inline-block !important;
    }*/

      .menu_logo:hover {
        filter: drop-shadow(1px 2px 2px white) brightness(1) hue-rotate(71deg);
      }



    }


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


  .last_target {
     background: #a17bc1;
  }


  .light_btn {
    border-radius: 6px;
    margin-top: 6px;
    width: fit-content;
    color: #ffffff;
    background-color: #000000;
    border: 2px solid #6c6c6c;
    font-weight: 500;
  }

  .light_btn.dropdown-toggle::after {
      content: none;
  }


}