.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

body {
  background-color: #282a2e;
  color: #c5c8c6;
  padding-top: 20px;
}

textarea, input, button, select {
  outline: none;
}

textarea, input, pre.output-field {
  background-color: #1d1f21;
  color: #c5c8c6;
  font-family: Anonymous Pro,Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  font-size: 14px;
  border: 1px solid #373b41;
}

pre.output-field {
  overflow: scroll;
}

a {
  color: #668fcc;
}

a:hover {
  color: #cc6666;
}

label {
  cursor: pointer;
  font-weight: normal;
}

hr {
  border-color: #373b41;
}

#input {
  width: 100%;
  height: 150px;
}

#hmac_hashing_secret {
  width: 100%;
}

#hmac_hashing_message_digest {
  width:70px;
}

.btn.btn-default {
  background-color: transparent;
  color: inherit;
  border-color: #373b41;
  margin-top: 2px;
}

.output-field {
  width: 100%;
  height: 150px;
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
  margin-bottom: 0px;
}

.output-field.large {
  height: 550px;
  min-height: 550px;
  overflow: scroll;
}

.output-field .close {
  float: none;
  font-size: inherit;
  font-weight: normal;
  line-height: inherit;
  color: #f0c674;
  text-shadow: none;
  opacity: 1;
  cursor: inherit;
}

.use-as-input, .view-larger {
  float: right;
  margin-top: 2px;
  margin-right: 5px;
  cursor: pointer;
}

.nav-tabs {
  border-bottom: 1px solid #373b41;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  background-color: #282a2e;
  color: #c5c8c6;
  cursor: default;
  border: 1px solid #373b41;
  border-bottom-color: transparent;
}

.nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
  background-color: #373b41;
  border-color: #373b41;
  color: inherit;
  outline: none;
}

.tab-content {
  margin-top: 20px;
}

.modal-dialog.modal-lg {
  width: 900px;
}

.modal-content {
  background-color: #282a2e;
  color: #c5c8c6;
}

.modal-header, .modal-footer {
  border-color: #373b41;
}

#about {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 11px;
  color: #969896;
}

#about a {
  color: #c5c8c6;
}

.noscript {
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #282a2e;
  text-align: center;
  padding-top: 20%;
}

.loader {
  background: #282a2e url('../images/loader.gif') top left no-repeat;
  width: 16px;
  height: 16px;
  display: none;
  vertical-align: middle;
}