* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #242424;
  color: #fff;
  padding: 10px;
}
a {
  color: #00fae5;
}
a:hover {
  color: #ecff58;
}
a:visited {
  color: #8dff58;
}

button {
  cursor: pointer;
  font-size: large;
  padding: 3px 10px;
}

table{
  width: 100%;
  border-collapse: collapse;
  border: #fff 1px solid;
  margin: 10px 0;
}

th, td {
  border: #fff 1px solid;
  padding: 5px;
}

input, select {
  padding: 5px;
  /* width: 200px; */
  margin: 10px 0;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #242424;
}

#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #f2f2f2;
border-top: 6px solid #56829e ;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.card {
  background-color: #333;
  color: #fff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}
.card-header {
  background-color: #444;
  padding: 5px;
  border-radius: 5px 5px 0 0;
}
.card-body {
  padding: 10px;
}
.card_title {
  font-size: 20px;
  margin-bottom: 10px;
}

#error_1, #error_2, #error_3, #error_4 {
  color: red;
  font-size: 20px;
  margin: 10px 10px;
  padding: 10px;
  border: 2px solid rgb(164, 5, 5);
  border-radius: 5px;
  color: rgb(255, 146, 78);
  background-color: rgba(250, 122, 42, 0.144);
  display: none;
}