:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--inputPrimary: #dbdbdb;--success: #b0dac2;--danger: #e68585}body{margin:0}.app{display:flex;align-items:center;justify-content:center;height:100svh}h1{margin:0;font-size:1.7rem;font-weight:300}h2{margin:0;font-size:1.4rem;font-weight:300}@media screen and (max-width: 992px){.app{align-items:baseline}}.input-container{display:flex;flex-direction:column;align-items:start;color:#000}.input-label{width:100%;font-size:.9rem;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.input{box-sizing:border-box;width:100%;padding:10px;border-radius:10px;border:none;background-color:var(--inputPrimary);color:#000;font-size:1.1rem}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.calculator-wrapper{flex-grow:1}.calculator-container{box-sizing:border-box;color:#fff;text-align:start;width:400px;margin:auto}.calculator-inputWrapper{background-color:#fff;padding:20px;border-radius:20px;display:flex;flex-direction:column;gap:15px}.calculator-result{position:relative;display:grid;gap:10px;color:#000;font-size:1rem;background-color:var(--success);padding:10px 20px;border-radius:20px;margin-top:30px}.costs{display:grid;grid-template-columns:auto auto;justify-content:space-between;font-size:1.1rem}.cost-label{overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.costs p{margin:0}.sub-cost{font-size:.85rem}@media screen and (max-width: 992px){.calculator-wrapper{margin-top:60px}}@media screen and (max-width: 500px){.calculator-container{width:100svw;padding:5%}}.product{position:relative;display:grid;grid-template-columns:1fr 82px;justify-content:space-between;align-items:center;padding-left:8px;background-color:var(--inputPrimary);border-radius:10px;overflow:hidden}.product p{overflow:hidden;text-overflow:ellipsis;margin:0}.product-controls{display:grid;grid-template-columns:min-content min-content;justify-content:space-around;gap:6px;margin:6px;padding:6px}.product-button{display:flex;background-color:transparent;border:none;padding:0;transition:all .1s;cursor:pointer}.product-button img{width:22px}.delete_confirmation{border:6px solid var(--danger);position:absolute;right:0;display:flex;gap:5px;background-color:var(--inputPrimary);border-radius:14px;transition:transform .2s ease-in-out}.delete_confirmation img{width:35px;padding:5px;box-sizing:border-box;cursor:pointer}.delete-check{background-color:var(--danger);border-radius:0 10px 10px 0!important}.add-button{--addButtonHeight: 3px;--addButtonWidth: 18px;--addButtonColor: #000000;width:var(--addButtonWidth);height:var(--addButtonWidth);cursor:pointer;position:relative;transition:all .2s;padding:5px;border-radius:9999px}.add-button:hover{scale:1.1;background-color:#bde7cb}.add-button div{position:absolute;background-color:var(--addButtonColor);height:var(--addButtonHeight);width:var(--addButtonWidth);top:50%;transform:translateY(-50%)}.add-button div:last-child{transform:translateY(-50%) rotate(90deg)}.save-button{box-sizing:border-box;width:100%;padding:10px;border-radius:10px;border:none;cursor:pointer;background-color:var(--success);color:#000;font-size:1.1rem;margin-top:10px}.general-settings{position:relative;width:100%;min-height:100%}.settings-header{position:sticky;top:0;display:flex;align-items:center;padding:0 var(--settingsYPadding);height:80px;background-color:#fff;z-index:8}.settings-printers{padding:0 var(--settingsYPadding);display:grid;gap:6px}.settings-filaments{padding:0 var(--settingsYPadding);padding-top:30px;display:grid;gap:6px}.filaments{overflow:hidden;display:grid;gap:6px}.settings-printers-head,.settings-filaments-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #a3a3a3}.other-settings{padding:30px var(--settingsYPadding);padding-bottom:60px;display:grid;gap:6px}.other-settings-head{border-bottom:2px solid #a3a3a3;overflow:hidden}.other-settings-head h2{overflow:hidden;text-overflow:ellipsis}@media screen and (max-width: 500px){.settings-header,.settings-printers{padding:0 5%}.settings-filaments{padding:30px 5% 0}.other-settings{padding:30px 5% 60px}}.watermark{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;font-size:.9rem}.watermark img{width:25px}.submenu-container{position:absolute;top:0;right:0;z-index:10;background-color:#fff;box-shadow:-5px 0 20px #0000003b;width:300px;height:100%;padding:0 10%}.submenu-container-top{display:grid;grid-template-columns:1fr 30px;justify-content:space-between;align-items:center;width:100%;margin-top:20px;overflow:hidden}.submenu-container-top h1{overflow:hidden;text-overflow:ellipsis}.close{width:40px;cursor:pointer}.submenu-container h2{overflow:hidden;text-overflow:ellipsis}.submenu-container form{display:flex;flex-direction:column;gap:15px;margin-top:40px}@media screen and (max-width: 500px){.submenu-container{width:70%}}.settings-wrapper{box-sizing:border-box;position:relative;--settingsWidth: 350px;--settingsYPadding: 50px;height:100%}.settings-button{position:absolute;right:60px;top:36px;width:50px;height:50px;z-index:9;display:flex;justify-content:center;align-items:center;border:none;border-radius:9999px;background-color:#fff;cursor:pointer}.settings-button .hamburger{height:fit-content;display:flex;flex-direction:column;gap:5px}.hamburger div{height:3px;width:30px;background-color:#000;border-radius:10px;transition:all .4s}.hamburger.active{background-color:#fff}.hamburger.active div:first-child{transform:translateY(8px) rotate(225deg);background-color:#000}.hamburger.active div:nth-child(2){opacity:0}.hamburger.active div:last-child{transform:translateY(-8px) rotate(-225deg);background-color:#000}.settings-container{position:relative;background-color:#fff;margin:20px;height:calc(100% - 40px);border-radius:20px 10px 10px 20px;width:calc(var(--settingsWidth) + (2 * (var(--settingsYPadding))));color:#000;overflow-x:hidden;overflow-y:auto;transition:all .5s;white-space:nowrap}@keyframes inAnimation{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes outAnimation{0%{transform:translate(0)}to{transform:translate(100%)}}@media screen and (max-width: 992px){.settings-wrapper{position:absolute;right:0;display:flex;justify-content:center}}@media screen and (max-width: 500px){.settings-container{width:100svw;margin:5%}.settings-button{right:50px}}@media screen and (max-width: 300px){.settings-button{right:20px;top:28px}}
