.button {
  background-color: #8e8e8e;
  padding: 10px 12px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 10px 2px -8px #e3e3e3,
    inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: left;
}

.button i,
.button-green i,
.button-green-right i,
.button-red i {
  margin-right: 0;
}

.button:hover,
.button:focus,
.button.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
    inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000,
    inset 0 0 4px 2px #f9b44b;
  background-color: #e39827;
  filter: drop-shadow(0 0 2px #f9b44b);
}

.button:active,
.button.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000, inset 8px 0 4px -8px #563a10,
    inset 8px 0 4px -8px #563a10, inset -8px 0 4px -8px #563a10, inset -8px 0 4px -8px #563a10,
    inset 0 9px 2px -8px #563a10, inset 0 -9px 2px -8px #563a10, inset 0 -8.5px 0 -8px #563a10, 0 0 4px 0 #000;
  background-color: #f1be64;
  filter: none;
  outline: 0;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active,
.button.disabled.active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #3d3d3d;
  color: #818181;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
    inset 0 -6px 4px -8px #818181, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
  filter: none;
}

.button-green {
  @extend .button;
  background-color: #5eb663;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 10px 2px -8px #95df99,
    inset 0 10px 2px -8px #163218, inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
}

.button-green:hover,
.button-green:focus,
.button-green.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #cdf1cf,
    inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000,
    inset 0 0 4px 2px #34be3c;
  background-color: #92e897;
  filter: drop-shadow(0 0 2px #34be3c);
}

.button-green:active,
.button-green.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000, inset 8px 0 4px -8px #3f5024,
    inset 8px 0 4px -8px #3f5024, inset -8px 0 4px -8px #3f5024, inset -8px 0 4px -8px #3f5024,
    inset 0 9px 2px -8px #3f5024, inset 0 -9px 2px -8px #3f5024, inset 0 -8.5px 0 -8px #3f5024, 0 0 4px 0 #000;
  background-color: #cfdf93;
  filter: none;
  outline: 0;
}

.button-green.disabled,
.button-green.disabled:hover,
.button-green.disabled:active,
.button-green.disabled.active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #002b02;
  color: #376d3b;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
    inset 0 -6px 4px -8px #376d3b, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
  filter: none;
}

.button-green-right {
  background-color: #5eb663;
  padding: 9px 20px;
  font-size: 100%;
  text-align: left;
  color: #000;
  font-weight: 600;
  display: inline-block;
  vertical-align: baseline;
  min-width: 128px;
  border: none;
  line-height: inherit;
  white-space: nowrap;
  box-shadow: inset 8px 0 4px -8px #000, inset 0 10px 2px -8px #95df99, inset 0 10px 2px -8px #163218,
    inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
  position: relative;
  margin-right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  text-align: right;
}

.button-green-right::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 24px;
  right: -10px;
  top: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAABDlBMVEUAAAASMBURLxJJgUkAKxNKiU1Ih01msGpMjVFNjlFLik9ToFdLik9Lik9Lik5Yq1wIHgoOKhGAyoVNjVFipmY3cDpQkVVrsHB2vHlXmFyK1Y5/yoRvuHNcs2E7eT8bQB1doGFAe0IJIQxNjFJDgkhjrGgGHgxetmNcs2FasF9RllVVpllXqlxRnlVQm1RYrV0cQh5SoVcUNRdQk1VLllA8e0AXOhpQkFM0bDcqXC4jTiVRmFVFiUkIHgpTpFhNmVJEh0hNj1EtYTCI1I16w35utnJXn1tNk1FJkk1HjUs/fkI3czsyajYpWSsZPhxrsW9ZnV1XmVo6dz41bzgmUygkUCYiTSUTMRUPKxEOKRFdNbmJAAAAJ3RSTlMAVisODG41Bvb75Zfc1dGXlwb98/7y8fDS0JeXl5eXl25sVjU1MSucyRWzAAABMElEQVQ4y23M51LCUBiE4QWRKFFB7L37EUJTithI6FXs7f5vxDgok3Oy+/OdZxbGdrOZ3DyDOmMn2WptHM5odbfdflzdOtGq2ek8Pa/Pqtg0nVK3eLUUVWrcvsil08UVFaeszG/WsKQsT+tYJJW3s7caFpl8FOf8WKZ40YeFYqFYKBaKhWLx44V/LBQLxaLg+T8sFAvFouFYdFIZFoqFYqFYArjuYQngeuwUEsB19wii4lqu2x+s6dXO9QavDa1atuMOG2+Bh1658VFQq5XJutX3cQjaQal8XbgMQ6N31ZtKKAJKQSkoBaWgFJSCUlAKSkEpKAWloBSUglJQCkpBKSgFpdiz8rUARTxec9yRRmGYTv/lQaMw9ocjL6oUywfjyufXdxhqTdx7O46QmjhX4w9Fq5Q/daB+bwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: contain;
}

.button-green-right:hover,
.button-green-right:focus,
.button-green-right.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  filter: brightness(1.3) drop-shadow(0 0 2px #34be3c);
}

.button-green-right:active,
.button-green-right.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000, inset 8px 0 4px -8px #3f5024,
    inset 8px 0 4px -8px #3f5024, inset 0 9px 2px -8px #3f5024, inset 0 -9px 2px -8px #3f5024,
    inset 0 -8.5px 0 -8px #3f5024, 0 0 4px 0 #000;
  background-color: #cfdf93;
  filter: none;
  outline: 0;
}

.button-green-right:active::after,
.button-green-right.active::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 24px;
  right: -10px;
  top: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAACBFBMVEUAAACWq1clPgwnPRChwmOhv18iOQ4iOhEdLwwhNBAkOA8jOQ4iNBAkPBSJolSUs1t1ij4kNA4MHwAhLwwhMw0hMQ+Fn0+Jp16Xt14aLA0kOxQlPBR5jkAnOBMqOhYVJQYOIgMcLgsLHQIoPRgZKQoiOBEkOxF4jj6SsFkLGwMlORdOYCRleS4/UB9ohU8xRR3P35PD5ovO3pHM3ZDK243A1IXG2Iq4zX7N4JLM4ZHL4pDJ4o+ev2nH44/F5I6guGoxRxitw3WBmlNxiUZOZS294YW12H0+VCKqzXOcvGWSqmBedjmevmSRqV9geDoQIQIJGgLJ346v0nquxHUmMSMEEQTF4Y3B44mtzom+3IegwoSVt3+etWlwj2KKpld+llJ/mVFuhUQ6TiLH2oq704nA24e21Ya73oW73oOz1X210n2oy3Klxm6lvW6Lq22YuWWaumSUs2KYt2CQpl6Rr1yLqFuNplqBnFF0jEN2kEJeci9MYi1LYCtBVCU9UyItQBguQxccKBLK3Y3C2onD1YfC2IWrzYS22YC6z32bvny1ynu10HigwnaoyHOpx22brmmjv2WWtWGMq2GPr196lV2AnFprh1iSrlZ4k1ZuilaLp1F4kEpyikhmfUF1jEBdcD5acjdUZzdtgjZacDNNYi5HWy0zQyg4TCYoNx4pOxsmMRogMA46/ea2AAAAMHRSTlMADhT7YTLolBhR/O2XTTk1Ev779vKcbWxlVk5MPv76+Ovpp6CclpRzZ15aVU5JRxpOaUmtAAAB4klEQVQ4y23Q5VuTcRTG8VtRBKQEAxS7++BgM6YOwYBJbOo6AQnp7rK7u5v6J3keHsbO2fW7X36vz4tzHVRryzmIhNVoy9mVArkb2mp25ENuZm5qqnr7ngT849e/6dn5namyvugJf/trS0tfKWqxpa0/OjqZnCFq0d3HgbB9PGmfwCeKiksqS8tsyVt4JZPZcv6C/XLSGo5JiUmJKY4zWFViUmJSYlrCFRpeu5lXA1cxTEpMAu9dwiRxarzGcezPtIyvVXwts603MAk8npaeYlSGS0cmDUwcR+y16zbomDiujI5O5ObrleNA+KeBieOSnujIRO4hrTJcZwlEqsa27j6uV3HGlz+1246CeK572NY/NDx2WNbb9568/Px9+Iio5Lh56/mHod8Fop7UamtocH+2qKcc3mbrwGABwOlpl9fZFdmYDXB6xtX4rG8gEwCnZ90PrCGdgtNzbmdXSKfgtLCptffACr1yWtjc0ZsFfZxebHmVt0jB6SVrt0HB6ZXOVQaFoOWrYYzT8hgFp1djFEoKJYWSQkmhpFBSKCmUFCaTw+VuaukUFGbzHW+js6NbUNTXNzQ4rW/yBIXH47n/9HVfFsR8Pt+j9nebJIXf729/+zETcsFg8P2nRIrr2v4fg9wCPnjQTyTwM1IAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: contain;
}

.button-green-right.disabled,
.button-green-right.disabled:hover,
.button-green-right.disabled:active,
.button-green-right.disabled.active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #002b02;
  color: #376d3b;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
    inset 0 -6px 4px -8px #376d3b, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
  filter: none;
}

.button-red {
  @extend .button;
  background-color: #fe5a5a;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 10px 2px -8px #fda1a1,
    inset 0 10px 2px -8px #8b0101, inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
}

.button-red:hover,
.button-red:focus,
.button-red.hover {
  color: #000;
  text-decoration: none;
  outline: 0;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #f8eaea,
    inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000,
    inset 0 0 4px 2px #c35353;
  background-color: #ff9b9b;
  filter: drop-shadow(0 0 2px #c35353);
}

.button-red:active,
.button-red.active {
  position: relative;
  padding-top: 12px;
  padding-bottom: 8px;
  vertical-align: -2px;
  box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000, inset 8px 0 4px -8px #642323,
    inset 8px 0 4px -8px #642323, inset -8px 0 4px -8px #642323, inset -8px 0 4px -8px #642323,
    inset 0 9px 2px -8px #642323, inset 0 -9px 2px -8px #642323, inset 0 -8.5px 0 -8px #642323, 0 0 4px 0 #000;
  background-color: #fca8a8;
  filter: none;
  outline: 0;
}

.button-red.disabled,
.button-red.disabled:hover,
.button-red.disabled:active,
.button-red.disabled.active {
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
  vertical-align: 0;
  background-color: #571f1f;
  color: #8c4e4e;
  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
    inset 0 -6px 4px -8px #8c4e4e, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
  filter: none;
}

.square-sm {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  vertical-align: baseline;
  padding: 2px;
  min-width: 36px;
  width: 36px;
  height: 36px;
  text-align: center;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 8px;
}

.pagination-dots {
  width: 30px;
  min-width: 30px;
}

.square-sm > i,
.square-l > i {
  margin: 0;
}
