body{
    text-align:center;
    background-color: peachpuff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
}
h1{
    color:darkcyan;
}
p{
    line-height: 1.3;
}
.form-style-9{
    /* widened from 752px so the Duration/Strength columns (Long, Strong) are not clipped */
    max-width: 820px;
    background: #FAFAFA;
    padding: 20px;
    margin: 30px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
    box-sizing: border-box;
}
.hidden_form{
    max-width: 700px;
    background: #FAFAFA;
    padding: 20px;
    margin: 30px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
    display: none;
}
.wide-panel{
    max-width: 1000px;
    background: #FAFAFA;
    padding: 20px;
    margin: 20px auto 30px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
    box-sizing: border-box;
}
#f0_window{
    /* wide enough to fit the 1000px-wide Plotly chart plus this panel's own padding/border */
    max-width: 1060px;
    margin-bottom: 0;
}
.panels-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    max-width: 1860px;
    margin: 16px auto 30px auto;
}
.panels-row .form-style-9,
.panels-row .wide-panel{
    margin: 0;
    flex: 0 1 auto;
}
fieldset{
    /* fieldsets have a browser-default min-width based on their content, which
       overrides overflow:auto on a child and pushes the whole box wider than its
       container. Reset it so the syllable table's horizontal scroll actually works. */
    min-width: 0;
}
.legend{
    font-weight: bold;
    color: #305A72;
}
.greyBackground{
    background-color:#CCC;
}
.noBorder{
    border:0;
    background-color:#CCC;
}
table{
    width: 100%;
}
th{
    text-align: center;
}
input[type=text]{
    padding:3px;
    border:2px solid #9AA5D3;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
button{
    background-color:#9AA5D3;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 10px 24px;
}
.center {
    margin: auto;
    width: 1000px;
}
.box {
    border: 4px solid #305A72;
    background-color: #FAFAFA;
    padding: 10px;
    text-align: left;
    margin: auto;
    border-radius: 6px;
    width: 60%;
}
.hint {
    font-size: 16px;
    text-align: left;
    margin: 4px 6px 10px 6px;
    color: #333;
}
.tier-empty {
    font-size: 16px;
    text-align: left;
    margin: 4px 6px;
    color: #555;
}
.tier-row {
    text-align: left;
    background: #FAFAFA;
    border: 1px solid #b7c0d8;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 4px 0;
}
.tier-row label {
    margin-right: 14px;
    font-size: 16px;
}
.syl-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    margin: 0 auto 8px auto;
}
.syl-table {
    border-collapse: collapse;
    margin: 0 auto 8px auto;
}
.syl-table th, .syl-table td {
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}
.syl-table thead tr {
    background: #b7c0d8;
}
.syl-table tbody tr:nth-child(even) {
    background: #ececec;
}
.syl-table th.row-label {
    text-align: right;
    background: #dfe3f0;
    font-weight: bold;
    white-space: nowrap;
}
.remove-btn {
    padding: 3px 8px;
    font-size: 16px;
}
.bounds-notice {
    font-size: 16px;
    text-align: left;
    margin: 8px 6px 0 6px;
    color: #a1520a;
    min-height: 1em;
}