.form-control:focus, .form-select:focus {
    border-bottom: 1px solid #0f7fff;
    background-color: #fff;
    box-shadow: none;
}

.form-control[readonly]:focus {
    background-color: #e9ecef;
}

div.form-control {
    padding: 0 0 0 1px;
    display: grid;
    grid-template-columns: 1fr auto;
}

    div.form-control:focus-within {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    div.form-control > input {
        padding: .375rem 0 .375rem .75rem;
        border: none;
        outline: none;
    }

    div.form-control > button {
        border-color: transparent;
        background-color: transparent;
        outline: none;
    }

        div.form-control > button:hover {
            background-color: rgba(0,0,0,0.1);
        }

.form-floating > label {
    margin-left: 10px;
}

.card > .list-group {
    max-height: 300px;
    overflow-y: auto;
}

.modal.fade {
    background-color: rgba(0,0,0,0.5);
}

/* Compass standard styles */
:root {
    --primary-color: #156af4;
    --secondary-color: #ebecf0;
    --danger-color: #da1e28;
    --success-color: #52c41a;
}

/* Button styles */
.btn {
    height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
}

    .btn.disabled, .btn:disabled, fieldset:disabled .btn {
        opacity: 30%;
    }

    .btn.btn-primary, .btn.btn-outline-primary {
        color: #fff;
        border-color: var(--primary-color);
    }

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

    .btn.btn-outline-primary {
        color: var(--primary-color);
    }

    .btn.btn-secondary, .btn.btn-outline-secondary {
        color: #000;
        border-color: var(--secondary-color);
    }

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

    .btn.btn-outline-secondary {
        color: var(--secondary-color);
    }

    .btn.btn-success, .btn.btn-outline-success {
        color: #fff;
        border-color: var(--success-color);
    }

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

    .btn.btn-outline-success {
        color: var(--success-color);
    }

    .btn.btn-danger, .btn.btn-outline-danger {
        color: #fff;
        border-color: var(--danger-color);
    }

    .btn.btn-danger {
        background-color: var(--danger-color);
    }

    .btn.btn-outline-danger {
        color: var(--danger-color);
    }
