:root{
	--dark-color: #1d1d1d;
	--light-color: #ffffff;
	--active-color: #d51313;
	--hover-color: #e9e9e9;
	--width-of-autocomplete-text-input: 320px;
	--width-of-button-input: 40px;
	--itemHeight: 17px;
	--threeitemsheight: calc((5 * var(--itemHeight)) + 18px);
}
body{
	box-sizing: border-box;
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
h1,h2,h3,label{
	font-weight: 900;
	line-height: 1.7;
}
h1{
	font-size:24px;
}
h2{
	font-size:22px;
}
h3{
	font-size:20px;
}
.autocomplete {
  	/*the container must be positioned relative:*/
  	position: relative;
  	display: inline-block;
  	width:var(--width-of-autocomplete-text-input);
  	border-top: 1px solid var(--dark-color);
  	border-left: 1px solid var(--dark-color);
  	border-right: 1px solid var(--dark-color);
  	border-bottom: 1px solid var(--dark-color);
}
label{
	display: block;
	text-align: center;
	width:100%;
	padding-bottom: 10px;
}
.autocomplete-input, .autocomplete-input:focus, .autocomplete-input:active{
  	padding: 5px;
  	font-size: 14px;
	border-radius: 30px;
}
.autocomplete-input-text{
  	background-color: var(--light-color);
  	width:calc(var(--width-of-autocomplete-text-input) - 70px);
	height: var(--width-of-button-input);
	position: relative;
	left: -25px;
	top:0px;
	outline: none;
	border: none;
}
.autocomplete-submit-button{
  	background-color: var(--dark-color);
  	color: var(--light-color);
  	width: var(--width-of-button-input);
	height: var(--width-of-button-input);
	padding: 2px;
	position: absolute;
	top:5px;
	right:10px;
	border: none;
	outline: none;
	cursor: pointer;
}
.autocomplete-submit-button:hover{
	background-color: var(--active-color);
	
}
.suggest-box-array, .suggest-box-json {
      scrollbar-width: thin;
      scrollbar-color: var(--dark-color) transparent;
}
.suggest-box-array::-webkit-scrollbar, .suggest-box-json::-webkit-scrollbar {
      width: 5px;
      height: 5px;
}
.suggest-box-array::-webkit-scrollbar-track, .suggest-box-json::-webkit-scrollbar-track {
      background-clip: content-box;
      border: 2px solid transparent;
      border-radius: 10px;
	  background-color: var(--hover-color);
}
.suggest-box-array::-webkit-scrollbar-thumb, .suggest-box-json::-webkit-scrollbar-thumb {
      background-color: var(--dark-color);
      border-radius: 10px;
}
.suggest-box-array::-webkit-scrollbar-thumb:hover, .suggest-box-json::-webkit-scrollbar-thumb:hover {
      background-color:var(--dark-color);
}
.suggest-box-array::-webkit-scrollbar-corner, .suggest-box-json::-webkit-scrollbar-corner, .suggest-box-array::-webkit-scrollbar-track, .suggest-box-json::-webkit-scrollbar-track {
      background-color: var(--hover-color);
}
.autocomplete-active{
	/*when navigating through the items using the arrow keys:*/
	background-color: var(--active-color) !important;
	color: var(--light-color);
}

/* Array */
.suggest-box-array .row{
  display: flex;
  outline: none;
  border-bottom: none;
  outline: none;
}
.suggest-box-array{
	overflow-y: scroll;
	position: absolute;
	z-index: 99;
	width:calc(var(--width-of-autocomplete-text-input) + 12px);
	max-height: calc(var(--threeitemsheight) + 9px);
	/*position the autocomplete items to be the same width as the container:*/
	top: 50px;
	left:-1px;
	right: 0px;
	outline: none;
}
.suggest-box-array ul{
	padding: 0px;
	margin: 0px;
	outline: none;
}
.suggest-box-array ul li{
  	list-style: none;
	text-align: left;
	overflow-x: hidden;
	white-space: nowrap;
	margin-right: 5px;
	cursor: pointer;
	outline: none;
	padding: 10px;
	background-color: var(--light-color);
	border-top: 1px solid var(--dark-color);
	border-right: 1px solid var(--dark-color);
	border-left: 1px solid var(--dark-color);
}
.suggest-box-array ul li:last-child{
	border-bottom: 1px solid var(--dark-color);
}
.suggest-box-array ul li:hover{
  	/*when hovering an item:*/
	background-color: var(--hover-color);
}
/* End of Array */

/* JSON */
.suggest-box-json .row{
  display: flex;
  outline: none;
  border-bottom: none;
  outline: none;
}
.suggest-box-json{
	overflow-y: scroll;
	position: absolute;
	z-index: 99;
	width:calc(var(--width-of-autocomplete-text-input) + 12px);
	max-height: calc(var(--threeitemsheight) + 9px);
	/*position the autocomplete items to be the same width as the container:*/
	top: 50px;
	left:-1px;
	right: 0px;
	outline: none;
}
.suggest-box-json ul{
	padding: 0px;
	margin: 0px;
	outline: none;
}
.suggest-box-json ul li{
  	list-style: none;
	text-align: left;
	overflow-x: hidden;
	white-space: nowrap;
	margin-right: 5px;
	cursor: pointer;
	outline: none;
	padding: 10px;
	background-color: var(--light-color);
	border-top: 1px solid var(--dark-color);
	border-right: 1px solid var(--dark-color);
	border-left: 1px solid var(--dark-color);
}
.suggest-box-json ul li:last-child{
	border-bottom: 1px solid var(--dark-color);
}
.suggest-box-json ul li:hover{
  	/*when hovering an item:*/
	background-color: var(--hover-color);
}
/* End of JSON */