body {
  overflow-y: hidden;
  font-size: 12px;
}

._hide {
  display: none;
}
.select_st1 {
    border: solid 1px #9EB5DE;
    height: 30px;
    border-radius: 10px;
    padding: 5px 10px;
    background: linear-gradient(#F5F7FC, #EEEFF6);
	color: #455D88;
	font-weight:500
}
.select_st1:focus {
	outline:none;
}

.container .chat-area {
  position: absolute;
  top: 0;
  right: 366px;
  bottom: 0;
  left: 0;
  border-right: 1px solid #000;
  min-height: 500px;
}

.container .chat-area .summary {
  border-bottom: 1px solid #000;
  background-color: #545454;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 51px;
}

.container .chat-area .summary .wrapper {
  display: flex;
  align-items: center;
}

.container .chat-area .summary .wrapper .user-profile {
  width: 51px;
  height: 51px;
  background-color: pink;
}

.container .chat-area .summary .wrapper .user-profile img {
  width: 100%;
  display: block;
}

.container .chat-area .summary .wrapper .room-title {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.container .chat-area .summary .wrapper .room-title h1 {
  max-width: 300px;
  font-size: 14px;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.container .chat-area .summary .wrapper .room-title .rank {
  margin-left: 10px;
  color: #ff0;
  font-weight: bold;
}

.container .chat-area .summary .state {
  color: #ffcd02;
  display: flex;
  width: 150px;
  height: 39px;
  justify-content: space-between;
  flex-flow: column wrap;
}

.container .chat-area .summary .state .item {
  display: flex;
  align-items: baseline;
}

.container .chat-area .summary .state .item::before {
  content: '';
  clear: both;
  margin: 5px 5px 0 0;
  width: 11px;
  height: 11px;
}

.container .chat-area .summary .state .item:first-of-type::before {
  background: url(../img/sp_nchat.png) no-repeat -90px 0px;
}

.container .chat-area .summary .state .item:nth-of-type(2)::before {
  background: url(../img/sp_nchat.png) no-repeat -111px 0px;
}

.container .chat-area .summary .state .item:nth-of-type(3)::before {
  background: url(../img/sp_nchat.png) no-repeat -129px 0px;
}

.container .chat-area .summary .state .item:last-of-type::before {
  background: url(../img/sp_nchat.png) no-repeat -150px 0px;
}

.container .chat-area .message-wrapper {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 104px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 10px;
}

.container .chat-area .message-wrapper .notify {
  background-color: #1abc9c;
  padding: 5px;
  color: white;
  margin-bottom: 1px;
}

.container .chat-area .message-wrapper .notify.freeze {
  background-color: #a38671;
}

.container .chat-area .message-wrapper .notify.pass {
  background-color: #7b7b7b;
}

.container .chat-area .message-wrapper .notify.wrong {
  background-color: #3498db;
}

.container .chat-area .message-wrapper .notify.correct {
  background-color: #e74c3c;
}

.container .chat-area .message-wrapper .manager {
  padding: 10px 0;
}

.container .chat-area .message-wrapper .manager .user-info {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.container .chat-area .message-wrapper .manager .user-info img {
  display: block;
  margin-right: 10px;
}

.container .chat-area .message-wrapper .manager .user-info p {
  margin-left: 20px;
  color: #c0392b;
}

.container .chat-area .message-wrapper .manager .user-info .unick {
  min-width: 73px;
}

.container .chat-area .toolbar-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.container .chat-area .toolbar-wrapper .toolbar {
  background-color: #fbfbfc;
  display: flex;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}

.container .chat-area .toolbar-wrapper .toolbar a {
  border-right: 1px solid #eeeeef;
  padding: 10px 15px;
  display: block;
}

.container .chat-area .toolbar-wrapper .toolbar a:hover {
  background-color: #ffcd02;
  text-decoration: none;
}

.container .chat-area .toolbar-wrapper .toolbar a:last-of-type {
  margin-left: auto;
  border-left: 1px solid #eeeeef;
  border-right: unset;
}

.container .chat-area .toolbar-wrapper .input-box {
  background-color: #f1f1f1;
}

.container .chat-area .toolbar-wrapper .input-box .chat-disabled {
  display: flex;
  align-items: center;
  padding: 20px 10px 20px 20px;
  color: #a9a9a9;
}

.container .chat-area .toolbar-wrapper .input-box .chat-disabled img {
  margin-right: 10px;
}

.container .chat-area .toolbar-wrapper .input-box .chat-abled {
  padding: 20px 20px 20px 51px;
  width: 100%;
  border: none;
}

.container .chat-area .toolbar-wrapper .input-box .disabled {
  display: none;
}

.container .func-area {
  min-height: 500px;
  width: 366px;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
}

.container .func-area .func-tap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000;
  background-color: #545454;
  justify-content: space-around;
  padding-left: unset;
}

.container .func-area .func-tap li {
  padding: 17px 0;
  justify-items: center;
  width: 100%;
  text-align: center;
  border-left: 1px solid #4b4b4b;
}

.container .func-area .func-tap li a {
  color: white;
}

.container .func-area .func-tap li:first-of-type {
  border-left: unset;
}

.container .func-area .func-tap li._on {
  background-color: #ffcd02;
}

.container .func-area .func-tap li._on a {
  color: #333;
}

.container .func-area .tap-container .board-summary {
  color: #e4e8f3;
  background-color: #5065a1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 51px;
  padding: 0 10px 0 20px;
}

.container .func-area .tap-container .board-summary .tit {
  font-size: 12px;
  margin-right: 10px;
}

.container .func-area .tap-container .board-summary a {
  display: block;
  margin-left: auto;
  border: 1px solid #405181;
  background-color: #6275ab;
  padding: 10px;
  color: white;
}

.container .func-area .tap-container .pick-record .curr-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d3d3d3;
}

.container .func-area .tap-container .pick-record .curr-pick .pick {
  display: flex;
  height: 51px;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p {
  display: flex;
  align-items: center;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick {
  position: relative;
  float: left;
  margin: 0 10px 0 20px;
  width: 31px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border-radius: 100%;
  color: #fff;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick.wait {
  width: 29px;
  height: 29px;
  line-height: 29px;
  border: 1px solid #d4d8d8;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick.wait::before {
  left: 11px;
  position: absolute;
  content: '';
  top: 9px;
  width: 1px;
  height: 11px;
  background-color: #d4d8d8;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick.wait::after {
  right: 11px;
  position: absolute;
  content: '';
  top: 9px;
  width: 1px;
  height: 11px;
  background-color: #d4d8d8;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick.even {
  background-color: #e84c3d;
}

.container .func-area .tap-container .pick-record .curr-pick .pick p .ic-pick.under {
  background-color: #3498db;
}

.container .func-area .tap-container .pick-record .curr-pick .latest-record {
  padding-right: 20px;
}

.container .func-area .tap-container .pick-record .state {
  border-bottom: 1px solid #d3d3d3;
}

.container .func-area .tap-container .pick-record .state ul {
  padding-left: unset;
  display: flex;
  justify-content: space-around;
}

.container .func-area .tap-container .pick-record .state ul li {
  padding: 24px 0;
  width: 100%;
  text-align: center;
  border-left: 1px solid #f2f2f2;
}

.container .func-area .tap-container .pick-record .state ul li:first-of-type {
  border-left: none;
}

.container .func-area .tap-container .pick-record .state ul li p span {
  display: block;
}

.container .func-area .tap-container .pick-record .state ul li p:last-of-type {
  margin-top: 10px;
  font-weight: bold;
}

.container .func-area .tap-container .master {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #ededed;
}

.container .func-area .tap-container .master .user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .func-area .tap-container .master .user-info .img-wrapper {
  position: relative;
  width: 31px;
  height: 31px;
  top: -7px;
}

.container .func-area .tap-container .master .user-info .img-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 31px;
  height: 11px;
  background: url(../img/sp_nchat.png) no-repeat 0 -9999px;
  background-position: -20px -30px;
}

.container .func-area .tap-container .master .user-info .img-wrapper img {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  vertical-align: top;
}

.container .func-area .tap-container .master .user-info > img {
  margin: 0 15px;
}

.container .func-area .tap-container .game-wrapper .game-area {
  position: relative;
  background-color: #e4e8f3;
}

.container .func-area .tap-container .game-wrapper .game-area .score {
  padding: 0 10px 0 20px;
  height: 51px;
  line-height: 51px;
  border-bottom: 1px solid #435587;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .func-area .tap-container .game-wrapper .game-area .score .bg-ball {
  display: flex;
}

.container .func-area .tap-container .game-wrapper .game-area .score .bg-ball div {
  width: 23px;
  height: 23px;
  border-radius: 16px;
  background-color: #f2f2f2;
  margin: 1px;
}

.container .func-area .tap-container .game-wrapper .game-area .cast-lots {
  position: relative;
  margin-left: 64px;
  width: 239px;
  height: 333px;
}

.container .func-area .tap-container .game-wrapper .game-area .cast-lots .bg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 239px;
  height: 333px;
  background: url(../img/sp_powerball.png) no-repeat -1920px 0;
  z-index: 10;
}

.container .func-area .tap-container .game-wrapper .game-area .cast-lots .bg-animaition {
  position: absolute;
  padding-top: 74px;
  overflow: hidden;
}

.container .func-area .tap-container .game-wrapper .game-area .cast-lots .bg-animaition .ani0 {
  display: block;
  width: 239px;
  height: 239px;
  background: url(../img/sp_powerball.png) no-repeat 0 0;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph {
  position: absolute;
  bottom: -1px;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid #000;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl {
  background-color: #c6cbd8;
  position: relative;
  height: 15px;
  border-top: 1px solid #000;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dt {
  left: 149px;
  width: 66px;
  position: absolute;
  left: 162px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  background-color: #7b7b7b;
  color: #fff;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dt.left_on {
  background-color: #3498db;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dt.right_on {
  background-color: #e74c3c;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd {
  width: 149px;
  color: #fff;
  font-size: 10px;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd .tx {
  position: absolute;
  height: 15px;
  line-height: 14px;
  font-size: 9px;
  color: #fff;
  z-index: 1;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd .bar {
  height: 15px;
  transition: width .5s ease-in-out;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.left {
  float: left;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.left .tx {
  left: 5px;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.left .bar {
  float: right;
  background-color: #3498db;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.right {
  float: right;
  text-align: right;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.right .tx {
  right: 5px;
}

.container .func-area .tap-container .game-wrapper .game-area .dist-graph dl dd.right .bar {
  float: left;
  background-color: #e74c3c;
}

.container .func-area .tap-container .game-wrapper .pick-area {
  position: relative;
  z-index: 101;
}

.container .func-area .tap-container .game-wrapper .pick-area .pick-summary {
  border-top: 1px solid #000;
  background-color: #5065a1;
  color: #e4e8f3;
  padding: 15px;
  border-bottom: 1px solid #000;
}

.container .func-area .tap-container .record-wrapper .curr-pick {
  background-color: #ecf0f1;
}

.container .func-area .tap-container .record-wrapper .record-list .header {
  padding-left: unset;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #5065a1;
  color: white;
}

.container .func-area .tap-container .record-wrapper .record-list .header li {
  flex-grow: 1;
  text-align: center;
  padding: 15px 0;
}

.container .func-area .tap-container .record-wrapper .record-list .header li:last-of-type {
  flex-grow: 2;
}

.container .func-area .tap-container .record-wrapper .record-list .list {
  position: absolute;
  right: 0;
  width: 366px;
  bottom: 0;
  top: 375px;
  overflow-y: scroll;
  padding-left: unset;
}

.container .func-area .tap-container .record-wrapper .record-list .list li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ededed;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-grow: 1;
  padding: 10px 0;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .correct {
  color: #e84c3d;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .correct P {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .correct P .blue {
  display: block;
  color: white;
  background-color: #3498db;
  width: 31px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .correct P .red {
  display: block;
  color: white;
  background-color: #e84c3d;
  width: 31px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .wrong {
  color: #999;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .wrong P {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .wrong P .red {
  display: block;
  color: white;
  background-color: #e84c3d;
  width: 31px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .pick .wrong P .blue {
  display: block;
  color: white;
  background-color: #3498db;
  width: 31px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border-radius: 100%;
  margin-right: 5px;
}

.container .func-area .tap-container .record-wrapper .record-list .list li .round {
  flex-grow: 1;
  text-align: center;
}

.container .func-area .tap-container .room-user-wrapper .summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 51px;
  padding: 0 10px 0 20px;
  border-bottom: 1px solid #000;
  background-color: #fbfbfc;
}

.container .func-area .tap-container .room-user-wrapper .summary a {
  display: block;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.container .func-area .tap-container .room-user-wrapper ul {
  padding-left: unset;
  position: absolute;
  top: 102px;
  right: 0;
  bottom: 0;
  width: 366px;
  overflow-y: scroll;
}

.container .func-area .tap-container .room-user-wrapper ul .user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #ededed;
}

.container .func-area .tap-container .room-user-wrapper ul .user .user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .func-area .tap-container .room-user-wrapper ul .user .user-info .img-wrapper {
  position: relative;
  width: 31px;
  height: 31px;
}

.container .func-area .tap-container .room-user-wrapper ul .user .user-info .img-wrapper img {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  vertical-align: top;
}

.container .func-area .tap-container .room-user-wrapper ul .user .user-info > img {
  margin: 0 15px;
}

.container .func-area .tap-container .room-user-wrapper ul .user .state .date {
  color: #999;
}

.container .func-area .tap-container .room-user-wrapper ul .user.master .img-wrapper {
  top: -7px;
}

.container .func-area .tap-container .room-user-wrapper ul .user.master .img-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 31px;
  height: 11px;
  background: url(../img/sp_nchat.png) no-repeat 0 -9999px;
  background-position: -20px -30px;
}

.container .func-area .tap-container .room-user-wrapper ul .tip p {
  margin: 10px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  background-color: #27ae60;
  color: #fff;
}

.container .func-area .tap-container .room-info-wrapper ul {
  padding-left: unset;
  position: absolute;
  right: 0;
  width: 366px;
  bottom: 0;
  top: 51px;
  overflow-y: scroll;
}

.container .func-area .tap-container .room-info-wrapper ul li {
  padding-left: 20px;
}

.container .func-area .tap-container .room-info-wrapper ul li:not(:first-of-type) {
  height: 76px;
  border-bottom: 1px solid #ededed;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.container .func-area .tap-container .room-info-wrapper ul li h4 {
  color: #999;
  font-weight: normal;
}

.container .func-area .tap-container .room-info-wrapper ul li .down {
  color: #3498db;
}

.container .func-area .tap-container .room-info-wrapper ul li em {
  font-style: normal;
}