style.css

:root {
	--white: #f6d3fd;
	--nkn-card-height: 250px;
	--nkn-card-width: 100%;
	--font: "Overpass Mono", monospaced;
	--masterFont: 'Poppins', sans-serif;
}



body{
	font-family: 'Poppins', sans-serif;
	color: #333;
	background-color: #f1f2f8;
}


/* HTML */ 
h1{
	color: #fff;
}
h4{
	font-size: clamp(1.25rem, 5vw, 2.5rem); ;
}
h4 small{
	font-size: 1rem;
}
table a{
	color: #333;
	text-decoration: none;
	border-bottom: 1px dotted #333;
	padding-bottom: .25rem;
}
table td {
	white-space: nowrap;
}


/* Bootstrap elements */ 
.btn{
	text-transform: uppercase;
}
.border-bottom{
	border-bottom: 3px solid #dee2e6 !important;
}

/* Custom elements */ 

.border-success{
	border: none !important;
	border-bottom: 3px solid #ACCBE1 !important;
}
.border-warning{
	border: none !important;;
	border-bottom: 3px solid #F4B942 !important; 
}
.border-alert{
	border: none !important;;
	border-bottom: 3px solid #F34213 !important; 
}
.border-start{
	border: none !important;;
	border-bottom: 3px solid #6FD08C !important; 
}
.bg-success{
	background-color: #ACCBE1 !important;
}
.bg-warning{
	background-color: #F4B942 !important;
}
.bg-alert{
	background-color: #F34213 !important;
	color: #fff; 
}
.bg-start{
	background-color: #6FD08C !important;
}
.bg-transparent{
	background-image: linear-gradient(90.78deg,#0b163c 17.75%,#303159 84.46%) !important;
}

.underline{
	display: inline-block;
	border-bottom: 1px dotted #4A4A8C;
	padding-bottom: .5rem;
	cursor: help;
}

/* Nav */ 
.nav-item{
	margin-right: 1rem;
}
.nav-item .active{
	font-weight: 600;
	padding-bottom: .25rem;
	border-bottom: 3px solid #fff;
}
.nav-link{
	font-size: 1.25rem;
	text-transform: uppercase
}

/* Common : Header */ 

.header{
	background-image: url('core/img/nkn.svg'),linear-gradient(90.78deg,#0b163c 17.75%,#303159 84.46%);
	background-position: left center;
	background-repeat: no-repeat;
	color: #fff;
	padding-top: 3rem;

}
.header p{
	font-weight: 700;
	text-transform: uppercase;
}


/* Login */ 

.form-signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: auto;
}
.form-signin h1{
	color: #333;
}

.form-signin .checkbox {
	font-weight: 400;
}

.form-signin .form-floating:focus-within {
	z-index: 2;
}

.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


/* Nodes page */ 

.nodes_status{}
.nodes_status span.nodes-stats, .nodes_status span.ext-stats, .nodes_status span.stats{
	font-size: clamp(1.5rem, 5vw, 2rem); 
}

/* Datatable */ 

table.dataTable tbody tr{
	background-color: transparent !important;
}
#nodes_length{
	float: right;
}
#nodes_paginate, #nodes_info{
	margin: 1rem 0;
}
#nodes table{
	text-align: center;
}
#nodes thead th{
	color: #6A6A6A; 
	font-size: 1.1rem;
	font-weight: 400;
}
#nodes thead th.sorting_asc, #nodes thead th.sorting_desc{
	color: #253A7E; 
}
.dataTables_wrapper .dataTables_filter{
	float: none !important;
	text-align: left !important;
	margin-bottom: 1rem;
	margin-top: -.5rem;
}
.dataTables_wrapper .dataTables_filter label input{}

/* Node Modal */ 

.modal .explain h5{
	font-size: 1rem; 
}
.modal .explain p{
	color: #4E4E4E;
	font-style: italic;
	font-weight: .8rem;
}

/* Modal Datatable */ 

#neighborstab_length{
	display: none;
}
#neighborstab_info, #neighborstab_paginate{
	margin: 1rem; 
}


/* Wallet */ 
.wallets_status{}
.wallets_status span.stats{
	font-size: clamp(1.5rem, 5vw, 2rem);  
}
.wallets_status h6 small{
	font-size: .8rem;
}
.wallets_status .red{
	color: red;
}
.wallets_status .green{
	color: green;
}

.single-transaction{
	background-color: rgba(255,255,255,.75);
	border-radius: .25rem;
	padding: 1rem;
	margin-bottom: 1rem;
	color: #333; 
}
.single-transaction .text-muted{
	font-size: .8rem;
}

#rewards{}
#rewards .inertable{
	color: #121b4299; 
}
#rewards .inertable thead th{
	font-weight: 400;
}

/* Footer */ 

.copyrights{
	font-size: .8rem;
}



#loading {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	background-image: url('core/img/nWatch.svg'),linear-gradient(90.78deg,#0b163c 17.75%,#303159 84.46%);
	background-repeat: no-repeat;
	background-position: center;
}



/* Json Beautifer */ 

pre{ line-height: .75rem; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }






/* Query */ 

@media only screen and (max-width: 640px){

	.dataTables_wrapper .dataTables_filter{
		margin-top: 1rem !important;
		margin-bottom: 1rem;
	}
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
		text-align: initial !important;
	}
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter label{
		width: 100%;
		text-transform: uppercase;
		font-weight: 700;
		color: #D8D8D8;
	}
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter label input{
		display: inline-block;
		width: 100%;
		margin-top: .5rem;
	}
	.my-5{
		margin-top: 2
	}

}