.query-section {
	background-image: 
	linear-gradient(180deg,#101010,#3a3a3a); 
	padding-top:20px; 
	padding-bottom:20px; 
	margin-left:0px !important; 
	margin-right:0px !important;
}

.url-input-row {
	padding-left:15px !important;
}

.url-input-div {
	margin-top: -6px;
	float: left;
}

.url-action-div {
	width:250px; 
	max-width:250px; 
	margin-left:0px; 
	padding-top:3px; 
	color:#efefef;
	float:right;
}

.stat-panel {
	margin-top:20px; 
	margin-left:-5px;
}

.source-kv-td {
	line-height: 2.2em !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

.copy-btn {
	padding: 7px 8px !important;
	background-color: #4c8dd3 !important;
}

.copy-btn:hover {
	background-color: #356293 !important;
	transform: translateY(-3px);
}

.qs-input {
	padding: 6px;
	display: block;
	margin: 0;
	color: inherit;
	width: 100%;
	line-height: 1.8em !important;
	font-family: inherit;
	font-weight: inherit;
	border: 1px #eee;
	border-radius: 0.4rem;
	background-color: #eee;
	transition: box-shadow var(--transitionDuration);
}

/* ---- INPUT FIELD ----- */

.form__group {
	position: relative;
	padding: 15px 0 0;
	margin-bottom: 10px;
	width: 100%;
}
.form__label {
	position: absolute;
	top: 0;
	display: block;
	transition: 0.1s;
	font-size: 1rem;
	color: #9b9b9b;
}
.form__field {
	font-family: inherit;
	width: 100%;
	border: 0;
	border-bottom: 2px solid #9b9b9b;
	outline: 0;
	font-size: 1.3rem;
	color: #fff;
	padding: 7px 0;
	background: transparent;
	transition: border-color 0.2s;
	&::placeholder {
		color: transparent;
	}
	&:placeholder-shown ~ .form__label {
		font-size: 1.3rem;
		cursor: text;
		top: 20px;
	}
}
.form__field{
	&:required,&:invalid { box-shadow:none; }
}
.form__field:focus {
	~ .form__label {
	  position: absolute;
	  top: 0;
	  display: block;
	  transition: 0.1s;
	  font-size: 1rem;
	  color: #4c8dd3;   
	}
	padding-bottom: 6px;
	border-width: 3px;
	border-image: linear-gradient(to right, #81afe0, #4c8dd3);
	border-image-slice: 1;
}

@media (max-width: 525px) {

	.url-input-row {
		padding-left:5px !important;
	}

	.url-input-div {
		margin-top: -18px;
	}

	.form__label {
		position: absolute;
		top: 0;
		display: block;
		transition: 0.1s;
		font-size: 1rem;
		color: #9b9b9b;
	}		
	.form__field {
		&:placeholder-shown ~ .form__label {
			font-size: 1.0rem;
		}
	}
	.url-action-div {
		width: 175px; 
		max-width: 175px; 
		margin-left:0px; 
		padding-top:3px; 
		color:#efefef;
		float:right;
	}		
	.stat-panel {
		margin-top:15px;
	}
		
	.copy-btn {
		padding: 7px 8px !important;
		background-color: #4c8dd3 !important;
	}
}