
.userheader { background: url(/static/images/leafbg.png) right top no-repeat  ,linear-gradient(rgba(255,255,255,1), rgba(212,254,252,1)); background-size: auto 100%;  color: #00585e; min-height: 70px;}
.userheader.mui-card-header>img:first-child { width: 48px; height: 48px; border-radius: 6px; box-shadow: 5px 5px 5px #c5c5c5; }
.userheader.mui-card-header.mui-card-media .mui-media-body { margin-left: 60px; font-size: 16px; color: #7d7d7d; font-family: fantasy; }
.userheader .mui-media-body { font-size: 16px; }




.boxheader { background:  url(/static/images/leafbg2.png) right top no-repeat  ,linear-gradient(rgba(67,255,193,1), rgba(71,207,215,1));  background-size: auto 100%; color: #00585e; }

.leaficon { width: 25px; height: 25px; display: inline-block; vertical-align:middle;  background:  url(/static/images/leaficon.png) no-repeat; background-size: cover; border-radius: 2px; margin-right: 5px;}


.weektitle {  }

.weekth { color: #578cdc; font-weight: 600; }
.weektd {font-family: fantasy; color: #4bb36e;}

.monday { padding-left:5%;  }


.newscard {height: calc(100vh - 60px);}


.todaybox { height: 380px; background: url(/static/images/todaybg0.png) no-repeat; background-size: cover;}
#todaystep { width: 100%; height: 300px;  }

.level  { color: #A4AAA6; }
.level0 { color: #A4AAA6; }
.level1 { color: #7BAB8E; }
.level2 { color: #4FBD7B; }
.level3 { color: #29B963; }
.level4 { color: #05BF4F; }
.level5 { color: #13ae51; }

.lvltip { left: 10px; right: 10px; top: 10px; bottom: 10px; overflow-y: auto; background: rgba(0,0,0,0.4); position: absolute; display:none; color: #fff;}
.lvlclose { position: absolute; right:15px; }
.lvlcontent {background: #fff; padding: 20px; margin: 20px; height: calc(100vh - 124px); }

.redbag { position: absolute; right: 80px; top: 10px; width: 40px;  }
.redbag img { width: 100%; animation:regbag  2s  0s  infinite;  }

.msgbox { position: absolute; right: 10px; top: 10px; width: 40px;  }
.msgbox .mui-icon-email { font-size: 48px;  background-image:-webkit-linear-gradient(295deg,#ffd704,#ff8400,#ff0000); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.msgbox .mui-badge { position: absolute; left: 15px;  left: 30px; top: 3px;}

.scores { font-size: 13px; color: #33a5c7; }

.cwtip {color: #c7631c; padding: 17px; background-color: white; box-shadow: 0px 1px 5px #c5c5c5; margin-bottom: 10px;}

.cardnum { font-size: 13px; }


.newstitle {     font-weight: 600; color: #333; }
.newscontent { text-indent: 2em; font-weight: 400; color: #848484; }

@font-face {
	font-family: 'iconfont';  /* project id 2448066 */
	src: url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.eot');
	src: url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.eot?#iefix') format('embedded-opentype'),
	url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.woff2') format('woff2'),
	url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.woff') format('woff'),
	url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.ttf') format('truetype'),
	url('//at.alicdn.com/t/font_2448066_bhxgs8wq02s.svg#iconfont') format('svg');
}

.healthicon { font-family: 'iconfont'; font-size: 24px;  background: linear-gradient(180deg, #6AF686,#15CBA8); -webkit-background-clip: text; color: transparent; }
.healthinfo { font-size: 13px; }
.healthinfo .mui-media-body { font-size: 13px !important; height: unset !important;  color: #636363  !important;  }
.exchbox { width: 80%; padding: 10px; }
.mui-toast-container .mui-active { width: 100%; height: 100%; background: #ccc; }


@keyframes regbag
{
	0%, 65%{
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
	70% {
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	75% {
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	80% {
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	85% {
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	90% {
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	95% {
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	100% {
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
}

@keyframes glow-animation{
    0%{filter:hue-rotate(-360deg)}
    100%{filter:hue-rotate(360deg)}
}