body { background-color: #2E2E2E; color: #E0E0E0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } h1 { text-align: center; font-size: 2vw; } .global-cont { position: absolute; top: 0%; height: 100%; width: 67%; left: 1%; justify-content: center; align-items: center; } .nc-fields{ position: relative; width: 90%; left: 0%; top: 3%; background-color: #1E1E1E; padding: 3%; border-radius: 8px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0px 0.5vw 1vw #1f1f1f; } .container { position: relative; width: 90%; left: 0%; top: 10%; background-color: #1E1E1E; padding: 3%; border-radius: 8px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0px 0.5vw 1vw #1f1f1f; } .input-group { display: flex; gap: 10px; width: 100%; } input[type="text"], input[type="number"] { background-color: #333; /* border: 1px solid #555; */ color: #E0E0E0; padding: 8px; border-radius: 4px; flex: 1; /* width: 30%; */ } button { background-color: #555; color: #E0E0E0; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; width: 30%; } button:hover { background-color: #777; } .checkbox-group, .radio-group { display: flex; gap: 15px; align-items: center; } .log { position: absolute; right: 0; top: 3%; background-color: #111; height: 90vh; max-height: 90vh; width: 30%; border-radius: 4px; padding: 10px; overflow-y: scroll; color: green; font-size: 1.4vw; padding: 2%; padding-top: 2%; box-shadow: 0px 0.5vw 1vw #1f1f1f; } .ipaddr { width: 80%; max-width: 80%; } .port { width: 15%; max-width: 15%; } .btn-pldconn .btn-plddatawr { width: 15%; max-width: 15%; font-size: 1.4vw; text-align: center; } .reg-data { width: 80%; max-width: 80%; } .reg-addr { width: 15%; max-width: 15%; } p{ display: inline-block; } .invalid-args { border: 1px solid rgb(110, 0, 0); } .valid-args { border: 1px solid #555; }