.panel-buttons{
  background-color: #2E5274;
  color: #FFF;
  padding: 1px;
  font-size: 90%;
  border: 1px solid #26374A;
  border-bottom-width: 0;
}

.panel-buttons .button{
  display: inline-block;
  padding: 2px 8px;
  margin-right: 20px;
}

.panel-buttons .button:first-child{
  margin-left: 10px;
}

.panel-buttons .button:last-child{
  margin-right: 10px;
}

.panel-buttons .button .panel-icon{
  padding: 7.5px;
  border-radius: 20px;
}

.panel-buttons .button .status-icon{
  font-size: 60%;
  width: 15px;
  height: 15px;
  text-align: center;
  border-radius: 30px;
}

.panel-buttons .button .status-icon.text-danger{
  color: #e0b1b0;
}

.panel-buttons .button .status-icon.text-success{
  color: #a7d2a8;
}

.panel-buttons .button[data-state="hide"]{

}

.panel-buttons .button[data-state="show"]:hover .panel-icon,
.panel-buttons .button[data-state="show"]:active .panel-icon,
.panel-buttons .button[data-state="hide"] .panel-icon{
  background-color: transparent;
}

.panel-buttons .button[data-state="hide"]:hover .panel-icon,
.panel-buttons .button[data-state="hide"]:active .panel-icon,
.panel-buttons .button[data-state="show"] .panel-icon{
  background-color: #26374A;
}

.panel-buttons .button:hover,
.panel-buttons .button:active{
  cursor: pointer;
}

.panel-buttons .button .panel-icon{
  margin-right: 2px;
}

.panel-buttons [data-name="results"]{
  float: right;
}

/* styling for smaller screens */

.mediumview .panel-buttons .button:first-child{
  margin-left: 0;
}

.mediumview .panel-buttons .button{
  margin-right: 0;
}

.mediumview .panel-buttons .button:last-child{
  margin-right: 0;
}

.xxsmallview .panel-buttons .button:first-child,
.xsmallview .panel-buttons .button:first-child{
  margin-left: 5px;
}

.xxsmallview .panel-buttons .button,
.xsmallview .panel-buttons .button{
  margin-right: 5px;
}

.xxsmallview .panel-buttons .button:last-child,
.xsmallview .panel-buttons .button:last-child{
  margin-right: 5px;
}