.input-section__heading-container{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:6px}.input-section__error{color:#f23d3d;display:none;right:0;text-align:right;top:0;width:200px}.input-section__error--visible{display:block}.input-section__input-field-container{align-items:center;display:flex;position:relative}.input-section__input-field{background:var(--very-light-grayish-cyan);border:none;border-radius:5px;color:var(--very-dark-cyan);font-family:Space Mono,monospace;font-size:1.25rem;padding:10px 15px 10px 2.5rem;text-align:right;width:100%}.input-section__input-field--valid,.input-section__input-field--valid:focus{outline:2px solid #5eb7a3}.input-section__input-field--invalid,.input-section__input-field--invalid:focus{outline:2px solid #f23d3d}.input-section__input-field::-webkit-input-placeholder{color:var(--grayish-cyan);font-family:Space Mono,monospace}.input-section__input-field::placeholder{color:var(--grayish-cyan);font-family:Space Mono,monospace}.input-section__icon{left:15px;position:absolute}.input-section{margin-bottom:2rem}.input-section>*{display:block}.input-section>:not(:last-child){margin-bottom:2rem}.input-section__heading{color:var(--dark-grayish-cyan);display:block}.tip-percentage{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}.tip-percentage__heading-container{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:14px}.tip-percentage__button{background:var(--very-dark-cyan);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1.5rem;padding:6px 15px;transition-duration:.1s;transition-property:background,color;transition-timing-function:linear}.tip-percentage__button:hover{background:#9fe8df;color:var(--very-dark-cyan)}.tip-percentage__input-field{background:var(--very-light-grayish-cyan);border:none;border-radius:5px;color:var(--very-dark-cyan);font-family:Space Mono,monospace;font-size:1.5rem;height:100%;padding:0 15px;text-align:right;width:100%}.tip-percentage__input-field::-webkit-input-placeholder{color:var(--grayish-cyan)}.tip-percentage__input-field::placeholder{color:var(--grayish-cyan)}@media screen and (min-width:1000px){.input-section{margin:0 48px 0 0}.tip-percentage{gap:16px 14px;grid-template-columns:repeat(3,1fr)}}.results-section__container{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.875rem;width:100%}.results-section__container:nth-child(2){margin-bottom:2.25rem}.results-section__sub-container{margin-right:20px}.results-section__dividend{color:#fff;line-height:1;margin-bottom:.5rem}.results-section__divisor{color:var(--grayish-cyan);font-size:.875rem;line-height:1}.results-section__result{align-items:center;color:#26c2ad;display:flex;font-size:3rem;line-height:1}.results-section__result:before{content:"$";font-size:2rem}@media screen and (min-width:1000px){.results-section__container{margin-bottom:2rem}.results-section__container:nth-child(2){margin-bottom:8.625rem}.results-section__result:before{font-size:3rem}}.results-screen{background:var(--very-dark-cyan);border-radius:15px;padding:44px 24px 24px}.results-screen__button{background:#26c2ad;border:none;border-radius:5px;color:var(--very-dark-cyan);cursor:pointer;font-size:1.25rem;padding:10px;text-transform:uppercase;transition:background .1s linear;width:100%}.results-screen__button:hover{background:#9fe8df}@media screen and (min-width:1000px){.results-screen{display:flex;flex:0 0 413px;flex-direction:column;max-width:413px;padding:60px 40px 40px}}.tip-calculator{background:#fff;border-radius:20px 20px 0 0;max-width:650px;min-height:calc(100vh - 144px);padding:32px;width:100%}@media screen and (min-width:1000px){.tip-calculator{align-items:center;border-radius:20px;display:flex;justify-content:space-between;max-width:none;min-height:0;min-height:auto;width:920px}}:root{--very-dark-cyan:#00494d;--dark-grayish-cyan:#5e7a7d;--grayish-cyan:#7f9c9f;--light-grayish-cyan:#c5e4e7;--very-light-grayish-cyan:#f4fafa}input{display:block}body{background:#c5e4e7;background:var(--light-grayish-cyan);font-family:Space Mono,monospace}#root{align-items:center;display:flex;flex-direction:column}.logo{margin-block:50px 40px}@media screen and (min-width:1000px){#root{min-height:100vh;padding-block:160px 100px}.logo{margin-block:0 90px}}
/*# sourceMappingURL=main.844c1650.css.map*/