button,
a.button {
    display: inline-block;
    height: 38px;
    border-radius: 8px;
    background-color: var(--button-primay);
    border: none;
    padding: 0px 12px;

    color: var(--gray-25, #FCFCFD);
    text-align: center;
    /* Text sm/Medium */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px;
    vertical-align: middle;
    /* 142.857% */
}

button:hover,
a.button:hover {
    cursor: pointer;
    background-color: var(--button-primay-hover);
    color: white;
}

button:active,
a.button:active {
    background-color: var(--button-primay-pressed);
}

button:disabled {
    cursor: no-drop;
    background: var(--checkbox-disabled-background, #D0D5DD);
    color: var(--gray-25, #FCFCFD);
}

button.small,
a.button.small {
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;

    padding: 0px 8px;
}

button.extra-small,
a.button.extra-small {
    height: 22px;
    line-height: 22px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;

    padding: 0px 6px;
}

button.large,
a.button.large {
    font-size: 16px;
    font-weight: 600;
    padding: 0px 22px;
}

button.secondary,
a.button.secondary {
    background-color: var(--button-secondary-background);
    color: var(--button-secondary-text);
}

button.secondary:hover,
a.button.secondary:hover {
    background-color: var(--button-secondary-hover);
}

button.secondary:active,
a.button.secondary:active {
    background-color: var(--button-secondary-pressed);
}



button.tertiary,
a.button.tertiary {
    background-color: var(--button-tertiary-background);
    color: var(--button-tertiary-text);
    border: 1px solid var(--button-tertiary-border);
    font-weight: 400;
}

button.tertiary:hover,
a.button.tertiary:hover {
    color: var(--button-tertiary-text-hover);
    background-color: var(--button-tertiary-background-hover);
    border: 1px solid var(--button-tertiary-border-hover);
}

button.tertiary:active,
a.button.tertiary:active {
    background-color: var(--button-tertiary-background-hover);
    color: var(--button-tertiary-text-pressed);
    border: 1px solid var(--button-tertiary-border-pressed);
    outline: 2px solid var(--button-tertiary-border-pressed);
}

button.tertiary.active {
    background-color: var(--button-tertiary-background-hover);
    color: var(--button-tertiary-text-pressed);
    border: 1px solid var(--button-tertiary-border-pressed);
    outline: 2px solid var(--button-tertiary-border-pressed);
}

button.select {
    background-color: white;
    color: #667085;
    border: 1px solid #D0D5DD;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    /* 150% */
}


button.pagination-control {
    padding: 8px 8px;
    font-size: 14px;
    line-height: 14px;
    height: 32px;
    font-style: normal;
    font-weight: 500;
}

button.pagination-control.active {
    background-color: #CADFFF;
}

button.quick-filter {
    background-color: white;
    border-radius: var(--Spacing-radius-lg, 16px);
    border: 1px solid var(--Gray-300, #D0D5DD);

    color: #667085;
    font-size: 12px;
    line-height: 15px;
    padding: 0px;
    height: 30px;
    padding: 6px 8px;
}

button.quick-filter:hover {
    color: #475467;
    border-color: #98A2B3;
}

button.quick-filter:active,
button.quick-filter[data-state="on"] {
    color: #0BA5EC;
    border-color: #B9E6FE;
}

button.destructive,
a.button.destructive {
    background-color: var(--button-destructive-background);
    color: var(--button-destructive-text);
    border: 1px solid var(--button-destructive-border);
    font-weight: 400;
}

button.destructive:hover,
a.button.destructive:hover {
    color: var(--button-destructive-text-hover);
    background-color: var(--button-destructive-background-hover);
}

button.destructive:active,
a.button.destructive:active {
    background-color: var(--button-destructive-background-pressed);
    color: var(--button-destructive-text-pressed);
}



button.link,
a.button.link {
    background: none;
    color: var(--button-link-text);
    font-weight: 400;
}

button.link:hover,
a.button.link:hover {
    border: none;
    color: var(--button-link-text-hover);
}

button.link:active,
a.button.link:active {
    border: none;
    color: var(--button-link-text-pressed);
}


/* Checkboxes */
input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;

    width: 16px;
    height: 16px;
    border-radius: 4px;
    vertical-align: text-bottom;
    border: 1px solid var(--checkbox-empty-border);
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.1546 5.1972C12.0926 5.13471 12.0189 5.08512 11.9377 5.05127C11.8564 5.01743 11.7693 5 11.6813 5C11.5933 5 11.5061 5.01743 11.4249 5.05127C11.3437 5.08512 11.2699 5.13471 11.2079 5.1972L6.24128 10.1705L4.15462 8.0772C4.09027 8.01504 4.01431 7.96616 3.93107 7.93336C3.84783 7.90056 3.75895 7.88447 3.6695 7.88602C3.58004 7.88757 3.49177 7.90672 3.40972 7.94238C3.32767 7.97804 3.25344 8.02952 3.19128 8.09387C3.12912 8.15821 3.08025 8.23417 3.04744 8.31741C3.01464 8.40065 2.99855 8.48953 3.0001 8.57898C3.00165 8.66844 3.02080 8.75671 3.05646 8.83876C3.09213 8.92082 3.14360 8.99504 3.20795 9.05720L5.76795 11.61720C5.82992 11.67970 5.90366 11.72930 5.98490 11.76310C6.06614 11.79700 6.15327 11.81440 6.24128 11.81440C6.32929 11.81440 6.41643 11.79700 6.49767 11.76310C6.57891 11.72930 6.65264 11.67970 6.71462 11.61720L12.1546 6.17720C12.2223 6.11477 12.2763 6.03900 12.3132 5.95467C12.3502 5.87034 12.3692 5.77927 12.3692 5.68720C12.3692 5.59513 12.3502 5.50406 12.3132 5.41973C12.2763 5.33539 12.2223 5.25963 12.1546 5.19720Z' fill='%23FCFCFD'/%3E%3C/svg%3E") no-repeat;
    no-repeat;
    width: 16px;
    height: 16px;
    border: none;
    background-color: var(--checkbox-checked-background);
}

input[type="checkbox"].large:checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.7099 7.20986C18.617 7.11613 18.5064 7.04174 18.3845 6.99097C18.2627 6.9402 18.132 6.91406 17.9999 6.91406C17.8679 6.91406 17.7372 6.9402 17.6154 6.99097C17.4935 7.04174 17.3829 7.11613 17.29 7.20986L9.83995 14.6699L6.70995 11.5299C6.61343 11.4366 6.49949 11.3633 6.37463 11.3141C6.24978 11.2649 6.11645 11.2408 5.98227 11.2431C5.84809 11.2454 5.71568 11.2741 5.5926 11.3276C5.46953 11.3811 5.35819 11.4583 5.26495 11.5549C5.17171 11.6514 5.0984 11.7653 5.04919 11.8902C4.99999 12.015 4.97586 12.1484 4.97818 12.2825C4.9805 12.4167 5.00923 12.5491 5.06272 12.6722C5.11622 12.7953 5.19343 12.9066 5.28995 12.9999L9.12995 16.8399C9.22291 16.9336 9.33351 17.008 9.45537 17.0588C9.57723 17.1095 9.70794 17.1357 9.83995 17.1357C9.97196 17.1357 10.1027 17.1095 10.2245 17.0588C10.3464 17.008 10.457 16.9336 10.55 16.8399L18.7099 8.67986C18.8115 8.58622 18.8925 8.47257 18.9479 8.34607C19.0033 8.21957 19.0319 8.08296 19.0319 7.94486C19.0319 7.80676 19.0033 7.67015 18.9479 7.54365C18.8925 7.41715 18.8115 7.3035 18.7099 7.20986Z' fill='%23FCFCFD'/%3E%3C/svg%3E") no-repeat;
    background-color: var(--checkbox-checked-background);
    border: none;
}


input[type="checkbox"].large {
    width: 24px;
    height: 24px;
}

label.read-only {
    pointer-events: none;
}

input[type="checkbox"]:disabled,
input[type="checkbox"].large:disabled,
input[type="checkbox"].read-only,
input[type="checkbox"].large.read-only {
    background-color: var(--checkbox-disabled-background);
    cursor: not-allowed;
    pointer-events: none;
}

input[type="checkbox"].error {
    border-color: var(--checkbox-error-border);
}

.toggle-input {
    display: none;
}

/* Style for the toggle switch's label */
.toggle-label {
    display: inline-block;
    width: 40px;
    height: 18px;
    background-color: var(--toggle-background-off);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

/* Style for the slider (the moving part of the switch) */
.toggle-label::after {
    content: '';
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: 0.3s;
    box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.25);
}

/* Style for the checked state of the switch */
.toggle-input:checked+.toggle-label {
    background-color: var(--toggle-background-on);
}

.toggle-input:checked+.toggle-label::after {
    transform: translateX(22px);
}

.click-text {
    cursor: pointer;
    color: var(--Text---Link-Color, #3B82F6);
}

.click-text.disabled {
    cursor: no-drop;
    color: var(--checkbox-disabled-background, #D0D5DD);
}