#root{height:inherit}:root{--clr-primary-100:#26c0ab;--clr-primary-200:#fff;--clr-secondary-100:#00494d;--clr-secondary-200:#5e7a7d;--clr-secondary-300:#7f9c9f;--clr-secondary-400:#c5e4e7;--clr-secondary-500:#f4fafa;--ff-primary:"Space Mono",monospace;--fw-bold:700;--fs-100:13px;--fs-200:16px;--fs-300:20px;--fs-400:24px;--fs-500:32px;--fs-600:48px}.text-primary-100{color:#26c0ab;color:var(--clr-primary-100)}.text-primary-200{color:#fff;color:var(--clr-primary-200)}.text-secondary-100{color:#00494d;color:var(--clr-secondary-100)}.text-secondary-200{color:#5e7a7d;color:var(--clr-secondary-200)}.text-secondary-300{color:#7f9c9f;color:var(--clr-secondary-300)}.text-secondary-400{color:#c5e4e7;color:var(--clr-secondary-400)}.text-secondary-500{color:#f4fafa;color:var(--clr-secondary-500)}.bg-primary-100{background-color:#26c0ab;background-color:var(--clr-primary-100)}.bg-primary-200{background-color:#fff;background-color:var(--clr-primary-200)}.bg-secondary-100{background-color:#00494d;background-color:var(--clr-secondary-100)}.bg-secondary-200{background-color:#5e7a7d;background-color:var(--clr-secondary-200)}.bg-secondary-300{background-color:#7f9c9f;background-color:var(--clr-secondary-300)}.bg-secondary-400{background-color:#c5e4e7;background-color:var(--clr-secondary-400)}.bg-secondary-500{background-color:#f4fafa;background-color:var(--clr-secondary-500)}.ff-primary{font-family:Space Mono,monospace;font-family:var(--ff-primary)}.fw-bold{font-weight:700;font-weight:var(--fw-bold)}.fs-100{font-size:13px;font-size:var(--fs-100)}.fs-200{font-size:16px;font-size:var(--fs-200)}.fs-300{font-size:20px;font-size:var(--fs-300)}.fs-400{font-size:24px;font-size:var(--fs-400)}.fs-500{font-size:32px;font-size:var(--fs-500)}.fs-600{font-size:48px;font-size:var(--fs-600)}*{box-sizing:border-box;font-family:Space Mono,monospace;font-family:var(--ff-primary);margin:0;padding:0}body{background-color:#c5e4e7;background-color:var(--clr-secondary-400);display:grid;height:100vh}.logo,body{align-items:center;justify-content:center}.logo{display:flex;margin:40px 0}.logo img{height:60px;width:90px}.container{grid-gap:10px;background-color:#fff;background-color:var(--clr-primary-200);border-radius:25px;display:flex;grid-template-columns:1fr 1fr;margin-bottom:236px;max-width:950px;padding:48px 45px}.card-1,.container{align-items:center;justify-content:center}.card-1{display:inline-block;margin:0 48px 0 0}.card-1 form{display:grid}.input-icon{margin-bottom:10px;width:100%}.input-icon svg{position:absolute}.icon{margin:20px;min-width:20px}.input-bill{align-items:center;background-color:#f4fafa;background-color:var(--clr-secondary-500);border:none;border-radius:5px;height:48px;margin-top:5px;padding:10px;text-align:right;width:379px}.btn-tip{align-items:center;display:grid;grid-template-columns:1fr;justify-content:center;margin:30px 0}.tips-precent{display:grid;grid-template-columns:repeat(3,1fr)}.tips-1{grid-column:span 3}.tips-1,.tips-2{display:flex;flex-wrap:wrap}.tips-2{align-items:center}.tips-precent button{align-items:center;background-color:#00494d;background-color:var(--clr-secondary-100);border:none;border-radius:5px;color:#fff;color:var(--clr-primary-200);cursor:pointer;display:flex;height:48px;justify-content:center;margin:10px 5px;padding:10px 35px;width:117px}.btn-tip button:hover{background-color:#26c0ab;background-color:var(--clr-primary-100);color:#00494d;color:var(--clr-secondary-100)}.input-custom{border:none;color:#00494d;color:var(--clr-secondary-100);display:flex;justify-content:center;margin:10px 5px 5px;width:118px}.input-custom,.input-people{align-items:center;background-color:#f4fafa;background-color:var(--clr-secondary-500);border-radius:5px;height:48px;padding:10px;text-align:right}.input-people{border:none;margin-top:5px;width:379px}.input-remove-arrows::-webkit-inner-spin-button,.input-remove-arrows::-webkit-outer-spin-button{-webkit-appearance:none}.input-remove-arrows{caret-color:#26c0ab;caret-color:var(--clr-primary-100)}.input-remove-arrows:focus{outline:none}.card-1 input:hover,.input-remove-arrows{border:2px solid #26c0ab}.card-1 input:hover{border:2px solid var(--clr-primary-100)}.card-2{align-items:center;background-color:#00494d;background-color:var(--clr-secondary-100);border-radius:15px;display:inline-block;justify-content:center;padding:30px}.total-output{display:grid;justify-content:space-between;margin:10px 5px}.input-total::-webkit-input-placeholder{color:#26c0ab;color:var(--clr-primary-100)}.input-total::placeholder{color:#26c0ab;color:var(--clr-primary-100)}.input-amount,.input-total{border:none;height:71px;outline:none;text-align:right;width:250px}.input-amount::-webkit-input-placeholder{color:#26c0ab;color:var(--clr-primary-100)}.input-amount::placeholder{color:#26c0ab;color:var(--clr-primary-100)}.amount{margin-bottom:20px}.amount,.total{align-items:center;display:inline-flex;justify-content:space-between}.btn-reset{border-radius:5px;cursor:pointer;font-weight:700;font-weight:var(--fw-bold);margin-top:135px;padding:10px 150px}.btn-reset:hover,.tip-button.selected{background-color:#26c0ab;background-color:var(--clr-primary-100)}.tip-button.selected{color:#00494d;color:var(--clr-secondary-100)}@media (max-width:930px){.logo{margin:50px 0 40px}.card-1{margin:0 10px 32px 20px}.container{display:inline-block;margin:40px 0 0;max-width:500px}.input-amount,.input-total{font-size:32px;font-size:var(--fs-500)}}@media (max-width:480px){.tips-precent{grid-template-columns:repeat(2,1fr)}.tips-precent button{align-content:center;padding:25px 77px 25px 60px;width:60px}.card-1{margin:0 10px 32px 20px}.card-2{padding:20px}.btn-reset{margin-top:33px;padding:10px;width:100%}.container{display:inline-block;max-width:480px;padding-left:20px;padding-right:20px}.input-amount{font-size:32px;font-size:var(--fs-500);width:100px}.input-custom{padding:25px 20px;width:85%}.input-total{font-size:32px;font-size:var(--fs-500)}.input-bill,.input-people{width:auto}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.7bdc28de.css.map*/