/* General */
body {
    font-family: Arial, Sans-serif;
}

/* Links */
a {
    text-decoration: none;
}
a:link {
    color: #000000;
}
a:visited {
    color: #000000;
}
a:hover {
    color: #FF0000;
    text-decoration: none;
}

/* Header and Footer */
.el-header {
    border-bottom: 0.2em solid red;
}

.el-footer {
    border-top: 0.2em solid red;
}

/* Dashboard Buttons */
.dash td {
    padding:1em;
}
.dash div div a:hover img {
    filter: brightness(50%);
    transition: filter 0.1s;
}

/* Icons */
.main_icon {
  width: 100px;
  height: 100px;
  box-shadow: 5px 10px 5px 0px rgba(0,0,0,0.15);
  border-radius: 24px;
  margin-bottom: 15px;
}
/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
    display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #5c5;
}

input:focus + .slider {
  box-shadow: 0 0 1px #5c5;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Status */
.status {
  width: 24px;
  height: 24px;
  background: #ccc;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-weight: bold;
}

.offline {
  background: rgb(254, 60, 60);
}

.online {
  background: #5c5;
}

.offlinetext {
  color: rgb(254, 60, 60);
}

.onlinetext {
  color: #5c5;
}

.recovery {
  background: purple;
}

/* Define the hover highlight color for the table row */
/*.clusterRow:hover{
  background-color: #eee;
}*/

.important{
  font-weight: bold;
}

/* Detail view */
.detail {
  margin-right:auto;
  margin-left:auto;
  text-align: center;
  border: none;
}

/* Disable bootstrap table-hover for "detail" */
.detail table tr:hover,
.detail table tr:hover td,
.detail table tr:hover th {
  background-color: transparent;
}

.hidden {
  display: none;
}

.more_button {
  color: #ccc;
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  cursor:pointer;
}

.more_button:hover {
  color: #777;
  transition: background-color 0.1s;
}
