body,html{margin:0;padding:0;height:100%}#root{display:flex;flex-direction:column}.container{display:flex;flex-grow:1;justify-content:space-between;padding:20px}.content{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.osi-visualization{max-width:100vw;height:90vh;margin:auto;display:flex;justify-content:space-between;grid-gap:20px;gap:20px;padding:20px}.osi-layer-btn{width:200px;padding:10px;border:1px solid #ccc;text-align:left;cursor:pointer}.osi-layer-btn:hover{background-color:#e6f7ff}.osi-layer-info{position:absolute;background-color:#fff;border:1px solid #ddd;padding:10px;box-shadow:0 2px 4px rgba(0,0,0,.1);width:250px;z-index:10}.osi-container{grid-template-columns:1fr 2fr 1fr;align-items:center;display:grid;grid-template-columns:1.2fr 2fr 1.2fr;height:100vh;grid-gap:10px;gap:10px;padding:10px}.osi-column{text-align:center;padding:5px;border-right:1px solid #ddd}.osi-layer-button{display:flex;align-items:center;justify-content:center;margin:5px auto;padding:5px 10px;font-size:14px;border-radius:8px;background-color:#fff;border:1px solid #ccc;cursor:pointer}.build-up-container{padding:10px;border-radius:10px}.build-up-packet-box{width:50px;height:30px;font-size:12px;display:flex;align-items:center;justify-content:center;border-radius:5px;margin:5px auto}.packet-log-container{padding:5px}.packet-log li{font-size:12px;margin:5px 0}.osi-button{margin:5px;padding:6px 12px;font-size:12px;border:none;border-radius:5px;background-color:#007bff;color:#fff;cursor:pointer}.clear-log-button{padding:5px 10px;font-size:12px}.build-up-container{text-align:center;background:#f8f9fa;padding:15px}.packet-log-container{border:2px solid #a8dadc;background-color:#fff;padding:10px;overflow-y:auto;max-height:90vh}.log-header{display:flex;justify-content:space-between;align-items:center;grid-gap:10px;gap:10px;margin-bottom:10px}.clear-log-button{padding:8px 12px;font-size:14px;background-color:#e63946;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.clear-log-button:hover{background-color:#c92a2a}.packet-log{list-style:none;padding:0;margin:0}.latest-log{color:#e63946;font-weight:700;background:#f1faee}.receive-button,.send-button{padding:5px 10px;background-color:#007bff;color:#fff;border:none;border-radius:5px;font-size:12px;cursor:pointer;transition:background-color .3s ease}.receive-button:hover,.send-button:hover{background-color:#0056b3}.buttons{display:flex;align-items:center;justify-content:center;grid-gap:10px;gap:10px;margin-top:10px}input[type=range]{margin-left:10px}.log-search{width:200px;padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:5px;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:border-color .2s ease-in-out}.log-search:focus{border-color:#007bff;outline:none;box-shadow:0 0 5px rgba(0,123,255,.5)}#root{margin:0;padding:0;width:100%;height:100%}
/*# sourceMappingURL=main.32e62b57.chunk.css.map */