/* button VIEW */
.button-view {
  color: #07adeb;
  font-weight: 700;
  border-radius: 25px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-view:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

/* button Login */
.button-login {
  color: #fff;
  font-weight: 700;
  border-radius: 25px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-login:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

.button-log {
  color: #f78f0f;
  font-weight: 700;
  border-radius: 25px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-log:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

.button-add {
  color: #06ba08;
  font-weight: 700;
  border-radius: 15px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-add:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

.button-update {
  color: yellow;
  font-weight: 700;
  border-radius: 25px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-update:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

.button-delete {
  color: red;
  font-weight: 700;
  border-radius: 25px;
  background-color: #343a40;
  box-shadow: 0 2px 1px gray inset, 0px 0px 8px gray;
}
.button-delete:hover {
  color: #f78f0f;
  box-shadow: 0 1px 1px #f78f0f inset, 0 0 8px #f78f0f;
  text-decoration: none;
}

@media (max-width: 768px)
{
  .button-add span{
    display: none;
  }
  .button-view span{
    display: none;
  }
  .button-update span{
    display: none;
  }
  .button-delete span{
    display: none;
  }
  .button-log span{
    display: none;
  }
}

.btn-active {
  box-shadow: 0px 3px 0px 0px #F78F0F;
}