body {
    background : #232324; color: #FFFFFF;
}
footer {
    background-color: #000000;
    color: #1e1e1e;
}

/* Remove the navbar's default rounded borders and increase the bottom margin */ 
.navbar {
  margin-bottom: 50px;
  border-radius: 0;
}

/* Remove the jumbotron's default bottom margin */ 
 .jumbotron {
  margin-bottom: 0;
}

/* Add a gray background color and some padding to the footer */
footer {
    background-color: #000000;
    border-top: 1px solid #504e4e;
    padding: 25px; color: #868686;
}

.jumbotron {
    color: #000000; background: transparent; height: 100px; padding: 12px;
}
.jumbotron .container{ position: relative; }

img.logo{ height: 30px; width: auto; margin-top: -5px; }
.jumbotron .topheader h3 { font-size: 36px; } 

.panel-primary.blackbox{
    border-color: #717171;
}
.panel-primary.blackbox .panel-heading {
    background: #107f02;
    border-color: #a2b5c5;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.5);
}
.panel-footer {
    background-color: #222324;
}

.panel-primary.blackbox.boxlistx .panel-body{
    padding: 0;
}
.panel-primary.blackbox.boxlistx .panel-heading{  
    min-height: 45px;
    overflow: hidden;
    line-height: 27px;
    font-size: 16px;
}

.page-content .panel-primary.blackbox .panel-heading {
    background-color: #000000;
    border-color: #484848;
    text-shadow: 1px 1px #000000;
}
.page-content .panel-primary.blackbox .panel-body{
    padding: 15px; background: #222324;
    color: #e8e8e8; font-size: 13pt;
    line-height: 27px;
}

.panel-primary.redbox{
    border-color: #b7152d;
}
.panel-primary.redbox .panel-heading {
    background-color: #d02741;
    border-color: #ff2e4d;
    text-shadow: 1px 1px #000000;
}

.panel-primary.bluebox{
    border-color: #337ab7;
}
.panel-primary.bluebox .panel-heading {
    background-color: #337ab7;
    border-color: #337ab7;
    text-shadow: 1px 1px #000000;
}

.panel-primary img{ width: 100%; }
.panel-primary h3{ font-size: 16px; margin: 2px 0; line-height: 25px; }

.ctime{ color: #ece6ae; font-size: 8pt; }

.wc100 h1{ font-size: 22px; margin: 10px 0; font-weight: bold; line-height: 30px; }
.wc100 h2{ font-size: 21px; margin: 10px 0; font-weight: bold; line-height: 30px; }
.wc100 h3{ font-size: 20px; margin: 10px 0; font-weight: bold; line-height: 30px; }
.navbar { margin-bottom: 30px; }

.wc100 .nobor{ border-top: 2px solid #DDDDDD; margin: 30px 0 10px; padding: 20px 20px 10px; }
.jumbotron .logo{ text-align: center; padding: 0; }
.jumbotron .logo a{ position: relative; display: inline-block; }
.jumbotron .logo a span {
    font-size: 9pt;
    position: absolute;
    color: #757575;
    bottom: 8px;
    font-weight: bold;
    right: -55px;
}


.navbar-inverse {
    background-color: #000000; z-index: 99;
    border-top-color: #909090;
    border-bottom-color: #909090; width: 100%;
}
.navbar-inverse .navbar-nav>li>a {
    font-weight: bold;  font-size: 13pt;
    color: #FFFFFF !important; height: 48px;
}
.navbar-inverse .navbar-nav>li.active>a {
    color: #FFFFFF !important;
    background-color: #107f02 !important;
    border-right: 1px solid #8a8a8a;
}
.navbar-inverse .navbar-nav>li:hover>a {
    color: #FFFFFF !important;
    background-color: #232324 !important;
}

.navbar-toggle {
    background-color: #1e1e1e;
}

.jumbotron .logo a.signup {
    font-size: 14pt;
    padding: 7px 24px 6px;
    border: 1px solid #FFFFFF;
    border-radius: 13px;
    color: #FFFFFF !important;
    text-decoration: none;
    text-shadow: 1px 1px #000000;
    position: absolute; top: 28px; right: 10px;
    background: #228617;
}
.jumbotron .logo a.signup:hover{ background: #000000; }
.jumbotron .logo a.signin{
    font-size: 14pt;
    padding: 7px 24px 6px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 13px;
    color: #FFFFFF !important;
    text-decoration: none;
    text-shadow: 1px 1px #000000;
    position: absolute; top: 28px; right: 170px;
}
.jumbotron .logo a.signin:hover{ background: #000000; }
.jumbotron .logo a.signup, .jumbotron .logo a.signin{ display: none; }
.navbar-brand.mobile-signup{ 
    background: #d02940; color: #FFFFFF; border-right: 1px solid #FFFFFF;
}
.container-fluid a{ color: #868686; }
.acontent .panel-primary img{ width: auto; }

.wc100 h1{ margin: 10px 0 0; }


table.tbNet thead th {
    font-size: medium;
    padding: 10px;
}
table, th, td {
    border: 1px solid #1d1d1d;
    border-collapse: collapse;
}
td, th {
    padding: 10px;
}
table.tbNet .hMB{ display: none; }

a.signup.alpha88regis{ margin: 10px 0 20px;
    display: inline-block;
    font-size: 20px;
    background: #d20e00;
    color: #FFFFFF;
    border-color: #750404;
    font-weight: bold;
    padding: 10px 30px;
    text-shadow: 1px 1px #000000;
 }

a.signup.btnregister{ margin: 10px 0 20px;
    display: inline-block;
    font-size: 20px;
    background: linear-gradient(135deg,#cc0f04,#860303 35%,#800102 65%,#e80101);
    color: #FFFFFF;
    border-color: #FFFFFF;
    font-weight: bold;
    padding: 10px 30px;
    text-shadow: 1px 1px #000000;
 }
a.signup.btnregister:hover{ 
    text-decoration: none; 
    background: linear-gradient(135deg,#038408,#005203 35%,#003e02 65%,#529800);
}
.panel {
    background-color: #222324;
}

.footer-brand{ 
    width:100%;     
    border-bottom: 1px solid #4a4848;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.panel-body {
    font-size: 13pt; line-height: 30px;
}

/* - - - - - - - - - - - - - - -  - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - On Web > 768px */
@media screen and (min-width: 768px){
    .logo img{ max-width:200px; }
    .jumbotron .topheader h3 {
        font-size: 63px;
    }
    .wc100 h1{ font-size: 24px; margin: 10px 0 0; font-weight: bold; line-height: 33px; }
    .wc100 h2{ font-size: 23px; margin: 10px 0; font-weight: bold; padding: 10px 0 0; line-height: 33px; }
    .wc100 h3{ font-size: 22px; margin: 10px 0 0; font-weight: bold; padding: 10px 0 0; line-height: 33px; }
    .jumbotron .logo{ text-align: left; }
    .navbar-nav {
        margin-left: 120px;
    }
    .jumbotron .logo a.signup, .jumbotron .logo a.signin{ display: inline-block; }
    .navbar-brand.mobile-signup{ 
        display: none;
    }
    .acontent .wc100{  width: 960px; text-align: left; margin: auto; }
    table.tbNet .hMB{ display: table-cell; }

    .page-content .panel-primary.blackbox .panel-body{
        font-size: 16px;
    }
    .col-sm-4 { width: 50%; }
    .footer-brand{ width:65%; }
}

.faqsBox h4{
    font-size: 17px; margin: 15px 0 7px; padding: 0; color: #FFFFFF;
}


/* - - - - - - - - - - - - - - -  - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - Table */
#topList{ padding: 0; text-align: center; }
#topList li{ 
    display: inline-block; text-align: center;
    background: #FFFFFF; position: relative;
    border: 1px solid #000000; vertical-align: top;
    border-radius: 8px; color: #000000;
    padding: 0; margin: 15px 5px 10px;
    width: 96%;
}
#topList .tLN{ position: absolute;z-index: 9; left: 10px; top: -7px; }
#topList .tLN strong{ position: absolute; left: 18px; top: 0; color: #000000; z-index: 99; font-size: 18px; font-weight: bold; }
#topList .tLN span{ font-size: 45px; color: #ffc106; text-shadow: 1px 1px #FFFFFF; }
#topList h2{ padding-top: 24px; color: #FFC107; font-size: 24px; line-height: 33px; }
#topList p{ padding: 10px; }
#topList p.tL1{ margin: 0; }
#topList p.tL2{ color: #d20c0c; padding: 0; margin: 0; }
#topList p.tL2 strong{ font-size: 35px; vertical-align: middle; margin-top: -5px; display: inline-block; }
#topList p.tL3{ margin: 0 10px; border-top: 1px solid #a2a1a1; border-bottom: 1px solid #a2a1a1; font-size: 10pt; }
#topList p.tL4{ }
#topList p.tL4 a{     
    background: #ca0b0b;
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #880a0a;
    color: #FFFFFF;
    border-radius: 8px; 
}
/* - - - - - - - - - - - - - - -  - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - On Web > 768px */
@media screen and (min-width: 768px){
    #topList li{ width: 30%; }
}

.panel-footer p{ margin: 0 0 5px; padding: 0; max-height: 40px; overflow: hidden; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - tableList */
table, th, td { border: 1px solid #1d1d1d; border-collapse: collapse; }
td, th { padding: 10px; }
.tableList{ width: 100%; color: #FFFFFF; }
.tableList, .tableList th, .tableList td { border: 1px solid #676767; }
.tableList td{ padding: 8px; vertical-align: middle; line-height: 18px; }
.tableList thead{ background: #000000; }
.tableList tbody tr{ background: #2b2b2b; }
.tableList thead th{ font-size: 12pt; text-align: center; padding: 10px 3px; color: #FFFFFF; }
.tableList a.btn{ 
    background-color: #cc0202; box-shadow: 0px 2px 0px 0px #1d1c1c; display: inline-block; color: #FFFFFF;
    text-shadow: 0 -0.0625em 0 rgba(0,0,0,.4); text-transform: uppercase; text-align: center; min-width: 30px;
    padding: 10px 13px; border: 0.5px solid #848484; border-radius: 10px; font-weight: bold; font-size: 12pt; text-decoration: none;
}
.tableList a.btn:hover{ background-color: #a90000; text-decoration: none; }
.tableList .co1{ width: 1px; font-weight: bold; font-size: 13pt; }
.tableList .co2{ width: 1px; }
.tableList .co2 img{ width:150px; margin: 5px 0 0; border: 2px solid #353535; border-radius: 8px; }
.tableList .co3{ color: #02de4a; font-size: 22px; font-weight: bold; text-align: center; font-family: sans-serif,arial,tahoma,verdana; }
.tableList .co4{ font-size: 9pt; text-align: center; }
.tableList .co5{ font-size: 9pt; max-width: 150px; }
/* if screen < 800px */
@media screen and (max-width: 800px) {
    .tableList td{ padding: 5px; }
    .tableList .co2 img{ width:100px; }
    .tableList .co3 { font-size: 18px; }
    .tableList .hCo5, .tableList .co5{ display:none; }
    .tableList a.btn { font-size: 10pt; padding: 10px 9px; }
}


nav.navList{ line-height: 26px; padding: 10px; border-bottom: 1px solid #FFFFFF; }
nav.navList header{ font-size: 18px; }
nav.navList header h3{  margin: 10px 0 10px 5px; display: inline-block; }


.sticky { position: fixed; top: 0; width: 100%; }
.sticky + .content { padding-top: 60px; }
.listHBox{ width: 100%; padding: 0 0 15px 10px; border-top: 1px solid #a8a8a8; }
.listHBox h2 { font-size: 23px; font-weight: bold; line-height: 33px; text-shadow: 1px 1px #000000; }


/* - - - - - - - - - - - - - - -  - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - New Content List */
#toplist ul, #toplist li, dt, dd, ol{ list-style-type: none; margin: 0; padding: 0; display: inline-block; }
#toplist ul{ margin: 0 0 0 15px; }
#toplist ul h3{ border-bottom: 2px solid #e30000; }
#toplist li.col1{ width: 50%; float: left; margin: 20px 0 0; }
#toplist li.col2{ width: 50%; margin: 15px 0 0; }
#toplist li.col3{ width: 100%; margin: 15px 0 15px; }
#toplist li.col2 dl{ margin: 0 0 0 25px; }
#toplist li.col2 dt{ margin-right: 12px; font-size: 11pt; }
#toplist li.col2 dd{ font-size: 12pt; color: #b9b5b5; }
#toplist a.moredt{ color: #1387e3; font-size: 12pt; }
#toplist a.btn{ 
    display: inline-block; background: #f10557; color: #FFFFFF;
    font-weight: bold; font-size: 12pt; margin: 10px 0 5px 25px; text-shadow: 1px 1px #000000;
}
a.btn.lazada{ 
    background:#f10557 !important; display: inline-block; color: #FFFFFF;
    font-weight: bold; font-size: 12pt; margin: 10px 0 5px 25px; text-shadow: 1px 1px #000000;
}
a.btn.shopee{ 
    background:#ff5a00 !important; display: inline-block; color: #FFFFFF;
    font-weight: bold; font-size: 12pt; margin: 10px 0 5px 25px; text-shadow: 1px 1px #000000;
}
a.btn.lazada:hover, a.btn.shopee:hover{ background: #4D8244 !important; }

#toplist a.btn:hover{ background: #000000; }
#toplist .ollist{ width: 700px; display:table; background: #e9e5e5; padding: 10px; margin-bottom: 20px; border-radius: 8px; border: 1px solid #d6d5d5; }
#toplist .ollist .row{display: block; padding: 10px; background: #FFFFFF; margin: 10px; border-radius: 8px; }
#toplist .ollist .cell{ display:table-cell; padding:3px; vertical-align: middle; }
#toplist .ollist .cell:first-child{ font-size: 15pt; font-weight: bold; }
#toplist .ollist .cell:nth-child(2){ width: 20%; }
#toplist .ollist .cell:nth-child(3){ font-weight: bold; line-height: 22px; padding-left: 10px; }
#toplist .ollist .cell:nth-child(3) span{ font-weight:normal; font-size: 11pt; }
#toplist .ollist .cell:nth-child(4){ text-align: right; }
#toplist .ollist a.btn{ margin: 10px; }

.faqsBox h2{ border-bottom: 4px solid #4e8dd7; display: inline-block; }
.faqsBox dl{ margin-bottom: 10px; width: 100%; }
.faqsBox dt{ display: block; padding-top: 10px; font-size: 19px; color: #81bbff; }
.faqsBox dd{ padding: 0 0 0 17px; color: #cfcccc; font-size: 16px; }
.faqsBox dd a{ text-decoration: underline; }
.faqsBox dd::before { content: "\2713"; color: #FFFFFF; font-size:14pt; font-weight: bold; }

#reviewlist{  }
#reviewlist h2{ padding-top: 0; }
#reviewlist .ollist{ width: 760px; display:table; background: #e9e5e5; padding: 10px; border-radius: 8px; border: 1px solid #d6d5d5; }
#reviewlist .ollist .row{display: block; padding: 10px; background: #FFFFFF; margin: 10px; border-radius: 8px; }
#reviewlist .ollist .cell{ display:table-cell; padding:3px; vertical-align: middle; }
#reviewlist .ollist .cell:first-child{ width: 35%; }
#reviewlist .ollist .cell:nth-child(2){ font-weight: bold; line-height: 22px; padding-left: 10px; }
#reviewlist .ollist .cell:nth-child(2) span{ font-weight:normal; font-size: 11pt; }

a.btn.signupnow{
    display: inline-block; background: #f10557; color: #FFFFFF; font-weight: bold;  border-radius: 10px;
    font-size: 14pt; margin: 15px 0 5px 10px; text-shadow: 1px 1px #000000; padding: 12px 30px; border: 1px solid #ffffff;
}
a.btn.signupnow:hover{ background: #17741b; }

.brandlist{ background: transparent; width: 780px; margin: 10px 0 0; }
.brandlist a{ 
    display: inline-block; text-align: center; width: 160px; border-radius: 8px; overflow: hidden;
    background: #383838; border: 1px solid #515151; margin: 10px; }
.brandlist a:hover{ text-decoration: none; border: 1px solid #ff4886; }
.brandlist a span{ font-weight: bold; display: inline-block; margin: 4px 0; }

#toplist .ollist.comp{ width: 100%; overflow: scroll; display: block; background: #414141; }
#toplist .ollist.comp div.row{ min-height: 300px; overflow: scroll; line-height: 20px; background: #414141; color: #FFFFFF; }
#toplist .ollist.comp img{ width: 150px; }
#toplist .ollist.comp table{ border: none; }
#toplist .ollist.comp table tr td{ border-color: #6d6d6d; text-align: center; }
#toplist .ollist.comp table tr td:first-child{ font-weight: bold; min-width: 100px; border-left: none; font-size: 10pt; text-align:left; color: #ffc107; }
#toplist .ollist.comp table tr td:last-child{ border-right: none; }
#toplist .ollist.comp table tr:first-child td{ border-top: none; position: relative; padding-top: 10px; }
#toplist .ollist.comp table tr:last-child td{ border-bottom: none; }
#toplist .ollist.comp table tr:nth-child(2) a{ font-size: 10pt; font-weight: bold; text-decoration: underline; line-height: 22px; color: #FFFFFF; }
#toplist .ollist.comp table tr:first-child td span{
    font-weight: bold; display: inline-block; padding: 5px 10px; background: #e91e63;
    border-radius: 18px; color: #FFFFFF; position: absolute; left: 24px; top: 10px; font-size: 14pt; 
}

#toplist .gn{ padding-bottom: 30px; width: 100%; }
.gn{ padding-bottom: 0; width: 100%; }
.gn ul, #toplist .gn ul{     
    width: 44%; margin: 10px 15px 5px 15px; vertical-align: top; padding: 20px; background: #515050; font-size: 12pt;
    border-radius: 12px; position: relative; border: 1px solid #f10557; padding-left: 40px; color: #FFFFFF; display: inline-block;
}
.gn ul li, #toplist .gn ul li{ width: 100%; padding-left: 15px; line-height: 20px; font-size: 11pt; display: inline-block;  float: left; margin: 3px 0; }
.gn ul h4, #toplist .gn ul h4{  
    display: inline-block; padding: 7px 10px; background: #f10557;  color: #FFFFFF; 
    position: absolute; left: -16px; top: 5px; font-size: 12pt; border-radius: 8px;
}
.gn ul:first-child, #toplist .gn ul:first-child{ border-color: #4CAF50; }
.gn ul:first-child h4, #toplist .gn ul:first-child h4{ left: -10px; background: #287f2c; }
.gn ul li::before, #toplist .gn ul li::before{
  content: "\2718"; /* 2714 / 2716 */ padding-right: 5px; color: #f10557; font-size:13pt;
}
.gn ul:first-child li::before, #toplist .gn ul:first-child li::before { content: "\2713"; color: #61e166; font-size:12pt; }


@media only screen and (max-width: 800px){
    #toplist li.col1, #toplist li.col2{ width: 100%; }
    #toplist li.col2 dl{ margin: 0 0 0 15px; }
    #toplist a.btn{ margin: 10px 0 5px 15px; }
    #toplist .ollist{ width: 100%; }
    #toplist .ollist .cell:nth-child(4){ display: none; }
    #reviewlist .ollist{ width: 100%; }

    #reviewlist .ollist .cell:first-child {
        width: 100%; display: inline-block; padding-bottom:15px;
    }
    #reviewlist .ollist .row strong { margin: 0 0 8px 0 !important; }
    .brandlist{ width: 100%; }
    #toplist .gn ul, .gn ul{ width: 95%; }
}