:root{
	--color-theme:#7c655d;
}
/******************************
=========  color  =========
******************************/
.color-theme{
	color:#7c655d !important;
}
/***
=======================
	Default layout
=======================
***/
#sidebar-wrapper .sidebar-heading{
	background-image:linear-gradient(45deg, #737ce1, #72c9e5);
}
.avatar-display{
	border:none;
	max-width: 100px;
    max-height: 100px;
	display:flex;
	align-items:start;
	justify-content:center;
}
.avatar-display img{
    max-width: 165px;
    max-height: 165px;
    border: none !important;
}
.avatar-display-upload{
	border-radius:50%;
	border:1px solid #eee;
	overflow:hidden;
	max-width: 100px;
    max-height: 100px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.avatar-display-upload img{
    max-width: 110px;
    max-height: 110px;
    border: none !important;
}
.ranking-requipment span{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 6px;
	color:#777;
}
.ranking-requipment span a:hover{
	color:#444;
}
.ranking-requipment span img{
	max-width:40px;
	border:none !important;
}
.logo-wrapper img{
	height:36px;
}
.list-group-header{
	background:#011428;
	border-bottom:1px solid #eee;
	padding:10px 15px;
	margin-bottom:5px;
	/*box-shadow:4px 3px 5px rgb(133 130 130 /.15);*/
	font-weight:600;
	font-size:18px;
	color:#94abcd;
}
.list-group-flush .list-group-item{
	background:#fff;
	border:1px solid #f8f8f8;
	border-radius:10px;
	padding:10px 15px;
	margin:0 10px 6px !important;
	max-width:220px;
	box-shadow:4px 3px 5px rgb(133 130 130 /.15);	
	color:#0e2e4e;
}
.list-group a[aria-expanded="true"]{
	background:#eee !important;
	border:1px solid #dedede;
}

.list-group .collapse.show .list-group-item{
	opacity:1;
	background:#fcfcfc;
	transition:all ease .3s;
	color:#222;
	position:relative;
}
.list-group .collapse .list-group-item:hover{
	background:#eee;
}
.custom-navbar{
	background-image:linear-gradient(45deg, #737ce1, #72c9e5);	
}
/***
=======================
	Button css
=======================
***/
.btn-primary{
	background:#7b655d !important;
	border:0;
	border-radius:20px;
	padding:6px 20px;
	text-transform:uppercase;
	font-weight:600;
}
.btn-previous{
	margin:0 10px;
}
#back{
	background:#888 !important;
}
#_confirm{
	background:green !important;
}
.btn-check-submit{
    background-color: #0b56b3 !important;
    border-color: #0b56b3 !important;
	color:#fff !important;
}
.btn-cancel{
	background-color:#888;
	color:#fff !important;
}
.btn-confirm{
    background-color: #0b56b3 !important;
    border-color: #0b56b3 !important;
	color:#fff !important;
}
/***
=======================
	Login page
=======================
***/
.theme-form .form-group input[type=text]:-webkit-autofill{
	-webkit-text-fill-color: #000 ;
}
input#user_username::placeholder{
	font-size:12px;
	font-weight:normal;
	letter-spacing:normal;
	color:#aaa;
}
input#user_nric_passport_no::placeholder{
	font-size:12px;
	font-weight:normal;
	letter-spacing:normal;
	color:#aaa;
}
#toggle-button{
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
}
#toggle-button-new-spassword, #toggle-button-confirm-spassword{
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
}
.input-icon{
	width:10%;
}
.input-field{
	/*width:90%;
	max-width:300px;*/
}
.icon-user-name{
	color:#7c655d;
	padding:6px;
	margin-right:8px;
	text-align:center;
}
.icon-user-password{
	color:#7c655d;
	padding:6px;
	margin-right:8px;
	text-align:center;
}
.choose-btn label{
	width:100%;
	padding:6px 20px;
	background:#7c655d;
	color:#fff;
	border-radius:5px;
	text-align:center;
}
.login-form .input-field{
	width:100%;
	border:0;
}
@media (min-width:768px){
	.login-form{
		width:100%;
	}
}
@media(max-width:520px){
	.choose-btn label{
		padding:6px 10px;
	}
}
.choose-login-way {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size:14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.choose-login-way input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.choose-login-checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
}
.choose-login-way:hover input ~ .checkmark {
  background-color: #ccc;
}
.choose-login-way input:checked ~ .checkmark {
  background-color: #2196F3;
}
.choose-login-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.choose-login-way input:checked ~ .choose-login-checkmark:after {
  display: block;
}
.choose-login-way .choose-login-checkmark:after {
 	top: 3px;
	left: 3px;
	width:10px;
	height:10px;
	border-radius: 50%;
	background: #000;
}
#_submit{
	background:#7c655d;
	color:#fff;
	font-weight:bold;
}

.login-card{
	border-radius:15px;
}
@media (max-width:414px){
	.login-card h3{
		font-size:18px;
	}
}
.btn-submit{
	width:100%;
	border:0;
	border-radius:10px;
	padding:6px 20px;
	text-transform:uppercase;
	font-weight:600;	
}
/***
=======================
	Reset password
=======================
***/
.input-password-field i.fas{
	color:#7c655d;
}
#captcha::placeholder{
	font-weight:normal;
	font-size:12px;
	color:#000;
	letter-spacing:normal;
}
/***
=======================
	Registration
=======================
***/
#user_introducer::placeholder{
	font-weight:normal;
	font-size:12px;
	color:#999;
	letter-spacing:normal;
}
#user_name::placeholder{
	font-weight:normal;
	font-size:12px;
	color:#999;
	letter-spacing:normal;
}
#user_email::placeholder{
	font-weight:normal;
	font-size:12px;
	color:#999;
	letter-spacing:normal;
}
#user_name::placeholder:focus{
	color:#d00;
}
#agree_tnc{
	font-size:80%;
}
select#user_country{
	font-weight:normal;
	color:#000;
	position:relative;
}

/***
=======================
	Dashboard
=======================
***/
.my-order-card h3 {
	font-size:14px;
}
.news-update-grid{
	margin:0;
	padding:0;
}
.news-update-grid li{
	list-style:none;
	padding:10px;
	padding-left:10px;
	margin-bottom:5px;
	background:#f7f7f7;
}
.news-update-grid li:nth-child(even){
	background:#efefef;
}
.my-journey-start img{
	max-width:80%;
	margin:0 auto;
}
.advisor-journey{
	width:100%;
	padding:30px 0;
	position:relative;
}
.line-top{
	width:70%;
	display:flex;
	justify-content:space-between;
	margin:0 auto;
}
.point-start{
	color: #19cc59;
    font-size: 16px;
    font-weight: bold;
	position:absolute;
	left: 13%;
    top: 24%;
}
.point-two{
	color: #19cc59;
    font-size: 16px;
    font-weight: bold;
	filter:grayscale(1);
	position:absolute;
	left:45%;
    top:5%;	
}
.point-two.active{
	filter:grayscale(0);
}
.point-four{
	color: #19cc59;
    font-size: 16px;
    font-weight: bold;	
	filter:grayscale(1);	
}
.point-four.active{
	filter:grayscale(0);
}
.journey-breadcrumb{
	width:50%;
	display:block;
	margin:0 auto;
}
.widget-card{
	padding:10px;
	margin:auto;
	color:#7b655d;
}
.widget-card-icon{
	margin-bottom:10px;
}
.widget-card-icon i.fa{
	font-size:22px;
}
.widget-card-icon img{
	width:25px;
}
.widget-card h4{
	font-size:20px;
	font-weight:bold;
	margin-bottom:0;
}
.widget-card-content{
	padding:0 10px;
}
.all-sales-grid{
	font-size:14px;
	color:#7b655d;
}
.all-sales-amount{
	font-weight:bold;
}
.sales-card{
	padding:15px;
	color:#7b655d;
	margin: auto 0;
}
.sales-card h4{
	font-weight:bold;
	font-size:20px;
}
.sales-percent{
	font-weight:600;
	padding-left:15px;
}
.sales-percent.up{
	color:green;
	position:relative;
}
.sales-percent.up:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	font: normal normal normal 14px/1 FontAwesome;
}
.sales-percent.down{
	color:red;
	position:relative;
}
.sales-percent.down:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	font: normal normal normal 14px/1 FontAwesome;
}
.top-sales{
	color:#7b655d;
}
.top-sales h3{
	font-size:16px;
	font-weight:bold;
}
.top-sales h4{
	font-size:14px;
}
.top-sales-updated{
	font-size:10px;
	margin-top:20px;
}
.top-sales-place{
	display:flex;
	margin-left:auto;
	height:100px;
}
.place-third{
	width:40px;
	position:relative;
}
.place-third:before{
	content:'';
	position:absolute;
	width:100%;
	height:25px;
	left:0;
	bottom:0;
	background:#995212;
}
.place-third:after{
	content:'3';
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	bottom:0px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	color:#fff;
}
.place-first{
	width:40px;
	position:relative;
}
.place-first:before{
	content:'';
	position:absolute;
	width:100%;
	height:60px;
	left:0;
	bottom:0;
	background:#00585c;
}
.place-first:after{
	content:'1';
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	bottom:30px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	color:#fff;
}
.place-second{
	width:40px;
	position:relative;
}
.place-second:before{
	content:'';
	position:absolute;
	width:100%;
	height:40px;
	left:0;
	bottom:0;
	background:#dd8731;
}
.place-second:after{
	content:'2';
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	bottom:15px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	color:#fff;
}
.member-avatar{
	width:30px;
	height:30px;
	margin:auto;
	border-radius:50%;
	overflow:hidden;
}
.member-avatar img{
	max-width:100%;
}
.place-third .member-avatar{
	margin-top:35px;
}
.place-second .member-avatar{
	margin-top:25px;
}
.order-status-icon{
	width:65px;
	height:65px;
	max-width:65px;
	padding:10px;
}
.order-status-icon img{
	max-width:100%;
}
.create-order-icon{
	padding:15px;
	margin:10px auto;
	background:#eee;
	border-radius:50%;
	width:65px;
	height:65px;
}
.create-order-icon img{
	max-width:100%;
}
/***
=======================
	BonusDetail page
=======================
***/

.custom-tooltip{
  position: relative;
  display:inline-block;
}
.tooltip__item {
  position: absolute;
  min-width: 200px;
  padding:10px;
  visibility: hidden;
  opacity: 0;
  background:#222;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
  color: #fff;
  font-size:13px;
  z-index: 4;
}
.tooltip__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.tooltip__item ul{
	margin:0;
	padding:0;
}
.tooltip__item li{
	display:block;
	list-style:none;
	color:#cbcbcb;
}
.tooltip__item li b{
	color:#fff;
}
.tooltip__initiator {
  cursor: pointer;
  z-index: 5;
}
.custom-tooltip[data-direction=left] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(0, -50%, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: calc(100% + 1em);
  transform: translate3d(15px, -50%, 0);
}
.custom-tooltip[data-direction=left] .tooltip__item:after {
  top: 50%;
  right: -0.5em;
  transform: translate3d(0, -50%, 0);
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent white;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px 2px 1px #bcbcbc);
}
.custom-tooltip[data-direction=bottom] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=bottom] .tooltip__item {
  top: calc(100% + 1em);
  left: 50%;
  transform: translate3d(-50%, -15px, 0);
}
.custom-tooltip[data-direction=bottom] .tooltip__item:after {
  top: -0.5em;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent white transparent;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px -1px 1px #bcbcbc);
}

.fa.fa-info-circle {
  font-size: 38px;
  color: #21606b;
}
.custom-tooltip[data-direction=top] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.custom-tooltip[data-direction=top] .tooltip__item {
  bottom:calc(30% + 1em);
  left:50px;
  transform: translate3d(-50%, -15px, 0);

}
.custom-tooltip[data-direction=top] .tooltip__item:after {
  bottom: -0.5em;
  left:calc(60% - 50px);
  transform:rotate(180deg);
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent #222 transparent;
}
/*** Edit profile ***/
.form-control-static{
	padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;	
}
.form-control:disabled, .form-control[readonly] {
	cursor:not-allowed;
}
.user-qrcode{
	/*padding:3px;
	margin:3px;
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,.15);*/
}
.user-qrcode a.btn-invite-friend{
	background:#7b655d;
	color:#fff;
	border-radius:6px;
	text-decoration:none;
	padding:3px 10px;
	transition:all ease .3s;
}
.user-qrcode a.btn-invite-friend:hover{
	background:#7b655dcc;
}
#qrcode{
	padding:10px;
	margin:10px auto;
	background:#fff;
	max-width:145px;
	display:block;
	box-shadow:0 0 5px rgba(0,0,0,.15);	
}
.profile-update-progress{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin-bottom:15px;
}
.half-circle-progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 90px; height: 45px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.half-circle-bar{
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #af998f;     /* half gray, */
  border-bottom-color:#7b655d;  /* half azure */
  border-right-color:#7b655d;
}
.warning-exclamated{
	width:40px;
	height:40px;
	padding:10px 0;
	margin:0 auto 6px;
	display:block;
	border-radius:50%;
	background:#f37878;
}
.warning-exclamated i.fa{
	font-size:20px;
	font-weight:bold;
	color:#fff;
}
/*** QTA ***/
.learning-card{
	display:inline-block;
	max-width: 300px;
    vertical-align: top;
    padding: 0 15px;
	text-align:center;
}
.learning-card-icon{
	width:125px;
	height:125px;
	display:flex;
	align-items:center;
	margin:0 auto;
	margin-bottom:15px;
	padding:20px;
	border:1px solid #ddd;
	border-radius:15px;
}
.learning-card-icon img{
	max-width:100%;
}
@media (max-width:520px){
	.learning-card{
		width:100%;
		max-width:none;
		margin-bottom:20px;
	}
}
.qta-video-list a.nav-link.active{
	background-color:var(--color-theme);
}
/*** Assessment ***/
.back-button{
	background:#777;
}
.back-button:hover{
	color:rgba(255,255,255,.35);
}
.next-button{
	background:#0072ff;
}
.next-button:hover{
	color:rgba(255,255,255,.35);
}
/*** Create Order ***/
.step-create-order{
	display:flex;
	justify-content:center;
	overflow: auto;
    width: 100%;
    padding: 20px 20px 0;
}
.step-create-card{
	display:inline-block;
	margin:0;
	padding-right:20px;
	filter:grayscale(1) opacity(0.5);
	position:relative;
}
.step-create-card:before{
	content:'';
	position:absolute;
	top:12px;
	right:0;
	width:80%;
	height:2px;
	background:#eee;
}
.step-create-card:last-child:before{
	display:none;
}
.step-create-dot{
	display:block;
	width:26px;
	height:26px;
	background:#7c655d;
	margin-bottom:10px;
	border-radius:50%;
	position:relative;
}
.step-create-text{
	margin-bottom:10px;
}
.step-number{
	display:block;
	font-size:80%;
}
.step-des{
	display:block;
	font-size:12px;
	font-weight:bold;	
}
.step-progress{
	display:block;
	font-size:80%;	
}
.step-create-card.active{
	filter: grayscale(0) opacity(1);
} 
.step-create-card.active:before{
	background:green;
}
.step-create-card.active .step-create-dot{
	background:green;
}
.step-create-card.active .step-create-dot:before{
	content: "";
	position:absolute;
	top:3px;
	left:6px;
	width:100%;
	height:100%;
	color:#fff;
	font-family: 'FontAwesome';
}
.step-create-card.active .step-progress{
	color:green;
}
.step-create-card.in-progress{
	filter: grayscale(0) opacity(1);
} 
.step-create-card.in-progress .step-create-dot{
	background:#7c655d;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
.step-create-card.in-progress .step-progress{
	color:#052f7a;
}
@keyframes example {
  0%   {background:#7c655d;}
  25%  {background:#c19c8f;}
  50%  {background:#7c655d;}
  75%  {background:#c19c8f;}
  100% {background:#7c655d;}
}
@media(max-width:520px){
	.create-order-form h4.card-title{
		font-size:18px;
	}
	.create-order-form h6{
		font-size:16px;
	}
	.col-form-label{
		font-size:14px;
	}
	.form-control, .form-select{
		font-size:12px;
	}
	.step-create-order{
		justify-content:start;
		overflow:auto;
	}
}
.subtitle-row{
	background:#e7d4c4;
	padding:5px 10px;
	margin-bottom:10px;
	color: #6a564e;
}
.subtitle-row h6{
	margin:0;
}
/*** Ranking requipment ***/
.current-rank-card{
	font-size:14px;
	display:inline-block;
	position:relative;
	margin:0 10px;
}
.current-rank-card img{
	display:block;
	max-width:100px;
	margin:10px auto;	
}
.current-rank-card:before{
	content: '';
    position: absolute;
    bottom: 0;
    right: 30px;
    width: 50%;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    filter: blur(5px);
}
.next-rank-card{
	font-size:14px;
	display:inline-block;
	position:relative;
	margin:0 10px;
}
.next-rank-card img{
	display:block;
	max-width:65px;
	margin:10px auto;		
}
.next-rank-card:before{
	content: '';
    position: absolute;
    bottom: 0;
    right: 30px;
    width: 50%;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    filter: blur(5px);
}
.table-ranking-requirements{
	width:100%;
} 
.table-ranking-requirements tr td{
	padding:10px 20px;
}
.table-ranking-requirements img{
	max-width:45px;
}
/*** Advisor Payment ***/
.choose-method-grid{
	display:flex;
	margin-bottom:20px;
}
.method-choose-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	position:relative;
	z-index:1;
}
.method-choose-content img{
	max-width:65px;
	margin:10px 0;
}
.payment-method-choose {
	display: block;
	position: relative;
	padding:10px;
	margin:0 10px;
	margin-bottom: 12px;
	min-width:200px;
	cursor: pointer;
	font-size:14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition:all ease .3s;
}
.payment-method-choose input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	transition:all ease .3s;
}
.method-choose-checkmark{
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	background-color: #fbfbfb;
	border-radius:10px;
	border: 1px solid rgba(255,255,255,.15);
	transition:all ease .3s;
}
.payment-method-choose:hover input ~ .method-choose-checkmark {
	background-color: #eee;
}
.payment-method-choose input:checked ~ .method-choose-checkmark {
	background-color:#eee;
	border: 1px solid rgba(0,0,0,.25);
}
.method-choose-checkmark:after {
	content:"";
	position: absolute;
	display: none;
	font-family: 'FontAwesome';
	color:#fff;
	text-align:center;
}
.payment-method-choose input:checked ~ .method-choose-checkmark:after {
	display: block;
}
.payment-method-choose .method-choose-checkmark:after {
 	top:10px;
	right:10px;
	width:22px;
	height:22px;
	padding:0px;
	border-radius: 50%;
	background: green;
}
@media (max-width:520px){
	.choose-method-grid{
		justify-content:space-between;
	}
	.payment-method-choose{
		width:50%;
		min-width: auto;
		margin:0 0 10px;
		font-size:80%;
	}
	.method-choose-content img{
		max-width:45px;
	}
}