@charset "utf-8";
/* CSS Document */

/* Color Format Converter */
.color-converter {
  margin: 22px 0;
}
/* Converter Input */
.converter-input {
  margin: 22px 0 8px;
}
.converter-help {
  margin: 0 0 10px;
  color: #777;
  font-size: 14px;
}
#color01 {
  display: block;
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  color: #333;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  outline: none;
  font-family: Consolas, monospace;
  font-size: 16px;
  transition: border-color 0.2s ease;
}
#color01:hover {
  border-color: #bbb;
}
#color01:focus {
  border-color: #0088cc;
}
#color01::placeholder {
  color: #999;
  opacity: 1;
}
.converter-error {
  min-height: 20px;
  margin-top: 5px;
  color: #dc3545;
  font-size: 14px;
}
/* Results */
#resultTable {
  width: 100%;
  margin-top: 10px !important;
}
#resultTable #result01 {
  width: 35%;
  min-width: 250px;
  padding: 0;
  background: rgb(128, 128, 128);
}
#resultTable td:first-child {
  width: 100px;
  color: #333;
  background: #f5f5f5;
  font-weight: 600;
}
#resultTable td:nth-child(2) {
  font-family: Consolas, monospace;
}
/* Responsive */
@media screen and (max-width: 767px) {
  #resultTable #result01 {
    width: 30%;
    min-width: 0;
  }
}