/* Global CSS Catgeory */
@media (max-width: 767px) {
	.filter-button-default button {
		height: 33px!important;
		margin: 10px 5px!important;
		padding: 0px 25px!important;
		line-height: 30px!important;
	}
}

.icon-user {
	padding:10px;
}

.title-user {
padding: 10px;
}

.vsn-call {
	position: relative;
    padding: 40px 100px;
    height: 100%;
}

.img-icon-wrapper {
	text-align: right;
}

.bg-color-dark {
	background-color: #363636;
}

.title-white {
	color: #ffffff;
}

.event-grid-card .rbt-card-img a img {
border-radius: 20px 20px 0 0;
}

.rbt-card {
	border-radius: 20px;
}



.member-area {
	background-color: #ffffff;
	border-radius: 20px;
}

.rbt-card.variation-02 .rbt-card-img a img {
	max-height: 100%;
	border-radius: 20px;
}

.rbt-card-img img {
	max-height: 100%;
	border-radius: 20px;
}


.rbt-card .card-list-2 {

	
}

.news .rbt-card{	
	background-color: transparent;
	box-shadow: none;
}

.footer-top .logo a img {
	max-height: 150px;
}

.rbt-slider-main-wrapper .swiper {
	border-radius: 50px;
}

.rbt-slider-main-wrapper {
min-height: 500px;
}

.rbt-banner-6.variation-03 {
	height: 400px;
}

.vsn-call {
border-radius: 25px;
}

.bg-color-yellow {
	background: #F6A509;
}

.btn-yellow {
	background: #F6A509;
}

.rbt-btn:hover {
    background-color: #505050;
}

.bg-primary-opacity {
	background-color: transparent !important;
	color: #505050 !important;
}

a.bg-primary-opacity:hover, button.bg-primary-opacity:hover {
	background-color: transparent !important;
	color: #000000 !important;
	box-shadow: none;
}


.rbt-card .rbt-card-body .rbt-card-title a:hover {
	color: #F6A509;
}

.rbt-search-field, .rbt-search-with-category {
	background-color: #ffffff;
}

.rbt-progress-parent::after {
	color: #F6A509;
}



.rbt-progress-parent svg.rbt-back-circle path {
	stroke: #F6A509;
}


.rbt-header .mainmenu-nav .mainmenu > li:hover > a, .rbt-header .mainmenu-nav .mainmenu > li.active > a {
	color: #F6A509 !important;
}

.rbt-cat-box-1 .inner {
	background-color: transparent;
	box-shadow: none;
	padding: 0;
}

.rbt-cat-box .icons {
	
	width: 100%;
}

.inner-pict .title {
font-size: 18px;
padding-top: 20px;
margin-bottom: 0;
}

.inner-pict h6 {
font-size: 13px;
}

.team-form {
	color:#f6a509;
}

.feedback {
  background-color : #31B0D5;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-color: #46b8da;
}

#mybutton {
  
  position: fixed;
  bottom: -4px;
  width: 100%;
}

.rbt-section-gapTop {
    padding-top: 80px;
}

.rbt-section-gapBottom {
    padding-top: 80px;
}


.event-higlight .rbt-badge-3 {
	top:23px;
}

.slide-rounded {
	border-radius: 25px;
}

.thumb-img img {
max-width: 250px;
border-radius: 25px;
}

.form-style-design {
	padding: 30px ;
}

.image-rounded img {
	border-radius: 25px;
}

.card-rounded {
	border-radius: 20px !important;
}


.text-detail {
	font-size: 16px;
}

.icon-card-event i {
	font-size: 25px;
	color: #ffffff;
}

.text-right {
	text-align: right;
}

.service-card-6 .inner {
	border-radius: 20px;
}

.service-card-6 .inner:hover {
	background: #cfcfcf;
	color: #505050; 
}


.rbt-arrow-between.icon-bg-primary .rbt-swiper-arrow::after {
	background: #363636;
}

.rbt-card-subtitle {
 font-size: 18px;
}


.card-1 {
	background-color: var(--color-white);
    box-shadow: var(--shadow-1);
    padding: 30px;
    position: relative;
    border-radius: 6px;
}

.card-border {
	border: 2px solid var(--color-border);
    padding: 20px;
    position: relative;
    border-radius: 6px;
}

.bold-text {
	font-weight: 700;
}

.card-2 {
	background-color: var(--color-white);
    box-shadow: var(--shadow-1);
    padding: 30px;
    position: relative;
    border-radius: 6px;
}

.proposal-title h4 {
font-size: 20px;
background-color: #ffffff;
padding: 5px;
border-radius: 20px;
z-index: 99;
}


.h-150 {
	height: 100px;
}

.height-100 {
	height: 100%;
}


.thuumbnail {
	padding: 30px;
}


.breadcrumb-circle-x{
	position: absolute;
    width: 270px;
    top: -96px;
    height: 270px;
    right: -96px;
    margin: 0 auto;
    background-image: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(167 110 0) 97%);
    opacity: 0.09;
    border-radius: 100%;
    box-sizing: border-box;

}

.breadcrumb-circle-x::before {
	position: absolute;
    content: "";
    background: #F6A509;
    border-radius: 100%;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    left: 30px;
    top: 30px;
}


.location p {
	margin-bottom: 5px;
}

.location span {
	font-weight: 700;
}

.contact-address svg {
	
	margin-right: 12px;
}

.contact-address .icon-box {
	width: 20px;
}

.bottom-status {
	display: flex;
}

.filter-button-default button.is-checked {
	background-color:#363636; 
}


.filter-button-default button:hover {
	background-color:#505050; 
}


.filter-button-default button {
	height: 40px;
	padding: 0px 35px;
	line-height: 40px;

}

.detail-member p{
	font-weight: 700;
}

.detail-member p {
	border-top: 1px solid #505050;
	padding-top: 10px;
	
}


.advance-pricing .pricing-left {
    height: 100%;
    /* background: var(--color-lighter); */
    padding: 60px 50px;
    border-radius: 20px 0 0 10px;
}


.advance-pricing {
	border-radius: 20px;
}

.contact-address li i {
	color: #F6A509;
}

.rbt-status-content {
	padding-left: 20px;
}

/* .img-profile {
	width: 200px;
} */

.pd-30 {
	padding: 30px !important;
}

.rwt-loc h6 {
	margin-top: 10px;
	margin-bottom: 2px;

}

.rwt-loc p {
	font-size: 16px;
}

.rbt-card.card-list-1 .rbt-card-img img {
    border-radius: var(--radius);
}

.course-sidebar-top {
    margin-top: 100px;
}

.date-vip span {
	padding-right: 20px;
}

.rbt-team .title {
	font-size: 20px;
}

.rbt-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	box-shadow: inset 0 0 0 1px #f6a509 !important;
}

.team-form {
	font-style: normal;
}

.popup-mobile-menu .mainmenu li a.active {
	color:#f6a509 !important;
}

.rbt-btn.btn-white:hover {
	background-color: #505050;
}

.rbt-btn.btn-border:hover {
	background-color: #505050;
	border: #505050;
}

.rbt-header .mainmenu-nav .mainmenu > li > a.active {
	color: #f6a509;
}


.rbt-overlay-page-wrapper .breadcrumb-content-top .title {
	font-size: 25px;
}

.qr-center {
	text-align: center;
}

/* .rbt-card.variation-03 {
	margin: 10px;
} */


.flex-non {
	display: inline-block !important;
	justify-content: flex-start;
}

.rbt-widget-details .rbt-course-details-list-wrapper li, .rbt-widget-details .rbt-default-sidebar-list li {
	display: block;
}

.pd-35 {
	padding: 35px;
}


.zoom-nav {
	margin-top: 10px;
}

.pricing-billing-duration {
	/*text-align: center;*/
	padding-bottom: 50px;
}


.text-left {
	text-align: left;
}

.rbt-badge {
	border-radius: 20px;
}


.post-like a {
padding-right: 20px;
}

.post-like  {
	padding-top: 35px;
	}

/*----form style----*/
.rbt-modern-select.height-45 .bootstrap-select button.btn-light{
width: 100%;
    background-color: transparent;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    line-height: 23px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--color-body);
    margin-bottom: 15px;
    height: 50px;
}

.riwayat-card {
	padding: 20px;
}

.rbt-badge-2 {
	font-size: 18px;
	font-weight: 700;
}

.lock-size {
	font-size: 25px;
}

.f-20 {
	font-size: 20px;
}

.title-detail-page span{
	font-size: 15px;
}

.title-detail-page h4{
	margin-bottom: 0;
}

.advance-tab-content-style-2 {
text-align: left;
padding: 0;
}

.tab-button-style-2 {
	justify-content: left;
}

.video-popup-with-text {
	padding:50px 0 ;
}

/*-----gradient-----*/

.tab-button-style-2 li a.active, .tab-button-style-2 li a:hover {
	color: #F6A509;
}


.tab-button-style-2 li a::after {
	background-color: #F6A509;
}

.rbt-my-account-tab-button a.active, .rbt-my-account-tab-button a:hover {
background: linear-gradient(360deg, rgba(246,165,9,1) 10%, rgba(246,165,9,0.9332107843137255) 71%, rgba(246,165,9,0.7399334733893557) 100%) !important;

}


.filter-tab-button button.active, .filter-tab-button button:hover {
	background-color: #505050;
	color: #ffffff;
}




a:hover, a:focus, a:active {
    text-decoration: none;
    outline: none;
    color: #f6a509;
}

.rbt-page-banner-wrapper .rbt-banner-image, .bg-gradient-9 {
background: rgb(246,165,9);
background: linear-gradient(360deg, rgba(246,165,9,1) 10%, rgba(246,165,9,0.9332107843137255) 71%, rgba(246,165,9,0.7399334733893557) 100%) !important;
}

.bg-gradient-11 {
  background: linear-gradient(180deg, #F6A509 0%, #FFFFFF 100%) !important;
}


.bg-border{
	font-weight: 600;
	color: #363636;
	background-color: transparent;
	border:2px solid #363636;
}

.rbt-page-banner-wrapper .rbt-banner-image::after, .bg-gradient-9::after {
background: rgb(254,253,253);
background: linear-gradient(360deg, rgba(254,253,253,1) 0%, rgba(246,165,9,1) 61%) !important;

}

.bg-gradient-primary {
	color: #ffffff;
    background-size: 300% 100%;
    background-image: linear-gradient(to right, #F6A509, #d3720a, #d3720a, #F6A509);
}

.rbt-pagination li.active a, .rbt-pagination li:hover a {
	background-color: #f6a509;
}

.rbt-btn.btn-dark{
	background-color: #505050;
}

.rbt-gradient-border {
background: linear-gradient(to right, #F6A509, #d3720a, #d3720a, #F6A509) !important;
}

.rbt-btn.btn-dark:hover{
	background: linear-gradient(180deg, rgba(254,253,253,1) 0%, rgba(246,165,9,1) 0%);
}

.rbt-btn.btn-gradient-reject {
	color: var(--color-white);
    background-size: 300% 100%;
    background-image: linear-gradient(to right, #E91E63, #b80f8e, #b80f8e, #E91E63);
}


.rbt-btn.btn-gradient-active {
	color: var(--color-white);
    background-size: 300% 100%;
    background-image: linear-gradient(to right, #09f644, #2df7e7, #09f644, #2df7e7);
}

.rbt-btn.btn-gradient-primary {
	color: var(--color-white);
    background-size: 300% 100%;
    background-image: linear-gradient(to right, #F6A509, #d3720a, #d3720a, #F6A509);
}

.btn-rounded {
	border-radius: 40px;

}

.color-reject {
color: #e91e63;
}

.notif-time {
	color: #ffc107 !important;
}

.rbt-badge-6 {
	color: var(--color-body);
}
.btn-dark {
	background-color: #363636;
}

.bg-grey {
	background: var(--color-lighter);
}

.bg-dark {
	background-color: #363636 !important;
}

.bg-free {
	background-color: #4e4e4e;
	color:#ffffff;
}

.bg-premium {
	background-color: #f6a509;
	color:#000000;
}

.bg-opacity {
 	background-color: #f6a509b3;
 }

 .bg-grey-opacity {
 	background-color: #d4d4d4b3;
 }

 .bg-reject {
 	background-color: #e91e63;
 	color: #ffffff;
 }


 .bg-approve {
 	background-color: #8bc34a;
 	color: #ffffff;
 }


 .border-approve {
 	border: solid 2px #8bc34a;
 }


.rbt-btn.btn-dark {
	background-color: #363636;
}
.rbt-btn.btn-dark:hover {
	background-color: #ffffff;
	color:#363636;
}


.rbt-arrow-between.icon-bg-primary .rbt-swiper-arrow {
	background: #363636;}

.top-circle-shape-x {
    position: absolute;
    width: 240px;
    top: -96px;
    height: 240px;
    right: -96px;
    margin: 0 auto;
    background-image: linear-gradient(180deg, rgba(247,178,45,1) 0%, rgba(246,165,9,1) 97%);
    opacity: 0.09;
    border-radius: 100%;
    box-sizing: border-box;
}

.top-circle-shape-x::before {
	background:#363636;
}

.item-side {
	display: flex;
}

/*----notification---*/

.rbt-cart-side-menu .inner-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.rbt-notif-title {
	font-size: 20px;
}

.side-nav-opened body::before, .close_side_menu, .popup-mobile-menu, .rbt-offcanvas-side-menu {
    background: rgb(0 0 0 / 51%);
    backdrop-filter: blur(15px);
}

.p-notif p {
	font-size: 16px !important;
}

/*-----media phone----*/

@media only screen and (max-width: 600px) {

/*.bottom-status {
	display: inline-block;
}
*/
}

/* Mobile Phones and tablets */
@media (min-width: 320px) and (max-width: 767px) {
	/* .d-flex {
		display: inline !important;
	} */

	.item-side {
		display: block;
	}

	.bottom-status {
		display: inline !important;
	}

	.rbt-callto-action .title-call{
		text-align: center;
	}
}

.icon-bar {
	border-radius: 10px;
	padding: 5px 10px;
}


/*----player---*/
.player-container {
	position: relative;
  }
  
  .controls {
	display: flex;
	justify-content: center;
	margin-top: 50px;
  }
  
  .control-button {
	margin: 0 10px;
	padding: 10px 20px;
	/* background-color: #007bff; */
	color: #000000;
	border: none;
	border-radius: 5px;
	cursor: pointer;
  }

.timeline-container {
  flex-grow: 1;
  margin: 0 10px;
}

.timeline {
margin-top: 30px;
  width: 100%;
  height: 5px;
  background-color: #ccc;
  position: relative;
}

.timeline-progress {
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
}