body { background-color: LightCyan; } .title_disconnected { color: red; } .title_connected { color: green; } input, label, button, select { font-family: sans-serif; font-size: 10px; height: 20px; } div { /*border: 1px solid black; */ background-color: LightSteelBlue; } div p { font-family: sans-serif; font-size: 12px; margin-top: 2px; margin-bottom: 2px; background-color: LightSteelBlue; } label { /*border: 1px solid red;*/ width: 50px; padding-left: 10px; margin-top: 3px; } .uiCtlDiv { display: flex; flex-direction: row; align-items: center; background-color: LightBlue; } .uiCtlDiv input { background-color: PowderBlue; } .uiNumberDiv input { width: 50px; } .uiPanel { background-color: LightBlue; } .uiRow { display: flex; flex-direction: row; align-items: center; background-color: LightBlue; } .uiCol { display: flex; flex-direction: column; align-items: center; background-color: LightBlue; } /* outer log div - contains the log label and the log scroller */ .uiLogDiv { display: flex; flex-direction: column; align-items: flex-start; /* left justify */ align-content: flex-stretch; /* fill horizontal space */ } .uiLogDiv label { width: 100%; background-color: LightSteelBlue; } /* log scroller */ .uiLog { display:flex; flex-direction: column; height: 150px; overflow-x: hidden; /* 'hidden' to remove x scroll bar */ overflow-y: auto; width: 100%; background-color: PowderBlue; } /* The log text */ .uiLog pre { } /* outer list div - contains the list label and the list scroller */ .uiListDiv { display: flex; flex-direction: column; align-items: flex-start; /* left justify */ align-content: flex-stretch; /* fill horizontal space */ } .uiListDiv label { width: 100%; background-color: LightSteelBlue; } .uiList { display:flex; flex-direction: column; height: 100px; overflow-x: hidden; /* 'hidden' to remove scroll bar */ overflow-y: auto; width: 100%; background-color: PowderBlue; }