#root{--purple: #500866;--black: #000000;--grey: #d8d8d8;--lavender: #b395b2;--charcoal: #494b4c;--light-black: #3c3aa;--dark-grey: #bab9b9;--light-lavender: #d2b7d1;--light-charcoal: #5e6162;--light-purple: #9a6585;--white: #ffffff;--bg-disabled: #f1ebf1;--error-red: #b00030;width:100%;height:100vh}body{font-family:Nunito Sans,sans-serif;font-size:16px;line-height:140%;margin:0}.page-div{width:100%;height:100%;display:flex;flex-direction:column}body.italic{font-style:italic}body.bold{font-weight:700}body.caption{font-size:16px;line-height:150%}h1{font-size:32px;font-weight:700;line-height:110%}h2{font-size:24px;font-weight:700;line-height:115%}h3{font-size:22px;font-weight:700;line-height:120%}h4{font-size:18px;font-weight:700;line-height:130%}@media (min-width: 768px) and (max-width: 1024px){h1{font-size:38px}h2{font-size:28px}h3{font-size:26px}h4{font-size:20px}body{font-size:16px;line-height:130%}body.caption{font-size:14px}}@media (min-width: 1025px){h1{font-size:44px}h2{font-size:32px}h3{font-size:28px}h4{font-size:22px}body{font-size:18px;line-height:130%}body.caption{font-size:14px}}#navbar{width:100%;height:40px;min-height:40px;display:flex;align-items:center;justify-content:space-between;background-color:var(--light-purple);color:var(--white);box-shadow:0 2px 4px #0000001a}#navbar-logged-in{width:100%;height:40px;min-height:40px;display:flex;align-items:center;justify-content:space-between;background-color:var(--light-charcoal);color:var(--white);box-shadow:0 2px 4px #0000001a}#nav-left{display:flex;align-items:center;gap:20px}#nav-right{display:flex;align-items:center}#nav-button{margin-right:8px;padding:4px 10px;text-decoration:none;border-radius:12px;outline:none;transition:transform .2s ease,background-color .2s ease}#nav-button:hover{background-color:#00000014;color:inherit}#nav-button:active{outline:none;transform:scale(.9)}#nav-button:focus-visible{outline:3px solid var(--purple)}#nav-brand{margin-left:8px;cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;text-decoration:none;color:inherit}#nav-brand:focus-visible{outline:3px solid var(--purple)}h2{margin:0}#logo{width:25px;align-self:center;display:block}@media (min-width: 768px) and (max-width: 1024px){#navbar,#navbar-logged-in{height:50px;min-height:50px}#nav-button{margin-right:12px}#nav-brand{margin-left:12px}#logo{width:30px}}@media (min-width: 1025px){#navbar,#navbar-logged-in{height:60px;min-height:60px}#nav-button{margin-right:15px}#nav-brand{margin-left:15px}#logo{width:35px}}#home-page{overflow:hidden}#home-page:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/traffic_pic.jpg);background-size:cover;background-position:center;opacity:.8;z-index:-1}#welcome-box{width:400px;height:clamp(340px,75%,400px);background-color:#9a6585e6;opacity:1;box-sizing:border-box;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px}p{text-align:center;margin-bottom:5px}h1{margin-bottom:5px;text-align:center}p{margin-top:5px}#main-content{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.divider{display:flex;align-items:center;text-align:center;width:100%}.divider:before,.divider:after{content:"";flex-grow:1;border-top:1px solid #000;margin:0 10px}.divider span{color:var(--charcoal)}h4{margin:8px 0}.home-button{width:100%;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:1rem;background-color:var(--grey);color:var(--charcoal);border-radius:20px;border:none;height:3rem;outline:none;margin:10px;transition:transform .2s ease,background-color .4s ease}.home-button:hover{background-color:var(--dark-grey);color:var(--charcoal);cursor:pointer}.home-button:focus-visible{outline:3px solid var(--purple)}.home-button:active{outline:none;transform:scale(.98)}@media (min-width: 768px) and (max-width: 1024px){#welcome-box{width:500px;height:clamp(400px,70%,500px);padding:30px}h4{margin:20px 0}.home-button{margin:12px}}@media (min-width: 1025px){#welcome-box{width:600px;height:clamp(475px,70%,600px);padding:45px}h4{margin:30px 0}.home-button{margin:15px}}.login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--charcoal);height:100%;width:100%}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white)}.login-input{display:flex;align-items:center;text-align:left;width:450px;margin:10px}label{width:100px;padding:10px}input{all:unset;display:flex;width:350px;height:10px;padding:10px;font-size:body;border-radius:2px;border:1px solid var(--grey);background-color:var(--white);color:var(--charcoal)}input:focus{outline:5px solid var(--purple)}input::placeholder{color:var(--charcoal);font-style:italic}.submit-button{all:unset;height:30px;width:150px;color:var(--purple);background-color:var(--white);border-radius:12px;font-weight:700;margin:35px;cursor:pointer;outline:none;transition:transform .4s ease,background-color .5s ease}.submit-button:hover{color:var(--white);background-color:var(--purple)}.submit-button:active{outline:none;transform:scale(.9)}.submit-button:focus-visible{outline:5px solid var(--purple)}a{color:var(--white)}a:hover{color:var(--purple)}a:focus{outline:3px solid var(--purple)}#sumo-sim{width:100%;height:20em;overflow:hidden;position:relative}.sumo-iframe{width:100%;height:100%;border:none}.expand-btn{position:absolute;top:10px;right:10px;padding:10px 10px 6px;margin:0;background-color:var(--lavender);color:var(--dark-purple);border-radius:8px;z-index:10;transition:background-color .2s ease}.expand-btn:hover{background-color:#b395b2cc}.toolbar{width:25%;height:100%;background-color:#500866;opacity:1;background:linear-gradient(135deg,#3d054e55 25%,transparent 25%) -40px 0/ 80px 80px,linear-gradient(225deg,#3d054e 25%,transparent 25%) -40px 0/ 80px 80px,linear-gradient(315deg,#3d054e55 25%,transparent 25%) 0px 0/ 80px 80px,linear-gradient(45deg,#3d054e 25%,#500866 25%) 0px 0/ 80px 80px;position:fixed;left:0;padding:60px 20px 20px;color:#fff;z-index:.9;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:3px 0 10px #0000004d;transition:left .5s ease}.toolbar.collapsed{left:-38%}#toggle-drawer{background-color:var(--purple);color:var(--white);height:28px;width:28px;font-size:16px;margin:8px;border-radius:8px;border:none;cursor:pointer;font-weight:700;position:absolute;top:0;left:0;z-index:1;transition:background-color .2s ease,transform .2s ease}#toggle-drawer:focus-visible{outline:3px solid var(--light-purple)}#toggle-drawer:hover{background-color:#500066cc}#toggle-drawer:active{outline:none;transform:scale(.9)}.drawer-link{color:var(--white);text-decoration:none;cursor:pointer;font-size:18px;text-align:center;border-radius:12px;padding:5px 10px;transition:background-color .2s ease,transform .2s ease}.drawer-link:focus-visible{outline:3px solid var(--light-purple)}.drawer-link:hover{color:var(--white);background-color:#78787840}.drawer-link:active{outline:none;transform:scale(.9)}@media (min-width: 768px) and (max-width: 1024px){#toggle-drawer{height:30px;width:30px;font-size:18px;margin:10px}.drawer-link{font-size:20px}.toolbar{width:18%}.toolbar.collapsed{left:-30%}}@media (min-width: 1025px){#toggle-drawer{height:35px;width:35px;font-size:20px;margin:12px}.drawer-link{font-size:22px}.toolbar{width:18%}.toolbar.collapsed{left:-30%}}.statistics-section{display:flex;flex-direction:column;align-items:center;gap:2rem}#total-vehicles{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;width:100%}#total-vehicles span{margin:0;text-align:center;line-height:1}.overall-stats-card{display:flex;flex-direction:column;background-color:var(--purple);border-radius:15px;color:var(--white);width:98%;padding:5px;box-shadow:0 2px 6px #00000014;gap:0rem}.stat-box-row{display:flex;flex-direction:row;padding:10px;gap:2rem}.stat-box-unit{display:flex;flex-direction:column;align-items:center;background-color:var(--white);border-radius:10px;color:#000;width:100%;box-shadow:0 2px 6px #00000014;min-height:80px;justify-content:center}.stat-box-unit body{margin-bottom:.5rem;text-align:center}.stat-box-unit h3,.stat-box-unit h4{margin:0;color:var(--charcoal)}#h4-here{margin:.2rem;color:var(--charcoal)}.bus-section{align-items:center;width:98%;display:flex;flex-direction:column;gap:1rem}.dropdown-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}.dropdown-bar{display:flex;justify-content:space-between;align-items:center;background-color:var(--light-purple);transition:background-color .2s ease;width:100%;border-radius:10px;padding:12px 20px;margin:5px 0;cursor:pointer;border:none;color:var(--white)}.dropdown-bar:hover{background-color:var(--lavender)}.dropdown-bar:focus-visible{outline:3px solid var(--purple);outline-offset:2px}.dropdown-bar a{font-size:1.2rem;font-weight:600;color:var(--white);text-decoration:underline}.dropdown-bar a:hover{opacity:.9}.bus-stats-card{display:flex;flex-direction:column;background-color:var(--light-purple);color:var(--white);width:99%;padding:5px;margin:5px 0;box-shadow:0 2px 6px #00000014;gap:0rem;border-radius:15px;overflow:hidden;animation:slideDown .3s ease-out}@keyframes slideDown{0%{max-height:0;opacity:0;transform:translateY(-10px)}to{max-height:1000px;opacity:1;transform:translateY(0)}}.material-symbols-outlined{font-size:22px;color:var(--dark-purple);transition:transform .3s ease}.dropdown-bar[aria-expanded=true] .material-symbols-outlined{transform:rotate(180deg)}.no-stats-message{font-size:1rem;color:var(--charcoal);padding:1rem;text-align:center}.sim-tools-container{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background-color:#f8f8fa;border-top:1px solid #e1e1e1;gap:1rem}.traffic-level-selector{display:flex;align-items:center;gap:.5rem;font-size:1rem}.traffic-level-selector select{padding:6px 12px;border-radius:8px;border:1px solid #ccc;background-color:#fff;font-size:.95rem;outline:none;transition:border-color .2s ease}.control-buttons{display:flex;gap:10px}.control-btn{width:42px;height:42px;border-radius:10px;border:none;background-color:var(--lavender);color:var(--light-black);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .3s ease;box-shadow:0 2px 4px #0000001a}.control-btn:hover{background-color:#b395b2cc}.control-btn:active{transform:scale(.96)}.control-btn .material-symbols-outlined{font-size:22px;font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 24}.traffic-tip{margin-top:8px;font-size:.85rem;color:#856404;background-color:#fff3cd;padding:6px 10px;border-left:4px solid #ffeeba;border-radius:4px}.page-div{background-color:var(--grey);min-height:100vh;display:flex;flex-direction:column}#main-content-dashboard{flex:1;padding:1rem 2rem;display:flex;flex-direction:column;gap:1rem}#dashboard-page{overflow-x:hidden}.sumo-section{background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column}.sumo-sim{height:70vh;width:100%;border-radius:12px 12px 0 0}.welcome-banner{font-size:30px;font-weight:600;color:var(--purple);margin-top:1rem}.sumo-fullscreen-container{width:95%;height:85vh;margin:0 auto 40px;border:1px solid #ccc;border-radius:12px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.sumo-fullscreen-iframe{width:100%;height:100%;border:none}.sumo-header-row{position:relative;width:95%;height:60px;margin:20px auto 10px}.back-button{position:absolute;left:0;top:50%;transform:translateY(-50%);padding:8px 16px;background-color:var(--lavender);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease}.back-button:hover{background-color:#9b7c9a}.sumo-header{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700}