.dark-mode {
	background-color: #000;
	color: #fff;
}

/* Button Switch */
.btn-switch {
	background-color: #fff;
	border: none;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	position: relative;
}

.btn-switch:after {
	content: '';
	background-color: #241332;
	border-radius: 100px;
	display: block;
	width: 53px;
	height: 32px;
	position: absolute;
	top: 0;
	left: -1px;
	right: unset;
	transition: .3 ease all;
	border: 1px solid #241332;
}

.btn-switch.active {
	background-color:#f5f5f5;
	color: #fff;
}

.btn-switch.active:after {
	right: 0;
	left: unset;
}

.btn-switch>span {
    width: 45px;
    height: 30px;
    line-height: 30px;
		display: block;
		background-color: none;
		color: #000;
}

.btn-switch .light,
.btn-switch .dark {
	color: #000;
	font-size: 14px;
}

body.light-mode .white-arrow-icon {
display: none;
}

body.light-mode .black-arrow-icon{
	display: block !important;
}

body.light-mode.swap-form-body .noon-wrapper,
body.light-mode .select-tokenn-btn {
	background-color:  #fff !important;
	background-image: none !important;
	color: #000;
	border: 1px solid #eee;
}

body.light-mode .header-btn .main-nav-list-holder li a,
body.light-mode .calculate-value input,
body.light-mode .charges-amount p {
	color: #000 !important;
}

body.light-mode .swap-title,
body.light-mode .refresh-icon a,
body.light-mode .available-balance span,
body.light-mode .estimated-text span,
body.light-mode .calculate-value input::placeholder,
body.light-mode .charges-amount h6,
body.light-mode .charges-text h6,
body.light-mode .total-card li span,
body.light-mode .total-card li p,
body.light-mode .charges-amount.d-flex.justify-content-end a,
body.light-mode .header-right li .dropdown a,
body.light-mode .charges-text h6,
body.light-mode .charges-amount h6,
body.light-mode .modal-title,
body.light-mode .swap-token-detail h4,
body.light-mode .swap-token-detail span,
body.light-mode #tokenmodal button,
body.light-mode #connetwallet button,
body.light-mode .available-token p,
body.light-mode .pool-card svg,
body.light-mode .pool-card h6,
body.light-mode .swap-form-left span,
body.light-mode .swap-form-value input,
body.light-mode .swap-form-value input::placeholder,
body.light-mode .wallet-connet-holder a span {
	color: #000 !important;
}


body.light-mode .header-btn .main-nav-list-holder li.active {
	border-bottom: 2px solid #000;
}

body.light-mode .swap-card,
body.light-mode #tokenmodal .modal-content,
body.light-mode #connectwallet .modal-content {
	background-color: #fff;
	box-shadow: 0 8px 32px 0 rgb(0 0 0 / 12%);
}

body.light-mode .calculate-value input {
		background: transparent;
		border: 1px solid #616161;
		color: #000;
}
 
body.light-mode .swap-form-card {
	background-color: #00000021;
}

body.light-mode .all-token-swap ul li:hover {
	background-color: #e1e0e0;
}
body.light-mode .all-token-swap ul li {
	border-bottom: 1px solid #eee;
}

body.light-mode ::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #e2e2e2;
}

body.light-mode ::-webkit-scrollbar {
	width: 12px;
	background-color: #e2e2e2;
}

body.light-mode ::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(83, 83, 83, 0.3);
	background-color: rgb(131, 131, 131);
}

body.light-mode #tokenmodal .modal-header,
body.light-mode #connectwallet .modal-header {
	border-bottom: 1px solid #dee2e6;
}

body.ligh-mode .text-pink {
	color: rgb(237, 75, 158) !important;
}

body.light-mode  #connetwallet .modal-content {
	 background-color: #fff;
 }

 body.light-mode #connetwallet .modal-header {
	 border-bottom: 1px solid #00000040;
 }