/*@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    src: url('./Inconsolata-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Inconsolata Bold";
    font-style: bold;
    font-weight: 700;
    src: url('./Inconsolata-Bold.ttf') format('truetype');
}*/

body {
    font-family: sans-serif;
}

div.intro {
    margin-left: 20px;
    max-width: 720px;
}

div.controls {
    margin-left: 20px;
    margin-bottom: 20px;
    height: auto;
}

div.controls p {
    font-size: 10pt;
}

#warnings {
    clear: both;
    background-color: pink;
    padding: 1em;
    display: none;
    padding-bottom: 2em;
    margin-bottom: 2em;
    margin-left: 2em;
}

div.textpane {
    float: left;
    margin-bottom: 20px;
    max-width: 300px;
}

div.textpane textarea {
    height: 480px;
    width: 300px;
}

div.controlspane {
    float: left;
    margin-left: 30px;
}

div.controlspane input, label {
    cursor: pointer;
}

input.printorder_radio {
    margin-top: 5px;
    margin-bottom: 5px;
}

div.fontcontrols {
    margin-top: 10px;
}

div.fontcontrol {
    padding-top: 5px;
}

div.fontcontrol label {
    display: inline-block;
    min-width: 150px;
}

div.controlsbuttons {
    padding-top: 20px;
    padding-bottom: 20px;
}

div.countdiv {
    clear: both;
    padding-top: 2px;
    line-height: 15px;
    height: 15px;
    font-size: 10pt;
}

div.previewpane {
}

div.controlsbuttons button {
    padding: 10px;
    font-size: 12pt;
}

div.outro {
    clear: both;
    font-size: 10pt;
    padding-left: 20px;
    max-width: 720px;
    color: gray;
}

div.cutline {
    clear: both;
    border-bottom: 1px dashed gray;
    color: gray;
    font-size: 10pt;
    padding-left: 20px;
}

div.scramblerowgroup {
    page-break-after: always;
    color: black;
    font-size: 36pt;
    font-family: "Inconsolata Bold", monospace;
}
    
div.answerrowgroup {
    page-break-after: always;
    color: silver;
    font-size: 8pt;
    font-family: sans-serif;
}

div.conundrumrow {
    max-width: 180mm;
    height: 24mm;
    clear: both;
}

div.conundrumcell {
    float: left;
    width: 89mm;
    height: 24mm;
    line-height: 24mm;
    text-align: center;
    margin: auto;
}

div.conundrumcellfullwidth {
    width: 179mm;
}

div.conundrumcellwithspaceforanswer {
    float: left;
    width: 73mm;
    height: 24mm;
    line-height: 24mm;
    text-align: center;
    margin: auto;
    border-top: 0.5mm solid gray;
    border-left: 0.5mm solid gray;
    border-bottom: 0.5mm solid gray;
}

div.conundrumcellwithspaceforanswerfullwidth {
    width: 163mm;
}

div.tearoffanswercell {
    float: left;
    width: 15mm;
    height: 24mm;
    line-height: 15mm;
    text-align: center;
    margin: auto;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: normal;
    color: black;
    font-weight: normal;
    border-top: 0.5mm solid gray;
    border-right: 0.5mm solid gray;
    border-bottom: 0.5mm solid gray;
    border-left: 0.5mm dashed gray;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

div.wordcontainer {
    margin: auto;
}

span.fwletter {
    display: inline-block;
    min-width: 0.8em;
    text-align: center;
}

div.scramblecell {
    border: 0.5mm solid gray;
}

div.answercell {
    border: 0.5mm solid transparent;
}