.button-green,
.button-green.e-btn,
.button-green.e-btn.e-active {
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--ProconomSuperLightGreen);
    color: var(--ProconomDarkGreen);
}

.button-green:enabled:active:hover,
.button-green:enabled:focus:hover,
.button-green:enabled:hover,
.button-green.e-btn:enabled:active:hover,
.button-green.e-btn:enabled:focus:hover,
.button-green.e-btn:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-green:disabled,
.button-green:disabled:hover,
.button-green.e-btn:disabled,
.button-green.e-btn:disabled:hover {
    background-color: var(--ProconomLightGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-green:active,
.button-green.e-btn:active {
    background-color: var(--ProconomDarkGreen) !important;
    color: var(--ProconomWhite) !important;
}

.button-green:hover,
.button-green:focus,
.button-green.e-btn:hover,
.button-green.e-btn:focus {
    background-color: var(--ProconomSuperLightGreen);
    color: var(--ProconomDarkGreen);
}

.button-outline-green,
.button-outline-green:hover,
.button-outline-green:focus {
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 1px solid;
    background-color: var(--ProconomWhite) !important;
    border-color: var(--ProconomDarkGreen);
    color: var(--ProconomDarkGreen);
}

.button-outline-green:enabled:active:hover,
.button-outline-green:enabled:focus:hover,
.button-outline-green:enabled:hover,
.button-outline-green:hover:enabled:active:hover,
.button-outline-green:hover:enabled:focus:hover,
.button-outline-green:hover:enabled:hover,
.button-outline-green:focus:enabled:active:hover,
.button-outline-green:focus:enabled:focus:hover,
.button-outline-green:focus:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-outline-green:disabled,
.button-outline-green:disabled:hover,
.button-outline-green:hover:disabled,
.button-outline-green:hover:disabled:hover,
.button-outline-green:focus:disabled,
.button-outline-green:focus:disabled:hover {
    border-color: var(--ProconomDarkGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-outline-green:active,
.button-outline-green:hover:active,
.button-outline-green:focus:active {
    background-color: var(--ProconomSuperLightGreen) !important;
    border-color: transparent;
}

.button-blue {
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--ProconomSuperLightBlue);
    color: var(--ProconomNormalBlue);
}

.button-blue:enabled:active:hover,
.button-blue:enabled:focus:hover,
.button-blue:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-blue:disabled,
.button-blue:disabled:hover {
    background-color: var(--ProconomLightGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-blue:active {
    background-color: var(--ProconomNormalBlue) !important;
    color: var(--ProconomWhite) !important;
}

.button-blue:hover,
.button-blue:focus {
    background-color: var(--ProconomSuperLightBlue);
    color: var(--ProconomNormalBlue);
}

.button-red {
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--ProconomSuperLightRed);
    color: var(--ProconomRed);
}

.button-red:enabled:active:hover,
.button-red:enabled:focus:hover,
.button-red:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-red:disabled,
.button-red:disabled:hover {
    background-color: var(--ProconomLightGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-red:active {
    background-color: var(--ProconomRed) !important;
    color: var(--ProconomWhite) !important;
}

.button-red:hover,
.button-red:focus {
    background-color: var(--ProconomSuperLightRed);
    color: var(--ProconomRed);
}

.button-outline-red,
.button-outline-red:hover,
.button-outline-red:focus {
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 1px solid;
    background-color: var(--ProconomWhite) !important;
    border-color: var(--ProconomRed);
    color: var(--ProconomRed);
}

.button-outline-red:enabled:active:hover,
.button-outline-red:enabled:focus:hover,
.button-outline-red:enabled:hover,
.button-outline-red:hover:enabled:active:hover,
.button-outline-red:hover:enabled:focus:hover,
.button-outline-red:hover:enabled:hover,
.button-outline-red:focus:enabled:active:hover,
.button-outline-red:focus:enabled:focus:hover,
.button-outline-red:focus:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-outline-red:disabled,
.button-outline-red:disabled:hover,
.button-outline-red:hover:disabled,
.button-outline-red:hover:disabled:hover,
.button-outline-red:focus:disabled,
.button-outline-red:focus:disabled:hover {
    border-color: var(--ProconomDarkGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-outline-red:active,
.button-outline-red:hover:active,
.button-outline-red:focus:active {
    background-color: var(--ProconomSuperLightRed) !important;
    border-color: transparent;
}

.button-gray,
.button-gray-gray {
    border-radius: 8px;
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--ProconomNormalGray);
    color: gray;
}

.button-gray:enabled:active:hover,
.button-gray:enabled:focus:hover,
.button-gray:enabled:hover,
.button-gray-gray:enabled:active:hover,
.button-gray-gray:enabled:focus:hover,
.button-gray-gray:enabled:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.button-gray:disabled,
.button-gray:disabled:hover,
.button-gray-gray:disabled,
.button-gray-gray:disabled:hover {
    background-color: var(--ProconomLightGray) !important;
    color: var(--ProconomDarkGray) !important;
}

.button-gray:active,
.button-gray-gray:active {
    background-color: gray !important;
    color: var(--ProconomWhite) !important;
}

.button-gray:hover,
.button-gray:focus,
.button-gray-gray:hover,
.button-gray-gray:focus {
    background-color: var(--ProconomNormalGray);
    color: gray;
}

.button-gray-gray:not(:active) {
    background-color: var(--ProconomWhite);
}

.adsk-button.toggled {
    background-color: var(--ProconomSuperLightGreen) !important;
    color: var(--ProconomDarkGreen) !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.adsk-button.active {
    box-shadow: inset 3px 3px 6px #d9d9d9, inset -3px -3px 6px #e8e8e8 !important;
}