* {
    box-sizing: border-box;
}
body {
    background-color: #ffeeff;
    color: #000066;
}
h1, h2 {
    text-align: center;
}
br {
    clear: both;
}

.condition_horizontal_display {
    display: flex;
    flex-direction: row;
}
/* Column view for small screens */
@media (max-width: 800px) {
  .condition_horizontal_display {
    flex-direction: column;
  }
}

.display, form {
    margin: 5px;
    text-align: center;
}
form {
    flex-basis: 50%;
    background-color: #bdb76b;
    padding: 15px;
    flex-grow: 1;
}
form fieldset {
    background-color: #f8de8a;
}
form legend {
    background-color: #f8caf6;
    color: #663399;
}
form#interactive_2 {
    /*position: relative;*/
}
form#interactive_2 fieldset {                
    position: relative;
}
div.arrange_in_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 2em;
}
/* Column view for small screens */
@media (max-width: 800px) {
    div.arrange_in_row {
    flex-direction: column;
  }
}
.display {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50em;
    background-color: #f8caf6;
    margin-top: 5px;
    padding-top: 5px;
}
/* Column view for small screens */
@media (max-width: 800px) {
  .display {
    display: block;
  }
}
.back_drop {
    background-color: #f8de8a;
    margin: 5px;
    padding: 5px;
    text-align: center;
    flex-grow: 4;
}
#result_answer {
}
.text {
    text-align: center;
    height: 2em;
    margin: 0;
    padding: 0;
}
.button {
    background-color: #663399;
    color: #ffff00;
    width: 120px;
    height: 40px;
    border: 2px solid rgba(219, 152, 222, 0.31);
    cursor: pointer;
}
table {
    border-right: 2px solid #000000;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
th, td {
    border-right: 2px solid #000000;
    border-collapse: collapse;
    padding: 5px;
}
form#interactive_2 table, div.proper_fraction_display table {
    display: inline-table;
    width: fit-content;
    border: none;
    border-collapse: collapse;
}
form#interactive_2 table.proper_look, div.proper_fraction_display table.proper_look {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
form#interactive_2 td.proper_look, div.proper_fraction_display td.proper_look {
    vertical-align: middle;
}
form#interactive_2 th, div.proper_fraction_display th, form#interactive_2 td, div.proper_fraction_display td {
    border: none;
    border-collapse: collapse;
    padding: 1px;
}
form#interactive_2 td.td_num, div.proper_fraction_display td.td_num {
    border-bottom: 1px solid #000000;
}
form#interactive_2 td.td_denom, div.proper_fraction_display td.td_denom {
    border-top: 1px solid #000000;
}
form#interactive_2 td.factorize, div.proper_fraction_display td.factorize {
    color: #ff0000;
    text-decoration: line-through;
}
form#interactive_2 input.whole_number {
    float: left;
    max-width: 5em;
    height: 4em;
    text-height: inherit;
}
form#interactive_2 input.numerator {
    max-width: 5em;
    height: 2em;
    border: none;
    border-bottom: 1px solid #000000;
}
form#interactive_2 input.denominator {
    max-width: 5em;
    height: 2em;
    border: none;
    border-top: 1px solid #000000;
}
.left_by_side {                
    float: left;
    clear: left;
}
.right_by_side {                
    float: left;
    clear: right;
}
.single entry {
    max-width: 2em;
}
input.coefficients {
    max-width: 5em;
}
.go_right {
    float: right;
    clear: both;
}