:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #000;
    --bg-color: #fff;
    --heading-color: #292922;
	--box-bg:#fff;
	--box-border:#fff;
	--black-block:#111;
	--card-border:rgba(0,0,0,.125);
	--grey-background:#efefef;
	--sidebar-background:#1f2638;
	--list-group:#232b3e;
	--list-group-header:#171e24; 
	--sidebar-heading:#323844;
	--navbar:#39404d;
	--form-control:#fff;
	--form-border:#ddd;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #fff;
    --bg-color: #151a27;
    --heading-color: #818cab;
	--box-bg:#1f2638;
	--box-border:#323844;
	--black-block:#151b2b;
	--card-border:#323844;
	--grey-background:#151a27;
	--sidebar-background:#000;
	--list-group:#0a0d13;
	--list-group-header:#000; 
	--sidebar-heading:#0a0d13;
	--navbar:#000;
	--form-control:#1c2231;
	--form-border:#272e40;
}

.theme-switch-bg{
	background-color: var(--bg-color);
	transition:.3s;
}
.t-color{
	color: var(--font-color);
}

/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  
  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 45px;
  margin:8px 0;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #1f2638;
  bottom: 2px;
  content: "";
  height: 20px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 20px;
}

input:checked + .slider {
  background-color: #1f2638;
}

input:checked + .slider:before {
  transform: translateX(18px);
  background-color:#fff;
}

.slider.round {
  border-radius: 50px;
}

.slider.round:before {
  border-radius: 50%;
}

body.dark_bg{
	background:#171e24;
}
/*** button style *****/
input#_submit{
	background:#333;
	max-width:100%;
	width:100%;
	display:block;
	margin:0 auto;
	transition:all ease .3s;
}
input#_submit:hover{
	background:#000;
}
input#_confirm{
	background:#49c279;
	max-width:265px;
	width:100%;
	margin:0 auto;
	display:block;
	border:none;
	transition:all ease .3s;
}
input#_confirm:hover{
	background:#3ead6a;
}
input#_submit[type="submit"]{
	background:#49c279;
	border:1px solid #49c279;
}
input#_submit[type="submit"]:hover{
	background:#3ead6a;
}
@media (max-width:414px){
	input#_confirm{
		max-width:100%;
	}
}
/*** tab css *****/
.fade.in{
	opacity:1;
}
.fade.show{
	display:block;
}
.tab-pane.fade{
	opacity:1;
}
/*.tab-pane .fade{opacity:1;}*/

/*** ----- */
.mobile_display{display:none;}
.navbar-light .navbar-toggler-icon{
	color:#fff !important;
	background:none;
}
.navbar-light .navbar-toggler-icon:before{
	font-family:'fontAwesome';
	content:'\f0c9';
	display:block;
	padding-top:5px;
}
.btn_sidebar_toggle{
	width:36px;
	height:36px;
	position:relative;
	color:#fff;
	font-weight:bold;
	background:#323844;
	border-radius:10px;
	transition:all ease .3s;
}
.btn_sidebar_toggle:hover{
	background:#555;
}
.btn_sidebar_toggle:after{
	content: "::";
	font-family:'FontAwesome';
    position: absolute;
    text-align: center;
    right:12px;
    top:2px;
}
.pageTitle{
	padding:0px;
	margin:20px 0 25px;
	font-size:24px;
	text-transform:uppercase;
	letter-spacing:1px;
	color: var(--font-color);
}
.bottom_grid{
	color:#fff;
	padding:15px;
	background:#1f2638;
	border-radius:3px;
	border:1px solid #323844;
	word-break:break-word;
}
@media (max-width:414px){
	.mobile_display{display:block;}
	.bottom_grid{
		margin-bottom:5px;
	}
}
/*** sign page ****/
.loginBox{
	background-color:var(--box-bg);
	max-width:450px;
	border:1px solid var(--box-border);
	padding:20px;
	box-shadow:0 0px 10px rgba(0,0,0,.15);
	color:var(--font-color);
}
.loginBox input.btn-primary{
	width:100%;
	margin-bottom:6px;
	background:#666;
	border:1px solid #555;
	border-radius:3px;
}
.loginBox input.btn-primary:hover{
	background:#444;
}

/*** Dashboard *****/
.table_default{
	width:100%;
	color:var(--font-color);
}
.view-more{
	position:absolute;
	right:8px;
	top:8px;
	font-size:12px;
	background:#3a3a3a;
	border:1px solid #1c1c1c;
	
}
@media (max-width:414px){
	.table_default tr td{
		display:block;
		width:100% !important;
	}
}
.card{
	background-color:var(--box-bg);
	border:1px solid var(--card-border);
}
.blackblock{
	background:var(--black-block);
	color:#fff;
}
.table{
	color:var(--font-color);
}
.form-control{
	background-color:var(--form-control);
	border-color:var(--form-border);
}
form p{
	color:var(--font-color);
}

/*** deposit.php *****/
.process_step ul{
	margin:0;
	margin-bottom:10px;
	padding:0;
}
.process_step li{
	list-style:none;
	float:left;
	padding:10px 20px;
	color:#fff;
}
.process_step li.step01{
	background:#38b33d;
	position:relative;
}
.process_step li.step01:before{
	right: -15px;
	content: "";
	position: absolute;
	height: 50%;
	top: 0;
	background: #38b33d;
	width: 30px;
	-webkit-transform: skewX(50deg);
	-moz-transform: skewX(50deg);
	transform: skewX(50deg);
	z-index:1;
}
.process_step li.step01:after{
	right: -15px;
	content: "";
	position: absolute;
	height: 50%;
	bottom: 0;
	background: #38b33d;
	width: 30px;
	-webkit-transform: skewX(-50deg);
	-moz-transform: skewX(-50deg);
	transform: skewX(-50deg);
	z-index:1;
}
.process_step li.step02{
	position:relative;
	background:#148dc3;
	padding-left:30px;
}
.process_step li.step02:before{
	right: -15px;
	content: "";
	position: absolute;
	height: 50%;
	top: 0;
	background: #148dc3;
	width: 30px;
	-webkit-transform: skewX(50deg);
	-moz-transform: skewX(50deg);
	transform: skewX(50deg);
}
.process_step li.step02:after{
	right: -15px;
	content: "";
	position: absolute;
	height: 50%;
	bottom: 0;
	background: #148dc3;
	width: 30px;
	-webkit-transform: skewX(-50deg);
	-moz-transform: skewX(-50deg);
	transform: skewX(-50deg);
}
.account_trade #_submit{
	background: #227ba7;
	width: 100%;
	max-width: 360px;
	border: none;
	border-radius: 30px;
	transition:all ease .3s;
}
.account_trade #_submit:hover{
	background:#196388;
}
/*** finish Deposit page *****/
.status_update h2 span.success{
	color:#2bb331;
	font-weight:bold;
}
.account_trade{
	background:linear-gradient(180deg, #fff8e6, #e4d7a6);
	border:1px solid #e2e2e2;
	border-radius:5px;
	padding:10px 20px;
	transition:all ease .3s;
}
.account_trade:hover{
	background:linear-gradient(180deg, #ffffff, #e8e8e8);
}
.account_trade span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.account_trade span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.account_trade:hover span {
  padding-right: 25px;
}

.account_trade:hover span:after {
  opacity: 1;
  right: 0;
}
/*** edit profile page *****/
.tabElement {
	border: none;
	border-top-left-radius:10px ;
	border-top-right-radius:10px ;
	margin-bottom:15px;
}

.headerBlock {
	border: 1px solid #ccc;
	background-color: #111;
	color: white;
	padding : 10px;
	border-top-left-radius:10px ;
	border-top-right-radius:10px ;
	position:relative;
}
.headerBlock h3{
	font-size:22px;
	margin:0;
}

.tabContent {
	padding : 10px;
	color:var(--font-color);
}
@media (max-width:414px){
	.headerBlock h3{
		font-size:16px;
	}
}
/*** trade platform *****/
#chartdiv{
	width:100%;
	height:65vh;
}
.market-title{
	color:#fff;
	padding:0px 20px;
	background:#39404d;
}
.market-title span{
	text-transform:uppercase;
	display:inline-block;
	padding:6px 0;
	border-bottom:3px solid #f7614e;
	font-size:12pt;
	font-weight:bold;
}
.crypt-market-status{
	background:#1f2638;
}
.coin-in-market{
	width:100%;
	border-spacing: 0;
}
.coin-in-market thead td{
	padding:0px 0px;
	color:#fff;
	background:#131722;
}
.coin-in-market tbody tr td{
	padding:0px 0px;
	color:#fff;
}
.coin-in-market tbody tr td.ng-binding{
	transition:all ease .3s;
}
.coin-in-market tbody tr td.ng-binding:hover{
	background:#323844;
}
.coin-in-market tbody tr:nth-child(odd){
	background:#1f2638;
	border-bottom:1px solid #3a4461;
}
.coin-in-market tbody tr:nth-child(even){
	/*background:#000;*/
	border-top:1px solid #3a4461;
	border-bottom:1px solid #3a4461;
}
span.price-up{
	color:#4CAF50;
}
span.price-down{
	color:#d00;
}
.coin-price-head ul{
	margin:0;
	padding:0;
}
.coin-price-head li{
	list-style:none;
	float:left;
	width:25%;
	font-size:10pt;
	text-align:center;
}
.coin-price-text{
	background:#000;
	padding:0 5px;
}
.coin-price-text a{
	display:block;
	color:#fff;
}
.coin-price-text ul{
	margin:0 0 6px;
	padding:0;
	border-bottom:1px solid #151a27;
}
.coin-price-text li{
	padding:5px 0;
	list-style:none;
	float:left;
	width:25%;
	font-size:10pt;
	text-align:center;	
}
.coin-price-text li span{
	font-weight:400;
	display:block;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.coin_pair_grid{
	position:relative;
}
.coin_pair_grid:before{
	/*content:'\f0d7';
	font-family:fontAwesome;
	display:block;
	position:absolute;
	top:0px;
	right:5px;
	z-index:1;
	opacity:.35;*/
}
.coin_pair_grid a{
	display:block;
	color:#fff;
	padding:10px 20px;
}
.coin_market_detail{
	margin-top:5px;
	padding:10px 20px;
	border-top:1px solid #131722;
	background: #10161d;
    border-bottom: 3px solid #1f2638;
}
.price_low_high ul{
	margin:0;
	padding:0;
}
.price_low_high li{
	list-style:none;
	display:inline-block;
	width:30%;
	text-align:center;
	font-size:10pt;
}
.price_low_high li select{
	width:100%;
	background:#1f2638;
    border: none;
    color: #fff;
    padding:5px;
}
.bet-buy-sell{
	display:flex;
}
.bet-sell-col, .bet-buy-col{
	width:50%;
	padding:10px 0;
	margin:0 1px;
	display:inline-block;
}
.bet-sell-col button, .bet-buy-col button{
	border:none;
	padding:8px 0;
	display:block;
	width:100%;
	color:#fff;
	transition:all ease .3s;
}
.bet-sell-col button:hover, .bet-buy-col button:hover{
	opacity:.5;
}
.bet-sell-col button.coin-price-buy, .bet-buy-col button.coin-price-buy{
	background:#4CAF50;
}
.bet-sell-col button.coin-price-sell, .bet-buy-col button.coin-price-sell{
	background:#d00;
}
.bet-price{
	font-size:20px;
	font-weight:bold;
}
.color-red{
	color:#d00;
}
.color-green{
	color:#4CAF50;
}
/** modal bet sell & buy ****/
.bet-order .modal-header{
	padding:10px;
	font-size:10pt;
	border-bottom:1px solid #2b303a;
}
.bet-order .modal-header button.close{
	font-size:12pt;
	color:#fff;
}
.bet-order .modal-content{
	background:#39404d;
	color:#aaa;
}
.bet-order-table{
	width:100%;
}
.bet-order-table tr td{
	padding:5px 10px;
	font-size:10pt;
}
.bet-order-table tr td select{
	background:#1f2638;
	border:none;
	padding:6px 10px;
	color:#aaa;
}
.label-title{
	display:block;
}
.bet-order-table .spinner input{
	padding:10px;
	height:32px;
	background:#1f2638;
	border:none;
	color:#fff;
}
.btn-plus, .btn-minus{
	padding:5px;
	line-height:normal;
	color:#aaa;
}
.side-bet .sell-click.active{
	background:#d00 !important;
}
.side-bet .buy-click.active{
	background:#4CAF50 !important;
}
.margin_impact{
	font-size:20pt;
}
.checkbox.check-order input{
	margin-right:5px;
	vertical-align:middle;
} 
.bet-order .modal-footer{
	border-top:1px solid #2b303a;
	padding:10px 20px;
}
.bet-order .modal-footer button{
	color:#fff;
}
@media (max-width:414px){
	#bet-buy-sell-modal{
		padding:0 !important;
	}
	.bet-order-table tr td{
		width:100%;
		display:block;
	}
}
/** ***/

.table-market-history{
	color:#fff;
	width:100%;
}
.table-market-history thead tr td{
	padding:10px 20px;
	font-weight:bold;
	font-size:14px;
}
.table-market-history tbody tr td{
	padding:5px 20px;
	font-size:14px;
}
.table-market-history tbody tr:nth-child(odd){
	background:#171e24;
}
.status_tabbed_pill{
	background:#39404d;
	padding:0 10px;
	border-bottom:1px solid #101519;
}
.status_tabbed_pill li{
	padding:0px 20px;
}

.status_tabbed_pill li a{
	color:#fff;
	font-weight:bold;
	padding:10px 0px;
	display:block;
}
.status_tabbed_pill li a:hover{
	text-decoration:none;
}
.status_tabbed_pill li a.active{
	border-bottom:3px solid #f7614e;
}
.crypt-gross-market-cap{
	padding:10px 0px;
	margin-bottom:15px;
	background:#1f2638;
}
.market_price_box{
	width:auto;
	max-width:250px;
	margin:0 15px 10px;
	color:#fff;
	display:block;
	float:left;
}
.market_price_box p{
	margin-bottom:5px;
	font-size:10pt;
}
.market_price_box span{
	font-size:18px;
	font-weight:bold;
}
.market_price_box .market-price-up{
	color:#49c279 !important;
}
.market_price_box .market-price-down{
	color:#d00 !important;
}
.select_time_row button{
	text-transform:uppercase;
	font-size:12px;
	color:#fff;
	background:none;
	border:none;
	border-radius:5px;
	padding:10px 20px;
	transition:all ease .2s;
}
.select_time_row button:hover{
	background:#000;
}
.select_time_row button.selected{
	background:#131722;
}
.group-select{
	color:#fff;
	font-size:10pt;
}
/*** Buy & Sell Box *****/
.crypt-boxed-area{
	background:#131a33;
    border:none;
    color:#fff;
}
.crypt-bg-head{
	background:#1f2638;
    padding:13px;
}
.crypt-buy{
	color:#49c279 !important;
}
.crypt-sell{
	color:#d00 !important;
}

/*** wallet.php *****/
.button-receive{
	background:#ef5350;
	color:#fff;
	margin:1px;
}
.button-send{
	background:#7cb342;
	color:#fff;
	margin:1px;
}
.button-trade{
	background:#3F51B5;
	color:#fff;
	margin:1px;	
}
.button-check{
	background:#FB8C00;
	color:#fff;
	margin:1px;		
}
.button-receive:hover, .button-send:hover, .button-trade:hover,  .button-check:hover{
	opacity:.5;
	color:#fff;
	transition:all ease .3s;
}

/*** paymarket.php *****/
.value_balance{
	background:#efefef;
	border-radius:5px;
	padding:5px 10px;
	margin-bottom:10px;
}