/********************** Blue *******************************/

.button_blue {
 appearance: button;
 background-color: #1899D6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 10px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

.button_blue:after {
 background-clip: padding-box;
 background-color: #1CB0F6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.button_blue:main, .button_blue:focus {
 user-select: auto;
}

.button_blue:hover:not(:disabled) {
 filter: brightness(1.1);
}

.button_blue:disabled {
 cursor: auto;
}
.button_blue:active:after {
 border-width: 0 0 0px;
}

.button_blue:active {
 padding-bottom: 10px;
}


/********************** Red *******************************/

.button_red {
 appearance: button;
 background-color: #ab0505;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 10px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

.button_red:after {
 background-clip: padding-box;
 background-color: #f7272b;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.button_red:main, .button_red:focus {
 user-select: auto;
}

.button_red:hover:not(:disabled) {
 filter: brightness(1.1);
}

.button_red:disabled {
 cursor: auto;
}
.button_red:active:after {
 border-width: 0 0 0px;
}

.button_red:active {
 padding-bottom: 10px;
}

/********************** Grey *******************************/

.button_grey {
 appearance: button;
 background-color: #544c4c;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 10px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
 height:40px;
}

.button_grey:after {
 background-clip: padding-box;
 background-color: #c4b7b7;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.button_grey:main, .button_grey:focus {
 user-select: auto;
}

.button_grey:hover:not(:disabled) {
 filter: brightness(1.1);
}

.button_grey:disabled {
 cursor: auto;
}
.button_grey:active:after {
 border-width: 0 0 0px;
}

.button_grey:active {
 padding-bottom: 10px;
}


/********************** Orange *******************************/

.button_orange {
 appearance: button;
 background-color: #F93F46;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 10px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

.button_orange:after {
 background-clip: padding-box;
 background-color: #F93F46;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.button_orange:main, .button_orange:focus {
 user-select: auto;
}

.button_orange:hover:not(:disabled) {
 filter: brightness(1.1);
}

.button_orange:disabled {
 cursor: auto;
}
.button_orange:active:after {
 border-width: 0 0 0px;
}

.button_orange:active {
 padding-bottom: 10px;
}


/********************** Green *******************************/

.button_green {
 appearance: button;
 background-color: #33bd1d;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 10px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

.button_green:after {
 background-clip: padding-box;
 background-color: #33bd1d;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.button_green:main, .button_red:focus {
 user-select: auto;
}

.button_green:hover:not(:disabled) {
 filter: brightness(1.1);
}

.button_green:disabled {
 cursor: auto;
}
.button_green:active:after {
 border-width: 0 0 0px;
}

.button_green:active {
 padding-bottom: 10px;
}