﻿.calculator {
    background: #fff;
    padding: 25px;outline:none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.calculator h2 {font-family:'Clash Display';font-weight:700;font-size:2.3em}

pos {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 32px;
    margin-top: 10px;
    margin-right: 10px;
}

pos:hover {
	background:#e5e5e5
}

pos, pos label {
	cursor:pointer
}

.calculator h3 {
	margin-top:10px;
}

.calculator h3 {margin-top: 20px;font-weight:500;font-family:'Clash Display'}

.calculator input {text-align:center;padding:10px;border-radius:30px;border:1px solid #ccc;font-size:2em}

pos.selected {background:#0074fe;color:#fff;border-color:#0074fe}

.calculator num {display:inline-block;margin-left:8px;background:#e5e5e5;padding:10px;border-radius:100px;min-width:50px;text-align:center;cursor:pointer;}

.calculator num:hover {background:#0074fe;color:#fff}

cost {
    display: block;
    margin-top: 20px;
    padding: 20px;
    border-top: 3px solid #000;
    text-align: right;
    font-family: 'Clash Display';
    font-size: 3em;
}

cost price {
    background: var(--yellowH2);
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
}
