/*
  - use @media :root em and rem to fit screen
  - use php / js calculate for different size
  - 
*/
@media only screen and (max-width: 300px) { 
  :root{font-size: 1.0em;}}

@media screen and (min-width: 300px) and (max-width:600px) {
  :root{font-size: 3.5em;}}
@media only screen and (min-width: 300px) and (max-width:600px) {
  :root{font-size: 1.5em;}}

@media screen and (min-width: 600px) and (max-width:900px) {
  :root{font-size: 3em;}}
@media only screen and (min-width: 600px) and (max-width:900px) {
  :root{font-size: 2em;}}

@media screen and (min-width: 900px) and (max-width:1200px)  {
  :root{font-size: 2.5em;}}
@media screen and (min-width: 1200px) and (max-width:1500px)  {
  :root{font-size: 3em;}}
@media screen and (min-width: 1500px) and (max-width:1800px)  {
  :root{font-size: 8em;}}
/*
*{
  font:yahei;
	font-size:1rem;
}
*/
*{
  font:yahei;
  /*margin-right:1%;*/
}
h1,h2,h3,h4,h5,h6{
  color:grey;
}
div.div_headinfo{
	width:100%;
  align-content: center !important;
}
.headinfo{
  color:grey;
  font-size: 0.8rem;
  align-content: center;
  }
body{
  background-color: black;
  color:white;
  width:100%;
  height:100%;
}

textarea{
  width:100%;
  /*height:10rem;*/
  height:30rem;
  font-size:0.9rem;
  background-color: black;
  /*border-style:dotted;
  margin-left:2%;
  margin-right:2%;
  border-radius:2px ;
  border-color: black;*/
  color:white;
}
textarea.myshareinfo{
  width:96%;
  font-size:0.8rem;
  margin-left:2%;
  margin-right:4%;
  background-color: black;
  border-radius:2px ;
  border-style:dotted;
  border-color: black;
  color:white;
  height:6rem;
}

button{
 font-size:1rem;
}
button.button_header {
 background: #3094D0;
 cursor: pointer;
 border: 1px solid transparent;
 border-radius: 3px;
 color: white;
 font-size:0.9rem;
 height: 2.5rem;
 width: 25%;
 margin-left:0rpx;
 }

button.button_footer {
 color: white;
 /*background-color:rgb(19,153,147);*/
 background-color:grey;
 border: 1px solid transparent;
 border-radius: 3px;
 /*color: white;*/
 font-size:0.8rem;
 height: 2rem;
 width: 20%;
 margin-left:0rpx;
 }

 button.button_footer:hover {
     background-color: red;
	 color:white;
 }

 button.button_footer:focus {
     background-color: red;
	 color:white;
 }

#su_func,button.button_normal,button.button_normal_motd{
 background: black;
 border: 1px solid transparent;
 border-radius: 3px;
 /*border-style:dotted;*/
 border-color: #2A2A2A;
 color: white;
 font-size:0.9rem;
 height: 1.3rem;
 width: 22%;
 margin-left:1%;
 display:block;
}

#su_func,button.button_normal:hover{
 background-color:#3A3A3A;
}
span.span_normal{
 background: black;
 border: 1px solid transparent;
 border-radius: 3px;
 /*border-style:dotted;*/
 border-color: #2A2A2A;
 color: white;
 font-size:0.8rem;
 height: 1.2rem;
 width: 22%;
 margin-left:1%;
 text-align:center;
}
span.span_normal:hover{
 background-color:#3A3A3A;
}
button.button_opinion{
 background: black;
 border: 1px solid transparent;
 border-radius: 3px;
 border-style:dotted;
 border-color: orange;
 color: white;
 font-size:0.7rem;
 height: 1rem;
 width: 15%;
 margin-left:1%;
}
button.button_opinion:hover{
 background-color:#3A3A3A;
}
button.button_normal_motd:hover{
 background-color:#3A3A3A;
}
 
thead{
  color: red;
}

tbody{
  color:orange !important;
}

/* for nicelogin*/
.form_login {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.4em;
  background-color: #171717;
  border-radius: 1rem;
  transition: .4s ease-in-out;
}

.form_login:hover {
  transform: scale(1.05);
  border: 1px solid black;
}

#heading_login {
  text-align: center;
  margin: 2em;
  color: rgb(255, 255, 255);
  font-size: 1.2em;
}

.field_login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 2px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.input-icon_login {
  height: 1.3rem;
  width: 1.3rem;
  fill: white;
}

.input-field_stockcode {
  background: none;
  outline: none;
  border-radius:2px ;
  border-style:dotted;
  border-color: red;
  width: 50%;
  color: #d3d3d3;
	font-size:1rem;
}

.form_login .btn_login {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 2.5em;
}

.button_login,.button_signup,.button_forgetpwd{
  padding: 0.5em;
  border-radius: 5px;
  margin-right: 0.5em;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-color: #252525;
  color: white;
}

button.button_login{
  padding-left: 1.1em;
  padding-right: 1.1em;
}
button.button_signup {
  padding-left: 2.3em;
  padding-right: 2.3em;
}
button.button_forgetpwd {
  padding: 0.5em;
  border-radius: 5px;
}

button.accordion,button.alarminfo {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 0.2rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    transition: 0.4s;
    display:flex;
}

div.cliphead {
    padding: 0;
    width:100%;
    background-color: rgba(0, 0, 0, 1);
    height:1.2rem;
    display:flex;
    font-size:1rem;
}

div.accordion,div.alarminfo{
    background-color: none;
    color: none;
    padding: 0;
		height:1.5rem;
    width: 100%;
    outline: none;
    font-size: 1rem;
    transition: 0.4s;
    display:flex;
    text-align: right;
}

div.panel {
    padding: 0;
    background-color: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-size:0.6rem;
}
div.line_in_panel {
    background-color: #0A0A0A;
    color: none;
    padding: 0;
		height:1rem;
    width: 100%;
    outline: none;
    display:flex;
}
div.line_in_panel_high {
    background-color: #0A0A0A;
    color: none;
    padding: 0;
	height:1.3rem;
    width: 100%;
    outline: none;
    display:flex;
}
span.clipcol{
  display:block;
  font-size:0.7rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  color:white;
  width:16%;
  text-align:right;
}
span.clipcolwholeline{
  display:block;
  font-size:0.7rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  color:white;
  width:90%;
  text-align:right;
}

span.clipcol_long{
  display:block;
  font-size:0.62rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  /*background-color: grey;*/
  color:white;
  width:19%;
  text-align:right;
  
  /*margin-right:0.5%;*/
}

span.clipcol_long_newname{
  display:block;
  font-size:0.8rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  /*background-color: grey;*/
  color:white;
  width:17%;
  /*margin-right:0.5%;*/
  text-align:right;
}

span.alarm_clipcol{
  display:flex;
  font-size:0.9rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  color:white;
  width:15%;
	text-align:right;
}

span.alarm_clipcol_long{
  display:flex;
  font-size:0.6rem;
  border:none;
  background-color: rgba(0, 0, 0, 1);
  /*background-color: grey;*/
  color:white;
  width:45%;
}
span.detail_name{
  font-size:0.52rem;
  border:none;
  background-color: #0A0A0A;
  /*background-color: grey;*/
  color:white;
  width:14%;
}
span.detail_data{
  font-size:0.60rem;
  border:none;
  background-color: #0A0A0A;
  /*background-color: grey;*/
  color:white;
  width:14%;
  text-align:right;
}
span.detail_data_bs{
  font-size:0.65rem;
  border:none;
  background-color: #0A0A0A;
  /*background-color: grey;*/
  color:white;
  width:12.5%;
  text-align:right;
}

span.detail_data_wholeline{
  font-size:0.6rem;
  border:none;
  background-color: #0A0A0A;
  /*background-color: grey;*/
  color:white;
  width:fit-content;
}

span.detail_data_wholeline_bszc{
  font-size:0.80rem;
  border:none;
  background-color: none;
  /*background-color: grey;*/
  color:white;
  width:fit-content;
}

#monthinfo,#weekinfo,#dayinfo,#m30info,#m5info,#m1info{
  font-size:0.80rem;
  }


button.detail_data_button{
 /*background: lightslategray;*/
 background: #0A0A0A;
 border: 1px solid transparent;
 border-radius: 3px;
 color: red;
 font-size:0.8rem;
 height:   1rem;
 width: 22%;
 margin-left:10%;
 margin-right:10%;
}

button.alarm_button{
 /*background: lightslategray;*/
 background: #0A0A0A;
 border: 1px solid transparent;
 border-radius: 3px;
 color: red;
 font-size:0.6rem;
 height:   1rem;
 width: 20%;
 margin-left:0%;
 margin-right:0%;
 color:#8A8A8A;
}

button.detail_data_button:hover{
 	background-color:#0A0A0A;
	color:white;
}

#basicinfo,#periodinfo,#bszcinfo,#sharedanalyze{
	display:none;
}

#switchbasicinfo,#switchperiodinfo,#switchbszcinfo,#switchsharedanalyze{
 background-color: #3A3A3A;
 border: 1px solid transparent;
 border-radius: 3px;
 /*border-style:dotted;*/
 border-color: #2A2A2A;
 color: white;
 font-size:0.8rem;
 height: 1.5rem;
 width: 50%;
 margin-left:1%;
 }

#switchbasicinfo:hover{
 	background-color:black;
}
#switchperiodinfo:hover{
 	background-color:black;
}
#switchbszcinfo:hover{
 	background-color:black;
}
#switchsharedanalyze:hover{
 	background-color:black;
}
a.footera{
	text-decoration: none;
  	color:rgb(19,153,147);
  	font-size: 0.6rem;
	margin-left:1%;
  /*background-color:rgb(19,153,147);*/
}

/* 固定footer*/
body,html,main{
  height:100%;
}
div{
	background-color:black;
}
div.box{
  display:flex;
  display: -webkit-flex;
  height:100%;
  flex-direction:column;
  background-color:black;
  margin-left:8rpx;
  margin-right:8rpx;
}
div.roll{  
  flex: 1; 
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: auto;
  position: relative;     /*relative positioning*/
  background-color:black;
  margin-left:8rpx;
  margin-right:8rpx;
}
footer.footer{
  height: 4rem;
}
#showmotdhistory_div,#sendsuggestion_div{
	display:none;
}
u{
	text-decoration: underline red;
	/*border-bottom: 3px solid red;
	padding-bottom: 1px;*/
}
hr{
	align:center;
	border-color:#2A2A2A;
	color:#2A2A2A;
	size:1px;
}
/* for login */
/* for login 3 ball*/
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  background-color: #3A3A3A;
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: .7;
  }

  100% {
    transform: scaleX(.2);
    opacity: .4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}
/* for login 3 ball*/
/* for typing */
    .typingbox{
        width: 100%;
        height: auto;
        /*background: url('./img/timg.jpg') no-repeat 100% 100%;
        background-size: cover;*/
        position: relative;
    }
    .typingcontent{
        height: 98%;
        width: 98%;
        background: #3A3A3A;
        position: absolute;            
        left: 1%;
        top: 1%;
        /*margin-left: -30%;
        margin-top: -16%;*/
        border-radius: 4px;
    }
    /* filter是对该元素的模糊，因此对content添加并模糊伪元素，并定位到content的下层，而不是直接修改背景图或content的样式 */
    .typingcontent::before{
        content: '';
        position: absolute;
        top:0;right:0;bottom:0;left:0;
        filter: blur(3px);
        margin:-2rem;  
        /*background: url('./img/timg.jpg') no-repeat 100% 100%;
        background-size: cover;*/
        opacity: .8;
    }
    .typingcontent p{
        padding: 0rem 0rem;
        color: white;
        text-indent: 0.2rem;
        font-size: 0.9rem;
        line-height: 1.3rem;
        letter-spacing: 1px;
        /* 清除子元素对父元素filter属性值的继承 */
        filter: blur(0);          
    }
/* for typing */
	.two-one { 
		display: grid; 
		/*grid-template:repeat(1,1fr)/repeat(3,1fr);*/
		grid-template-columns:25% 35% 40%;
		grid-template-rows:100%;
		background-color:black;
		grid-gap:0px;
	}

.el-backtop:hover {
    background-color: rgba(255,255,255,0.4);
}

.el-backtop {
    position: fixed;
    /*background-color: #fff;*/
    background-color: rgba(255,0,0,0.4);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(0,0,0,.12);
    cursor: pointer;
    z-index: 5;
}
/*
.btn {
    width: 0;
    height: 0;
    position: fixed;
    align-items: center;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #999;
}
*/
#div_login,#div_etf,#div_focus,#div_bszc,#div_choose,#div_me,#div_regist,#div_changepw,#div_forgetpw,#div_kmwd,#div_ktfo,#div_kmw,#div_kdt,#div_kfo{
	/*height: 600px;*/
	width: 100%;
    position: absolute;
    /*border-style: solid;
	border-color: black;*/
    border-width: 1px;     /*10px border*/
	/*opacity:1;*/
	background-color: black;
  	height: 100%;
	z-index: -1;
}

/*
#div_focus{
	z-index: -1;
}

#div_login,#div_bszc,#div_choose,#div_me{
	z-index: -1;
}
*/
#div_etf{
	z-index:1;
}

#ballId {
      /*background: rgb(19, 167, 19);*/
      background: rgb(19,153,147);
      color: white;
      width: 2rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      border-radius: 50%;
      box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.5);
      /* 过渡效果在IE下展示效果不友好 */
      transition: all 0.08s;
      user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      top: 85%;
      left: 90%;
      transform: translate3d(-50%, -50%, 0);

	  opacity:0.8;
	  z-index:9;
}
.log {
      /*background: rgb(19, 167, 19);*/
      background: rgb(19,153,147);
	  font-size:0.6rem;
      color: black;
      width: 2rem;
      height: 1rem;
      text-align: center;
	  border-color:black;
      /*line-height: 2rem;*/
      /*border-radius: 5%;*/
      /*top: 85%;*/
      left: 95%;
	  z-index:9;
}