:root {
  --primary-color: #2c7db2;
  --secondary-color: #e5e9eb;
  --text-color: #202124;
  --border-color: #dadce0;
  --card-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}
#BodyContentMain {padding-bottom:0}
#BodyContentMainDetail { background-color: #5db2ed; position: relative}
#reserve {display: flex;width: 100%;}
#reserve .title { font-weight: 700; color: #fff;padding: 15px;}
#reserve img { max-width: 100%; height: auto;}

#reserve ol { margin-top: -10px; padding-left: 20px }
#reserve li span { padding:4px 6px; border-radius:8px;}

#showTime > .flex-row {display:flex; width:100%; margin:0px;flex-direction:column; }
#taipei, #taichung, #kao, #chung  {flex-direction:column; text-align:left;width:100%; padding:1px;flex-wrap:wrap;   transition-timing-function: linear, step-end, step-end;}
.time { width:100%;}
.time em { font-style:normal; font-weight:bold; color:yellow; padding:0 5px;}
#reserve-form { margin-top: 30px;}
a[href*="tel:"] { cursor:default; text-decoration:none;}
.flex-row { padding: 45px 0;}
.btn-main {background-color: #0075c1; color:#fff;border-radius: 24px; display: block;width:300px;  padding: 10px 22px;margin: 0 auto; text-align: center;}


@media (max-width: 767px) {
#reserve .title-pic { display:none }
#reserve .title img { padding:0 0 15px}
}
@media screen and (min-width: 768px) {
#BodyContentMainDetail { padding: 15px;}
#reserve .title-pic { width: 40%; text-align: right;}
#reserve .title img { padding:30px 0 30px; }
}
@media screen and (min-width: 992px) {
#reserve .title {padding: 30px;}
#reserve .title img { padding:45px 0 30px}
#reserve .title-pic { width: 35%;}

}


/*助教服務時間表20250502*/
    .st-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    .sheet-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    
    .tab-button {
      padding: 6px 0;
      flex:1;
      background-color: #ffee00;
      color:var(--primary-color);
      border:0 solid var(--border-color);
      border-radius: 5px 5px 0 0;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 16px;
      font-weight: bold;
    }
    
    .tab-button:hover, .tab-button.active {
      background-color: #fff;
      color:var(--text-color);
      border:1px solid #ddd;
      border-bottom-width:0px;
    }
    
    .sheet-content {
      display: none;
    }
    
    .sheet-content.active {
      display: block;
    }
    .title-row {
      color:#fff;
      border-top: 4px solid #fff;
      padding: 8px 15px;
      margin: 40px 0 -20px;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      width: 100%;
    }
    .title-row:after {content:"▼"}   
    .cards-container > div:first-child{margin:0 0 -20px;}

    .cards-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin: 0;
      justify-content: flex-start;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
      flex: 1 1 calc(33.333% - 20px);
      min-width: 280px;
      /* max-width: calc(50% - 10px); */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    
    .card:hover {
      transform: translateY(-5px);
    }
    
    .badge {
      display: inline-block;
      padding: 3px 8px;
      background-color: #e2e7ef;
      color: var(--text-color);
      border-radius: 12px;
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 8px;
      align-self: flex-start;
    }
    
    .card-title {
      font-weight: bold;
      font-size: 20px;
      margin: 8px 0;
    }
    .card-title a:after{content:url("../image/icon_open.svg"); display: inline-block;padding-left: 5px; color:var(--primary-color)}
    
    .class-date {
      margin: 0;
      flex-grow: 1;
    }
    
    .tutor-locate {
      margin: 8px 0;
      color:#957016;
    }
    .tutor-locate:before {padding-right: 5px;content:url("../image/icon_locate.svg");display: inline-block; }
    
    #loading, #error-container {position:relative; animation: myLoading 2s infinite; color: #ffffff; 
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      background-color: #268AD3;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 10px auto;
      padding: 0 10px;
}

    .empty-message {
      text-align: center;
      padding: 30px;
      color: #ced6df;
      font-style: italic;
    }
    
    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
    
    @media (min-width: 1024px) {
      .card {flex: 1 1 calc(25% - 20px); }
    }
  @media (min-width:1280px) {
    .container { max-width: 1280px; width: 1280px;}
  }

  /* 動畫 */
    @keyframes myLoading {
      0%{
        top:0px;
      }
      50%{
        top:8px; 
      }
      100%{
        top:0px;
      }
    }