/* shared button class */
.button {
	position: relative;
	top: 1px;
	align-items: center;
	appearance: none;
	border-radius: 4px;
	border-width: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 16px;
	padding-right: 16px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size: 14px;
	text-decoration: none !important;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(2px);
}

/* button default */
.button-default {
  background-color: #FCFCFD;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  color: #36395A;
}

.button-default:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  color: #36395A;
}

/* button primary */
.button-primary {
  background-image: radial-gradient(100% 100% at 100% 0, #49c3f7 0, #1e73be 100%);
  box-shadow: rgba(45, 35, 66, .3) 0 2px 4px, rgba(45, 35, 66, .2) 0 7px 13px -3px, rgba(58, 65, 111, .4) 0 -3px 0 inset;
  color: #fff;
}

.button-primary:hover {
  box-shadow: rgba(45, 35, 66, .3) 0 4px 8px, rgba(45, 35, 66, .2) 0 7px 13px -3px, rgba(58, 65, 111, .4) 0 -3px 0 inset;
  color: #fff;
}

/* button success */
.button-success {
  background-image: radial-gradient(100% 100% at 100% 0, #49f78f 0, #1ebe74 100%);
  box-shadow: rgba(45, 66, 35, .3) 0 2px 4px, rgba(45, 66, 35, .2) 0 7px 13px -3px, rgba(58, 111, 65, .4) 0 -3px 0 inset;
  color: #fff;
}

.button-success:hover {
  box-shadow: rgba(45, 66, 35, .3) 0 4px 8px, rgba(45, 66, 35, .2) 0 7px 13px -3px, rgba(58, 111, 65, .4) 0 -3px 0 inset;
  color: #fff;
}

/* button danger */
.button-danger {
  background-image: radial-gradient(100% 100% at 100% 0, #f74949 0, #be1e1e 100%);
  box-shadow: rgba(66, 35, 45, .3) 0 2px 4px, rgba(66, 35, 45, .2) 0 7px 13px -3px, rgba(111, 65, 58, .4) 0 -3px 0 inset;
  color: #fff;
}

.button-danger:hover {
  box-shadow: rgba(66, 35, 45, .3) 0 4px 8px, rgba(66, 35, 45, .2) 0 7px 13px -3px, rgba(111, 65, 58, .4) 0 -3px 0 inset;
  color: #fff;
}