html, body{ font-size: 16px; font-family: "Bebas Neue", "Noto Sans TC", sans-serif; }
nav { height: 60px; }
#viewDiv {
  padding: 0;
  margin: 0;
  height: calc(100vh - 60px);
  width: 100%;
}
.languages {
  width: 28px;
  height: 28px;
  display: inline-table;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #444;
  cursor: pointer;
}
.languages.active {
  background-color: #ac3949;
  border: 2px solid #ac3949;
  color: #fff;
}
.title{
  font-size: 24px;
  color: #ac3949;
  font-weight: bold;
  font-stretch: extra-condensed;
  text-transform: uppercase;
  padding: 5px 0;
  border-bottom: 2px solid #e9eaea;
  font-family: "Bebas Neue", "Noto Sans TC", sans-serif;
}
.content{
  padding: 5px 0;
  font-size: 0.9em;
  font-stretch: semi-condensed;
  font-family: "Noto Sans", "Noto Sans TC", sans-serif;
}

.logo {
    -webkit-filter: grayscale(100%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(100%); 
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(100%); 
    -o-transition: .5s ease-in-out;
}

.logo:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(0%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(0%);
    -o-transition: .5s ease-in-out;
} 

#sidebarleft { min-width: 300px; max-width: 300px; height: 100%; background: #fff; transition: all 0.3s; position: relative; &.active{ margin-left: -290px; .custom-menu{ margin-right: -50px; } } }
#sidebarright { min-width: 350px; max-width: 350px; height: 100%; background: #ac3949; color: #fff; transition: all 0.3s; position: relative; &.active{ margin-right: -340px; .custom-menu1{ margin-left: -50px; } } }
.menuleft{ display: inline-block; position: absolute; top: 40vh; right: 8px; @include transition(.3s); }
.menuleft > button{ position: fixed; }
.menuright{ display: inline-block; position: absolute; top: 40vh; left: 0; margin-left: -20px; @include transition(.3s); }
.left-sidebar{ position: fixed; left: 0; z-index: 999; height: 100%; padding: 0; width: fit-content; }
.right-sidebar{ position: fixed; right: 0; z-index: 999; height: 100%; padding: 0; width: fit-content; }

#information{ overflow-x: scroll; height: 85%; }
#information .col-12 { font-size: 16px; padding: 5px 0; font-family: "Noto Sans", "Noto Sans TC", sans-serif; }
#info_name{ font-size: 1.1em; font-weight: bolder; font-stretch: extra-condensed; text-transform: uppercase; padding: 5px 0; }
.field_title{ font-size: 16px; font-weight: bolder; font-stretch: extra-condensed; padding: 5px 0; font-family: "Bebas Neue", "Noto Sans TC", sans-serif; }

@media (max-width: 1199px) {
.navbar-collapse.collapse.show{ z-index: 9999; background-color: #fff; padding: 15px; color: var(--bs-navbar-color); border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius);}
.navbar-collapse.collapse.show > ul{ margin-top: 3rem !important; margin-bottom: 3rem !important; margin-right: 3rem !important; margin-left: 3rem !important; }
}