canvas{background-color:#fff;border:2px solid #ddd;max-width:100%;height:auto;margin:10px auto;display:block}#optionBox{background:#fffffff2;border-radius:6px;justify-content:center;gap:15px;max-width:400px;margin:10px auto;padding:10px;display:flex;box-shadow:0 2px 5px #0003}#optionBox input{margin-right:5px}#infoBox{color:#000;text-align:center;opacity:0;background:#c5e2ffe6;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:300px;height:120px;padding:15px;font-size:16px;font-weight:700;position:fixed;bottom:20px;left:20px;overflow:hidden;box-shadow:0 4px 10px #0000004d}#infoBox:empty{display:none}#infoBox:not(:empty){opacity:1;display:flex}#controlsContainer{flex-direction:column;justify-content:center;align-items:center;margin-top:10px;display:flex}#controls{background:#fffffff2;border-radius:8px;flex-direction:column;align-items:center;gap:15px;width:90%;max-width:800px;padding:15px;box-shadow:0 2px 10px #0003}.routeText{color:#333;margin-bottom:5px;font-weight:700}select{border:1px solid #ccc;border-radius:5px;width:100%;padding:8px;font-size:16px}input[type=button],button{cursor:pointer;border:none;border-radius:5px;width:100%;padding:10px;font-size:16px}#btnSelectS,#btnSelectG{color:#fff;background-color:#5bc0de;margin:10px}#btnSelectS:hover,#btnSelectG:hover{background-color:#31b0d5;margin:10px}#clearAll{color:#fff;background-color:#d9534f}#clearAll:hover{background-color:#c9302c}#btnSearch{color:#fff;background-color:#ff8c00}#btnSearch:hover{background-color:#e07b00}#howTo{width:100%;margin:10px auto;display:block}#GoogleMap{border:#828282;margin:20px}