.nav-link-nav{
	cursor: pointer;
}
.w-65{
	width: 65%;
}

.section-title{
	position: absolute;
	top: -25px;
}

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

.ml_30px_u{
    margin-left: -10px;
/*    margin-right: auto;*/
}

.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: #8A6400 !important;
    border-bottom: 2px solid #F7BA14 !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 #B88900;
	padding: 10px;
	border-radius: 8px;
}
.p_method_sel:hover{
	box-shadow: 0px 0px 2px 0px #B88900;
	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: #8A6400;
}

.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; 
}

.login_fixed_panel > .row {
	margin-left: 0;
	margin-right: 0;
}

.login_fixed_panel img {
	width: auto;
	max-width: 220px;
	max-height: 96px;
	object-fit: contain;
}

.login_fixed_panel form,
.login_fixed_panel .panel-body,
.login_fixed_panel .pl-5.pr-5,
.login_fixed_panel .ml_5 {
	max-width: 520px;
	width: 100%;
}


/* 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:#B88900; color:#121F3E;
}

.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: #1269DB; 
	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: #1269DB; 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: #08C; 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: #F7BA14; 
	color: #121F3E; 
	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: #F7BA14;
	color: #121F3E;
}

.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: #1269DB; 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: #F7BA14; 
	color: #121F3E;
	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;
}

/* Responsive compatibility layer */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	max-width: 100%;
}

.row {
	min-width: 0;
}

.card,
.card-body,
.main-panel,
.page-inner,
.content,
.container,
.container-fluid,
[class*="col-"],
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	min-width: 0;
}

.col-xs {
	position: relative;
	width: 100%;
	min-height: 1px;
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
	.col-md-offset-1 { margin-left: 8.333333%; }
	.col-md-offset-2 { margin-left: 16.666667%; }
	.col-md-offset-3 { margin-left: 25%; }
	.col-md-offset-4 { margin-left: 33.333333%; }
	.col-md-offset-5 { margin-left: 41.666667%; }
	.col-md-offset-6 { margin-left: 50%; }
}

.table-responsive,
.scrollable_div {
	-webkit-overflow-scrolling: touch;
}

.table-responsive table,
.card-body.table-responsive table {
	margin-bottom: 0;
}

.text_nowrap1,
.ref_link_copy,
.notif-content,
.dropdown-item,
.card-title,
.card-body,
.alert,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	word-break: normal;
}

.ref_link_copy {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ref_link_copy .float-right {
	margin-left: auto;
	float: none !important;
	white-space: nowrap;
}

@media (max-width: 991.98px) {
	.navbar-header .navbar-nav,
	.topbar-nav {
		max-width: 100%;
	}

	.messages-notif-box,
	.dropdown-user,
	.dropdown-adm {
		max-width: calc(100vw - 24px);
	}

	.popup_alert_suc,
	.popup_alert_err {
		left: 12px;
		right: 12px;
		width: auto !important;
	}
}

@media (max-width: 767.98px) {
	body {
		font-size: 14px;
	}

	.login_row_cont {
		min-height: 100vh;
		display: block;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 150px;
		padding: 32px 16px 20px;
	}

	.login_fixed_panel {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: calc(100vh - 150px);
		padding: 16px !important;
		overflow: visible;
	}

	.login_fixed_panel .position_abs.height_100per,
	.login_fixed_panel .position_abs {
		position: relative;
		height: auto;
		min-height: calc(100vh - 190px);
		width: 100%;
	}

	.login_fixed_panel .pl-5,
	.login_fixed_panel .pr-5,
	.pad_LR_15per {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.login_fixed_panel form,
	.login_fixed_panel .panel-body,
	.login_fixed_panel .pl-5.pr-5,
	.login_fixed_panel .ml_5 {
		width: 100% !important;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.login_fixed_panel img {
		max-width: min(220px, 80vw);
		max-height: 90px;
	}

	.login_fixed_panel .form-group.row,
	.login_fixed_panel form .row {
		margin-left: 0;
		margin-right: 0;
	}

	.scrollable_div_no_bar {
		overflow-y: visible;
		padding-top: 0 !important;
	}

	.regTxtBox,
	.form-control,
	.input_height_45,
	.with_50per,
	.with_25per {
		width: 100% !important;
		max-width: 100%;
	}

	.btn,
	button,
	input,
	select,
	textarea {
		max-width: 100%;
	}

	.card {
		margin-bottom: 16px;
	}

	.card-header,
	.card-body {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.card-head-row,
	.card-tools,
	.nav-tab {
		flex-wrap: wrap;
		gap: 8px;
	}

	.table-responsive {
		width: 100%;
		overflow-x: auto;
	}

	table {
		max-width: 100%;
	}

	.card-body > table:not(.swal2-table),
	.page-inner table:not(.swal2-table) {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.payment_method {
		padding: 24px 16px;
	}

	.pop_cont,
	.pop_invest_col,
	.edit_pack_col,
	.popmsg-mobile,
	.pop_read_msg,
	.pop_msg_col {
		margin: 80px 8px 24px !important;
		width: calc(100% - 16px);
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}

	.pop_up_modal_side_bg {
		display: none !important;
	}

	.modal-dialog {
		margin: 8px;
		max-width: calc(100% - 16px);
	}

	.chat_msg {
		left: 8px;
		width: calc(100% - 16px);
		border-radius: 18px;
	}

	.talk-bubble,
	.chat_bubble {
		max-width: 92%;
		min-width: 0;
	}

	.qr_code_img {
		width: min(200px, 80vw);
		height: auto;
	}

	.img_card_temp,
	.admin_usr_img_size,
	.avatar_img {
		max-width: 100%;
		height: auto;
	}

	.footer-copyright-area,
	.foot {
		text-align: center;
	}
}

@media (max-width: 575.98px) {
	.container,
	.container-fluid {
		padding-left: 12px;
		padding-right: 12px;
	}

	.page-inner {
		padding-left: 8px;
		padding-right: 8px;
	}

	.font_wgh_900 {
		font-size: 18px;
	}

	.pk_num,
	.font_20 {
		font-size: 16px;
	}

	.btn {
		white-space: normal;
	}

	.nav-link {
		white-space: normal;
	}

	.ref_link_copy {
		font-size: 12px;
	}
}

/* Hard mobile auth reset: keeps login/register/admin forms usable in narrow device previews. */
.login_fixed_panel,
.login_fixed_panel *,
.login_row_cont,
.admin_login_row {
	box-sizing: border-box;
}

@media (max-width: 991.98px) {
	.fixedOeverlayBG,
	.login_bg_overlay_col {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.login_row_cont,
	.admin_login_row {
		width: 100% !important;
		min-height: 100vh;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.login_row_cont > .col-md-6,
	.admin_login_row > .col-md-6 {
		flex: 0 0 auto;
		width: 100% !important;
		max-width: 100% !important;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per,
	.admin_login_row > .col-md-6.position_abs.height_100per {
		position: relative !important;
		inset: auto !important;
		height: auto !important;
		min-height: 128px;
		padding: 24px 16px 18px !important;
		text-align: center;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per h1,
	.admin_login_row > .col-md-6.position_abs.height_100per h1 {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 8px;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per h4,
	.admin_login_row > .col-md-6.position_abs.height_100per h4 {
		font-size: 16px;
		line-height: 1.35;
		margin-bottom: 0;
	}

	.login_fixed_panel {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: calc(100vh - 128px);
		padding: 22px 16px 34px !important;
		overflow: visible !important;
	}

	.login_fixed_panel > .row,
	.login_fixed_panel form > .row,
	.login_fixed_panel .form-group.row {
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.login_fixed_panel .position_abs,
	.login_fixed_panel .height_100per {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.login_fixed_panel .col-md-12,
	.login_fixed_panel .col-sm-12,
	.login_fixed_panel .col-sm-6,
	.login_fixed_panel .col-md-6,
	.login_fixed_panel .col-md-12 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.login_fixed_panel .pl-5,
	.login_fixed_panel .pr-5,
	.login_fixed_panel .p-2,
	.login_fixed_panel .pad_LR_15per,
	.login_fixed_panel .panel-body,
	.login_fixed_panel .text-left {
		width: 100% !important;
		max-width: 430px !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.login_fixed_panel .mt-5 {
		margin-top: 0 !important;
	}

	.login_fixed_panel .ml_5 {
		width: 100% !important;
		max-width: 430px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: left;
	}

	.login_fixed_panel form {
		width: 100% !important;
		max-width: 430px !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.login_fixed_panel label,
	.login_fixed_panel b,
	.login_fixed_panel p,
	.login_fixed_panel a,
	.login_fixed_panel h4 {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.login_fixed_panel img {
		display: block;
		width: auto !important;
		max-width: min(180px, 70vw) !important;
		height: auto !important;
		max-height: 88px !important;
		margin-bottom: 8px;
	}

	/* Note: `input` also matches checkbox/radio. Full-stretching a checkbox
       makes it swallow half the row and detach from its label, so those
       two types are deliberately left out of the 100% rule. */
	.login_fixed_panel .regTxtBox,
	.login_fixed_panel .form-control,
	.login_fixed_panel input:not([type="checkbox"]):not([type="radio"]),
	.login_fixed_panel select,
	.login_fixed_panel textarea,
	.login_fixed_panel .input-group {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.login_fixed_panel input[type="checkbox"],
	.login_fixed_panel input[type="radio"] {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto;
		vertical-align: middle;
	}

	.login_fixed_panel .btn,
	.login_fixed_panel button {
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}

	.login_fixed_panel .float-right {
		float: none !important;
		display: inline-block;
		margin-left: 8px;
	}

	.scrollable_div_no_bar {
		overflow: visible !important;
	}
}

@media (max-width: 360px) {
	.login_row_cont > .col-md-6.position_abs.height_100per,
	.admin_login_row > .col-md-6.position_abs.height_100per {
		min-height: 108px;
		padding: 18px 10px 14px !important;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per h1,
	.admin_login_row > .col-md-6.position_abs.height_100per h1 {
		font-size: 22px;
	}

	.login_row_cont > .col-md-6.position_abs.height_100per h4,
	.admin_login_row > .col-md-6.position_abs.height_100per h4 {
		font-size: 13px;
	}

	.login_fixed_panel {
		min-height: calc(100vh - 108px);
		padding: 18px 10px 28px !important;
	}

	.login_fixed_panel h4 {
		font-size: 16px;
		line-height: 1.3;
	}

	.login_fixed_panel label,
	.login_fixed_panel b,
	.login_fixed_panel p,
	.login_fixed_panel a,
	.login_fixed_panel .btn {
		font-size: 13px;
	}

	.login_fixed_panel img {
		max-width: min(150px, 68vw) !important;
	}
}

/* Universal Responsive Fixes */
@media (max-width: 991.98px) {
    .main-panel {
        width: 100% !important;
        float: none !important;
    }
    .sidebar {
        z-index: 1001 !important;
    }
    .navbar-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .logo-header {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .main-header .navbar-nav {
        flex-direction: row !important;
    }
}

@media (max-width: 767.98px) {
    .card-body {
        padding: 15px !important;
    }
    .page-inner {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .row > [class*="col-"] {
        margin-bottom: 15px;
    }
    /* Submit buttons inside forms read better full-width on a phone.
       Buttons inside tables, dropdowns and button-groups stay inline. */
    .form-group > .btn,
    .input-group > .btn,
    form .btn:not(.btn-link):not([class*="col-"]) {
        margin-bottom: 5px;
    }

    .card-body > form > .btn,
    .card-body form > .row > .btn,
    .login_fixed_panel .btn {
        width: 100%;
        max-width: 100%;
    }
    .table-responsive {
        border: 0;
    }
    .modal-dialog {
        margin: 10px;
    }
}

/* Fix for overlapping sidebar/content on some mobile devices */
@media (max-width: 575.98px) {
    .navbar-header .navbar-nav .dropdown-menu {
        position: absolute !important;
        float: none !important;
        width: calc(100vw - 30px) !important;
        left: 15px !important;
        right: 15px !important;
    }
    .user_avatar_size_20 {
        height: 30px;
        width: 30px;
    }
    .footer {
        text-align: center;
    }
    .footer .container-fluid {
        flex-direction: column;
    }
}

/* Header sits flush against the top of the page.

   The theme ships .main-header as position:fixed but only declares
   top:0 inside "@media screen and (min-width:991px)". Below 991px a fixed
   element falls back to top:auto and anchors to wherever it sat in normal
   flow, which pushes a white band above the logo/navbar on phones and
   tablets. Pin it for every width. */
.main-header {
    top: 0;
}

/* Fix for horizontal scrolling tables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    /* Auth pages: the "remember me" / "forgot password" halves are col-md-6,
       which collapses to full-width below 768px and strands the checkbox
       away from its label. Put them back side by side. */
    /* The broad .login_fixed_panel .col-md-6 rule further up uses
       !important, so the two-up layout needs !important to win here. */
    .login_fixed_panel form .row > .col-md-6,
    .admin_login_row form .row > .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Keep a checkbox glued to its label instead of Bootstrap's block form. */
    .login_fixed_panel .custom-checkbox .custom-control-input,
    .admin_login_row .custom-checkbox .custom-control-input,
    .login_fixed_panel input[type="checkbox"],
    .admin_login_row input[type="checkbox"] {
        float: none;
        margin-left: 0;
        margin-right: 6px;
        vertical-align: middle;
        position: static;
    }

    .login_fixed_panel label[for],
    .admin_login_row label[for] {
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
    }

    .login_fixed_panel .btn-link {
        padding: 0;
        white-space: nowrap;
    }

    /* Let images shrink, but keep theme-set dimensions where an explicit
       height is used for icons/avatars. */
    img {
        max-width: 100%;
    }

    .img-fluid,
    .img_card_temp,
    .payment_methods_img {
        height: auto;
    }

    /* Fixed-height scroll panels: 500-664px leaves almost no room on a
       phone, so drive them off the viewport instead. */
    .read_panel_h,
    .msg_nf,
    .pop_scroll_height,
    .form_cont,
    .chat_msg_container {
        height: auto;
        max-height: 62vh;
        overflow-y: auto;
    }

    .chat_msg_container {
        margin-top: 60px;
    }

    .msg_listing,
    .read_panel {
        padding-left: 0 !important;
        border-left: 0;
    }

    .talk-bubble,
    .chat_bubble {
        min-width: 0;
        max-width: 100%;
    }

    /* Package / activity / transfer / history rows: stack on small screens
       instead of squeezing icon, text and amount into one line. */
    .row.border_btm {
        flex-wrap: wrap;
    }

    .row.border_btm .col-xs,
    .row.border_btm .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row.border_btm .float-right {
        float: none !important;
        text-align: right;
    }
}

/* ==========================================================================
   BRAND THEME - Boraxs
   --------------------------------------------------------------------------
   Single source of truth for the dashboard colour scheme. The theme's own
   stylesheet hardcodes its blue (#1572e8) across roughly forty rules, and
   this file is loaded after it in every layout, so the tokens below are
   declared once and mapped onto those rules here instead of being
   duplicated per component.

   Palette is derived from the logo asset (img/logo.png), whose dominant
   pixel colour is #F7BA14.

   Contrast notes (WCAG 2.1):
     - Brand gold is a *surface* colour, not a text colour. White on gold is
       1.75:1 and fails, so every gold surface carries the deep navy
       #121F3E for its label instead (9.28:1, AAA).
     - Gold cannot be link or body text on white either (1.75:1), so
       text-primary and links use --brand-primary-text (#8A6400), which is
       5.38:1 on white and passes AA.
     - Neutrals (greys, white cards, body copy) are deliberately left
       untouched so the interface stays clean.
   ========================================================================== */

:root {
    /* Brand ramp, derived from the logo's #F7BA14 */
    --brand-primary: #F7BA14;
    --brand-primary-hover: #D69F0F;
    --brand-primary-active: #B88900;
    --brand-primary-text: #8A6400;
    --brand-primary-tint: #FFF7E1;
    --brand-primary-rgb: 247, 186, 20;

    /* Deep contrast used for labels sitting on gold surfaces */
    --brand-on-primary: #121F3E;
    --brand-shell: #121F3E;
    --brand-shell-hover: #1B2C56;
    --brand-shell-active: #0D1830;
    --brand-shell-border: rgba(247, 186, 20, .28);
}

/* --------------------------------------------------------------- surfaces */
/* Sidebars: the user panel is white today and the admin panel is navy.
   Both take the brand gold with navy labels so the two dashboards read as
   one product. */

.sidebar,
.sidebar-style-2,
.sidebar.sidebar-style-2 {
    background-color: var(--brand-primary) !important;
}

/* The theme paints sidebar labels white via .all_text_color; flip them so
   they stay legible on gold. */
.sidebar .all_text_color *,
.sidebar-style-2 .all_text_color *,
.sidebar .nav-item > a,
.sidebar .nav-item > a p,
.sidebar .nav-item > a i,
.sidebar .nav-item > a span {
    color: var(--brand-on-primary) !important;
}

.sidebar .nav-item > a:hover,
.sidebar .nav-item > a:focus {
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

.sidebar .nav-item.active > a,
.sidebar-style-2 .nav-item.active > a,
.sidebar .nav .nav-item.active a {
    background-color: var(--brand-primary-active) !important;
    color: var(--brand-on-primary) !important;
}

/* --------------------------------------------------------------- text ---- */
/* text-primary appears ~185 times across both dashboards; pointing it at
   the deep gold keeps all of it on-brand and readable. */
.text-primary,
.text-primary a,
a.text-primary,
.text-primary:hover,
.text-primary:focus,
.text-primary a:hover,
.text-primary a:focus {
    color: var(--brand-primary-text) !important;
}

/* Neutral body text stays neutral on purpose. */

/* --------------------------------------------------------------- buttons -- */
.btn-primary,
.btn.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

.btn-primary:active,
.btn.btn-primary:active {
    background-color: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
fieldset:disabled .btn-primary {
    background-color: var(--brand-primary-tint) !important;
    border-color: var(--brand-primary-tint) !important;
    color: #8A8F98 !important;
    opacity: 1;
}

/* Secondary and info buttons that previously carried the theme blue. */
.btn-info,
.btn-secondary,
.btn.btn-info,
.btn.btn-secondary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.btn-info:hover,
.btn-secondary:hover,
.btn-info:focus,
.btn-secondary:focus {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

/* Outline buttons keep a light background, so their label needs the deep
   gold rather than the navy used on solid gold. */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-text) !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:focus,
.btn-outline-info:focus,
.btn-outline-secondary:focus {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* Project specific helpers defined earlier in this stylesheet. */
.btn_blue,
.btn_blue:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.card_header_bg_blue {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.btn_form {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.btn_form:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-on-primary);
}

/* --------------------------------------------------------------- navbar -- */
.navbar-header .nav-link,
.navbar-header .nav-link:hover,
.navbar-header .nav-link:focus {
    color: var(--brand-primary-text) !important;
}

.navbar-header .dropdown-menu {
    border-color: var(--brand-primary-tint);
}

.navbar-header .dropdown-menu .dropdown-item:hover,
.navbar-header .dropdown-menu .dropdown-item:focus {
    background-color: var(--brand-primary-tint);
    color: var(--brand-on-primary);
}

/* --------------------------------------------------------------- cards --- */
.card-title,
.card-header h5,
.card-header h6 {
    color: var(--brand-primary-text) !important;
}

/* --------------------------------------------------------------- forms --- */
.form-control:focus,
.form-control:focus:active,
.form-control.is-active,
.form-control:active,
.custom-select:focus,
.select2-container--default .select2-selection--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), .28) !important;
}

.form-control:hover:not(:disabled):not(:focus),
.custom-select:hover:not(:disabled):not(:focus) {
    border-color: var(--brand-primary) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.switch input:checked + .slider {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), .28) !important;
}

/* The switch thumb sits on gold, so it takes the navy label colour to stay
   visible. */
.switch input:checked + .slider:before {
    background-color: var(--brand-on-primary);
}

/* --------------------------------------------------------------- tables -- */
.table thead th,
.table th,
.basic-table thead th,
.datatable thead th,
table.table > thead > tr > th {
    color: var(--brand-primary-text) !important;
    border-bottom: 1px solid var(--brand-primary-tint) !important;
}

.table-hover tbody tr:hover,
.basic-table.table-hover tbody tr:hover {
    background-color: var(--brand-primary-tint) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* --------------------------------------------------------------- tabs ---- */
.custom-tab.active,
.nav-tab .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
    color: var(--brand-primary-text) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--brand-primary) !important;
}

.custom-tab:hover,
.nav-tab .nav-link:hover {
    color: var(--brand-primary-hover) !important;
    border-bottom-color: var(--brand-primary-hover) !important;
}

/* --------------------------------------------------------------- badges -- */
.badge-primary,
.badge.badge-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.badge-primary:hover,
.badge.badge-primary:hover {
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

/* The unread dot sits on white, where gold would be invisible, so it uses
   the deep gold accent instead. */
.new_not {
    color: var(--brand-primary-text) !important;
}

/* --------------------------------------------------------------- alerts -- */
.alert-primary {
    background-color: var(--brand-primary-tint) !important;
    border-left: 4px solid var(--brand-primary) !important;
    color: #575962 !important;
}

.alert-primary .alert-link,
.alert-info .alert-link {
    color: var(--brand-primary-text) !important;
}

/* Semantic alert colours stay as they are; they carry status meaning. */

/* --------------------------------------------------------------- pagers -- */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:focus,
.pagination .page-item.active .page-link:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.pagination .page-item .page-link,
.pagination .page-item .page-link:focus,
.pagination .page-item .page-link:hover {
    color: var(--brand-primary-text) !important;
    border-color: var(--brand-primary-tint) !important;
}

.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:focus,
.pagination .page-item.disabled .page-link:hover {
    color: #8A8F98 !important;
    border-color: var(--brand-primary-tint) !important;
    background-color: transparent !important;
}

/* Laravel default paginator markup */
.pagination li > a,
.pagination li > span {
    color: var(--brand-primary-text) !important;
}

.pagination li.active > a,
.pagination li.active > span {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* --------------------------------------------------------------- misc ---- */
.bg-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

a {
    color: var(--brand-primary-text);
}

a:hover,
a:focus {
    color: var(--brand-primary-hover);
}

.btn-link,
a.btn-link {
    color: var(--brand-primary-text) !important;
}

.btn-link:hover,
a.btn-link:hover {
    color: var(--brand-primary-hover) !important;
}

::selection {
    background: rgba(var(--brand-primary-rgb), .30);
}

/* The admin logo strip keeps the deep shell rather than full gold, so the
   white wordmark and toggles stay legible. It is driven by the same token
   as the rest of the brand palette. */
.brand_shell_bg {
    background-color: var(--brand-shell) !important;
    border-bottom: 1px solid var(--brand-shell-border);
}

.brand_shell_bg .nav-link-nav,
.brand_shell_bg .text-white,
.brand_shell_bg .navbar-toggler-icon,
.brand_shell_bg .topbar-toggler,
.brand_shell_bg .nav-toggle {
    color: var(--brand-primary) !important;
}

/* The theme pins the active sidebar pill with a highly specific
   selector and !important (.sidebar.sidebar-style-2 .nav.nav-primary >
   .nav-item.active > a). Mirror that specificity so the active item picks
   up the brand ramp, and keep its label on the navy that reads against
   gold. */
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a:hover,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a:focus {
    background: var(--brand-primary-active) !important;
    color: var(--brand-on-primary) !important;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .10),
                4px 4px 15px -5px rgba(var(--brand-primary-rgb), .55) !important;
}

.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a p,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a span,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a i,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a[data-toggle="collapse"][aria-expanded="true"] i {
    color: var(--brand-on-primary) !important;
}

.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a:before {
    background: transparent !important;
}

/* Hover for the other primary items uses the mid tone of the ramp. */
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item > a:hover,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item > a:focus {
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

/* -------------------------------------------------------------------------
   Mobile table readability
   -------------------------------------------------------------------------
   Dashboard tables should scroll horizontally on phones instead of squeezing
   every header letter into a vertical stack. Keep this late in the file so it
   wins over the responsive compatibility rules above and the Atlantis theme.
*/
.table-responsive,
.dataTables_wrapper,
.datatable-dashv1-list,
.custom-datatable-overright {
    max-width: 100%;
}

.dataTables_wrapper,
.datatable-dashv1-list,
.custom-datatable-overright {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.table-responsive table.table,
.card-body.table-responsive > table,
.dataTables_wrapper table,
.datatable-dashv1-list table,
.custom-datatable-overright table {
    width: max-content !important;
    min-width: 720px;
    max-width: none !important;
    table-layout: auto !important;
}

.table-responsive th,
.table-responsive td,
.dataTables_wrapper th,
.dataTables_wrapper td,
.datatable-dashv1-list th,
.datatable-dashv1-list td,
.custom-datatable-overright th,
.custom-datatable-overright td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle;
}

.table-responsive .btn,
.dataTables_wrapper .btn,
.datatable-dashv1-list .btn,
.custom-datatable-overright .btn {
    white-space: nowrap !important;
}

.dataTables_wrapper .row,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        width: 100%;
        margin: 8px 0;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        max-width: 100%;
    }

    .page-inner .table-responsive,
    .card-body.table-responsive {
        padding-bottom: 10px !important;
    }
}

@media (max-width: 600px) {
    .web-table {
        display: none !important;
    }

    .table-responsive.web-table {
        display: block !important;
    }

    .table-responsive.web-table table {
        display: table !important;
    }

    .table-responsive.web-table thead {
        display: table-header-group !important;
    }

    .table-responsive.web-table tbody,
    .table-responsive.web-table tbody.web-table {
        display: table-row-group !important;
    }

    .table-responsive.web-table tr {
        display: table-row !important;
    }

    .table-responsive.web-table th,
    .table-responsive.web-table td {
        display: table-cell !important;
    }

    .mobile_table {
        display: block !important;
    }

    .table-responsive.web-table ~ .mobile_table {
        display: none !important;
    }

    .mobile_table .row > [class*="col-"],
    .mobile_table .row > .col,
    .mobile_table .row > .col-xs,
    .mobile_table .row > [class*="col-xs-"] {
        min-width: 0;
        margin-bottom: 0;
    }

    .mobile_table .btn {
        white-space: normal !important;
    }
}

@media (min-width: 601px) {
    .web-table {
        display: block;
    }

    table.web-table {
        display: table;
    }

    thead.web-table,
    tbody.web-table {
        display: table-row-group;
    }

    tr.web-table {
        display: table-row;
    }

    .mobile_table {
        display: none !important;
    }
}