body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.App {
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  min-width: 100vw;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
}

.title {
  text-align: center;
}
#add-metric-button {
  background-color: #f15d22;
  color: white;
  outline: none;
  margin: 2.5em 0 1em 0.5em;
}
.download-confusion-matrix {
  background-color: #f15d22;
  height: 2em;
  border-radius: 0.15em;
  color: white;
  outline: none;
  margin: 2.5em 0 1em 0.5em;
  border: none;
}
.control-buttons {
  display: flex;
}
.csv-label {
  position: relative;
  bottom: 0.2em;
}
.csv {
  color: black;
  background-color: #659a37;
  color: white;
  outline: none;
  height: fit-content;
  margin: 0 0 0.2em 0.25em;
  width: fit-content;
  justify-self: end;
  border-radius: 0.1em;
  height: 2.4em;
  width: 3.2em;
  text-align: center;
  padding-top: 0.4em;
  border: none;
}
.csv:hover {
  text-decoration: none;
}
.exported-methods {
  border-radius: 0.15em;
  background-color: white;
  width: 18em;
  height: 22em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5em 0.5em 0 0.5em;
}
.controls {
  margin-top: 0.3em;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#download-button {
  background-color: #3498db;
  color: white;
  outline: none;
  height: fit-content;
  margin: 0 0 0.2em 0;
  width: fit-content;
  justify-self: end;
  border-radius: 0.1em;
}
#next-button {
  color: #3498db;
  outline: none;
  margin: 0 0 0.2em 0;
  width: fit-content;
  justify-self: end;
  border-radius: 0.1em;
}
#export-metric-button {
  background-color: #3498db;
  color: white;
  outline: none;
  margin: 2.5em 0 1em 0.5em;
}
.export-content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 0.4em;
  background-color: #f5f5f5;
}

.export-content::-webkit-scrollbar {
  width: 0.3em;
  background-color: #f5f5f5;
}

.export-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #9c9393;
}
.export-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 97%;
  overflow-y: auto;
  width: 100%;
}
.export-item {
  cursor: pointer;
  color: black;
  border-bottom: 0.08em #f0a666 solid;
  margin-bottom: 0.5em;
  padding-bottom: 0.2em;
}
.export-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.exported-methods-list {
  list-style: none;
  width: 100%;
  padding: 0;
}
#download-button:active,
#download-button:focus,
#add-metric-button:active,
#add-metric-button:focus,
#submit-metric-button:active,
#submit-metric-button:focus,
#export-metric-button:active,
#export-metric-button:focus,
.download-confusion-matrix:focus,
.download-confusion-matrix:active {
  outline: none;
  box-shadow: 0 0 0 0;
}
.error-message {
  color: red;
  font-size: 0.9em;
  position: relative;
  bottom: 1em;
  left: 1em;
}
.export-label {
  margin-left: 0.1em;
}
.selectAll {
  cursor: pointer;
}
.success {
  color: #5cb85c;
  display: inline;
  border: rgb(177, 177, 177) 0.085em solid;
  vertical-align: center;
}
.hidden {
  color: transparent;
  border: rgb(177, 177, 177) 0.085em solid;
  vertical-align: center;
}
.select-unselect {
  width: 100%;

  position: relative;
  left: 65%;
}

#add-metric-form {
  display: flex;
  margin-bottom: 2.5em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.table-header {
  cursor: pointer;
}
#submit-metric-button {
  background-color: #f15d22;
  margin: 1em 0 0 0;
  color: white;
  outline: none;
  width: fit-content;
  text-align: center;
  align-self: center;
}
.label-wrapper {
  margin-bottom: 1.5em;
}
.tspsns {
  margin-bottom: 1.5em;
}
.tpfntnfn {
  margin-bottom: 1.5em;
}
th {
  text-align: center;
}
.radar-wrapper {
  height: 30em;
  padding: 2em;
}

.confusion-matrix-wrapper {
  background-color: rgb(0, 0, 0);
  border-radius: 0.2em;
  text-align: center;
}
.method-label {
  font-size: 1.3em;
  color: white;
}
.confusion-matrix {
  background-color: white;
  height: 19em;
  width: 19em;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
.confusion-matrix-exported {
  background-color: white;
  height: 10em;
  width: 10em;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
.matrix-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 350;
  font-size: 2em;
}
.matrix-cell-exported {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 350;
  font-size: 1em;
}
.component-label {
  font-weight: 400;
}
.green {
  background-color: #e1fddc;
}
.red {
  background-color: #f8a9a8;
}
.settings {
  display: flex;
  justify-content: space-around;
}
.label-cell {
  cursor: pointer;
}
.label-cell-focus {
  cursor: pointer;
  background-color: #b8e6db;
}
.edit-method,
.delete-method {
  background-color: transparent;
  border: none;
}

.form-input {
  border-radius: 0.16rem;
  border: 0.04em solid rgb(105, 102, 102);
  height: 1.8em;
  outline: none;
  padding-left: 0.5em;
  width: 11em;
}
.input-wrapper {
  width: 22em;
  margin-top: 0.1em;
  padding-left: 1em;
  display: flex;
}
.intro {
  font-weight: 600;
  font-size: 1.4em;
  width: 100%;
  padding: 0 2.5em 0 2.5em;
  text-align: center;
}
.brand {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  width: 100%;
}
.brand-logo {
  height: 4.1em;
  width: 4.1em;
  position: relative;
  bottom: 0.4em;
  left: 0.2em;
}
footer {
  background-color: #f15d22;
  display: flex;
  font-size: 0.8em;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 2.6em;
  width: 100vw;
}
.github-repo {
  cursor: pointer;
  position: relative;
  left: 1.5em;
}

a,
a:hover {
  color: white;
}
label {
  font-weight: 600;
  width: 48%;
}
.input-conflict {
  margin-left: 0.5em;
  background-color: #ff9201;
  border-radius: 2em;
  padding: 0.2em 0.4em 0.2em 0.4em;
}
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.negative-error {
  border: 0.08em solid #d53a47;
}
.error-messages {
  text-align: justify;
  list-style: none;
  color: #d53a47;
}
.required-icon {
  color: red;
  font-size: 0.4em;
  position: relative;
  bottom: 1.1em;
  left: 0.2em;
}
.new-method-title {
  text-align: center;
  margin-top: 0.45em;
  margin-left: 0.3em;
}

.commands,
.commands:active,
.commands:focus {
  border: none;
  outline: none;
  background-color: transparent;
}
.sort-icon {
  position: relative;
  left: 0.5em;
}
.matrix-header {
  padding: 0 0.5em 0 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-matrix {
  color: white;
  cursor: pointer;
}
.close-export {
  color: black;
  cursor: pointer;
}
.tooltiped {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-tooltip {
  position: relative;
  right: 0.27em;
}
.custom-tooltip {
  max-width: 400px !important;
}
.navlink:hover {
  text-decoration: none;
}