@charset "UTF-8";/*GENERAL STYLES*/
body {
background:#4b8bc3 url('https://www.gamifive.com.my/galleries/gamifiveProduct/bg-body.png') !important; 
background-repeat: no-repeat  !important;
background-size: cover  !important;
}
body, p.content-terms{
  font:15px/1.231 arial,helvetica,clean,sans-serif;  
  font-weight: 400 !important;
  text-align:justify;
  line-height:normal !important;
}
/*FONTS size*/
div.content-terms{
	font-size:15px;
}
h2.panel-title a{
    font-weight: bolder;
}
  a, a:hover,.FG_Contents_display a{
    text-decoration: none
  }  
  .btn-primary,.container .container-footer, div.content-terms {
    text-align: center !important;
  }
  .ui-content initial-page container span{
    font-size: 1em !important;
}
.initial-page h1 {
    border-top: 1px solid #2a9fa7;
    padding-top:8px;
    background-repeat: repeat;
    padding: 10px;
}
        
h1.h1-no-bg {
    font-weight: 300;
    font-style: normal;
    background-image:none;
    border:none;
    margin:0px;
    padding:0px;
}
p.content-terms a.download-button{
    text-decoration: underline !important;
}

/*HEADER*/
header .left-header-btn.btn.btn-primary:hover,.right-header-btn.btn.btn-primary:hover{
    background: transparent;
    border-color:#fff;
}
.header-gamifive {
  background:#133979 url('https://www.gamifive.com.my/galleries/gamifiveProduct/square.png') !important;
 
}
.header-gamifive .ui-icon-user:after {
background-image: url('https://www.gamifive.com.my/galleries/gamifiveProduct/account.svg') !important;
background-size: 90% !important;
}

img {
max-width:100%;
}
.header-gamifive {
  background-image: url('https://www.gamifive.com.my/galleries/gamifiveProduct/square.png');
  background: #133979;
}

header .right-header-btn.btn.btn-primary, header .left-header-btn.btn.btn-primary{
  color: #fff;
  background-color: #133979;
  border-radius: 50%;
  height: 40px;
  border-color:#fff;
}
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
background-color: transparent;
  border-radius:0;
  background-size:100%;
}
.ui-nosvg .ui-icon-bars:after {
background-size:100%;
}
.right-header-btn.btn.btn-primary,.left-header-btn.btn.btn-primary {
top: 18px !important;
width: 40px !important;
}


/*END HEADER*/

/*COLOR BG*/
.FG_Contents_display {
  background-color: #fff;
  border: 5px solid #fff;
  text-align: center;
  font-size: 16px;
}
.FG_Contents_posRelative {
    margin-bottom:10px;
}

/*COLORS fonts*/
body, p.content-terms, h2.content-terms, .color-white, h1.h1-no-bg,.btn-primary, .initial-page h1, div.content-terms{
  color: #fff;
}
h2.panel-title a, div.content-terms a, p.content-terms a.download-button{
  color:#2a9fa7 !important;
}
.FG_Contents_display h3 {
  font-size: 19px;
  min-height: 30px;
  height: 35px;
  line-height: 31px;
  background: #ff8c00;
  color: #fff;
  padding: 0 10px;
  border: 1px solid #c76d00;
  border-radius: 5px;
  font-style: italic;
}

.FG_Contents_display h3 a {
  font-size: 19px; 
  font-style: italic; 
  color: #fff;
}

 .FG_Contents_display h3 a:hover {
  color: #fff;
}

/*HOME CONTENTS*/
.bg-home .FG_Contents_display a,.bg-home .FG_Contents_display h3,.bg-home .FG_Contents_display.left{
  text-align: center !important;
}

.message-home p {
  font-size: 18px;
  text-align: center;
  color: #ff8c00;
  font-style: italic;
}

.title-home p {
  clear:both;
  display: inherit;
  font-size: 25px;
  font-style: italic;
  color:#fff;
  text-align: center;
}
.FG_Contents_display {
  margin-bottom:10px;
}
.ui-nosvg:after {
  background-size: 100%;
}

nav.offcanvas.navmenu {
  padding: 0 !important;
}

.button-home.btn.btn-primary, .button-home-big.btn.btn-primary  {
  display: inline-block;
  float: right;
  margin-bottom: 10px;
  background: transparent;
  border: 0;
  color: #ff8c00;
  font-style: italic;
  font-size: 16px;
  position: relative;
  width: 134px;
}

.button-home.btn.btn-primary:before, .button-home-big.btn.btn-primary:before {
  content: ' \003E';
position: absolute;
  right: 0px;
  color: #ff8c00;
  opacity: .6;
  margin-right: 5px;
 
}

.button-home.btn.btn-primary:after, .button-home-big.btn.btn-primary:after {
  content: ' \003E';
  position: absolute;
  right:-5px;
  color: #ff8c00;
 
}

.button-home-big.btn.btn-primary {
  width: 170px;
}

.flexslider .slides img {
  border-right: 4px solid #fff;
}


.flexslider {
  padding-left: 2px;
}

.flex-control-paging li a {
  background: rgba(255,140,0,0.5);    
}

.flex-control-paging li a.flex-active {
  background: rgba(255,140,0,0.9);
}
/*END HOME CONTENTS*/

/* LIST ITEM */

.list-item .FG_Contents_display div.content_imgCoverL {
  float: left;
  width:50% !important;
  margin-right: 5px;
}
.list-item .FG_Contents_display div.content_preview {
  height: 100px;
  overflow: hidden;
  float: left;
  width:50% !important;
  margin-right: 5px;
}   

.list-item .FG_Contents_display img.FG_Contents_posRelative {
  width: 100% !important;
}    


.list-item .FG_Contents_display br.clear {
  display:none;
}

.list-item .content_longTitle {
  display: block !important;
  text-align: left;
}

.list-item .FG_Contents_display h3 {
  margin: 5px 0 0;
  float: left;
  /*width: 75px;*/
  text-align: left;
}

.title-list p span, .title-list h1 {
  border-top: 0px;
  text-align: center;
  color: #ff8c00;
  font-size: 25px !important;
  display: block;
}
/* END LIST ITEM */

/*PLAYER*/
#dl-container-player{
max-width: 400px;
}
/*END PLAYER*/

/*PAGINATION*/
.page_left img{
  width: 30px !important;
  }
  .page_right img{
    width: 30px !important;
  
  }
  
  .conteiner-home-recommended .col-xs-3 {
      width: 49%;
  }
  .text-no-content p, .text-no-content h3{
  color:#fff;
  }
 /*END PAGINATION*/

/*POPUP COOKIE*/
.cookie-banner {
  position: fixed;
  z-index: 1001 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 25px !important;
  text-align: left !important;
  text-shadow: none !important;
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b !important;
font-size:1em !important;
}
.cookie-banner a:hover{
background-color: #0c6497;
}
.cookie-banner .btn-block{
  background: none;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  max-width: 130px;
  margin: 5px auto;
display: block;
border: none;
   color: #8a6d3b !important;
font-weight:bold !important;
  width: 50px !important;
  height: 50px !important;
  text-align: center;
  line-height: 25px;
position:absolute;
top:0px;
right:0px;
  font-size:25px;
}
.cookie-banner .btn-block:hover{
  background: none;
}
.cookie-banner a.btn-link:hover{
background-color:transparent;
color: #0c6497;
}

/*END POPUP COOKIE*/

/*ARROW SCROLL*/
#toTopImage {
  background: #0c6497 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApUlEQVRYR+3VyRGAIAxAUVOZrWhl2mlEBnWQJQugl3gG/jMHgKnhQ8TFbZ8BYNUeA9qNIb6F/bsWoQK84tc/qBBiQCGuRogARFyFYAOYcTGCBRDGRQgSoIyzEVVAY5yFKAI6xUlEFtA5XkUkgEHxIiICDI5nETfgo3iC8ICP4xECfoo/CO5z7KDIXXuuc88zecn5ddxDDWATsAnYBGwCNgGbwKgJHOu0jr37VNnhAAAAAElFTkSuQmCC) no-repeat left center;
  width: 32px;
  height: 32px;
}
#toTop {
  cursor: pointer;
  padding: 5px 3px;
  background:  #0c6497;
  position: fixed;
  bottom: 0;
  right: 5px;
  display: none;
  opacity: .8;
  z-index: 10000;
}

/*END ARROW SCROLL*/

/* STATUS PAGE */

/*end STATUS PAGE */

/* terms PAGE */
.box-text-terms{
	background-color: #fff;
    padding: 20px;
 	font-size: 14px !important;
   color:#337ab7;
   text-align:justify;
}
.h1-terms h1{
  text-align: center;   
  font-size: 21px;
  border:0 !important;
  padding:0px !important;
}
.initial-page .h1-terms h1,#cookie-policy p a{
   color: #ff8c00  !important;
  font-weight: bold;
}
.box-text-terms a{
  font-weight: bold;
}

.box-text-terms table, .box-text-terms table td {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #5a8ab5;
}
.status-disable-button{
display: block;
width: 20%;
margin: 0 auto 20px;
height: 40px;
background-color: #198eb8;
border: 1px solid #166587;
border-top: 1px solid #166587;
color: #fff;
text-align: center;
line-height: 28px;
border-radius:0px;
}
#status-accordion-element-links a{
      color: #0c6497 !important;
      text-decoration: underline !important;
}

/*end terms PAGE */

/*CATEGORY PAGE*/
.title-rubric-page .list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background:none !important;
  border: 0px !important;
}

.title-rubric-page .list-group li.list-group-item span.list-group-header {
  font-size: 24px;
  font-weight: 700;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align:center;
  color:#ff8c00 !important;
}
/*END CATEGORY PAGE*/ 

/* CAROUSEL */
.carousel-flexslider {
  min-height: auto !important;
}
.carousel-flexslider ul li > img,
.carousel-flexslider ul li > .flex-caption,
.carousel-flexslider ul li > p 
{
 display: none !important; 
}
.carousel-flexslider ul li .FG_Contents_display {
  margin: 0;
  padding: 0;
}
.carousel-flexslider ul li .FG_Contents_display img {
    margin: 0;
    padding: 0;
    border: 0;
}
.carousel-flexslider ul li .FG_Contents_display .clear {
 display: none; 
}
.flex-direction-nav a {
    height: 46px;
    margin-top: -26px;
}
/* END CAROUSEL */


 /* FOOTER */
 footer{
  background-color: rgba(18,48,77,0.6) !important;
margin-top:20px;
}
#footer-gamifive{  
  padding: 10px;
  bottom: 0px;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0 auto;
margin-top:10px;
}

#bar-footer-gamifive{
   background-color:transparent;
}
#bar-footer-gamifive ul{
  display: inline-block;
  margin: 10px auto;
  text-align: center;
  width: 100%;
clear:both;
float:none
}
#bar-footer-gamifive li {
 float:none;
display:inline-block;
}
#bar-footer-gamifive li a {
  color: #fff;
  white-space: nowrap;
  text-align: center;
  line-height: 42px;
  padding: 2px;
  font-size: 14px;
  text-decoration: none;
  padding-right:5px;

}
#bar-footer-gamifive li a:after {    
  content: "-";
  padding-left: 4px;
}
#bar-footer-gamifive li:last-child a:after{
 content: " ";
}

/*MENU PANEL*/
.menu-panel {
  box-shadow: inset -11px -1px 5px -6px #ccc;
}
.menu-panel {
  color: #0c6497;
  font-size: 0.8em;
  background: #f7f7f7;
  box-shadow:none;
}

.menu-panel .panel-default>.panel-heading {
}
.menu-panel .panel-default {
  border-color: transparent;
}
.menu-panel .panel {
border:0;
}
.menu-panel .panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #000;
}

.main-category-items li a{
 text-indent: 30px;
 font-weight: bold;
display:inline-block;
}

.category-items {
  color: #5a8ab5;
  border-top: 2px solid #f0f0f0;
  padding-top: 10px;
}

.category-items .list-group li.list-group-item span.list-group-header{
 margin-left: 18px; 
 text-indent: 15px;
 font-weight: normal;
display:inline-block;
line-height: 1.8em;
}
.main-category-items .list-group li.list-group-item span.list-group-header{
  line-height: 1.8em;
}



.main-category-items .list-group-item .row:before {
background-repeat: no-repeat;
position:absolute;
content: "";
left:28px;
width:23px;
height:23px;
display:inline-block;
}

.main-category-items .col-sm-12{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 42px;
  
}
.search-container form .control-label{
  font-size:20px;
  line-height: 35px;
}


/*end MENU PANEL*/

/*LOGIN PAGE*/
#h1-login{
  padding-bottom: 10px;
  }
  #h1-login h1, #h3-login h3 {
      border-top:0px !important;
      background-repeat: repeat;
      padding: 0px !important;
    margin: 0px !important;
     color:#ff8c00;
    font-style: italic;
    font-weight: bold;
    font-size: 21px;
  }
  #h3-login h3, #h3-reset h3{
   color:#fff;
   font-size: 22px;
  }
  #h3-reset h3{
   font-style: italic;
    font-weight: bold;
  }
  #error-message-login{
   text-align:center;
    color:#fff;
    font-size:14px;
    padding-top:20px;
  }
  #error-message-login ul,#error-message-login li {
     list-style-type:none !important;
    margin:0px;
  padding:0px;
  }
  #confirm-login-button{
      background: #ff8c00;
      color: #fff;
      border: 1px solid #c76d00;
     margin: 0 auto 20px;
      width: 240px;
     min-height: 50px;
      line-height: 35px;
      height: 50px;
      font-size: 19px;
      font-style: italic;
     font-weight: bold;
  }
  
  @media (min-width: 992px) {
  form#form-login,form.forgot-password-form{
    width: 32%;
    margin: 0 auto;
  }
  }
  
  .input-login input{
  border: 0;
      border-radius: 3px;
      padding: 4px 10px;
      width: 100%;
      margin: 10px auto;
      min-height: 50px;
      background: #fff;
  }
  
  #link-forgot-password a{
      font-style: italic;
      font-weight: bold;
     color: #fff;
        font-size: 14px;
  }
  
  button.button-reset,button.button-reset:hover{
    background:none;
    border: none;
    font-style: italic;
      font-weight: bold;
        color: #ff8c00;
     font-size: 16px;
    margin-bottom:15px;
  }
  button.button-reset:focus,button.button-reset:link{
        outline: none;
        border: none;
        background:none;
  }
  #help-accordion{
  
  }
  #help-accordion .panel-default {
      border:0px;
  }
  #help-accordion .panel-default>.panel-heading, #help-accordion .panel,#help-accordion .panel-group .panel-heading+.panel-collapse>.panel-body{
      background:none;
      border: 0px;
  }
  #help-accordion a{
    text-align:center;
     font-style: italic;
  }
  #box-help-login{
  color:#fff;
  }
  #box-help-login p,.forgot-password-form label {
  color:#fff;
  font-size: 14px;
  line-height: 1.42857143;
  }
  #box-help-login p,.forgot-password-form label {
  font-weight:normal;
  text-align:center;
  display: block;
  }
  #box-help-login h3{
  font-style: italic;
  font-weight: bold;
  font-size: 22px;
  }
  
  button#confirm-forgot-button{
  background: #00abc2;
        font-style: italic;
      border: 0;
      border-radius: 5px;
      font-size: 19px;
      width: 240px;
      min-height: 40px;
      height: 40px;
      font-weight: bold;
      text-align: center;
      display: block;
      position: relative;
    margin:0 auto;
    margin-bottom: 20px;
  }
  #unsub-page{
    background-color: #fff;
    padding:20px;
    color:#337ab7;
  }
  #unsub-page .billunsub-success{
  font-size: 14px;
  line-height: 1.42857143;
  display:block;
  text-align:center;
  
  }
  
  
/*end LOGIN PAGE*/

/*SETTING PAGE*/
.settings-accordion .panel-default>.panel-heading {
  background:#f7f7f7;
  background-repeat: repeat;  
  border-color: #5a8ab5; 
}
.settings-accordion .panel-default>.panel-heading a {
  color:  #5a8ab5 !important;
  font-weight: normal;
  text-align: center;
  font-size: 0.85em;
}
.settings-accordion .settings-accordion-element h1{
color:#ff8c00 !important;
border:0px;
margin:0px;
font-size: 21px;
font-weight: bold;  
}
.settings-accordion .settings-accordion-element p{
font-size: 14px;
line-height: 1.42857143;
color:#5a8ab5;
}
.settings-accordion .settings-accordion-element a{
color:#ff8c00 !important;
}

.panel-group .panel{
    border-radius: 0px !important;
}
.panel-group .panel+.panel {
    margin-top: 1px;
}
#h1-setting{
padding-bottom: 10px;
}
#h1-setting h1 {
  border-top:0px !important;
  background-repeat: repeat;
  padding: 0px !important;
margin: 0px !important;

}
.initial-page #h1-login h1{
border:0px !important;
}
#h1-setting h1 span, #h1-login h1{
color:#ff8c00;
font-style: italic;
font-weight: bold;
font-size: 21px;
}
#setting-login-button{
  background: #ff8c00;
  color: #fff;
  border: 1px solid #c76d00;
 margin: 0 auto 20px;
  width: 240px;
 min-height: 50px;
  line-height: 35px;
  height: 50px;
  font-size: 19px;
  font-style: italic;
 font-weight: bold;
}
.setting-disable-button{
display: block;
width: 20%;
margin: 0 auto 20px;
height: 40px;
background-color: #198eb8;
border: 1px solid #166587;
border-top: 1px solid #166587;
color: #fff;
text-align: center;
line-height: 28px;
border-radius:0px;
}
#settings-accordion-element-links a{
    color: #0c6497 !important;
    text-decoration: underline !important;
}
@media (min-width: 992px) {
.settings-page .container {
/*width: 32%;*/
}
}  

.settings-page table, table td {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #5a8ab5;
}
/*END SETTING PAGE*/

/*ZOOM PAGE*/
.zoom-content .content_freeText a{
  background: #ff8c00;
  color: #fff;
  border: 1px solid #c76d00;
  display: block !important;
  min-height: 50px;
  line-height: 49px;
  height: 50px;
  border-radius: 5px;
  font-size: 19px;
  font-style: italic;
  width: 190px;
  clear: both;
  float: none;  

}
.zoom-content .content_freeText {  
margin-top:20px;
margin-left: 20px;
margin-bottom:30px;
position: relative;
clear: both;
}


.zoom-content .content_longTitle{
  color: #ff8c00;
font-style: italic;
font-size: 25px;
font-weight:bold;
}
.zoom-content .content_shortDesc{
text-align:left !important;
}
.zoom-content .FG_Contents_display{
  background: #fff;
  color:#337ab7;
}


#h1-zoom h1 span,#h1-zoom h1{
color: #ff8c00 !important;
font-weight: bold;
text-align:center !important;
font-size: 28px;
}
#h1-zoom h1{
border:0px !important;
}
#h3-zoom h3{
color:#fff;
font-size: 25px;
}

.zoom-content .content_preview{
height:360px;
overflow: hidden;
display:block !important;
float:left;
max-width: 482px;
}
.zoom-content .content_shortDesc,.zoom-content .content_longTitle{
float: left;
/*width: 50%;*/
margin-left:30px;
margin-top:20px;
}
.zoom-content .content_preview  {
display: block !important;
}
}

.zoom-content .content_preview img {
min-width: 100% !important;
height: auto !important;
margin-bottom: 0 !important;
}

.zoom-content .FG_Contents_posRelative {
  float:left;
}

@media only screen and (max-width: 768px) {
  .zoom-content img.FG_Contents_posRelative {
      margin: auto;
      float: none;
      text-align: center;
  }

  .zoom-content .content_longTitle {
      display: block !important;
      clear:both;
      margin: 10px;
      text-align:center;   
  }

  .zoom-content .content_shortDesc {
      margin: 0px 10px;
  }

  .zoom-content .content_freeText {
      float: none;
  }

  .zoom-content .content_longTitle {
      font-size: 20px;
  }
  .zoom-content .content_preview{
    height:auto !important;
    
    }
}

@media only screen and (min-width: 768px) {
.zoom-content .FG_Contents_display  {
      display: grid;
    grid-template-columns: 1fr 2fr;
      gap: 10px;
}
.zoom-content .content_preview {
      grid-row: 1 / 6;
      height: auto;
    max-width: none;
    float: none;
}
.zoom-content .content_preview img {
  min-width: 100% !important;
  height: auto;
  margin-bottom: 0;
}
.zoom-content .content_longTitle {
      margin: 5%;
    width: 90%;
      line-height: 170%;
}
.zoom-content .content_shortDesc {
      margin: 0 5%;
    width: 90%;
      text-align: center !important;
      grid-row: 2 / 4;
}
.zoom-content .content_freeText a {
    display: inline-block !important;
}
}
/*END ZOOM PAGE*/