button {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 5px 15px;
    border-radius: 5px;
    border: none;     
    transition: filter 0.25s, box-shadow 0.25s, transform 0.25s;
    color: #000;
    cursor: pointer;
}

button.sq {
    padding: 5px;
}

button.big {
    padding: 10px 20px;
}

button.big-sq {
    padding: 10px;
}

button.bg-hpgreen, 
/*button.bg-green, */
/*button.bg-greenlight, */
button.bg-greendark, 
/*button.bg-blue, */
/*button.bg-bluelight, */
button.bg-bluedark, 
button.bg-red, 
/*button.bg-redlight, */
button.bg-reddark, 
/*button.bg-grey, */
/*button.bg-greylight, */
button.bg-pink, 
/*button.bg-pinklight, */
button.bg-darker, 
button.bg-dark, 
button.bg-dark-sec, 
button.bg-black {
    color: var(--text-col);
}

button:disabled {
    opacity: 0.75;
    cursor: auto;
}

button:not(:disabled):hover, button:not(:disabled):focus {
    box-shadow: -5px -5px 15px 0px rgba(255, 255, 255,0.125) inset; 
    transform: scale(1.025);
}

button:not(:disabled):hover {
    filter: brightness(1.1);
    border: none;
}

button:not(:disabled):active {
    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.25) inset; 
    border: none;
    transform: scale(0.975) !important;
}

button * {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
}

button>svg {
    margin-right: 5px;
    margin-left: 5px;
}

button>svg:first-child {
    margin-left: 0;
}

button>svg:last-child {
    margin-right: 0;
}

button.outline {
    background: transparent !important;
    color: var(--text-col) !important;
}

button.outline.bg-hpgreen {
    box-shadow:inset 0px 0px 0px 2px var(--hpgreen) !important;
}
button.outline.bg-green {
    box-shadow:inset 0px 0px 0px 2px var(--green) !important;
}
button.outline.bg-greensecond {
    box-shadow:inset 0px 0px 0px 2px var(--green) !important;
}
button.outline.bg-greenlight {
    box-shadow:inset 0px 0px 0px 2px var(--greenlight) !important;
}
button.outline.bg-greendark {
    box-shadow:inset 0px 0px 0px 2px var(--greendark) !important;
}
button.outline.bg-blue {
    box-shadow:inset 0px 0px 0px 2px var(--blue) !important;
}
button.outline.bg-bluelight {
    box-shadow:inset 0px 0px 0px 2px var(--bluelight) !important;
}
button.outline.bg-bluedark {
    box-shadow:inset 0px 0px 0px 2px var(--bluedark) !important;
}
button.outline.bg-red {
    box-shadow:inset 0px 0px 0px 2px var(--red) !important;
}
button.outline.bg-redlight {
    box-shadow:inset 0px 0px 0px 2px var(--redlight) !important;
}
button.outline.bg-reddark {
    box-shadow:inset 0px 0px 0px 2px var(--reddark) !important;
}
button.outline.bg-yellow {
    box-shadow:inset 0px 0px 0px 2px var(--yellow) !important;
}
button.outline.bg-yellowlight {
    box-shadow:inset 0px 0px 0px 2px var(--yellowlight) !important;
}
button.outline.bg-yellowdark {
    box-shadow:inset 0px 0px 0px 2px var(--yellowdark) !important;
}
button.outline.bg-orange {
    box-shadow:inset 0px 0px 0px 2px var(--orange) !important;
}
button.outline.bg-orangelight {
    box-shadow:inset 0px 0px 0px 2px var(--orangelight) !important;
}
button.outline.bg-purple {
    box-shadow:inset 0px 0px 0px 2px var(--purple) !important;
}
button.outline.bg-purplelight {
    box-shadow:inset 0px 0px 0px 2px var(--purplelight) !important;
}
button.outline.bg-orangedark {
    box-shadow:inset 0px 0px 0px 2px var(--orangedark) !important;
}
button.outline.bg-grey {
    box-shadow:inset 0px 0px 0px 2px var(--grey) !important;
}
button.outline.bg-greylight {
    box-shadow:inset 0px 0px 0px 2px var(--greylight) !important;
}
button.outline.bg-pink {
    box-shadow:inset 0px 0px 0px 2px var(--pink) !important;
}
button.outline.bg-pinklight {
    box-shadow:inset 0px 0px 0px 2px var(--pinklight) !important;
}
button.outline.bg-white {
    box-shadow:inset 0px 0px 0px 2px #fff !important;
}
button.outline.bg-black {
    box-shadow:inset 0px 0px 0px 2px #000 !important;
}

button.outline.bg-primary {
    box-shadow:inset 0px 0px 0px 2px rgba(0, 0, 0, 0.85) !important;
}

button.outline.bg-secondary {
    box-shadow:inset 0px 0px 0px 2px rgba(0, 0, 0, 0.6) !important;
}
button.outline.bg-dark {
    box-shadow:inset 0px 0px 0px 2px var(--dark-col) !important;
}
button.outline.bg-dark-sec {
    box-shadow:inset 0px 0px 0px 2px var(--dark-sec-col) !important;
}