* {
  box-sizing: border-box;
}

a,
abbr,
acronym,
address,
b,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
i,
img,
input,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
samp,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption {
  text-align: left;
}
input,
select {
  vertical-align: middle;
  font-size: 12px;
  color: #fff;
  outline: 0;
  border: none;
}
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
input[type="button"],
input[type="submit"] {
  cursor: pointer;
}
select {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
fieldset,
img {
  border: 0;
  display: block;
}
li,
ol,
ul {
  list-style: none;
}

legend {
  display: none;
}
a {
  color: #2d2d2d;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

body,
html {
  font-size: 14px;
  min-width: 975px;
  font-family: "Microsoft YaHei", Arial, "Times New Roman", SimHei, Helvetica,
    sans-serif;
  background: #f6f6f6;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.container {
  width: 990px;
  margin: 0 auto;
  position: relative;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #aeaeae !important;
}
/**
* ****************** Header ******************
*/
.header {
  background-color: #fff;
  border-bottom: 2px solid #2a77b8;
  color: #000;
  height: 70px;
  position: fixed;
  width: 100%;
  z-index: 2;
}

.header .container {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-bottom: 10px;
}

.header .logo img {
  height: 48px;
}

.header .nav {
  display: flex;
  margin-left: auto;
}

.header .nav .link-wrapper {
  color: #2d2d2d;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header .nav .link-wrapper:not(:last-child) {
  margin-right: 40px;
}

.header .nav .link-wrapper a {
  color: #2d2d2d;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.header .nav .link-wrapper.active > a {
  color: #065faa;
  font-weight: 600;
}

.header .nav .link-wrapper.active.result .result-span {
  color: #065faa;
  font-weight: 600;
}

.header .nav .link-wrapper:hover,
.header .nav .link-wrapper a:hover {
  color: #065faa;
}

.header .nav .link-wrapper.result:hover .game-dropdown {
  opacity: 1;
  visibility: visible;
}

.header .nav .game-dropdown {
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 5px #e5e5e5;
  display: flex;
  align-items: center;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header .nav .game-dropdown > a {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 25px 0;
}

.header .nav .game-dropdown a:not(:last-child) {
  border-right: 1px solid #f8f8f8;
}

.header .nav .game-dropdown a img {
  height: 55px;
  margin-bottom: 13px;
}

/**
* ****************** Banner ******************
*/
.banner-wrapper {
  padding-top: 85px;
}

.banner-wrapper .container {
  border-radius: 8px;
}

.banner-wrapper img {
  width: 100%;
}

/**
* ****************** Main Content ******************
*/
.main {
  min-height: calc(100vh - 363px - 299px); /* full height - banner - footer */
  padding-bottom: 15px;
  padding-top: 15px;
}

.mainbox-link {
  position: relative;
}
.mainbox-link:before {
  content: "";
  height: 10px;
  width: 10px;
  border-bottom: 3px solid #acacac;
  border-right: 3px solid #acacac;
  transform: rotate(-45deg) translateX(-50%);
  position: absolute;
  right: 8px;
  top: 50%;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mainbox-link:hover:before {
  right: 0;
}

.main .container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 6px #e5e5e5;
}

.main .main-title {
  border-bottom: 2px solid #ededed;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 16px 8px 16px;
}

.main .mainbox {
  border-bottom: 1px solid #eeeeee;
  display: flex;
  padding: 15px 0;
}

.main .mainbox .box-col {
  width: 58%;
  padding: 0 10px;
  text-align: center;
  font-size: 15px;
}

.main .mainbox .box-col:first-child {
  width: 20%;
}

.main .mainbox .box-col:last-child {
  width: 22%;
}

.main .mainbox .box-col img {
  margin: 12px auto 0 auto;
}

.main .mainbox .box-col .current-draw {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.main .mainbox .box-col .current-draw .draw-row {
  margin-left: 20px;
}

.main .mainbox .box-col .nums {
  display: flex;
  flex-wrap: wrap;
}

.main .mainbox .box-col .timeleft {
  box-sizing: border-box;
  color: #000;
  display: inline-block;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  margin-top: 15px;
}

.detailmain .resultbox .opennums {
  padding-top: 10px;
}
.detailmain .resultbox .opennums .nums {
  background: #ededed;
  border-radius: 30px;
  margin: 12px 0;
  padding: 3px;
}
.detailmain .resultbox .opennums .nums table {
  width: 100%;
}
.detailmain .list {
  min-height: calc(100vh - 30px - 315px);
  padding-top: 40px;
  width: 100%;
}

.detailmain .list .top {
  background-color: #eaebee;
  font-size: 15px;
  margin-bottom: 22px;
  padding: 20px 0;
}

.detailmain .list .top .container {
  background-color: transparent;
  box-shadow: none;
}
.detailmain .list .top .flex-box .flex-col {
  flex-basis: 100%;
  padding: 0 10px;
}
.detailmain .list .top .flex-box .flex-col:first-child {
  flex-basis: 20%;
}
.detailmain .list .top .flex-box .flex-col:first-child img {
  margin: 12px auto 0 auto;
  width: 100%;
}
.detailmain .list .top .flex-box .flex-col:last-child {
  flex-basis: 30%;
  text-align: center;
}
.detailmain .list .top .flex-box .flex-col .current-draw {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.detailmain .list .top .flex-box .flex-col .draw-row {
  margin-left: 20px;
}
.detailmain .list .top .flex-box .flex-col .timeleft {
  box-sizing: border-box;
  color: #000;
  display: inline-block;
  font-size: 44px;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
}

.detailmain .list .gamedetail .flex-box {
  align-items: flex-end;
  border-bottom: 2px solid #d3d3d3;
  font-size: 18px;
  padding: 17px 20px 10px 20px;
}

.detailmain .list .calendar {
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  margin-left: auto;
  overflow: hidden;
  width: 160px;
  position: relative;
}
.detailmain .list .calendar:before {
  background: url("../img/icon_search.png") center / 58% no-repeat;
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 100%;
}
.detailmain .list .calendar:after {
  background: url("../img/icon_calendar.png") center / 58% no-repeat;
  content: "";
  position: absolute;
  right: 0;
  width: 30px;
  height: 100%;
}

.detailmain .list .calendar input {
  display: inline-block;
  padding: 5px 10px;
  width: 100%;
  cursor: pointer;
  font-size: 16px;
  color: #656565;
  text-align: center;
}

.detailmain .list table {
  color: #2d2d2d;
  font-size: 16px;
  width: 100% !important;
}
.detailmain .list table th {
  display: none;
}
.detailmain .list table td:last-child {
  text-align: right;
}
.detailmain .list table td {
  border-bottom: 1px solid #e9e9e9;
  padding: 15px 20px;
  line-height: 25px;
}

.detailmain .list table td:nth-child(2) {
  padding-right: 0;
}

.detailmain .list table .full-date {
  white-space: nowrap;
}

.game-lotto20.detailmain .list table td .ball-wrapper {
  width: 530px;
  margin-left: auto;
  margin-right: 38px;
}

.flex-box {
  display: flex;
}
.flex-box .left {
  width: 300px;
  margin-right: 50px;
}

.flex-box p {
  text-transform: uppercase;
  height: 30px;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.flex-box .listbottom .timeleft {
  width: 100%;
}

.flex-box p .issue {
  margin-left: 12px;
  font-weight: bold;
}

.flex-box p .nextissue {
  margin-left: auto;
  color: #c40001;
  font-weight: bold;
}

.flex-box p .lastopentime {
  margin-left: 12px;
}

.flex-box .nums {
  display: flex;
  flex-wrap: wrap;
}

.flex-box .nums .nums-box {
  margin: 0 4px;
  text-align: center;
}

.game-happy20 .flex-box .nums .nums-box {
  flex: 0 1 calc(100% / 10);
}

.flex-box .nums table {
  border: 0;
}

.flex-box .nums table td {
  border: 0;
}

.flex-box .right {
  width: calc(100% - 300px);
}

/**
* ****************** Footer ******************
*/
.footer {
  color: #737373;
  font-size: 14px;
}

.footer .trusted {
  background-color: #313131;
  color: #c3c3c3;
  padding: 20px 0 15px 0;
}

.footer .trusted img {
  margin-top: 10px;
  width: 100%;
}

.footer .footer-nav {
  background-color: #2b2b2b;
  padding-top: 22px;
}

.footer .footer-nav .container {
  display: flex;
}

.footer .footer-nav .container > div {
  flex: 1;
}

.footer .footer-nav .container > div:last-child {
  color: #a2a2a2;
  font-size: 18px;
  line-height: 24px;
}

.footer .footer-nav a {
  color: #939393;
  margin: 5px 0;
}

.footer .footer-nav a:hover {
  color: #065faa;
}

.footer .footer-nav .responsible-play {
  border: 2px solid #a2a2a2;
  font-size: 14px;
  line-height: 16px;
  margin-top: 13px;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: normal;
  width: 127px;
}

.footer .footer-nav .responsible-play:hover {
  border-color: #065faa;
}

.footer .footer-nav .verified {
  margin-top: 30px;
  width: 65%;
}

.footer .copyright {
  background-color: #2b2b2b;
  padding-bottom: 15px;
}

/**
* ****************** About Page ******************
*/
.about {
  display: flex;
  min-height: calc(100vh - 299px); /* full height - footer */
  padding-top: 85px;
}

.side-nav {
  margin-right: 30px;
  width: 150px;
}

.side-nav-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 6px #e5e5e5;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 85px;
}

.side-nav-container .side-item {
  cursor: pointer;
  padding: 15px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.side-nav-container .side-item:not(:last-child) {
  border-bottom: 1px solid #f9f9f9;
}

.side-nav-container .side-item:hover {
  color: #065faa;
}

.side-nav-container .side-item.active {
  color: #065faa;
  font-weight: 600;
}

.right-content {
  margin-bottom: 35px;
  width: calc(100% - 145px - 30px);
}

.about .right-content .content-item {
  display: none;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.about .right-content .content-item.active {
  display: block;
}

.right-content .banner-wrapper {
  padding-top: 0;
  margin-bottom: 20px;
}

.about .right-content .content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 6px #e5e5e5;
  padding: 25px;
}

.right-content .content-wrapper .title {
  font-size: 22px;
}

.right-content .content-wrapper .subtitle {
  color: #727272;
  font-size: 16px;
  font-style: italic;
  margin-bottom: 15px;
}

.right-content .content-wrapper p {
  line-height: 18px;
  margin: 10px 0;
}

.right-content .content-wrapper ul {
  padding-left: 10px;
}

.right-content .content-wrapper ul li {
  line-height: 18px;
  list-style: "-";
  padding-left: 10px;
}

.right-content .content-wrapper .image-wrapper {
  margin: 15px 0;
}

.right-content .content-wrapper .image-wrapper img {
  display: inline-block;
  height: 65px;
  margin-left: 20px;
}

/**
* ****************** Games Page ******************
*/
.games {
  display: flex;
  min-height: calc(100vh - 299px); /* full height - footer */
  padding-top: 85px;
}

.games .right-content .content-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 6px #e5e5e5;
  padding: 25px;
}

.games .right-content .content-wrapper:not(:last-child) {
  border-bottom: 2px solid #f6f6f6;
  margin-bottom: 35px;
  padding-bottom: 35px;
}

/**
* ****************** Result Numbers ******************
*/
.ball-lotto5,
.ball-lotto8,
.ball-lotto10,
.ball-lotto20 {
  border: 4px solid;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 600;
  height: 40px;
  width: 40px;
  margin: 5px;
}

/*.ball-lotto5.small {*/
/*  font-size: 14px;*/
/*  height: 23px;*/
/*  width: 23px;*/
/*}*/

/* ***** lotto 5 ***** */
.ball-lotto5,
.ball-lotto8 {
  background-color: #86bbea;
  border-color: #1b66af;
}

/* ***** lotto 8 ***** */
.ball-lotto8.ball19,
.ball-lotto8.ball20 {
  background-color: #eca9a9;
  border-color: #af1b1b;
}

/* ***** lotto 10 ***** */
.ball-lotto10.ball1 {
  background-color: #f8f28a;
  border-color: #edd228;
}
.ball-lotto10.ball2 {
  background-color: #8fc1f5;
  border-color: #3a79d9;
}
.ball-lotto10.ball3 {
  background-color: #c6c6c6;
  border-color: #696868;
}
.ball-lotto10.ball4 {
  background-color: #fdc887;
  border-color: #ff851e;
}
.ball-lotto10.ball5 {
  background-color: #b4edee;
  border-color: #09b7b6;
}
.ball-lotto10.ball6 {
  background-color: #ccc4fa;
  border-color: #5b45e8;
}
.ball-lotto10.ball7,
.ball-lotto10.empty {
  background-color: #ebeaea;
  border-color: #c5c4c4;
}
.ball-lotto10.ball8 {
  background-color: #ffa0a6;
  border-color: #ff0016;
}
.ball-lotto10.ball9 {
  background-color: #d3c4b8;
  border-color: #622901;
}
.ball-lotto10.ball10 {
  background-color: #c0ecad;
  border-color: #27b000;
}

/* ***** lotto20 ***** */
.ball-lotto20 {
  background-color: #f6f8fc;
  border-color: #d6e2ee;
}

.nums-box:last-child .ball-lotto20,
#list .ball-wrapper .ball-lotto20:last-child {
  background-color: #F8C8C8;
  border-color: #DF2525;
  position: absolute;
}

.ball-lotto20.ball41,
.ball-lotto20.ball42,
.ball-lotto20.ball43,
.ball-lotto20.ball44,
.ball-lotto20.ball45,
.ball-lotto20.ball46,
.ball-lotto20.ball47,
.ball-lotto20.ball48,
.ball-lotto20.ball49,
.ball-lotto20.ball50,
.ball-lotto20.ball51,
.ball-lotto20.ball52,
.ball-lotto20.ball53,
.ball-lotto20.ball54,
.ball-lotto20.ball55,
.ball-lotto20.ball56,
.ball-lotto20.ball57,
.ball-lotto20.ball58,
.ball-lotto20.ball59,
.ball-lotto20.ball60,
.ball-lotto20.ball61,
.ball-lotto20.ball62,
.ball-lotto20.ball63,
.ball-lotto20.ball64,
.ball-lotto20.ball65,
.ball-lotto20.ball66,
.ball-lotto20.ball67,
.ball-lotto20.ball68,
.ball-lotto20.ball69,
.ball-lotto20.ball70,
.ball-lotto20.ball71,
.ball-lotto20.ball72,
.ball-lotto20.ball73,
.ball-lotto20.ball74,
.ball-lotto20.ball75,
.ball-lotto20.ball76,
.ball-lotto20.ball77,
.ball-lotto20.ball78,
.ball-lotto20.ball79,
.ball-lotto20.ball80 {
  background-color: #c2ddf0;
  border-color: #0f6cbf;
}