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

html,
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #272b30; }

#root {
  display: flex;
  flex-direction: column;
  min-width: 1024px; }

/* -------------------------------------- */
ul {
  margin: 0;
  padding: 0; }

li {
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px; }

a {
  text-decoration: none; }
  a:focus, a:visited, a:hover, a:active {
    text-decoration: none;
    outline: none; }
  a.custom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none; }

.centered-col {
  display: flex;
  flex-direction: column;
  align-items: center; }

.header-desc {
  margin-bottom: 15px;
  font-size: 12px;
  color: #aaa; }

.hide {
  visibility: hidden; }

.jumbotron {
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  background-color: #1c1e22; }

.navbar {
  display: flex;
  flex-direction: row; }
  .navbar :not(:first-child) {
    margin-left: 10px; }

.custom-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #000 !important;
  background: linear-gradient(10deg, #272b30, #444);
  font-size: 12px;
  height: 35px;
  text-decoration: none;
  color: #fff; }

.custom-btn:active {
  background-image: none; }

.custom-btn:focus {
  outline: none; }

.custom-input {
  height: 35px;
  padding: 4px 12px !important;
  border: 1px solid #ced4da;
  border-radius: 5px;
  font-size: 12px; }

.custom-input:not(:first-child) {
  margin-top: 15px; }

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem; }

.mx-2 {
  margin-left: 2rem;
  margin-right: 2rem; }

.mx-3 {
  margin-left: 3rem;
  margin-right: 3rem; }

.mx-auto {
  margin-left: auto;
  margin-right: auto; }

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem; }

.my-auto {
  margin-top: auto;
  margin-bottom: auto; }

.mr-auto {
  margin-right: auto; }

.ml-auto {
  margin-left: auto; }

.w-half {
  width: 50%; }

.w-quarter {
  width: 25%; }

.w-third {
  width: 33.3%; }

.w-tenth {
  width: 10%; }

.flex-row {
  display: flex;
  flex-direction: row; }

.flex-col {
  display: flex;
  flex-direction: column; }

.center-text {
  text-align: center; }

.badge {
  max-width: 200px;
  padding: 0.25em 0.4em;
  border-radius: 5px;
  background-color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #000;
  white-space: normal; }
  .badge.danger {
    background-color: #ee5f5b; }
  .badge.success {
    background-color: #62c462; }
  .badge.info {
    background-color: #5bc0de; }

.icon-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 30px; }
  .icon-group .icon-btn {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    border: 1px solid #222;
    border-radius: 5px;
    cursor: pointer; }
    .icon-group .icon-btn:not(:first-child) {
      margin-left: 10px; }
    .icon-group .icon-btn.open {
      background-image: url("./open.svg"); }
    .icon-group .icon-btn.save {
      background-image: url("./save.svg"); }
    .icon-group .icon-btn.delete {
      background-image: url("./delete.svg"); }

.input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }
  .input-group:not(:first-child) {
    margin-top: 15px; }
  .input-group .custom-input {
    flex: 1; }
  .input-group .custom-btn:not(:first-child) {
    margin-left: 10px; }

/* ------------------------ Info List ------------------------ */
.wrap-info-list {
  display: flex;
  flex-direction: column;
  padding: 15px;
  min-width: 1024px;
  margin: 0 auto; }

.wrap-info-list ul.info-list {
  display: flex;
  flex-direction: column; }
  .wrap-info-list ul.info-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    margin-bottom: -1px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #32383e;
    color: #aaa;
    line-height: 30px; }
    .wrap-info-list ul.info-list li div,
    .wrap-info-list ul.info-list li span {
      overflow: hidden;
      text-overflow: ""; }

/* ------------------------ Info Edit ------------------------ */
.wrap-info-edit .wrap-row {
  display: flex;
  flex-direction: row;
  padding: 15px;
  justify-content: space-evenly; }
  .wrap-info-edit .wrap-row .col {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px;
    max-width: 500px; }
    .wrap-info-edit .wrap-row .col:not(:first-child) {
      margin-left: 20px; }
  .wrap-info-edit .wrap-row ul.info-data li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: -1px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #32383e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #aaa; }

/* ------------------------ Options ------------------------ */
.wrap-options {
  display: flex;
  flex-direction: column;
  padding: 15px;
  min-width: 1024px;
  margin: 0 auto; }
  .wrap-options ul {
    display: flex;
    flex-direction: column; }
    .wrap-options ul li {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      margin-bottom: -1px;
      border: 1px solid rgba(0, 0, 0, 0.6);
      background-color: #32383e;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #aaa; }

/* ------------------------ Options ------------------------ */
.wrap-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 1024px;
  padding: 15px;
  margin: 0 auto; }
  .wrap-login .form-login {
    display: flex;
    flex-direction: column;
    width: 400px; }
    .wrap-login .form-login .custom-btn:not(:first-child) {
      margin-top: 20px; }