* {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    color: #222;
}
:root {
    --color-menu-bg: #fff;
    --font-color-mi: #000;
    --font-color-mi-hover: #1890ff;
    --color-bg-mi-hover: #ececec;
    --border-radius-mi: 2px;
    --transition-menu-time: 0.2s;
    --color-line-bg: #d3d3d3;
}
body{
    
    overflow: hidden;
}

input[type='checkbox']:not(.HQCheck) {
    display: none;
}

.menu-item>label{
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: var(--border-radius-mi);
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.menu-item>label .Main-title{
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    position: relative;
    left: 0px;
    font-size: 36px;
}
.menu-item>label .Sub-title{
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    position: relative;
    left: 5px;
    font-size: 24px;
}


.Main-title:hover{
    color: var(--font-color-mi-hover);
}
.Sub-title:hover{
    color: var(--font-color-mi-hover);
}

.rule-text{
    height: 0;
    overflow: hidden;
    transition: height var(--transition-menu-time);
    text-align: left;
    width: 700px;
    margin-top: 20px;
    margin-left: 50px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
}
.rule-text>div{
    margin-top: 6px;
}
/* 选项，若 n 项，就 n * 40px */
.menu-item>input#menu-item1:checked~.rule-text {
    height: calc(8 * 50px);
}

.BackgroundImg{
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    transform: scale(1.5);
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    filter:blur(5px);
}
.search-field{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.spin-button {
    position: relative;
    margin-top: 20px;
    width: 100%;
}

.spin-button__input {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    overflow: hidden;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 0.5rem;
    width: 500px;
    outline: none;
    margin-left: 70px;
    box-shadow: 0px 0px 5px 0px #000;overflow-y: auto;display: block;
    
}

.spin-button__label{
    color: #222;
    transition: all 0.3s;
    position:absolute;
    top:50%;
    left: 0.5em;
    transform: translateY(-50%);
    padding: 70px;
    pointer-events: none;
}

.spin-button__input:valid ~ label{
    top:-40%;
    left: 0;
}
.spin-button__input:focus ~ label{
    top:-40%;
    left: 0;
}
.search-btn{
    border: 1px solid #d1d5db;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 70px;
    width: 150px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--color-menu-bg);
    color: var(--font-color-mi);
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px #000;overflow-y: auto;display: block;
    font-size: 18px;
}
.search-btn:hover {
    background-color: var(--color-bg-mi-hover);
    color: var(--font-color-mi-hover);
}

.card{
    background-color: #f3f3f3;
    box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 1px;
    border-radius: 15px;
    border-color: rgba(255, 126, 126, 0.3);
    box-shadow: 0px 0px 20px 0px rgba(255, 126, 126);display: block;
    border-style:solid;
    margin: 10% auto;
    width: 800px;
    text-align: center;
}
.RoomNumber{
    flex: 3;
}
.Info{
    flex: 5;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.Time{
    flex: 2;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.selectList{
    margin-top: 10px;
    margin-left: 4%;
    width: 90%;
    height: 0px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 0px #000;overflow-y: auto;display: block;
    border-radius: 0.25rem;
    overflow: hidden;
    transition: height var(--transition-menu-time);
}

.selectList::-webkit-scrollbar{
    width: 0;
}

.selectList .thead{    
    width: 100%;
    background-color:#e7e7e7 ;
    box-shadow: 0px 0px 0px 0px #000;overflow-y: auto;display: block;

}

.selectList .thead .item{
    text-align: center;display: flex; justify-content: space-around;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
}
.selectListBody{
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 0px #000;overflow-y: auto;display: block;
    table-layout: fixed;
}

.selectListBody .item{
    margin-top: 5px;	
    text-align: center;display: flex; justify-content: space-around;
    display: flex;
    align-items: baseline;
}


.selectListBody .item:hover{
    background-color: var(--color-bg-mi-hover);
    color: var(--font-color-mi-hover);
}

.selectListBody .item:hover td {
    background-color: var(--color-bg-mi-hover); /* 改变背景颜色 */
    color: var(--font-color-mi-hover); /* 改变字体颜色 */
}


#menu-item2:checked~.selectList {
    height: calc(8 * 50px);
}

.List::-webkit-scrollbar {
    /*滚动条宽*/
    width: 4px;
  }

  .List::-webkit-scrollbar-thumb {
    /*正在滑动的小块*/
    border-radius: 10px;
    background-color: rgb(0, 0, 0);
  }

  .List::-webkit-scrollbar-track {
    /*滚动内部轨道*/
    box-shadow: inset 0 0 5px rgba(204, 91, 91, 0.2);
    background: rgb(159, 159, 163);
    border-radius: 10px;
  }