calcpad.css

.card,
.answer-box {
    border: 1px solid lightgray;
    border-radius: 5px;
}
.card {
    padding: 10px;
    margin-bottom: 10px;
}
.interactives {
    display: flex;
    width: fit-content;
    align-items: center;
    flex-wrap: wrap;
}
.answer-box,
.attempts-and-check {
    display: flex;
    width: max-content;
    align-items: center;
}

.answer-box, 
.attempts-count,
.check-button, 
.feedback {
    margin: 10px;
}
.name,
.unit,
.answer-input {
    background-color: rgb(232, 232, 232);
    padding: 5px 3px;
}
.answer-input {
    background-color: white;
    border: 0px;
    width: 80px;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.feedback {
    width: 30px;
}
.check-button {
    background-color: rgb(51, 114, 223);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}
.check-button:hover {
    background-color: rgb(8, 77, 196);
}
.check-button:active {
    background-color: rgb(0, 92, 250);
    border: 1px solid black;
}
.check-button:disabled {
    background-color: red;
    cursor: not-allowed;
}


.attempts-count {
    text-decoration: underline;
    color: gray;
}
.attempts-count:hover {
    color: orange;
}
.attempts-count:active {
    color: darkgoldenrod;
}