body,
head,
html {
  margin: 0;
  padding: 0;
  height: 150%;
  font-family: Arial, sans-serif;
  background-color: aliceblue;
}
/* body{
  overflow-x:hidden;
  overflow-y: hidden;
} */

.box {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  .topbar {
    height: 5%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333;
    color: white;
    text-align: center;
    z-index: 1000; /* 确保顶栏在最上面 */
    line-height: 5%; /* 使文字垂直居中 */
  }
  .sidebar {
    height: 100%;
    width: 10%;
    position: fixed;
    top: 5%; /* 开始于顶栏之下 */
    left: 0;
    background-color: #333;
    overflow-x: hidden;
    padding-top: 20px;
    .sidebar-header {
      padding: 10px;
      text-align: center;
      color: white;
    }
  }
  .menu {
    list-style-type: none;
    padding: 0;
  }
  .menu li {
    padding: 10px;
    text-align: center;
  }

  .menu li a {
    color: white;
    text-decoration: none;
  }

  .menu li a:hover {
    background-color: #555;
  }
  
  .content {
    margin-left: 10%; /* 对应侧边栏宽度 */
    margin-top: 3%; /* 对应顶栏高度 */
    padding: 20px;
    .container {
      display: flex;
      justify-content: space-between; /* Arrange elements with space between */
      align-items: center;
      margin-bottom: 20px;
      .iframe-column {
        width: 45%; /* Adjust width as needed */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        input[type="checkbox"] {
          margin-right: 5px;
        }
        iframe {
          
          overflow-y:hidden;
          overflow-x: scroll;
          background-color: rgb(191, 205, 205);
        }
      }
    }
  }
}


@media screen and (max-width: 768px) {
    .box {
      display: flex;
      flex-direction: column;
    }
  
    .sidebar {
      width: 100%;
      order: 2; /* 调整在移动设备上的显示顺序 */
    }
  
    .content {
      width: 100%;
      order: 3; /* 调整在移动设备上的显示顺序 */
    }
  
    .iframe-column {
      width: 100%; /* 充满整个容器 */
      overflow: hidden;
    }
    iframe {
        width: 100%; /* 充满iframe容器 */
        height: auto; /* 根据内容调整高度 */
      }
    }