.btn {
    border-radius: 20px;
    color: var(--base-text-color);
    font-weight: var(--font-weight-light);
    font-size: var(--text-size-base);
    line-height: var(--text-line-height-base);
}
.btn:hover {
    color: var(--color-primary-text-hover);
}
.btn:focus {
    color: var(--color-primary-text-focus);
}
.btn:active {
    color: var(--color-primary-text-active);
}
.btn:disabled {
    background-color: var(--color-primary-disabled);
    color: var(--color-primary-text-disabled);
    border-color: var(--color-primary-outline-disabled);
}

.btn.btn-primary, button.btn-primary {
    background-color: var(--color-primary-background);
    border-color: var(--color-primary-border);
    box-shadow: unset;
    color: var(--color-primary-text);
}
.btn.btn-primary:hover, button.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-border-hover);
    box-shadow: unset;
    color: var(--color-primary-text-hover);
}
.btn.btn-primary:focus, button.btn-primary:focus {
    background-color: var(--color-primary-focus);
    border-color: var(--color-primary-border-focus);
    color: var(--color-primary-text-focus);
}
.btn.btn-primary:active, button.btn-primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-border-active);
    box-shadow: unset;
    outline: unset;
    color: var(--color-primary-text-active);
}
.btn.btn-primary:disabled, button.btn-primary.disabled {
    background-color: var(--color-primary-disabled);
    border-color: var(--color-primary-border-disabled);
    box-shadow: unset;
    color: var(--color-primary-text-disabled);
}

.btn-outline-primary:not(:disabled):not(.disabled) {
    background-color: var(--color-primary-outline-background);
    border-color: var(--color-primary-outline-border);
    color: var(--color-primary-outline);
}
.btn-outline-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--color-primary-outline-background-hover);
    border-color: var(--color-primary-outline-border-hover);
    color: var(--color-primary-outline-hover);
}
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--color-primary-outline-background-active);
    border-color: var(--color-primary-outline-border-active);
    color: var(--color-primary-outline-active);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    background-color: var(--color-primary-outline-background-disabled);
    border-color: var(--color-primary-outline-border-disabled);
    color: var(--color-primary-outline-disabled);
}
.btn-outline-primary:hover svg {
    color: var(--sp-white);
}

.btn.btn-secondary, button.btn-secondary {
    background-color: var(--color-secondary-background);
    border-color: var(--color-secondary-border);
    box-shadow: none;
    color: var(--color-secondary-text);
}
.btn.btn-secondary:hover, button.btn-secondary:hover {
    background-color: var(--color-secondary-background-hover);
    border-color: var(--color-secondary-border-hover);
    box-shadow: none;
    color: var(--color-secondary-text-hover);
}
.btn.btn-secondary:active, button.btn-secondary:active {
    background-color: var(--color-secondary-background-active);
    color: var(--color-secondary-text-active);
    border-color: var(--color-secondary-border);
    box-shadow: none;
}
.btn.btn-secondary:focus, button.btn-secondary:focus {
    background-color: var(--color-secondary-background-focus);
    color: var(--color-secondary-text-focus);
    border-color: var(--color-secondary-border-focus);
}
.btn.btn-secondary:disabled, button.btn-secondary.disabled {
    background-color: var(--color-secondary-background-disabled);
    color: var(--color-secondary-text-disabled);
    border-color: var(--color-secondary-border-disabled);
    box-shadow: none;
}

.btn.btn-cta {
    background-color: var(--button-cta-background-color);
    border-color: transparent;
    box-shadow: none;
    color: var(--button-cta-text-color);
}
.btn.btn-cta:hover {
    background-color: var(--button-cta-background-color-hover);
    color: var(--button-cta-text-color-hover);
}
.btn.btn-cta:active, button.btn-cta:active {
    background-color: var(--button-cta-background-color-active);
    color: var(--button-cta-text-color-active);
}
.btn.btn-cta:focus, button.btn-cta:focus {
    background-color: var(--button-cta-background-color-focus);
    color: var(--button-cta-text-color-focus);
}
.btn.btn-cta:disabled, button.btn-cta.disabled {
    background-color: var(--button-cta-background-color-disabled);
    color: var(--button-cta-text-color-disabled);
}

.btn.annotation-button {
    border-radius: 4px;
    padding: 0.75rem;
}

.btn.btn-danger {
    background-color: var(--sp-red-500);
    border-color: var(--sp-red-500);
    color: var(--sp-white);
}
.btn.btn-danger:hover,
.btn.btn-danger:active {
    background-color: var(--sp-red-700);
    border-color: var(--sp-red-700);
}

.btn-delete {
    background-color: var(--sp-red-500);
    border-color: var(--sp-red-500);
    color: var(--sp-white);
}

.btn-delete:hover {
    background-color: var(--sp-red-700);
    border-color: var(--sp-red-700);
    color: var(--sp-white);
}

.btn-checkbox {
    background-color: var(--color-button-checkbox-background);
    border-color: var(--color-button-checkbox-border);
    color: var(--color-button-checkbox-text);
    font-size: var(--text-size-base);
    font-weight: var(--font-weight-light);
    border-radius: 20px;
    padding: 4px 20px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.btn-checkbox:hover {
    background-color: var(--color-button-checkbox-background-hover);
    border-color: var(--color-button-checkbox-border-hover);
    color: var(--color-button-checkbox-text-hover);
}
.btn-checkbox-check {
    background-color: var(--color-button-checkbox-background-checked);
    border-color: var(--color-button-checkbox-border-checked);
    color: var(--color-button-checkbox-text-checked);
}
.btn-checkbox-check:hover {
    background-color: var(--color-button-checkbox-background-checked-hover);
    border-color: var(--color-button-checkbox-border-checked-hover);
    color: var(--color-button-checkbox-text-checked-hover);
}
.btn-checkbox > [data-toggle="tooltip"] {
    color: var(--color-button-checkbox-text);
}
.btn-checkbox-check > [data-toggle="tooltip"] {
    color: var(--color-button-checkbox-text-checked);
}

.btn-details-inactive,
.btn-details-inactive:hover {
    cursor: default;
    background-color: #E1E1E1;
    border-color: #AEAEAE;
    color: var(--sp-white);
}

.btn-direct-copy {
    margin-right: 1rem;
}

.btn-disabled,
.btn-disabled:hover {
    background-color: var(--color-primary-disabled);
    color: var(--color-primary-text-disabled);
    border-color: var(--color-primary-outline-disabled);
    pointer-events: none;
}

.btn-filter-dropdown{
    border:1px solid;
    margin-bottom: 1px;
    text-align: left;
}

.btn-icon {
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn-icon > img, .btn-icon > i {
    margin-right: .25rem;
    margin-top: -2px;
    height: 1rem;
}

.btn-orange, .btn-warning {
    background-color: var(--sp-orange);
    border-color: var(--sp-orange);
    color: var(--sp-white);
}

.btn-reorder {
    border: 1px solid #0F62FE;
    color: #0F62FE;
    width: 100%;
    max-width: 200px;
    line-height: 1.5;
    background-color: var(--sp-white);
}
.btn-reorder:hover {
    background-color: #0F62FE;
    border-color: #0F62FE;
    color: var(--sp-white);
}

.btn-switch {
    background-color: var(--sp-white);
    border: 1px solid #0F62FE;
    color: #0F62FE;
    font-size: 12px;
    border-radius: 15px;
    padding: 4px 20px;
}

.btn-view button {
    border: transparent;
    background: transparent;
}
.btn-view button:active {
    outline-width: 0;
}

.btn.btn-link {
    color: var(--link-text-color);
    text-decoration: none;
}
.btn-link:hover {
    color: var(--link-text-color-hover);
}
.btn-link:active {
    color: var(--link-text-color-active);
}
.btn.btn-link.danger {
    color: var(--color-danger-text);
}
.btn-link.danger:hover {
    color: var(--color-danger-text-hover);
}
.btn-link.danger:active {
    color: var(--color-danger-text-active);
}

.btn-upgrade {
    background-color: var(--upgrade-button-background-color);
    border-color: var(--upgrade-button-border-color);
    color: var(--upgrade-button-text-color);
}
.btn-upgrade:hover {
    background-color: var(--upgrade-button-background-color-hover);
    border-color: var(--upgrade-button-border-color-hover);
    color: var(--upgrade-button-text-color-hover);
}
.btn.btn-clear {
    background-color: transparent;
    border-color: transparent;
    margin: 0;
    padding: 0;
}