html, body, ul, ol, dl, dd, dt, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: #131F36;
  color: #F3ECFF;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 1rem;
}

.icon-down-arrow {
  width: 0.8571428571rem;
  height: 0.8571428571rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.04' height='25.04' viewBox='0 0 27.04 25.04' fill='none'%3E%3Cpath d='M17.873 8.935l-4.489 3.75-4.489-3.75 4.5 6.96 4.5-6.96h-.022z' stroke='rgba(173, 169, 255, 1)' stroke-width='.5' fill-rule='evenodd' fill='%23FFF' filter='url(%23filter_491_82)'/%3E%3Cdefs%3E%3Cfilter id='filter_491_82' x='0' y='0' width='27.04' height='25.04' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='feFloodId_491_82'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha_491_82'/%3E%3CfeMorphology radius='1.448' operator='dilate' in='SourceAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3.619'/%3E%3CfeComposite in2='hardAlpha_491_82' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.16862745098039217 0 0 0 0 0.6392156862745098 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='feFloodId_491_82' result='dropShadow_1_491_82'/%3E%3CfeBlend in='SourceGraphic' in2='dropShadow_1_491_82' result='shape_491_82'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") no-repeat center center/cover;
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-box .name {
  color: #fff;
  text-shadow: 0 0 0.5357142857rem rgb(46, 84, 255);
}

.container {
  height: calc(100% - 2.1428571429rem);
  margin: 1.0714285714rem 1.6071428571rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.0714285714rem;
}

::-webkit-scrollbar {
  width: 0.3125vw;
  height: 0.3125vw;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0.3125vw;
  border-radius: 0.3125vw;
  background: linear-gradient(180deg, rgb(77, 69, 245) 0%, rgb(173, 169, 255) 100%);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(77, 69, 245) 0%, rgb(173, 169, 255) 100%);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(77, 69, 245) 0%, rgb(173, 169, 255) 100%);
}

.header {
  width: 100%;
  height: 2.8392857143rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='881' height='55' viewBox='0 0 881 55' fill='none'%3E%3Cpath d='M27 9h854v38H0L27 9z' fill='url(%23linear_fill_486_1110)' fill-opacity='.4'/%3E%3Cpath d='M44 1h22L31 54H9L44 1z' stroke='url(%23linear_border_486_1111)' stroke-width='2' fill='url(%23linear_fill_486_1111)'/%3E%3Cdefs%3E%3ClinearGradient id='linear_fill_486_1110' y1='28' x2='881' y2='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232E54FF'/%3E%3Cstop offset='1' stop-color='%232E54FF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear_fill_486_1111' x1='23.158' y1='13.09' x2='53.864' y2='35.046' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%234162F2'/%3E%3Cstop offset='.842' stop-color='%237D94FD' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear_border_486_1111' x1='42.42' y1='25.232' x2='23.847' y2='9.648' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%238691DB' stop-opacity='0'/%3E%3Cstop offset='.864' stop-color='%238691DB'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat left center/auto 100%;
}
.header .left {
  display: flex;
  align-items: center;
  padding-left: 3.3571428571rem;
}
.header .left .logo {
  font-size: 1.6071428571rem;
  font-weight: bold;
  color: #fff;
  padding-right: 2.1428571429rem;
}
.header .left:after {
  display: block;
  content: "";
  width: 8.3035714286rem;
  height: 2.0357142857rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='155' height='38' viewBox='0 0 155 38' fill='none'%3E%3Cpath d='M31 38h124V0H4l27 38z' fill='url(%23linear_fill_486_1113)' fill-opacity='.3'/%3E%3Cpath d='M27 0h124v38H0L27 0z' fill='url(%23linear_fill_486_1112)'/%3E%3Cdefs%3E%3ClinearGradient id='linear_fill_486_1113' x1='4' y1='19' x2='155' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232E54FF'/%3E%3Cstop offset='1' stop-color='%232E54FF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear_fill_486_1112' y1='9.226' x2='151' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237D94FD'/%3E%3Cstop offset='.264' stop-color='%233F62FC'/%3E%3Cstop offset='1' stop-color='%232E54FF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center center/cover;
}
.header .right .btn-close-windows {
  display: none;
  border: solid 0.0964285714rem #0078FF;
  color: #0078FF;
  font-size: 0.6428571429rem;
  align-items: center;
  gap: 0.5357142857rem;
  padding: 0.5357142857rem;
}
.header .right .btn-close-windows:before {
  content: "";
  display: block;
  width: 0.7142857143rem;
  height: 0.7142857143rem;
  background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M587.19 506.246l397.116-397.263a52.029 52.029 0 0 0 0-73.143l-2.194-2.194a51.98 51.98 0 0 0-73.143 0l-397.068 397.8-397.068-397.8a51.98 51.98 0 0 0-73.143 0l-2.146 2.194a51.054 51.054 0 0 0 0 73.143l397.069 397.263L39.544 903.461a52.029 52.029 0 0 0 0 73.142l2.146 2.195a51.98 51.98 0 0 0 73.143 0L511.9 581.583l397.068 397.215a51.98 51.98 0 0 0 73.143 0l2.194-2.146a52.029 52.029 0 0 0 0-73.143L587.19 506.246z' fill='%230078FF'/%3E%3C/svg%3E") no-repeat center center/cover;
}

.wrapper {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.0714285714rem;
}
.wrapper .left-layout-box, .wrapper .right-layout-box {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
.wrapper .left-layout-box {
  flex: 1;
}
.wrapper .right-layout-box {
  flex: 1.2;
}

.section {
  width: 100%;
  flex: 1;
  display: flex;
}
.section.visualization-section-box {
  flex: 2.5;
  flex-direction: column;
}
.section.visualization-section-box .title-box {
  align-items: start;
  width: 100%;
  gap: 0.5357142857rem;
}
.section.visualization-section-box .title-box .name {
  flex-shrink: 0;
  font-size: 0.8571428571rem;
  color: #fff;
  display: flex;
  align-items: center;
  border: 0.0714285714rem solid;
  box-sizing: border-box;
  border-image: linear-gradient(90deg, rgb(0, 108, 198) 0%, rgba(0, 108, 198, 0) 100%) 0.75;
}
.section.visualization-section-box .title-box .name span {
  background: linear-gradient(90deg, rgba(46, 84, 255, 0.6) 0%, rgba(46, 84, 255, 0) 100%);
  padding: 0 0.5357142857rem;
  line-height: 2.0357142857rem;
}
.section.visualization-section-box .title-box .name:after {
  content: "";
  display: block;
  width: 1.875rem;
  height: 2.0357142857rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='38' viewBox='0 0 35 38' fill='none'%3E%3Cpath d='M4 38H0V0h31L4 38z' fill='url(%23linear_fill_491_96)'/%3E%3Cpath d='M8 0H0v38h35L8 0z' fill='url(%23linear_fill_491_97)'/%3E%3Cdefs%3E%3ClinearGradient id='linear_fill_491_96' x1='31' y1='19' x2='-120' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300D4FC'/%3E%3Cstop offset='.161' stop-color='%2300D4FC' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear_fill_491_97' x1='35' y1='9.226' x2='-116' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230078FF'/%3E%3Cstop offset='.239' stop-color='%230098E4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center center/cover;
}
.section.visualization-section-box .title-box .station-select-box {
  position: relative;
  flex: 1;
}
.section.visualization-section-box .title-box .station-group-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.3571428571rem 0.5357142857rem;
  background: #131F36 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='17' viewBox='0 0 100 17' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M0 17h100V0H0v17z' fill='url(%23linear_fill_t2y4PSHx0HOJgjSl6QhrJ)'/%3E%3Cdefs%3E%3CradialGradient id='linear_fill_t2y4PSHx0HOJgjSl6QhrJ' cx='0' cy='0' r='1' gradientTransform='matrix(0 -14.33333 44.50876 0 50 17)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%234D45F5'/%3E%3Cstop offset='1' stop-color='%23ADA9FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center bottom/100% 1.2142857143rem;
  border: 0.0535714286rem solid #ADA9FF;
}
.section.visualization-section-box .title-box .station-group-box .icon-down-arrow {
  margin-top: 0.2678571429rem;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7142857143rem;
  row-gap: 0.2678571429rem;
  margin: 0;
  padding: 0;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul li {
  display: flex;
  align-items: center;
  gap: 0.5357142857rem;
  font-size: 0.8571428571rem;
  color: #ADA9FF;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul li i {
  width: 0.8571428571rem;
  height: 0.8571428571rem;
  border: 0.0535714286rem solid rgb(243, 236, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul li.active, .section.visualization-section-box .title-box .station-group-box .station-name-group ul li:hover {
  cursor: pointer;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul li.active i, .section.visualization-section-box .title-box .station-group-box .station-name-group ul li:hover i {
  box-shadow: 0 0 0.5357142857rem 0.1071428571rem rgb(0, 141, 255);
}
.section.visualization-section-box .title-box .station-group-box .station-name-group ul li.active i:before, .section.visualization-section-box .title-box .station-group-box .station-name-group ul li:hover i:before {
  content: "";
  display: block;
  width: 0.2678571429rem;
  height: 0.2678571429rem;
  background: rgb(243, 236, 255);
  box-shadow: 0 0 0.5357142857rem 0.1071428571rem rgb(0, 141, 255);
}
.section.visualization-section-box .title-box .station-group-box .station-name-group .station-selected {
  height: 1.2857142857rem;
  overflow: hidden;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group .station-unselected {
  display: none;
  border-top: 0.0714285714rem solid;
  border-bottom: 0.0714285714rem solid;
  box-sizing: border-box;
  border-image: linear-gradient(90deg, rgb(173, 169, 255) 0%, rgba(173, 169, 255, 0) 100%) 0.75;
  border-top: solid 0.0714285714rem rgb(243, 236, 255);
  padding-top: 0.5357142857rem;
  margin-top: 0.5357142857rem;
  padding-bottom: 0.5357142857rem;
  transition: all 1s;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group .btn-group {
  display: none;
  width: 100%;
  text-align: center;
  margin-top: 0.5357142857rem;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group .btn-group .btn-start-predict {
  cursor: pointer;
  width: 100%;
  border: 0.0535714286rem solid rgb(173, 169, 255);
  background: radial-gradient(19.44% 66.67% at 0% 100%, rgb(77, 69, 245) 0%, rgba(173, 169, 255, 0) 100%);
  color: rgb(173, 169, 255);
  font-size: 0.8571428571rem;
  padding: 0.3571428571rem 0.7142857143rem;
}
.section.visualization-section-box .title-box .station-group-box .station-name-group .btn-group .btn-start-predict:hover {
  border-color: #61FBD5;
  color: rgb(25, 255, 198);
  background: radial-gradient(55.56% 50.79% at 52.7777777778% 101.5873015873%, rgb(25, 255, 198) 0%, rgba(25, 255, 198, 0) 100%);
}
.section.visualization-section-box .title-box .station-group-box:hover .station-selected {
  height: auto;
}
.section.visualization-section-box .title-box .station-group-box:hover .station-unselected {
  display: flex;
}
.section.visualization-section-box .title-box .station-group-box:hover .btn-group {
  display: block;
}
.section.visualization-section-box .content-box {
  flex: 1;
}
.section.chart-section-box {
  display: flex;
  align-items: stretch;
}
.section.chart-section-box .column-box {
  flex: 1;
  border: 0.0535714286rem dashed rgb(90, 99, 115);
  display: flex;
  flex-direction: column;
  row-gap: 0.5357142857rem;
  padding: 0.5357142857rem;
}
.section.chart-section-box .column-box .title-box {
  background: rgba(63, 81, 181, 0.3);
  padding: 0.3571428571rem 0.5357142857rem;
  text-align: center;
}
.section.chart-section-box .column-box .title-box .chart-value {
  font-size: 0.7142857143rem;
  color: #ADA9FF;
}
.section.chart-section-box .column-box .content-box {
  flex: 1;
}
.section.chart-section-box .column-box .content-box .chart-box {
  width: 100%;
  height: 100%;
}
.section.forecast-box {
  flex: 1.5;
  flex-direction: column;
  border-top: 0.0535714286rem solid rgb(158, 150, 203);
  padding-top: 0.2678571429rem;
}
.section.forecast-box .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgb(30, 45, 74) 0%, rgba(30, 45, 74, 0) 100%);
  position: relative;
  padding: 0.2678571429rem 0.5357142857rem;
}
.section.forecast-box .title-box:before, .section.forecast-box .title-box:after {
  display: block;
  content: "";
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.section.forecast-box .title-box:before {
  width: 0.3214285714rem;
  height: 0.1607142857rem;
}
.section.forecast-box .title-box:after {
  height: 0.3214285714rem;
  width: 0.1607142857rem;
}
.section.forecast-box .title-box .left-box {
  display: flex;
  align-items: center;
  background: radial-gradient(19.44% 66.67% at 0% 100%, rgb(77, 69, 245) 0%, rgba(173, 169, 255, 0) 100%);
  line-height: 1.4642857143rem;
}
.section.forecast-box .title-box .left-box .station {
  position: relative;
  font-size: 0.8571428571rem;
  cursor: pointer;
}
.section.forecast-box .title-box .left-box .station .station-name {
  display: flex;
  align-items: center;
  gap: 0.5357142857rem;
  background: radial-gradient(47.49% 47.62% at 49.3150684932% 100%, rgb(77, 69, 245) 0%, rgba(173, 169, 255, 0) 100%);
  border-bottom: solid 0.0535714286rem rgb(173, 169, 255);
  padding: 0 0.5357142857rem;
}
.section.forecast-box .title-box .left-box .station .station-name span {
  color: rgb(173, 169, 255);
  height: 1.4642857143rem;
}
.section.forecast-box .title-box .left-box .station .station-name .icon-down-arrow {
  display: none;
}
.section.forecast-box .title-box .left-box .station ul {
  position: absolute;
  background: #131F36;
  border: solid 0.0535714286rem rgb(173, 169, 255);
  width: 100%;
  display: none;
  max-height: 14.2857142857rem;
  overflow-y: auto;
  z-index: 9;
}
.section.forecast-box .title-box .left-box .station ul li {
  color: #fff;
  padding: 0.1428571429rem 0;
  border-bottom: solid 0.0535714286rem rgb(173, 169, 255);
  text-align: center;
  cursor: pointer;
}
.section.forecast-box .title-box .left-box .station ul li:hover, .section.forecast-box .title-box .left-box .station ul li.active {
  color: rgb(173, 169, 255);
  background: rgba(173, 169, 255, 0.1);
}
.section.forecast-box .title-box .left-box .station:hover ul {
  display: block;
}
.section.forecast-box .title-box .left-box .title-arrow {
  width: 1.875rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.925' height='29.541' viewBox='0 0 36.925 29.541' fill='none'%3E%3Cpath d='M.5 1.04l35 28H.5v-28z' stroke='url(%23linear_border_491_386)'/%3E%3Cdefs%3E%3ClinearGradient id='linear_border_491_386' x1='.5' y1='15.041' x2='35.5' y2='15.041' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ADA9FF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ADA9FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center center/cover;
}
.section.forecast-box .title-box .left-box .title-arrow.right {
  transform: scaleX(-1);
}
.section.forecast-box .title-box .right-box .btn {
  padding: 0.1428571429rem 0.5357142857rem;
  font-size: 0.75rem;
  background: radial-gradient(55.56% 50.79% at 52.7777777778% 101.5873015873%, rgb(173, 169, 255) 0%, rgba(46, 84, 255, 0) 100%);
  border: 0.0535714286rem solid rgb(173, 169, 255);
  color: rgb(173, 169, 255);
  cursor: pointer;
}
.section.forecast-box .title-box .right-box .btn:hover {
  background: radial-gradient(55.56% 50.79% at 52.7777777778% 101.5873015873%, rgb(173, 169, 255) 0%, rgba(46, 84, 255, 0.3) 100%);
  color: #fff;
}
.section.forecast-box .content-box {
  flex: 1;
  padding: 0.5357142857rem 0;
  position: relative;
}
.section.forecast-box .content-box .chart-box {
  width: 100%;
  height: 100%;
}
.section.forecast-record-box {
  display: flex;
  align-items: stretch;
  gap: 0.5357142857rem;
}
.section.forecast-record-box .current-forecast-water-level-box {
  background: radial-gradient(341.93% 110.83% at 26.4808362369% 0%, rgba(63, 81, 181, 0.3) 0%, rgba(0, 108, 198, 0) 100%);
  width: 15.7142857143rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
}
.section.forecast-record-box .current-forecast-water-level-box .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  color: rgb(173, 169, 255);
  font-size: 0.8571428571rem;
  justify-content: center;
  padding: 0.3571428571rem 0;
  background: linear-gradient(0deg, rgb(30, 45, 74), rgb(30, 45, 74)), rgba(63, 81, 181, 0.3);
  position: relative;
}
.section.forecast-record-box .current-forecast-water-level-box .title-box .name {
  color: inherit;
  text-shadow: none;
}
.section.forecast-record-box .current-forecast-water-level-box .title-box:before, .section.forecast-record-box .current-forecast-water-level-box .title-box:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  border-style: solid;
}
.section.forecast-record-box .current-forecast-water-level-box .title-box:before {
  left: 0;
  border-width: 0rem 0rem 0.7142857143rem 0.7142857143rem;
  border-color: transparent transparent transparent rgba(46, 84, 255, 0.5);
}
.section.forecast-record-box .current-forecast-water-level-box .title-box:after {
  right: 0;
  border-width: 0rem 0.7142857143rem 0.7142857143rem 0rem;
  border-color: transparent rgba(46, 84, 255, 0.5) transparent transparent;
}
.section.forecast-record-box .current-forecast-water-level-box .ruler-pic {
  padding: 0 1.7857142857rem;
}
.section.forecast-record-box .current-forecast-water-level-box .ruler-pic img {
  width: 100%;
}
.section.forecast-record-box .current-forecast-water-level-box .forecast-water-level-value {
  background: linear-gradient(90deg, rgba(0, 108, 198, 0) 0%, rgba(46, 84, 255, 0.2) 54.17%, rgba(0, 108, 198, 0) 100%);
  font-size: 1.2857142857rem;
  text-shadow: 0 0 0.5357142857rem rgb(46, 84, 255);
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.section.forecast-record-box .forecast-record-tabel-box {
  flex: 1;
  position: relative;
}
.section.forecast-record-box .forecast-record-tabel-box .table-main {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
}
.section.forecast-record-box .forecast-record-tabel-box table {
  width: 100%;
  border-collapse: collapse;
}
.section.forecast-record-box .forecast-record-tabel-box table tr td, .section.forecast-record-box .forecast-record-tabel-box table tr th {
  padding: 0.2678571429rem 0.5357142857rem;
  text-align: center;
  font-size: 0.8571428571rem;
  font-weight: normal;
  border: 0.0535714286rem solid rgb(90, 99, 115);
}
.section.forecast-record-box .forecast-record-tabel-box table tr th {
  color: #ADA9FF;
  background: #1E2D4A;
  position: sticky;
  top: 0;
}
.section.forecast-record-box .forecast-record-tabel-box table tr td {
  color: #F3ECFF;
}
.section.forecast-record-box .forecast-record-tabel-box table tr:nth-child(even) {
  background: rgba(0, 108, 198, 0.1);
}
.section.forecast-record-box .forecast-record-tabel-box table thead {
  position: sticky;
}

.visualization-area {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: 100%;
}

#lstm-canvas {
  width: 100%;
  flex: 1;
  border-radius: 0.7142857143rem;
  cursor: grab;
  transition: cursor 0.2s ease;
  position: relative;
  min-height: 0;
}

#lstm-canvas:active {
  cursor: grabbing;
}

.visualization-toolbar {
  position: absolute;
  bottom: 0.5357142857rem;
  right: 0;
  z-index: 15;
  display: flex;
  gap: 0.5357142857rem;
}
.visualization-toolbar .function-btn {
  width: 2rem;
  height: 2rem;
  border: 0.0535714286rem solid rgba(138, 43, 226, 0.3);
  border-radius: 0.2142857143rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8571428571rem;
  position: relative;
  background-color: rgba(0, 108, 198, 0.1);
  background-position: center center;
  background-size: 1.1428571429rem 1.1428571429rem;
  background-repeat: no-repeat;
}
.visualization-toolbar .function-btn#auto-rotate-btn {
  background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M978.24 544.15A210.453 210.453 0 0 1 992 618.666c0 167.338-198.784 297.642-446.187 308.586l31.488 31.446a32 32 0 0 1 2.198 42.837l-2.198 2.432a32 32 0 0 1-42.837 2.197l-2.432-2.197-85.333-85.333a32 32 0 0 1-2.198-42.838l2.198-2.432 85.333-85.333a32 32 0 0 1 47.467 42.837l-2.198 2.432-29.802 29.803C762.496 852.224 928 743.317 928 618.667c0-17.6-3.243-34.944-9.643-51.947a32 32 0 0 1 59.883-22.57zM87.573 524.5a32 32 0 0 1 18.411 41.323A146.667 146.667 0 0 0 96 618.667c0 91.605 90.496 178.261 233.856 220.181a32 32 0 0 1-17.963 61.44C144.213 851.2 32 743.829 32 618.667c0-25.814 4.821-51.243 14.23-75.734a32 32 0 0 1 41.322-18.432zM503.317 14.293a32 32 0 0 1 30.592.512l301.44 170.667a32.107 32.107 0 0 1 7.04 5.376l.726.79a27.179 27.179 0 0 1 2.666 3.306l.384.555.726 1.13.533.918.256.469.81 1.6-1.066-2.07a32.363 32.363 0 0 1 2.73 6.315l.214.704c.213.747.384 1.494.533 2.219l.128.661a27.797 27.797 0 0 1 .534 5.867l-.128-2.944c.085.832.128 1.664.149 2.496v341.803a32 32 0 0 1-16.256 27.84L533.909 753.173a32 32 0 0 1-30.592.512L177.131 583.02A32 32 0 0 1 160 554.667V213.333c0-11.904 6.613-22.826 17.173-28.373zM223.98 263.232L224 535.275l262.165 137.194V403.18L223.98 263.232zm563.584 4.992L550.165 402.645v267.776L787.584 536l-.021-267.776zM517.568 79.083L263.723 211.904l253.994 135.573 236.907-134.144-237.056-134.25z' fill='%23ADA9FF'/%3E%3C/svg%3E");
}
.visualization-toolbar .function-btn#dataflow-btn {
  background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M752 416a79.744 79.744 0 0 0-79.392 74.048l-69.024 8.384a111.584 111.584 0 0 0-51.872-67.104l28.576-80.544c3.84.608 7.68 1.216 11.712 1.216a80 80 0 1 0-80-80c0 28.224 14.688 52.896 36.736 67.168L520.48 418.88A109.984 109.984 0 0 0 496 416c-37.792 0-71.04 18.848-91.328 47.488l-58.048-35.296c3.328-8.8 5.376-18.208 5.376-28.192a80 80 0 1 0-23.104 56.16l61.12 37.152A111.168 111.168 0 0 0 384 528c0 28.768 11.168 54.752 28.992 74.592l-61.44 53.376A79.296 79.296 0 0 0 304 640a80 80 0 1 0 80 80c0-14.304-4.064-27.52-10.624-39.136l65.568-56.96A110.784 110.784 0 0 0 496 640c16.96 0 32.832-4.032 47.264-10.784l52.32 70.912A79.104 79.104 0 0 0 576 752a80 80 0 1 0 80-80c-12.288 0-23.744 3.008-34.144 7.936l-51.008-69.152a110.976 110.976 0 0 0 36.832-79.744l69.184-8.448A79.776 79.776 0 0 0 832 496a80 80 0 0 0-80-80z' fill='%23ADA9FF'/%3E%3C/svg%3E");
}
.visualization-toolbar .function-btn:after {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.visualization-toolbar .function-btn:hover, .visualization-toolbar .function-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
.visualization-toolbar .function-btn:hover:after, .visualization-toolbar .function-btn.active:after {
  display: block;
  background: radial-gradient(47.49% 47.62% at 49.3150684932% 100%, rgb(77, 69, 245) 0%, rgba(173, 169, 255, 0) 100%);
}

.visualization-overlay {
  position: absolute;
  top: 0.7142857143rem;
  left: 0;
  width: 7.1428571429rem;
  height: auto;
  background: #1E2D4A;
  border: 0.0535714286rem solid rgb(90, 99, 115);
  backdrop-filter: blur(8px);
  padding: 0.5357142857rem;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 0.5357142857rem;
}
.visualization-overlay .info-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7142857143rem;
  border: 1px solid rgba(0, 229, 255, 0.05);
  transition: all 0.2s ease;
}
.visualization-overlay .info-item:last-child {
  border-bottom: 1px solid rgba(0, 229, 255, 0.05);
}
.visualization-overlay .info-label {
  font-size: 0.6428571429rem;
  color: #ADA9FF;
  flex-shrink: 0;
  white-space: nowrap;
}
.visualization-overlay .info-value {
  font-size: 0.7142857143rem;
  font-weight: 600;
  color: #F3ECFF;
  font-family: "Consolas", "Monaco", monospace;
  text-align: right;
  white-space: nowrap;
}

.status-content {
  position: absolute;
  bottom: 0.5357142857rem;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5357142857rem;
  padding: 0.3571428571rem 0.5357142857rem;
  backdrop-filter: blur(15px);
  border: 0.0535714286rem solid rgb(90, 99, 115);
  width: auto;
  box-sizing: border-box;
}
.status-content .status-dot {
  width: 0.5357142857rem;
  height: 0.5357142857rem;
  border-radius: 50%;
  background: radial-gradient(circle, #4caf50 0%, #388e3c 100%);
  animation: pulse 2s infinite;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border: 0.0535714286rem solid rgba(76, 175, 80, 0.3);
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.status-content .status-text {
  color: #fff;
  font-size: 0.6428571429rem;
}

.inference-progress-container {
  position: absolute;
  bottom: 2.2857142857rem;
  left: 0;
  z-index: 20;
  padding: 0.5357142857rem 1rem;
  background: rgba(0, 108, 198, 0.1);
  backdrop-filter: blur(15px);
  border: 0.0535714286rem solid rgba(138, 43, 226, 0.3);
  animation: slideInUp 0.3s ease-out;
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.inference-progress-container .inference-progress-label {
  color: #ba68c8;
  font-size: 0.7142857143rem;
  font-weight: 600;
  margin-bottom: 0.4285714286rem;
  text-align: center;
}
.inference-progress-container .inference-progress-bar {
  width: 100%;
  height: 0.2857142857rem;
  background: rgba(138, 43, 226, 0.2);
  border-radius: 0.1428571429rem;
  overflow: hidden;
  position: relative;
}
.inference-progress-container .inference-progress {
  height: 100%;
  background: linear-gradient(90deg, #8a2be2, #ba68c8, #da70d6);
  border-radius: 0.2142857143rem;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}
.inference-progress-container .inference-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progressShine 1.5s infinite;
}
@keyframes progressShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.inference-progress-container .inference-step-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3571428571rem;
  padding-top: 0.3571428571rem;
  border-top: 0.0535714286rem solid rgba(138, 43, 226, 0.2);
}
.inference-progress-container .step-indicator {
  display: flex;
  align-items: center;
  gap: 0.1428571429rem;
  font-size: 0.5714285714rem;
  color: #ba68c8;
  font-weight: 600;
}
.inference-progress-container .step-number {
  background: linear-gradient(135deg, #8a2be2, #ba68c8);
  color: white;
  border-radius: 50%;
  width: 0.8571428571rem;
  height: 0.8571428571rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: bold;
}
.inference-progress-container .step-description {
  font-size: 0.5714285714rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
  line-height: 1.2;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5357142857rem 0.8571428571rem;
  border-radius: 0.5357142857rem;
  color: #F3ECFF;
  font-size: 0.7142857143rem;
}
.loading .loading-spinner {
  width: 1.7142857143rem;
  height: 1.7142857143rem;
  border: 2px solid rgba(138, 43, 226, 0.3);
  border-top: 2px solid #ADA9FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 0.5357142857rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=style.css.map */