button {
    width: 9em;
    height: 3em;
    background: #ccc;
    color: #000;
    vertical-align: middle;
    position: relative;
    padding: 0 .5em 0 3em;
    line-height: 1em;
    border: 0;
    font-size: 1em;
    box-sizing: border-box;
}

button:hover {
    background: #4c4c4c;
    color: #fff;
}

button:active {
    background: #666;
}

button.auto {
    width: auto;
    padding:0 1em;
}

button.auto_icon {
    width: auto;
}

button.small {
    width: 3em;
    padding: 0;
}

button.auto_small {
    width: 3em;
    padding: 0;
    margin: .5em 0;
}

button.big {
    width: 12em;
    height: 4em;
}

button.green {
    background: #9bc63d;
    color: #fff;
}

button.green:hover {
    background: #7c9e31;
}

button.green:active {
    background: #5d7725;
}

button.magenta {
    background: #eb3e97;
    color: #fff;
}

button.magenta:hover {
    background: #bc3279;
}

button.magenta:active {
    background: #8d255b;
}

button.blue {
    background: #00adef;
    color: #fff;
}

button.blue:hover {
    background: #008abf;
}

button.blue:active {
    background: #00688f;
}

button.darkgray {
    background: #4c4c4c;
    color: #fff;
}

button.darkgray:hover {
    background: #00adef;
    color: #fff;
}

button.darkgray:active {
    background: #00adef;
    color: #fff;
}

button:disabled,
button:disabled:hover {
    border: 1px solid #ccc;
    background: #e5e5e5;
    color: #ccc;
}

/* button icons*/
button span:not(.tooltiptext) {
    display: block;
    width: 2em;
    height: 100%;
    font: 1.5em/2em manager_icons;
    position: absolute;
    top: 0;
    left: 0;
}

button span:not(.tooltiptext):before {
    content: '';
}

button.add span:before,
button.add_global span:before {
    content: '+';
}

button.copy span:before {
    content: 'P';
}

button.minus span:before {
    content: '-';
}

button.edit span:before {
    content: 'e';
}

button.print_period span:before,
button.print_history span:before,
button.print_separately span:before, 
button.print_inventory span:before,
button.print_wte span:before,
button.print_A4 span:before,
button.print span:before,
button.print_single span:before {
    content: 'p';
}

button.account_btn span:before,
button.box span:before {
    content: 'q';
}

button.evidence_btn span:before,
button.columns span:before {
    content: 'c';
}

button.print_barcode span:before {
    content: 'N';
}

button.print_A4_PDF span:before,
button.export span:before {
    content: 'x';
}

button.update span:before,
button.update_discount span:before,
button.update_evidence span:before,
button.update_price span:before {
    content: 'r';
}

button.info span:before {
    content: 'i';
}

button.import span:before,
button.download span:before {
    content: 'n';
}

button.disable span:before {
    content: 'B';
}

button.enable span:before,
button.restore span:before {
    content: 'R';
}

button.delete span:before,
button.close_table span:before {
    content: 'E';
}

button.clock span:before,
button.logout span:before {
    content: 'w';
}

button.save span:before,
button.save_and_close span:before {
    content: 's';
}

button.cancel span:before,
button.close span:before,
button.deleteX span:before,
button.no span:before {
    content: 'C';
}

button.insert span:before {
    content: 'I';
}

button.clear span:before {
    content: 'S';
}

button.right span:before {
    content: 'f';
}

button.search span:before {
    content: 'F';
}

button.login span:before {
    content: 'L';
}

button.up span:before {
    content: 'u';
}

button.down span:before {
    content: 'd';
}

button.left span:before {
    content: 'b';
}

button.password span:before {
    content: 'k';
}

button.chart-bar span:before {
    content: 'X';
}

button.chart-pie span:before {
    content: 'Y';
}

button.check span:before {
    content: 'Q';
}

button.download_pdf span:before {
    content: '/';
}

button.download_xls span:before {
    content: '(';
}

button.download_csv span:before {
    content: ')';
}

button.download_xml_data span:before,
button.download_xml span:before {
    content: '=';
}

button.download_txt_scale span:before {
    content: '&';
}

button.upload_picture span:before {
    content: '*';
}

button.yes span:before {
    content: 'j';
}

button.open span:before {
    content: '1';
}

button.add_payment span:before {
    content: 'K';
}

button.create_receiving_of_goods span:before {
    content: '2';
}

button.deleteX{
    float: right;
}