@import 'https://cdn.jsdelivr.net/npm/bootswatch@3.4.1/darkly/bootstrap.css' (prefers-color-scheme: dark);
@import 'https://cdn.jsdelivr.net/npm/bootswatch@3.4.1/flatly/bootstrap.css' (prefers-color-scheme: light);


/* if prefers color schme dark make background of form fields grey */
@media (prefers-color-scheme: dark) {

    .btn.btn-default {
        color: #ffffff;
        background-color: #888888; /* a bit lighter*/
        border-color: #888888;
    }

    .form-control {
        background-color: #333;
        color: #fff;
        border: 1px solid #555;
    }

    /* remove user agent styling from select fields and add caret*/
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right .7em top 50%, 0 0;
        background-size: .65em auto, 100%;

    }

    .form-control:disabled, .form-control[readonly] {
        background-color: #666666;
        color: #aaaaaa;
    }
}

.btn {
    padding: 5px 10px;
}