#beaufort_parameters {
    display: block;
    flex-grow: 1;
    background: #666c4f;
    padding: 6px 20px 16px 18px;
    border-radius: 4px;
}

#reset_parameters {
    display: block;
    height: 10px;
    text-align: right;
    font-size: 11px;
    font-weight: normal;
    padding-top: 2px;
    margin-right: -14px;
    color: #b0b890;
    cursor: pointer;
}

#beaufort_controls {
    text-align: right;
    float: right;
}

#beaufort_controls input[type="button"] {
    margin: 5px 0 5px 5px;
    color: #946d46;
    background: #fff6ce;
    font-weight: bold;
    border: 1px solid #946d46;
    border-radius: 2px;
    width: 80px;
}

#beaufort_controls input[type="button"]:hover {
    background: #fffade;
}

#beaufort_controls input[type="button"]:active {
    background: #ffedbb;
}

#beaufort_output {
    display: flex;
    height: 45px;
    line-height: 45px;  /* vertically center text */
    margin: 1.2em -5px;
    padding: 0 2ch;
    color: #946d46;
    background: #fff6ce;
    -webkit-clip-path: polygon(3% 0, 7% 0, 11% 0%, 16% 1%, 20% 0, 23% 1%, 28% 1%, 32% 0, 35% 1%, 39% 1%, 41% 0, 45% 0, 47% 0, 50% 1%, 53% 0, 58% 1%, 60% 1%, 63% 0, 65% 0, 67% 1%, 69% 1%, 73% 0, 76% 0, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
    clip-path: polygon(3% 0, 7% 0, 11% 0%, 16% 1%, 20% 0, 23% 1%, 28% 1%, 32% 0, 35% 1%, 39% 1%, 41% 0, 45% 0, 47% 0, 50% 1%, 53% 0, 58% 1%, 60% 1%, 63% 0, 65% 0, 67% 1%, 69% 1%, 73% 0, 76% 0, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
}

#output_text {
    flex-grow: 1;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
    margin-right: 1ch;
    font-family: 'Overpass Mono', monospace;
    font-size: 15px;
    font-weight: bold;
}

#output_text .beaufort_info {
    color: #dac8a0;
}

#output_text .beaufort_error {
    color: #ea282e;
}

.beaufort_parameter {
    display: flex;
    align-items: center;
}

.beaufort_parameter label {
    display: inline-block;
    margin-right: 10px;
    width: 9ch;
    font-family: 'Overpass Mono', monospace;
    font-size: 14px;
    font-weight: bold;
}

.beaufort_parameter input {
    display: inline-block;
    flex-grow: 1;
    margin: 4px 0;
    font-family: 'Overpass Mono', monospace;
    font-size: 13px;
    padding: 2px 6px;
    border: none;
    border-radius: 2px;
    width: 10ch;  /* minimum, stretched by flex-grow */
    background: ivory;
}

.beaufort_example {
    text-overflow: ellipsis;
    overflow: hidden;
}