html,
body {
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: "cwTeXYen", "Noto Sans TC", "微軟正黑體", "黑體-繁", sans-serif !important;
}

.MenuBar {
  background-color: #3f446e90;
  color: #ffffff;
}

.MenuBar .w3-bar-item {
  background-color: #3f446e;
  color: #ffffff;
}

#Vmenu {
  display: none;
  height: 100%;
}

.PopupInfo {
  background-color: rgba(40, 215, 215, 0.5);
  width: 90%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px !important;
  position: absolute;
  top: 5px;
  left: 5%;
  z-index: 50;
}

#Overlay {
  position: fixed;
  display: none;
  /* Hidden by default */
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5) !important;
  /* Black background with opacity */
  z-index: 2;
  /* Specify a stack order in case you're using a different order for other elements */
  /*cursor: pointer; /* Add a pointer on hover */
}

.HiddenSnackbar {
  display: none;
  /* Hidden by default */
  overflow-y: hidden;
  overflow-x: hidden;
  /*position: relative;*/
  position: absolute !important;
  background: rgba(63, 68, 110, 0.95);
  color: rgb(255, 255, 255);
  border: 3px solid rgb(0, 41, 92);
  width: 80% !important;
  padding: 10px !important;
  top: 50%;
  left: 10% !important;
  z-index: 100 !important;
}

.HiddenPopupInfo {
  display: none;
  /* Hidden by default */
  overflow-y: hidden;
  overflow-x: hidden;
  /*position: relative;*/
  position: absolute !important;
  background-color: rgba(210, 255, 255, 0.98);
  border: 3px solid blue;
  width: 90%;
  padding: 10px !important;
  top: 3%;
  left: 5%;
  z-index: 99;
}

.HiddenPopupInfo-S {
  left: 25% !important;
  width: 50% !important;
}

.HiddenPopupInfo-M {
  left: 15% !important;
  width: 70% !important;
}

.HiddenPopupInfo-L {
  left: 5% !important;
  width: 90% !important;
}

.PopupDialog_CloseBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.PopupDialog_Title {
  width: 90%;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.PopupDialog_Content {
  overflow-y: auto;
  max-height: 60vh;
}

.PopupDialog_ActionBtn {
  margin: 10px;
}

.Dialog-SUCCESS {
  background: rgba(255, 208, 208, 0.95);
  border: 3px solid red;
  background-image: url("../image/SuccessFire.gif");
  background-size: cover;
}

.Dialog-SUCCESS .PopupDialog_Title {
  background: rgba(255, 208, 208, 0.7) !important;
  border-color: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%) !important;
}

.Dialog-ALERT {
  background-color: rgba(255, 208, 208, 0.95);
  border: 3px solid red;
}

.Dialog-QUESTION {
  background-color: rgba(245, 255, 210, 0.95);
  border: 3px solid yellow;
}

.Dialog-REMARK {
  background: rgba(210, 255, 255, 0.95);
  border: 3px solid blue;
}

.Tooltip {
  position: relative;
  display: inline-block !important;
  border-bottom: 1px dotted black;
}

.Tooltip .Tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.Tooltip:hover .Tooltiptext {
  visibility: visible;
}

.Text-Caption {
  font-size: 8px;
}
.Text-Bold {
  font-weight: bold;
}

.Slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.Slider:hover {
  opacity: 1;
}

.Slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #f7b615;
  cursor: pointer;
}

.Slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #f7b615;
  cursor: pointer;
}

.Checkbox {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px;
}