@font-face {
    font-family: 'hack-regular';
    src: url('../res/fonts/Hack-Regular.ttf') format('truetype');
}

:root {
    --top-height: 63px;
}
html,
body {
    height: 100%;
}
body {
    font-size: 0.875rem;
}
#main {
    height: calc(100% - var(--top-height));
}

#log-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 0;
}
#serial-logs {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: 'hack-regular';
}
#serial-options,
#serial-tools {
    position: relative;
}
.toggle-button {
    align-items: center;
    background: none;
    border: 0;
    display: flex;
    flex: none;
    font-size: 20px;
    height: 100%;
    justify-content: center;
    width: 20px;
    z-index: 1;
    background-color: #f8f9fa;
}
.toggle-button:hover {
    background: rgba(228, 231, 242, 0.4);
}

#serial-tools {
    height: 100%;
}
#nav-tabContent {
    overflow: hidden;
}
#serial-tools .collapse.show,
#nav-quick-send.show {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.msg-RX {
    color: #000;
}
.msg-TX {
    color: #888;
}

/* 隐藏输入框上下箭头 */
#serial-baud::-webkit-inner-spin-button,
#serial-baud::-webkit-outer-spin-button,
#serial-buffer-size::-webkit-inner-spin-button,
#serial-buffer-size::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 兼容Firefox */
#serial-baud[type=number],
#serial-buffer-size[type=number] {
    -moz-appearance: textfield;
}