body {
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 1em;
}

instructions-grouping button span {
    display: block;
}

instructions-grouping button span:first-child {
    display: inline;
}

.palettes {
    background-color: lightgoldenrodyellow;
}
.grid {
    display: inline-grid;
    margin-left: .5em;
    margin-right: .5em;
    grid-gap: 1px;
    align-items: center;
    justify-items: center;
}

#lc-letters, #uc-letters, #digits {
    grid-template-columns: repeat(5, auto);
}

#symbols, #symbols-test {
    grid-template-columns: repeat(4, auto);
}

.button {
    width: auto;
    font-family: sans-serif, Arial;
    text-align: center;
    border-radius: 4px;
    background-color: #ffd;
    transition-duration: 500ms;
    transition-property: border;
}
.button:hover {
    box-shadow: 3px 3px #85b9f5;
    background-color: #ffa;
}

.palettes .button {
    width: 2em;
}

.larger .button {
    font-size:130%;
}

.inputLine {
    padding-bottom: 1em;
}
#current-rule {
    padding-bottom: 1em;
    padding-left: 10em;
    font-weight: bold;
}

:disabled {
    background: #bbb;
}
colored-edit-area {
    display: inline-block;
    font-size: 130%;
    background-color: white;
    border: 2px solid rgb(101, 133, 221);
    padding: .2ex;
    width: 1em;
    white-space: nowrap;
}

#edit-input{
    width: 6em;
}
.test-input, #test-input {
    padding: .4em;
    width: 25em
}

#refresh {
    font-family:Arial, Helvetica, sans-serif;
    font-size:larger;
    border-radius: 5px;
    background-color: rgb(250, 230, 230) 5px solid #e7e7e7;
    margin-left: 1em;
    width: 300px;
}

#char-table {
margin-top: 4ex;

}
#char-table td, #char-table th{
text-align: center;
padding-left: 1em;
padding-right: 1em;
}

#buttons input {
    margin: 10px;
}

.action-area {
    background-color: lightblue;
}


/* styles for the open close match area */
#match-area-title {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    margin-top: .5ex;
    margin-bottom: 2ex;
}

.match-area {
    display: inline-flex;
    margin-top: 1em;
    margin-bottom: 1em;
}

.match-area.collapsed {
    margin-top: 0em;
    margin-bottom: 0em;
}

.rule-and-buttons-area {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    justify-items: flex-end;
    background-color: #ffd;
}

.rule-buttons-area {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: flex-end;
    margin-top: 0.5em;
}

.rule-label {
    justify-self: center;
}

.match-delete-rule {
    justify-self: left;
}

.match-add-rule {
    justify-self: left;
}

.match-vertical-divider1, .match-vertical-divider2 {
    height: 4em;
    width: 0em;
    margin-left: 1em;
    margin-right: 1em;
    border-left: 2px solid black;
}

.collapsed .match-vertical-divider1, .collapsed  .match-vertical-divider2 {
    height: 2em;
    border-left: 2px solid #777;
}

.match-area-test {
    font-size: 130%;
    border: none;
    margin-left: 0em;
    margin-right: 0em;
    width: 10.5em;      /* need to set width so that rules with/without borders have the same width */
}

.match-settings-area {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    margin-left: .5em;
    margin-right: .5em;
}

.match-settings-labels {
    display: inline-flex
}

.match-settings-values {
    display: inline-flex;
    justify-content: center;
    width:auto;
}

.match-paren-label, .match-contents-label, .match-border-label {
    display: inline-block;
    padding: 7px 4px;
    background-color: #ffd;
    font-family: sans-serif, Arial;
    border: 1px solid #444;
    transition-duration: 100ms;
    transition-property: background-color;
        font-weight: bold;
    justify-self: center;
    text-align: center;
    width: 10em;
}

.match-contents-label {
    border-left-width: 0em;
    border-right-width: 0em;
}

.match-paren-group, .match-contents-group, .match-border-group {
    display: none;
    justify-self: left;
    margin-left: 0em;
    width: 34em;
}

.match-settings-spacer {
    height: 0.8em;
}

.match-paren-label:hover, .match-contents-label:hover, .match-border-label:hover {
    background-color: #fff;
}

/* make the circle "button" disappear -- can't use display:none because then you can't keyboard tab to them */
.match-area input[type="radio"] {
    opacity: 0;
    position: fixed;
    height: 0;
    width: 0;
  }

.match-parens-include, .include-try-it {
    background-color: #ffd;
    height: 1.5em;
    width: 1.5em;
}

.match-parens-include:hover, .include-try-it:hover {
    box-shadow: 3px 3px #85b9f5;
    background-color: #ffa;
}

.match-border {
    justify-self: left;
    margin-left: 1em;
    padding: 1px;
    border: thin dotted gray;
}

.match-paren-bg-label, .border-thickness-label, .border-color-label{
    margin-left: 1em;
}

.match-parens-include-label {
    margin-left: 2em;
}

.include-try-it-label {
    margin-left: 2em;
    margin-top: 0em;
}

.match-area-hr {
    height: 1px;
    background-color: black;
}

.rule-area {
    display: inline-grid;
    grid-row-gap:.5em;
    align-items: center;
    justify-items: center;
    margin-left: .5em;
    margin-right: .5em;
    grid-gap: .2em;
}

.rule-area button {
    font-size: 12pt;
}

#rule-list-input {
    border: 2px solid orange;
    border-radius: 8px;
    padding: 5px;
    height: 1.2em;
    width: 15em;
  }

#removeAllRules {
    margin-top: 1em;
    background-color: salmon;
}

/* some styles for hiding/revealing content */
.accordion {
  background-color: #ffd;
  cursor: pointer;
  padding: 2px;
  border: none;
  border-radius: 8px;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #ffa;
}

.accordion:before {
  content: '\25B6';
  font-size: 1.5em;
  color: #777;
  font-weight: bold;
  margin-right: 5px;
}

.active:before {
    content: "\25BC";
}

.hidden {
    width: 0;
    height: 0;
    opacity: 0;
}