/* Copyright (c) 2021 Battelle Energy Alliance, LLC.  All rights reserved. */

html {
  font-family: sans-serif;
  line-height: 1.15;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #cecece;
  text-align: left;
  background-color: #272B30;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin-top: 0;
  margin-bottom: 0.5rem
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0.5rem
}

caption,
th {
  text-align: left;
}

header {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}

address {
  margin-bottom: 1rem;
  line-height: inherit
}

#container {
  width: 800px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
}

.c1 {
  width: 800px;
  float: left;
}

.c2 {
  width: 355px;
  float: left;
}

.c3 {
  width: 235px;
  float: left;
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

h1 {
  letter-spacing: 1px;
  text-align: center;
  text-shadow: #262729 0 -1px 0;
}

h2 {
  color: #bbb;
  text-shadow: #262729 0 -1px 0;
  font-weight: 300;
  text-align: center;
}

input {
  padding: 2px 10px;
  border-radius: 10px;
  border: solid 1px #555;
  float: left;
  margin-right: 10px;
  margin-bottom: 15px;
}

input:focus {
  border: none;
  outline: none;
  color: #007bff;
  font-weight: bold;
  border-top: solid 1px #aaa;
  border-right: solid 1px #e6e6e6;
  border-bottom: solid 1px #e6e6e6;
  border-left: solid 1px #aaa;
}

table {
  width: 100%;
  margin-bottom: 10px;
}

th {
  background-color: rgba(23, 25, 28, .8);
  border: solid 1px rgba(255, 255, 255, .1);
  padding: 10px 10px;
  text-align: center;
  font-weight: bold;
  color: #ddd;
  width: auto;
}

tr:hover {
  background-color: #454c54;
}

td {
  padding: 10px 10px;
  border: solid 1px rgba(255, 255, 255, .1);
  width: auto;
}

td.update,
td.remove,
td.type {
  text-align: center;
}

td.address {
  font-family: monospace;
}

button.add-btn,
button.update-btn,
button.cancel-btn,
button.edit-item-btn,
button.remove-item-btn {
  font-size: 1.33rem;
  border: 2px #ddd;
  border-radius: 4px;
}

button.save-btn,
button.export-btn,
button.import-btn,
button.restart-btn {
  font-size: 0.9rem;
}

#container.mapping-page {
  margin-top: 10px;
}

#mapping {
  margin-bottom: 20px;
}

#mapping td.update,
#mapping td.remove {
  width: 130px;
}

#mapping td.add {
  width: 300px;
  text-align: center;
}

#mapping td.foot {
  text-align: center;
}

#mapping input {
  width: 130px;
  margin: 0;
  border-radius: 5px;
}

#mapping input.search {
  width: 185px;
}