@import url("/theme/Default/style.css");
@import url('https://fonts.googleapis.com/css?family=Lora:700');

@viewport {
  width: device-width;
  zoom: 1;
}

#theme-lang{
display:none;
}
	
body{
	background:url(/theme/4dyes/imgs/bg7.jpg) #000 bottom  fixed;
	background-size:cover;
color:#ffffff;
	}
	
#page-content{
	font-size:16px;
	color:#fff;
  text-align:justify;
  padding:10px;
}

#theme-title .title {
	text-align:center;color:#fff;
	padding:10px;
	font-size:20px;
	font-weight:bold;
	font-family: 'Lora', serif;
	}

#theme-menu{
	float:right;
	}
	
.cmsview{
	padding-top: 60px;
	}
	
.site-content{
	min-height:500px;
	}

.navbar {height:65px;}

.navbar-brand img {
	width:300px !important;
	margin-top:-10px; 
	position:relative;
	}

.navbar-inverse{
	background: #292929 !important;
  background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px) !important;
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)) !important;
}
	
.navbar-nav>li>a {
	border-right: 1px solid #3c3c3c;
  border-left: 1px solid #292929;
  border-bottom: 1px solid #232323;
  border-top: 1px solid #red;
  padding-top: 22px;
  padding-bottom: 21px;
  }


.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    border-color: #333 !important;
}


.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: #b40404;
  }
  
#sidebar ul li a.dropdown {
    display: inline-block !important;
}

footer{
	color:#999;
	padding:10px 5px;
	background: #191919 !important;
	}


footer .footer-link a img{
	margin-bottom:15px;
	width:120px;
	}

.btn, .btn:hover{
	color:#fff;
	border-color:#666 !important;
	background: #292929 !important;
  background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px) !important;
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)) !important;
}

a, a:hover, a:visited{color:#fff}




/*================result style=====================*/

.col-sm-2 button{margin-bottom:10px !important;}

#live-4d{
	margin-left:-0.7%;
	}

#live-4d .col-sm-12 {
	margin-top:10px;
	padding-left:0px !important;
	}
	
#live-4d .fb-like {
	position:absolute;
	right:-15px;
	}
	
div#live {
     background: url(https://www.4dking.com.my/img/live.gif) no-repeat;
     width: 8px ;
     height: 8px ;
}	

#past-4d{
	margin-left:-2%;
	}

#past-4d div#live{
	display:none;
	}
	
#past-4d .fb-like {
	position:absolute;
	right:-15px;
	}
	
#past-4d label{
	color:#fff;
	}


#past-4d #daterow{
	margin: -15px auto 25px;
	text-align:center;
	border:#333 solid 1px;
	display:block;
	width:240px;
	padding:10px;
	background:rgba(255,255,255,0.1);
}

#past-4d #daterow input{
	border-radius:3px !important;
	border:none;
	padding:4px 0px 4px 5px;
	width:100px;
	margin-left:5px;
}
	
	
#past-4d #Magnum .panel-body .logo #datetime .control-label,
#past-4d #Sabah .panel-body .logo #datetime .control-label{
	color:#333;
}	
	
	
#live {
	position:absolute;
	right:90px;
	top:18px;
	}


.panel {
    background-color: #2e2e2e;  
    margin-bottom:40px;
}

.panel-default>.panel-heading {
    color: #fff;
    font-size:11px;
    font-weight:bold; 
    height:40px;
}

.panel-body{
	color:#fff;
	padding-top:0px !important;
	}

.panel-body .logo{
	padding-bottom:10px;
	}

.panel-body .logo .col-sm-8{
	padding:0px !important
	}

.panel-body .logo #datetime{
	text-align:right;
	color:#fff;
}

.panel-body .logo #datetime .col-sm-12{
	margin:0px !important
	}
	
.panel-body #TopThree,.panel-body #Special,.panel-body #Consolation{
  padding:0px 15px 0px;
  line-height:28px;
  margin:16px 0px 0px;
  font-size:16px;
}

.panel-body #TopThree label,.panel-body #Special label, .panel-body #Consolation label{
  background:#1c1c1c;
  width:100%;
  border:#333 solid 1px;
  margin-bottom: 0px !important;
  padding:2px;
  font-size:14px;
}

.panel-body #TopThree{
	padding:0px !important;
	}
	
.panel-body #TopThree .col-sm-4{
	padding:0px !important;
	margin:0px !important;
}



/*=================magnum=====================*/
#Magnum .panel {
    border: 3px solid #f2bc00 !important;
}

#Magnum .panel-default>.panel-heading {
    background-color: #f2bc00 !important;
    border-color: #f2bc00 !important;
    color:#333 !important;
}

#Magnum .panel-body .logo #datetime{
	color:#333;
}

#Magnum .panel-body .logo{
	background:#f2bc00 !important;
	padding-bottom:10px;
	}

#Magnum .panel-body .logo #Magnumimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_magnum.png)no-repeat #333;
	width:80px ;
  height:40px ;
}



/*=================PMP=====================*/
#PMP .panel {
    border: 3px solid #148ea4 !important;
}

#PMP .panel-default>.panel-heading {
    background-color: #148ea4 !important;
    border-color: #148ea4 !important;
}

#PMP .panel-body .logo{
	background:#148ea4 !important;
	padding-bottom:10px;
	}

#PMP .panel-body .logo #PMPimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_damacai.png)no-repeat;
	width:80px ;
  height:40px ;
}




/*=================Toto=====================*/
#Toto .panel {
    border: 3px solid #dd0000 !important;
}

#Toto .panel-default>.panel-heading {
    background-color: #dd0000 !important;
    border-color: #dd0000 !important;
}

#Toto .panel-body .logo{
	background:#dd0000 !important;
	padding-bottom:10px;
	}

#Toto .panel-body .logo #Totoimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_toto.png)no-repeat;
	width:80px ;
  height:40px ;
}


/*=================Singapore=====================*/
#Singapore .panel {
    border: 3px solid #12689a !important;
}

#Singapore .panel-default>.panel-heading {
    background-color: #12689a !important;
    border-color: #12689a !important;
}

#Singapore .panel-body .logo{
	background:#12689a !important;
	padding-bottom:10px;
	}

#Singapore .panel-body .logo #Singaporeimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_sgpool.png)no-repeat;
	width:80px ;
  height:40px ;
}



/*=================Sabah=====================*/
#Sabah .panel {
    border: 3px solid #eee !important;
}

#Sabah .panel-default>.panel-heading {
    background-color: #eee !important;
    border-color: #eee !important;
    color:#333;
}

#Sabah .panel-body .logo{
	background:#eee !important;
	padding-bottom:10px;
	}

#Sabah .panel-body .logo #datetime{
	color:#333;
}

#Sabah .panel-body .logo #Sabahimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_sabah88.png)no-repeat;
	width:80px ;
  height:40px ;
}



/*=================Sandakan=====================*/
#Sandakan .panel {
    border: 3px solid #2f9405 !important;
}

#Sandakan .panel-default>.panel-heading {
    background-color: #2f9405 !important;
    border-color: #2f9405 !important;
}

#Sandakan .panel-body .logo{
	background:#2f9405 !important;
	padding-bottom:10px;
	}

#Sandakan .panel-body .logo #Sandakanimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_stc.png)no-repeat;
	width:80px ;
  height:40px ;
}




/*=================Sarawak=====================*/
#Sarawak .panel {
    border: 3px solid #094405 !important;
}

#Sarawak .panel-default>.panel-heading {
    background-color: #094405 !important;
    border-color: #094405 !important;
}

#Sarawak .panel-body .logo{
	background:#094405 !important;
	padding-bottom:10px;
	}

#Sarawak .panel-body .logo #Sarawakimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_cashsweep.png)no-repeat;
	width:80px ;
  height:40px ;
}




/*=================GDLotto=====================*/
#GDLotto .panel {
    border: 3px solid #95650a !important;
}

#GDLotto .panel-default>.panel-heading {
    background-color: #95650a !important;
    border-color: #95650a !important;
}

#GDLotto .panel-body .logo{
	background:#95650a !important;
	padding-bottom:10px;
	}

#GDLotto .panel-body .logo #GDLottoimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_gdlotto.png)no-repeat;
	width:80px ;
  height:40px ;
}


/*=================Perdana=====================*/
#Perdana .panel {
    border: 3px solid #777 !important;
}

#Perdana .panel-default>.panel-heading {
    background-color: #777 !important;
    border-color: #777 !important;
}

#Perdana .panel-body .logo{
	background:#777 !important;
	padding-bottom:10px;
	}

#Perdana .panel-body .logo #Perdanaimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_perdana.png)no-repeat;
	width:80px ;
  height:40px ;
}


/*=================HariHariLucky=====================*/
#LuckyHari-Hari .panel {
    border: 3px solid #00aced !important;
}

#LuckyHari-Hari .panel-default>.panel-heading {
    background-color: #00aced !important;
    border-color: #00aced !important;
}

#LuckyHari-Hari .panel-body .logo{
	background:#00aced !important;
	padding-bottom:10px;
	}

#LuckyHari-Hari .panel-body .logo #LuckyHari-Hariimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_luckyharihari.png)no-repeat;
	width:80px ;
  height:40px ;
}


/*=================thv88=====================*/
#THV88 .panel {
    border: 3px solid #dd4b39!important;
}

#THV88 .panel-default>.panel-heading {
    background-color: #dd4b39 !important;
    border-color: #dd4b39!important;
}

#THV88 .panel-body .logo{
	background:#dd4b39 !important;
	padding-bottom:10px;
	}

#THV88 .panel-body .logo #THV88img{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_thv88.png)no-repeat;
	width:80px ;
  height:40px ;
}



/*=================GOOD4D=====================*/
#GOOD4D .panel {
    border: 3px solid #ffd45e !important;
}

#GOOD4D .panel-default>.panel-heading {
    background-color: #ffd45e !important;
    border-color: #ffd45e !important;
    color:#333 !important;
}

#GOOD4D .panel-body .logo #datetime{
	color:#333;
}

#GOOD4D .panel-body .logo{
	background:#ffd45e !important;
	padding-bottom:10px;
	}

#GOOD4D .panel-body .logo #GOOD4Dimg{
	top:-5px;
	position:absolute;
	background:url(/theme/4dyes/imgs/4D_good4d.png)no-repeat ;
	width:105px ;
  height:40px ;
}



/*=================result history pop up=====================*/
#title h1.title {text-align:center;color:#fff;}
#content {color:#fff;}
#content table{font-size:15px}
#content thead {background-color:#dd0000;color:#fff}
#content .table-striped>tbody>tr:nth-of-type(odd){background-color:#333}
#content .table-striped>tbody>tr:nth-of-type(even){background-color:#444}
#aMagnumimg {	background:url(/theme/4dyes/imgs/lottery/logo_magnum.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aPMPimg {	background:url(/theme/4dyes/imgs/lottery/logo_damacai.png?3)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aTotoimg {	background:url(/theme/4dyes/imgs/lottery/logo_toto.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aSingaporeimg {	background:url(/theme/4dyes/imgs/lottery/logo_singapore.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aSabahimg {	background:url(/theme/4dyes/imgs/lottery/logo_diriwan88.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aSandakanimg {	background:url(/theme/4dyes/imgs/lottery/logo_stc4d.png?2)no-repeat;width:50px ;height:50px  ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aSarawakimg  {	background:url(/theme/4dyes/imgs/lottery/logo_cashsweep.png?2)no-repeat;width:50px ;height:50px  ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aGDLottoimg {	background:url(/theme/4dyes/imgs/lottery/logo_granddragon.png?2)no-repeat;width:50px ;height:50px  ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aPerdanaimg {	background:url(/theme/4dyes/imgs/lottery/logo_perdana.png?12)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aLuckyHari-Hariimg {	background:url(/theme/4dyes/imgs/lottery/logo_lucky.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aGOOD4Dimg {	background:url(/theme/4dyes/imgs/lottery/logo_good4d.png?2)no-repeat;width:50px ;height:50px ;text-align:center;margin:auto;background-size: 50px 50px ;}
#aTHV88img {	background:url(/theme/4dyes/imgs/lottery/logo_thv88.png?2)no-repeat;width:50px ;height:50px  ;text-align:center;margin:auto;background-size: 50px 50px ;}


/*=================Contact=====================*/
.contact .col-md-5 img {width:100%;} 
.contact .col-md-7 {padding:15px;margin-top:0px 10px 20px;}
.contact .col-md-7 .col-xs-4{ width:31% !important;min-height:160px;text-align:center;border:#c62021 solid 6px !important;background:rgba(0,0,0,0.8);
	margin:5px;padding:30px 10px;background:url(/theme/4dyes/imgs/box1.jpg)top center;color:#fff;background-size:cover;}
.contact .col-md-7 .col-xs-4 i {font-size:40px;color:#c62021}
.contact .col-md-7 .col-xs-4 a {color:#fff;}
.contact .col-md-7 .col-xs-4:hover i {font-size:43px;color:#fff}
.contact .col-md-7 .col-xs-4 p {margin-top:20px;width:100%;font-size:11px;font-weight:400}
.contact h2 {font-size:28px;text-align:center;color:#fff;	font-weight:bold;font-family: 'Lora', serif;}
.contact h3 {font-size:16px;text-align:center;color:#fff;}

.form-bg {background:#222;padding:15px;border-radius:5px;margin:10px;}
.form-bg .sendbtn input{background:#c62021;border-radius:5px;padding:10px;border:none;color:#fff;font-weight:bold;}
.form-bg .form-group label {color:#fff}


.pstable {
    text-align: left;
    font-size: 12px;
    color: #000;
    width: 100%;
    padding: 10px 35px;
    margin-bottom:40px;
}

.pstdtitle {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    background-color: #333;
    color: #fff;
    vertical-align: middle;
    padding: 10px 6px;
}

.pstddetails {
    font-size: 16px;
    color: #000;
    text-align: left;
    border-color: #c5c5c5;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    background:#fff;
}

p.infocontenttitle {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background-color: #b40404;
    color: #fff;
    line-height: 1.5;
    padding: 0 15px;
}



#footer-logo img{width:35px;}
#footer-logo button {margin:4px 2px;font-size:12px;min-height:35px;}


/* -----------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.img-logo{
    width: 150px;
}
.navbar-brand img {width:130px; top:0px;}

.navbar-right .btn-info{
	margin-top:14px;
	background:#be0404 !important;
	border-color:#be0404 !important;
	}

.navbar-right .btn-info:hover{
	background:#970303 !important;
	border-color:#970303 !important;
	}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    color: #fff;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow-y: scroll;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#dismiss:hover {
    background: #fff;
    color: #333;
}

#sidebar ul li a{
	font color: #ffffff;
}

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: rgba(0,0,0,0.7);
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.6em;
    display: block;
    text-decoration:none;
    color: #fff;
    transition: all 0.3s;
}

#sidebar ul li a:hover {
    color: #000;
    background: #fff;
}

#sidebar ul li.active > a, 
#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: #be0404;
}

#sidebar a[data-toggle="collapse"] {
    position: relative;
}

#sidebar a[aria-expanded="false"]::before, 
#sidebar a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}

#sidebar a[aria-expanded="true"]::before {
    content: '\e260';
}

#sidebar ul ul a {
    font-size: 1.4em !important;
    padding-left: 30px !important;
} 

@media (max-width: 767px){

.container-fluid>.navbar-collapse, 
.container-fluid>.navbar-header, 
.container>.navbar-collapse, 
.container>.navbar-header { margin-right: 0; margin-left: 0;}
.container-fluid>.navbar-header{ margin-top: 15px; }


.navbar-header {
    float: left;
}

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

.navbar-right{
    float: right;
    margin-right: 15px;
}

.navbar-collapse {
    float: right;
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}



}










@media all 
and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) 
and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) 
and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) 
and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) 
and (max-width: 1024px), only screen and (min-resolution: 192dpi) 
and (max-width: 1024px), only screen and (min-resolution: 2dppx) 
and (max-width: 1024px) {
	#theme-frame{
		width:99%;
	}
	#theme-frame-panel{ display:block; width:100%;}
	.themetbl .cellbox { list-style:none; display:table; padding:0px; margin:0px; width:90%; height:100%; min-height:350px;}
	.themetbl .cellbox > li {display:block; vertical-align:top; }
	.themetbl .cellbox li#theme-content { padding:5px 10px; text-align:justify; width:100%; height:100%; }
	.themetbl .cellbox li#theme-frame-panel {width:200px; padding:10px 0px 10px 10px; background:#efefef;  width:100%; height:100%;  display:inline-block;}

img#megajackpot { width:100%;}
.jackpot2 img { width:45%; }

#live-4d {margin-left:1%;}
#live-4d .fb-like ,#past-4d .fb-like{right:12px;top:-14px;}
#page-live .fb-like {top:-16px;right:0px;}
#page-live {margin-left:-2%;}

.contact .col-md-7 .col-xs-4{ width:30.5% !important;min-height:160px;}
.contact .col-md-7 .col-xs-4 p{font-size:10px;}

.panel-default>.panel-heading .col-sm-8{text-align:left;}


#footer-logo img{width:35px;}
#footer-logo button {margin:4px 2px;font-size:12px;min-height:35px;width:85%;}

.panel-body #TopThree label, .panel-body #Special label, .panel-body #Consolation label{font-size:16px;}
.panel-body #TopThree, .panel-body #Special, .panel-body #Consolation{font-size:20px;}
.panel-body #TopThree .col-sm-4 {width:33.33%;float:left;}

.panel-body #TopThree,.panel-body #Special,.panel-body #Consolation{
line-height:32px;
font-size:19px;
}

.panel-body .logo #datetime .col-sm-12{
	margin:0px 12px 0px 0px !important;
	}

.col-sm-12 {padding:0px 0px 0px 2.5%;}
.col-sm-3 {width:25% !important;float:left;}
.col-sm-4 {padding:0px !important;}


#Magnum .panel-body .logo #Magnumimg, 
#PMP .panel-body .logo #PMPimg,
#Toto .panel-body .logo #Totoimg,
#Singapore .panel-body .logo #Singaporeimg,
#Sabah .panel-body .logo #Sabahimg,
#Sandakan .panel-body .logo #Sandakanimg,
#Sarawak .panel-body .logo #Sarawakimg,
#GDLotto .panel-body .logo #GDLottoimg,
#Perdana .panel-body .logo #Perdanaimg,
#LuckyHari-Hari .panel-body .logo #LuckyHari-Hariimg,
#THV88 .panel-body .logo #THV88img{
	left:15px;
}

}