.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;
}

.edit_pages2_modal_footer{
  position: fixed;
  top: 8%;
  left: 50%;    
  background-color:white!important;
  border: 1px solid #4d4d4d!important;
  border-radius:5px;
}

.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_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: absolute;
  top: -100px;
  left: 0px;
  z-index: 10000;
  text-align: center;
}

/** 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;
}

@media only screen and (max-width: 767px) {

}