html, body {
  background-color: white;
}

.panel {
  border-color: #0095da;
}

.panel-heading, .btn-primary {
  color: #fff;
  background: #0095da;
}

.btn-primary {
  border-color: #0095da;
    background-image: -webkit-linear-gradient(top,#0095da 0,#337ab7 100%);
    background-image: -o-linear-gradient(top,#0095da 0,#337ab7 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#0095da),to(#337ab7));
    background-image: linear-gradient(to bottom,#0095da 0,#337ab7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0095da', endColorstr='#ff337ab7', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
}

.systemOption {
  display: inline-block;
  max-width: 140px;
  vertical-align: top;
}

.switch {
  height: 140px;
  margin:12px 20px;
}

.switch input {display:none;}

.switch .slider {
    text-align: center;
}

.switch .slider:before {
  margin: 6px auto;
  content: "";
  height: 100px;
  width: 100px;
  display: block;
  background-image: url('/oauth2/view/images/clarehome-icon.png');
  background-size: contain;
  background-color: #999;
  border-radius: 18px;
}

.switch input:checked + .slider:before {
  background-color: #0095da;
}

.switch .slider.round:before {
  border-radius: 1rem;
}