/*****/

body.bg{
    background-image: url(../images/tstcbg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: top center;
    
}

h2.title{
    font-weight: 800;
    font-size: 1.6rem;
    color: #29426f;

}

.card {
    padding: 2rem;
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #fff;
    box-shadow: 4px 12px 17px -6px rgba(0,0,0,0.75);

}

.color01{
    color: #ca520a;
    font-size: 15px;
}
.btn01{
    background-color: #2097c4;
    border: 1px solid #37b5e4;

}

.btn01:hover{
    background-color: #37b5e4;
    border: 1px solid #37b5e4;

}

.navbar-collapse0{
    flex-grow: 0;
} 

.navbar-custom-bg {
    background-color: #37b5e4;
}

table.tablebox thead th{
    background-color: #35619c!important;
    color: #fff;
    padding: 10px;

}

.reportsbox{
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: 6px solid #0789b9;
    box-shadow: 6px 8px 5px -5px rgba(0,0,0,0.2);

}
.reportsbox h2{
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #064270;
    margin-bottom: 6px;
}
.reportsbox h2 i{
    padding-right: 4px;
}
.reportsbox p {
    vertical-align: middle; 
    margin-bottom: 0.1rem;  
}
.reportsbox p i {
    padding-right: 4px;
    
}

.reportsbox p span{
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    color: #ea790a;
    font-weight: bold;
}


footer{
    text-align: center;
    padding-top: 15px;
    margin-top: 25px;

}

h3.title1{
    font-weight: 800;
}

tr.fadelist {
    opacity: 0.8!important;    
}

tr.fadelist td div.text-primary {
    font-size: 1.0rem !important;
}

tr.fadelist td div span.text-primary {
    font-size: 1.0rem !important;
}

tr.fadelist td div span.text-dark {
    font-size: 1.0rem !important;
}

tr.fadelist td span.text-dark {
    font-size: 1.0rem !important;
}

tr.fadelist td div span.badge {
    font-size: 1.0rem!important; 
}

tr.fadelist button.btn-primary {
    font-size: 0.6rem !important;
    background-color: #6c757d !important; /* 灰色背景 */
    border-color: #6c757d !important; /* 灰色邊框 */
}


@media (min-width: 200px) and (max-width: 576px) { 
    .navbar-nav{
        margin-top: 10px;
    }
    .navbar-nav li{
        border-bottom: 1px solid #bfdaef; 
    }
 }

@media (max-width: 768px) {
    .table001,
    .table001 thead,
    .table001 tbody,
    .table001 th,
    .table001 td,
    .table001 tr {
      display: block;
    }
  
    .table001 thead {
      display: none;
    }
  
    .table001 tr {
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 10px;
      background-color: #f9f9f9;
    }
  
    .table001 td {
      display: flex;
      flex-direction: row;         /* 👉 讓 label 跟內容在同一行 */
      align-items: baseline;
      padding: 6px 8px;
      border: none;
      border-bottom: none;
      text-align: left;
      gap: 6px;                     /* 👉 label 和內容間距 */
    }
  
    .table001 td::before {
      content: attr(data-label) "：";
      font-weight: bold;
      color: #333;
      white-space: nowrap;
    }
  
    .table001 td:last-child {
      border-bottom: none;
    }
    .table001 td.inblock{
        display: block!important;
        

    }

    .table001 td.inblock::before {
      content: attr(data-label) "";
      font-weight: bold;
      color: #333;
      white-space: nowrap;
    }

    .table001 td.inblock div{
      display: block;
      width: 100%;
     
      
    }


  }