.pointer {
  cursor: pointer;
}
.profile-avatar-container {
  position:relative;
  width:100px;
}
.profile-avatar-container .profile-user-img{
  width:100px;
  height:100px;
}
.profile-avatar-container .profile-avatar-text {
  display:none;
}
.profile-avatar-container:hover .profile-avatar-text {
  display:block;
  position:absolute;
  height:100px;
  width:100px;
  background:#444;
  opacity: .6;
  color: #fff;
  top:0;
  left:0;
  line-height: 100px;
  text-align: center;
}
.profile-avatar-container button{
  position:absolute;
  top:0;left:0;width:100px;height:100px;opacity: 0;
}
.ball {
  display: inline-block;
  border-radius: 50%;
  background-color: seagreen;
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin: 0 2px;
}
.ball.no {
  background-color: #aaa;
}
.ball.red {
  background-color: brown;
}
.ball.orange {
  background-color: orange;
}
.ball-item-sm {
  display: inline-block;
  width: 22px;
  height: auto;
}
.ball-sm {
  display: inline-block;
  border-radius: 50%;
  background-color: seagreen;
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin: 0 1px;
}
.ball-item-xl {
  display: inline-block;
  width: auto;
  height: auto;
}
.ball-xl {
  display: inline-block;
  border-radius: 50%;
  background-color: seagreen;
  color: #fff;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  margin: 0 3px;
}
.ball-xl.blue {
  background-color: brown;
}
.td .ball-cert {
  margin-top: 2px;
  display: inline-block;
  border-radius: 4px;
  background-color: #bbb;
  color: #fff;
  width: 20px;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
}

.square {
  display: inline-block;
  border-radius: 3px;
  background-color: seagreen;
  color: #fff;
  width: 20px;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
  text-align: center;
  margin: 0 4px;
}
.square.no {
  background-color: #aaa;
}
.square.red {
  background-color: brown;
}
.square.orange {
  background-color: orange;
}

.li {
  display: flex;
  line-height: 24px;
  border-bottom: 1px solid #ccc;
}
.li.header {
  background-color: #f5f5f5;
  color: #fff;
}
.td{
  padding: 2px 5px;
  width: 85px;
  text-align: center;
  border-right: 1px solid #ccc;
}
.td:nth-last-of-type {
}
.td.md{
  width: 105px;
  text-align: center;
}
.td span {
  margin: 0 1px;
}
.td.lg {
  width: 240px;
}
.td.lg2 {
  width: 350px;
}
.td.date {
  width: 220px;
}
.td.result {
  width: 540px;
  text-align: left;
  padding: 5px 20px;
}
.td.list {
  width: 900px;
  border-right: 0;
}
.td.no {
  border-right: 0;
}


.mobile .panel-body {
  padding: 0.2rem;
}
.mobile .td{
  font-size: 1.2rem;
  padding: 1px 2px;
  width: 10rem;
  text-align: center;
  border-right: 1px solid #ccc;
}
.mobile .td:nth-last-of-type {
}
.mobile .td.md{
  width: 105px;
  text-align: center;
}
.mobile .td span {
  margin: 0 3px;
}
.mobile .td.lg {
  width: 240px;
}
.mobile .td.lg2 {
  width: 350px;
}
.mobile .td.date {
  width: 14rem;
}
.mobile .td.result {
  width: 30rem;
  text-align: left;
  padding: 2px 1px;
}
.mobile .td.no {
  border-right: 0;
}

.tab-items {
  margin-bottom: 10px;
}
.tab-item {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ccc;
}

.user-select {
  position: fixed;
  right: 0;
  top: 50px;
  min-height: 200px;
  width: 260px;
  background-color: #fff;
  padding: 15px 10px;
}
.user-record-left {
  position: fixed;
  left: 0;
  top: 50px;
  min-height: 200px;
  width: 260px;
  background-color: #fff;
  padding: 15px 10px;
}
.user-select .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.user-select-list {
  padding: 10px 5px;
  border-top: 1px solid #ccc;

}
.user-select-list.on {
  background-color: #ffefef;
}
.user-select-list span{
  position: relative;
  display: inline-block;
  padding: 5px 7px;
  margin-top: 5px;
  line-height: 1;
  border: 1px solid #0e6f5c;
  margin-right: 5px;
  color: #0e6f5c;
  border-radius: 5px;
}
.user-select-list span .close{
  font-size: 12px;
  color: #cc0000;
  cursor: pointer;
  opacity: 1;
  font-style: normal;
  margin-left: 3px;
  font-weight: normal;
}

.lottery-form {
  font-size: 12px;
}
.lottery-form .input-num {
  width: 40px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ddd;
  text-align: center;
  margin: 0 5px;

}

.lottery-form  .select {
  height: 30px;
  line-height: 30px;
  border: 1px solid #ddd;
  padding: 0 5px;
}

.dashboard-left {
  border: 1px solid #d62c1a;
  width: 740px;
  font-size: 14px;
  padding: 20px;
}
.constra-box {
  border: 1px solid #d62c1a;
  width: 550px;
  font-size: 14px;
  padding: 20px;
}
.constra-box .td-1 {
  width: 50px;
}
.constra-box .td-2 {
  width: 280px;
}
.constra-box .td-3 {
  width: 220px;
  font-size: 12px;
}
.item-red, .item-blue {
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 2px;
}
.item-blue {
  background-color: #0d6aad;
}
.item-red {
  background-color: #d62c1a;
}
.item-line {
  display: inline-block;
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin: 0 6px;
}


.action-menu {

}
.action-user-left, .action-user-right {
  position: fixed;
  background-color: #cd2a19;
  color:#fff;
  z-index: 5;
  font-size: 12px;
  margin-left: 50%;
  width: 35px;
  text-align: center;
  padding: 3px 0;
  cursor: pointer;
}
.action-user-left.on, .action-user-right.on {
  opacity: 0.7;
}
.action-user-left {
  left: -685px;
  top: 70px;
  border-radius:  0 0 10px 0;
}
.action-user-right {
  left: 650px;
  top: 70px;
  border-radius:  0 0 0  10px;
}

.popup {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1999;
  background-color: rgba(0,0,0,.3);
}
.popup.on {
  display: block;
}
.popup-box {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,0);
  background-color: #fff;
  padding: 1.5rem;
  width: 90%;
  height: auto;
  min-height: 15rem;
  font-size: 1.5rem;
  border-radius: 1rem;

}
.popup-box .title {
  font-size: 2.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.popup-box .content {
  padding: 0.5rem;
}
.popup-box .close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  font-weight: normal;
  opacity: 1;
  color: #555;
}