body{background-color:#c5e4e7;margin:0;padding:0}.App{width:100vw}.App
img{display:block;margin:50px auto 40px}.output{align-self:center;background:#00474b;border-radius:15px;height:258px;justify-content:space-between;padding:32px 24px 24px;width:328px}.output,.output .text{display:flex;flex-direction:column}.output .text{justify-content:center}.output
.text
p:first-of-type{color:#fff;font-size:16px;font-weight:700}.output
p{margin:0}.output
.text
p:nth-of-type(2){color:#7f9d9f;font-size:13px;font-weight:700}.output
.amount{color:#26c2ae;font-size:32px;font-weight:700}.output
.tip-amount,.output
.total{align-items:center;display:flex;height:48px;justify-content:space-between}.output
button{border:none;border-radius:5px;color:#00474b;font-size:20px;font-weight:700;height:48px;text-transform:uppercase}.output
button.reset-button{background-color:#26c2ae}.output
button.reset-button:hover{background-color:#9fe8df;cursor:pointer}.output
button.reset-button.disabled{background:#0d686d;cursor:not-allowed}.main-card{align-items:center;background:#fff;border-radius:15px;display:flex;flex-direction:column;justify-content:space-between;padding:32px 0}.main-card
.input-card{width:340px}.input-container{display:flex;flex-direction:column;position:relative}.input-card
p{color:#5e7a7d;font-size:16px;font-weight:700;margin:0 0 6px}.input-container
input{background:#f3f9fa;border:none;border-radius:10px;color:#00474b;font-size:24px;font-weight:700;height:48px;margin-bottom:32px;padding-right:16px;text-align:right}.input-container
input:focus{outline-color:#26c2ae}.input-container
img{bottom:8px;left:15px;position:absolute}.tip-container{margin-bottom:32px}.buttons-container{grid-gap:10px;display:grid;grid-template-columns:repeat(2,1fr);margin-top:10px}.buttons-container Button{background:#00474b;border:none;border-radius:10px;color:#fff;font-size:24px;font-weight:700;height:48px;width:100%}.buttons-container Button:hover{cursor:pointer}.buttons-container Button.selected{background:#26c2ae;color:#00474b}.buttons-container
.custom-button{background:#00474b;background:#f3f9fa;border:none;border-radius:10px;color:#fff;color:#00474b;font-size:24px;font-weight:700;height:48px;text-align:center;width:100%}.buttons-container
.custom-button:focus{caret-color:#26c2ae;outline-color:#26c2ae}@media (min-width:980px){.main-card{flex-direction:row;height:480px;justify-content:space-around;margin:0 auto;width:920px}}
/*# sourceMappingURL=main.ae963791.css.map*/