div::-webkit-scrollbar {
  display: none;
}
html {
  font-family: 'Noto Sans', 'Roboto', sans-serif !important;
}

.openvr-header {
  font-size: 2rem;
}

.openvr-subheader {
  font-size: 1.5rem;
}

/* app bar */
#appbar {
  background-color: #ff9800;
}
#appbar::-webkit-scrollbar {
  display: none;
}

#appbar .active {
  background-color: #f57c00;
}

#appbar-sub-page {
  background-color: transparent;
  border-bottom: solid #ff9800;
  box-shadow: none;
  color: black;
}

#appbar-sub-page #back-btn-container {
  height: 100%;
  margin: 0px 8px;
}

#appbar-sub-page #back-btn {
  height: 80%;
}

#back-btn {
  cursor: pointer;
}

#change-lang-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}


/* list */
.list-photo {
  background-size: cover;
  background-position: center;
  padding-top: 50%;
}

/* reorder */
.reorder-item {
  background-color: #FFECB3;
  padding: 4px;
  margin-bottom: 4px;
}

.reorder-item .reorder-item-space {
  flex: 0 0 8px;
}


.checkbox-radio-space input[type=checkbox] + label,
.checkbox-radio-space input[type=radio] + label {
  margin-right: 24px;
}

.padding-top-30 {
  padding-top: 30px;
}


/* loading */
.loading-container-div {
  display: none;
  position:fixed;
  top:0px;
  right:0px;
  width:100%;
  height:100%;
  z-index: 100;
}
.loading-div {
  position:fixed;
  top:0px;
  right:0px;
  width:100%;
  height:100%;
  background-color:#666;
  background-repeat:no-repeat;
  background-position:center;
  z-index:10000000;
  opacity: 0.4;
  filter: alpha(opacity=40); /* For IE8 and earlier */
}
.loading-gif {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px; /* -1 * image width / 2 */
  margin-top: -50px; /* -1 * image height / 2 */
  width: 100px;
  height: 100px;
}
.btn-secondary-container-div {
  width:100%;
  text-align: center;
}


/* flex containers */
.flex-x-start {
  display: flex;
}

.flex-x-center {
  display: flex;
  justify-content: center;
}

.flex-x-space-between {
  display: flex;
  justify-content: space-between;
}

.flex-gap-10{
  gap: 10px;
}


.delete-btn {
  cursor: pointer;
}

#delete-btn {
  cursor: pointer;
}

.server-info {
  display: none;
}

#multi-language-texts {
  display: none;
}
#warning-language-texts {
  display: none;
}

#browser-lang {
  display: none;
}


.theme-color {
  color: #f29c38;
}

.browser-default {
  border: 0px !important;
  border-bottom: 1px solid #9e9e9e !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: white;
}

/*
The following is list-height limitation
For better mobile user's experience.
*/
#news-reorder-list{
  height: 45vh;
  overflow: scroll;
}
#product-reorder-list{
  height: 45vh;
  overflow: scroll;
}
#coupon-reorder-list{
  height: 45vh;
  overflow: scroll;
}
#address-reorder-list{
  height: 45vh;
  overflow: scroll;
}
#reorder-modal > div.modal-content{
  height: 56vh;
}

#save-reorder-btn{
  background-color: #1d7d74;
  color:white;
}#save-reorder-btn:hover{
  background-color: #26a69a;
}

#reorder-modal > div.modal-footer > a:nth-child(1){
  background-color: #1d7d74;
  color:white;
}
#reorder-modal > div.modal-footer > a:nth-child(1):hover{
  background-color: #26a69a;
}

#pin-news-modal > div.modal-footer > a{
  background-color: #1d7d74;
  color:white;
}
#pin-news-modal > div.modal-footer > a:hover{
  background-color: #26a69a;
}


/* Custom */
.hidden {
  display: none !important;
}
.must-remark {
  font-size: 14px;
  margin-left: 8px;
  color: #c76502 !important;
}
.remark {
  font-size: 14px !important;
}
.reminder {
  font-size: 13px !important;
  color: #c76502 !important;
}

/* Data Table */
input[type="search"] {
  height: 1.5rem !important;
}

.nav-wrapper li {
  min-width: max-content;
}

.nav-wrapper::-webkit-scrollbar {
  display: none;
}
.nav-content::-webkit-scrollbar {
  display: none;
}

.richtextbox {
  height: 300px;
}

.brand-logo.isShopGroup{
  cursor: pointer;
}
#change-shop-list{
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

a {
  word-break: break-all;
}

.flex-x-items-center{
  display: flex;
  align-items: center;
}

.eshop-btn{
  border-radius: 50rem !important;
  text-transform: none !important;
  align-items: center;
  display: flex !important;
  padding: 1.5rem !important;
}

.btn-icon-height{
  height: 1.5rem;
}

.gap-1{
  gap: 0.25rem;
}