body { font-size: 12px; font-family: 'Verdana'; }
pre { white-space: pre-wrap; word-wrap: break-word; }

.icon { width: 32px; height: 32px; }
.icon-small { width: 16px; height: 16px; }
.icon-big { width: 32px; height: 32px; }
.sign { color: white; background-color: cornflowerblue; padding: 5px; margin: 5px; }
.warning { color: gold; background-color: black; padding: 5px; margin: 5px; }
.title-input { width: 500px; padding: 5px; font-weight: bold; }
.title-output { color: yellowgreen; padding: 5px; }
.horizontal { display: inline-block; }
.true { color: lime; }
.false { color: lightcoral; }
.wide-out { width: 95vw; }
.wide-in { width: 47vw; }
.tall-in { height: 20vh; }
.medium-in { width: 80vw; }
.align-left { float: left; }
.align-right { float: right; }
.align-words { word-wrap: break-word; }
.align-sides { display: flex; justify-content: space-between; }
.code-box { resize: none; font-family: 'Courier New'; }
.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }
.button-menu { cursor: pointer; font-size: 100%; font-weight: bold; padding: 5px; color: #FFFFFF; background-color: #00AA22; text-decoration: none; border: 1px solid gray; }
.button-menu:hover { cursor: pointer; background-color: #00CC00; }
.button-action { cursor: pointer; font-size: 100%; font-weight: bold; padding: 5px; color: #FFFFFF; background-color: #0000E6; text-decoration: none; border: 1px solid gray; }
.button-action:hover { cursor: pointer; background-color: #00CCE6; }
.button-tab { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; }
.button-tab:hover { background-color: #ddd; }