/* ====================== flexx.ui.widgets._button ======================*/

/* Autogenerated code from Flexx. Code Subject to the BSD-2-clause license. */





    .flx-BaseButton {
        white-space: nowrap;
        padding: 0.2em 0.4em;
        border-radius: 3px;
        color: #333;
    }
    .flx-BaseButton, .flx-BaseButton > input {
        margin: 2px; /* room for outline */
    }
    .flx-BaseButton:focus, .flx-BaseButton > input:focus  {
        outline: none;
        box-shadow: 0px 0px 3px 1px rgba(0, 100, 200, 0.7);
    }

    .flx-Button, .flx-ToggleButton{
        background: #e8e8e8;
        border: 1px solid #ccc;
        transition: background 0.3s;
    }
    .flx-Button:hover, .flx-ToggleButton:hover {
        background: #e8eaff;
    }

    .flx-ToggleButton {
        text-align: left;
    }
    .flx-ToggleButton.flx-checked {
        background: #e8eaff;
    }
    .flx-ToggleButton::before {
        content: '\2610\00a0 ';
    }
    .flx-ToggleButton.flx-checked::before {
        content: '\2611\00a0 ';
    }

    .flx-RadioButton > input, .flx-CheckBox > input{
        margin-left: 0.3em;
        margin-right: 0.3em;
    }

    .flx-RadioButton > input, .flx-CheckBox > input {
        color: #333;
    }
    .flx-RadioButton:hover > input, .flx-CheckBox:hover > input {
        color: #036;
    }