@font-face {
  font-family: Avenir-Black;
  src: url('Avenir-Black.otf');
}
* {
  margin: 0;
  padding: 0;
  color: #20c20e;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
  text-decoration: none;
  font-family: Avenir-Black;
}

body {
  background-color: #222222;
  /* background-image: linear-gradient(to right, #0a0027, #27012a); */
}

h1 {
  font-size: 3.5vmin;
  font-family: Avenir-Black;
  color: #20c20e;
  text-decoration: none;
}

p {
  font-size: 1.5vmin;
  font-family: Avenir-Black;
  color: white;
  text-decoration: none;
  text-align: center;
}

.navbar-container {
  background-color: #222222;
  /* background-image: linear-gradient(to left, #0a0027, #27012a); */
  width: 100%;
  height: 6vmin;
  padding: 1vmin;
  padding-left: 0.9vmin;
  padding-right: 0.9vmin;
  border-bottom: 1px solid #FF10F0;
}

.navbar-logo {
  float: left;
  height: 7vmin;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px solid #20c20e;
}

.navbar-link {
  color: white;
  background-color: #222222;
  float: left;
  padding: 1vmin;
  padding-right: 5vmin;
  padding-left: 5vmin;
  margin-left: 0.1vmin;
  margin-right: 0.1vmin;
  transition: 1s;
}

.navbar-link:hover {
  background-color: #121212;
  transition: 0.15s;
}

.navbar-text {
  color: #20c20e;
}

.box-pannel {
  position: relative;
  text-align: center;
  margin: 0 auto; /* centers element  */
  margin-top: 4vmin;
  width: 42vmin;
  background-color: black;
  border: 1px solid #20c20e;
  transition: 0.3s;
}

.box-text-head {
  position: static;
  margin-top: 2.5vmin;
  margin-top: 2.5vmin;
  padding-left: 0.5vmin;
  padding-right: 0.5vmin;
  padding-bottom: 2.5vmin;
  color: #20c20e;
  text-align: center;
}

.text {
  position: relative;
  text-align: center;
  font-size: 1.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: black;
  margin-bottom: 3vmin;
  width: 36vmin;
  height: 5vmin;
}

.text-4 {
  position: relative;
  text-align: center;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: black;
  margin: 1.5vmin;
  margin-top: 0;
  margin-bottom: 3vmin;
  width: 36.5vmin;
  height: 5vmin;
  opacity: 0.5;
}

.text-4:hover {
  opacity: 1;
}

.text-5 {
  position: relative;
  text-align: center;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: black;
  margin: 1.5vmin;
  margin-top: 0;
  margin-bottom: 3vmin;
  width: 25vmin;
  height: 5vmin;
  opacity: 0.5;
}

.text-5:hover {
  opacity: 1;
}

.text-error {
  position: relative;
  text-align: center;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  background-color: black;
  margin-bottom: 3vmin;
  width: 36vmin;
  height: 5vmin;
}

.message {
  display: inline;
  position: relative;
  text-align: center;
  font-size: 2.5vmin;
  color: white;
  /* margin-top: 1.5vmin; */
  width: 36vmin;
  height: 5vmin;
}

.message-message {
  text-align: center;
  font-size: 2.5vmin;
  color: white;
  /* margin-top: 1.5vmin; */
  margin-bottom: 3vmin;
}

.error-message {
  display: inline;
  position: relative;
  text-align: center;
  font-size: 2.5vmin;
  color: red;
  /* margin-top: 1.5vmin; */
  width: 36vmin;
  height: 5vmin;
}

.text-ok {
  position: static;
  text-align: center;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: #20c20e;
  background-color: black;
  margin-bottom: 3vmin;
  width: 36vmin;
  height: 5vmin;
}

.box-pannel-2 {
  position: relative;
  text-align: center;
  margin: 0 auto; /* centers element  */
  margin-top: 4vmin;
  width: 98.5vmin;
  height: 7vmin;
  background-color: black;
  border: 1px solid #20c20e;
  transition: 0.3s;
}

.box-text-head-2 {
  position: relative;
  float: left;
  padding-top: 1.25vmin;
  margin-left: 1.25vmin;
  color: #20c20e;
  text-align: center;
}

.text-2 {
  position: relative;
  float: left;
  text-align: center;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: black;
  margin-top: 1vmin;
  margin-left: 1.5vmin;
  width: 30.5vmin;
  height: 5vmin;
  opacity: 0.5;
}

.text-2:hover {
  font-size: 2.75vmin;
  opacity: 1;
}

.table-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  align-content: flex-start;
}

.table {
  display: inline-block;
  border-collapse: collapse;
  flex-grow: 1;
  align-self: auto;
}

table {
  margin: 1.2vmin;
  transition: 1s;
  padding: 0;
}

.cell {
  border: 0.5px solid #20c20e;
  border-collapse: collapse;
}

caption {
  background-color: black;
}

th {
  width: 22vmin;
  background-color: #111111;
}

.cell-text-large {
  margin-top: 0.25vmin;
  font-size: 1.4vmin;
  font-weight: bold;
  color: #20c20e;
  /* float: left; */
}

.cell-text-large-2 {
  margin-top: 0.25vmin;
  font-size: 1.5vmin;
  font-weight: bold;
  color: white;
  /* float: left; */
}

.cell-text {
  font-size: 1.3vmin;
  padding: 0.5vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  color: white;
}

.cell-parent {
  height: 2.25vmin;
}

.datetime {
  background-color: black;
  color: white;
  padding: 0.5vmin;
  animation-name: datetime;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}

@keyframes datetime {
  0% {
    background-color: black;
    color: #aaaaaa;
  }
  50% {
    background-color: #030303;
    color: white;
  }
  100% {
    background-color: black;
    color: #aaaaaa;
  }
}

.content {
  display: block;
  width: 100%;
  min-height: 100%;
  position: relative;
}

.footer {
  margin: 5vmin;
  display: block;
  bottom: 0px;
}

input {
  color: white;
}

.login-prompt {
  position: absolute;
  top: 42.5vh;
  left: 50vw;
  transform: translateX(-50%);
  width: 100%;
}

.login-prompt-link {
  color: white;
  background-color: #222222;
  padding: 1vmin;
  padding-right: 8vmin;
  padding-left: 8vmin;
  transition: 1s;
}

.login-prompt-link:hover {
  color: white;
  background-color: black;
  padding: 1vmin;
  padding-right: 8vmin;
  padding-left: 8vmin;
  transition: 0.15s;
}

.box-pannel-3 {
  position: static;
  padding: 1vmin;
  padding-left: 0;
  padding-right: 0;
  /* margin: 0 auto; centers element  */
  margin-top: 4vmin;
  margin-left: 4vmin;
  margin-right: 4vmin;
  margin-bottom: 4vmin;
  background-color: black;
  border: 1px solid #20c20e;
  transition: 0.3s;
  overflow: auto;
}

.box-text-3 {
  position: relative;
  float: left;
  padding-top: 1.25vmin;
  padding-left: 2.5vmin;
  color: white;
  text-align: center;
  padding-bottom: 1vmin;
  margin-top: 1vmin;
  padding-right: 2.5vmin;
}

.box-text-3-line {
  position: relative;
  float: left;
  padding-top: 1.25vmin;
  padding-left: 2.5vmin;
  color: white;
  text-align: center;
  padding-bottom: 1vmin;
  margin-top: 1vmin;
  border-right: solid 1px #20c20e;
  padding-right: 2.5vmin;
}

.text-3-r {
  position: relative;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: black;
  margin-top: 1vmin;
  margin-bottom: 1vmin;
  margin-right: 2vmin;
  width: 20vmin;
  height: 5vmin;
  float: right;
  opacity: 0.5;
}

.text-3-r:hover {
  font-size: 2.75vmin;
  opacity: 1;
}

.text-3-d {
  position: relative;
  font-size: 2.5vmin;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: red;
  margin-top: 1vmin;
  margin-bottom: 1vmin;
  margin-right: 2vmin;
  width: 20vmin;
  height: 5vmin;
  float: right;
  opacity: 0.5;
}

.text-3-d:hover {
  font-size: 2.75vmin;
  opacity: 1;
}

.text-3-account-container {
  width: 100%;
  display: block;
  overflow: auto;
}

.box-divider-3 {
  border-color: #20c20e;
}

.box-pannel-4 {
  position: relative;
  text-align: center;
  margin: 0 auto; /* centers element  */
  margin-top: 4vmin;
  background-color: black;
  border: 1px solid #20c20e;
  transition: 0.3s;
  margin-left: 4vmin;
  margin-right: 4vmin;
}

.clickable-row {
  transition: transform 0.2s;
}

.clickable-row:hover {
  cursor: pointer;
  transform: scale(1.03);
  background: #3cb42e8c;
  color: #fff;
}

.centered-table {
  display: table;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}