.buttonBase {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: 0 -1px 0 0 rgb(0, 209, 174), 0 -2px 0 0 rgba(28, 232, 198, 0), inset 0 -1px 0 1px rgba(0, 142, 118, 0), inset 0 -2px 0 1px rgb(0, 167, 138), inset 0 -3px 0 1px rgba(0, 187, 156, 0.78), 0 1px 20px -2px rgba(0, 140, 116, 0.4);
  color: #FFFFFF;
  background: rgb(0, 209, 174);
  border-radius: 3px;
  outline: none;
  border: none;
  transition: all 50ms cubic-bezier(0.13, 0.9, 0.38, 0.98), background 0.1s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  /*min-height: 26 px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.buttonBase:active,
.buttonBase:hover:active {
  box-shadow: 0 0 0 0 rgb(0, 209, 174), 0 0 0 0 #00D1AE, inset 0 -1px 2px 1px rgba(0, 165, 137, 0), inset 0 -2px 0 1px rgba(0, 195, 163, 0), inset 0 1px 2px 1px rgba(0, 0, 0, 0.35), 0 1px 10px -2px rgba(0, 140, 116, 0.4);
  padding-top: 4px;
  background: rgb(0, 209, 174);
  outline: none;
}

.buttonBase:focus {
  outline: none;
}

.buttonBase::-moz-focus-inner {
  border: 0;
}

.buttonBase:hover {
  background: rgb(43, 217, 188);
}

.buttonBase[disabled]:hover {
  background: #A7AEB6;
}

.buttonBase[disabled]:active,
.buttonBase[disabled]:hover:active {
  padding-top: 0;
  box-shadow: 0 0 0 0 rgb(149, 157, 166), 0 0 0 0 rgba(28, 232, 198, 0), inset 0 0 0 1px rgba(0, 142, 118, 0), inset 0 0 0 1px rgb(111, 118, 125), inset 0 0 0 1px rgba(125, 132, 140, 0.78), 0 0 0 -2px rgba(87, 91, 97, 0.4);
}

.buttonBase[disabled] {
  cursor: default;
  background: #A7AEB6;
  /*Looks good with `transition: all 250ms ease-out;`*/
  box-shadow: 0 0 0 0 rgb(149, 157, 166), 0 0 0 0 rgba(28, 232, 198, 0), inset 0 0 0 1px rgba(0, 142, 118, 0), inset 0 0 0 1px rgba(111, 118, 125, 0), inset 0 0 0 1px rgba(125, 132, 140, 0.78), 0 0 0 -2px rgba(87, 91, 97, 0.4);
  color: #FFFFFF;
}

.buttonBase[disabled] .buttonText {
  color: #FFFFFF;
  margin-top: 0;
}

.buttonBase .buttonText {
  font-family: "MuseoSR3", helvetica, arial, sans-serif;
  white-space: nowrap;
  /*Offset the shadow*/
  margin: -4px auto 0 auto;
  /*Spans are by default inline-text so they break when the parent is positioned inline*/
  display: block;
  text-decoration: none;
}

.buttonBase .buttonIcon {
  margin-top: -3px;
}

/* Blue Button */
.buttonBase.blue {
  box-shadow: 0 -1px 0 0 rgb(74, 144, 226), 0 -2px 0 0 rgba(28, 232, 198, 0), inset 0 -1px 0 1px rgba(0, 142, 118, 0), inset 0 -2px 0 1px rgb(53, 105, 167), inset 0 -3px 0 1px rgba(59, 117, 185, 0.78), 0 1px 20px -2px rgba(44, 86, 136, 0.4);
  background: #4A90E2;
}

.buttonBase.blue:hover {
  background: #5098EC;
}

.buttonBase.blue:active {
  box-shadow: 0 0 0 0 rgb(72, 138, 216), 0 0 0 0 rgba(28, 232, 198, 0), inset 0 -1px 2px 1px rgba(0, 165, 137, 0), inset 0 -2px 0 1px rgba(0, 195, 163, 0), inset 0 1px 2px 1px rgba(0, 0, 0, 0.35), 0 1px 10px -2px rgba(50, 91, 140, 0.4);
}

.buttonBase.blue[disabled]:hover {
  background: #A7AEB6;
}

.buttonBase.blue[disabled] {
  cursor: default;
  background: #A7AEB6;
  /*Looks good with `transition: all 250ms ease-out;`*/
  box-shadow: 0 0 0 0 rgb(149, 157, 166), 0 0 0 0 rgba(28, 232, 198, 0), inset 0 0 0 1px rgba(0, 142, 118, 0), inset 0 0 0 1px rgba(111, 118, 125, 0), inset 0 0 0 1px rgba(125, 132, 140, 0.78), 0 0 0 -2px rgba(87, 91, 97, 0.4);
  color: #FFFFFF;
}

/* Purple Button */
.buttonBase.purple {
  box-shadow: 0 -1px 0 0 rgb(194, 130, 217), 0 -2px 0 0 rgba(194, 130, 217, 0), inset 0 -1px 0 1px rgba(132, 89, 148, 0), inset 0 -2px 0 1px rgb(132, 90, 148), inset 0 -3px 0 1px rgb(163, 115, 181), 0 1px 20px -2px rgba(100, 68, 111, 0.4);
  background: #C282D9;
}

.buttonBase.purple:hover {
  background: rgb(202, 135, 226);
}

.buttonBase.purple:active {
  box-shadow: 0 0 0 0 rgb(194, 130, 217), 0 0 0 0 rgba(194, 130, 217, 0), inset 0 -1px 2px 1px rgba(0, 165, 137, 0), inset 0 -2px 0 1px rgba(0, 195, 163, 0), inset 0 1px 2px 1px rgba(0, 0, 0, 0.35), 0 1px 10px -2px rgba(50, 91, 140, 0.4);
}

/* Close Button */
.buttonBase.close::after {
  position: absolute;
  top: 15px;
  left: 7px;
  display: block;
  height: 3px;
  width: 22px;
  background: #4A90E2;
  border-radius: 2px;
  content: '';
  transform: rotate(-45deg);
}

.buttonBase.close::before {
  position: absolute;
  top: 15px;
  left: 7px;
  display: block;
  height: 3px;
  width: 22px;
  background: #4A90E2;
  border-radius: 2px;
  content: '';
  transform: rotate(45deg);
}

.buttonBase.close {
  width: 37px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 -1px 0 0 rgb(255, 255, 255), 0 -2px 0 0 rgba(255, 255, 255, 0), inset 0 -2px 0 1px rgba(210, 210, 210, 0.73), inset 0 -2px 0 1px rgba(185, 185, 185, 0.66), inset 0 -2px 0 1px rgba(82, 82, 82, 0.21), 0 1px 4px 0 rgba(49, 49, 49, 0.44);
}

.buttonBase.close:hover {
  background: #FFF;
}

.buttonBase.close:active {
  background: #F7F7F7;
  box-shadow: 0 0 0 0 #FFFFFF, 0 0 0 0 rgba(255, 255, 255, 0), inset 0 -1px 2px 1px rgba(0, 165, 137, 0), inset 0 -2px 0 1px rgba(0, 195, 163, 0), inset 0 1px 2px 1px rgba(72, 72, 72, 0.35), 0 0 1px 0 rgba(123, 123, 123, 0.4);
}

.buttonBase.close:active::before,
.buttonBase.close:active::after {
  top: 17px;
}

.buttonBase.cross {
  width: 23px;
  height: 48px;
  border-radius: 4px;
}

.buttonBase.cross .buttonText {
  font-size: 15px;
  padding: 2px 13px 3px 13px;
  border-radius: 40px/5px;
  background: inherit;
}

.buttonBase.gray {
  background: #959DA6;
  box-shadow: 0 -1px 0 0 rgb(149, 157, 166), 0 -2px 0 0 rgba(28, 232, 198, 0), inset 0 -1px 0 1px rgba(0, 142, 118, 0), inset 0 -2px 0 1px rgb(111, 118, 125), inset 0 -3px 0 1px rgba(125, 132, 140, 0.78), 0 1px 20px -2px rgba(87, 91, 97, 0.4);
}

.buttonBase.gray {
  background: #959DA6;
  box-shadow: 0 -1px 0 0 rgb(149, 157, 166), 0 -2px 0 0 rgba(28, 232, 198, 0), inset 0 -1px 0 1px rgba(0, 142, 118, 0), inset 0 -2px 0 1px rgb(111, 118, 125), inset 0 -3px 0 1px rgba(125, 132, 140, 0.78), 0 1px 20px -2px rgba(87, 91, 97, 0.4);

}

.buttonBase.gray:active,
.buttonBase.gray:hover:active {
  background: #959DA6;
  box-shadow: 0 0 0 0 rgb(149, 157, 166), 0 0 0 0 rgba(28, 232, 198, 0), inset 0 -1px 2px 1px rgba(0, 165, 137, 0), inset 0 -2px 0 1px rgba(0, 195, 163, 0), inset 0 1px 2px 1px rgba(0, 0, 0, 0.35), 0 1px 10px -2px rgba(87, 91, 97, 0.4);
}