body {   
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 10px;
    padding: 0;
    /*display: inline;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /*align-items: center;*/
    align-items: flex-start;
    /*height: 100vh;*/
}

:root {
    --button-bg-color: #5cb85c; /* 默认颜色 */
    --button-hv-color: #4cae4c; /* 点击颜色 */
    --button-text-color: white; /* 默认文字颜色 */
}

.form-control {
    display: flex;
    flex-direction: column;
    width: 300px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-control label {
    margin-bottom: 5px;
}

.form-control input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

button {
    padding: 10px;
    width: 100%;
    background-color: var(--button-bg-color);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#set-button{
    display: none; /*默认隐藏按钮 */
}

button:hover {
    background-color: var(--button-hv-color);
}

#loginForm{
    /*display: flex;*/
}

#activeForm{
    display: none; /*默认隐藏按钮 */
    /*position: fixed;*/
    top: 20px; /* 距离底部20px */
    width: 80%; /* 容器宽度为100% */
}

#video-container{
    display: none; /*默认隐藏按钮 */
    flex-direction: column;
    width: 300px;
    /*position: fixed;*/
    /*top: 30%;  距离底部20px */
    /*width: 80%;  容器宽度为100% */
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#videoButton-container{
    display: flex;
    text-align: center; /* 居中对齐文本 */
    flex-direction: row;
}
#startButton
{
    margin-right: 10px;
    width: 120px;
}
#imageInput {
    padding: 10px;
    width: 100%;
    background-color: var(--button-bg-color);
    color: white;
    border: none;
    border-radius: 3px;
}

#videoElement{
    
    display: flex;
    left: 20px;
    width: 300px;
}

#codeForm{
    display: flex;
}
#ac_Code{
    width: 220px; 
}
#copycode{
    /* position: absolute; 绝对定位按钮 */
    /*float: right;  按钮右边距设置为0，即放置在最右边 */
    width: 60px; /* 容器宽度为100% */
}


#activeButton{
    /*
    margin-left: 50px
    width: 220px;
    */
    margin-top: 10px;
}

#activeForm_Text
{
    /*
    float: left;
    width: 50%;
    */
}
.page-title {
    display: flex;
    text-align: center;
    position: fixed;
    top: 20px;
}

#buttons-container {
    display: flex;
    text-align: center; /* 居中对齐文本 */
    flex-direction: row;
    /*width: 100px;*/
    /*left: 350px;*/
    /*position: absolute;*/
    /*top: 10%;*/
    /*bottom: 35%;  距离底部20px */
    /*width: 80%;  容器宽度为100% */
}

#button1 {
    margin: 5px; /* 按钮之间的间隔为5px */
    float: left;
    display: none; /*默认隐藏按钮 */
}

#button2 {
    margin: 5px; /* 按钮之间的间隔为5px */
    float: right;
    display: none;  /*默认隐藏按钮 */
}

#activeButton_1{
    margin: 5px; /* 按钮之间的间隔为5px */
}
#activeButton_2{
    margin: 5px; /* 按钮之间的间隔为5px */
}
#activeButton_3{
    margin: 5px; /* 按钮之间的间隔为5px */
}
#activeButton_4{
    margin: 5px; /* 按钮之间的间隔为5px */
}
#activeButton_5{
    margin: 5px; /* 按钮之间的间隔为5px */
}