/* button VIEW */
.button-view {
  color: var(--main-color) !important;
  font-weight: 700;
  background-color: #343a40 !important;
  position: relative;
  top: 0;
  transition: all 0.3s;
  box-shadow: 1px 1px 3px 0px rgb(112, 115, 139) !important;
}
.button-view:hover {
  color: #fff !important;
  background-color: var(--main-color) !important;
  top: -2px;
  box-shadow: 4px 4px 3px 0px rgb(112, 115, 139) !important;
}

/* button LOG */

.button-log {
  content: '';
  color: var(--main-color) !important;
  font-weight: 700;
  background-color: #343a40 !important;
  position: relative;
  top: 0;
  transition: all 0.3s;
  box-shadow: 1px 1px 3px 0px rgb(112, 115, 139) !important;
}
.button-log:hover {
  content: '';
  color: #fff !important;
  background-color: var(--main-color) !important;
  top: -2px;
  box-shadow: 4px 4px 3px 0px rgb(112, 115, 139) !important;
}


.button-add {
  color: #06ba08 !important;
  font-weight: 700;
  background-color: #343a40 !important;
  position: relative;
  top: 0;
  transition: all 0.3s;
  box-shadow: 1px 1px 3px 0px rgb(112, 115, 139) !important;
}
.button-add:hover {
  color: #fff !important;
  background-color: var(--main-color) !important;
  top: -2px;
  box-shadow: 4px 4px 3px 0px rgb(112, 115, 139) !important;
}

.button-update {
  color: yellow !important;
  font-weight: 700;
  background-color: #343a40 !important;
  position: relative;
  top: 0;
  transition: all 0.3s;
  box-shadow: 1px 1px 3px 0px rgb(112, 115, 139) !important;
}
.button-update:hover {
  color: #fff !important;
  background-color: var(--main-color) !important;
  top: -2px;
  box-shadow: 4px 4px 3px 0px rgb(112, 115, 139) !important;
}
.button-update-mobile {
  display: none;
  color: yellow !important;
  background-color: #343a40 !important;
  box-shadow: 2px 2px 5px grey;
}

.button-delete {
  color: red !important;
  font-weight: 700;
  background-color: #343a40 !important;
  position: relative;
  top: 0;
  transition: all 0.3s;
  box-shadow: 1px 1px 3px 0px rgb(112, 115, 139) !important;
}
.button-delete:hover {
  color: #fff !important;
  background-color: var(--main-color) !important;
  top: -2px;
  box-shadow: 4px 4px 3px 0px rgb(112, 115, 139) !important;
}

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