:root {
	--ireng: #434343;
	--putih: #FCFCFC;
	--abang: #DD4E4E;
	--ijo: #3BC740;
}
* {
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
    font-weight: 300;
}
/*
    font-family: 'Merriweather', serif;
	font-family: 'Lato', sans-serif;
*/
html { scroll-behavior: smooth; }
body {overflow-x: hidden;}
a { text-decoration: none; color: #000; }
h1, h2, h3, h4, h5 { font-family: 'Merriweather', serif; }
header {
	width: 100vw;
	height: 100px;
	background: var(--putih);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 100px;
	transition: all .3s ease;
}
header.gold {
	background: rgb(22, 22, 22);
}
.jumbotron {
	width: 100vw;
	height: auto;
	background: rgb(228, 227, 227);
}
.jumbotron.tabss {margin-top: 100px;}

nav ul {
	display: flex;
	list-style: none;
}
nav ul li {
	margin: 0 10px;
	height: 100px;
	display: flex;
	align-items: center;
	font-size: 14px;
	cursor: pointer;
}
nav ul li:hover {
	color: red;
}
nav.gold ul li {
	color: rgb(255, 255, 255);
}
nav.gold ul li:hover {
	color: rgb(245, 230, 149);
}
.dropdown {
	position: relative;
}
.dropdown-list {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 190px;
	background: var(--putih);
	top: 100px;
	left: 0;
	z-index: 999;
	padding-top: 5px;
	display: none;
}
.dropdown-list li {
	height: auto;
	padding: 10px;
}
.dropdown-list.gold li {
	width: 100%;
	padding: 10px;
	transform: translate(-10px, -2px);
	background: rgb(22, 22, 22);
}
.dropdown-list::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 4px;
	background: red;
	top: 0;
}
.dropdown-list.gold::after {
	background: rgba(245, 171, 10, 0.911);
}
.dropdown-list.long {width: 260px;}
.dropdown:hover .dropdown-list {
	display: flex;
	transform: translateY(0);
	animation: crazy 0.2s ease-in;
}
@keyframes crazy {
	from {
	  transform: translateY(-10px);
	  opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
  }
.nav-button {
	display: flex;
	align-items: center;
	height: 100px;
	
}
.src-button {
	width: 150px;
	height: 40px;
	background: var(--putih);
	border: 2px solid #999999;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	margin-right: 10px;
}
.src-button input {
	width: 100px;
	height: 30px;
	outline: none;
	border: none;
}
.src-button i {
	font-size: 17px;
	margin-left: 5px;
	cursor: pointer;
}
.chart-button {
	width: 40px;
	height: 40px;
	background: var(--putih);
	border: 2px solid #999999;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	cursor: pointer;
}
.chart-button i {font-size: 18px;}
.sign-button {
	width: 100px;
	height: 40px;
	background: #FEB009;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.sign-button::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	z-index: -1;
	background: #ffca57;
	top: 0;
	left: 0;
	transition: all .2s ease-in;

}
.sign-button:hover::after {
	width: 100%;
}
.sign-button:hover {
	box-shadow: 1px 2px 10px #f8c046, -1px -2px 10px #ffe6b2;
	color: #000;
}
.chart-button span {
	background: #FEB009;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -5px;
	right: -10px;
	font-size: 10px;
}
.mobile-menu, .mbl-menu {display: none;}
/* --------------slider------------- */
.theme-default .nivoSlider {
	position:relative;
	background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}
.nivoSlider {
	position:relative;
	width:100%;
	height:100%;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* -------------- end slider------------- */
main, section, .poster {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.poster {
	padding: 80px 0;
}
.poster p, .poster h5 {
	margin-bottom: 5px ;
}
.poster h1 {margin-top: 20px;}
.fx-center {
	width: 100%;
	display: flex;
	justify-content: center;
}
.card-container {
	background-color: transparent;
	perspective: 900px;
	margin-bottom: 30px;
	margin-right: 4px;
	border-radius: 4px;
	margin: 0 35px;
}
.mtb-50 {margin: 50px 0;}
.mt-100 {margin-top: 50px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-50 {margin-top: 50px;}
.mtb-25 {margin: 25px 0;}
.my-card {
	width: 350px;
	height: 350px;
	background-color: #ffffff;
	border-radius: 4px;
	position: relative;
	transition: all .7s;
	transform-style: preserve-3d;
}
.card-container:hover .my-card {
	transform: rotateY(-180deg);
}
.my-front {
	background: #fff;
	position: absolute;
	width: 100%; height: 100%;
	columns: white;
	border-radius: 4px;
	/*box-shadow: 0 10px 20px rgba(0,0,0,0.19), 
				0 6px 6px rgba(0,0,0,0.23);*/
	backface-visibility: hidden;
}

.my-back {
	background: linear-gradient(150deg, #eead20c2, #f5cc8b);
	transform: rotateY(-180deg);
	width: 100%; height: 100%;
	columns: white;
	border-radius: 5px;
	box-shadow: 0 5px 20px #D4AE5C, 
				0 4px 6px #f1e2bf;
	backface-visibility: hidden;
	
	display: flex;
	flex-direction: column;
}
.my-front img, .my-back img {
	width: 100%;
	height: 100%;
}
.buttons {
	position: relative;
	border: none;
	transition: .4s ease-in;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	cursor: pointer;
}
.btn1 { 
	cursor: pointer;
	color: rgb(46, 45, 45);
	transition: all .3s ease-in;
	padding: 2px 7px;
}
.btn1:hover {
	background: #fff;
	color: #000;
	border-radius: 25px;
	padding: 2px 10px;
	box-shadow: 1px 2px 20px #999494;
}
.buttons::before, .buttons::after {
	position: absolute;
	content: "";
	z-index: -1;
}
.ns-news {
	height: 80%;
	overflow: hidden;
	padding-top: 10px;
}
.ns-news h2 { font-size: 16px; margin-bottom: 15px; }
.ns-news p { font-size: 14px; margin-bottom: 5px; }
.ns-readmore {
	height: 20%;
	display: flex;
	align-items: center;
}
.pilar  {
	text-align: center;
	color: #D4AE5C;
}
.pg-pilar  {
	width: 700px;
	text-align: center;
	font-size: 30px;
	color: #636060;
	font-weight: bold;
	margin-top: 30px;
}
.frg-card {
	width: 300px;
	height: 300px;
	margin: 80px 55px 30px 55px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
	padding: 35px 15px;
	cursor: pointer;
	transition: all .3s ease;
}
.frg-card:hover {
	transform: scale(1.1);
	box-shadow: 1px 2px 25px #e2e2e2;
	border-radius: 10px;
}
.frg-card div {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frg-card div img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.frg-card span {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	margin: 20px 0;
}
.frg-card p {
	width: 100%;
	text-align: left;
	font-size: 16px;
}
.frg-card ul {
	margin-left: 10px;
}
.frg-card ul li {
	font-size: 15px;
	margin-bottom: 5px;
}
.fx-left{
	width: 100%;
	display: flex;
}
.hrgold {
	width: 80%;
	height: 3px;
	background: rgb(230,176,61);
	background: linear-gradient(295deg, rgba(230,176,61,1) 0%, rgba(255,230,178,1) 38%, rgba(254,173,0,1) 100%);
	position: absolute;
	bottom: 150px;
}
.text-garansi {
	padding: 50px 100px 0 50px;
}
.text-garansi span {
	font-family: 'Merriweather', serif;
	margin-bottom: 20px;
}
.text-garansi p {
	margin-top: 15px;
}
.btn-katalog {
	width: 200px;
	height: 40px;
	background: #3BC740;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 45px;
	background: rgb(230,176,61);
	background: linear-gradient(295deg, rgba(230,176,61,1) 0%, rgba(255,230,178,1) 38%, rgba(254,173,0,1) 100%);
	border-radius: 25px;
	cursor: pointer;
	z-index: 1;
	overflow: hidden;
	transition: all .5s ease-in;
}
.btn-katalog i {
	margin-right: 10px;
}
.btn-katalog::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	z-index: -1;
	background: rgb(230,176,61);
	background: linear-gradient(295deg, rgba(230,176,61,1) 0%, rgba(255,230,178,1) 12%, rgba(254,173,0,1) 100%);
	top: 0;
	left: 0;
	transition: all .5s ease-in;
}
.btn-katalog:hover::after {
	width: 200%;
}
.btn-katalog:hover {
	box-shadow: 1px 2px 10px #f8c046, -1px -2px 10px #ffe6b2;
	color: #ffffff;
}
.pg-pilar.small {
	font-size: 17px;
	margin-top: 15px;
}
.frg-card.shw {
	height: auto;
	border-radius: 8px;
	box-shadow: 1px 2px 25px #e2e2e2;
}
.frg-card.shw div {
	width: 120px;
	height: 120px;
	margin-top: -90px;
}
.res-tiket {color: #A42711 ;}
.basic-tiket {color: #6E6609 ;}
.sup-tiket {color: #C89C4F ;}
.frg-card.res:hover {
	transform: scale(1.1);
	box-shadow: 1px 2px 25px #A42711, -1px -2px 20px rgb(253, 160, 143);
	border-radius: 10px;
}
.frg-card.bas:hover {
	transform: scale(1.1);
	box-shadow: 1px 2px 25px #6E6609, -1px -2px 20px #cfc013;
	border-radius: 10px;
}
.frg-card.sup:hover {
	transform: scale(1.1);
	box-shadow: 1px 2px 25px #C89C4F, -1px -2px 20px #d48908;
	border-radius: 10px;
}
.shw p {
	font-size: 14px;
}
.spaceimage-full {
	width: 100%;
	height: 300px;
	background: #ccc;
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.spaceimage-full img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#poster5 {
	padding: 0;
}
.tabsnav {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding-right: 25px;
	align-items: center;
}
.tabsnav a {
	margin: 30px 15px;
}
.tabsnav a:hover { font-weight: bold;}
.tabsnav a.active {
	font-family: 'Merriweather', serif;
	font-weight: bold;
}
.tabs-content {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.card-imvid {
	width: 500px;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-imvid.vid {
	background: #444343;
	color: #fff;
}
.card-imvid.img {
	background: #bebebe;
}
.card-imvid iframe {
	width: 100%;
	height: 300px;
}
.swiper-konten {
	width: 100%;
	height: 400px;
}
/* swiper */
.swiper {
    width: 100%;
    height: 100%;
  }
.swiper-slide {
    text-align: center;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.conten-testi {
	width: 800px;
	height: 350px;
	display: flex;
	align-items: center
}
.testi-image {
	width: 150px;
	hyphens: 150px;
	border-radius: 50%;
	overflow: hidden;
}
.testi-text {
	width: 600px;
	min-height: 100px;
	padding: 20px 10px 50px 30px;
}
.testi-text p {
	text-align: left;
}
.testi-text span {
	text-align: left;
	position: absolute;
	left: 30px;
	bottom: 0;
	font-family: 'Merriweather', serif;
}
footer {
	width: 100%;
	height: 500px;
	display: flex;
	flex-direction: column;
}
.footer-top {
	width: 100%;
	height: 450px;
	background:#F4F4F4;
	display: flex;
	flex-direction: column;
}
.top-bottom {
	width: 100%;
	height: 50px;
	background: #353434;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFFFFF;
	font-size: 12px;
	padding: 0 50px;
}
.top-bottom span a {
	color: #FFFFFF;
}
.top-bottom span a:hover {
	text-decoration: underline;
	font-weight: bold;
}
.fotjudul {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	font-size: 20px;
	margin: 20px 0;
}
.fx-space {
	display: flex;
	justify-content: space-between;
}
.fx-space.foot {
	width: 1100px;
}
.fx-column {
	width: 350px;
	height: 300px;
	display: flex;
	flex-direction: column;
}
.fxhead {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	border-bottom: 2px solid #d48908;
	padding-bottom: 10px;
	margin-bottom: 20px;
	font-size: 16px;
}
.fx-column span {
	font-size: 14px;
	font-family: 'Merriweather', serif;
	font-weight: bold;
}
.fxtext {
	font-size: 12px;
	margin: 20px 0;
}
.fxtext i{font-size: 10px;}
.fx-column small { font-size: 12px;}
.fx-center.sm img {
	width: 25px;
	margin: 20px 8px;
}
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #fff; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
.full-conten {
	width: 100%;
	display: flex;
}
.member-nav {
	width: 280px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFFFFF;
	box-shadow: 1px 1px 35px rgba(6, 73, 110, 0.712);
	position: fixed;
	transition: all .3s ease-in;
}
.mb-box {
	width: 100%;
	height: 65px;
	display: flex;
	justify-content: center;
	padding: 15px 0;
	border-bottom: 1px solid rgb(233 234 235 / 36%);
}
.member-konten {
	width: calc(100% - 280px);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin-left: 280px;
	padding: 0 35px;
}
.mb-logo {
	width: 200px;
}
.mb-logo img {
	width: 100%;
}
.mb-menu {
	width: 100%;
	height: calc(100vh - 290px);
	overflow: auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding-top: 15px;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	
}
.mb-menu::-webkit-scrollbar {
	display: none;
}
.mb-profile {
	width: 100%;
	height: 220px;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
}
.foto-profile {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
}
.foto-profile img {
	width: 100%;
	height: 100%;
}
.nameprofile {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	font-size: 12px;
	margin: 10px 0 0 0;
}
.mb-profile small {
	font-size: 10px;
	color: #999494;
}
.label-profile {
	width: 120px;
	height: 50px;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.label-level, .label-id {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 9px;
}
.label-level img {
	width: 30px;
}
.upgraderss {
	display: flex;
	align-items: center;
	font-size: 9px;
	margin-top: 10px;
	color: #EB9452;
	transition: all .3s ease-in;
}
.upgraderss.big {font-size: 12px;}
.upgraderss i {font-size: 10px; margin-right: 3px;}
.upgraderss.big i {font-size: 12px; margin-right: 3px;}
.upgraderss:hover {
	text-shadow: 1px 2px 10px #cfc013;
	font-weight: bold;
	font-size: 11px;
}
.upgraderss.big:hover {
	text-shadow: 1px 2px 10px #cfc013;
	font-weight: bold;
	font-size: 14px;
}
.mb-menu-list {
	width: 220px;
	height: 40px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 14px;
	color: rgba(92, 91, 91, 0.719);
	cursor: pointer;
	border-radius: 7px;
	transition: all .3s ease-in;
}
.mb-menu-list.aut {
	height: auto;
}
.mb-menu-list:hover {
	background: #000;
	color: #FFFFFF;
	border-radius: 7px;
}
.mb-menu-list.active {
	background: #000;
	color: #FFFFFF;
	border-radius: 7px;
}
.mb-menu-list i {
	font-size: 18px;
	margin-right: 10px;
}
.mb-menu-list i.absmenu {
	position: absolute;
	right: 0;
	font-size: 14px;
	transform: translate(5px, 1px);
	transition: all .3s ease;
}
.mb-menu-list i.active {
	transform: rotateZ(-180deg) translate(-5px);
}
.menuhide {
	width: 220px;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	padding-left: 30px;
	display: none;
}
.menuhide div {
	margin-bottom: 10px;
}
.menuhide a {
	color: rgba(92, 91, 91, 0.719);
}
.menuhide a:hover {
	color: #000;
	font-weight: bold;
}
.mb-top-nav {
	width: 100%;
	height: 80px;
	background: #FFFFFF;
	box-shadow: 1px 1px 15px rgb(236, 234, 234), 1px 1px 15px rgb(233, 230, 230);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
	padding: 0 20px;
	border-radius: 10px;
	overflow: hidden;
}
.mtn-left {
	display: flex;
	align-items: center;
	transition: all .3s ease;
}
.mtn-left h1 {
	font-size: 30px;
}
.fx-cloumn {
	display: flex;
	flex-direction: column;
}
.mtn-left small {
	font-size: 15px;
	color: rgb(118, 119, 119);
}
.mtn-right {
	display: flex;
	align-items: center;
	transition: all .3s ease;
}
.mtn-left.active, .mtn-right.active {
	transform: translateX(240px);
}
.mb-btn {
	width: 35px;
	height: 35px;
	border: 1px solid #ccc;
	border-radius: 7px;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all .3s ease;
}
.mb-btn.min {
	width: 25px;
	height: 25px;
	background: #000;
	color: #fff;
}
.mb-btn i{ font-size: 18px;}
.mb-btn span {
	position: absolute;
	min-width: 15px;
	height: 15px;
	color: #fff;
	background: red;
	border-radius: 50px;
	font-size: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	right: -5px;
	top: -5px;
}
.mb-btn-primary {
	width: auto;
	padding: 0 15px;
	height: 35px;
	background: rgb(22, 22, 22);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	font-size: 12px;
	outline: none;
	border: none;
	cursor: pointer;
	box-shadow: 1px 2px 15px #c6c8ca;
}
.mb-btn-primary.blue {
	background: #1b8df8;
}
.mb-btn-primary.green {
	background: #03d11e;
	color: rgb(36, 35, 35);
}
.mb-btn-primary.default {
	background: #fff;
	color: #000;
	border: 1px solid #ccc;
}
.mb-btn-primary.warning {
	background: #FEB009;;
	color: #000;
}
.mb-btn-primary.waroutline {
	background: #fff;;
	color: #b37b04;
	border: 1px solid #b37b04;
}
.mb-btn-primary.redoutline {
	background: #fff;;
	color: #be857a;
	border: 1px solid #be857a;
}
.mb-btn-primary.blueoutline {
	background: #fff;;
	color: #1b8df8;
	border: 1px solid #1b8df8;
}
.mb-btn-primary.greenoutline {
	background: #fff;;
	color: #027211;
	border: 1px solid #027211;
}
.mb-btn-primary.dis {
	background: #fff;
	color: rgb(97, 96, 96);
	border: 1px solid #ccc;
	cursor: no-drop;
}
.mb-btn-primary i {
	font-size: 16px;
	margin-right: 5px;
}
.mb-btn:hover {
	background: #000;
	color: #FFF;
}
.burger {
	display: none;
}
.mb-menu-mobile, #mmmnunotif {
	display: none;
}
.mb-card {
	background: #FFFFFF;
	box-shadow: 1px 1px 15px rgb(236, 234, 234), 1px 1px 15px rgb(233, 230, 230);
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}
.mb-card.full {
	width: 100%;
	height: 700px;
}
.mb-card.fullset {
	width: 100%;
	height: auto;
}
.mb-card.profile {
	width: 100%;
	height: auto;
	border-radius: 0;
	display: flex;
	flex-direction: row;
	padding-bottom: 50px;
}
.member-nav.dark {
	background: rgb(22,57,78);
    background: linear-gradient(131deg, rgba(22,57,78,1) 20%, rgba(8,88,139,1) 60%);
}
.dark .mb-menu-list {
	color: #e9dfb7;
}
.dark .mb-menu-list.active, .dark .mb-menu-list:hover{
	background: #ffae00;
	color: #000;
}
.dark .menuhide a{
	color: #ffca57;
}
.dark .menuhide a:hover{
	color: #fff;
}
.dark .mb-profile{
	color: #FFF;
}
.dark .mb-profile small {
	color: rgb(185, 182, 182);
}
.myiframe {
	width: 100%;
	height: 100%;
	overflow: auto;
}
.container-jaringan {
	display: flex;
	width: 1400px;
	justify-content: center;
	margin-bottom: 100px;
}
.container-jaringan.btn-prev {
	margin: 20px 0;
}
.mb-title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.mb-body {
	width: 100%;
	display: flex;
}
.mb-card40 {
	width: 40%;
	display: flex;
	flex-direction: column;
	margin-right: 50px;
}
.mb-card40 h2 {
	font-size: 16px
}
.mb-card40 small {
	font-size: 12px;
}
.form-group {
	display: flex;
	align-items: center;
}
.form-group span {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	font-size: 14px;
}
.form-group i {
	font-size: 14px;
	margin-right: 5px;
}
.form-box {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.form-group span {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	font-size: 14px;
}
.form-box span {
	font-family: 'Merriweather', serif;
	font-size: 13px;
}
.hrz-fomr {
	width: 100%;
	height: 1px;
	background: #ccc;
	margin: 20px 0;
}
.material-icons.rot90 {
	transform: rotateZ(180deg);
}
.mn {
	font-size: 18px;
}
.card-profile {
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.card-profile.full {
	width: calc(100% - 300px);
	align-items: flex-start;
}
.thumb-poto {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
}
.thumb-poto img {
	width: 100%;
	height: 100%;
}
.label-profile-big {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.label-level-round {
	width: 110px;
	height: 40px;
	border-radius: 25px;
	margin: 0 10px;
	display: flex;
	align-items: center;
	border: 1px solid #000022;
	font-size: 12px;
	cursor: pointer;
	transition: all .3s ease;
	font-family: 'Roboto', sans-serif;
}
.label-level-round.res {
	border: 1px solid #A42711;
	background: #A42711;
}
.label-level-round.bas {
	border: 1px solid #6E6609;
	background: #6E6609;
}
.label-level-round.sup {
	border: 1px solid #ffae00;
	background: #ffae00;
}

.label-level-round img {
	width: 35px;
	margin:0 3px;
}
.label-level-round i {
	margin: 0 5px 0 7px;
}
.label-level-round.res span, .label-level-round.bas span {
	color: #fff;
}
.label-level-round.sup span {
	color: #fff;
}
.label-level-round span {
	font-family: 'Merriweather', serif;
}
.label-level-round.res:hover {
	transform: scale(1.02);
	box-shadow: 1px 1px 10px #A42711, -1px -1px 10px rgb(253, 160, 143);
	
}
.label-level-round.bas:hover {
	transform: scale(1.02);
	box-shadow: 1px 1px 10px #6E6609, -1px -1px 10px #cfc013;
	
}
.label-level-round.sup:hover {
	transform: scale(1.02);
	box-shadow: 1px 1px 10px #C89C4F, -1px -1px 10px #d48908;
}
.sp-label {
	padding: 2px 8px;
	background: #ccc;
	margin: 3px 0;
	font-size: 8px;
}
.minicard {
	width: 100px;
	margin-right: 5px;
	display: flex;
	flex-direction: column;
	padding: 5px;
}
.minicard.lv1, .sp-label.lv1 {background: #ccc;}
.minicard.lv2, .sp-label.lv2 {background: rgb(206, 192, 175);}
.minicard.lv3, .sp-label.lv3 {background: rgb(201, 162, 115);}
.minicard.lv4, .sp-label.lv4 {background: rgb(211, 135, 42);}
.minicard.lv5, .sp-label.lv5 {background: rgb(247, 167, 20);}
.minicard small {font-size: 10px; margin-bottom: 5px;}
.minicard span {font-family: 'Roboto', sans-serif;}
.minicard i {
	position: absolute;
	bottom: -25px;
	color: #8b8b8b;
	font-size: 20px;
	transform: translateX(-50%);
	left: 50%;
}
.material-icons.col-green {
	color: #03810d;
}
.fx-spans {
	font-size: 12px;
	width: 100px;
}
.fx-spans2 {
	font-size: 12px;
	margin-left: 5px;
	font-weight: bold;
}
.horiz-gold {
	width: 80%;
	height: 2px;
	background: #ffae00;
	margin: 40px 0 20px 0;
}
.horiz-gold.full{width: 100%;}
.jar {
	width: 150px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.13);
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;
	background: #fff;
	margin: 0 10px;
}
.jar.res {
	box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.13), inset 0px -6px 0px #A42711;
}
.jar.bas {
	box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.13), inset 0px -6px 0px #6E6609;
}
.jar.sup {
	box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.13), inset 0px -6px 0px #C89C4F;
}
.jar-poto {
	width: 150px;
	height: 130px;
	background: rgb(192, 191, 191);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.jar-level {
	width: 60px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 85px;
}
.jar-poto img, .jar-level img {
	width: 100%;
	height: 100%;
}
.jar-poto img {
	object-fit: cover;
	border-radius: 10px 10px 0 0;
}
.jar-nama {
	font-size: 12px;
	font-family: 'Merriweather', serif;
	width: 100%;
	padding: 0 3px;
	text-align: center;
	margin-top: 15px;
}
.jar-asal {
	font-size: 8px;
	font-family: 'Merriweather', serif;
	width: 100%;
	padding: 0 3px;
	text-align: center;
	color: rgb(78, 78, 78);
}
.jar-horiz {
	width: 100%;
	height: 1px;
	background: #ccc;
	margin: 15px 0;
}
.horiz-reward {
	width: 100%;
	height: 1px;
	background: rgba(230, 230, 230, 0.705);
	margin: 35px 0;
}
.jar-fx-center {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 5px;
	align-items: center;
	padding: 0 5px;
}
.jar-fx-center.res {
	color: #A42711;
}
.jar-fx-center.bas {
	color: #6E6609;
}
.jar-fx-center.sup {
	color: #C89C4F;
}
.jar-fx-center.all {
	color: #5f5f5f;
}
.fx-text {
	font-family: 'Merriweather', serif;
	margin: 0 2px;
}
.fx-box {
	min-width: 22px;
	height: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	font-weight: bold;
	padding: 0 2px;
	font-family: 'Roboto', sans-serif;
}
.jar-fx-center.res .fx-box {
	background: #a4271157;
}
.jar-fx-center.bas .fx-box {
	background: #6e650969;
}
.jar-fx-center.sup .fx-box {
	background: #c89c4f56;
}
.jar-fx-center.all .fx-box {
	background: #cacac97c;
}
.container-jaringan.level4 .jar {
	margin: 0 90px;
}
.container-jaringan.level2 .jar {
	margin: 0 250px;
}
.hrz1 {
	position: absolute;
	width: 650px;
	height: 1px;
	background: #000;
	bottom: -50px;
}
.hrz2 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
}
.hrz3 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 375px;
}
.hrz4 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 1025px;
}
.hrz5 {
	position: absolute;
	width: 350px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 200px;
}
.hrz6 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 375px;
}
.hrz7 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 200px;
}
.hrz8 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 549px;
}
.hrz9 {
	position: absolute;
	width: 350px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 850px;
}
.hrz10 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 1025px;
}
.hrz11 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 849px;
}
.hrz12 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 1199px;
}
.hrz13 {
	position: absolute;
	width: 175px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 100px;
}
.hrz14 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 190px;
}
.hrz15 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 100px;
}
.hrz16 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 275px;
}
.hrz17 {
	position: absolute;
	width: 175px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 445px;
}
.hrz18 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 535px;
}
.hrz19 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 445px;
}
.hrz20 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 619px;
}
.hrz21 {
	position: absolute;
	width: 175px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 780px;
}
.hrz22 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 860px;
}
.hrz23 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 780px;
}
.hrz24 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 954px;
}
.hrz25 {
	position: absolute;
	width: 175px;
	height: 1px;
	background: #000;
	bottom: -50px;
	left: 1125px;
}
.hrz26 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -50px;
	left: 1200px;
}
.hrz27 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 1125px;
}
.hrz28 {
	position: absolute;
	width: 1px;
	height: 50px;
	background: #000;
	bottom: -100px;
	left: 1300px;
}
/* new line */
.btn-uptree, .btn-nexttree {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f5be47;
	padding: 4px 7px;
	font-size: 12px;
	border-radius: 4px;
}
.btn-nexttree {
	width: 80px;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	background: #d86551;
	color: #fff;
}
.btn-nexttree:hover { background: #A42711;}
.btn-uptree:hover { background: #ffae00;}
.btn-uptree i {
	font-size: 14px;
	margin-right: 5px;
}
.btn-nexttree i {
	font-size: 14px;
	margin-right: 5px;
	transform: rotateZ(180deg);
}
.rowfix {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.rowfix.space {
	justify-content: space-evenly;
}
.stok-tiket {
	width: 200px;
	height: 100px;
	margin: 0 30px 20px 0;
}
.tiket-res, .tiket-bas, .tiket-sup {
	width: 200px;
	height: 100px;
	background: #A42711;
	border-radius: 8px;
	position: absolute;
	left: -3px;
}
.tiket-bas { background: #6E6609;}
.tiket-sup { background: #C89C4F;}
.stok {
	width: 200px;
	height: 100px;
	background: #fff;
	box-shadow: 1px 1px 15px rgb(230, 228, 228);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	padding: 10px 20px 0 10px;
	transition: all .3s ease-in;
	cursor: pointer;
}
.stok:hover {transform: translateX(3px);}
.stok-title {
	font-family: 'Merriweather', serif;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 4px;
}
.stok small {
	margin-top: 15px;
}
.smbullet {
	display: flex;
	align-items: center;
	font-size: 12px;
	margin-top: 4px;
}
.smbullet span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 5px;
	transform: translateY(1px);
}
.smbullet.noactive span { background: #ce2203;}
.smbullet.active span { background: #0d8f01;}
.smbullet strong {
	margin-right: 3px;
	font-family: 'Roboto', sans-serif;
}
.icn {
	position: absolute;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	right: 20px;
	top: 20px;
}
.icn.noactive {border: 3px solid #ce2203;}
.icn.active {border: 3px solid #0d8f01;}
.icn.noactive i{
	font-size: 15px;
	color: #ce2203;
}
.icn.active i{
	font-size: 20px;
	color: #0d8f01;
	font-weight: bold;
}
/* table bootstrap */
.table {
	width: 100%;
	margin-bottom: 1rem;
	color: #212529;
	border-collapse: collapse;
	}
	
	.table th,
	.table td {
	padding: 0.75rem;
	vertical-align: top;
	border-top: 1px solid #dee2e6;
	}
	
	.table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #dee2e6;
	}
	
	.table tbody + tbody {
	border-top: 2px solid #dee2e6;
	}
	
	.table-sm th,
	.table-sm td {
	padding: 0.3rem;
	}
	
	.table-bordered {
	border: 1px solid #dee2e6;
	}
	
	.table-bordered th,
	.table-bordered td {
	border: 1px solid #dee2e6;
	}
	
	.table-bordered thead th,
	.table-bordered thead td {
	border-bottom-width: 2px;
	}
	
	.table-borderless th,
	.table-borderless td,
	.table-borderless thead th,
	.table-borderless tbody + tbody {
	border: 0;
	}
	
	.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.05);
	}
	
	.table-hover tbody tr:hover {
	color: #212529;
	background-color: rgba(0, 0, 0, 0.075);
	}
	
	.table-primary,
	.table-primary > th,
	.table-primary > td {
	background-color: #b8daff;
	}
	
	.table-primary th,
	.table-primary td,
	.table-primary thead th,
	.table-primary tbody + tbody {
	border-color: #7abaff;
	}
	
	.table-hover .table-primary:hover {
	background-color: #9fcdff;
	}
	
	.table-hover .table-primary:hover > td,
	.table-hover .table-primary:hover > th {
	background-color: #9fcdff;
	}
	
	.table-secondary,
	.table-secondary > th,
	.table-secondary > td {
	background-color: #d6d8db;
	}
	
	.table-secondary th,
	.table-secondary td,
	.table-secondary thead th,
	.table-secondary tbody + tbody {
	border-color: #b3b7bb;
	}
	
	.table-hover .table-secondary:hover {
	background-color: #c8cbcf;
	}
	
	.table-hover .table-secondary:hover > td,
	.table-hover .table-secondary:hover > th {
	background-color: #c8cbcf;
	}
	
	.table-success,
	.table-success > th,
	.table-success > td {
	background-color: #c3e6cb;
	}
	
	.table-success th,
	.table-success td,
	.table-success thead th,
	.table-success tbody + tbody {
	border-color: #8fd19e;
	}
	
	.table-hover .table-success:hover {
	background-color: #b1dfbb;
	}
	
	.table-hover .table-success:hover > td,
	.table-hover .table-success:hover > th {
	background-color: #b1dfbb;
	}
	
	.table-info,
	.table-info > th,
	.table-info > td {
	background-color: #bee5eb;
	}
	
	.table-info th,
	.table-info td,
	.table-info thead th,
	.table-info tbody + tbody {
	border-color: #86cfda;
	}
	
	.table-hover .table-info:hover {
	background-color: #abdde5;
	}
	
	.table-hover .table-info:hover > td,
	.table-hover .table-info:hover > th {
	background-color: #abdde5;
	}
	
	.table-warning,
	.table-warning > th,
	.table-warning > td {
	background-color: #ffeeba;
	}
	
	.table-warning th,
	.table-warning td,
	.table-warning thead th,
	.table-warning tbody + tbody {
	border-color: #ffdf7e;
	}
	
	.table-hover .table-warning:hover {
	background-color: #ffe8a1;
	}
	
	.table-hover .table-warning:hover > td,
	.table-hover .table-warning:hover > th {
	background-color: #ffe8a1;
	}
	
	.table-danger,
	.table-danger > th,
	.table-danger > td {
	background-color: #f5c6cb;
	}
	
	.table-danger th,
	.table-danger td,
	.table-danger thead th,
	.table-danger tbody + tbody {
	border-color: #ed969e;
	}
	
	.table-hover .table-danger:hover {
	background-color: #f1b0b7;
	}
	
	.table-hover .table-danger:hover > td,
	.table-hover .table-danger:hover > th {
	background-color: #f1b0b7;
	}
	
	.table-light,
	.table-light > th,
	.table-light > td {
	background-color: #fdfdfe;
	}
	
	.table-light th,
	.table-light td,
	.table-light thead th,
	.table-light tbody + tbody {
	border-color: #fbfcfc;
	}
	
	.table-hover .table-light:hover {
	background-color: #ececf6;
	}
	
	.table-hover .table-light:hover > td,
	.table-hover .table-light:hover > th {
	background-color: #ececf6;
	}
	
	.table-dark,
	.table-dark > th,
	.table-dark > td {
	background-color: #0b64a2;
	}
	
	.table-dark th,
	.table-dark td,
	.table-dark thead th,
	.table-dark tbody + tbody {
	border-color: #95999c;
	}
	
	.table-hover .table-dark:hover {
	background-color: #b9bbbe;
	}
	
	.table-hover .table-dark:hover > td,
	.table-hover .table-dark:hover > th {
	background-color: #b9bbbe;
	}
	
	.table-active,
	.table-active > th,
	.table-active > td {
	background-color: rgba(0, 0, 0, 0.075);
	}
	
	.table-hover .table-active:hover {
	background-color: rgba(0, 0, 0, 0.075);
	}
	
	.table-hover .table-active:hover > td,
	.table-hover .table-active:hover > th {
	background-color: rgba(0, 0, 0, 0.075);
	}
	
	.table .thead-dark th {
	color: #fff;
	background-color: #343a40;
	border-color: #454d55;
	}
	
	.table .thead-light th {
	color: #495057;
	background-color: #e9ecef;
	border-color: #dee2e6;
	}
	
	.table-dark {
	color: #fff;
	background-color: #0b64a2;
	}
	
	.table-dark th,
	.table-dark td,
	.table-dark thead th {
	border-color: #454d55;
	}
	
	.table-dark.table-bordered {
	border: 0;
	}
	
	.table-dark.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.05);
	}
	
	.table-dark.table-hover tbody tr:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.075);
	}
	
	@media (max-width: 575.98px) {
	.table-responsive-sm {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	.table-responsive-sm > .table-bordered {
	border: 0;
	}
	}
	
	@media (max-width: 767.98px) {
	.table-responsive-md {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	.table-responsive-md > .table-bordered {
	border: 0;
	}
	}
	
	@media (max-width: 991.98px) {
	.table-responsive-lg {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	.table-responsive-lg > .table-bordered {
	border: 0;
	}
	}
	
	@media (max-width: 1199.98px) {
	.table-responsive-xl {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	.table-responsive-xl > .table-bordered {
	border: 0;
	}
	}
	
	.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	
	.table-responsive > .table-bordered {
	border: 0;
	}
	
	.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
	
	.table-responsive > .table-bordered {
	border: 0;
	}
/* end table */
.reward-card {
	width: 520px;
	background: #fff;
	box-shadow: 1px 1px 15px rgb(230, 228, 228);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	margin: 0 50px 25px 0;
	padding: 25px 20px 20px 20px;
}
.reward-card h4.bas { color: #6E6609;}
.reward-card h4.sup { color: #C89C4F;}
.reward-card small {
	color: rgb(155, 155, 155);
}
.img-reward-logo {
	position: absolute;
	right: 20px;
}
.label-grey {
	width: 110px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	font-size: 11px;
	border-radius: 3px;
	margin: 20px 0 10px 0;
}
.reward-point {
	width: 230px;
	display: flex;
	justify-content: space-between;
}
.point-num {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.point-num span{
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 25px;
}
.reward-point strong {
	transform: translateY(5px);
	font-size: 15px;
}
.point-num small {
	color: rgb(43, 43, 43);
}
.reward-bonus {
	display: flex;
	justify-content: space-between;
}
.reward-bonus.full {
	width: 100%;
}
.get-reward {
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.grnum {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	color: #364166;
	z-index: 1;
}
.grnum::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	transform: rotateZ(45deg) translateX(-50%);
	left: 50%;
	z-index: -1;
	bottom: -7px;
}
.grnum.up::before {
	bottom: 10px;
}
.grnum.lock {background: #dee2e6;}
.grnum.open {background: #E5FFE8;}
.grnum.proses {background: #E5EBFF;}
.grnum.lock::before {
	background: #dee2e6;
}
.grnum.open::before {
	background: #E5FFE8;
}
.grnum.proses::before {
	background: #E5EBFF;
}
.circles-open {
	margin: 10px 0;
}
.circles-open i { color: #0B9719;}
.circle-proses {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 6px solid #5679F6;
	margin: 14px 0;
	border-radius: 50%;
}
.circle-lock {
	width: 20px;
	height: 20px;
	margin: 14px 0;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	color: #fff;
}
.circle-lock i {
	font-size: 10px;
}
.get-reward img {
	margin-top: 35px;
}
.garis-reward {
	width: 330px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 148px;
	left: 75px;
}
.garis-reward1 {
	width: 90px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 148px;
	left: 75px;
}
.garis-reward2 {
	width: 90px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 148px;
	left: 195px;
}
.garis-reward3 {
	width: 90px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 148px;
	left: 315px;
}
.card-bonus {
	width: 670px;
	background: #FFFFFF;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.13);
	border-radius: 10px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	padding: 30px;
}
.card-bonus small {
	color: rgb(155, 155, 155);
	margin-bottom: 7px;
}
.card-bonus h2 {
	font-size: 28px;
	font-family: 'Roboto', sans-serif;
}
.pre-bonus {
	width: 100%;
	margin-top: 20px;
	display: flex;
}
.pre-bonus-nilai {
	width: 100%;
	display: flex;
	margin-top: 5px;
}
.pre-one {
	font-size: 12px;
	padding-left: 15px;
	color: rgb(155, 155, 155);
}
.pre-one span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #0d8f01;
	position: absolute;
	left: 0;
	top: 4px;
}
.pre-bonus-nilai .pre-one {
	font-size: 14px;
	font-weight: bold;
}
.garis-reward01 {
	width: 140px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 43px;
	left: 95px;
}
.garis-reward02 {
	width: 140px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 43px;
	left: 260px;
}
.garis-reward03 {
	width: 140px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 43px;
	left: 425px;
}
.garis-reward04 {
	width: 140px;
	height: 3px;
	border-radius: 4px;
	background: #0B9719;
	position: absolute;
	bottom: 43px;
	left: 595px;
}
.alert-warning, .alert-success, .alert-danger {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15px;
	font-size: 14px;
	margin-bottom: 10px;
	border-radius: 4px;
}
.alert-warning strong, .alert-success strong, .alert-danger strong {
	margin-right: 5px;
}
.alert-warning i, .alert-success i, .alert-danger i {
	margin-right: 5px;
	font-size: 15px;
	color: rgb(48, 47, 47);
}
.alert-danger {
	background: #d82404;
	color: #fff;
}
.alert-warning {
	background: #FEB009;
}
.alert-success {
	background: #3BC740;
}
.form-input {
	display: flex;
	flex-direction: column;
	margin-top: 7px;
}
.form-input input, .form-input textarea {
	outline: none;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}
.form-input small.warn {
	color: #ff2600;
	margin: 3px 0 0 5px;
}
.form-input small.sukses {
	color: #038d16;
	margin: 3px 0 0 5px;
}
.form-input input.wa {
	width: 300px;
}
.form-input input.npwp {
	width: 350px;
}
.form-input input.kodepos {
	width: 200px;
}
.form-input select {
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.hrz-fomr.mt-50 {
	margin: 50px 0;
}
.blockquotes {
	width: 100%;
	height: 150px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 15px;
	font-size: 14px;
	color: rgb(44, 43, 43);
	margin: 20px 0 10px 0;
}
.label-textbox {
	display: flex;
	align-items: center;
	font-size: 14px;
}
.label-textbox label {
	
}
.ckbox {
	width: 17px;
	height: 17px;
	border-radius: 5px;
	border: 1px solid #ccc;
	margin:0 5px;
}
.btn-submit-form {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	outline: none;
	border: none;
	width: 120px;
	height: 30px;
	background: linear-gradient(93.28deg, #DBBC6D -0.23%, #FAE2A4 66.54%, #E4C36C 125.46%);
	box-shadow: 0px 8px 15px rgba(231, 181, 54, 0.26);
	border-radius: 5px;
	cursor: pointer;
	transition: all .3s ease;
}
.btn-submit-form:hover {
	background: linear-gradient(28deg, #DBBC6D -0.23%, #FAE2A4 66.54%, #E4C36C 125.46%);
	transform: translate(1px, 1px);
	box-shadow: 0px 8px 15px rgba(231, 181, 54, 0.4);
}
.mb-card.mb-100 {
	padding-bottom: 100px;
}
.bonus-bawah {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.bonus-bawah-tree {
	width: 190px;
	display: flex;
	flex-direction: column;
	margin: 0 5px 5px 0;
}
.pre-one.strongs {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #000;
	margin-top: 5px;
}
.body-login {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.body-login img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.splash {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background: #ffffff86;
}
.containeslogin {
	position: absolute;
	width: 1000px;
	height: 600px;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 2px 2px 20px #ffffff;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.containeslogin.forgot {
	width: auto;
	height: auto;
	background: rgba(41, 41, 41, 0.8);
	padding: 0;
}
.forgot-pwd {
	width: 500px;
	height: auto;
	padding: 25px 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.leftlogin {
	position: absolute;
	width: 400px;
	left: 0;
	top: 0;
	height: 600px;
	background: rgba(41, 41, 41, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 10px;
	color: #ffffff;
}
.leftlogin p {
	width: 100%;
	padding:25px;
	text-align: center;
}
.rightlogin {
	position: absolute;
	right: 0;
	top: 0;
	width: 600px;
	height: 600px;
	background: linear-gradient(335deg, rgba(41,41,0,0.7) 0%, rgba(41,41,41,0.9) 40%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.leftlogin img {
	width: 200px;
}
.leftlogin-logo	{
	width: 250px;
}
.leftlogin-logo.forgot {
	width: 250px;
}
.leftlogin-text {
	width: 90%;
	height: 400px;
	overflow-y: auto;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	  text-align: center;
	padding: 30px 0 10px 0;
}
.leftlogin-text p {
	text-align: center;
}
.leftlogin-text::-webkit-scrollbar {
	display: none;
}
.leftlogin-logo img {
	width: 100%;
	height: auto;
}
.rightlogin p {
	font-family: 'Roboto', sans-serif;
}
.block {
	width: 100%;
	margin-top: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgb(173, 118, 0);
	color: #fff;
	padding: 10px 0;
}
.block.forgot {
	margin-top: 20px;
	font-size: 12px;
}
.sosmed-button {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	padding: 0 50px;
}
.sosmeds {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	margin-top: 25px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
}
.sosmeds:hover {
	background: rgb(226, 224, 224);
}
.sosmeds img {
	width: 25px;
	height: 25px;
}
.form-login {
	width: 450px;
	height: 40px;
	background: #fff;
	margin-bottom: 20px;
	border-radius: 30px;
	display: flex;
	align-items:center;
}
.form-login i {
	color: rgb(107, 107, 107);
	margin-left: 15px;
}
.form-login input {
	width: 350px;
	padding: 7px 0 7px 7px;
	outline: none;
	border: none;
	font-family: 'Roboto', sans-serif;
}
.form-login i.lock {
	color: rgb(231, 230, 230);
	cursor: pointer;
}
.form-login i.red {
	color: rgb(233, 0, 0);
	cursor: pointer;
}
.frm {
	width: 450px;
	display: flex;
}
.frm.spc {
	justify-content: space-between;
	align-items: center;
	color: #fff;
	font-size: 12px;
	margin-top: -10px;
}
.spc div {
	display: flex;
	align-items: center;
}
.spc div input {
	margin-right: 5px;
}
.spc div label:hover {
	text-decoration: underline;
	cursor: pointer;
}
.spc a {
	color: #fff;
}
.spc a:hover {
	text-decoration: underline;
}
.btn-three{
	width: 450px;
	outline: none;
	border: none;
    padding: 10px 20px;
    border-radius: 25px;
    background: linear-gradient(191.13deg, #FAEC9C -45.36%, #BC8D43 98.91%);
    color: #FFFFFF;
    font-family: 'Merriweather', serif;
    transition: .3s all ease-in;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}
.btn-three:hover {
    background: linear-gradient(91.13deg, #BC8D43 -45.36%, #FAEC9C 98.91%);
    box-shadow: 1px 2px 15px #FAEC9C, -1px 2px 10px #BC8D43;
}
.btn-three i {
	margin-right: 10px;
	transition: .3s all ease;
}
.btn-three:hover.btn-three i {
	transform: rotateZ(-25deg);
}
.frm.notif {
	text-align: center;
	color: #fff;
	background: red;
	margin-top: 20px;
	font-size: 12px;
	padding: 5px;
}
.frm.abs {
	position: absolute;
	bottom: 20px;
	color: #fff;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 11px;
}
.abs small a {
	text-decoration: none;
	color: #fff;
}
.abs small a:hover {
	text-decoration: underline;
	font-weight: bold;
}

/**
 * Update Mobile Version
 */

.carousel-container {
    position: relative;
}

/* Center navigation vertically */
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show navigation on hover */
.carousel-container:hover .owl-nav {
    opacity: 1;
}

.carousel-container .owl-nav button.owl-prev,
.carousel-container .owl-nav button.owl-next {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 18px;
    display:inline-flex;
    width: 30px;
    height:30px;
    justify-content:center;
    align-items:center;
}

.carousel-container .owl-nav button.owl-prev {
    margin-left:10px;
}

.carousel-container .owl-nav button.owl-next {
    margin-right:10px;
}

.carousel-container .owl-nav button span {
    margin-top:-5px;
}

/* Customize dots */
.carousel-container .owl-dots {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.carousel-container .owl-dots .owl-dot {
    background: rgba(0, 0, 0, 0.5);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.carousel-container .owl-dots .owl-dot.active {
    background: white;
    width: 40px;
    border-radius: 8px;
}

/* Image links */
.carousel-container .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}

.section-shortcut .section-content,
.section-shortcut .shortcut-icon {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.section-shortcut .section-content {
    margin-left:-15px;
    margin-right:-15px;
}

.section-shortcut .shortcut-icon {
    flex-direction:column;
    justify-content:center;
    gap: 5px;
    padding: 5px;
    text-align:center;
    flex-basis:25%;
}

.section-shortcut .shortcut-icon .icon {
    display: block;
    border-radius: 8px;
    background: rgb(12 106 178 / 15%);
    color: rgb(12, 106, 178);
    padding: 15px;
    margin-bottom: 5px;
}

.section-stock-pin  .pin-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.section-stock-pin  .pin-item .pin-code {
    display: inline-block;
    min-width: 60px;
}

.section-stock-pin .section-content {
    max-height: 245px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.section-stock-pin .section-content.show {
    overflow:visible;
}

.section-level .section-content {
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    gap: 15px;
}

.section-level .level-item {
    display: flex;
    flex-direction: column;
}

.section-level .level-item-line {
    height: 2px;
    background: #000;
    width: 100%;
}

.section-level .level-item  .level-point,
.section-level .level-item  .level-name {
    font-size:13px;
    font-family: 'Roboto', sans-serif;
}

.section-level .level-item .level-point,
.section-level .level-item .level-name {
    position: relative;
    background: #dee2e6; /* Warna bubble */
    color: #364166; /* Warna teks */
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    max-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    white-space: nowrap;
}

.section-level .level-item .level-name {
    margin-bottom:0;
    margin-top:15px;
}

.section-level .level-item .level-point::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Jarak segitiga dari bubble */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px; /* Membuat segitiga */
    border-color: #dee2e6 transparent transparent transparent; /* Warna segitiga sesuai warna bubble */
}

.section-level .level-item .level-name::before {
    content: '';
    position: absolute;
    top: -10px; /* Jarak segitiga dari bubble */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px; /* Membuat segitiga */
    border-color: transparent transparent #dee2e6 transparent; /* Warna segitiga sesuai warna bubble */
}

.section-level .level-item .level-point i,
.section-level .level-item:not(.open) .level-status i {
    color:#dee2e6;
}

.section-level .level-item.open .level-point,
.section-level .level-item.open .level-name {
    background:#E5FFE8;
}

.section-level .level-item.open .level-point::after {
    border-color: #E5FFE8 transparent transparent transparent;
}

.section-level .level-item.open .level-name::before {
    border-color: transparent transparent #E5FFE8 transparent;
}

.section-level .level-item.open .level-point i {
    color:#000000;
}


@media (max-width:500px) {
    .section-level .section-content {
        flex-wrap: wrap;
    }
    
    .section-level .level-item {
        margin-bottom: 15px;
    }
    
    .section-level .level-item-line {
        display:none;
    }
}

.reward-achivement,
.reward-more-info {
    border-top: 1px dashed #ddd;
}

.section-level.reward-basic {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px dashed #ddd;
}

.section-level.reward-basic .level-reward {
    margin-top:20px;
    max-height: 100px;
}

.section-level.reward-basic .level-reward img {
    width: 69px;
    height: 53px !important;
    object-fit: cover;
    display: block;
    margin: 5px auto;
}

.section-profile .photo-profile img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.section-profile .photo-profile .profile-number,
.section-profile .photo-profile .profile-email {
    font-size:14px;
    display:flex;
    gap:10px;
}

.section-profile .photo-profile .profile-number svg,
.section-profile .photo-profile .profile-email svg {
    width: 14px;
    height:14px;
}

.section-profile .profile-package {
    display: inline-flex;
    align-items: center;
    gap:5px;
    border-radius:30px;
    border:1px solid #555;
    padding-right:10px;
}

.section-profile .profile-package img {
    width:34px;
}

.section-profile .profile-package-registered ul {
    margin-top:0.25rem;
    padding-left: 1.5rem;
}

.section-profile .profile-package-registered ul li {
    margin-bottom:0.25rem;
    font-weight: 500;
}

@media (max-width:500px) {
    .section-profile .photo-profile .profile-number, .section-profile .photo-profile .profile-email
    {
        justify-content:center;
    }
    
    .section-profile .profile-name-package {
        flex-direction: column;
        gap: 10px;
    }
}

.shadow {
    box-shadow: 1px 1px 15px rgb(236, 234, 234), 1px 1px 15px rgb(233, 230, 230) !important;
}

.btn-accent {
  color: #e9dfb7;
  background-color: #292929;
  border-color: #292929;
}

.btn-accent:hover {
  background-color: #F3B23E;
  border-color: #F3B23E;
}