@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.ml_30px{
    margin-left: -60px;
}

.ml_30px_u{
    margin-left: -40px;
}

.bdr{
    border: 1px solid #555 !important;
}

.favicon_size{
   height: 15px; width: 15px; 
   cursor: pointer;
}

.user_logo_side_shadow{
    box-shadow: 5px 5px 3px 0px #EEE;  
}
.user_side_border{
    border-right: 1px solid #EEE;
}
.pop_up_modal_side_bg{
    background-color: #121F3E;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.nav_item:hover{
    color: #FFF !important;
}

.fa_1x {
  font-size: 1.3em; 
}

.sidebar_nav_item_a:hover{
    color: #FFF !important;
}
.sidebar_color_temp{
    box-shadow: 5px 2px 3px 0px #EEE; 
    
}
.no_box_shadow{
    box-shadow: none !important;
}
.payment_methods_img{
    height: 40px;
}
.pl_20{
    padding-Left: 20px;
}
.b_btm{
    /*color: #05c !important;*/
    border-bottom: 2px solid #EEE !important;
    border-radius: 0px !important;
    margin-top: 25px;
}

.ml_5{
    margin-left: -5px !important;
}

.custom-tab.active {
    background: transparent !important;
    color: #ffad46 !important;
    border-bottom: 2px solid #ffad46 !important;
    border-radius: 0px !important;
}

.custom_btn{
	border: 1px solid #bbb; padding: 3px;
	border-radius: 3px;
}

.new_table{
    width: 100%; 
}
.new_table th, .new_table td{
    padding: 10px;
}

.border_top_1{
	border-top: 1px solid #888 !important;
}
.search_btn_on_input{
	margin-left: -40px; background-color: #FFF;
	padding-left: 15px !important;
	cursor: pointer;
}
.border_radius_15px{
	border-radius: 35px !important;
}
.scrollable_div::-webkit-scrollbar {
    height: 6px;
}
.scrollable_div::-webkit-scrollbar-track {
    background-color: #ccc;
    border-radius: 5px;
}
.scrollable_div::-webkit-scrollbar-thumb {
    background-color: #999 !important;
    border-radius: 5px;
}
.scrollable_div {    
    overflow-x: auto;
    scrollbar-color: #999;
    scrollbar-width: thin;
}

.scrollable_div_no_bar {    
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-color: #CCC rgba(0,0,0,0.3);
    padding-top:15%;
}
.scrollable_div_no_bar::-webkit-scrollbar {
    height: 0px;
}

.all_text_color * {
	color: #FFF !important;
	font-weight: 300;
}

.box_shadow{
	box-shadow: none !important;
}

.pyt_method_sel{
	box-shadow: 0px 0px 2px 0px #ffad46;
	padding: 10px;
	border-radius: 8px;
}
.p_method_sel:hover{
	box-shadow: 0px 0px 2px 0px #ffad46;
	padding: 10px;	
	cursor: pointer;
	border-radius: 8px;
}

.cursor_pointer{
	cursor: pointer;
}

.text_grey2{
	color: #888;
}
.ref_link_copy{
	box-shadow:none; border: 2px solid #bbb; border-radius: 8px;
}
.modal_bg_color{
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.no_border{
	border-bottom: 2px solid #AAA;
}
.hand_pointer{
	cursor: pointer;
}
.text_nowrap1{
	color: #c60; font-size: 13px; word-wrap: break-word;
}
.user_avatar_size_20{
	height: 20px; width: 20px;
}
.padding_0{
	padding: 0px !important;
}

.font_wgh_900{
	font-size: 25px;
}
.pad_LR_15per{
	padding-left: 15% !important; padding-right: 15% !important;
}

.color_white{
	color: #FFF;
}
.login_bg_overlay_col{
	position: fixed; left: 0px; top: 0px; height:100%; width: 100%;
}

.font_10{
	font-size: 10px;
}

.font_14{
	font-size: 14px;
}

.pad_top_0{
	padding-top: 0px;
}

.pad_0{
	padding: 0px;
}

.mg_top_30{
	margin-top: 30px;
}

.margin_top_n10{
	margin-top: -10px;
}
.margin_top_n12{
	margin-top: -12px;
}

.margin_top_n32{
	margin-top: -32px;
}

.border_btm_1{
	border-bottom: 1px solid #CCC;
}

.pad_top_20{
	padding-top: 20px;
}

.border_none{
	border:none;
}

.with_50per{
	width: 50%;
}

.with_25per{
	width: 25%;
}

.with_100per{
	width: 100%;
}

.height_50{
	height: 50px;
}
.height_100per{
	height: 100%;
}
.pad_btm_40{
	padding-bottom: 40px;
}

.pad_20{
	padding: 20px;
}

.bg_ash{
	background-color: #CCC;
}

.position_relative{
	position: relative;
}

.position_abs{
	position: absolute;
}

.position_fixed{
	position: fixed;
}

.font_20{
	font-size: 20px;
}
.color_blue_b{
	color:#039;
}

.margin_top_10{
	margin-top: 10px;
}

.input_height_45{
	height: 45px; border-radius: 20px;
	width: 50%;
}
.cont_overflow_hidden{
	overflow: hidden;
}

.cont_display_none{
	display: none;
}

.pad_top_30{
	margin-top: 30px;
}
.pad_top_5{
	padding-top: 5px;
}

.u_case{
	text-transform: uppercase;
}

.color_blue_9{
	color: #ffad46;
}

.text-grey{
    color: #CCCCCC;
}
.form_cont{
	overflow: hidden; overflow-y: auto; height: 500px; padding: 10px; 
}
.bg_white{
	background-color: #FFF !important;
}
.login_logo{
	height: 40px; width: 100px;
}
.login_logo2{
	height: 30px; width: 130px;
}
.login_logo3{
	height: 30px; width: 190px;
}
.activation_logo{
	height: 30px;
}
.activation_txtBox{
	margin-top: 15px;
}
.activation_txtBox2{
	margin-top: 11px;
}
.pd_0{
	padding-bottom: 0px;
}
.logo_cont{
	margin-top: 25%; color: #FFF; position: absolute; top: 0px, left:0px; width: 100%; height: 100%;
}
.ploading{
	min-width: 100%; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 20; display: none;
}
.ploading_img_cont{
	margin-top: 25%; color: #FFF;
}
.ploading_img{
	height: 30px; width: 30px;
}

.login_row_cont{
	width: 100%; background-color: #FFF;  margin: 0px;
}

.position_relative{
	position: relative;
}

button{
	cursor: pointer !important;
}

.btn_prepend{
	cursor: pointer !important;
}

.blur_cnt{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);	
}

.fixedOeverlayBG{
	position: fixed; left: 0px; top: 0px; height:100%; width: 100%; background-color: rgba(20, 20, 100, .8);
}

.fixedOverlayIMG{
	position: fixed; left:0px; top: 0px; height: 100%; width: 100%; opacity: .4;
}

.login_fixed_panel{
	background-color:#FFF; position: fixed; height: 100%; right: 0; top: 0; width: 50%; padding: 10px; 
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
  
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2179E9;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

.floating_lang_div{
    z-index: 1000; position: absolute; bottom: 1px; left: 0px; z-index: 1000; color: #FFF; font-size:14px; width: 80px; height: 20px;
}

.lang_select_input{
	background-color: #2B7FEA; color: #FFF;
}

.popup_alert_suc{
    position: fixed; bottom: 100px; right: 0px; display: none; z-index: 1000;
    background-color: #0f8461; color: #FFF; font-size:14px;
}

.popup_alert_err{
    position: fixed; bottom: 100px; right: 0px; display: none; z-index: 1000; 
    background-color: #e50; color: #FFF; font-size:14px;
}

.disabled_input{
	background-color: #FFF !important; 
	height: 30px; border-radius: 4px;
	border: 1px solid #CCC;
}

.user-plus{
	padding: 15px 0px; color: #FFF;
}
.user-plus > a{
	color: #FFF;
}

.margin_top50{
	margin-top: 50px;
}

.margin_top100{
	margin-top: 100px;
}

.color_picker{
	height: 40px; width: 100%; cursor: pointer;
	border: 1px solid #999;
}



@media (max-width: 600px) 
{
	.mobile_table{
		display: block;
	}
	.web-table{
		display: none;
	}
	.popmsg-mobile{		
		margin: 20% 6% 3% 1%;
		border-radius: 7px; background-color: #FFF; min-height: 200px;
	}
	.bg-palet{
	    display:none;
	}
	
	.act_sum_mob{
	    margin-top: 90px;
	    margin-bottom: 150px;
	}

	.login_fixed_panel{
		background-color:#FFF; position: fixed; height: 100%; right: 0; top: 0; width: 100%; padding: 10px; 
	}
    .mb_hl_none{
        display: none;
    }
	.font_wgh_900{
	    font-size: 20px;
	}
}

@media screen and (max-width: 995px) 
{
	.bg-palet{
	    display:none;
	}
	
	.act_sum_mob{
	    padding-top: 100px;
	    margin-bottom: 150px;
	}
	
}

@media (min-width: 601px ) 
{
	.mobile_table{
		display: none;
	}
	.popmsg-mobile{
		margin: 10% 6% 3% 1%;
	}	

	
}

.xpack_inv{
    margin-top: 20px; padding-top: 0px; font-size: 14px; 
    border-top-left-radius: 20px; border-top-right-radius: 0px;  
    border-bottom-right-radius: 20px;  border-bottom-left-radius: 0px;
    background-color:#215; color:#FFF;
}

.regTxtBox{
	height: 45px; border: 1px solid #CCF !important; padding:10px; border-radius: 6px;
	width: 100%;
}

.span_bg{
	background-color: #1F2E86 !important;
	color:#fff !important;
}

.payment_method{
	border-radius: 7px; border: 1px solid #CCC; padding: 50px 100px;
}
.payment_method:hover{
	box-shadow: -1px 1px 5px 3px #CCC;
}

.paymentForm{
	 border-radius: 7px; margin-top: 10px; background-color: #FFF; border: 1px solid #CCC;
}

.profile-sum{
	background-color: #cec; border-radius: 5px; padding: 10px; 
}

.profile-sum-cont{
	padding: 5px;  margin-top:-20px; background-color: #0a8; color: #FFF; width: 50%;
}

.btn_form{
    padding: 8px 15px;
}


.popmsgContainer 
{
	min-width: 100%; background-color: rgba(0,0,0,.6); 
	position: fixed;  bottom: 0px; left:0px; height:100%;
	z-index: 1000; display: none;
}

.popmsgContainerDisplay 
{
	min-width: 100%; background-color: rgba(0,0,0,.6); 
	position: fixed;  bottom: 0px; left:0px; height:100%;
	z-index: 1000;
}


.scroll {   
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: #CCC rgba(0,0,0,0.3);
}

.scroll::-webkit-scrollbar {
    width: 8px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 8px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.popup_alert{
    position: fixed; bottom: 0px; right: 0; display: none; z-index: 10; width: 80%;
}

.camshow{
    height: 150px; width: 150px; 
    border-radius: 50%;
    display: none;
    position: absolute;
    left: 25%; right:25%;
    list-height: 10px;
}

.txt_transform{
    text-transform: uppercase;
    padding: 0px;

}

.btn{
	padding: 5px 15px !important;
}

::webkit-scrollbar{
	width: 10px;
}
::webkit-scrollbar-track{
	box-shadow: inset 0 0 5px grey;
	border-radius: 5px;
}
::webkit-scrollbar-thumb{
	background-color: #ccc;
	border-radius:5px;
}

a{
	text-decoration: none !important; 
}

.headtext_blue{
	color: #0B51AC;
}

.not_cont{
	position: relative;
}

.new_not{
	color:red; position: absolute;
	font-size: 10px !important;
	margin-left: -25px;
	margin-top: 0px;

}

.msg_not_icon{
	padding: 4px 0px 0px 8px; background-color: #CCC; border-radius: 50%; height: 30px; width: 30px;

}

.pk_num{
    font-size: 20px;
    line-height: 10px;
}

.time{
	color: #999; font-size: 11px;
}

.pack-container{	
	border-radius: 10px;
	border:1px solid #CCC;	
}

.pack-container > .panel-head{	
	color: #FFF;
	padding:15px; 
	background-color: #ffad46; 
	border-bottom: 1px solid #CCC;
}

.foot{
	padding: 20px; background-color: #fff;
	border-top: 1px solid #EEE;
}


.clear{clear:both}

.reg_form_scroll{
	overflow: hidden !important; overflow-y: auto !important; position: absolute; height: 100%;
}

/*************** verify form *****************************/
.verify_form_cont{
	position: relative; background-color: transparent;
}
.very_form_div{
	background-color:#FFF; border-radius:5px; padding: 15px;
}
.pad_T90{
	padding-top: 90px;
}

.dep_pop{
	min-width: 100%; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 20; display: none;
}
.pad_5p2p{
	padding: 5% 2%;
}

.pop_cont{
	margin: 3% 6% 3% 1%; border-radius: 7px; min-height: 200px;
}

.pop_img_h{
	height: 500px;
}

.btn_blue{
	background-color: #ffad46; color: #FFF;
}
.btn_blue:hover{
	color: #EEE;
}

/*************** message *****************/
.msg_cont_bg{
	background-color: #fff; 
}

.msg_col_pad{
	padding:0px;
}

.msg_nf{
	background-color: #fff; height: 600px; box-shadow: none;
}

.margin_btm_0{
	margin-bottom: 0px;
}

.nf_line{
	padding: 10px 0px; border-bottom: 1px dotted #CCC;
}
.msg_listing{
	overflow: hidden; padding-left: 10px !important;
}
.display_not{
	display: none;
}
.read_panel{
	padding-left: 2px; border-left: 1px solid #CCC;
}

.read_panel_h{
	overflow-y: auto; box-shadow: none; height: 664px; padding: 0px;
}

/******************************* paypal *****************************/
.paypal_box{
	background-color: #EEE; padding: 60px 10px;
}

/****************************** Profile ******************************/
.avatar_img{
	height: 100px; width: 100px; border-radius: 50%;
}

.pad_top10{
	margin-top: 10px;
}


/************************** stripe ************************************/
.panel-title {
    display: inline;

    font-weight: bold;
}
.display-table {
    display: table;
}
.display-tr {
    display: table-row;
}
.display-td {
    display: table-cell;
    vertical-align: middle;
    width: 61%;
}

.stripe_bg{
	background-color: #EEE; padding: 60px 10px;
}

/******************** act sumary file *********************/
.act_bg{
	background-color: #ffad46; min-height:400px;
}
.wd_pop{
	height: 20px; margin-top:-130px;
}
.wd_row_pad{
	padding: 5% 2%;
}

.border_btm{
	border-bottom: 1px solid #CCC;
}

.text_black{
	color: #666;
}
.text_grey{
	color: #777;
}
.text_grey2{
	color: #999;
}
.font_11{
	font-size: 11px;
}
.margin_n10{
	font-size: 11px; 
}
.padding_per_2_2{
	padding: 2% 2%;
}


/***************** Alert file **********************/
.pop_msg_col{
	border-radius: 7px; background-color: #FFF; min-height: 200px;
}
.pop_msg_contnt{
	margin-top: -30px; padding: 15px;
}

.pop_read_msg{
	background-color: #FFF; padding:0px; margin-top: 0px; border-radius:6px;
}

.pop_read_msg > span{
	float: right; margin-top: -40px; margin-right: 0px; z-index: 10; 
}

.pop_scroll_height{
	padding: 15px; height:540px;
}

/************************ confirm blade ****************************/

.pop_invest_cont{
	min-width: 100%; background-color: rgba(0,0,0,.6); 
	position: fixed; top: 0; left: 0; 
	bottom: 0; width: 100%; z-index: 1000; display: none;
}

.pop_invest_col{
	margin: 2.5% 6% 3% 1%; border-radius: 7px; background-color: #FFF; min-height: 200px;
}

.pop_form_min_max{
	color: #d42; border: 1px solid #eee; padding: 10px 2px;
}

/******************************** message blade *********************************/

.msg_alert_box{
	border-bottom: 1px solid #CCC;   padding: 2px 10px;
}
.msg_fa_envelope_read{
	color: #777; font-size: 12px; margin-top: 20px;
}

.msg_fa_evelope_unread{
	color: red; font-size: 12px; margin-top: 20px;
}


/************************ Mobile investment table **********************************/
.inv_alert_cont{
	margin-top: 10px; padding-top: 0px; font-size: 14px;
}

.inv_alert_top_row{
	background-color: #ffad46; 
	color: #FFF; 
	border-top-left-radius: 3px; 
	border-top-right-radius: 3px;
}

/************************  header **********************************/

.header_logo{
	height: 30px; width: 140px; z-index: 1;
}


/******************************** Admin css **************************/
.card_header_bg_blue{
	background-color: #ffad46;
}

.edit_pack_cont{
	min-width: 100%; background-color: rgba(0,0,0,.6); 
	position: fixed; top: 0; left: 0; bottom: 0; 
	width: 100%; z-index: 1000; display: none;
}

.edit_pack_col{
	margin: 3% 6% 3% 1%; border-radius: 7px; background-color: #FFF; min-height: 200px;
}

.edit_pack_pad_n30_5{
	margin-top: -30px; padding: 5px;
}

.inc_msg_alert_row{
	border-bottom: 1px solid #CCC;   padding: 2px;
}

.search_btn_append{
	border:none; padding: 0px 15px;
}

.admin_stat_legend{
	color: #FFF; background-color: #ffad46; padding: 5px;
}

.admin_login_row{
	width: 100%; background-color: #FFF;  margin: 0px;
}

.admin_login_title{
	margin-top: 25%; 
	color: #FFF; 
	position: absolute; 
	top: 0px; left: 0px; 
	width: 100%; height: 100%;
}

.admin_usr_img_size{
	height: 120px; width: 120px;
}

.admin_settings_input{
	height: 30px; border-radius: 1px; margin-bottom: 10px;
}

.admin_usr_inv_row{
	background-color: #ffad46; 
	color: #FFF;
	border-top-left-radius: 3px; 
	border-top-right-radius: 3px;
}

.chat_msg{
	position: absolute; width: 80%; top: 30px; left:10%; border-radius: 75px;
}
.chat_container{
	background-color: #F5F5F9; border: 1px solid #DDD;
	background-image: url('/img/chat_bg.jpg');
}
.chat_msg_container{
	height: 500px;  margin-top: 80px;
}

.chat_bubble{
	max-width: 80%;
	min-width: 45%;
	border-radius: 10px;
}

.msg_entry{
	height: 30px; font-size: 13px;
}
.with_100{
	min-width: 100%;
}

.avatar_chat{
	height: 30px; width: 30px;
}

/*========================== chat bubbles================================*/

.talk-bubble {
	margin: 10px;
  display: inline-block;
  position: relative;
	max-width: 70%;
	min-width: 40%;
	height: auto;
	background-color: lightyellow;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
	text-align: left;
  line-height: 1.5em;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

.qr_code_img{
	height: 200px; width: 200px;
}

.btn_grey{
	background-color: #999;
}

.width_100per{
	min-width: 100%; 
}

.img_card_temp{
	height: 120px; width: 200px;
}

.boldh{
    font-weight: bold !important;
}

.p_loading{
	min-width: 100%; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 1000; display: none;
}

/* ==========================================
   THEME TOGGLING & COLOR OVERRIDES (GOLD RESTYLING)
   ========================================== */

/* Global Blue to Gold Accent Replacement on User Dashboard */
.user-dashboard .text-primary,
.user-dashboard .text-info,
.user-dashboard a.text-primary,
.user-dashboard a.text-info,
.user-dashboard .nav-primary .nav-link,
.user-dashboard .dropdown-item.text-primary,
.user-dashboard .dropdown-item.text-info,
.user-dashboard .dropdown-toggle.text-primary,
.user-dashboard .dropdown-toggle.text-info,
.user-dashboard .text-primary *,
.user-dashboard .text-info * {
    color: #ffad46 !important;
}

.user-dashboard .bg-primary,
.user-dashboard .bg-info,
.user-dashboard .badge-primary,
.user-dashboard .badge-info {
    background-color: #ffad46 !important;
    color: #fff !important;
}

.user-dashboard .btn-primary,
.user-dashboard .btn-info,
.user-dashboard .btn-primary:focus,
.user-dashboard .btn-info:focus,
.user-dashboard .btn-primary:active,
.user-dashboard .btn-info:active,
.user-dashboard .btn-primary.active,
.user-dashboard .btn-info.active,
.user-dashboard .btn-primary:disabled,
.user-dashboard .btn-info:disabled {
    background-color: #ffad46 !important;
    border-color: #ffad46 !important;
    color: #fff !important;
}

.user-dashboard .btn-primary:hover,
.user-dashboard .btn-info:hover {
    background-color: #e0922f !important;
    border-color: #e0922f !important;
    color: #fff !important;
}

.user-dashboard .btn-outline-primary,
.user-dashboard .btn-outline-info {
    color: #ffad46 !important;
    border-color: #ffad46 !important;
    background-color: transparent !important;
}

.user-dashboard .btn-outline-primary:hover,
.user-dashboard .btn-outline-info:hover,
.user-dashboard .btn-outline-primary:focus,
.user-dashboard .btn-outline-info:focus,
.user-dashboard .btn-outline-primary:active,
.user-dashboard .btn-outline-info:active {
    background-color: #ffad46 !important;
    border-color: #ffad46 !important;
    color: #fff !important;
}

/* Sidebar active item highlight */
.user-dashboard .sidebar .nav.nav-primary > .nav-item.active > a,
.user-dashboard .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a {
    background: #ffad46 !important;
    background-color: #ffad46 !important;
    color: #fff !important;
}

.user-dashboard .sidebar .nav.nav-primary > .nav-item.active > a i,
.user-dashboard .sidebar .nav.nav-primary > .nav-item.active > a p,
.user-dashboard .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a i,
.user-dashboard .sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a p {
    color: #fff !important;
}

/* Header bell and flag highlights */
.user-dashboard .main-header .navbar-nav .nav-item a i,
.user-dashboard .main-header .navbar-nav .nav-item a span,
.user-dashboard .main-header .navbar-nav .nav-item a i.fa-circle.new_not {
    color: #ffad46 !important;
}

/* ==========================================
   GLOBAL DARK MODE & CUSTOMIZATION UPGRADES
   ========================================== */

/* Set dark mode as the default fallback variables */
:root {
    --dash-bg: #f9fbfd;
    --card-bg: #ffffff;
    --text-primary: #ffad46;
}

html[data-theme="dark"] {
    --dash-bg: #0d0d0d;
    --card-bg: #1e1e1e;
    --text-primary: #ffad46;
}

/* Force dark mode styles on elements when theme is dark */
html[data-theme="dark"] .user-dashboard {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* Page inner / wrapper backgrounds */
html[data-theme="dark"] .user-dashboard .main-panel,
html[data-theme="dark"] .user-dashboard .content,
html[data-theme="dark"] .user-dashboard .page-inner,
html[data-theme="dark"] .user-dashboard .page-inner.bg-white,
html[data-theme="dark"] .user-dashboard .panel-header.bg-white,
html[data-theme="dark"] .user-dashboard .page-inner.py-5.bg-white,
html[data-theme="dark"] .user-dashboard [style*="background-color: #FFF"],
html[data-theme="dark"] .user-dashboard [style*="background-color: #ffffff"],
html[data-theme="dark"] .user-dashboard [style*="background-color: white"],
html[data-theme="dark"] .user-dashboard [style*="background: #FFF"],
html[data-theme="dark"] .user-dashboard [style*="background: #ffffff"],
html[data-theme="dark"] .user-dashboard [style*="background: white"] {
    background-color: #0d0d0d !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
}

/* Card overrides in dark mode */
html[data-theme="dark"] .user-dashboard .card,
html[data-theme="dark"] .user-dashboard .card.shadow-sm,
html[data-theme="dark"] .user-dashboard .card.border,
html[data-theme="dark"] .user-dashboard .card.pb-5,
html[data-theme="dark"] .user-dashboard .card.no_box_shadow {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

/* Card headers in dark mode */
html[data-theme="dark"] .user-dashboard .card-header,
html[data-theme="dark"] .user-dashboard .card-header.bg-light {
    background-color: #151515 !important;
    background: #151515 !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

/* Card bodies in dark mode */
html[data-theme="dark"] .user-dashboard .card-body {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #ffffff !important;
}

/* Sidebar & logo headers */
html[data-theme="dark"] .user-dashboard .sidebar,
html[data-theme="dark"] .user-dashboard .sidebar.bg-white,
html[data-theme="dark"] .user-dashboard .sidebar_color_temp {
    background-color: #111111 !important;
    background: #111111 !important;
    border-right: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .user-dashboard .logo-header,
html[data-theme="dark"] .user-dashboard .logo-header.bg-white {
    background-color: #111111 !important;
    background: #111111 !important;
    border-bottom: 1px solid #2a2a2a !important;
    border-right: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .user-dashboard .main-header,
html[data-theme="dark"] .user-dashboard .navbar-header,
html[data-theme="dark"] .user-dashboard .navbar.navbar-header {
    background-color: #111111 !important;
    background: #111111 !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

/* Headings and Texts */
html[data-theme="dark"] .user-dashboard h1,
html[data-theme="dark"] .user-dashboard h2,
html[data-theme="dark"] .user-dashboard h3,
html[data-theme="dark"] .user-dashboard h4,
html[data-theme="dark"] .user-dashboard h5,
html[data-theme="dark"] .user-dashboard h6,
html[data-theme="dark"] .user-dashboard p,
html[data-theme="dark"] .user-dashboard label,
html[data-theme="dark"] .user-dashboard span:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.badge-success):not(.badge-warning):not(.badge-danger),
html[data-theme="dark"] .user-dashboard small:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning),
html[data-theme="dark"] .user-dashboard .text-dark,
html[data-theme="dark"] .user-dashboard .text_black,
html[data-theme="dark"] .user-dashboard .text-muted,
html[data-theme="dark"] .user-dashboard .text-grey,
html[data-theme="dark"] .user-dashboard .text_grey2 {
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard a:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.nav-link) {
    color: #ffad46 !important;
}

html[data-theme="dark"] .user-dashboard a:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.nav-link):hover {
    color: #e0922f !important;
}

/* Tables styling in dark mode */
html[data-theme="dark"] .user-dashboard table,
html[data-theme="dark"] .user-dashboard table.display,
html[data-theme="dark"] .user-dashboard table.table,
html[data-theme="dark"] .user-dashboard table th,
html[data-theme="dark"] .user-dashboard table td,
html[data-theme="dark"] .user-dashboard tbody,
html[data-theme="dark"] .user-dashboard thead,
html[data-theme="dark"] .user-dashboard tr {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

html[data-theme="dark"] .user-dashboard table.table-hover tbody tr:hover {
    background-color: #2a2a2a !important;
}

/* Pagination controls */
html[data-theme="dark"] .user-dashboard .page-link {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .page-item.active .page-link {
    background-color: #ffad46 !important;
    border-color: #ffad46 !important;
    color: #000000 !important;
}

html[data-theme="dark"] .user-dashboard .page-item.disabled .page-link {
    background-color: #151515 !important;
    border-color: #2a2a2a !important;
    color: #777777 !important;
}

/* Input elements & select tags */
html[data-theme="dark"] .user-dashboard select,
html[data-theme="dark"] .user-dashboard select option,
html[data-theme="dark"] .user-dashboard .form-control,
html[data-theme="dark"] .user-dashboard select.form-control,
html[data-theme="dark"] .user-dashboard input.form-control,
html[data-theme="dark"] .user-dashboard textarea.form-control,
html[data-theme="dark"] .user-dashboard .input-group-text,
html[data-theme="dark"] .user-dashboard button.form-control {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border: 1px solid #ffad46 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .form-control:focus,
html[data-theme="dark"] .user-dashboard select.form-control:focus,
html[data-theme="dark"] .user-dashboard input.form-control:focus,
html[data-theme="dark"] .user-dashboard textarea.form-control:focus {
    border-color: #e0922f !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 173, 70, 0.25) !important;
}

/* Custom Dropdown Overlays (e.g. AlpineJS filter dropdown items) */
html[data-theme="dark"] .user-dashboard .position-absolute.bg-white,
html[data-theme="dark"] .user-dashboard .position-absolute.w-100.bg-white,
html[data-theme="dark"] .user-dashboard .position-absolute.bg-white *,
html[data-theme="dark"] .user-dashboard .position-absolute.w-100.bg-white * {
    background-color: #1e1e1e !important;
    border-color: #ffad46 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .position-absolute.bg-white div:hover,
html[data-theme="dark"] .user-dashboard .position-absolute.w-100.bg-white div:hover {
    background-color: #ffad46 !important;
    color: #000000 !important;
}

/* Referral Link copy box */
html[data-theme="dark"] .user-dashboard .ref_link_copy {
    background-color: #1e1e1e !important;
    border: 1px solid #ffad46 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .ref_link_copy #reflnk {
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .ref_link_copy .float-right {
    background-color: #ffad46 !important;
    color: #000000 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}

html[data-theme="dark"] .user-dashboard .ref_link_copy .float-right i {
    color: #000000 !important;
}

/* Premium tips cards nested backgrounds (predictions boxes) */
html[data-theme="dark"] .user-dashboard .card .bg-light,
html[data-theme="dark"] .user-dashboard .card .bg-light * {
    background-color: #151515 !important;
    background: #151515 !important;
    color: #ffffff !important;
}

/* Modals */
html[data-theme="dark"] .user-dashboard .modal-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
}

html[data-theme="dark"] .user-dashboard .pop_up_modal_side_bg {
    background-color: #151515 !important;
    border-right: 1px solid #2a2a2a !important;
}

/* Dropdown Menu navbar list items */
html[data-theme="dark"] .user-dashboard .dropdown-menu {
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
}

html[data-theme="dark"] .user-dashboard .dropdown-item {
    color: #ffffff !important;
}

html[data-theme="dark"] .user-dashboard .dropdown-item:hover,
html[data-theme="dark"] .user-dashboard .dropdown-item:focus {
    background-color: #2b2b2b !important;
    color: #ffad46 !important;
}

/* Alert notifications and instructions info panels */
html[data-theme="dark"] .user-dashboard .alert-info,
html[data-theme="dark"] .user-dashboard .bg-light.p-3.rounded.border {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Default border rules */
html[data-theme="dark"] .user-dashboard *:not(select):not(.form-control):not(.ref_link_copy) {
    border-color: #2a2a2a !important;
}

/* ==========================================
   ADDITIONAL DARK THEME OVERRIDES (COMPONENTS & OVERLAYS)
   ========================================== */

/* General bg-white overrides for components/containers in dark mode */
html[data-theme="dark"] .user-dashboard .bg-white:not(.page-inner):not(.panel-header) {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #ffffff !important;
}

/* Override inline backgrounds and styling in dark mode */
html[data-theme="dark"] .user-dashboard div[style*="background-color: #ffffff"],
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fafbfc"],
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fcf8e3"],
html[data-theme="dark"] .user-dashboard div[style*="background-color: white"],
html[data-theme="dark"] .user-dashboard button[style*="background: #fff"],
html[data-theme="dark"] .user-dashboard button[style*="background: white"],
html[data-theme="dark"] .user-dashboard button[style*="background-color: #fff"],
html[data-theme="dark"] .user-dashboard button[style*="background-color: white"] {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #ffad46 !important;
}

/* Text overrides in elements with overridden inline backgrounds */
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fcf8e3"] *,
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fcf8e3"] h2,
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fcf8e3"] h3,
html[data-theme="dark"] .user-dashboard div[style*="background-color: #fcf8e3"] p {
    color: #ffffff !important;
}

/* Datepicker today border highlight in dark mode */
html[data-theme="dark"] .user-dashboard button[style*="border: 1px solid #ffad46;"],
html[data-theme="dark"] .user-dashboard button[style*="border: 1px solid #1572e8;"] {
    border: 1px solid #ffad46 !important;
}

/* Datepicker calendar button hovers and selections */
html[data-theme="dark"] .user-dashboard .position-absolute button.btn-link.text-dark:hover {
    background-color: #ffad46 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Custom Dropdown Overlays (e.g. AlpineJS filter dropdown items hover) */
html[data-theme="dark"] .user-dashboard .position-absolute div.cursor-pointer:hover {
    background-color: #ffad46 !important;
    color: #000000 !important;
}

/* ==========================================
   BALANCE CARDS & RECENT ACTIVITIES POLISH
   ========================================== */

/* Balance Cards Accent & Padding */
.user-dashboard .balance-card {
    border-left: 4px solid #ffad46 !important;
    border-top: 1px solid #ebedf2 !important;
    border-right: 1px solid #ebedf2 !important;
    border-bottom: 1px solid #ebedf2 !important;
}

html[data-theme="dark"] .user-dashboard .balance-card {
    border-left: 4px solid #ffad46 !important;
    border-top: 1px solid #2a2a2a !important;
    border-right: 1px solid #2a2a2a !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.user-dashboard .balance-card .card-header {
    padding: 12px 16px !important;
}

.user-dashboard .balance-card .card-body {
    padding: 12px 16px !important;
}

/* Recent Activities Card Dark Mode Overrides (Remove White Borders) */
html[data-theme="dark"] .user-dashboard .row-card-no-pd {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .user-dashboard .row-card-no-pd .card {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .user-dashboard .row-card-no-pd .card-header {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border-bottom: 1px solid #2a2a2a !important;
}

html[data-theme="dark"] .user-dashboard .row-card-no-pd [class*=col] .card::before {
    background: #2a2a2a !important;
}

/* ==========================================
   AUTH PAGES REDESIGN (LOGIN & REGISTRATION)
   ========================================== */

/* Full page background and reset */
.auth-page {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    min-height: 100vh !important;
}

/* Flex centering container */
.auth-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    background-color: #0d0d0d !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.auth-container {
    width: 100% !important;
    max-width: 460px !important;
}

/* Standalone logo above card */
.auth-logo {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.auth-logo img {
    display: inline-block !important;
    max-width: 160px !important;
    height: auto !important;
}

/* Redesigned Form Card */
.auth-card {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border: 2px solid #ffad46 !important;
    border-radius: 12px !important;
    padding: 36px 32px !important;
    box-shadow: 0 0 24px rgba(255, 173, 70, 0.15) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
}

/* Card Titles */
.auth-title {
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 24px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.auth-subtitle {
    color: #888888 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* Labels */
.auth-label {
    color: #cccccc !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

/* Text Inputs & Dropdowns */
.auth-input {
    width: 100% !important;
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #ffad46 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.auth-input::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.auth-input:focus {
    border: 1px solid #ffad46 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 173, 70, 0.15) !important;
}

/* Select Dropdowns */
.auth-select {
    width: 100% !important;
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #ffad46 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffad46' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    padding-right: 40px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.auth-select:focus {
    border: 1px solid #ffad46 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 173, 70, 0.15) !important;
}

.auth-select option {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* Invalid / Error States */
.is-invalid-input {
    border-color: #ef4444 !important;
}

.is-invalid-input:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.auth-error-msg {
    color: #ef4444 !important;
    font-size: 12px !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Checkbox Styling */
.auth-checkbox-wrapper {
    display: flex !important;
    align-items: center !important;
}

.auth-checkbox {
    accent-color: #ffad46 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.auth-checkbox-label {
    color: #cccccc !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    display: inline-block !important;
}

/* Submit Button */
.auth-submit-btn {
    width: 100% !important;
    background-color: #ffad46 !important;
    background: #ffad46 !important;
    color: #000000 !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    padding: 12px !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.auth-submit-btn:hover {
    background-color: #e09a35 !important;
    background: #e09a35 !important;
    color: #000000 !important;
}

/* Links and footers */
.auth-link {
    color: #ffad46 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.auth-link:hover {
    color: #e09a35 !important;
    text-decoration: underline !important;
}

.auth-footer-text {
    color: #888888 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .auth-wrapper {
        padding: 15px !important;
    }
    .auth-container {
        width: 90% !important;
    }
    .auth-card {
        padding: 24px 20px !important;
    }
    .auth-logo img {
        max-width: 130px !important;
    }
}

/* Custom mobile component defaults (hidden on desktop) */
.quicknav, .bottom-nav, .mobile-refer-section, .mobile-only-actions, .sub-banner, .mobile-only-topbar-icons, .mobile-only-eye, .mobile-only-label, .mobile-activities-section {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TOP TIER WAGERS — MOBILE REDESIGN v3
   Source: high wagers-dashboard(1).html design
   Mapped to: real blade class names from index.blade.php,
              overview.blade.php, packages.blade.php, header.blade.php
   Rule: ALL changes inside @media (max-width: 1023px) ONLY.
         Desktop styles are completely untouched.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* ── DESIGN TOKENS ─────────────────────────────────────────────── */
  :root {
    --ttw-bg:         #0C0C0C;
    --ttw-card:       #161616;
    --ttw-card2:      #1c1c1c;
    --ttw-input:      #222222;
    --ttw-border:     #2a2a2a;
    --ttw-border-sub: #1e1e1e;
    --ttw-amber:      #F5A623;
    --ttw-amber-pale: rgba(245,166,35,0.12);
    --ttw-amber-ring: rgba(245,166,35,0.25);
    --ttw-green:      #27b87a;
    --ttw-red:        #E24B4A;
    --ttw-t1:         #f0f0f0;
    --ttw-t2:         #999999;
    --ttw-t3:         #555555;
  }

  html[data-theme="light"] {
    --ttw-bg:         #f5f5f5;
    --ttw-card:       #ffffff;
    --ttw-card2:      #ebebeb;
    --ttw-input:      #e0e0e0;
    --ttw-border:     #d0d0d0;
    --ttw-border-sub: #e0e0e0;
    --ttw-t1:         #111111;
    --ttw-t2:         #555555;
    --ttw-t3:         #888888;
  }

  /* ── 1. PAGE & WRAPPER BACKGROUNDS ─────────────────────────────── */
  body,
  .wrapper,
  .main-panel,
  .content {
    background-color: var(--ttw-bg) !important;
    font-family: 'Inter', sans-serif !important;
  }
  .page-inner {
    background-color: var(--ttw-bg) !important;
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .section-link {
    font-size: 11px !important;
    color: var(--ttw-amber) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  /* Add bottom padding so content clears the fixed bottom nav */
  .main-panel,
  .content,
  .page-inner {
    padding-bottom: 90px !important;
  }
  /* Remove atlantis negative margin that crushes content */
  .page-inner.mt--5 { margin-top: 0 !important; }

  /* ── 2. HIDE DESKTOP-ONLY ELEMENTS ON MOBILE ───────────────────── */
  /* Desktop sidebar */
  .sidebar { display: none !important; }
  /* Desktop navbar below logo bar */
  .navbar.navbar-header { display: none !important; }
  /* Desktop card versions of sub & refer */
  .desktop-sub-row,
  .desktop-refer-row { display: none !important; }
  /* Desktop withdraw link inside wallet card */
  .desktop-withdraw-link { display: none !important; }
  /* Hamburger & ellipsis — replaced by icon buttons */
  #mlogo_toggle,
  .topbar-toggler { display: none !important; }

  /* ── 3. TOP LOGO BAR ────────────────────────────────────────────── */
  .main-header { box-shadow: none !important; }

  .logo-header {
    background-color: var(--ttw-bg) !important;
    border-bottom: 0.5px solid var(--ttw-border-sub) !important;
    box-shadow: none !important;
    height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  /* Logo text */
  #dash_logo {
    position: static !important;
    transform: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-amber) !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    order: 0 !important;
    flex: 1 !important;
    text-align: left !important;
  }

  /* Mobile icon buttons (moon + bell) */
  .mobile-only-topbar-icons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    order: 1 !important;
  }
  .mobile-only-topbar-icons .icon-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .mobile-only-topbar-icons .icon-btn i {
    font-size: 17px !important;
    color: var(--ttw-t2) !important;
  }
  .notif-wrap { position: relative !important; }
  .notif-dot {
    width: 7px !important;
    height: 7px !important;
    background: var(--ttw-amber) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    border: 1.5px solid var(--ttw-bg) !important;
    pointer-events: none !important;
  }

  /* ── 4. GREETING ────────────────────────────────────────────────── */
  /* The main_bar includes a welcome block — target common selectors */
  .page-inner .card-head-row h4,
  .page-inner > .row:first-of-type h4,
  .page-inner .welcome-text {
    font-size: 13px !important;
    color: var(--ttw-t2) !important;
    padding: 14px 16px 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .panel-header {
    background-color: var(--ttw-bg) !important;
    background: var(--ttw-bg) !important;
    border: none !important;
  }
  .panel-header .page-inner {
    background-color: var(--ttw-bg) !important;
    background: var(--ttw-bg) !important;
    border: none !important;
    padding: 14px 16px 4px !important;
  }
  .panel-header h6.text-grey {
    display: inline-block !important;
    font-size: 13px !important;
    color: var(--ttw-t2) !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }
  .panel-header h4.text-primary {
    display: inline-block !important;
    font-size: 13px !important;
    color: var(--ttw-t1) !important;
    margin: 0 0 0 4px !important;
    font-weight: 600 !important;
  }
  .panel-header h4.text-primary::after {
    content: " 👋" !important;
  }
  .panel-header p.text-grey {
    font-size: 11px !important;
    color: var(--ttw-t3) !important;
    margin: 4px 0 0 0 !important;
  }
  .panel-header .col-xs {
    display: none !important;
  }

  /* ── 5. OVERVIEW CARDS ROW LAYOUT ──────────────────────────────── */
  /* The 3 cols (Wallet / Winning / Referral) inside .row.mt--2      */
  /* ── 5. OVERVIEW CARDS ROW LAYOUT ──────────────────────────────── */
  .overview-row {
    display: contents !important;
  }
  .wallet-wrapper {
    order: 1 !important;
    margin: 0 16px !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  .summary-wrapper {
    order: 3 !important;
    margin: 0 16px !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  .summary-inner-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .winnings-wrapper,
  .referral-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  /* ── 6. WALLET CARD ─────────────────────────────────────────────── */
  .wallet-wrapper .balance-card {
    background: var(--ttw-card) !important;
    border-radius: 20px !important;
    border: 0.5px solid var(--ttw-border) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* Subtle amber glow top-right */
  .wallet-wrapper .balance-card::after {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
  }
  /* Kill the light card-header strip */
  .wallet-wrapper .balance-card .card-header {
    display: none !important;
  }
  .wallet-wrapper .balance-card .card-body {
    padding: 18px !important;
    background: transparent !important;
  }
  /* "Wallet Balance" label */
  .mobile-only-label {
    display: block !important;
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
  }
  /* Balance row: amount + eye button */
  .bal-row-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
  }
  #balAmountMobile {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--ttw-t1) !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
    transition: filter 0.2s !important;
  }
  #balAmountMobile.hidden {
    filter: blur(8px) !important;
  }
  .mobile-only-eye {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--ttw-input) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .mobile-only-eye i {
    font-size: 14px !important;
    color: var(--ttw-t2) !important;
  }
  /* Deposit + Withdraw button row */
  .mobile-only-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .bal-btn {
    flex: 1 !important;
    padding: 11px 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
  }
  .btn-deposit,
  .btn-deposit i,
  .btn-deposit span {
    background: var(--ttw-amber) !important;
    color: #f5f5f5 !important;
    border: none !important;
  }
  .btn-deposit:hover,
  .btn-deposit:hover i,
  .btn-deposit:hover span { opacity: 0.88 !important; color: #000000 !important; }
  .btn-withdraw {
    background: var(--ttw-input) !important;
    color: var(--ttw-t2) !important;
    border: 0.5px solid var(--ttw-border) !important;
  }

  /* ── 7. WINNING & REFERRAL CARDS ────────────────────────────────── */
  .winnings-wrapper .balance-card,
  .referral-wrapper .balance-card {
    background: var(--ttw-card) !important;
    border-radius: 14px !important;
    border: 0.5px solid var(--ttw-border) !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  /* Header: becomes icon + label row */
  .winnings-wrapper .balance-card .card-header,
  .referral-wrapper .balance-card .card-header {
    background: transparent !important;
    border: none !important;
    padding: 12px 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .winnings-wrapper .balance-card .card-header .card-title i,
  .referral-wrapper .balance-card .card-header .card-title i,
  .winnings-wrapper .card-header i,
  .referral-wrapper .card-header i,
  .winnings-wrapper i.fa-trophy,
  .referral-wrapper i.fa-handshake {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    background: var(--ttw-amber-pale) !important;
    background-color: var(--ttw-amber-pale) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: var(--ttw-amber) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .winnings-wrapper .card-header h5,
  .referral-wrapper .card-header h5 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  /* Body */
  .winnings-wrapper .balance-card .card-body,
  .referral-wrapper .balance-card .card-body {
    padding: 6px 14px 14px !important;
    background: transparent !important;
  }
  .winnings-wrapper .card-body h2,
  .referral-wrapper .card-body h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ttw-t1) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.3px !important;
  }
  .winnings-wrapper .card-body .text-muted,
  .referral-wrapper .card-body .text-muted {
    font-size: 9px !important;
    color: var(--ttw-green) !important;
    display: block !important;
    margin: 0 !important;
  }
  /* Referral "withdraw fund" link */
  .referral-wrapper .card-body a.text-success {
    font-size: 9px !important;
    color: var(--ttw-green) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  /* ── 8. OVERALL STATISTICS CARD ─────────────────────────────────── */
  .overall-stats-wrapper {
    order: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .stats-header-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .stats-header-row {
    padding: 4px 16px 10px !important;
    margin: 0 !important;
  }
  .stats-header-row h5 {
    font-size: 11px !important;
    color: var(--ttw-t3) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    margin: 0 !important;
  }
  .stats-header-row h5 i {
    display: none !important;
  }
  .stats-cards-col {
    padding: 0 16px !important;
    margin: 0 !important;
  }
  .stats-row {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-stat-col-wrap {
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .mobile-stat-col {
    background: var(--ttw-card) !important;
    border-radius: var(--radius-md) !important;
    border: 0.5px solid var(--ttw-border) !important;
    padding: 14px 8px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .mobile-stat-col .font-weight-bold {
    font-size: 10px !important;
    color: var(--ttw-t2) !important;
    font-weight: 400 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  /* The circles.js generated elements — tint the text */
  .mobile-stat-col [id^="circles-"] {
    display: flex !important;
    justify-content: center !important;
  }
  /* Overrides for Circles.js svg generated by Atlantis */
  .mobile-stat-col .circles-wrp svg path:first-of-type,
  .mobile-stat-col .circles-wrp svg circle:first-of-type {
    stroke: var(--ttw-input) !important;
  }
  #circles-1 .circles-wrp svg path:last-of-type,
  #circles-1 .circles-wrp svg circle:last-of-type {
    stroke: var(--ttw-amber) !important;
  }
  #circles-2 .circles-wrp svg path:last-of-type,
  #circles-2 .circles-wrp svg circle:last-of-type {
    stroke: var(--ttw-green) !important;
  }
  #circles-3 .circles-wrp svg path:last-of-type,
  #circles-3 .circles-wrp svg circle:last-of-type {
    stroke: var(--ttw-red) !important;
  }
  .mobile-stat-col .circles-text {
    color: var(--ttw-t1) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
  }

  /* ── 9. QUICK NAV GRID ──────────────────────────────────────────── */
  .quicknav {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 16px !important;
  }
  .quicknav .qn-item {
    background: var(--ttw-card) !important;
    border: 0.5px solid var(--ttw-border) !important;
    border-radius: 14px !important;
    padding: 12px 4px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
  }
  .quicknav .qn-item:active {
    transform: scale(0.96) !important;
  }
  .quicknav .qn-item .qn-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: var(--ttw-input) !important;
    border: 0.5px solid var(--ttw-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .quicknav .qn-item .qn-icon i {
    font-size: 15px !important;
    color: var(--ttw-amber) !important;
    margin: 0 !important;
  }
  .quicknav .qn-item .qn-label {
    font-size: 9px !important;
    color: var(--ttw-t2) !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  /* ── 10. SUBSCRIPTION BANNER (mobile version) ───────────────────── */
  .sub-banner {
    order: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 16px !important;
    background: linear-gradient(135deg, #1a1500 0%, #1e1a07 100%) !important;
    border-radius: 14px !important;
    border: 0.5px solid rgba(245,166,35,0.3) !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .sub-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .sub-crown {
    width: 36px !important;
    height: 36px !important;
    background: var(--ttw-amber-pale) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .sub-crown i {
    font-size: 17px !important;
    color: var(--ttw-amber) !important;
  }
  .sub-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-amber) !important;
  }
  .sub-meta {
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    margin-top: 2px !important;
  }
  .sub-badge {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--ttw-green) !important;
    background: rgba(39,184,122,0.12) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 0.5px solid rgba(39,184,122,0.3) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── 11. AVAILABLE LEAGUES ──────────────────────────────────────── */
  .leagues-wrapper {
    order: 7 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .leagues-header-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .leagues-header-row {
    padding: 4px 16px 10px !important;
    margin: 0 !important;
  }
  .leagues-header-row h5 {
    font-size: 11px !important;
    color: var(--ttw-t3) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    margin: 0 !important;
  }
  .leagues-cards-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .leagues-list-container {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: transparent !important;
  }

  /* The leagues list container from packages.blade.php */
  .pb-4.pl-4.leagues-list-container,
  .leagues-list-container {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: transparent !important;
  }

  /* Each league row — .row.border_btm.p-2.league-item-row */
  .league-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--ttw-card) !important;
    border-radius: 14px !important;
    border: 0.5px solid var(--ttw-border) !important;
    padding: 14px !important;
    margin: 0 !important;
    transition: background 0.15s !important;
  }
  .league-item-row:hover {
    background: var(--ttw-card2) !important;
  }
  /* Remove the Bootstrap border-bottom divider line */
  .league-item-row.border_btm {
    border-bottom: 0.5px solid var(--ttw-border) !important;
  }

  /* League icon col — .col-xs.league-icon-wrap */
  .league-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: var(--ttw-amber-pale) !important;
    border: 0.5px solid rgba(245,166,35,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .league-icon-wrap i {
    font-size: 18px !important;
    color: var(--ttw-amber) !important;
    margin: 0 !important;
  }

  /* League info col — .col.pt-4.league-info-block */
  .league-info-block {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }
  .league-info-block h5 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-t1) !important;
    margin: 0 0 3px 0 !important;
  }
  /* Returns & period line */
  .league-info-block p {
    font-size: 10px !important;
    color: var(--ttw-green) !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }
  /* Min/Max span inside p */
  .league-info-block p .pl-3 {
    display: block !important;
    padding-left: 0 !important;
    margin-top: 1px !important;
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
  }

  /* Bet button col — .col-xs.league-bet-btn-col */
  .league-bet-btn-col {
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  /* The actual bet button — .btn.btn-info.league-bet-btn */
  .league-bet-btn {
    background: var(--ttw-amber) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    /* Override Bootstrap btn-info colours */
    box-shadow: none !important;
  }
  .league-bet-btn:hover,
  .league-bet-btn:focus,
  .league-bet-btn:active {
    background: var(--ttw-amber) !important;
    color: #000 !important;
    opacity: 0.88 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* ── 12. MOBILE REFER & EARN ────────────────────────────────────── */
  .mobile-refer-section {
    order: 6 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .mobile-refer-section .section-head {
    display: flex !important;
    align-items: center !important;
    padding: 4px 16px 10px !important;
  }
  .mobile-refer-section .section-title {
    font-size: 11px !important;
    color: var(--ttw-t3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
  }
  /* refer-card, refer-top, refer-icon-wrap etc. already in blade */
  .refer-card {
    margin: 0 16px !important;
    background: var(--ttw-card) !important;
    border-radius: 18px !important;
    border: 0.5px solid var(--ttw-border) !important;
    padding: 16px !important;
  }
  .refer-top {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 14px !important;
  }
  .refer-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--ttw-amber-pale) !important;
    border: 0.5px solid var(--ttw-amber-ring) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .refer-icon-wrap i {
    font-size: 18px !important;
    color: var(--ttw-amber) !important;
  }
  .refer-heading {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-t1) !important;
    margin-bottom: 3px !important;
  }
  .refer-sub {
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    line-height: 1.5 !important;
  }
  .refer-stats {
    display: flex !important;
    align-items: center !important;
    background: var(--ttw-input) !important;
    border-radius: 8px !important;
    border: 0.5px solid var(--ttw-border) !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
  }
  .refer-stat {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .refer-stat-val {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ttw-amber) !important;
  }
  .refer-stat-lbl {
    font-size: 9px !important;
    color: var(--ttw-t3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
  }
  .refer-stat-divider {
    width: 0.5px !important;
    height: 32px !important;
    background: var(--ttw-border) !important;
    flex-shrink: 0 !important;
  }
  .refer-link-label {
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    margin-bottom: 8px !important;
    display: block !important;
  }
  .refer-link-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .refer-link-box {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ttw-input) !important;
    border: 0.5px solid var(--ttw-border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    color: var(--ttw-t2) !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  .refer-link-box i {
    font-size: 14px !important;
    color: var(--ttw-amber) !important;
    flex-shrink: 0 !important;
  }
  .refer-link-box span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-width: 0 !important;
  }
  .refer-copy-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: var(--ttw-amber) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
  }
  .refer-copy-btn.copied {
    background: var(--ttw-green) !important;
    color: #fff !important;
  }
  .refer-copy-btn i { font-size: 14px !important; }

  /* ── 13. RECENT ACTIVITIES ──────────────────────────────────────── */
  .desktop-activities-section {
    display: none !important;
  }
  .mobile-activities-section {
    display: block !important;
    order: 8 !important;
  }
  .activities-wrapper {
    order: 8 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
  }
  .activities-header-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .activities-header-row {
    padding: 4px 16px 10px !important;
    margin: 0 !important;
  }
  .activities-header-row h5 {
    font-size: 11px !important;
    color: var(--ttw-t3) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    margin: 0 !important;
  }
  .activities-cards-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .activities-list-container {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Each activity row — .row.border_btm.p-2.activity-row */
  html[data-theme="dark"] .user-dashboard .activities-wrapper.row-card-no-pd .activity-row.card,
  html[data-theme="light"] .user-dashboard .activities-wrapper.row-card-no-pd .activity-row.card,
  .activity-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--ttw-card) !important;
    background-color: var(--ttw-card) !important;
    border-radius: 14px !important;
    border: 0.5px solid var(--ttw-border) !important;
    padding: 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.12s !important;
  }
  html[data-theme="dark"] .user-dashboard .activities-wrapper.row-card-no-pd .activity-row.card:hover,
  html[data-theme="light"] .user-dashboard .activities-wrapper.row-card-no-pd .activity-row.card:hover,
  .activity-row:hover {
    background: var(--ttw-card2) !important;
    background-color: var(--ttw-card2) !important;
  }
  .activity-row.border_btm { border-bottom: none !important; }

  /* Icon col — .col-xs */
  .activity-row .activity-icon-col {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .activity-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  /* Colors for different actions */
  .activity-icon-wrap.invest,
  .activity-icon-wrap.deposit,
  .activity-icon-wrap.login,
  .activity-icon-wrap.profile_update {
    background: var(--ttw-amber-pale) !important;
    border: 0.5px solid rgba(245,166,35,0.2) !important;
  }
  .activity-icon-wrap.invest i,
  .activity-icon-wrap.deposit i,
  .activity-icon-wrap.login i,
  .activity-icon-wrap.profile_update i {
    font-size: 16px !important;
    color: var(--ttw-amber) !important;
  }
  .activity-icon-wrap.wallet_wd {
    background: rgba(39,184,122,0.12) !important;
    border: 0.5px solid rgba(39,184,122,0.2) !important;
  }
  .activity-icon-wrap.wallet_wd i {
    font-size: 16px !important;
    color: var(--ttw-green) !important;
  }

  /* Text col — .col.pt-4 */
  .activity-row .activity-text-col {
    flex: 1 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .activity-row .activity-text-col h5 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-t1) !important;
    margin: 0 !important;
  }
  .activity-row .activity-text-col p {
    font-size: 10px !important;
    color: var(--ttw-t3) !important;
    margin: 4px 0 0 0 !important;
  }
  /* Amount col — .col-xs.float-right */
  .activity-row .activity-amount-col {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .activity-row .textd-success {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-amber) !important;
    white-space: nowrap !important;
  }
  .activity-row .textd-danger {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ttw-green) !important;
    white-space: nowrap !important;
  }
  /* Generic span (invest type) */
  .activity-row span:not(.textd-success):not(.textd-danger) b {
    font-size: 13px !important;
    color: var(--ttw-amber) !important;
  }

  /* ── 14. BOTTOM NAVIGATION BAR ──────────────────────────────────── */
  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    background: var(--ttw-bg) !important;
    border-top: 0.5px solid var(--ttw-border-sub) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 10px 10px 18px !important;
    height: auto !important;
    box-shadow: none !important;
  }
  .bottom-nav .bnav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 64px !important;
    padding: 4px 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 8px !important;
  }
  .bottom-nav .bnav-item i {
    font-size: 22px !important;
    color: var(--ttw-t3) !important;
  }
  .bottom-nav .bnav-item .bnav-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--ttw-amber) !important;
    display: none !important;
  }
  .bottom-nav .bnav-item .bnav-lbl {
    font-size: 9px !important;
    color: var(--ttw-t3) !important;
  }
  .bottom-nav .bnav-item.active i { color: var(--ttw-amber) !important; }
  .bottom-nav .bnav-item.active .bnav-dot { display: block !important; }
  .bottom-nav .bnav-item.active .bnav-lbl { color: var(--ttw-amber) !important; }

  /* ── 15. GLOBAL COLOUR OVERRIDES ────────────────────────────────── */
  /* Prevent Bootstrap's white card bg bleeding through */
  .card { box-shadow: none !important; }
  .card.bg-light,
  .card-header.bg-light { background-color: transparent !important; }
  .text-dark   { color: var(--ttw-t1) !important; }
  .text-primary { color: var(--ttw-amber) !important; }
  .text-muted  { color: var(--ttw-t3) !important; }
  .text-success { color: var(--ttw-green) !important; }
  /* Remove Bootstrap row negative margins inside our cards */
  .league-item-row.row,
  .activity-row.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── 16. GLOBAL PAGE CARD MARGINS ──────────────────────────────── */
  /* 15px side breathing room on every card on mobile               */
  .card {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  /* Exception: overview balance-cards keep zero side margin */
  .wallet-wrapper .balance-card,
  .winnings-wrapper .balance-card,
  .referral-wrapper .balance-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── 17. CHATBOT WIDGET POSITION OVERRIDE ────────────────────────── */
  /* Push third-party chatbot icons/dialogs up so they don't cover the bottom mobile nav */
  iframe[title="chat widget"],
  iframe[title*="chat"],
  iframe[title*="Chat"],
  iframe[name="chatinline"],
  iframe[src*="tawk.to"],
  iframe[class*="tawk-"],
  div[class*="tawk-"],
  div.tawk-chat-widget,
  div#tawkchat-iframe-container,
  .tawk-min-container,
  .tawk-button,
  #tawkchat-iframe-container,
  #tidio-chat-iframe,
  #smartsupp-widget-container,
  #chat-widget-container,
  .fb_dialog,
  #dummy-chat-widget-container {
      bottom: 130px !important;
  }
}

/* Desktop version overall statistics spacing */
@media (min-width: 1024px) {
  .overall-stats-wrapper {
    margin-bottom: 40px !important;
  }
  .overall-stats-wrapper .mobile-stat-col {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ── 18. PROGRESSIVE WEB APP (PWA) INSTALL PROMPT ────────────────── */
.pwa-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    padding: 20px !important;
    pointer-events: none !important;
}
.pwa-modal-backdrop.show {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pwa-modal-card {
    background: #141b25 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    position: relative !important;
    animation: pwaSlideUp 0.3s ease-out !important;
}

@keyframes pwaSlideUp {
    from {
        transform: translateY(30px) !important;
        opacity: 0 !important;
    }
    to {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

.pwa-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}
.pwa-modal-title-wrap {
    display: flex !important;
    align-items: center !important;
}
.pwa-header-logo {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    margin-right: 12px !important;
    object-fit: cover !important;
}
.pwa-header-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
}
.pwa-close-x {
    background: none !important;
    border: none !important;
    color: #8a99ad !important;
    font-size: 26px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
}
.pwa-close-x:hover {
    color: #ffffff !important;
}

.pwa-tabs-wrapper {
    margin-bottom: 20px !important;
}
.pwa-tabs {
    background: #0f141c !important;
    border-radius: 12px !important;
    padding: 4px !important;
    display: flex !important;
}
.pwa-tab-btn {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    color: #8a99ad !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
}
.pwa-tab-btn.active {
    background: #252f41 !important;
    color: #ffffff !important;
}

.pwa-image-container {
    position: relative !important;
    background: #0f141c !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.pwa-step-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 0.85 !important;
}
.pwa-step-badge {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #0c0c0c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.pwa-step-list {
    padding-left: 20px !important;
    margin: 0 0 24px 0 !important;
}
.pwa-step-list li {
    font-size: 13.5px !important;
    color: #b0c0d6 !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    font-family: 'Inter', sans-serif !important;
}
.pwa-step-list li strong {
    color: #ffffff !important;
}

.pwa-modal-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.pwa-action-btn {
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    text-align: center !important;
}
.pwa-close-btn {
    background: #252f41 !important;
    color: #ffffff !important;
}
.pwa-close-btn:hover {
    background: #2f3c53 !important;
    color: #ffffff !important;
}
.pwa-install-native-btn {
    background: var(--ttw-amber, #ffad46) !important;
    color: #000000 !important;
}
.pwa-install-native-btn:hover {
    background: #e09a35 !important;
    color: #000000 !important;
}