.arjang-btn {
  display: inline-block;
  padding: 0.7em 1.5em;
  border: 2px solid;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

  cursor: pointer;
  font-weight: bold;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  /* remove styles from bootstrap's .btn etc...*/
  background-image: none;

  -moz-text-shadow: none;
  -webkit-text-shadow: none;
  -o-text-shadow: none;
  text-shadow: none;

  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  background-color: transparent;
  text-align: center;
  width: auto;
}

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

.arjang-btn-nowrap {
  white-space: nowrap;
}

/**
 * Orange Button
 */
.arjang-btn-orange {
  color: #F7941E;
}
.arjang-btn-orange:hover {
  color: #fff;
  border-color: #F7941E;
  background-color: #F7941E;
}

.arjang-btn-orange.arjang-btn-filled {
  color: #fff;
  border-color: #F7941E;
  background-color: #F7941E;
}
.arjang-btn-orange.arjang-btn-filled:hover {
  color: #F7941E;
  border-color: #F7941E;
  background-color: transparent;
}


/**
 * Primary Button
 */
.arjang-btn-primary {
  color: #003975;
}
.arjang-btn-primary:hover {
  color: #fff;
  border-color: #003975;
  background-color: #003975;
}

.arjang-btn-primary.arjang-btn-filled {
  color: #fff;
  border-color: #003975;
  background-color: #003975;
}
.arjang-btn-primary.arjang-btn-filled:hover {
  color: #003975;
  border-color: #003975;
  background-color: transparent;
}


/**
 * Default Button
 */
.arjang-btn-default {
  color: #555;
  border-color: #bbb;
}
.arjang-btn-default:hover {
  color: #fff;
  background-color: #bbb;
}

.arjang-btn-default.arjang-btn-filled {
  color: #fff;
  background-color: #bbb;
}
.arjang-btn-default.arjang-btn-filled:hover {
  background-color: transparent;
  border-color: #bbb;
  color: #555;
}

/**
 * Success button
 */
.arjang-btn-success {
  color: #449a44;
}
.arjang-btn-success:hover {
  color: #fff;
  border-color: #449a44;
  background-color: #449a44;
}

.arjang-btn-success.arjang-btn-filled {
  color: #fff;
  border-color: #449a44;
  background-color: #449a44;
}
.arjang-btn-success.arjang-btn-filled:hover {
  color: #449a44;
  border-color: #449a44;
  background-color: transparent;
}

/**
 * Info button
 */
 .arjang-btn-info {
  color: #48b8d9;
}
.arjang-btn-info:hover {
  color: #fff;
  border-color: #48b8d9;
  background-color: #48b8d9;
}

.arjang-btn-info.arjang-btn-filled {
  color: #fff;
  border-color: #48b8d9;
  background-color: #48b8d9;
}
.arjang-btn-info.arjang-btn-filled:hover {
  color: #48b8d9;
  border-color: #48b8d9;
  background-color: transparent;
}

/**
 * Danger button
 */
.arjang-btn-danger {
  color: #df0000;
}
.arjang-btn-danger:hover {
  color: #fff;
  border-color: #df0000;
  background-color: #df0000;
}

.arjang-btn-danger.arjang-btn-filled {
  color: #fff;
  border-color: #df0000;
  background-color: #df0000;
}
.arjang-btn-danger.arjang-btn-filled:hover {
  color: #df0000;
  border-color: #df0000;
  background-color: transparent;
}

/**
 * Override bootstrap buttons
 */
a.btn {
  font-size: 1.65rem;
  padding: 0.8rem 1.8rem;
}
.btn-warning {
  background-color: #f7941e;
  border-color: #f7941e;
}
.btn-warning:hover {
  background-color: #fa822b;
  border-color: #fa822b;
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  background-color: #fa740f;
  border-color: #fa740f;
}

/**
 * There is a bug in barrio new versions, that does not add correct classes to buttons.
 * so these buttons appear:
 * @since 5 aug 2023
 */
.btn.btn-:not(.arjang-btn) {
  border: 2px solid #f7941e;
  padding: 1rem 1.5rem;
  background-color: #f7941e;
  color: #fff;
  border-radius: 5px;
  font-weight: bold;
}
.btn.btn-:not(.arjang-btn):hover {
  color: #f7941e;
  background-color: #fff;
}