html,body,#root{width:100%;height:100%;margin:0;display:flex;flex-direction:column}:root{--lineguide-darkgreen: #296e81;--lineguide-green: #3391aa;--lineguide-lightgreen: #82cbcf;--lineguide-lightgreen-chip: #82cbcf;--lineguide-purple: #6b4cae;--lineguide-lightpurple: #bfbbe2;--lineguide-success: #169863;--lineguide-warning: #f4915f;--lineguide-danger: #cc4538;--lineguide-darkestgray: #273238;--lineguide-darkgray: #3c4c55;--lineguide-gray: #7a8692;--lineguide-lightgray: #b7bfca;--lineguide-lightestgray: #cfd9e2;--lineguide-darktext: #333333;--lineguide-lighttext: #ffffff}body{font-family:Roboto,sans-serif;margin:0;display:flex;flex-direction:column;height:100%}.App{display:flex;flex-direction:column;height:100%}main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;text-align:center;width:100%}footer{text-align:center}@media(max-height:600px){footer{display:none}}.custom-button{background-color:var(--lineguide-darkgreen);color:var(--lineguide-lighttext);transition:background-color .3s,box-shadow .3s}.custom-button:hover,.custom-button:focus{background-color:var(--lineguide-green);box-shadow:0 4px 6px #0000001a,0 0 10px var(--lineguide-green);outline:none}.custom-button.no-hover:hover,.custom-button.no-hover:focus{background-color:var(--lineguide-darkgreen);box-shadow:none;outline:none}.custom-button.full-width{width:100%}.custom-button.transparent{border:none;background-color:transparent;box-shadow:none;transition:none}.custom-button.transparent:hover,.custom-button.transparent:focus{background-color:transparent;box-shadow:none;outline:none}.navbar-toggle-button{position:fixed;top:-3px;left:0;z-index:50;background:none;border:none;font-size:2.5rem;cursor:pointer}.left-menu-container{position:fixed;top:0;left:0;z-index:1040}.left-menu{position:fixed;top:0;left:0;width:300px;max-width:80%;height:auto;background-color:#fff;transform:translate(-100%);transition:transform .3s ease-in-out;box-shadow:2px 0 5px #0003;padding:20px;border-radius:0 10px 10px 0}.left-menu.show{transform:translate(0)}.left-menu-container.dark-mode .left-menu{background-color:#333;color:#fff}.close-menu-button{position:absolute;top:5px;right:1px;background:none;border:none;font-size:1.5rem;cursor:pointer}.menu-content{padding-top:1.2rem;padding-bottom:1rem}.menu-item{width:13rem;color:var(--lineguide-darktext);justify-content:start!important;margin-bottom:10px;background-color:transparent;border:#333 1px solid;font-size:1rem;transition:background-color .2s ease-in-out}.menu-item:hover{background-color:var(--lineguide-darkgray)}.left-menu-container.dark-mode .menu-item{background-color:#444;color:#fff;border:#555 1px solid}.left-menu-container.dark-mode .menu-item:hover{background-color:#555}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1030;cursor:pointer}#mqtt-status-button{position:relative;top:-15px;right:1rem;background-color:transparent;border:none;box-shadow:none;filter:none;opacity:unset}#mqtt-status-button:hover,#mqtt-status-button:focus{background-color:transparent;box-shadow:none;outline:none}#mqtt-status-button.connected{color:#0ce70c;font-weight:700}#mqtt-status-button.disconnected{color:red;font-weight:700}.tab-navigation{display:flex;justify-content:flex-start;width:100%}.tab-navigation.tab-dark-mode .tab-item{color:#fff}.tab-item{color:var(--lineguide-darktext);margin-right:1rem}.nav-tabs .nav-link.active{color:var(--lineguide-green)!important;border:none!important;border-bottom:2px solid var(--lineguide-darkgreen)!important;background-color:transparent!important}.tab-link{display:flex;align-items:baseline;text-decoration:none;color:inherit;font-size:1rem}.tab-icon{font-size:1.5rem;margin-right:.5rem}.tab-text{font-size:1.5rem}.navigation-header{display:flex;flex-direction:column;border-bottom:1px solid var(--lineguide-lightgray)}.navigation-header-row{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.5rem 0}.tab-row{padding-top:.5rem}.chip-content{position:inherit;top:10px;right:10px;z-index:50;width:fit-content;margin-left:auto;display:flex;align-items:center;padding-top:.5rem;padding-right:.5rem}.navigation-header-hidden .tab-row{display:none}.navigation-header-hidden{position:relative;height:0;overflow:visible;border-bottom:none}.navigation-header-hidden .chip-content{position:inherit;top:10px;right:10px;z-index:50}.custom-input-field{position:relative;border-color:var(--lineguide-darkgreen)}.custom-input-field .form-label{position:absolute;top:-9px;left:7px;padding:0 4px;font-size:.75rem;margin-bottom:0;z-index:1;border-radius:4px}.flex{display:flex}.input-dark-mode{color:var(--lineguide-lighttext);background-color:#2c2c2c;border-color:#444}.input-dark-mode-label{color:var(--lineguide-lightgreen);background:linear-gradient(to bottom,#333 50%,#2c2c2c 50%)}.input-light-mode-label{color:var(--lineguide-darkgreen);background:var(--lineguide-lighttext)}.custom-input-field .form-control{border:1px solid var(--lineguide-darkgreen);box-shadow:0 4px 6px #0000001a;padding:0;font-weight:300;height:45px;transition:border-color .3s,box-shadow .3s,background-color .3s;appearance:textfield;-moz-appearance:textfield}.custom-input-field .form-control:hover,.custom-input-field .form-control:focus{border-color:var(--lineguide-darkgreen);box-shadow:0 4px 6px #0000001a,0 0 10px var(--lineguide-darkgreen);outline:none}.custom-input-field .form-control::-webkit-inner-spin-button,.custom-input-field .form-control::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pin-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.pin-modal-content{background:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:90%;max-width:400px;padding:0;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.pin-modal-header{padding:20px 24px;border-bottom:1px solid #e5e7eb}.pin-modal-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.pin-modal-body{padding:24px}.pin-modal-description{margin:0 0 20px;color:#6b7280;font-size:.95rem}.pin-input-container{margin-bottom:16px}.pin-input{width:100%;padding:12px 16px;font-size:1.1rem;border:2px solid #d1d5db;border-radius:6px;transition:all .2s;text-align:center;letter-spacing:.5em;font-weight:500;-webkit-text-security:disc;font-family:text-security-disc}.pin-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pin-error-message{padding:12px;background-color:#fee2e2;color:#dc2626;border-radius:6px;font-size:.9rem;font-weight:500;text-align:center}.pin-modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;gap:12px;justify-content:flex-end}.pin-modal-button{min-width:100px}.pin-button-cancel{background-color:#6c757d!important;color:#fff!important}.pin-button-cancel:hover{background-color:#5a6268!important}.pin-button-ok{background-color:#0d6efd!important;color:#fff!important}.pin-button-ok:hover{background-color:#0b5ed7!important}.pin-button-ok:disabled{background-color:#6c757d!important;cursor:not-allowed!important;opacity:.65!important}@media(prefers-color-scheme:dark){.pin-modal-content{background:#1f2937}.pin-modal-header h3{color:#f9fafb}.pin-modal-header,.pin-modal-footer{border-color:#374151}.pin-modal-description{color:#9ca3af}.pin-input{background:#374151;border-color:#4b5563;color:#f9fafb;-webkit-text-security:disc;font-family:text-security-disc}.pin-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.pin-error-message{background-color:#7f1d1d;color:#fca5a5}}.centered-box{position:relative;background-color:#82cbcf52;color:var(--lineguide-darktext);text-align:center;padding:15px;border-radius:5px;font-size:1.2rem;font-weight:700;margin-bottom:2.3rem}.centered-box:after{content:"";position:absolute;bottom:-30px;left:50%;transform:translate(-50%);width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-top:30px solid #82cbcf52}.dark-mode{color:#fff;background-color:#82cbcfa1}.dark-mode:after{border-top-color:#82cbcfa1}.arrow-box-line{margin:0;line-height:1.5}.centered-grey-box{position:relative;background-color:var(--lineguide-lightestgray);color:var(--lineguide-darktext);text-align:center;padding:15px;border-radius:3px;font-size:1.2rem;font-weight:700}.color-danger-bg{background-color:var(--lineguide-danger);color:var(--lineguide-lighttext)}