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

html, body {
	height: 100%;
}

body {
	background-color: hsl(0 0% 4%);
	color: hsl(0 0% 90%);
	font-family: 'IBM Plex Mono', monospace;
	background-image: 
		linear-gradient(180deg, 
			transparent 0%, 
			hsl(165 80% 40% / 0.02) 50%, 
			hsl(165 80% 40% / 0.05) 100%
		);
	position: relative;
	overflow-x: hidden;
	/* Improve rendering quality */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Quantum particle background effect - improved */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 20% 30%, hsl(165 80% 40% / 0.025) 2px, transparent 2px),
		radial-gradient(circle at 80% 70%, hsl(165 80% 40% / 0.02) 1px, transparent 1px),
		radial-gradient(circle at 40% 80%, hsl(165 80% 40% / 0.015) 1px, transparent 1px),
		radial-gradient(circle at 60% 20%, hsl(165 80% 40% / 0.01) 1px, transparent 1px);
	background-size: 100px 100px, 150px 150px, 200px 200px, 250px 250px;
	z-index: -1;
	animation: quantumFloat 30s ease-in-out infinite;
	will-change: transform;
}

@keyframes quantumFloat {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	33% { transform: translateY(-10px) rotate(1deg); }
	66% { transform: translateY(5px) rotate(-1deg); }
}

.displaynone {
	display:none;
}

#wrap {
	min-height: 100%;
	height: auto;
	/* Negative indent footer by its height */
	margin: 0 auto -60px;
	/* Pad bottom by footer height */
	padding: 0 0 60px;
}

#footer {
	height: 60px;
	background-color: hsl(0 0% 6%);
	border-top: 1px solid hsl(165 80% 40% / 0.3);
	padding-top: 20px;
	color: hsl(0 0% 70%);
}

/* Glass panel effect for cards and containers - improved */
.glass-panel, .panel {
	border-radius: 12px;
	border: 1px solid hsl(165 80% 40% / 0.25);
	background: linear-gradient(135deg, 
		hsl(0 0% 8% / 0.9), 
		hsl(0 0% 6% / 0.95)
	);
	box-shadow: 0 8px 24px hsl(0 0% 0% / 0.25);
}

/* Update navbar styling */
.navbar-default {
	background-color: hsl(0 0% 6%);
	border-color: hsl(165 80% 40% / 0.3);
	border-bottom: 1px solid hsl(165 80% 40% / 0.3);
}

.navbar-default .navbar-brand {
	color: hsl(165 80% 40%);
}

.navbar-default .navbar-nav > li > a {
	color: hsl(0 0% 90%);
	transition: all 0.3s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: hsl(165 80% 40%);
	background-color: hsl(165 80% 40% / 0.1);
	outline: none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color: hsl(165 80% 40%);
	background-color: hsl(165 80% 40% / 0.2);
	outline: none;
}

.navbar-default .navbar-brand:focus {
	outline: none;
}

/* Remove focus outlines from all navigation elements */
.navbar a:focus,
.nav a:focus,
.dropdown-toggle:focus,
.navbar-brand:focus {
	outline: none !important;
	box-shadow: none !important;
}

.navbar-default .navbar-toggle {
	border-color: hsl(165 80% 40% / 0.3);
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: hsl(165 80% 40%);
}

/* Dropdown menu styling - use high specificity to override Bootstrap */
.navbar .dropdown-menu,
.nav .dropdown-menu,
.dropdown .dropdown-menu {
	background-color: hsl(0 0% 6%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
	border-radius: 8px !important;
}

.navbar .dropdown-menu > li > a,
.nav .dropdown-menu > li > a,
.dropdown .dropdown-menu > li > a {
	color: hsl(0 0% 90%) !important;
	transition: all 0.3s ease !important;
	background-color: transparent !important;
}

.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
.nav .dropdown-menu > li > a:hover,
.nav .dropdown-menu > li > a:focus,
.dropdown .dropdown-menu > li > a:hover,
.dropdown .dropdown-menu > li > a:focus {
	color: hsl(165 80% 40%) !important;
	background-color: hsl(165 80% 40% / 0.1) !important;
}

/* Style the dropdown divider */
.navbar .dropdown-menu .divider,
.nav .dropdown-menu .divider,
.dropdown .dropdown-menu .divider {
	background-color: hsl(165 80% 40% / 0.2) !important;
	border-top: 1px solid hsl(165 80% 40% / 0.2) !important;
}

/* Nav pills styling - override Bootstrap blue with quantum theme */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	color: hsl(0 0% 95%) !important;
	background-color: hsl(165 80% 40%) !important;
	box-shadow: 0 0 8px hsl(165 80% 40% / 0.3) !important;
}

.nav-pills > li > a {
	color: hsl(0 0% 90%) !important;
	background-color: hsl(0 0% 8%) !important;
	transition: all 0.3s ease !important;
	margin-right: 2px !important; /* Preserve Bootstrap default spacing */
	padding: 8px 12px !important; /* Slightly reduce padding to save space */
	font-size: 14px !important; /* Ensure consistent font size */
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
	color: hsl(165 80% 40%) !important;
	background-color: hsl(165 80% 40% / 0.1) !important;
}

/* Ensure nav-pills container is wide enough for all buttons */
.nav-pills {
	width: auto !important;
	max-width: 500px !important;
	margin: 0 auto !important;
	display: flex !important;
	justify-content: center !important;
	flex-wrap: nowrap !important;
}

/* Override the inline 350px width on the nav-pills container */
div[style*="width:350px"] .nav-pills {
	width: auto !important;
}

div[style*="width:350px"] {
	width: auto !important;
	max-width: 600px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

/* Terminal/quantum styling for elements */
h1, h2, h3, h4, h5, h6 {
	color: hsl(165 80% 40%);
	font-family: 'IBM Plex Mono', monospace;
	text-shadow: 0 0 8px hsl(165 80% 40% / 0.5);
}

/* Buttons */
.btn-primary {
	background-color: hsl(165 80% 40%);
	border-color: hsl(165 80% 40%);
	color: hsl(0 0% 95%);
	font-family: 'IBM Plex Mono', monospace;
	transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: hsl(165 80% 50%);
	border-color: hsl(165 80% 50%);
	box-shadow: 0 0 15px hsl(165 80% 40% / 0.5);
}

.btn-default {
	background-color: hsl(0 0% 10%);
	border-color: hsl(165 80% 40% / 0.3);
	color: hsl(0 0% 90%);
	font-family: 'IBM Plex Mono', monospace;
	transition: all 0.3s ease;
}

.btn-default:hover,
.btn-default:focus {
	background-color: hsl(165 80% 40% / 0.1);
	border-color: hsl(165 80% 40%);
	color: hsl(165 80% 40%);
}

/* Form controls - comprehensive dark theme styling */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"], 
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	background-color: hsl(0 0% 6%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	color: hsl(0 0% 90%) !important;
	font-family: 'IBM Plex Mono', monospace;
	transition: all 0.3s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: hsl(165 80% 40%) !important;
	box-shadow: 0 0 0 2px hsl(165 80% 40% / 0.2) !important;
	background-color: hsl(0 0% 8%) !important;
	outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: hsl(0 0% 60%) !important;
	opacity: 1;
}

/* Additional form elements styling */
.input-group-addon {
	background-color: hsl(0 0% 8%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	color: hsl(0 0% 90%) !important;
}

.form-group label {
	color: hsl(0 0% 90%);
	font-family: 'IBM Plex Mono', monospace;
}

/* Select dropdown styling */
select option {
	background-color: hsl(0 0% 6%) !important;
	color: hsl(0 0% 90%) !important;
}

/* Checkbox and radio styling */
input[type="checkbox"],
input[type="radio"] {
	accent-color: hsl(165 80% 40%);
}

/* Bootstrap form overrides - ensure dark theme everywhere */
.form-control,
.form-control:focus,
.form-control:active,
.form-control:hover {
	background-color: hsl(0 0% 6%) !important;
	color: hsl(0 0% 90%) !important;
}

/* Ensure all inputs in all containers are dark */
.container input,
.tab-pane input,
.panel input,
.modal input,
div input {
	background-color: hsl(0 0% 6%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	color: hsl(0 0% 90%) !important;
}

/* Autofill styling fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px hsl(0 0% 6%) inset !important;
	-webkit-text-fill-color: hsl(0 0% 90%) !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* Jumbotron - clean, uniform design */
.jumbotron {
	background: linear-gradient(135deg, 
		hsl(0 0% 8% / 0.95), 
		hsl(0 0% 6% / 0.98)
	);
	border: none;
	border-left: 4px solid hsl(165 80% 40%);
	border-radius: 0 16px 16px 0;
	margin-bottom: 0;
	padding: 40px 50px;
	box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
	position: relative;
	overflow: hidden;
}

/* Add a subtle, uniform glow effect instead of stripes */
.jumbotron::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
		circle at 80% 20%,
		hsl(165 80% 40% / 0.08) 0%,
		hsl(165 80% 40% / 0.04) 40%,
		transparent 70%
	);
	pointer-events: none;
}

.jumbotron h1 {
	animation: glowPulse 4s infinite alternate;
	margin-bottom: 20px;
	font-size: 2.5em;
	position: relative;
	z-index: 1;
}

.jumbotron p {
	font-size: 1.2em;
	color: hsl(0 0% 80%);
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}

/* Animation keyframes */
@keyframes glowPulse {
	0% { text-shadow: 0 0 5px hsl(165 80% 40% / 0.5); }
	50% { text-shadow: 0 0 15px hsl(165 80% 40% / 0.8), 0 0 30px hsl(165 80% 40% / 0.4); }
	100% { text-shadow: 0 0 5px hsl(165 80% 40% / 0.5); }
}

/* Alerts */
.alert {
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	display: block;
	background-color: hsl(0 0% 6%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(0 0% 90%);
}

.alert-warning {
	border-color: hsl(45 100% 60% / 0.5);
	background-color: hsl(45 100% 10% / 0.8);
	color: hsl(45 100% 80%);
}

.alert-danger {
	border-color: hsl(0 62% 50% / 0.5);
	background-color: hsl(0 62% 10% / 0.8);
	color: hsl(0 62% 80%);
}

.alert-success {
	border-color: hsl(120 60% 50% / 0.5);
	background-color: hsl(120 60% 10% / 0.8);
	color: hsl(120 60% 80%);
}

#fees .txi_regular {
	background: hsl(0 0% 20%);
	border: 1px solid hsl(165 80% 40% / 0.3);
}

#fees .txi_segwit {
	background: hsl(200 80% 20%);
	border: 1px solid hsl(200 80% 40% / 0.5);
}

#fees .txi_multisig {
	background: hsl(120 80% 20%);
	border: 1px solid hsl(120 80% 40% / 0.5);
}

#fees .txi_hodl {
	background: hsl(45 80% 20%);
	border: 1px solid hsl(45 80% 40% / 0.5);
}

#fees .txi_unknown {
	background: hsl(0 80% 20%);
	border: 1px solid hsl(0 80% 40% / 0.5);
}

#fees .txo_p2pkh {
	background: hsl(300 80% 20%);
	border: 1px solid hsl(300 80% 40% / 0.5);
}

#fees .txo_p2sh {
	background: hsl(60 80% 20%);
	border: 1px solid hsl(60 80% 40% / 0.5);
}

#fees .txinputs {
	background-color: hsl(0 0% 8%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	padding: 10px;
	border-radius: 4px;
}

#fees .txoutputs {
	background-color: hsl(0 0% 8%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	padding: 10px;
	border-radius: 4px;
}

.hideOverflow {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

#fees .slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 30px;
	outline: none; 
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border: 2px dotted hsl(165 80% 40% / 0.5);
	background-color: hsl(0 0% 8%);
	border-radius: 4px;
}

#fees .sliderbtn {
	height: 30px;
	width: 30px;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: hsl(165 80% 40%);
	color: hsl(0 0% 95%);
	border-radius: 4px;
	transition: all 0.3s ease;
}

#fees .sliderbtn:hover {
	background-color: hsl(165 80% 50%);
	box-shadow: 0 0 10px hsl(165 80% 40% / 0.5);
}

#fees .slider:hover {
	opacity: 1;
}

#fees .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	border: 0;
	background: hsl(165 80% 40%);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 10px hsl(165 80% 40% / 0.5);
}

#fees .slider::-moz-range-thumb {
	width: 32px;
	height: 32px;
	border: 0;
	background: hsl(165 80% 40%);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 10px hsl(165 80% 40% / 0.5);
}

#fees .total {
	font-size: 100px;
	color: hsl(165 80% 40%);
	text-shadow: 0 0 15px hsl(165 80% 40% / 0.8);
	font-family: 'IBM Plex Mono', monospace;
}

/* Tab styling - cleaner, less boxy */
.nav-tabs {
	border-bottom: 2px solid hsl(165 80% 40% / 0.3);
	margin-bottom: 0;
}

.nav-tabs > li > a {
	color: hsl(0 0% 70%);
	background-color: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	font-family: 'IBM Plex Mono', monospace;
	border-radius: 0;
	transition: all 0.3s ease;
	padding: 15px 20px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: hsl(165 80% 40%);
	background-color: transparent;
	border: none;
	border-bottom: 3px solid hsl(165 80% 40%);
}

.nav-tabs > li > a:hover {
	color: hsl(165 80% 40%);
	background-color: hsl(165 80% 40% / 0.05);
	border-bottom: 3px solid hsl(165 80% 40% / 0.5);
}

/* Tab content - remove the boxy appearance */
.tab-content {
	background-color: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
}

.tab-pane {
	padding: 20px 0;
	display: none;
}

.tab-pane.active {
	display: block;
}

/* Features section styling */
.features-section {
	margin-top: 40px;
	padding: 0;
}

.feature-card {
	padding: 30px 20px;
	margin-bottom: 30px;
	background: linear-gradient(135deg, 
		hsl(0 0% 8% / 0.9), 
		hsl(0 0% 6% / 0.95), 
		hsl(0 0% 10% / 0.8)
	);
	border: 1px solid hsl(165 80% 40% / 0.25);
	border-radius: 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 16px hsl(0 0% 0% / 0.2);
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		hsl(165 80% 40%), 
		hsl(165 80% 50%), 
		hsl(165 80% 40%)
	);
	border-radius: 16px 16px 0 0;
}

/* Add a subtle noise texture overlay to prevent banding */
.feature-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
		circle at 25% 25%, 
		hsl(165 80% 40% / 0.02) 0%, 
		transparent 50%
	),
	radial-gradient(
		circle at 75% 75%, 
		hsl(165 80% 40% / 0.015) 0%, 
		transparent 50%
	);
	pointer-events: none;
}

.feature-card:hover {
	transform: translateY(-8px);
	border-color: hsl(165 80% 40% / 0.4);
	box-shadow: 0 12px 32px hsl(165 80% 40% / 0.15);
}

.feature-card h3 {
	margin-top: 0;
	margin-bottom: 15px;
	color: hsl(165 80% 40%);
	font-size: 1.3em;
	position: relative;
	z-index: 2;
}

.feature-card h3 .glyphicon {
	margin-right: 10px;
	font-size: 0.9em;
}

.feature-card p {
	margin-bottom: 0;
	line-height: 1.6;
	color: hsl(0 0% 85%);
	position: relative;
	z-index: 2;
}

/* General tab-pane styling to avoid excessive borders */
.tab-pane {
	padding: 30px 20px;
	background: transparent;
}

/* Remove excessive borders from panels when they appear in tabs */
.tab-pane .panel {
	background: linear-gradient(135deg, hsl(0 0% 6% / 0.8), hsl(0 0% 8% / 0.6));
	border: 1px solid hsl(165 80% 40% / 0.2);
	border-radius: 12px;
}

.tab-pane .panel-heading {
	background: linear-gradient(135deg, hsl(0 0% 8%), hsl(0 0% 10%));
	border-bottom: 1px solid hsl(165 80% 40% / 0.3);
	border-radius: 12px 12px 0 0;
}

/* Clean up container spacing */
#content.container {
	padding-top: 20px;
}

/* Page header styling */
.tab-pane h2 {
	margin-top: 0;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 2px solid hsl(165 80% 40% / 0.3);
}

/* Panels */
.panel {
	background-color: hsl(0 0% 6%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.panel-default > .panel-heading {
	background-color: hsl(0 0% 8%);
	border-bottom: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(165 80% 40%);
	font-family: 'IBM Plex Mono', monospace;
}

.panel-body {
	background-color: hsl(0 0% 6%);
	color: hsl(0 0% 90%);
}

/* Table styling */
.table {
	color: hsl(0 0% 90%);
	background-color: hsl(0 0% 6%);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: hsl(0 0% 8%);
}

.table-bordered {
	border: 1px solid hsl(165 80% 40% / 0.3);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
	border: 1px solid hsl(165 80% 40% / 0.3);
}

.table > thead > tr > th {
	border-bottom: 2px solid hsl(165 80% 40% / 0.5);
	color: hsl(165 80% 40%);
	font-family: 'IBM Plex Mono', monospace;
}

/* Wells */
.well {
	background-color: hsl(0 0% 8%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	border-radius: 8px;
	color: hsl(0 0% 90%);
}

/* Progress bars */
.progress {
	background-color: hsl(0 0% 8%);
	border: 1px solid hsl(165 80% 40% / 0.3);
}

.progress-bar {
	background-color: hsl(165 80% 40%);
	box-shadow: 0 0 10px hsl(165 80% 40% / 0.5);
}

/* Glyphicons coloring */
.glyphicon {
	color: hsl(165 80% 40%);
}

/* Fix alignment of the plus icon in wallet spend section */
.addressAdd {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 34px !important; /* Match input field height */
	width: 34px !important;
	margin-left: 10px !important;
	vertical-align: middle !important;
	text-decoration: none !important;
	background-color: hsl(0 0% 8%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
}

.addressAdd:hover,
.addressAdd:focus {
	background-color: hsl(165 80% 40% / 0.1) !important;
	border-color: hsl(165 80% 40%) !important;
	text-decoration: none !important;
}

.addressAdd .glyphicon {
	font-size: 14px !important;
	line-height: 1 !important;
	position: relative !important;
	top: -1px !important; /* Move up slightly for better vertical centering */
	left: 0.5px !important; /* Move right slightly for better horizontal centering */
}

/* Style plus/minus buttons in MultiSig and other forms */
.pubkeyAdd,
.pubkeyRemove,
.addressRemove,
.addressRemoveTo,
.addressAddTo,
.txidAdd,
.txidRemove,
.txidClear {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 34px !important; /* Match input field height */
	width: 34px !important;
	margin-left: 10px !important;
	vertical-align: middle !important;
	text-decoration: none !important;
	background-color: hsl(0 0% 8%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
}

.pubkeyAdd:hover,
.pubkeyAdd:focus,
.pubkeyRemove:hover,
.pubkeyRemove:focus,
.addressRemove:hover,
.addressRemove:focus,
.addressRemoveTo:hover,
.addressRemoveTo:focus,
.addressAddTo:hover,
.addressAddTo:focus,
.txidAdd:hover,
.txidAdd:focus,
.txidRemove:hover,
.txidRemove:focus,
.txidClear:hover,
.txidClear:focus {
	background-color: hsl(165 80% 40% / 0.1) !important;
	border-color: hsl(165 80% 40%) !important;
	text-decoration: none !important;
}

.pubkeyAdd .glyphicon,
.pubkeyRemove .glyphicon,
.addressRemove .glyphicon,
.addressRemoveTo .glyphicon,
.addressAddTo .glyphicon,
.txidAdd .glyphicon,
.txidRemove .glyphicon,
.txidClear .glyphicon {
	font-size: 14px !important;
	line-height: 1 !important;
	position: relative !important;
	top: -1px !important; /* Move up slightly for better vertical centering */
	left: 0.5px !important; /* Move right slightly for better horizontal centering */
}

/* Hide the initial txidClear button when there's only one input row */
#inputs .row.inputs:first-child .txidClear {
	display: none !important;
}

/* Improve spacing in wallet Keys section */
#walletKeys label {
	margin-top: 20px !important;
	margin-bottom: 8px !important;
}

#walletKeys label:first-child {
	margin-top: 0 !important; /* No top margin for first label */
}

#walletKeys .form-control:not(.input-group .form-control) {
	margin-bottom: 5px !important;
}

#walletKeys .walletSegWitRS {
	margin-top: 15px !important;
}

/* Improve spacing in wallet login form */
.form-signin .form-control {
	margin-bottom: 15px !important;
}

.form-signin .form-control:last-of-type {
	margin-bottom: 10px !important; /* Less margin for the last input before the br tag */
}

/* Improve spacing in all "New" tab pages */
.tab-pane label {
	margin-top: 20px !important;
	margin-bottom: 8px !important;
	display: block !important;
}

.tab-pane label:first-of-type {
	margin-top: 0 !important; /* No top margin for first label */
}

.tab-pane .form-control:not(.input-group .form-control) {
	margin-bottom: 8px !important;
}

.tab-pane .input-group {
	margin-bottom: 8px !important;
}

/* Fix radio button layout in Time Locked Address page */
#timeLockedRbTypeBox {
	line-height: 2 !important;
	margin: 20px 0 !important;
}

#timeLockedRbTypeBox input[type="radio"] {
	margin: 0 2px 0 15px !important;
	vertical-align: middle !important;
}

#timeLockedRbTypeBox label {
	display: inline !important;
	margin: 0 12px 0 0 !important;
	font-weight: normal !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

/* Ensure radio button container doesn't wrap awkwardly */
#timeLockedRbTypeBox {
	white-space: normal !important;
	word-break: break-word !important;
}

/* Style radio buttons to match the theme */
#timeLockedRbTypeBox input[type="radio"] {
	accent-color: hsl(165 80% 40%) !important;
	transform: scale(1.2) !important;
}

/* Calendar/DateTimePicker styling to match quantum theme */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td.active:focus {
	background-color: hsl(165 80% 40%) !important;
	color: hsl(0 0% 95%) !important;
	border-color: hsl(165 80% 40%) !important;
}

.bootstrap-datetimepicker-widget table td.today,
.bootstrap-datetimepicker-widget table td.today:hover,
.bootstrap-datetimepicker-widget table td.today:focus {
	background-color: hsl(165 80% 40% / 0.3) !important;
	color: hsl(0 0% 90%) !important;
	border-color: hsl(165 80% 40%) !important;
}

.bootstrap-datetimepicker-widget table td.today:before,
.bootstrap-datetimepicker-widget table td.today:after {
	border-top-color: hsl(165 80% 40%) !important;
	border-bottom-color: hsl(165 80% 40%) !important;
	border-left-color: hsl(165 80% 40%) !important;
	border-right-color: hsl(165 80% 40%) !important;
}

.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td span.active:hover,
.bootstrap-datetimepicker-widget table td span.active:focus {
	background-color: hsl(165 80% 40%) !important;
	color: hsl(0 0% 95%) !important;
}

.bootstrap-datetimepicker-widget table td:hover,
.bootstrap-datetimepicker-widget table td span:hover {
	background-color: hsl(165 80% 40% / 0.1) !important;
	color: hsl(165 80% 40%) !important;
}

/* Completely override ALL time picker hover effects with one unified approach */
.bootstrap-datetimepicker-widget .timepicker table td,
.bootstrap-datetimepicker-widget .timepicker-picker table td,
.bootstrap-datetimepicker-widget .timepicker table td *,
.bootstrap-datetimepicker-widget .timepicker-picker table td * {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
}

.bootstrap-datetimepicker-widget .timepicker table td:hover,
.bootstrap-datetimepicker-widget .timepicker-picker table td:hover,
.bootstrap-datetimepicker-widget .timepicker table td *:hover,
.bootstrap-datetimepicker-widget .timepicker-picker table td *:hover {
	background-color: transparent !important;
	background-image: none !important;
}

/* Single clean hover effect only on td level */
.bootstrap-datetimepicker-widget .timepicker table td:hover,
.bootstrap-datetimepicker-widget .timepicker-picker table td:hover {
	background-color: hsl(165 80% 40% / 0.1) !important;
	color: hsl(165 80% 40%) !important;
}

/* Fix date/time toggle buttons with same approach */
.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .picker-switch *,
.bootstrap-datetimepicker-widget table thead tr:first-child th,
.bootstrap-datetimepicker-widget table thead tr:first-child th * {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
}

.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget .picker-switch *:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th *:hover {
	background-color: transparent !important;
	background-image: none !important;
}

/* Single clean hover effect for toggle buttons */
.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
	background-color: hsl(165 80% 40% / 0.1) !important;
	color: hsl(165 80% 40%) !important;
}

/* Add rounded corners to toggle buttons for consistency */
.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget table thead tr:first-child th {
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
}

.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
	border-radius: 8px !important;
}

/* Fix blue btn-info buttons to match quantum theme */
.btn-info {
	background-color: hsl(165 80% 40%) !important;
	border-color: hsl(165 80% 40%) !important;
	color: hsl(0 0% 95%) !important;
	font-family: 'IBM Plex Mono', monospace !important;
	transition: all 0.3s ease !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
	background-color: hsl(165 80% 50%) !important;
	border-color: hsl(165 80% 50%) !important;
	color: hsl(0 0% 95%) !important;
	box-shadow: 0 0 15px hsl(165 80% 40% / 0.5) !important;
}

/* Ensure glyphicons are visible in btn-info buttons */
.btn-info .glyphicon {
	color: hsl(0 0% 95%) !important;
	opacity: 1 !important;
}

.bootstrap-datetimepicker-widget {
	background-color: hsl(0 0% 6%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	color: hsl(0 0% 90%) !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
	background-color: hsl(165 80% 40% / 0.1) !important;
	color: hsl(165 80% 40%) !important;
}

/* Fix unwanted hover effects in time picker */
.bootstrap-datetimepicker-widget .timepicker-picker table td {
	padding: 0 !important;
}

.bootstrap-datetimepicker-widget .timepicker-picker table td:not(.separator):hover {
	background-color: hsl(165 80% 40% / 0.1) !important;
	color: hsl(165 80% 40%) !important;
}

.bootstrap-datetimepicker-widget .timepicker-picker table td.separator,
.bootstrap-datetimepicker-widget .timepicker-picker table td.separator:hover {
	background-color: transparent !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* Remove hover effects from non-interactive time picker areas */
.bootstrap-datetimepicker-widget .timepicker table td.separator,
.bootstrap-datetimepicker-widget .timepicker table td.separator:hover,
.bootstrap-datetimepicker-widget .timepicker-picker td.separator,
.bootstrap-datetimepicker-widget .timepicker-picker td.separator:hover {
	background-color: transparent !important;
	color: hsl(0 0% 90%) !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* QR Code styling for wallet page */
#walletQrCode {
	display: inline-block !important;
	padding: 20px !important;
	background: linear-gradient(135deg, 
		hsl(0 0% 8% / 0.9), 
		hsl(0 0% 6% / 0.95)
	) !important;
	border: 2px solid hsl(165 80% 40% / 0.4) !important;
	border-radius: 16px !important;
	box-shadow: 
		0 0 20px hsl(165 80% 40% / 0.2),
		0 8px 24px hsl(0 0% 0% / 0.3),
		inset 0 1px 0 hsl(165 80% 40% / 0.1) !important;
	position: relative !important;
	margin: 10px !important;
}

#walletQrCode::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, 
		hsl(165 80% 40% / 0.6),
		transparent 30%,
		transparent 70%,
		hsl(165 80% 40% / 0.6)
	);
	border-radius: 18px;
	z-index: -1;
	animation: qrGlow 3s ease-in-out infinite alternate;
}

@keyframes qrGlow {
	0% { opacity: 0.5; }
	100% { opacity: 1; }
}

/* Advanced QR Code Hover Effects */
#walletQrCode:hover {
	transform: scale(1.02) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 
		0 0 30px hsl(165 80% 40% / 0.4),
		0 12px 32px hsl(0 0% 0% / 0.4),
		inset 0 1px 0 hsl(165 80% 40% / 0.2) !important;
}

#qrcode:hover {
	transform: scale(1.02) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 
		0 0 30px hsl(165 80% 40% / 0.4),
		0 12px 32px hsl(0 0% 0% / 0.4),
		inset 0 1px 0 hsl(165 80% 40% / 0.2) !important;
}

/* Style the QR code canvas/image inside */
#walletQrCode canvas,
#walletQrCode img {
	border-radius: 8px !important;
	background-color: hsl(0 0% 8%) !important;
	padding: 4px !important;
	border: 1px solid hsl(165 80% 40% / 0.2) !important;
	/* Advanced visual effects */
	filter: contrast(1.1) brightness(1.05) !important;
	/* Subtle pixelation effect for aesthetic enhancement */
	image-rendering: pixelated !important;
	image-rendering: -moz-crisp-edges !important;
	image-rendering: crisp-edges !important;
}

/* QR Code styling for modal popups */
#qrcode {
	display: inline-block !important;
	padding: 20px !important;
	background: linear-gradient(135deg, 
		hsl(0 0% 8% / 0.9), 
		hsl(0 0% 6% / 0.95)
	) !important;
	border: 2px solid hsl(165 80% 40% / 0.4) !important;
	border-radius: 16px !important;
	box-shadow: 
		0 0 20px hsl(165 80% 40% / 0.2),
		0 8px 24px hsl(0 0% 0% / 0.3),
		inset 0 1px 0 hsl(165 80% 40% / 0.1) !important;
	position: relative !important;
	margin: 10px !important;
}

#qrcode::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, 
		hsl(165 80% 40% / 0.6),
		transparent 30%,
		transparent 70%,
		hsl(165 80% 40% / 0.6)
	);
	border-radius: 18px;
	z-index: -1;
	animation: qrGlow 3s ease-in-out infinite alternate;
}

/* Style the QR code canvas/image inside modal */
#qrcode canvas,
#qrcode img {
	border-radius: 8px !important;
	background-color: hsl(0 0% 8%) !important;
	padding: 4px !important;
	border: 1px solid hsl(165 80% 40% / 0.2) !important;
	/* Advanced visual effects */
	filter: contrast(1.1) brightness(1.05) !important;
	/* Subtle pixelation effect for aesthetic enhancement */
	image-rendering: pixelated !important;
	image-rendering: -moz-crisp-edges !important;
	image-rendering: crisp-edges !important;
}

/* Modal styling */
.modal-content {
	background-color: hsl(0 0% 6%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(0 0% 90%);
}

.modal-header {
	border-bottom: 1px solid hsl(165 80% 40% / 0.3);
}

.modal-footer {
	border-top: 1px solid hsl(165 80% 40% / 0.3);
}

/* Modal close button styling */
.modal-header .close {
	color: hsl(0 0% 90%) !important;
	opacity: 0.8 !important;
	text-shadow: none !important;
	font-size: 24px !important;
	font-weight: normal !important;
	transition: all 0.3s ease !important;
}

.modal-header .close:hover,
.modal-header .close:focus {
	color: hsl(165 80% 40%) !important;
	opacity: 1 !important;
	text-shadow: 0 0 8px hsl(165 80% 40% / 0.5) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: hsl(0 0% 6%);
}

::-webkit-scrollbar-thumb {
	background-color: hsl(165 80% 40% / 0.5);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: hsl(165 80% 40%);
}

/* Link styling */
a {
	color: hsl(165 80% 40%);
	transition: all 0.3s ease;
}

a:hover,
a:focus {
	color: hsl(165 80% 60%);
	text-decoration: none;
	text-shadow: 0 0 5px hsl(165 80% 40% / 0.5);
}

/* Text color overrides */
p, span, div {
	color: hsl(0 0% 90%);
}

small {
	color: hsl(0 0% 70%);
}

/* HR styling */
hr {
	border-top: 1px solid hsl(165 80% 40% / 0.3);
	border-bottom: 0;
}

/* Code styling */
code, pre {
	background-color: hsl(0 0% 8%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(165 80% 40%);
	font-family: 'IBM Plex Mono', monospace;
}

/* Label styling */
.label-primary {
	background-color: hsl(165 80% 40%);
}

.label-default {
	background-color: hsl(0 0% 20%);
	color: hsl(0 0% 90%);
}

/* Badge styling */
.badge {
	background-color: hsl(165 80% 40%);
	color: hsl(0 0% 95%);
}

/* List group styling */
.list-group-item {
	background-color: hsl(0 0% 6%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(0 0% 90%);
}

.list-group-item:hover {
	background-color: hsl(165 80% 40% / 0.1);
}

/* Pagination styling */
.pagination > li > a,
.pagination > li > span {
	background-color: hsl(0 0% 6%);
	border: 1px solid hsl(165 80% 40% / 0.3);
	color: hsl(165 80% 40%);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
	background-color: hsl(165 80% 40% / 0.1);
	border-color: hsl(165 80% 40%);
}

.pagination > .active > a,
.pagination > .active > span {
	background-color: hsl(165 80% 40%);
	border-color: hsl(165 80% 40%);
	color: hsl(0 0% 95%);
}

/* Nuclear option: Force dropdown styling with maximum specificity */
body .navbar .nav .dropdown .dropdown-menu,
body .dropdown-menu,
ul.dropdown-menu {
	background-color: hsl(0 0% 6%) !important;
	border: 1px solid hsl(165 80% 40% / 0.3) !important;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
	border-radius: 8px !important;
}

body .navbar .nav .dropdown .dropdown-menu > li > a,
body .dropdown-menu > li > a,
ul.dropdown-menu > li > a {
	color: hsl(0 0% 90%) !important;
	background-color: transparent !important;
}

body .navbar .nav .dropdown .dropdown-menu > li > a:hover,
body .navbar .nav .dropdown .dropdown-menu > li > a:focus,
body .dropdown-menu > li > a:hover,
body .dropdown-menu > li > a:focus,
ul.dropdown-menu > li > a:hover,
ul.dropdown-menu > li > a:focus {
	color: hsl(165 80% 40%) !important;
	background-color: hsl(165 80% 40% / 0.1) !important;
}