/*####################################################
##													##
## PARRILLACERO5									##
## 													##
## BUTTONS.CSS										##
## 													##
## 													##
## Estilo CSS										##
## Estilos de botones           					##
##													##
##													##
####################################################*/

/*** BOTONES ESTÁNDAR ***/

.button {
    padding: 15px 25px;
    background: #111;
    border: 1px solid #111;
    color: #fff;
    display: inline-block;
    text-align: center;
    line-height: 1em;
    cursor: pointer;
}

    .button:hover,
    .button-hover {
        background: #fff;
        color: #111;
        border: 1px solid #111;
        text-decoration: none;
    }

    .button:active {
        background: #222;
        box-shadow: none;
    }

    .button:disabled,
    .button-disabled {
        background: #ccc !important;
        border: 1px solid #aaa;
        box-shadow: none;
        cursor: default;
    }

        .button-disabled:hover {
            background: #ccc;
            border: 1px solid #aaa;
        }

    .button-big {
        padding: 25px 35px;
        font-size: 1.5em;
    }

/*** BOTONES DE ACCIÓN ***/

.action-button {
    margin-left: 5px;
    width: 20px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    color: #111;
    font-family: 'Font Awesome 5 Pro';
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
    transition: 0.3s all;
}

    button.action-button {
        width: auto;
        padding: 5px 9px;
    }

    .action-button:hover {
        background: #f5f5f5;
    }

    .action-button:active {
        box-shadow: none !important;
    }

    .delete-button:hover {
        border-color: #E74C3C;
    }

    .action-button.quick-button {
        color: #339AF0;
    }

    .quick-button::after,
    .tizar-button::after,
    .edit-button::after,
    .delete-button::after,
    .trash-button::after,
    .restore-button::after,
    .view-button::after,
    .start-button::after,
    .print-button::after,
    .qr-button::after,
    .pedido-button::after {
        padding: 0 0 2px 2px;
        font-size: 1.5em;
        display: inline-block;
        vertical-align: middle;
        min-width: 20px;
    }

    .action-button.quick-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f0e7';
        position: relative;
        top: 2px;
        left: 2px;
    }

    .tizar-button::after {
        content: '\f568';
        position: relative;
        top: 1px;
        right: 2px;
    }

    .edit-button::after {
        content: '\f044';
        position: relative;
        top: 0;
        right: 1px;
    }

    .delete-button::after {
        content: '\f057';
        color: #E74C3C;
        position: relative;
        top: 1px;
        right: 2px;
    }

    .trash-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f2ed';
        color: #E74C3C;
    }

    .restore-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f896';
        color: #339AF0;
    }

    .view-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f06e';
        color: #339AF0;
        position: relative;
        left: -2px;
    }

    .start-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f04b';
        color: #008080;
        position: relative;
        left: 1px;
    }

    .print-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f02f';
        color: #008080;
        position: relative;
        left: 0;
    }

    .qr-button::after {
        font-family: 'Font Awesome 5 Pro';
        content: '\f029';
        color: #008080;
        position: relative;
        left: 1px;
    }

    .pedido-button::after {
        padding: 1px 0 1px 2px;
        font-size: 1.8em;
        font-family: 'Font Awesome 5 Pro';
        content: '\f101';
        color: #339AF0;
    }