*{margin:0;padding:0}body{background-color:#161722;color:#fafafa;font-family:"Roboto"}body::-webkit-scrollbar{display:none}.App{display:flex;flex-direction:column}.App__Title{padding:1.5rem 0rem;text-align:center;background-color:#363955;box-shadow:0px 0px 16px 16px rgba(0,0,0,0.5)}.App__Inputs{margin-top:3rem}.App__Inputs .inputsContainer{position:relative;display:flex;gap:1rem;justify-content:center;align-items:center}@media (max-width: 33.75em){.App__Inputs .inputsContainer{flex-direction:column}}.App__Inputs .modeContainer{margin-top:1rem;display:flex;justify-content:center;gap:1rem;align-items:center}.App__Inputs .modeContainer .special,.App__Inputs .modeContainer .tech{height:1.5rem;width:1.5rem;cursor:pointer}.App__Inputs .submitContainer{margin-top:1rem;text-align:center}.App__Inputs .submitContainer .submit{cursor:pointer;padding:0.5rem;border-radius:0.25rem}.App__Inputs input::-webkit-inner-spin-button,.App__Inputs input::-webkit-outer-spin-button{-webkit-appearance:none}.App__Inputs .Level{width:4.375rem;height:2.5rem}.App__Inputs .Exp,.App__Inputs .clear{height:2.5rem;width:30%}@media (max-width: 56em){.App__Inputs .Exp,.App__Inputs .clear{width:60%}}.App__Inputs .clear{width:2.25rem;background-color:#ef7979;border-radius:0.25rem;border:none;cursor:pointer;font-size:2rem}.App__Inputs .clear:hover{border:1px solid red}.App__Inputs .Level,.App__Inputs .Exp{font-size:1.25rem}.App__Inputs input{text-align:center;border-radius:0.25rem;border:none;background-color:#2f3253;color:#fafafa}.App__Inputs input:focus{outline:none}.App__Inputs input:focus::placeholder{opacity:0}.App__Output{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:2.5rem}.App__Output .boxes{width:95%;margin-top:1.5rem;gap:1rem;display:flex;justify-content:center;align-content:center}@media (max-width: 56em){.App__Output .boxes{flex-direction:column}}.App__Output .outputSection{text-align:center;background-color:#363955;flex:33%;align-content:center;padding:1rem 0rem}.App__Output .first .info{padding:0.5rem}@media (max-width: 56em){.App__Output .first{order:1}}.App__Output .second .percentageNumbers,.App__Output .third .percentageNumbers{display:grid;grid-template-columns:20% 60% 20%}.App__Output .second .percentageBar,.App__Output .third .percentageBar{margin:0.25rem 0rem;width:0%;height:0.55rem;transition:width 150ms ease-in-out}@media (max-width: 56em){.App__Output .second,.App__Output .third{order:2}}@media (max-width: 56em){.App__Output .third{order:3}}.App__Output .tableContainer{width:95%;margin-bottom:2.5rem;display:flex;flex-direction:column;justify-content:center;gap:1.5rem}.App__Output .tableContainer .oilCan{width:1.125rem;height:1.5rem;vertical-align:middle}@media (max-width: 33.75em){.App__Output .tableContainer .oilCan{display:none}}.App__Output .tableContainer .oilCanSpecial{width:1.125rem;height:1.5rem;vertical-align:middle}.App__Output .tableContainer .oilInput{text-align:center}.App__Output .tableContainer .oilInput input::-webkit-inner-spin-button,.App__Output .tableContainer .oilInput input::-webkit-outer-spin-button{-webkit-appearance:none}.App__Output .tableContainer .oilInput input{text-align:center;height:1.5rem;width:1.5rem;border-radius:0.25rem;border:none;background-color:#2f3253;color:#fafafa}.App__Output .tableContainer .oilInput .disabled{border:1px solid red;opacity:0.75}.App__Output .tableContainer .tableController{display:flex;justify-content:space-evenly;align-content:center}.App__Output .tableContainer .tableController .check{height:1.5rem;width:1.5rem;cursor:pointer}@media (max-width: 40em){.App__Output .tableContainer .tableController{flex-direction:column;align-items:center;gap:1rem}}.App__Output .tableContainer .tableController .moodContainer .happy,.App__Output .tableContainer .tableController .moodContainer .plan,.App__Output .tableContainer .tableController .planContainer .happy,.App__Output .tableContainer .tableController .planContainer .plan{width:1.5rem;height:1.5rem;vertical-align:middle}.App__Output .tableContainer .tableController .center>*{vertical-align:middle}.App__Output .tableContainer .table{width:100%;border:1px solid #363955}.App__Output .tableContainer .table td{text-align:center;border-right:1px solid #363955;border-left:1px solid #363955;padding:0.25rem 0px}.App__Output .tableContainer .table td p{display:inline;vertical-align:middle}.App__Output .tableContainer .table__head th img{width:1.5rem;height:1.5rem;vertical-align:middle}.App__Output .tableContainer .table__body tr:nth-child(odd){background-color:#363955}.App__Output .tableContainer .table__body td .flag{width:1.5rem;height:1.5rem;vertical-align:middle}.App__Footer{padding:1.5rem 0rem;text-align:center;background-color:#363955;box-shadow:0px 0px 16px 16px rgba(0,0,0,0.5);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.App__Footer .AL{width:5rem;height:5rem}.App__Footer p{opacity:0.8;width:33%}@media (max-width: 56em){.App__Footer p{width:90%}}.App__Footer a{color:#b5b5fb;text-decoration:solid}.App__Footer .react{width:3.5rem}.App__Footer .sass{width:4rem;height:4rem}.App__Footer img{vertical-align:middle}
/*# sourceMappingURL=style.css.map */