.buttonPrimary{
    background-color: var(--colorButtonNormal) !important;
    transition: all 0.3s ease-in-out !important;
    cursor:pointer !important;
    color:var(--colorBlack) !important;
    user-select: none !important;
}
.buttonRed{
    background-color: var(--colorRed) !important;
    color:#fff !important;
}
.buttonBlack{
    background-color: var(--colorBlack) !important;
    color:#fff !important;
}
.buttonText{
    padding: 0.5rem 1rem;
    height: auto !important;
    width: auto !important;
}
.buttonText>div{
    pointer-events: none !important;
}
body.desktop .buttonPrimary:hover,
body.desktop .buttonPrimary:focus-visible{
    background-color: var(--colorButtonHover) !important;
    box-shadow: var(--hoverOutline);
    color:var(--colorWhite) !important;
}
body.desktop .buttonPrimary:hover > div,
body.desktop .buttonPrimary:focus-visible > div{
    color:var(--colorWhite) !important;
}
body.desktop .buttonPrimary:hover > .ggskin_svg img,
body.desktop .buttonPrimary:focus-visible > .ggskin_svg img{
    filter: invert(100%);
}
body.desktop .buttonRed:hover,
body.desktop .buttonRed:focus-visible,
body.desktop .buttonBlack:focus-visible,
body.desktop .buttonBlack:hover{
    background-color: var(--colorYellow) !important;
    color:var(--colorBlack) !important;
}
body.desktop .buttonRed:hover > div,
body.desktop .buttonRed:focus-visible > div,
body.desktop .buttonBlack:hover > div,
body.desktop .buttonBlack:focus-visible > div{
    color:var(--colorBlack) !important;
}

.buttonSmall{
	box-shadow: none !important;
}