/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 	-webkit-appearance: none;
	margin: 0;
}
input[type=number] {
	-moz-appearance: textfield;
	background: none;
	color: #FFF;
	border: none;
	border-bottom: solid 1px #FFF;
	font-size: 34px;
	width: 60px;
	text-align: center;
}
#subnetworks {
	font-size: 24px;
	width: 100px;
}
.submit {
	background: none;
	outline: none;
	border: solid 1px #FFF;
	color: #FFF;
	font-size: 16px;
	padding: 10px;
	transition: all .2s ease-in-out;
}
.submit:hover {
	cursor: pointer;
	background-color: #FFF;
	color: #000;
}
.submit:focus {
	cursor: pointer;
	background-color: #FFF;
	color: #000;
}
#error-box {
	color: #F00;
}
#inputs {
	text-align: center;
}

#subnetworks {
	background: none;
	color: #FFF;
}
.table-scroll {
	overflow-x: auto;
	width: 100%;
}

.submit {
	margin-top: 5px;
}
#subnets-input-container .submit {
	width: 230px;
}

/* default - 1st page */
#subnets-input-container {
	display: none;
}
#nohosts-page {
	display: none;
}
#ans {
	display: none;
}
#circle-canvas {
	width: 800px;
	margin: 20px auto;
}
#table {
	margin-top: 30px;
	margin-bottom: 40px;
}
#table.light {
	color: #000;
	position: relative;
}
#table.light::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -20px;
	left: -20px;
	bottom: -20px;
	right: -20px;
	background-color: #FFF;
}
#table.light th {
	border: solid 1px #000;
}