html {
	background-color: rgba(0, 0, 0, 0.212);
}
input, textarea, select { 
	background-color: transparent;
}
.table, .converter {
	border: 1px solid rgba(0, 0, 0, 0.281);
	border-radius: 10px;
	padding: 15px;
	background-color: white;
	min-width: 330px;
	width: 80%;
	margin: auto;
}

.flex_col {
	display: flex;
}
.col {
	display: inline;
	width: 33%;
	overflow: hidden;
	margin: 0px;
	padding: 5px;
	border: 1px solid black;
}
.flex_col:not(:first-child) {
	margin-top: -1px;
}
.col:not(:last-child) {
	margin-right: -1px;
}

.field_converter {
	display: inline-block;
	margin-right: 15px;
}
.convert_this {
	margin-bottom: 10px;
}
.convert_to {
	margin-bottom: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input,
input:hover,
input:focus {
    appearance: none;
    -moz-appearance: textfield;
	outline: none;
	border: none;
	padding-left: 10px;
}

input {
	margin-bottom: 10px;
	margin-top: 5px;
	height: 25px;
	outline: 1px solid rgb(157, 155, 255);
	border-radius: 10px;
}
input:hover {
	outline: 2px solid rgb(157, 155, 255);
}
input:focus {
	outline: 3px solid rgb(157, 155, 255);
}

select,
select:hover,
select:focus {
    appearance: none;
	padding-left: 10px;
}

select {
	margin-top: 5px;
	border: 0px solid rgb(157, 155, 255);
	outline: 1px solid rgb(157, 155, 255);
	border-radius: 10px;
	height: 25px;
}
select:hover {
	outline: 2px solid rgb(157, 155, 255);
}
select:focus {
	outline: 2px solid rgb(157, 155, 255);
}

.search {
	margin-left: 15px;
}


.loader {
	transform: rotateZ(45deg);
	perspective: 1000px;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	color: #fff;
  }
	.loader:before,
	.loader:after {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 45%;
	  left: 45%;
	  width: inherit;
	  height: inherit;
	  border-radius: 50%;
	  transform: rotateX(70deg);
	  animation: 1s spin linear infinite;
	}
	.loader:after {
	  color: #FF3D00;
	  transform: rotateY(70deg);
	  animation-delay: .4s;
	}

  @keyframes rotate {
	0% {
	  transform: translate(-50%, -50%) rotateZ(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotateZ(360deg);
	}
  }

  @keyframes rotateccw {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotate(-360deg);
	}
  }

  @keyframes spin {
	0%,
	100% {
	  box-shadow: .2em 0px 0 0px currentcolor;
	}
	12% {
	  box-shadow: .2em .2em 0 0 currentcolor;
	}
	25% {
	  box-shadow: 0 .2em 0 0px currentcolor;
	}
	37% {
	  box-shadow: -.2em .2em 0 0 currentcolor;
	}
	50% {
	  box-shadow: -.2em 0 0 0 currentcolor;
	}
	62% {
	  box-shadow: -.2em -.2em 0 0 currentcolor;
	}
	75% {
	  box-shadow: 0px -.2em 0 0 currentcolor;
	}
	87% {
	  box-shadow: .2em -.2em 0 0 currentcolor;
	}
  }