/**
 * Add custom CSS for buttons.
 *
 * The problem is that WordPress overrides the default bootstrap "bootstrap-btn" & "bootstrap-btn-primary" 
 * styling by it's own. This CSS is copied from bootstrap V4.1.0 but the classes are renamed. Even with the custom
 * CSS classes alone WordPress still overwrites the CSS. Therefore we use "!important;" everywhere.
 */

 .bootstrap-btn {
  display: inline-block !important;
  font-weight: 400 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  border: 1px solid transparent !important;
  padding: .375rem 1.5rem !important;        /* <== changed ".375rem 0.75rem !important;" to "375rem 1.5rem" */
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  border-radius: .25rem !important;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

@media screen and (prefers-reduced-motion:reduce) {
  .bootstrap-btn {
    transition: none !important;
  }
}

.bootstrap-btn:focus, .bootstrap-btn:hover {
  text-decoration: none !important;
}

.bootstrap-btn.focus, .bootstrap-btn:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) !important;
}

.bootstrap-btn.disabled, .bootstrap-btn:disabled {
  opacity: .65 !important;
}

.bootstrap-btn:not(:disabled):not(.disabled) {
  cursor: pointer !important;
}

.bootstrap-btn:not(:disabled):not(.disabled).active, .bootstrap-btn:not(:disabled):not(.disabled):active {
  background-image: none !important;
}

a.bootstrap-btn.disabled, fieldset:disabled a.bootstrap-btn {
  pointer-events: none !important;
}

.bootstrap-btn-primary {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.bootstrap-btn-primary:hover {
  color: #fff !important;
  background-color: #0069d9 !important;
  border-color: #0062cc !important;
}

.bootstrap-btn-primary.focus, .bootstrap-btn-primary:focus {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5) !important;
}

.bootstrap-btn-primary.disabled, .bootstrap-btn-primary:disabled {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.bootstrap-btn-primary:not(:disabled):not(.disabled).active, .bootstrap-btn-primary:not(:disabled):not(.disabled):active, .show>.bootstrap-btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #0062cc !important;
  border-color: #005cbf !important;
}

.bootstrap-btn-primary:not(:disabled):not(.disabled).active:focus, .bootstrap-btn-primary:not(:disabled):not(.disabled):active:focus, .show>.bootstrap-btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5) !important;
}



/**
 * Needed to overwrite WordPress orange color when hovering over a button.
 */
button.bootstrap-btn.bootstrap-btn-primary span.btn-text-primary,
button.bootstrap-btn.bootstrap-btn-primary:hover span.btn-text-primary {
  color: white !important;
}