.border-5px {
  background-color: #FFFCEC;
  border-radius: 5px;
}

/* nori-on off  */
.nori_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  pointer-events: none;
  /* 禁用所有鼠標事件 */
}

.nori_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.nori_slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
}

.nori_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  /* 保留動畫效果 */
}

/* ON 狀態樣式 */
.nori_switch input:checked+.nori_slider {
  background-color: #2196F3;
}

.nori_switch input:checked+.nori_slider:before {
  transform: translateX(26px);
}

/* 圓角樣式 */
.nori_round {
  border-radius: 34px;
}

.nori_round:before {
  border-radius: 50%;
}

/* nori-on off  */

/* custom-json-praser  */
.custom-json-viewer {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.4;
}

.custom-json-item {
  margin-left: 20px;
}

.custom-json-key {
  color: #92278f;
  font-weight: bold;
}

.custom-json-value {
  color: #25aae2;
}

.custom-json-string {
  color: #3ab54a;
}

.custom-json-number {
  color: #f1592a;
}

.custom-json-boolean {
  color: #00a99d;
}

.custom-json-null {
  color: #f1592a;
}

.custom-toggle {
  cursor: pointer;
  color: #555;
  margin-right: 5px;
}

.custom-collapsed>.custom-json-children {
  display: none;
}

.custom-collapsed::after {
  content: "...";
  color: #999;
  margin-left: 5px;
}


.pos_footer {
  position: fixed;
  bottom: 80px;
  right: 35%;
  background-color: white;
  z-index: 99999;
  border-radius: 5px;
  border: 1px solid #858796 !important;
}

.noti_title {
  color: #36b9cc;
  font-size: 1.25rem;
  font-weight: 400;
}

.color_title {
  color: #36b9cc;
}


.td_color1 {

  font-weight: bold;
  color: #707383;
}

.dataTables_info {
  min-height: 100px !important;
}

.mouseoverTips4 {
  position: relative;
}

.mouseoverTips4:hover:after {
  content: attr(data-title);
  position: absolute;
  font: 14px verdana;
  top: 40px;
  ;
  z-index: 99999;
  left: 0px;
  background: #FFFFFF;
  color: black;
  box-sizing: border-box;
  border: 1px solid gray;
  padding: 3px;
}


.s_btn {
  padding: 2px !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
}

/* 放大圖片 */
/*使图片在浏览器中居中显示*/
.noribigImg {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  max-height: 80%;
  /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
  transform: translate(-50%, -50%);
}

/*遮罩层*/
.opacityBottom {
  width: 100%;
  height: 100%;
  position: fixed !important;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999998;
  top: 0;
  left: 0;
}

.table_nori_02 {
  padding: 6px !important;
  border: #d1d3e2 1px solid !important;
  text-align: left !important;
}

.table_nori_02 tr td {
  padding: 6px !important;
  border: #d1d3e2 1px solid !important;
  text-align: left !important;
}

.table_nori_01 tr td {
  padding: 6px !important;
}

.datatable_color_ignored {
  color: #D0D0D0;
}

.inline_block {
  display: inline-block;
}

.inline_block_top {
  display: inline-block;
  vertical-align: top;
}

.btn-nori-close {
  border: 1px solid #858796 !important;
}


.btn-nori-close:hover {
  background-color: #f2fafc !important;
}


.btn-nori-2 {
  border: 1px solid #858796 !important;
  background-color: #fffdf7 !important;
}

.btn-nori-2:hover {
  background-color: #f2fafc !important;
}

.btn-nori-close {
  border: 1px solid #858796 !important;
}




.btn-nori-close:hover {
  background-color: #f2fafc !important;
}





.table_nori_01 tr td {
  padding: 6px !important;
}

.fz_16 {
  font-size: 16px !important;
}

/* 放大圖片 */
/*使图片在浏览器中居中显示*/
.noribigImg {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  max-height: 80%;
  /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
  transform: translate(-50%, -50%);
}

/*遮罩层*/
.opacityBottom {
  width: 100%;
  height: 100%;
  position: fixed !important;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999998;
  top: 0;
  left: 0;
}

.hvpt {
  cursor: pointer;
}

/** Btn */
.m_btn {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
}

.btn_light_gray_v2 {
  border-color: #858796 !important;
  background-color: #FFFCEC !important;
}

.btn_light_gray_v2:hover {
  background-color: #f2fafc !important;
}



.btn_hard_new_2 {
  background-color: #6FB7B7 !important;
  border-color: #6FB7B7 !important;
  color: white !important;
}

.btn_hard_new_2:hover {
  background-color: #a8d3d3 !important;
}

.btn_hard_new_1 {
  background-color: transparent !important;
  border-color: #6FB7B7 !important;
  color: #6FB7B7 !important;
}

.btn_hard_new_1:hover {
  background-color: #f2fafc !important;
}



.btn_light_7_2 {
  background-color: #FFECF5 !important;
  border-color: #CA8EC2 !important;
  color: #CA8EC2 !important;
}

.btn_light_7_2:hover {
  background-color: #FFD9EC !important;
}


.btn_light_7_1 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #CA8EC2 !important;
  color: #CA8EC2 !important;
}

.btn_light_7_1:hover {
  background-color: #f2fafc !important;
}



.btn_light_11 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #FF5151 !important;
  color: #FF5151 !important;
}

.btn_light_11:hover {
  background-color: #f2fafc !important;
}

.btn_light_10 {
  background-color: #3d66b3 !important;
  border-color: #3d66b3 !important;
  color: white !important;
}

.btn_light_10:hover {
  background-color: #f2fafc !important;
}

.btn_light_9 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #01B27E !important;
  color: #01B27E !important;
}

.btn_light_9:hover {
  background-color: #f2fafc !important;
}


.btn_light_9_hard {
  background-color: #FFF7D9 !important;
  border-color: #01B27E !important;
  color: #01B27E !important;
}

.btn_light_9_hard:hover {
  background-color: #f2fafc !important;
}




.btn_light_8 {
  background-color: #E0E0E0 !important;
  border-color: #CA8EC2 !important;
  color: #CA8EC2 !important;
}

.btn_light_7 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #CA8EC2 !important;
  color: #CA8EC2 !important;
}

.btn_light_7:hover {
  background-color: #f2fafc !important;
}


.btn_light_12 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #FF5151 !important;
  color: #FF5151 !important;
}

.btn_light_12:hover {
  background-color: #f2fafc !important;
}

.color_black_s {
  color: black;
  font-size: 15px
}

.btn_light_7_hard {
  background-color: #FFF7D9 !important;
  border-color: #CA8EC2 !important;
  color: #CA8EC2 !important;
}


.btn_light_6_block {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #e8850b !important;
  color: #e8850b !important;
}

.btn_light_6_hard {
  background-color: #FFECF5 !important;
  border-color: #e8850b !important;
  color: #e8850b !important;
}

.btn_light_6_hard:hover {
  background-color: #f2fafc !important;
}


.btn_light_7_hard:hover {
  background-color: #f2fafc !important;
}


.btn_light_y {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #FFDC35 !important;
  color: #FFDC35 !important;
}

.btn_light_y:hover {
  background-color: #f2fafc !important;
}


.btn_light_6 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #e8850b !important;
  color: #e8850b !important;
}

.btn_light_6:hover {
  background-color: #f2fafc !important;
}


.btn_light_5 {
  background-color: white !important;
  border-color: #64A600 !important;
  color: #64A600 !important;
}

.btn_light_5:hover {
  background-color: #f2fafc !important;
}

.btn_light_4 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #597954 !important;
  color: #597954 !important;
}

.btn_light_4:hover {
  background-color: #f2fafc !important;
}


.btn_light_blue2 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #4473C5 !important;
  color: #4473C5 !important;
}

.btn_light_blue2:hover {
  background-color: #f2fafc !important;
}

.btn_light_3 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #743A3A !important;
  color: #743A3A !important;
}

.btn_light_3:hover {
  background-color: #f2fafc !important;
}

.btn_light_2_hard {
  background-color: #FFF7D9 !important;
  border-color: #5A5AAD !important;
  color: #5A5AAD !important;
}

.btn_light_2 {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #5A5AAD !important;
  color: #5A5AAD !important;
}

.btn_light_2:hover {
  background-color: #f2fafc !important;
}



.btn_light_2_hard {
  background-color: #FFF7D9 !important;
  border-color: #5A5AAD !important;
  color: #5A5AAD !important;
}

.btn_light_2_hard:hover {
  background-color: #f2fafc !important;
}


.btn_light_blue_hard {
  background-color: #FFF7D9 !important;
  border-color: #36b9cc !important;
  color: #36b9cc !important;
}

.btn_light_blue_hard:hover {
  background-color: #f2fafc !important;
}



.btn_light_blue {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #36b9cc !important;
  color: #36b9cc !important;
}

.btn_light_blue:hover {
  background-color: #f2fafc !important;
}

.btn_light_red {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #2759b0 !important;
  color: #2759b0 !important;
}

.btn_light_red:hover {
  background-color: #f2fafc !important;
}


.btn_hard_rd {
  background-color: #FFF7D9 !important;
  border-color: #977C00 !important;
  color: #977C00 !important;
}

.btn_hard_rd:hover {
  background-color: #f2fafc !important;
}


.btn_hard_blud {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #977C00 !important;
  color: #977C00 !important;
}

.btn_hard_blud:hover {
  background-color: #f2fafc !important;
}

.btn_hard_yellow {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #FF8000 !important;
  color: #FF8000 !important;
}

.btn_hard_yellow:hover {
  background-color: #f2fafc !important;
}

.btn_hard_blue {
  background-color: rgba(255, 255, 255, .7) !important;
  border-color: #36b9cc !important;
  color: #36b9cc !important;
}

.btn_light_gray_1 {
  background-color: #BEBEBE !important;
  border-color: #BEBEBE !important;
  color: rgba(255, 255, 255, .8);
}

.btn_light_green {
  background-color: #36b9cc !important;
  border-color: #36b9cc !important;
  ;
  color: rgba(255, 255, 255, 1);
}

.btn_light_gray {
  border-color: #a1a2ae !important;
  background-color: rgba(255, 255, 255, 1) !important;
}

.btn_light_gray:hover {
  background-color: #f2fafc !important;
}

.btn_light_gray2 {
  border-color: #F0F0F0 !important;
}

.btn_light_gray2:hover {
  background-color: #f2fafc !important;
}

/** General */
.cursor_pt {
  cursor: pointer;
}



.inner_display {
  display: inline-block;
}

/** Datatable */
.mw_100 {
  min-width: 100px;
  text-align: center;
}

.mw_200 {
  min-width: 200px;
  text-align: center;
}

.mw_120 {
  min-width: 120px;
  text-align: center;
}


.mw_50 {
  min-width: 50px;
  text-align: center;
}

.sorting,
.sorting_asc,
.sorting_desc {
  text-align: center;
}

/** Loading */
.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.sk-circle {
  position: relative;
  top: 40vh;
}

.nori_cover {
  width: 100%;
  height: 500vh;
  /* background: white; */
  position: fixed;
  top: -100px;
  left: 0px;
  z-index: 10000;
  /* text-align: center; */
  align-items: center;
  justify-content: center;
   /* 可選: 淡化背景 */
  background: rgba(255,255,255,0.7);
}

/** Navbar */
.navbar {
  position: fixed;
  top: 0px;
  width: 100%;
}

.navbar {
  z-index: 5;
}

/** Body */
body {
  background-color: white;
}

/** Footer */
.nori_footer {
  height: 5%;
  line-height: 35px;
  position: fixed;
  bottom: 0%;
  width: 100%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: white;
  background: #242527;
  opacity: 0.5;
  z-index: 10;
}

/** 卡片變暗效果 **/
.card-inactive {
    /* 寫法 1: 灰階 + 降低亮度 (推薦，對比最強) */
    /* filter: grayscale(1) brightness(0.6); */

    /* 寫法 2: 只降低亮度 (顏色保留，但變暗) */
    filter: brightness(0.5);
}
@media only screen and (max-width: 767px) {}