.calculator .history-root {
    height: calc(90vh - 56px);
    width: 90vw;
    margin: auto;
}

.calculator .btn-calculator {
    background-color: lightgray;
    color: black;
    font-size: 3vw;
    font-weight: bold;
    font-family: monospace;
    position: relative;
    transition: none !important;
    transform: translateX(0);
    border-radius: 3px;
    border: 1px solid lavender;
}

.calculator .btn-calculator:active,
.calculator .btn-calculator:focus {
    background-color: lightgray !important;
    color: black !important;
    border: none !important;
}

.calculator .btn-calculator.btn-calculator-go {
    background-color: rgb(45, 99, 45);
    color: white;
}

.calculator .btn-calculator.btn-calculator-go:active,
.calculator .btn-calculator.btn-calculator-go:focus {
    background-color: rgb(45, 99, 45) !important;
    border: none !important;
    color: white !important;
}

.calculator .btn-calculator.btn-calculator-clear {
    background-color: rgb(173, 39, 39);
    color: white;
}

.calculator .btn-calculator.btn-calculator-clear:active,
.calculator .btn-calculator.btn-calculator-clear:focus {
    background-color: rgb(173, 39, 39) !important;
    border: none !important;
    color: white !important;
}

.calculator .expression-calculator {
    font-size: 3.2vw;
    font-family: monospace;
    text-align: right;
}

.calculator .history-entry {
    background: transparent;
    font-size: 1.5vw;
}

.calculator .btn-total {
    background: orange !important;
    border-color: orange !important;
    pointer-events: none;
    text-align: center;
    color: black !important;
    font-size: 2vw;
}

.calculator .payment-mode-select * {
    font-size: 1.6vw;
}

.calculator .history-title {
    font-size: 2vw;
}

.calculator .rotate-device-message {
    font-size: 5vw;
    font-size: bold;
}

.calculator .calculator-disabled {
    position: absolute;
    pointer-events: all;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 10;
    color: black;
    font-size: 1.5vw;
}

.calculator .summary-table {
    height: calc(100% - 60px);
}

.calculator .summary-table * {
    color: white;
}

.calculator .summary-table .summary-table-body {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
}

.calculator .summary-table-grid {
    display: grid;
    grid-template-columns: [col-name] 1fr [col-total] 265px [col-pay] 265px !important;
    grid-template-rows: [row1] 100% !important;
}

.calculator .summary-table .summary-table-cell {
    text-align: center;
}

.calculator .summary-table .summary-table-row {
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid lightgray;
}


@media screen and (orientation:portrait) {

    .calculator .landscape {
        display: none;
    }

    .calculator .rotate-device-message {
        display: flex;
    }
}

@media screen and (orientation:landscape) {

    .calculator .portrait {
        display: none;
    }
}