.c-btn-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2px;
    padding-bottom: 0;
    transition: background-color 150ms, border-color 150ms, color 150ms;
    height: min-content;
    width: fit-content;
    align-items: center;
}

/* Fill    */
.c-btn-fill {
    background-color: var(--c-btn-standard) !important;
    /*border: 1px solid;*/
    /*border-color: var(--fore-clr) !important;*/
    color: var(--fore-clr) !important;
}

.c-btn-fill:hover {
    background-color: var(--c-btn-standard2) !important;
    /*border: 1px solid;*/
    /*border-color: var(--back-clr) !important;*/
    color: var(--font-color4) !important;
}

/* Transparent    */
.c-btn-transparent {
    background-color: transparent !important;
    color: #BBB !important;
    border: 1px solid;
}

.c-btn-transparent:hover {
    background-color: #BBB5 !important;
    color: var(--fore-clr) !important;
}

/* Clear    */
.c-btn-clear {
    background-color: transparent !important;
    color: #BBB !important;
    border: 1px solid;
}

.c-btn-clear:hover {
    background-color: #BBB !important;
    border-color: transparent !important;
    color: var(--fore-clr) !important;
}

/* Black */
.c-btn-blackSolid {
    background-color: black !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-blackSolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: black !important;
    color: black !important;
}

.c-btn-black {
    background-color: var(--fore-clr) !important;
    color: black !important;
    border: 1px solid;
}

.c-btn-black:hover {
    background-color: black !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* Red */
.c-btn-redSolid {
    background-color: #ff7070 !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-redSolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: #ff7070 !important;
    color: #ff7070 !important;
}

.c-btn-red {
    background-color: var(--fore-clr) !important;
    color: #ff7070 !important;
    border: 1px solid;
}

.c-btn-red:hover {
    background-color: #ff7070 !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* Orange */
.c-btn-orangeSolid {
    background-color: #da881f !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-orangeSolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: #da881f !important;
    color: #da881f !important;
}

.c-btn-orange {
    background-color: var(--fore-clr) !important;
    color: #da881f !important;
    border: 1px solid;
}

.c-btn-orange:hover {
    background-color: #da881f !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* Green */
.c-btn-greenSolid {
    background-color: green !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-greenSolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: green !important;
    color: green !important;
}

.c-btn-green {
    background-color: var(--fore-clr) !important;
    color: green !important;
    border: 1px solid;
}

.c-btn-green:hover {
    background-color: green !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* Blue */
.c-btn-blueSolid {
    background-color: var(--fore-clr) !important;
    color: cornflowerblue !important;
    border: 1px solid;
}

.c-btn-blueSolid:hover {
    background-color: cornflowerblue !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

.c-btn-blue {
    background-color: var(--fore-clr) !important;
    color: cornflowerblue !important;
    border: 1px solid !important;
}

.c-btn-blue:hover {
    background-color: cornflowerblue !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* Yellow */
.c-btn-yellowSolid {
    background-color: yellow !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-yellowSolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: #c3c323 !important;
    color: #c3c323 !important;
}

.c-btn-yellow {
    background-color: var(--fore-clr) !important;
    color: #c3c323 !important;
    border: 1px solid;
}

.c-btn-yellow:hover {
    background-color: #c3c323;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* gray */
.c-btn-graySolid {
    background-color: gray !important;
    color: var(--fore-clr) !important;
    border: 1px solid;
}

.c-btn-graySolid:hover {
    background-color: var(--fore-clr) !important;
    border-color: gray !important;
    color: gray !important;
}

.c-btn-gray {
    background-color: var(--fore-clr) !important;
    color: gray !important;
    border: 1px solid;
}

.c-btn-gray:hover {
    background-color: gray !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

/* standard */
.c-btn-standardSolid {
    background-color: var(--back-clr) !important;
    color: var(--font-color4) !important;
    border: 1px solid;
}

.c-btn-standardSolid:hover {
    background-color: var(--font-color4) !important;
    border-color: var(--back-clr) !important;
    color: var(--c-btn-standard) !important;
}

.c-btn-standard {
    background-color: var(--fore-clr) !important;
    color: var(--c-btn-standard) !important;
    border: 1px solid;
}

.c-btn-standard:hover {
    background-color: var(--c-btn-standard) !important;
    border-color: var(--fore-clr) !important;
    color: var(--fore-clr) !important;
}

.c-btn-text {
    color: inherit !important;
    font-size: var(--font-medium);
    font-family: var(--font);
    padding: 4px 8px;
}

.c-btn-loader {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
}