button svg {
    pointer-events: none;
}

.cds-btn-table-cell {
    margin: auto !important;
}

/* Buttons */
.cds-btn-group {
    display: flex;
    gap: 8px;
    padding: 8px;
}

.cds-header-action-btn-group {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    padding-right: 88px;
}

.cds-table-btn-group {
    display: flex;
    gap: 8px;
    padding: 0;
}

.cds-page-header-btn-group {
    display: flex;
    gap: 8px;
    padding: 0;
}

.cds-btn-action-group {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px;
}

/* Default - neutral */
button.cds-btn {
    font-family: var(--cds-font-family);
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: fit-content;
    max-height: 40px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: none;
    margin: 0;
    padding: 6px 16px;
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-neutral);
    border: 1px solid transparent;
    cursor: pointer;
}

button.cds-btn > a {
    font-family: var(--cds-font-family);
    font-style: normal;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--cds-text-strong);
    white-space: nowrap;
}

button.cds-btn:hover {
    background-color: var(--cds-btn-neutral-hover);
}

button.cds-btn:active {
    background-color: var(--cds-btn-neutral-active);
}

button.cds-btn:focus {
    outline: var(--cds-color-neutral-weak) solid 2px;
}

button.cds-btn:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
    border: 1px solida var(--cds-btn-disabled);
    cursor: default;
    pointer-events: none;
}

button.cds-btn-disabled {
    outline: none !important;
    background-color: var(--cds-btn-disabled) !important;
    border: 1px solid var(--cds-btn-disabled) !important;
    cursor: default !important;
}

button.cds-btn-disabled > a {
    color: var(--cds-color-white) !important;
}

button.cds-btn-disabled .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-link {
    background-color: transparent;
}

button.cds-btn-link > a {
    font-size: 13px;
    /* color: var(--cds-color-offblack); */
}

button.cds-btn-link:hover {
    background-color: transparent;
}

button.cds-btn-link:hover > a {
    color: var(--cds-color-offwhite);
    text-decoration: none;
}

button.cds-btn-link:active {
    color: var(--cds-btn-neutral-active);
    background-color: transparent;
}

button.cds-btn-link:active > a {
    color: var(--cds-btn-neutral-active);
}

button.cds-btn-link:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link:disabled > a {
    color: var(--cds-btn-disabled);
}

button.cds-btn-link:focus {
    outline: none !important;
}

button.cds-btn-link .cds-icon {
    fill: var(--cds-color-offblack);
}

button.cds-table-header-btn a {
    display: none;
}

button.cds-btn-expanded {
    min-width: 120px;
}

/* Default - Primary */

button.cds-btn-primary {
    color: var(--cds-text-strong);
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-primary > a {
    color: var(--cds-text-strong);
}

button.cds-btn-primary:hover {
    background-color: var(--cds-color-primary);
}

button.cds-btn-primary:active {
    background-color: var(--cds-color-primary);
}

button.cds-btn-primary:focus {
    outline: var(--cds-color-primary-weak) solid 2px;
}

button.cds-btn-primary:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-primary {
    color: var(--cds-btn-primary);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-primary > a {
    color: var(--cds-btn-primary);
}

button.cds-btn-link-primary:hover {
    color: var(--cds-btn-primary-hover);
    background-color: transparent;
}

button.cds-btn-link-primary:hover > a {
    color: var(--cds-btn-primary-hover);
}

button.cds-btn-link-primary:active {
    color: var(--cds-btn-primary-active);
    background-color: transparent;
}

button.cds-btn-link-primary:active > a {
    color: var(--cds-btn-primary-active);
}

button.cds-btn-link-primary:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-primary:disabled > a {
    color: var(--cds-btn-disabled);
}

button.cds-btn-link-primary .cds-icon {
    fill: var(--cds-btn-primary);
}

/* Default - Success */

button.cds-btn-success {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-success);
}

button.cds-btn-success > a {
    color: var(--cds-text-strong);
}

button.cds-btn-success:hover {
    background-color: var(--cds-btn-success-hover);
}

button.cds-btn-success:active {
    background-color: var(--cds-btn-success-active);
}

button.cds-btn-success:focus {
    outline: var(--cds-btn-success-focus) solid 2px;
}

button.cds-btn-success:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-success {
    color: var(--cds-btn-success);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-success > a {
    color: var(--cds-btn-success);
}

button.cds-btn-link-success:hover {
    color: var(--cds-btn-success-hover);
    background-color: transparent;
}

button.cds-btn-link-success:hover > a {
    color: var(--cds-btn-success-hover);
}

button.cds-btn-link-success:active {
    color: var(--cds-btn-success-active);
    background-color: transparent;
}

button.cds-btn-link-success:active > a {
    color: var(--cds-btn-success-active);
}

button.cds-btn-link-success:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-success:disabled > a {
    color: var(--cds-btn-disabled);
}

button.cds-btn-link-success .cds-icon {
    fill: var(--cds-btn-success);
}

/* Default - Alert */

button.cds-btn-alert {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-alert);
}

button.cds-btn-alert > a {
    color: var(--cds-text-strong);
}

button.cds-btn-alert:hover {
    background-color: var(--cds-btn-alert-hover);
}

button.cds-btn-alert:active {
    background-color: var(--cds-btn-alert-active);
}

button.cds-btn-alert:focus {
    outline: var(--cds-btn-alert-focus) solid 2px;
}

button.cds-btn-alert:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-alert {
    color: var(--cds-btn-alert);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-alert > a {
    color: var(--cds-btn-alert);
}

button.cds-btn-link-alert:hover {
    color: var(--cds-btn-alert-hover);
    background-color: transparent;
}

button.cds-btn-link-alert:hover > a {
    color: var(--cds-btn-alert-hover);
}

button.cds-btn-link-alert:active {
    color: var(--cds-btn-alert-active);
    background-color: transparent;
}

button.cds-btn-link-alert:active > a {
    color: var(--cds-btn-alert-active);
}

button.cds-btn-link-alert:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-alert:disabled > a {
    color: var(--cds-btn-disabled);
}

/* Default - Critical */

button.cds-btn-critical {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-critical);
}

button.cds-btn-critical > a {
    color: var(--cds-text-strong);
}

button.cds-btn-critical:hover {
    background-color: var(--cds-btn-critical-hover);
}

button.cds-btn-critical:active {
    background-color: var(--cds-btn-critical-active);
}

button.cds-btn-critical:focus {
    outline: var(--cds-btn-critical-focus) solid 2px;
}

button.cds-btn-critical:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-critical {
    color: var(--cds-btn-critical);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-critical > a {
    color: var(--cds-btn-critical);
}

button.cds-btn-link-critical:hover {
    color: var(--cds-btn-critical-hover);
    background-color: transparent;
}

button.cds-btn-link-critical:hover > a {
    color: var(--cds-btn-critical-hover);
}

button.cds-btn-link-critical:active {
    color: var(--cds-btn-critical-active);
    background-color: transparent;
}

button.cds-btn-link-critical:active > a {
    color: var(--cds-btn-critical-active);
}

button.cds-btn-link-critical:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-critical:disabled > a {
    color: var(--cds-btn-disabled);
}

/* Default - Purple */

button.cds-btn-purple {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-purple);
}

button.cds-btn-purple > a {
    color: var(--cds-text-strong);
}

button.cds-btn-purple:hover {
    background-color: var(--cds-btn-purple-hover);
}

button.cds-btn-purple:active {
    background-color: var(--cds-btn-purple-active);
}

button.cds-btn-purple:focus {
    outline: var(--cds-btn-purple-focus) solid 2px;
}

button.cds-btn-purple:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-purple {
    color: var(--cds-btn-purple);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-purple > a {
    color: var(--cds-btn-purple);
}

button.cds-btn-link-purple:hover {
    color: var(--cds-btn-purple-hover);
    background-color: transparent;
}

button.cds-btn-link-purple:hover > a {
    color: var(--cds-btn-purple-hover);
}

button.cds-btn-link-purple:active {
    color: var(--cds-btn-purple-active);
    background-color: transparent;
}

button.cds-btn-link-purple:active > a {
    color: var(--cds-btn-purple-active);
}

button.cds-btn-link-purple:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-purple:disabled > a {
    color: var(--cds-btn-disabled);
}

/* Default - Petrol */

button.cds-btn-petrol {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-petrol);
}

button.cds-btn-petrol > a {
    color: var(--cds-text-strong);
}

button.cds-btn-petrol:hover {
    background-color: var(--cds-btn-petrol-hover);
}

button.cds-btn-petrol:active {
    background-color: var(--cds-btn-petrol-active);
}

button.cds-btn-petrol:focus {
    outline: var(--cds-btn-petrol-focus) solid 2px;
}

button.cds-btn-petrol:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-petrol {
    color: var(--cds-btn-petrol);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-petrol > a {
    color: var(--cds-btn-petrol);
}

button.cds-btn-link-petrol:hover {
    color: var(--cds-btn-petrol-hover);
    background-color: transparent;
}

button.cds-btn-link-petrol:hover > a {
    color: var(--cds-btn-petrol-hover);
}

button.cds-btn-link-petrol:active {
    color: var(--cds-btn-petrol-active);
    background-color: transparent;
}

button.cds-btn-link-petrol:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-petrol:disabled > a {
    color: var(--cds-btn-disabled);
}

/* Default - MAgenta */

button.cds-btn-magenta {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-magenta);
}

button.cds-btn-magenta > a {
    color: var(--cds-text-strong);
}

button.cds-btn-magenta:hover {
    background-color: var(--cds-btn-magenta-hover);
}

button.cds-btn-magenta:active {
    background-color: var(--cds-btn-magenta-active);
}

button.cds-btn-magenta:focus {
    outline: var(--cds-btn-magenta-focus) solid 2px;
}

button.cds-btn-magenta:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

button.cds-btn-link-magenta {
    color: var(--cds-btn-magenta);
    background-color: transparent;
    padding: 0;
}

button.cds-btn-link-magenta > a {
    color: var(--cds-btn-magenta);
}

button.cds-btn-link-magenta:hover {
    color: var(--cds-btn-magenta-hover);
    background-color: transparent;
}

button.cds-btn-link-magenta:hover > a {
    color: var(--cds-btn-magenta-hover);
}

button.cds-btn-link-magenta:active {
    color: var(--cds-btn-magenta-active);
    background-color: transparent;
}

button.cds-btn-link-magenta:disabled {
    color: var(--cds-btn-disabled);
    background-color: transparent;
}

button.cds-btn-link-magenta:disabled > a {
    color: var(--cds-btn-disabled);
}



/* Outlined - neutral */
button.cds-btn-outlined {
    color: var(--cds-btn-neutral);
    background-color: transparent;
    border: 1px solid var(--cds-btn-neutral);
}

button.cds-btn-outlined > a {
    font-weight: 500;
    color: var(--cds-color-neutral-strong);
}

button.cds-btn-outlined .cds-icon {
    fill: var(--cds-color-neutral);
}

button.cds-btn-outlined:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-neutral);
    border: 1px solid var(--cds-btn-neutral);
}

button.cds-btn-outlined:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined:hover .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined:active {
    background-color: var(--cds-btn-neutral-active);
    border: 1px solid var(--cds-btn-neutral-active);
}

button.cds-btn-outlined:active .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined:focus {
    outline: var(--cds-btn-neutral-focus) solid 2px;
}

button.cds-btn-outlined:focus .cds-icon {
    fill: var(--cds-color-neutral);
}

button.cds-btn-outlined:disabled {
    outline: none;
    color: var(--cds-btn-disabled);
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
    cursor: default;
}

button.cds-btn-outlined:disabled > a {
    color: var(--cds-btn-disabled);
}

button.cds-btn-outlined:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Primary */

button.cds-btn-outlined-primary {
    color: var(--cds-btn-primary);
    background-color: transparent;
    border: 1px solid var(--cds-btn-primary);
}

button.cds-btn-outlined-primary > a {
    font-weight: 600;
    color: var(--cds-btn-primary);
}

button.cds-btn-outlined-primary .cds-icon {
    fill: var(--cds-color-primary) !important;
}

button.cds-btn-outlined-primary:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-primary-hover);
    border: 1px solid var(--cds-btn-primary-hover);
}

button.cds-btn-outlined-primary:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-primary:hover .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined-primary:active {
    background-color: var(--cds-btn-primary-active);
    border: 1px solid var(--cds-btn-primary-active);
}

button.cds-btn-outlined-primary:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-primary:focus {
    outline: var(--cds-btn-primary-focus) solid 2px;
}

button.cds-btn-outlined-primary:focus .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-primary:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-primary:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-primary:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Success */

button.cds-btn-outlined-success {
    color: var(--cds-btn-success);
    background-color: transparent;
    border: 1px solid var(--cds-btn-success);
}

button.cds-btn-outlined-success > a {
    font-weight: 600;
    color: var(--cds-btn-success);
}

button.cds-btn-outlined-success .cds-icon {
    fill: var(--cds-color-success) !important;
}

button.cds-btn-outlined-success:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-success);
    border: 1px solid var(--cds-btn-success);
}

button.cds-btn-outlined-success:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-success:hover .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined-success:active {
    background-color: var(--cds-btn-success-active);
    border: 1px solid var(--cds-btn-success-active);
}

button.cds-btn-outlined-success:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-success:focus {
    outline: var(--cds-btn-success-focus) solid 2px;
}

button.cds-btn-outlined-success:focus .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-success:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-success:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-success:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Alert */

button.cds-btn-outlined-alert {
    color: var(--cds-btn-alert);
    background-color: transparent;
    border: 1px solid var(--cds-btn-alert);
}

button.cds-btn-outlined-alert > a {
    font-weight: 600;
    color: var(--cds-btn-alert);
}

button.cds-btn-outlined-alert .cds-icon {
    fill: var(--cds-color-alert) !important;
}

button.cds-btn-outlined-alert:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-alert);
    border: 1px solid var(--cds-btn-alert);
}

button.cds-btn-outlined-alert:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-alert:hover .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined-alert:active {
    background-color: var(--cds-btn-alert-active);
    border: 1px solid var(--cds-btn-alert-active);
}

button.cds-btn-outlined-alert:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-alert:focus {
    outline: var(--cds-btn-alert-focus) solid 2px;
}

button.cds-btn-outlined-alert:focus .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-alert:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-alert:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-alert:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Critical */

button.cds-btn-outlined-critical {
    color: var(--cds-btn-critical);
    background-color: transparent;
    border: 1px solid var(--cds-btn-critical);
}

button.cds-btn-outlined-critical > a {
    font-weight: 600;
    color: var(--cds-btn-critical);
}

button.cds-btn-outlined-critical .cds-icon {
    fill: var(--cds-color-critical) !important;
}

button.cds-btn-outlined-critical:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-critical);
    border: 1px solid var(--cds-btn-critical);
}

button.cds-btn-outlined-critical:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-critical:hover .cds-icon {
    fill: var(--cds-color-white) !important;
}

button.cds-btn-outlined-critical:active {
    background-color: var(--cds-btn-critical-active);
    border: 1px solid var(--cds-btn-critical-active);
}

button.cds-btn-outlined-critical:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-critical:focus {
    outline: var(--cds-btn-critical-focus) solid 2px;
}

button.cds-btn-outlined-critical:focus .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-critical:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-critical:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-critical:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Purple */

button.cds-btn-outlined-purple {
    color: var(--cds-btn-purple);
    background-color: transparent;
    border: 1px solid var(--cds-btn-purple);
}

button.cds-btn-outlined-purple > a {
    font-weight: 600;
    color: var(--cds-btn-purple);
}

button.cds-btn-outlined-purple .cds-icon {
    fill: var(--cds-color-purple);
}

button.cds-btn-outlined-purple:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-purple);
    border: 1px solid var(--cds-btn-purple);
}

button.cds-btn-outlined-purple:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-purple:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-purple:active {
    background-color: var(--cds-btn-purple-active);
    border: 1px solid var(--cds-btn-purple-active);
}

button.cds-btn-outlined-purple:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-purple:focus {
    outline: var(--cds-btn-purple-focus) solid 2px;
}

button.cds-btn-outlined-purple:focus .cds-icon {
    fill: var(--cds-color-purple);
}

button.cds-btn-outlined-purple:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-purple:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-purple:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Petrol */

button.cds-btn-outlined-petrol {
    color: var(--cds-btn-petrol);
    background-color: transparent;
    border: 1px solid var(--cds-btn-petrol);
}

button.cds-btn-outlined-petrol > a {
    font-weight: 600;
    color: var(--cds-btn-petrol);
}

button.cds-btn-outlined-petrol .cds-icon {
    fill: var(--cds-color-petrol);
}

button.cds-btn-outlined-petrol:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-petrol);
    border: 1px solid var(--cds-btn-petrol);
}

button.cds-btn-outlined-petrol:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-petrol:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-petrol:active {
    background-color: var(--cds-btn-petrol-active);
    border: 1px solid var(--cds-btn-petrol-active);
}

button.cds-btn-outlined-petrol:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-petrol:focus {
    outline: var(--cds-btn-petrol-focus) solid 2px;
}

button.cds-btn-outlined-petrol:focus .cds-icon {
    fill: var(--cds-color-petrol);
}

button.cds-btn-outlined-petrol:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-petrol:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-petrol:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Otlined - Magenta */

button.cds-btn-outlined-magenta {
    color: var(--cds-btn-magenta);
    background-color: transparent;
    border: 1px solid var(--cds-btn-magenta);
}

button.cds-btn-outlined-magenta > a {
    font-weight: 600;
    color: var(--cds-btn-magenta);
}

button.cds-btn-outlined-magenta .cds-icon {
    fill: var(--cds-color-magenta);
}

button.cds-btn-outlined-magenta:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-magenta);
    border: 1px solid var(--cds-btn-magenta);
}

button.cds-btn-outlined-magenta:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-outlined-magenta:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-magenta:active {
    background-color: var(--cds-btn-magenta-active);
    border: 1px solid var(--cds-btn-magenta-active);
}

button.cds-btn-outlined-magenta:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-magenta:focus {
    outline: var(--cds-btn-magenta-focus) solid 2px;
}

button.cds-btn-outlined-magenta:focus .cds-icon {
    fill: var(--cds-color-magenta);
}

button.cds-btn-outlined-magenta:disabled {
    outline: none;
    background-color: transparent;
    border: 1px solid var(--cds-btn-disabled);
}

button.cds-btn-outlined-magenta:disabled a {
    color: var(--cds-color-disabled);
}

button.cds-btn-outlined-magenta:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Icon Button */
.cds-icon {
    width: 20px;
    height: 20px;
    fill: white;
}

.cds-icon.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

button.cds-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
}

button.cds-btn-icon-primary {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-primary);
}

button.cds-btn-icon-primary:hover {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-icon-primary:active {
    background-color: var(--cds-color-primary-light);
}

button.cds-btn-icon-success {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-success);
}

button.cds-btn-icon-success:hover {
    background-color: var(--cds-color-success-medium);
}

button.cds-btn-icon-success:active {
    background-color: var(--cds-color-success-light);
}

button.cds-btn-icon-alert {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-alert);
}

button.cds-btn-icon-alert:hover {
    background-color: var(--cds-color-alert-medium);
}

button.cds-btn-icon-alert:active {
    background-color: var(--cds-color-alert-light);
}

button.cds-btn-icon-critical {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-critical);
}

button.cds-btn-icon-critical:hover {
    background-color: var(--cds-color-critical-medium);
}

button.cds-btn-icon-critical:active {
    background-color: var(--cds-color-critical-light);
}

button.cds-btn-icon-white {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-offwhite);
}

button.cds-btn-icon-white .cds-icon {
    fill: var(--cds-color-grey);
}

button.cds-btn-icon-white:hover {
    fill: var(--cds-color-offblack);
    background-color: var(--cds-color-white);
}

button.cds-btn-icon-white:active {
    fill: var(--cds-color-offblack);
    background-color: var(--cds-color-white);
}

button.cds-btn-icon-offwhite {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--cds-color-offwhite);
}

button.cds-btn-icon-offwhite .cds-icon {
    fill: var(--cds-color-primary);
}

button.cds-btn-icon-offwhite:hover {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-icon-offwhite:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-icon-offwhite:active {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-icon-offwhite:active .cds-icon {
    fill: var(--cds-color-white);
}

/* Icon Button Outlined */


/* Default - neutral */
button.cds-btn-outlined-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-neutral);
}

button.cds-btn-outlined-icon .cds-icon {
    fill: var(--cds-btn-neutral);
}

button.cds-btn-outlined-icon:hover {
    background-color: var(--cds-color-neutral);
    box-shadow: none;
}

button.cds-btn-outlined-icon:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon:active {
    background-color: var(--cds-color-neutral-light);
    box-shadow: none;
}

button.cds-btn-outlined-icon:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Primary */
button.cds-btn-outlined-icon-primary {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-primary);
}

button.cds-btn-outlined-icon-primary .cds-icon {
    fill: var(--cds-color-primary);
}

button.cds-btn-outlined-icon-primary:hover {
    background-color: var(--cds-btn-primary-hover);
    box-shadow: none;
}

button.cds-btn-outlined-icon-primary:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-primary:active {
    border: none;
    background-color: var(--cds-color-primary-light);
    box-shadow: none;
}

button.cds-btn-outlined-icon-primary:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-primary:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon-primary:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Success */
button.cds-btn-outlined-icon-success {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-success);
}

button.cds-btn-outlined-icon-success .cds-icon {
    fill: var(--cds-color-success);
}

button.cds-btn-outlined-icon-success:hover {
    border: none;
    background-color: var(--cds-color-success);
    box-shadow: none;
}

button.cds-btn-outlined-icon-success:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-success:active {
    border: none;
    background-color: var(--cds-color-success-light);
    box-shadow: none;
}

button.cds-btn-outlined-icon-success:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-success:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon-success:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Alert */
button.cds-btn-outlined-icon-alert {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-alert);
}

button.cds-btn-outlined-icon-alert .cds-icon {
    fill: var(--cds-color-alert);
}

button.cds-btn-outlined-icon-alert:hover {
    border: none;
    background-color: var(--cds-color-alert);
    box-shadow: none;
}

button.cds-btn-outlined-icon-alert:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-alert:active {
    border: none;
    background-color: var(--cds-color-alert-light);
    box-shadow: none;
}

button.cds-btn-outlined-icon-alert:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-alert:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon-alert:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

button.cds-btn-outlined-icon-critical {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-critical);
}

button.cds-btn-outlined-icon-critical .cds-icon {
    fill: var(--cds-color-critical);
}

button.cds-btn-outlined-icon-critical:hover {
    border: none;
    background-color: var(--cds-color-critical);
    box-shadow: none;
}

button.cds-btn-outlined-icon-critical:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-critical:active {
    border: none;
    background-color: var(--cds-color-critical-light);
    box-shadow: none;
}

button.cds-btn-outlined-icon-critical:active .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-outlined-icon-critical:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon-critical:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* White */
button.cds-btn-outlined-icon-white {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-offwhite);
}

button.cds-btn-outlined-icon-white .cds-icon {
    fill: var(--cds-color-offwhite);
}

button.cds-btn-outlined-icon-white:hover {
    border: none;
    background-color: var(--cds-color-white);
    box-shadow: none;
}

button.cds-btn-outlined-icon-white:hover .cds-icon {
    fill: var(--cds-color-grey);
}

button.cds-btn-outlined-icon-white:active {
    border: none;
    background-color: var(--cds-color-white);
    box-shadow: none;
}

button.cds-btn-outlined-icon-white:active .cds-icon {
    fill: var(--cds-color-offblack);
}

button.cds-btn-outlined-icon-white:disabled {
    box-shadow: inset 0px 0px 0px 2px var(--cds-color-disabled);
    background-color: transparent;
}

button.cds-btn-outlined-icon-white:disabled .cds-icon {
    fill: var(--cds-color-disabled);
}

/* Sizes */

button.cds-btn-fill {
    width: 100%;
}

button.cds-btn-large {
    max-height: 52px;
    gap: 12px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    padding: 16px 32px;
}

button.cds-btn-small {
    height: 26px;
    min-width: 26px;
    padding: 4px 12px;
}

button.cds-btn-small a {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.01em;
}

button.cds-btn-small-square {
    height: 26px;
    min-width: 26px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.01em;
    padding: 4px;
    border-radius: 4px;
    background-color: transparent;
}

button.cds-btn-small-square:hover {
    background-color: var(--cds-color-white);
    box-shadow: 0 0 4px #00000020;
}

button.cds-btn-small-square .cds-icon {
    fill: var(--cds-color-neutral-strong);
    width: 16px;
    height: 16px;
}

button.cds-btn-small-square:hover .cds-icon {
    fill: var(--cds-color-primary);
}

button.cds-btn-small .cds-icon {
    width: 16px;
    height: 16px;
}

button.cds-btn-icon-large {
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 27px;
    background-size: 32px;
}

button.cds-btn-icon-large .cds-icon {
    width: 32px;
    height: 32px;
}

button.cds-btn-icon-small {
    width: 26px !important;
    height: 26px !important;
    background-size: 20px;
}

button.cds-btn-icon-small .cds-icon {
    width: 16px;
    height: 16px;
}

ul.cds-btn-sub-menu .cds-btn {
    gap: 2px;
    padding-right: 4px;
}

/* Effects */

button.cds-btn-left-icon {
    padding-left: 6px;
    flex-direction: row;
}

button.cds-btn-right-icon {
    flex-direction: row-reverse;
}

button.cds-btn-rounded {
    border-radius: 5px;
}

button.cds-btn-rounded-mid {
    border-radius: 8px;
}

button.cds-btn-rounded-strong {
    border-radius: 32px;
}

button.cds-btn-nofocus {
    outline: none !important;
}

/* SPECIAL BUTTONS */

/* Default - login-white */

button.cds-btn-login-white {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.9px;
    color: var(--cds-text-primary);
    background-color: var(--cds-btn-white);
}

button.cds-btn-login-white > a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.9px;
    color: var(--cds-text-primary);
}

button.cds-btn-login-white:hover {
    background-color: var(--cds-color-offblue);
}

button.cds-btn-login-white:active {
    background-color: var(--cds-btn-white);
}

button.cds-btn-login-white:focus {
    outline: var(--cds-btn-primary-focus) solid 2px;
}

button.cds-btn-login-white:disabled {
    outline: none;
    background-color: var(--cds-btn-disabled);
}

/* Table Actions Button */
button.cds-btn-table-actions {
    color: var(--cds-btn-primary);
    background-color: transparent;
    border: 1px solid var(--cds-btn-primary);
    border-radius: 3px;
}

button.cds-btn-table-actions > a {
    color: var(--cds-btn-primary);
}

button.cds-btn-table-actions .cds-icon {
    fill: var(--cds-color-primary);
}

button.cds-btn-table-actions:hover {
    color: var(--cds-text-strong);
    background-color: var(--cds-btn-primary-hover);
    border: 1px solid var(--cds-btn-primary-hover);
}

button.cds-btn-table-actions:hover > a {
    color: var(--cds-text-strong);
}

button.cds-btn-table-actions:hover .cds-icon {
    fill: var(--cds-color-white);
}

/* Save button */
button.cds-btn-save {
    background-color: transparent;
    border: 1px solid var(--cds-btn-success);
    border-radius: 5px 0 0 5px;
    border-right: none;
    padding: 4px 12px !important;
}
button.cds-btn-save:hover {
    background-color: var(--cds-btn-success);
}
button.cds-btn-save a {
    color: var(--cds-color-success) !important;
}
button.cds-btn-save:hover a {
    color: var(--cds-color-white) !important;
}

button.cds-btn-save-selector {
    background-color: var(--cds-btn-success);
    border: 1px solid var(--cds-btn-success);
    border-radius: 0 5px 5px 0;
    padding: 4px !important;
}

button.cds-btn-save-selector:active, button.cds-btn-save-selector:focus {
    border: 1px solid var(--cds-btn-success);
    background-color: var(--cds-btn-success);
}

button.cds-btn-save-selector:hover {
    background-color: var(--cds-btn-success-hover) !important;
}

button.cds-btn-save-selector .cds-icon {
    fill: var(--cds-color-white) !important;
}



/* Table detail button */
.cds-btn-table-detail {
    background-color: transparent !important;
    padding: 0 !important;
    transition: transform 0.3s ease-in-out;
}

.cds-btn-table-detail:focus {
    outline: none !important;
}

.cds-btn-table-detail .cds-icon {
    fill: var(--cds-color-grey);
    width: 14px;
    height: 14px;
}

/* Main Menu Button */
button.cds-main-menu-btn {
    width: 46px;
    min-height: 46px;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
}

button.cds-main-menu-btn:hover {
    background-color: transparent;
}

button.cds-main-menu-btn #current-app {
    display: block;
}

button.cds-main-menu-btn #select-app {
    display: none;
}

button.cds-main-menu-btn:hover #current-app {
    display: none;
}

button.cds-main-menu-btn:hover #select-app {
    display: block;
}

button.cds-main-menu-btn .cds-icon {
    width: 26px;
    height: 26px;
    fill: var(--cds-color-white);
}

button.cds-main-menu-button {
    width: 46px;
    min-height: 46px;
    border-radius: 0;
    background-image: url("../img/icons/main-menu-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    padding: 0;
    transition: 0.2s;
}

button.cds-main-menu-button:hover {
    width: 46px;
    height: 46px;
    background-image: url("../img/icons/main-menu-icon-hover.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

button.cds-main-menu-button:focus {
    background-image: url("../img/icons/main-menu-icon-hover.svg");
    outline: none;
}

/* Messages Button */

button.cds-messages-button {
    display: flex;
    place-items: center;
    height: 28px;
    width: 28px;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

button.cds-messages-button:hover {
    background-color: transparent;
}

button.cds-messages-button .cds-icon {
    height: 15px;
    width: 15px;
    background-image: url("../img/icons/messages-bell.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 1px;
    transition: all 0.3s;
}

@keyframes messageBell {
    0% {
        transform: rotate(0deg);
    }

    35% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-20deg);
    }

    75% {
        transform: rotate(15deg);
    }

    85% {
        transform: rotate(-10deg);
    }

    90% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

button.cds-messages-button:hover .cds-icon {
    animation-name: messageBell;
    animation-duration: 0.5s;
    background-image: url("../img/icons/messages-bell.svg");
}

button.cds-messages-button:focus {
    outline: none;
}

/* Widget search button */
button.cds-btn-widget-search {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.133);
color: rgba(255, 255, 255, 0.867);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 4px 12px;
gap: 8px;
white-space: nowrap;
}

button.cds-btn-widget-search a {
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    opacity: 0.8;
}

button.cds-btn-widget-search .cds-icon {
    width: 12px;
    height: 12px;
    opacity: 0.8;
}

/* User Settings Button */
button.cds-btn-widget-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    background-color: transparent;
    white-space: nowrap;
}

button.cds-btn-widget-user:hover {
    background-color: transparent;
}

button.cds-btn-widget-user:focus {
    outline: none;
}

button.cds-btn-widget-user a {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--cds-text-offwhite);
    padding: 1px 4px 0 8px;
}

button.cds-btn-widget-user:hover a {
    color: var(--cds-text-white);
}

button.cds-btn-widget-user:focus a {
    color: var(--cds-text-white);
}

button.cds-btn-widget-user::after {
    content: "";
    width: 12px;
    height: 6px;
    background-color: var(--cds-color-offwhite);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    rotate: 0deg;
    margin: 4px 8px 0 4px;
    transition: rotate 0.1s ease-in-out;
}

button.cds-btn-widget-user:hover::after {
    background-color: var(--cds-color-white);
}

button.cds-btn-widget-user:focus::after {
    rotate: -90deg;
    background-color: var(--cds-color-white);
}

/* Company Select Button */
button.cds-btn-company-select-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    background-color: transparent;
    white-space: nowrap;
}

button.cds-btn-company-select-button:hover {
    background-color: transparent;
}

button.cds-btn-company-select-button:focus {
    outline: none;
}

button.cds-btn-company-select-button a {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--cds-text-offwhite);
    padding: 1px 4px 0 8px;
}

button.cds-btn-company-select-button:hover a {
    color: var(--cds-text-white);
}

button.cds-btn-company-select-button:focus a {
    color: var(--cds-text-white);
}

button.cds-btn-company-select-button::after {
    content: "";
    width: 12px;
    height: 6px;
    background-color: var(--cds-color-offwhite);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    rotate: 0deg;
    margin: 4px 8px 0 4px;
    transition: rotate 0.1s ease-in-out;
}

button.cds-btn-company-select-button:hover::after {
    background-color: var(--cds-color-white);
}

button.cds-btn-company-select-button:focus::after {
    rotate: -90deg;
    background-color: var(--cds-color-white);
}

button.cds-btn-sort-column {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 4px;
    background-color: transparent;
}

button.cds-btn-sort-column .cds-icon {
    display: block;
    width: 12px;
    height: 12px;
    fill: var(--cds-color-grey);
}

button.cds-btn-sort-column:hover {
    background-color: transparent;
}

button.cds-btn-sort-column:hover .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-offblack);
}

/* Pagination */
.cds-pagination-container {
    display: flex;
    flex-direction: row;
}

.cds-pagination-page-counter {
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    justify-content: center;
}

.cds-pagination-page-counter span {
    font-size: 13px;
    line-height: 30px;
    font-weight: 500;
    color: var(--cds-color-neutral-strong);
    padding: 0 2px;
}

input.cds-pagination-page-input {
    font-family: var(--cds-font-family) !important;
    width: 1ch;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    font-weight: 500;
    color: var(--cds-color-neutral-strong);
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: text;
    outline: none;
    padding: 0 2px;
    box-sizing: content-box;
}

input.cds-pagination-page-input:focus-within {
    width: 40px;
    border-radius: 3px;
    text-align: center;
    background-color: var(--cds-color-primary-wash);
    padding: 0 8px;
}

.cds-pagination-page-counter a {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    padding: 1px 0 0 4px;
    color: var(--cds-color-neutral-strong);
    white-space: nowrap;
}

.cds-btn-pagination-group {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 2px;
}

/* Calendar pagination */

button.cds-btn-calendar-pagination {
    font-size: 12px;
    font-weight: 600;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    background-color: var(--cds-color-white);
    color: var(--cds-text-offblack);
}

button.cds-btn-calendar-pagination:hover {
    background-color: var(--cds-color-neutral);
    border: 1px solid var(--cds-color-neutral);
}

button.cds-btn-calendar-pagination .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-neutral-strong);
}

button.cds-btn-calendar-pagination:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-calendar-pagination:active .cds-icon {
    width: 18px;
    height: 18px;
}

/* View buttons */

button.cds-btn-view {
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0;
    margin: auto;
    background-color: transparent;
    color: var(--cds-text-offblack);
}

button.cds-btn-view:hover {
    background-color: var(--cds-body-color);
}

button.cds-btn-view:focus {
    outline: none;
}

button.cds-btn-view .cds-icon {
    width: 18px;
    height: 18px;
    fill: var(--cds-color-disabled);
}

button.cds-btn-view:hover .cds-icon {
    fill: var(--cds-color-neutral-strong);
}

button.cds-btn-view.active {
    background-color: var(--cds-color-primary-wash);
}

button.cds-btn-view.active .cds-icon {
    fill: var(--cds-color-primary);
}

/* Square buttons */
button.cds-btn-square {
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 4px;
    padding: 0;
    background-color: var(--cds-color-offwhite);
    color: var(--cds-text-offblack);
    cursor: pointer;
}

button.cds-btn-square:hover {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-square:focus {
    outline: none;
}

button.cds-btn-square .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-neutral-strong);
}

button.cds-btn-square:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-square.active .cds-icon {
    fill: var(--cds-color-primary);
}

/* Breadcrumb button */
button.cds-btn-breadcrumb {
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    padding: 0;
    background-color: transparent;
    color: var(--cds-text-offblack);
    cursor: pointer;
}

button.cds-btn-breadcrumb:hover {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-breadcrumb:focus {
    outline: none;
}

button.cds-btn-breadcrumb .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-neutral-strong);
}

button.cds-btn-breadcrumb:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-breadcrumb.active .cds-icon {
    fill: var(--cds-color-primary);
}

/* Pagination buttons */

button.cds-btn-pagination {
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0;
    margin: auto;
    background-color: var(--cds-body-color);
    color: var(--cds-text-offblack);
}

button.cds-btn-pagination:hover {
    background-color: var(--cds-color-primary-medium);
}

button.cds-btn-pagination:focus {
    outline: none;
}

button.cds-btn-pagination .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-neutral-strong);
}

button.cds-btn-pagination:hover .cds-icon {
    fill: var(--cds-color-white);
}

button.cds-btn-pagination.active .cds-icon {
    fill: var(--cds-color-primary);
}

button.cds-btn-pagination.total-items {
    gap: 4px;
    padding: 0 4px;
    /* background-color: transparent; */
}

button.cds-btn-pagination:hover.total-items {
    /* background-color: var(--cds-color-primary-medium); */
    color: var(--cds-color-white);
}

button.cds-btn-pagination.total-items .cds-icon {
    width: 16px;
    height: 16px;
}

/* Topbar AI */
.cds-btn-topbar-ai {
    width: 26px !important;
    height: 26px !important;
    background-color: transparent !important;
    padding: 4px !important;
}

.cds-btn-topbar-ai:hover {
    background-color: var(--cds-color-white) !important;
}

.cds-btn-topbar-ai:hover .cds-icon {
    fill: var(--cds-color-primary) !important;
}

.cds-btn-topbar-ai .cds-icon {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Accordion */

button.cds-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--cds-table-row-odd);
    color: var(--cds-text-offblack);
    cursor: pointer;
    padding: 8px 16px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--cds-table-row-hover);
    transition: 0.4s;
}

button.cds-accordion:hover {
    color: var(--cds-text-black);
}

button.cds-accordion:hover .cds-icon {
    fill: var(--cds-color-black);
}

button.cds-accordion .cds-icon {
    width: 12px;
    height: 12px;
    fill: var(--cds-color-offblack);
    transform: rotate(0deg);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease-in-out;
}

button.cds-accordion .cds-icon.rotate {
    transform: rotate(90deg);
}

/* Kanban buttons */
button.cds-btn-kanban-settings {
    width: 24px !important;
    height: 24px !important;
    background-color: var(--cds-color-primary-medium) !important;
    padding: 0 !important;
    border-radius: 3px;
    box-shadow: var(--cds-shadow-weak);
}

button.cds-btn-kanban-settings:hover {
    background-color: var(--cds-color-primary) !important;
}

button.cds-btn-kanban-settings:focus {
    outline: none;
}

button.cds-btn-kanban-settings .cds-icon {
    width: 14px;
    height: 14px;
    fill: var(--cds-color-neutral-strong);
    fill: var(--cds-color-offwhite);
}

button.cds-btn-kanban-settings:hover .cds-icon {
    fill: var(--cds-color-offblack);
    fill: var(--cds-color-white);
}

/* Modal exportar model */
button.cds-btn-exportar-model {
    padding: 0 8px;
    background-color: transparent;
    border-left: 1px solid var(--cds-color-disabled);
}

/* Botão do Page Header */
button.cds-btn-page-header {
    gap: 4px;
    border-color: var(--cds-color-alert-light);
    background-color: var(--cds-color-alert-wash);
}

button.cds-btn-page-header:hover {
    border-color: var(--cds-color-alert-strong);
    background-color: var(--cds-color-alert-weak);
}

button.cds-btn-page-header a {
    font-size: 12px;
    font-weight: 500;
    color: var(--cds-color-alert-strong);
}

button.cds-btn-page-header:hover a {
    color: var(--cds-color-alert-dark);
}

button.cds-btn-page-header .cds-icon {
    width: 10px;
    height: 10px;
    fill: var(--cds-color-alert-strong) !important;
}

button.cds-btn-page-header:hover .cds-icon {
    fill: var(--cds-color-alert-dark) !important;
}

button.cds-btn-page-header .cds-icon.alert {
    width: 18px;
    height: 18px;
    padding-bottom: 2px;
    fill: var(--cds-color-alert) !important;
}

button.cds-btn-page-header.selected {
    border-color: var(--cds-color-primary-medium);
    background-color: var(--cds-color-peimary-wash);
}

button.cds-btn-page-header.selected:hover {
    border-color: var(--cds-color-primary);
    background-color: var(--cds-color-primary-wash);
}

button.cds-btn-page-header.selected a {
    color: var(--cds-color-primary-medium);
}

button.cds-btn-page-header.selected:hover a {
    color: var(--cds-color-primary);
}

button.cds-btn-page-header.selected .cds-icon {
    fill: var(--cds-color-primary-medium) !important;
}

button.cds-btn-page-header.selected:hover .cds-icon {
    fill: var(--cds-color-primary) !important;
}

/* ===================== Split Dropdown Button ===================== */
.cds-split-btn {
    position: relative;
    display: inline-flex;
    width: fit-content;
}

.cds-split-btn .cds-split-btn-main {
    border-radius: 5px 0 0 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.cds-split-btn .cds-split-btn-toggle {
    border-radius: 0 5px 5px 0;
    padding: 6px 10px;
}

.cds-split-btn .cds-split-btn-toggle .cds-icon {
    width: 12px;
    height: 12px;
    fill: var(--cds-color-white);
    transform: rotate(90deg);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease-in-out;
}

.cds-split-btn .cds-split-btn-toggle[aria-expanded="true"] .cds-icon {
    transform: rotate(-90deg);
}

.cds-split-btn.disabled {
    pointer-events: none;
}

.cds-split-btn.disabled .cds-split-btn-main {
    background-color: var(--cds-color-disabled);
    color: var(--cds-color-white);
}

.cds-split-btn.disabled .cds-split-btn-toggle {
    background-color: var(--cds-color-disabled);
    color: var(--cds-color-white);
}

/* Dropdown (renderizado via portal em document.body para não ser cortado por overflow:hidden) */
.cds-split-btn-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    min-width: 180px;
    width: max-content;
    background-color: var(--cds-color-white);
    border-radius: 4px;
    border: 1px solid var(--cds-color-offwhite);
    box-shadow: var(--cds-widget-outer-shadow);
    padding: 4px 0;
    overflow: hidden;
}

.cds-split-btn-dropdown.open {
    display: flex;
}

.cds-split-btn-option {
    font-family: var(--cds-font-family);
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: left;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: var(--cds-text-offblack);
    white-space: nowrap;
    cursor: pointer;
}

.cds-split-btn-option:hover,
.cds-split-btn-option:focus {
    outline: none;
    background-color: var(--cds-color-primary-wash);
    color: var(--cds-color-primary);
}

button.cds-pill-btn {
    display: flex;
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    gap: 8px;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

button.cds-pill-btn:hover, button.cds-pill-btn:focus, button.cds-pill-btn:active {
    background-color: transparent;
}

button.cds-pill-btn .cds-icon {
    max-width: 12px;
    max-height: 12px;
}

/* Chat buttons */
button.cds-btn-chat-header,
button.cds-btn-chat-footer {
    display: flex;
    width: 32px;
    height: 32px;
    border: none;
    background-color: transparent;
}

button.cds-btn-chat-header:hover,
button.cds-btn-chat-header:focus,
button.cds-btn-chat-footer:hover,
button.cds-btn-chat-footer:focus
 {
    background-color: transparent;
    outline: none;
}

button.cds-btn-chat-header .cds-icon {
    min-width: 18px;
    min-height: 18px;
    fill: var(--cds-color-white);
}

button.cds-btn-chat-footer .cds-icon {
    min-width: 18px;
    min-height: 18px;
    fill: var(--cds-color-offblack);
}

button.cds-btn-chat-header:hover .cds-icon,
button.cds-btn-chat-header:focus .cds-icon
{
    min-width: 20px;
    min-height: 20px;
}

button.cds-btn-chat-footer:hover .cds-icon,
button.cds-btn-chat-footer:focus .cds-icon 
{
    min-width: 20px;
    min-height: 20px;
    fill: var(--cds-color-primary-medium);
}