/* 添加黑色背景 */
body {
  background-color: black;
  color: white; /* 设置页面文字颜色为白色 */
  font-family: Arial, sans-serif; /* 设置字体 */
  margin: 0;
  padding: 0;
  height: 100vh;
}
html {
  margin: 0;
  padding: 0;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* 右上角标题样式 */
.header {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  align-self: flex-end;
}

/* 日期样式 */
#currentDate {
  margin-right: 5px; /* 添加右边距 */
  width:70px;
}
/* 左上角文本样式 */
#additionalText {
  margin-right: 10px;
  color: #a0a0a0;
}
#MA5Text {
  position: fixed;
  top: 3px;
  left: 80px;
  display: none;
}
#ZhangFuText {
  position: fixed;
  top: 4px;
  left: 220px;
  display: none;
}
#ZhangFuPTGText {
  position: fixed;
  top: 4px;
  left: 285px;
  display: none;
}
#moneyvs {
  position: fixed;
  top: 3px;
  /* left: calc(50vw - 610px); */
  left: 355px;
  display: none;
}

/* 按钮样式 */
#refreshButton {
  cursor: pointer; /* 鼠标指针样式 */
}

/* 消息框样式 */
.message-box {
  position: fixed;
  bottom: 10px;
  right: 80px;
  background-color: rgba(255, 99, 71, 0.2);
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: none;
}

/* 新添加的开关样式 */
.toggle-switch {
  margin-left: 5px;
  display: flex;
  align-items: center;
}
.toggle-switch input[type="checkbox"] {
  appearance: none;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.toggle-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  transition: left 0.3s ease;
}
.toggle-switch input[type="checkbox"]:checked {
  background-color: #5bc0de; /* 切换开关时的背景颜色 */
}
.toggle-switch input[type="checkbox"]:checked::before {
  left: calc(100% - 18px); /* 切换开关时按钮的位置 */
}

/* 添加样式来设置📅图标的外观 */
#calendarIcon {
    cursor: pointer; /* 设置鼠标指针样式为手型 */
    font-size: 20px; /* 设置图标大小 */
    margin-right: 5px; /* 添加右边距 */
    margin-bottom: 2px;
}
#loading {
  display: none; /* 默认隐藏加载图标 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.chartBox {
  width: 100%;
  /*padding: 20px;
  border-radius: 20px;
  border: solid 3px rgba(54, 162, 235, 1);*/
  background: black;
}
#myChart {
  max-height: calc(100vh - 29px);
}
.ctr {
  display: flex;
  flex-direction: column;
}

#suofang {
  position: fixed;
  bottom: 10px;
  left: 10px;
/*  width: 30px;
  height: 30px;*/
  background-color: rgba(255, 255, 255, 0.6);
}
#suofang .up {
  position: relative;
  width: 60px;
  height: 60px;
  float: left;
}
#suofang .down {
  position: relative;
  width: 60px;
  height: 60px;
  float: right;
  transform: rotate(-180deg);
}

#xiantiao {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.6);
}
#xiantiao .qingxudiejia {
  position: relative;
  width: 60px;
  height: 60px;
  float: left;
  transform: rotate(-90deg);
}