:root {
  --bs-breadcrumb-active: #8fb4f4;
}
:root, [data-bs-theme=light] {
  --bs-nav-active-rgb: 143,180,244;
}
:root, [data-bs-theme=dark] {
  --bs-nav-active-rgb: 143,180,244;
}

body {
    font-family: "Noto Sans TC", sans-serif;
  }
  p,h1,h2,h3,h4,h5,h6 {
    font-family: "Noto Sans TC", sans-serif;
  }
  .navbar{
    --bs-navbar-toggler-border-radius: .6em;
  }
  .scrollarea {
    position: fixed;
    height: calc(100vh - 56px);
    overflow-y: auto;
    scroll-behavior: smooth;
    width: 16.66666667%;
  }
  .sticky_h {
    padding-top: 30px;
    top: 76px;
  }
  h1 {
    font-size: 2rem;
    margin-top: 1rem;
  }
  h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
  }
  .sticky-top {
    z-index: 1020;
  }
  html[data-bs-theme=dark] #toggleTheme .fa-sun{
    display: none;
  }
  html[data-bs-theme=light] #toggleTheme .fa-moon{
    display: none;
  }
  .main_div h4 {
    padding-top: 65px;
  }
  .breadcrumb-item.active {
    color: var(--bs-breadcrumb-active);
  }
  .left_menu .nav {
    font-size: .9rem;
  }
  #searchResults{
    z-index: 2000;
    top: 56px;
    right: 21rem;
    max-width: 300px;
  }
  .more_img{
    display: flex;
  }
  .more_img img{
    margin-right: 15px;
  }

  /*old move*/
  .sb-sidenav .sb-sidenav-menu .nav .nav-link {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    position: relative;
    width: fit-content;
    width: 100%;
  }
  .nav .nav-link .sb-nav-link-icon, .sb-sidenav-menu .nav-link .sb-nav-link-icon {
    margin-right: 0.5rem;
    display: none;
  }
  .sb-sidenav-collapse-arrow{
    margin-left: 0.5rem;
  }
  .sb-sidenav .sb-sidenav-menu .nav .nav-link.collapsed .sb-sidenav-collapse-arrow {
    transform: rotate(-90deg);
  }
  .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
    margin-left: 1.5rem;
    flex-direction: column;
  }
  .black_bt{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    font-weight: bold;
    color: var(--bs-light-text-emphasis);
    background-color: rgba(var(--bs-nav-active-rgb),0.3);
    border-radius: 50px;
  }
  .img_box {
    margin-bottom: 15px;
  }
  .img_box img {
    max-width: 85% !important;
    vertical-align: bottom;
  }
  img.px50 {
        max-width: 60% !important;
  }
  img.icon {
    max-width: 30px !important;
  }
   img.icon.big {
    max-width: 52px !important;
  }
  .ps_box {
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
    border: 1px solid;
   }
   .ps_box:before {
    content: "\f071"; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    font-size: 20px;
    display: inline-block;
    margin-right: 10px;
   }
   html[data-bs-theme=light] .ps_box{
    background: rgb(245 158 11 / .1);
    border-color: rgb(245 158 11 / .3);
    color: rgb(255 123 25);
   }
   html[data-bs-theme=dark] .ps_box{
    background: rgb(245 158 11 / .1);
    border-color: rgb(245 158 11 / .3);
    color: rgb(253 230 138 / 1);
   }
   .warning_box {
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
    border: 1px solid;
   }
   .warning_box:before {
    content: "\f071"; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    font-size: 20px;
    display: inline-block;
    margin-right: 10px;
   }
   html[data-bs-theme=light] .warning_box {
    background: rgb(245 11 11 / 10%);
    border-color: rgb(245 11 11 / 30%);
    color: rgb(255 56 56);
   }
   html[data-bs-theme=dark] .warning_box {
    background: rgb(245 11 11 / 10%);
    border-color: rgb(245 11 11 / 30%);
    color: rgb(253 138 138);
  }
   .sys_box {
    margin-top: 8px;
    border: 2px solid rgb(143 143 143 / 40%);
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-left: 30px;
  }
  a img.a_link {
    box-shadow: 0px 3px 8px rgb(0 0 0 / 0%);
    max-width: 280px !important;
    margin-left: 15px;
  }
  .video_box {
    width: 50%;
  }
  .video_box video {
    max-width: 100%;
  }
  .logo_img {
    width: 140px;
    margin: auto;
    display: block;
  }
  html[data-bs-theme=light] .navbar-brand > img {
    filter: invert(85%) brightness(2);
  }
  
  @media print {
    nav, aside, .navbar, .left_menu {
      display: none !important;
    }
    main {
      width: 100%;
      padding: 0;
    }
    section {
      page-break-before: always;
    }
  }

  /*RWD*/

  @media (max-width: 1600px) {
    
  }

  @media (max-width: 1460px) {
    .left_menu .nav{
      font-size: .85rem;
     }
  }
  
  @media (max-width: 1280px) {
    .left_menu .nav{
      font-size: .8rem;
     }
  }
  @media (max-width: 1279px) {
    .right_quick{
      display: none !important;
    }
    .left_menu {
      width: 20%;
    }
    .scrollarea {
      width: 20%;
    }
    .main_div{
      width: 80%;
    }
    .more_img {
      display: block;
    }
  }

  @media (max-width: 1050px) {
    .left_menu {
      width: 25%;
    }
    .scrollarea {
      width: 25%;
    }
    .main_div{
      width: 75%;
    }
  }

  @media (max-width: 991px) {
  .top_navbar {
    margin-top: 10px;
    display: flex;
  }
  #searchResults{
    top: 110px !important;
  }
 }

  @media (max-width: 820px) {
    .left_menu {
      width: 28%;
    }
    .scrollarea {
      width: 28%;
    }
    .main_div{
      width: 72%;
    }
  }
  
  @media (max-width: 767px) {
    .left_nav{
      position: fixed;
      width: 75%;
      z-index: 100;
      height: 100%;
      left: -75%;
      background-color: rgb(var(--bs-tertiary-bg-rgb));
      transition: all 0.5s;
      display: block!important;
      z-index: 15;
    }
    .left_nav.act{
      left: 0%;
    }
    .top_navbar{
      margin-top: 10px;
      display: flex;
    }
    .left_menu {
      width: 100%;
    }
    .main_div{
      width: 100%;
    }
    .img_box img {
      max-width: 100% !important;
      height: auto !important;
    }
    img.px50 {
        max-width: 100% !important;
    }
    .sb-sidenav .sb-sidenav-menu .nav .nav-link {
        width: 100%;
    }
    .breadcrumb-item+.breadcrumb-item {
        margin-bottom: 6px;
    }
    .video_box {
      width: 100%;
    }
    #searchResults{
      right: 0rem;
      left: 2rem;
    }
  }