.button-ui {
  display: inline-block;
  padding: 11px 23px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition-property: background-color, border-color, color;
  transition-property: background-color, border-color, color;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  background-color: #FF5C00;
  border-color: #FF5C00;
  color: #FFFFFF;
}

.button-ui:hover {
  background-color: #FFFFFF;
  border-color: #FF5C00;
  color: #FF5C00;
}

.button-ui:active {
  background-color: #CC4B00;
  border-color: #CC4B00;
  color: #FFFFFF;
}

.button-ui--full {
  width: 100%;
  display: block;
}

.button-ui--compact {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 12px;
  min-height: 48px;
  font-size: 13px;
  line-height: 15px;
  text-transform: none;
  text-align: left;
  letter-spacing: 0;
}

.button-ui--circle:not(.button-ui--compact) {
  border-radius: 9999px;
}

.button-ui--white {
  background-color: #FFFFFF;
  border-color: #ff5c00;
  color: #ff5c00;
}

.button-ui--white:hover {
  background-color: #ff5c00;
  border-color: #ff5c00;
  color: #FFFFFF;
}

.button-ui--white:active {
  background-color: #FFFFFF;
  border-color: #993800;
  color: #993800;
}

.button-ui--gray {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #222;
}

.button-ui--gray:hover {
  background-color: #ff5c00;
  border-color: #ff5c00;
  color: #fff;
}

.button-ui--gray:active {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: #222;
}

.button-ui--violet {
  background-color: #523189;
  border-color: #523189;
  color: #FFFFFF;
}

.button-ui--violet:hover {
  background-color: #FFFFFF;
  border-color: #523189;
  color: #523189;
}

.button-ui--violet:active {
  background-color: #442871;
  border-color: #442871;
  color: #FFFFFF;
}

.button-ui--disabled,
.button-ui[disabled] {
  pointer-events: none;
  opacity: 0.4;
}

span.button-ui {
  pointer-events: none;
}
@supports (appearance:none){

}