:root {
    /*
     * 'light-dark': Light and Dark theme are selectable
     * 'light-only': Only Light theme is used, switcher is disabled (default)
     * 'dark-only':  Only Dark theme is used, switcher is disabled
    */
    --theme-availability: 'light-dark';
}

.light-theme {
    --input-background: var(--bs-light);
    --input-outline: var(--bs-dark);
    --background-color: var(--bs-light);
    --text-color: var(--bs-dark);
    --menu-text-color: var(--bs-dark);
    --menu-text-color-active: var(--bs-dark);
}

.dark-theme {
    --input-background: var(--bs-secondary);
    --input-outline: var(--bs-light);
    --background-color: var(--bs-dark);
    --text-color: var(--bs-light);
    --menu-text-color: var(--bs-light);
    --menu-text-color-active: var(--bs-light);
}

.logo {
    position: relative;
    left: 0;
    min-width: 200px;
    max-width: 250px;
    height: auto;
    object-fit: scale-down;
}

.dc-change-icon-label {
    padding-top: 0.5rem;
    margin: 0;
    white-space: wrap;
    text-align: center;
}

.dc-select h1 {
    text-align: center;
}

.card-group {
    max-width: 1273px;
}

.tip-input-method {
    background-color: var(--input-background);
    color: var(--text-color);
    border-top: 1px solid var(--input-outline) !important;
    border-bottom: 1px solid var(--input-outline) !important;
}

#tipAmountInput {
    background-color: var(--input-background);
    color: var(--text-color);
    border: 1px solid var(--input-outline) !important;
    border-right: none !important;
}