*{margin:0px; padding:0px; color:#444;}

body{font-family: sans-serif;}

@media screen and (max-width:360px){
html{font-size:12px;}
input.bt{font-size:12px;}
}
@media screen and (min-width:361px) and (max-width:720px){
html{font-size:14px;}
input.bt{font-size:14px;}
}
@media screen and (min-width:721px){
html{font-size:15px;}
input.bt{font-size:15px;}
}

a{text-decoration:none;}

div.title{padding:0.7rem; background-color:#00af57; text-align:center;}

input.bt{background-color:#00af57; color:#FFF; border:none; width:8rem; height:2.6rem; border-radius:0.5rem;}

div.main_box{display:flex; gap:2rem; margin:0.5rem;}

div.left_box{display:flex; flex-direction: column; justify-content: flex-start; width:10%; min-width:8rem; min-height:600px;}

div.left_box span{display:flex; font-size:1.1rem; background-color:#00af57; color:#fff; border-radius:0.5rem; justify-content: center; align-items: center; height:3rem; margin-bottom:10px;}

div.right_box{flex:1; min-height:600px; border-radius:0.5rem; background-color: #f1f1f1;}

div.table_area{display:flex; flex-direction:row; justify-content:space-around; gap:1rem; }

div.subarea{display:flex; width:20%; flex-direction:column; align-items: center;}

div.seat{cursor:pointer; background-color:#fff; width:10rem; margin:0.3rem 0.5rem;  padding:0.2rem; box-sizing: border-box; border-radius:0.5rem; display: flex; flex-direction: column; justify-content: space-between;}

div.seat div.status{font-size:0.9rem; font-weight:bold; background-size:1rem; background-repeat:no-repeat; background-position: left center; padding-left:1.2rem;}

div.seat div.busy{color:#ff4545; background-image: url(/images/busy.png);}

div.seat div.idle{color:#00aa33; background-image: url(/images/idle.png);}

div.seat div.number{ text-align: center; font-size:2rem; font-weight:bold; color:#787878;}

div.seat div.note{text-align: center; font-size:0.9rem; color:#999;}

div.maintitle{text-align: center; font-size:2rem; font-weight:bold;}

div.maincontent{width:50rem; margin:0 auto;}

div.maincontent table{border:none;}

div.maincontent td{font-size:1.3rem; padding:0.8rem 0.4rem;}

.radio-box{
    padding:0.3rem 1rem;
    border:2px solid #00af57;
    color:#00af57;
    background:#fff;
    margin-right:1rem;
    margin-bottom:1rem;
    cursor: pointer;
    border-radius:0.5rem;
    font-size:1.3rem;
  }

.radio-box span{
    color:#00af57;
  }

  /* 隐藏原生圆形单选按钮 */
  .radio-box input[type="radio"]{
    display: none;
  }

  .radio-box input[type="checkbox"]{
    display:none;
  }
  
  /* 选中时改变外层矩形背景色 */
  .radio-box input[type="radio"]:checked + span{
    color:#fff;
  }
  
  .radio-box input[type="checkbox"]:checked + span{
    color:#fff;
  }

  .radio-box:has(input:checked){
    background:#00af57;
  }

  input.bt2{background-color:#00af57; font-size:1.3rem; color:#FFF; border:none; width:10rem; height:3rem; border-radius:0.5rem; cursor:pointer;}

  select{font-size:1.3rem; color:#444; padding:0.5rem; border-radius:0.5rem;}

  input.text{outline:none; box-sizing:border-box; font-size:1.3rem; padding:0.5rem; width:8rem; border:2px solid #ccc; background-color:#fff; border-radius:0.5rem;}