@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Pixelify+Sans:wght@400..700&display=swap";.loginPage{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.loginPage .loginBox{background-color:var(--bg-dark);border:2px solid var(--border);border-radius:10px;flex-direction:column;align-items:center;width:350px;height:450px;display:flex}.loginBox form{flex-direction:column;justify-content:flex-start;align-items:center;width:90%;height:100%;margin-top:50px;display:flex}.loginBox form *{width:90%;margin-bottom:15px}.loginBox p{-webkit-user-select:none;user-select:none;margin:20px;font-size:3rem;font-weight:250}.loginBox .modeSwitcher{-webkit-user-select:none;user-select:none;text-align:center;margin:3px;font-size:1.3rem;text-decoration:underline;transition:all .1s}.loginBox .modeSwitcher:hover{color:var(--secondary);text-shadow:1px 1px 10px var(--secondary), 1px 1px 10px var(--secondary);scale:1.1}.loginPage .login{filter:drop-shadow(0, 0, 1rem var(--secondary))}.loginPage .register{filter:drop-shadow(0, 0, 1rem var(--primary))}.homePage{flex-direction:column;width:100vw;height:100vh;display:flex}.homePage .userBalance{font-size:2rem;font-weight:500}.homePage .coffeeBalance{font-size:1.8rem;font-weight:500}.homePage .actionContainer{flex-direction:column;display:flex}.homePage .actionContainer button{border:0;border-radius:10px;min-height:100px;margin:10px 10px 0;padding:10px;font-size:3rem;font-weight:400;transition:all .1s}.homePage .actionContainer button:hover{scale:1.02}.homePage .actionContainer button:active{scale:1.04}.homePage .actionContainer:last-child{margin-bottom:10px}.homePage .drinkAction{background-color:var(--info)}.homePage .addCoffeeAction{background-color:var(--warning)}.homePage .addMoneyAction{background-color:var(--success)}.homePage .useMoneyAction{background-color:var(--danger)}.homePage .cardContainer{flex-flow:wrap;width:100vw;display:flex}select{text-align:left;background-color:#0000;border:0;outline:none}.machineName{font-size:1.5rem;font-weight:200}@media (width<=800px){.homePage .cardContainer{flex-direction:column;display:flex}}.sectionCard{background-color:var(--bg-dark);border:2px solid var(--border);border-radius:10px;margin:5px 10px;transition:all .1s}.sectionCard:hover{border-color:var(--highlight);background-color:var(--bg-light)}.sectionCard .header{border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;min-height:2rem;padding:5px;display:flex}.sectionCard .header .collapseButton{background-color:#0000;border:0;outline:0;width:30px;height:30px;font-size:1.3rem;transition:all .1s}.sectionCard .header p{font-size:1.5rem;font-weight:600}.sectionCard .content{width:100%}.historyCard{background-color:var(--bg-light);border:2px solid var(--border);border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;height:60px;margin:10px;display:flex}.historyCard .left{flex-direction:row;display:flex}.historyCard .iconCircle{-webkit-user-select:none;user-select:none;border-radius:100%;justify-content:center;align-items:center;width:50px;height:50px;margin:5px;font-size:1.8rem;display:flex}.historyCard .textContainer{margin:5px}.historyCard .actionText{font-size:1rem;font-weight:250}.historyCard .amountText{font-size:1.5rem;font-weight:450}.balanceCard{background-color:var(--bg-light);border:2px solid var(--border);border-radius:10px;margin:10px}.balanceCard .machineName{margin:5px;font-size:1.5rem;font-weight:200}.balanceCard .userBalance{margin:5px;font-size:2rem;font-weight:500}.balanceCard .coffeeBalance{margin:5px;font-size:1.8rem;font-weight:500}.topBar{background-color:var(--bg-light);border:none;border-bottom:2px solid var(--highlight);z-index:1000;flex-direction:row;justify-content:space-between;align-items:center;height:3.5rem;margin-bottom:10px;display:flex;position:relative;top:0;left:0}.topBar h1{-webkit-user-select:none;user-select:none;margin:5px;font-size:2rem;font-weight:250}.topBar .topBar .rightSide{flex-direction:row;align-items:center;height:100%;display:flex}.topBar .userButton{-webkit-user-select:none;user-select:none;background-color:#0000;border:none;flex-direction:row;align-items:center;height:100%;display:flex}.dropDownMenu{background-color:var(--bg-light);border:2px solid var(--border);border-radius:10px;width:200px;margin:2px;position:fixed;top:3.5rem;right:5px}.dropDownMenu .navButton{text-align:center;background-color:#0000;border:none;border-radius:10px;width:100%;margin:0;padding:5px}.dropDownMenu .navButton:hover{background-color:var(--highlight)}.screenCover{background-color:color-mix(in srgb, var(--bg-dark) 100%, transparent 50%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:999;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modalWrapper{background-color:var(--bg-light);border:2px solid var(--border);z-index:1000;border-radius:10px;flex-direction:column;justify-content:flex-start;min-width:350px;display:flex}.modalWrapper .titleBar{flex-direction:row;justify-content:space-between;align-items:center;height:40px;margin:5px;font-size:1.2rem;display:flex}.modalWrapper .titleBar .closeButton{background-color:var(--bg-light);border:2px solid var(--border);border-radius:10px;justify-content:center;align-items:center;width:30px;height:30px;transition:all .1s ease-in;display:flex}.modalWrapper .titleBar .closeButton:hover{background-color:var(--highlight);scale:1.15}.modalWrapper .titleBar .closeButton:active{background-color:var(--secondary)}.modalWrapper .contentWrapper{margin:5px}.adminPage button{background-color:var(--bg-light);border:2px solid var(--border);color:var(--text);text-align:center;border-radius:10px;margin:5px 10px;padding:5px;font-size:1rem;transition:all .1s;display:inline-block}.adminPage button:hover{border-color:var(--secondary);color:var(--secondary);scale:1.01}.adminPage .actionButton{background-color:var(--bg-light);border:2px solid var(--border);color:var(--text);text-align:center;border-radius:10px;margin:5px;padding:5px;font-size:1rem;display:inline-block}.variationCard{background-color:var(--bg-light);border:2px solid var(--border);border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;margin:10px;padding:2px;font-size:1.5rem;display:flex}.adminPage .newUserForm{flex-direction:column;justify-content:space-between;align-items:center;display:flex}:root{--bg-dark:oklch(10% 0 20);--bg:oklch(15% 0 20);--bg-light:oklch(20% 0 20);--text:oklch(96% 0 20);--text-muted:oklch(76% 0 20);--highlight:oklch(50% 0 20);--border:oklch(40% 0 20);--border-muted:oklch(30% 0 20);--primary:oklch(76% .1 20);--secondary:oklch(76% .1 200);--danger:#ff383c;--warning:#ff8d28;--success:#34c759;--info:#00c3d0}body.light{--bg-dark:oklch(92% 0 20);--bg:oklch(96% 0 20);--bg-light:oklch(100% 0 20);--text:oklch(15% 0 20);--text-muted:oklch(40% 0 20);--highlight:oklch(100% 0 20);--border:oklch(60% 0 20);--border-muted:oklch(70% 0 20);--primary:oklch(40% .1 20);--secondary:oklch(40% .1 200);--danger:#ff383c;--warning:#ff8d28;--success:#34c759;--info:#00c3d0}body{background-color:var(--bg)}*{color:var(--text);margin:0;padding:0;font-family:Inter}input{background-color:var(--bg-light);color:var(--text);border:2px solid var(--border);border-radius:10px;outline:none;margin:5px;padding:10px;font-size:1.2rem;transition:all .1s}input[type=submit]{padding-left:15px;padding-right:15px}input:hover,input:focus{border-color:var(--secondary);background-color:color-mix(in srgb, var(--bg-light) 100%, var(--secondary) 30%);scale:1.05}input:active[type=submit]{scale:1.15}button{background-color:var(--bg-light);border:2px solid var(--border);color:var(--text);text-align:center;border-radius:10px;margin:5px;padding:5px;font-size:1rem;display:inline-block}.profilePicture{object-fit:cover;border-radius:100%;width:50px;height:50px;margin:5px;overflow:hidden}.profilePictureSelector{width:150px;height:150px;transition:all .1s cubic-bezier(.075,.82,.165,1)}.profilePictureSelector:hover{filter:drop-shadow(var(--secondary) 0 0 10px);scale:1.03}.dangerButton:hover{border-color:var(--danger)!important;color:var(--danger)!important}