/*Start Custom Font*/
@font-face {
    font-family: 'Gotham'; /* Name your font family */
    src: url('../customfont/gotham/Gotham-Light.otf'); /* Locate the .ttf file within your directory*/
}

@font-face {
    font-family: 'GothamBold'; /* Name your font family */
    src: url('../customfont/gotham/Gotham-Bold.otf'); /* Locate the .ttf file within your directory*/
}

a {
    text-decoration: none;
    color: #fff;
}

.GothamBold{
    font-family: 'GothamBold';
    font-size: 16px;
}
/*End Custom Font*/
body{
    font-family: 'Gotham';
    background-color: #000;
}

h3, h4{
    font-family: 'GothamBold';
    color: #fff;
}

.clearfix{
    clear:both;
}

.offcanvas-body ul li a{
    font-size: 14px;
    font-weight: bold;
}

.offcanvas-body{
    padding: 0px !important;
}

.nav-item{
    padding: 10px !important;
}
/*
.nav-link.active{
    padding: 0px !important;
}
*/
.offcanvas-body ul li a{
    margin-bottom: 14px;
    font-family: 'GothamBold';
}

.offcanvas{
    width:125px !important;
}

.offcanvas-title{
    height:35px !important;
}

.offcanvas-title-offcanvas{
    height:13px !important;
}

.medsos{
  position: absolute;
  bottom: 0;
  width:125px !important;
}

.navbar-toggler{
    display: none !important;
}

.navbar-brand{
    font-family: 'GothamBold';
    font-size: 16px;
}


.navbar-toggler-right{
    background-color: #212529;
    border: none;
    display: inline !important;
}

.navbar-center{
    display: inline !important;
}

.navbar-right{
    display: inline !important;
}

.icon-menu{
    float: left;
    width: 20px;
    margin-right: 8px;
}

.menu-dekstop{
    float: left !important;
    max-width:100px;
}

.btn-daftar-mobile, .btn-masuk-mobile{
    display: none;
}

.dropdown-toggle::after{
    display: inline;
    margin-left: 0px;
    vertical-align: 0px;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

.dropdown-toggle.show{
    color: #fdb734 !important;
}

.dropdown-menu.megamenu {
	background: rgba(0,0,0,.75);
	border-radius: 0 0 5px 5px;
}


.dropdown-menu.megamenu a:hover img,
.dropdown-menu.megamenu a:focus img{
	background: radial-gradient(circle at top left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 30%);
}

.mobile-menu, .displaymobile{
    display: none;
}

.bannerslider, .firstseparator{
    margin-top: 70px;
}

#running-text {
    color: #fdb734;
    margin-top: 15px;
    font-size: 14px;
}

.border-running-text{
    border:solid 1px #fdb734;
    border-radius:8px;
    padding: .2rem 0;
}

.translatebtn{
    margin-top:13px;
}

/*Start Slider*/
#slider-game{
    margin-top: 40px;
}

.btn-owl-nav {
    font-size:12px;
    font-weight: bold;
}

.btn-owl-nav:active,
.btn-owl-nav:hover,
.btn-owl-nav:focus{
	color: #fff !important;
	border-color: #f68686 !important;
}
.game-slide-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	/*margin: .5rem auto;*/
    margin-bottom: 15px;;
}
.game-slide-title span{
	font-weight: 700;
	font-size: .9rem;
}
.game-slide-title i {
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-top-color: #333;
	border-bottom-color: #451e5866;
	flex-grow: 1;
}
#owl-new-slot,
#owl-trending-slot,
#owl-jackpot-slot{
	margin-bottom: 1.2rem;
}
#game-list-tab {
	border-bottom: none;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	padding: 2px 5px 0;
	scrollbar-width: none;
}
#game-list-tab > li > button {
	display: flex;
	align-items: center;
	gap: .3rem;
	border: 2px solid #ec7777;
	border-radius: 5px;
	color: #a53016;
	font-weight: bold;
	font-size: .75rem;
	margin: 5px;
}
#game-list-tab > li:first-child > button {
	margin-left: 0;
}
#game-list-tab > li:last-child > button {
	margin-right: 0;
}
#game-list-tab > li > button > img {
	height: 30px;
	text-align: center;
	display: block;
	margin: 0 auto;
}

#game-list-tab > li > button.active,
#game-list-tab > li > button:hover,
#game-list-tab > li > button:focus,
#game-list-tab > li > button:active{
	background-image: url(../img/bg-button.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}
#game-list-tab > li > button.active img,
#game-list-tab > li > button:hover img,
#game-list-tab > li > button:focus img,
#game-list-tab > li > button:active img {
	/*filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(294deg) brightness(107%) contrast(101%);*/
}
#gameListTabContent {
	padding: 1rem 0 0;
}
/*End Slider*/

.btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    filter: none;
    opacity: 1;
    color: #fff !important;
}

.footer-logo{
    width:120px !important;
}

.footer-content{
    margin-top: 10px;
}

#footer{
    font-size: 14px;
    margin-bottom: 40px;
}

.footer-brand{
    padding-top: 10px;
    font-family: 'GothamBold';
    font-size: 16px;
    text-decoration: none;
}

.footer-header{
    padding-top: 5px;
    font-family: 'GothamBold';
    font-size: 16px;
}

.kolom-footer ul li{
    list-style-type: none;
    margin-left: 10px;
    margin-top:5px !important;
}

.kolom-footer ul{
    margin-top:15px !important;
    padding:0 !important;
}

.footer-content i{
    margin-top: 5px;
    font-size: 20px;
    margin-right: 10px;
}

/*START REGISTER & LOGIN*/
#loginModal .input-group button ,
#registerModal2 .input-group button , 
#registerModal .input-group button ,
.game-form-input .input-group button {
	color: #fff;
	background: #FFD200;
}

#loginModal .input-group button:hover ,
#registerModal2 .input-group button:hover , #registerModal .input-group button:hover ,
.game-form-input .input-group button:hover {
	background: rgba(239, 212, 68, 0.5);
}

#loginModal .input-group ,
#registerModal .input-group ,
.game-form-input .input-group {
	margin-bottom: 7px;
}
#loginModal .form-icon svg,
#registerModal2 .form-icon svg, #registerModal .form-icon svg,
.game-form-input .form-icon svg,
#loginModal .form-icon i ,
#registerModal2 .form-icon i , #registerModal .form-icon i ,
.game-form-input .form-icon i {
	color: #ffffff;
}
#loginModal input:focus ,
#registerModal2 input:focus ,#registerModal input:focus ,
.game-form-input input:focus,
.game-form-input textarea:focus {
   border-color: #02e38b;
   background-color: #000000;
   color:#909098;
}

#loginModal .form-icon svg,
#registerModal .form-icon svg,
.game-form-input .form-icon svg,
#loginModal .form-icon i ,
#registerModal .form-icon i ,
.game-form-input .form-icon i {
	color: #02e38b;
}
#loginModal input:focus ,
#registerModal input:focus ,
.game-form-input input:focus,
.game-form-input textarea:focus {
	border-color: #02e38b;
	border-width: 2px;
	box-shadow: none;
}
#loginModal .input-group button ,
#registerModal .input-group button ,
.game-form-input .input-group button {
	color: #fff;
	background: #909098;
	transition: all .2s;
	width: 34px;
}
#loginModal .input-group button:hover ,
#registerModal .input-group button:hover ,
.game-form-input .input-group button:hover {
	background: #02e38b;
}
#loginModal .form-select,
#registerModal .form-select,
.game-form-input .form-select{
	padding: .25rem .5rem;
	border-color: #02e38b;  

}
#loginModal .form-select:focus,
#registerModal .form-select:focus,
.game-form-input .form-select:focus{
	border-color: #02e38b;
	border-width: 2px;
	box-shadow: none;
}
.register-form-text {
	font-weight: bold;
	margin-bottom: 7px;
}

#loginModal .modal-header ,
#registerModal2 .modal-header, #registerModal .modal-header {
	color: #ffffff;
}
#loginModal .modal-content ,
#registerModal2 .modal-content, #registerModal .modal-content {
	background: #000000;
	border: 2px solid #02e38b;
   color:#fff;
}
#loginModal input ,
#registerModal2 input ,#registerModal input ,
.game-form-input input {
	border-color: #02e38b;
    background-color: #101f4e;
}

.btn-login,
.btn-register {
	border: 1px solid #02e38b;
}
.btn-login {
	color: #02e38b;
	background: #333333;
}
.btn-captcha,
#loginModal .btn-login,
.btn-register {
	color: #333333;
	background: #02e38b;
}
.btn-login:hover {
	background: rgba(255, 255, 255, .5);
}
.btn-captcha:hover,
#loginModal .btn-login:hover,
.btn-register:hover {
	background: rgba(239, 212, 68, 0.5);
	color: #fff;
}

.input-group > .form-icon {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}
.input-group > .form-icon select{
    background-color: #101f4e;
	border-radius: .375rem 0 0 .375rem;
}
.form-icon {
	position: relative;
}
.form-icon .icons {
	position: absolute;
	top: 8px;
	left: 18px;
}


.form-control::placeholder, .form-select::placeholder, .form-select {
    color: #fff;
}

.form-control{
    color: #efeee8 !important;
}
/*END REGISTER & LOGIN*/

/*Start Game Pages*/
#home-container-tab .nav-item{
    /*padding: 0px !important;*/
    overflow-x: visible;
}

#home-container-tab{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap;
    padding: 2px 0px 0;
    scrollbar-width: none;
}
/*End Game Pages*/

.navbar-toggler:focus {
    box-shadow: none !important;
  }

/*START TOGEL RESULT*/
.subgame-tab-wrapper{
	position: relative;
}

.sub-game-tab {
	border-bottom: none;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	padding: 0;
	scrollbar-width: none;
	margin-bottom: 1rem;
	background-color: #30221e;
	color: #fff;
	border: 2px solid #fc9c2d;
	border-radius: 5px;
}
.sub-game-tab > li > button.nav-link {
	display: flex;
	align-items: center;
	margin: 0;
	width: 100%;
	padding: 12px 16px;
	font-size: .9rem;
	color: #fff;
	border-radius: 0px;
	border: none;
	flex-direction: column;
	height: 100%;
}
.sub-game-tab.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	background-color: #909098;
	border-radius: 0px;
	border: none;
}
.sub-game-tab > li > button.nav-link > svg,
.sub-game-tab > li > button.nav-link > img {
	height: 25px;
	margin-right: 5px;
}
.sub-game-tab > li > button.nav-link > span {
	line-height: 1;
}

.sub-game-tab > li > button.nav-link.active,
.sub-game-tab > li > button.nav-link:hover,
.sub-game-tab > li > button.nav-link:focus,
.sub-game-tab > li > button.nav-link:active{
	background-color: #fc9c2d;
	color: #000;
	border-radius: 0px;
	border: none;
}
.sub-game-tab > li > button.nav-link.active img,
.sub-game-tab > li > button.nav-link:hover img,
.sub-game-tab > li > button.nav-link:focus img,
.sub-game-tab > li > button.nav-link:active img {
	/*filter: invert(76%) sepia(40%) saturate(3917%) hue-rotate(344deg) brightness(76%) contrast(102%);*/
}

.nav-subgame-next,
.nav-subgame-prev, 
.nav-togel-next, .nav-togel-prev {
    color: #fff !important; 
	position: absolute;
	display: block !important;
	font-size: 35px;
	height: 100%;
	top: 0;
	background: 0 0;
	color: inherit;
	border: none;
}
.nav-subgame-next svg,
.nav-subgame-prev svg{
	color: #fff !important;
	text-shadow: 1px 1px 2px #fff, 0 0 25px #fff, 0 0 5px #fff;
}
.nav-subgame-prev, .nav-togel-prev {
	left: 0;
}
.nav-subgame-next, .nav-togel-next {
	right: 0;
}

#sub-togel-tab li button{
    font-family: 'Gotham' !important;
    font-size: 13px;
}

.pasaran-wrapper {
	margin-bottom: 1rem;
    font-size: 12px;
}
.pasaran-title {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0
}
.img-pasaran {
	max-height: 75px;
	margin-right: 5px;
}

.tab-pane div{
    color: #fff;
}
/*END TOGEL RESULT*/

/* START ACCORDION */
.accordion-item {
    background: transparent;
    margin-bottom: 10px;
    border-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    color: #fff !important;
    border-color: transparent;
}

#promoAccordion .accordion-item:last-child {
	margin-bottom: 0
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
	background-image: none;
	width: 0;
}
.accordion-button {
	padding: 0;
}
.accordion-button:focus {
	box-shadow: none;
	border-color: transparent;
}
.accordion-body {
    color: #fff !important;
	background-size: cover;
	background-repeat: no-repeat;
}
/* END ACCORDION */

.owl-game-wrapper img{
	height:110px !important;
     }

#narasi {
  color: white;
}

@media only screen and (max-width: 728px) {
    #slider-game{
	min-height:130px;
    }
    .owl-game-wrapper img{
	height:80px !important;
     }

    .offcanvas-title{
        /*margin-top: 3px !important;*/
        padding-top:8px;
        height:30px !important;
    }
    
    .btn-app-game-radio{
        margin-bottom: 20px;
    }

    .text-center-mobile{
        text-align: center !important;
    }

    .navbar-toggler{
        display: inline !important;
    }

    .navbar-toggler-right{
        background-color: #212529;
        border: none;
        display: none !important;
    }
    
    .navbar-center{
        display: none !important;
    }
    
    .navbar-right{
        display: none !important;
    }

    .btn-daftar-mobile, .btn-masuk-mobile{
        display: inline;
    }
    
    .displaydekstop{
        display:none;
    }
    .displaymobile{
        display: block;
    }

    .mobile-menu{
        display: block;
        padding-top:12px;
        padding-bottom:12px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 50px;
    }

    .mobile-menu-item{
        float:left;
        padding-top: 10px;
        height: 65px;
    }
    
    .mobile-menu-item img{
        width:80%;
    }

    .mobile-menu-item span{
        font-size: 11px;
    }

    .bannerslider, .firstseparator{
        margin-top: 0px;
    }

    .footer-logo{
        width:125px !important;
    }

    #footer{
        font-size: 10px;
    }

    .footer-brand{
        padding-top: 10px;
        font-family: 'GothamBold';
        font-size: 12px;
    }
}