/*******************************
             Page
*******************************/
html,
body {
  height: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  font-size: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* Border-Box */
/*******************************
        20190724, i change body font-size from 14px to 16px
*******************************/
body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  min-width: 320px;
  background: #FFFFFF;
  font-family: 'Helvetica Neue', 'Segoe UI', 'Lato', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4285em;
  color: rgba(0, 0, 0, 0.87);
  /*  ///font-smoothing: antialiased; */



}


/*

<family-name>  字体系列的名称。例如，“Times”和“Helvetica”是字体系列,包含空格的字体系列名称应加引号。
<generic-name> 通用字体系列是  一种在没有指定字体可用时保留style sheet的方法。通用姓氏是关键字，不得加引号
serif 字形具有最终笔划、喇叭形或锥形末端，或者具有实际的衬线末端。
sans-serif 字形的笔划结尾是简单的  Glyphs have stroke endings that are plain。
monospace  所有字形都具有相同的固定宽度
cursive 看起来更像手写钢笔或毛笔书写
emoji 专门为渲染表情符号而设计的字体。


most used fonts:    Helvetica   ;  Sans serif 
/*****/










/*******************************
             Headers
*******************************/

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Helvetica Neue', 'Segoe UI', 'Lato', Arial, Helvetica, sans-serif;
  line-height: 1.28571429em;
  margin: calc(2rem - 0.14285714em) 0.5rem 1rem;
  font-weight: bold;
  padding: 0em;
}


/* if you like, you can even define your own tag, which will works pretty fine just like div h1 etc. */
div1 {
  min-height: 1rem;
  font-size: 12rem;
}

div2 {
  display: flex;
  justify-content: start;
  width: 100%;
  flex-direction: row;
}


.eachline {
  display: block;      /* 使用 block 而不是 flex ，非常重要，跟下面的.onesubnodespan { display: inline-block; 相互呼應 */
  margin-bottom:0.5px; /* 0.5px 是必须的否则行与行之间会太拥挤 */
}


.eachline_underline {
  border-bottom:1px solid darkgrey;
 
}



.eachbulletedli {
  display: block;
  margin-bottom:0.5px;

}

/* 
a:hover::after  {
  content: '\2022'; color: #333; 
} */

a::after  {
  /* \0020 == &nbsp;     */
  /* 00A0	NO-BREAK SPACE */
  content: '\00A0 \00A0 \00A0 \00A0';     
  /* content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';       */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'  width='21' height='21' viewBox='0 0 16 16'%3e%3cpath fill='%2328a745' d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3e%3cpath fill='%2328a745' d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  /* ///background-position: center; */
  background-position: top 60% left 50%;
  /* text-decoration: none  !important;  */
}




/* ///  content: '\2022'; color: #333; royalblue*/

/* 
content: '\2022'; 一个小圆点
content: '\2610';  复选框
content: '\2611';  复选框 勾勾   color: #156915;
content: '\2612';  复选框 叉叉   color: #971E1E;
*/

.eachbulletedli:before {
	content: '\2022    ';
	color: rgba(70, 110, 230,0.8);
	/* content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	background: rgba(70, 110, 230,0.8);
	border-radius: 50%;
	margin: auto 8px auto 1px;   */
}


.eachnumberedli {
  display: block;
  margin-bottom:0.5px;
}

.eachnumberedli:before {
  font-size:90%;
  color: rgba(70, 110, 230, 1);
  content: counter(listCounter) ".  ";  
  counter-increment: listCounter;
}

markspan { 
  background: rgba(255, 255, 105, 0.94); 
} 




  /* display: inline-block;  height:100%; box-sizing: border-box;*/
.onesubnodespan {
  display: inline-block;
 
  margin:0;
  padding-left:0.3rem;
  padding-right:0.3rem;
  border-radius:0.25rem;
  border-color:lightgrey;
}

.hlcss00 { 
 
  background: inherit; 
  color:inherit;
} 


.hlcss01 { 
 
  background:rgba(120,140,160,1)  !important; 
  color:rgba(255,255,255,1)  !important;
} 


.hlcss02 { 
 
  background: rgba(120,70,230,1)  !important; 
  color:rgba(255,255,255,1)  !important;
} 


.hlcss03 { 
 
  background: rgba(110,200,145,1)  !important; 
  color:rgba(255,255,255,1)  !important;
} 


.hlcss04 { 
 
  background: rgba(250,230,100,1)  !important; 
  color:rgba(0,125,125,1)  !important;
} 


.hlcss05 { 
 
  background: rgba(240,50,20,1)  !important; 
  color:rgba(255,255,255,1)  !important;
} 



.hlcss06 { 
  
  background: rgba(20,20,20,1)  !important; 
  color:rgba(255,255,255,1)  !important;
} 

.hlcss07 {      /*https://twitter.com/home the post button */ 
   background: rgba(30,140,220,1)  !important; 
   color:rgba(255,255,255,1)  !important;
 } 


 .hlcss08 {      /*https://twitter.com/home the post button */ 
  color: rgba(255,0,0,1)  !important; 
  background:rgba(255,255,255,1)  !important;
} 



.hlbold { 
  font-weight: 700;
} 



/*
  border-radius: 3px; 
  border: 0.1px dashed blueviolet;   使用 0.1px 的原因就是让 框框的宽度足够小而不会排挤到其他的文字
 box-sizing: content-box;*/

h1 {
  min-height: 1rem;
  font-size: 2rem;
}

h2 {
  font-size: 1.71428571rem;
}

h3 {
  font-size: 1.28571429rem;
}

h4 {
  font-size: 1.07142857rem;
}

h5 {
  font-size: 1rem;
}

button,
input {
  overflow: visible;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* 
body ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}


body ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

body ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0px;
}
textarea::selection, input::selection {
    background-color: rgba(100, 100, 100, 0.4);
    color: rgba(0, 0, 0, 0.87);
}
::selection {
    background-color: #CCE2FF;
    color: rgba(0, 0, 0, 0.87);
}





 

.tooltip {
  display: inline;
  position: relative;
}
.tooltip:hover:after{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  background: #444;
  border-radius: 8px;
  color: #fff;
  content: attr(title);
  margin: -82px auto 0;
  font-size: 16px;
  padding: 13px;
  width: 220px;
}
 */




/*== start of code for tooltips ==*/

/*== start of code for tooltips ==.tool {
  cursor: help;
  position: relative;
}


 == common styles for both parts of tool tip = 
 
.tool::after {
  left: 50%;
  opacity: 1;
  position: absolute;
  z-index:  100;
}

 
.tool:hover::after,
.tool:focus::after {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 100; 
}

 

 == speech bubble == 
.tool::after {
  background: #3E474F;
  border-radius: .25em;
  bottom: 180%;
  color: #EDEFF0;
  content: attr(data-tip);
  margin-left: -8.75em;
  padding: 1em;
  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
  transform:  scale(.6) translateY(50%);  
  width: 17.5em;
}

.tool:hover::after,
.tool:focus::after  {
  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}
*/