/* calc */
#calc_wrap .td input[type="button"] {
    appearance: none;
    /*border: 1px solid #000;*/
    border: none;
    width: 100%; height: 100%;
    background: #ff7bbc; color: #111;
    font-weight: bold;
    cursor: pointer;
    font-size: 16pt;
    border-radius: 64px;
    padding: 8px 0;
}
#calc_wrap > .tbl > .tr > .td > .tbl > .tr > .td {
    width: 25%;
}
#calc_wrap .td input[type="button"]:active {
    border: none;
}
#calc_wrap .td input[type="button"]:hover {
    background: #ff91c7;
}
#calc_wrap .td input[type="button"]:disabled {
    appearance: none;
    border: 1px solid #666;
    width: 100%; height: 100%;
    background: #aaa; color: #666;
    font-weight: bold;
    cursor: default;
}

#calc_wrap {
    width: 100%; height: 100%;
    /*position: absolute; top: 0; left: 0;*/
    /*background: /*#2a1e27/ rgba(42,30,39,.5);*/
}

#output_result_wrap  {
}
#output_history_wrap  {
    overflow-x: auto;
    height: 100%;
}
#output_result {
    text-align: right;
    font-size: 16pt;
    font-weight: bold;
    padding: 2px 16px;
    color: #dccbbe;
    white-space: nowrap;
    float: right;
}
#output_history {
    text-align: right;
    font-size: 16pt;
    font-weight: bold;
    padding: 2px 16px;
    color: #dccbbe;
    white-space: nowrap;
    float: right;
    word-wrap: break-word;
    white-space: break-spaces;
    width: 100%;
}
#output_history > div {
    border-bottom: 2px solid #ccc;
    margin: 8px 0;
    padding: 8px 0
}
#input_result {
    text-align: right;
    font-size: 24pt;
    font-weight: bold;
    padding: 2px 16px;
    color: #eee;
    white-space: nowrap;
}

.td .purple {
    background: #C673F0 !important;
}
.td .red {
    background: #F56D91 !important;
}
.td .green {
    background: #52ce9a !important;
}
.td .purple:hover {
    background: #dc98ff !important;
}
.td .red:hover {
    background: #f98aa8 !important;
}
.td .green:hover {
    background: #64e0ac !important;
}