/*Style reset*/

button {
  background: transparent;
  border: none;
  cursor: pointer;
}

/*Button class*/

.btn {
  display: inline-block;
  font-weight: bold;
  padding: 0.7rem 1.2rem;
  font-size: 1rem;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  border: none;
  background: linear-gradient(#fff,#f5f5f5);
  /* color: #FF615C; */
  color: #585858;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(10,0,50,0.2);
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid #c1c1c1;
  line-height: 1.25;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

a.btn {
  text-decoration: none;
}

/* No shadow */
.btn.no-shadow {
  box-shadow: none;
}

.btn.no-action {
  pointer-events: none;
}

.btn.ko {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.09);
  color: #a6a6a6;
}

.btn.clear {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.btn.clear .icon {
  color: #aaa;
}

/*Psuedo classes*/

.btn:hover, .btn.no-shadow:hover {
  box-shadow: 0 2px 3px rgba(40,20,70,0.3);
}

.btn:hover, .btn:focus {
  border: 1px solid #777;
  background: #fff;
}

.btn:active, .btn:active:focus:active, .btn:focus:active {
  /*box-shadow: none;*/
}

.btn.clear:hover,
.btn.clear:active,
.btn.clear:focus {
  background: rgba(0,0,0,0.06);
  border: 1px solid transparent;
  box-shadow: none;
  text-decoration: none;
}

/*Colour*/

.btn.red {
  color: #FF615C;
  border: 1px solid #ffbfbd;
}

.btn.red:hover, .btn.red:focus {
  border: 1px solid #FF615C;
}

.btn.purple {
  color: #6E4AFF;
  border: 1px solid #c5b7ff;
}

.btn.purple:hover, .btn.purple:focus {
  border: 1px solid #6E4AFF;
}

/*Sizes*/

.btn.light {
  font-weight: 400;
}

.btn.small, .btn.user {
  padding: 0.3rem 0.4rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.btn.smaller {
  padding: 0.15rem 0.3rem;
  font-weight: 400;
  font-size: 0.85rem;
}

.btn.med {
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
}

/*Special*/

.btn.special, .btn.special:hover, .btn.special:focus {
  font-weight: 500;
  color: #fff;
}

.btn.special .icon {
  color: rgba(0,0,0,0.25);
}

.btn.special.red {
  border: 1px solid #db5c58;
  background: linear-gradient(45deg, #FF615C, #f38950);
  color: #fff;
}

.btn.special.red:hover, .btn.special.red:focus {
  background: #ff8e4c;
  /*border-color: #db5c58;*/
  color: #fff;
}

.btn.special.purple {
  border: 1px solid #6245d8;
  background: linear-gradient(30deg,#6E4AFF,#c75cff);
  color: #fff;
}

.btn.special.purple:hover, .btn.special.purple:focus {
  background: #c75cff;
  /*border-color: #c75cff;*/
  color: #fff;
}

/*Toggle*/

.btn.toggle {
  color: #6B6B6B;
  border-color: #c1c1c1;
  /*box-shadow: none;*/
  background: #fff;
  z-index: 1;
}

.btn.toggle:hover, .btn.toggle:focus {
  border-color: #888;
  color: #777;
  box-shadow: 0 1px 2px rgba(40,20,70,0.25);
  z-index: 2;
}

.btn.toggle.active {
  border: 1px solid #6245d8;
  background: linear-gradient(30deg,#6E4AFF,#c75cff);
  color: #fff;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(10,0,50,0.3);
}

.btn.toggle .icon {
  color: rgba(0,0,0,0.25);
}

.btn.toggle.active .icon {
  color: rgba(0,0,0,0.4);
}

.btn.toggle.active:hover, .btn.toggle.active:focus {
  /*background: #567187;*/
  z-index: 2;
}

.btn.toggle-group {
  /*border-radius: 5px;*/
  border-radius: 0;
}

.btn.toggle-group:not(:first-child):not(:last-child) {
}

.btn.toggle-group.row:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btn.toggle-group.row:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btn.toggle-group.row:not(:first-child) {
  margin-left: -1px;
}

.btn.toggle-group.col {
  margin-bottom: 0;
}

.btn.toggle-group.col:first-child {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.btn.toggle-group.col:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btn.toggle-group.col:not(:first-child) {
  margin-top: -1px;
}

/*User button*/

.btn.user {
  display: inline-flex;
  align-items: center;
  border-radius: 25px;
}

.btn.user img {
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.3rem;
}

.btn .number {
  font-family: "Overpass Mono", monospace;
  font-size: 0.66em;
  margin-left: 0.3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  top: 0;
}

/*Turn off box shadow on buttons since card bars have drop-shadows*/
.card.select .btn {
  box-shadow: none;
}

/* Re-add hover & focus effect */
.card.select .btn:hover, .card.select .btn:focus {
  box-shadow: 0 2px 3px rgba(40,20,70,0.3);
}

/*Disabled*/

.btn.disabled, .btn.disabled:hover, .btn.disabled:focus {
  border: 1px solid #e9e9e9;
  color: #a4a4a4 !important;
  background: #e9e9e9 !important;
  cursor: not-allowed !important;
  box-shadow: none !important; 
}

/*Widget*/
.widget.widget-btn {
  border-radius: 0;
  position: fixed;
  right: 2.5rem;
  bottom: 0;
  z-index: 10;
  background: #fff;
  cursor: pointer;
  border-left: 4px solid #FFE8BA;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 0 9px rgba(0,0,0,0.1);
  font-weight: 500;
  transform: translateY(150%);
  transition: all 0.1s;
  overflow: hidden;
  animation: widgetBtnIn 0.25s 0.5s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widgetBtnIn {
  from { transform: translateY(150%); }
  to { transform: translateY(0.4rem); }
}

.widget.widget-btn:hover, .widget.widget-btn:focus {
  box-shadow: 0 2px 15px rgba(0,0,0,0.2);
  transform: translateY(0);
}

.widget.widget-btn .heading {
  font-size: 1.3rem;
  line-height: 1.2;
}

.widget.widget-btn .icon {
  background: #FFD670;
  line-height: 1;
  font-size: 2.5rem;
  color: rgba(0,0,0,0.2);
  margin-left: 1rem;
}

.widget.widget-dialog {
  display: none;
  position: fixed;
  bottom: 0;
  right: 2.5rem;
  transform: translateY(100%);
  transition: all 0.15s;
}

.widget.widget-dialog.show {
  display: block;
  transform: translateY(0);
}