#tabellist { text-align:left; color:#000000; border-top:1px solid #EFEFEF; border-left:1px solid #EFEFEF;  }
#tabellist tr:hover{ background:#EFEFEF; color:#000000; }
#tabellist th{ padding:5px 8px; border-bottom:1px solid #EFEFEF; border-right:1px solid #EFEFEF; text-transform:capitalize; font-size:14px; text-align:center; }
#tabellist td{ padding:5px 8px; border-bottom:1px solid #EFEFEF; border-right:1px solid #EFEFEF; vertical-align:top; text-align:center; }
#tabellist a:link, #tabellist a:visited { text-decoration:none; color:#000000; }
#tabellist a:hover { text-decoration:underline; color:#000000; background:none; }
#tabellist tr .tombol {}
#tabellist tr:hover .tombol { left:0px; } 
#tabellist tr .tombol { position:relative; left:-9999px; }
#tabellist tr:hover .tombol { } 
.menuaction { float:left; text-transform:capitalize; margin-right:10px; color:#000000; }
.menuaction a:link, .menuaction a:visited { text-decoration:none; color:#000000; }
.menuaction a:hover { text-decoration:underline; color:#000000; }

#tabelview { text-align:center; color:#000000; margin-bottom:8px;  }
#tabelview tr:hover{ background:#EFEFEF; color:#000000; }
#tabelview tr:hover{ vertical-align:top }
#tabelview th{ padding:5px 0px; border-bottom:1px solid #F0F0F0; text-align:left; }
#tabelview td{ padding:5px 0px; border-bottom:1px solid #F0F0F0; vertical-align:top; text-align:left; text-transform:capitalize; }
#tabelview a:link, a:visited { text-decoration:none; color:#000000; }
#tabelview a:hover { text-decoration:underline; color:#000000; }
.menuaction { float:left; text-transform:capitalize; margin:4px 8px 0px 0px; color:#888888; font-size:12px; }
.menuaction a:link, .menuaction a:visited { text-decoration:none; color:#888888;  }
.menuaction a:hover { text-decoration:underline; color:#000000;  }

#view { display:table; width:100%; border-bottom:1px solid #F0F0F0; padding:5px 0px; }
.view_label { float:left; width:15%; text-transform:capitalize; vertical-align:top; text-align:left; padding:10px 0px;  }
.view_content { float:left; width:85%; vertical-align:top; text-align:left; padding:2px 0px; }
.mhide { }
.mhide2 { }
@media only screen and (max-width:960px) {
	.view_label { width:25%; }
	.view_content { width:75%; }
	.mhide {  }
	.mhide2 { display:none; }
}
@media only screen and (max-width:480px) {
	.view_label { float:none; width:100%; }
	.view_content { float:none; width:100%; }
	.mhide { display:none; }
	.mhide2 { display:none; }
}
#view2 { display:table; width:100%; border-top:1px solid #F0F0F0; padding:6px 0px; }
.view2_label { float:left; width:25%; text-transform:capitalize; vertical-align:top; text-align:left; padding:6px 0px;  }
.view2_content { float:left; width:75%; vertical-align:top; text-align:left; padding:6px 0px; }
@media only screen and (max-width:960px) {
	.view2_label { width:35%; }
	.view2_content { width:65%; }
}
@media only screen and (max-width:480px) {
	.view2_label { float:none; width:100%; }
	.view2_content { float:none; width:100%; }
}
#view3 { display:table; width:100%; border-top:1px solid #F0F0F0; padding:6px 0px; }
.view3_label { float:left; width:35%; text-transform:capitalize; vertical-align:top; text-align:left; padding:6px 0px;  }
.view3_content { float:left; width:65%; vertical-align:top; text-align:left; padding:6px 0px; }
@media only screen and (max-width:960px) {
	.view3_label { width:35%; }
	.view3_content { width:65%; }
}
@media only screen and (max-width:480px) {
	.view3_label { float:none; width:100%; }
	.view3_content { float:none; width:100%; }
}

#viewdetail { display:table; width:100%; border-bottom:1px solid #F0F0F0; padding:8px 0px; }
.viewdetail_label { float:left; width:15%; text-transform:capitalize; vertical-align:top; text-align:left; padding:5px 0px;  }
.viewdetail_content { float:left; width:85%; vertical-align:top; text-align:left; padding:5px 0px; }
@media only screen and (max-width:960px) {
	.viewdetail_label { width:35%; }
	.viewdetail_content { width:65%; }
}
@media only screen and (max-width:480px) {
	.viewdetail_label { float:none; width:100%; }
	.viewdetail_content { float:none; width:100%; }
}
.gambar_member { background:#FFFFFF; width:150px; margin-right:10px; border:#000000 0px solid; -webkit-box-shadow:0 1px 2px #AAAAAA; box-shadow:0 1px 2px #AAAAAA; -moz-box-shadow:0 1px 2px #AAAAAA; }
.gambar_memberkecil { background:#FFFFFF;  width:64px; height:64px; border:#000000 0px solid; margin:1px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; }
.cari { margin-top:5px; float:right;}
.cari input { background:#FFFFFF; border:1px solid #EAEAEA; padding:3px; color:#888888; width:160px; }
.cari #tombol { background:#CCCCCC url(search.png) no-repeat center; border:none; padding:3px; width:30px; padding-left:20px; }
.network_diagram {  }
.network_diagram a:link,  .network_diagram a:visited {  text-decoration:none; color:#000000; display:inline-block; }
.network_diagram a:hover { text-decoration:none; color:#000000;  }
.network_block { position: relative; background:#D4AF37; padding:10px 2px; font-weight:bold; border:2px solid #000000; max-width:200px; min-width:100px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; }
.network_block2 { position: relative; background:#D4AF37; padding:10px 2px; font-weight:bold; border:2px solid #000000; max-width:120px; min-width:100px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; }
.network_fast { background-color:#D4AF37; background-image:url(bgfast.jpg); padding:10px 2px; font-weight:bold; border:2px solid #000000; max-width:200px; min-width:100px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;  }
.network_fast2 { background-color:#D4AF37; background-image:url(bgfast.jpg); padding:10px 2px; font-weight:bold; border:2px solid #000000; max-width:120px; min-width:100px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; }

.networkdown { float:left;width:33.3%; }
@media only screen and (max-width:768px) {
	.networkdown { width:100%; }
}

#jumdown { text-align:center; margin-bottom:5px; width:100%; display:table; color:#000000;  }
#jumdown .isidown_kiri{ width:38%; padding:0px 2px; text-align:right; float:left; font-size:12px; color:#000000;  }
#jumdown .isidown_tengah { width:24%; float:left; font-size:12px; color:#000000; }
#jumdown .isidown_kanan { width:38%; padding:0px 2px; text-align:left; float:left; font-size:12px; color:#000000; }
#jumdown .premium{ color:#CC0000; }

#jumfast .isidown_kiri{ width:38%; padding:0px 2px; text-align:right; float:left; font-size:12px; }
#jumfast .isidown_tengah { width:24%; float:left; font-size:12px;}
#jumfast .isidown_kanan { width:38%; padding:0px 2px; text-align:left; float:left; font-size:12px; }
#jumfast .premium{ color:#CC0000; }

.iconreg { background:url(bgreg.png); height:200px;;width:200px;background-size:100%;text-align:center;padding:20px 5px;}
.iconreg2 { background:url(bgreg2.png); height:200px;;width:200px;background-size:100%;text-align:center;padding:20px 5px;}


.memberinfo {
	text-align:center;
	padding:10px 0px 8px 0px;
	color:#999;
	width:100%;
	display:table;
}
.memberpict {
   border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin-bottom:5px; background:#FFFFFF;
}

.qualified-member {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	top: 20px;
	right: 20px;
	background-image: url('https://www.g4nesh.co.id/upload/image/check-2.svg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.qualified-member.qualified-member--fourth-row {
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
}

.btn-default {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-default:hover {
  color: #fff;
  background-color: #717384;
  border-color: #6b6d7d;
}

.btn-default:focus, .btn-default.focus {
  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
}

.btn-default.disabled, .btn-default:disabled {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
  color: #fff;
  background-color: #6b6d7d;
  border-color: #656776;
}

.btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus,
.show > .btn-default.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
}
/* Package Cards */
.package-card {
	transition: all 0.3s ease;
	border-radius: 12px;
	overflow: hidden;
}

.package-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.package-card.selected {
	box-shadow: 0 10px 30px rgba(25, 135, 84, 0.15);
	border-color: #198754 !important;
}

/* Exclusive Package */
.exclusive-package {
	background: linear-gradient(135deg, #f8fdf9 0%, #ffffff 100%);
	border: 2px solid #198754 !important;
	position: relative;
}

.exclusive-package::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #198754 0%, #20c997 100%);
}

.exclusive-badge {
	position: absolute;
	top: 15px;
	right: -35px;
	background: #198754;
	color: white;
	padding: 5px 40px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	transform: rotate(45deg);
	z-index: 10;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Card Header */
.card-header {
	border-radius: 12px 12px 0 0 !important;
}

/* Radio Button */
.form-check-input:checked {
	background-color: #198754;
	border-color: #198754;
}

/* Price Box */
.price-box {
	border-radius: 8px;
	transition: all 0.3s ease;
}

.package-card:hover .price-box {
	transform: scale(1.02);
}

/* Accordion */
.accordion-button {
	transition: all 0.2s ease;
}

.accordion-button:not(.collapsed) {
	background-color: transparent;
	color: #198754;
}

.accordion-button::after {
	transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(-180deg);
}

.accordion-button:focus {
	box-shadow: none;
	border: none;
}

/* Feature List */
.feature-item {
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
	transition: all 0.2s ease;
}

.feature-item:last-child {
	border-bottom: none;
}

.feature-item:hover {
	padding-left: 5px;
	background-color: #f8f9fa;
}

.show-sidebar ~ .dark-transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}