input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    transform: scale(1.3);
}

textarea {
    padding: 0.2rem;
    flex: 1;
    border: 0.25pt solid var(--form-field-border) !important;
}

.v-application input {
    border: none;
}

.v-application .v-input input {
    border: none !important;
}

.v-application .v-input--selection-controls {
    margin-top: 0;
    padding-top: 0;
}

input:invalid+.invalid-feedback {
    display: block;
}

input:invalid {
    outline: 2px solid red !important;
}

.btn.btn-secondary {
    background-color: var(--bs-secondary-rgb);
}

.btn.btn-secondary:hover {
    background-color: var(--anchor-color);
}

#viewSelect,
#componentList,
#watchListSelect,
.componentDiv>div>div>select,
td>select,
select {
    text-transform: none;
    flex: 1;
    margin: 0.2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    background: url(/images/drop_down.png) no-repeat transparent;
    background-position: right;
    background-size: 2rem;
    padding: 0.2rem;
    background-color: var(--form-field-bg) !important;
    border: 0.25pt solid var(--form-field-border);
    color: var(--form-text) !important;
    border-radius: var(--border-radius);
    padding-right: 2rem;
}

#viewSelect {
    width: 100%;
}

select {
    border-style: solid !important;
}

input[type="text"].directInput {
    padding: 1px 5px 1px 5px;
    min-width: 50px;
    margin: 1px;
}

#newWatchListName,
textarea,
.form-control,
body input:not([type="button"], [type="submit"], [type="reset"], .select2-search__field, .v-application, .v-input input) {
    padding: 0.2rem;
    flex: 1;
    background-color: var(--form-field-bg);
    border: 0.25pt solid var(--form-field-border);
    color: var(--form-text) !important;
    border-radius: var(--border-radius);
    margin: 0.2rem;
}

main button:focus:not([type="link"]),
.navHeader a:focus,
.bodySection input:focus,
main select:focus,
main textarea:focus,
body .btn:focus,
body button:focus:focus:not([type="link"]),
.form-control:focus,
main .form-control:focus {
    border: solid 1px var(--form-field-border-focus);
}

input[type="color"] {
    height: 22px;
    padding: 0 !important;
    min-width: 22px;
}

#newWatchListName.edited,
textarea.edited,
.form-control.edited,
body input.edited {
    background-color: var(--form-field-bg-edited) !important;
}

.formField {
    display: grid;
}

.formFieldFlex {
    display: flex;
}

.enhancedImageChartGraph input[type="text"] {
    width: auto;
    border: 0.25pt solid;
}

body .btn:hover:not([disabled]),
body input[type="button"]:hover:not([disabled]),
body input[type="submit"]:hover:not([disabled]),
body input[type="reset"]:hover:not([disabled]),
body button:hover:not([disabled]) {
    border-color: var(--form-field-border-focus);
    filter: brightness(150%);
}

.v-application button.grey--text.text--darken-2,
body .btn,
body input[type="button"]:not(.select2-container),
body input[type="submit"],
body input[type="reset"],
body button:not(.select2-selection__clear, .tab button, .v-expansion-panel-header, .v-btn, [type="link"]) {
    background-color: var(--button-bg1);
    color: var(--button-text);
    border-radius: var(--border-radius);
    transition: 0.2s;
    padding: 0.3rem;
    font-weight: 400;
    cursor: pointer;
    margin: 0.2rem 0.1rem 0.2rem 0.1rem !important;
    white-space: nowrap;
    border: 1px solid transparent;
}

button[type="link"] {
    background-color: unset;
    border: unset;
}

.v-expansion-panel-header {
    background-color: var(--button-bg1);
}

.v-application button.grey--text.text--darken-2.deleteButton,
.deleteButton,
body .btn.deleteButton,
body input[type="button"]:not(.select2-container).deleteButton,
body input[type="submit"].deleteButton,
body input[type="reset"].deleteButton,
body button:not(.select2-selection__clear).deleteButton {
    background-color: red !important;
}

.unreliable {
    background-color: var(--form-field-bg-unreliable) !important;
    pointer-events: none;
    cursor: not-allowed;
}

.disabled,
#bodyContent .btn[disabled],
#bodyContent input[disabled],
#bodyContent button[disabled] {
    cursor: not-allowed;
    color: var(--input-disabled) !important;
}

button>img {
    height: 0.8rem;
}