body {
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
  background-color: #f0f0f0;
  -webkit-font-smoothing: antialiased; 
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 
  background-image: url("img/background.jpg");
}
.btn-success{
  background-color: rgb(61, 163, 35) !important;
  background-image:  none;
  /* color: #999; */
}
/* nav bar */
.navbar-brand{
  padding:0 10px;
  
}

.navbar-black{
  background-color: rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 40px;
}

.navbar-black li a {
  font-size: 15px;
  color:white;
  vertical-align: middle;
}

.navbar-black li {
  padding: 0 10px;
}

.navbar-black input {
  margin-bottom: 0;
}

.navbar-black a:hover{
  color:black;
}

/* sweet alert */

.swal2-modal {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color:white !important;
  border: rgba(0, 0, 0, 0.8) !important;
}

.swal2-modal .swal2-title, .swal2-modal .swal2-content{
  color:white !important;
}

/* system info */
#systemInfo{
  display:grid;
  height: 150px;
  /* grid-template-areas: "version iotaVersion latestIndex solidIndex" 
  "version version version version"; */
  grid-template-areas: "version iotaVersion latestIndex cpu";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 1em;
  margin: 40px;
}

.card{
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius:0.5rem;
  background-color: rgba(0, 0, 0, 0.6);
  color:white;
  padding:4rem;
}

#systemInfo .version{
  grid-area: version;
}

#systemInfo .iota-version{
  grid-area: iotaVersion;
}

#systemInfo .latest-index{
  grid-area: latestIndex;
  position: relative;
}

#systemInfo .latest-index .lsmi{
  float:right;
  margin: 0 50px 0 0;
}


#systemInfo .cpu{
  grid-area: cpu;
}

.dead{
  border: 1px solid rgba(174,44,56, 0.5);
  background-color: rgba(174,44,56, 0.5);
}

/* Sweet alert */
.swal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/*Peer*/
#peer-wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(435px, 435px));
  grid-column-gap: 1em;
  margin:4rem;
}

.item{
  position: relative;
  margin-bottom: 1rem;
}

/* Peer edit */
.item .input_field{
  width:80%;
}

.item i{
  cursor: pointer;
}

.item .flag{
  display: inline-block;
  vertical-align: top;
}

.item .remove{
  position: absolute;
  top:0;
  right:15px;
}

.item .tag-updating{
  color:black;
  margin:0;
}

.item .text-info{
  position: absolute;
  bottom: 5px;
  text-align: center;
  right: 20px;
  color: #999;
}

.item .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -5px;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: 12px;
    color:rgb(255, 255, 255, 0.8);
}

.item .badge {
    background-color: rgba(0, 0, 0, 0);
}


/* title */

.header{
    font-size: 20px;
    text-indent: 2rem;
    margin: 0 4rem;
    color: rgb(255, 255, 255, 0.8);
}

.header i {
    margin-right: 1rem;
}



/* Pulse animation */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}



@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
  color:#FF456B;
}