body {
    font-family: "Verdana", sans-serif;
    padding: 5px 20px;
    background-color: #fee;
}

.title {
    height: 50px;
    vertical-align: top;
    margin-bottom: 20px;
}

.title img {
    height: 100%;
    object-fit: scale-down;
    display: inline-block;
}

.title h1 {
    display: inline-block;
    height: 100%;
    margin: auto 20px;
    padding: 0;
}


.type {
    display: inline-block;
    height: 20px;
    width: 80px;
    text-align: center;
}

.type_excluded {
    border: 3px solid black;
    background-color: #444;
    color: lightgray;
    text-decoration: line-through;
}

#input_table {
    border: 1px solid darkgray;
    border-radius: 8px;
    padding: 15px;
    background-color: #ffe;
    margin-top: 20px;
}

tr {
    vertical-align: middle;
}

.pok_input {
    background-color: white;
    border: 4px solid black;
    color: black;
    margin: 5px 2px;
    height: 22px;
    padding: 3px 10px;
}

.pending_pok_input {
    border: 1px solid black;
    margin: 8px 5px;
}

.guess_button {
    margin: 0 5px;
    height: 30px;
    width: 80px;
}

.message_area {
    height: 40px;
    margin: 15px;
}

#type_pairing_table {
    margin: 15px;
    width: 100%;
}

#type_pairing_table td {
    vertical-align: top;
}

#type_pairing_table .heading {
    font-weight: bold;
    font-size: 1.5em;
}

#confirmed_column {
    width: 300px;
}

#type_pairing_table .type {
    display: inline-block;
}

.typing_pair {
    margin: 8px 30px 8px 0;
}

#confirmed_column .typing_pair {
    display: block;
}

#eliminated_column .typing_pair {
    display: inline-block;
}




.exact_match {
    background-color: green;
    border: 4px solid green;
    color: white;
}

.exact_misaligned_and_partial_match {
    background-color: gold;
    color: black;
    border: 4px solid green;
}

.exact_misaligned {
    background-color: gold;
    border: 4px solid gold;
    color: black;
}

.partial_match {
    background-color: white;
    border: 4px solid green;
    color: black;
}

.partial_misaligned {
    background-color: white;
    border: 4px solid gold;
    color: black;
}

.no_match {
    background-color: grey;
    border: 4px solid black;
    color: white;
}

.invalid_guess {
    background-color: #fdd;
    border: 4px solid darkred;
    color: black;
}

.shaker {
    -webkit-animation: shake 0.5s infinite;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.sample_box {
    width: 12px;
    height: 12px;
    margin-right: 15px;
    margin-top: 5px;
    display: inline-block;
    vertical-align: center;
}

#info_dialog li {
    margin: auto 0;
}

#info_button {
    vertical-align: bottom;
}