body { font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; margin-top: 0px; margin-left: 0px; margin-right: 0px;
    background: white }
body.editor { touch-action: manipulation }
table { border-collapse: collapse; }
table td { padding: 0px }
button::-moz-focus-inner, input[type=button]::-moz-focus-inner { border: medium none; padding: 0; }
/* remove Firefox's default unremovable padding on buttons */

h1, h2 { color: #EF5733; }
body.editor h1 { font-size: 24px; margin-top: 0.2em; margin-bottom: 0.9em; }
body.text h1 { font-size: 28px; font-weight: bold; margin-top: 0.7em; margin-bottom: 0.7em; }
h1 span.sub { vertical-align: 45%; font-family: georgia, serif; font-weight: normal; font-size: 14px; font-style: italic; color: #888; }

#middle a:link, #middle a:visited, #intro a:link, #intro a:visited, div.box a:link, div.box a:visited, #footer a:link, #footer a:visited {
    color: #555; text-decoration: none; border-bottom: dotted 1px #555
}
a.link { color: #666; text-decoration: none; }
span.icon { display: inline-block; background-repeat: no-repeat; }
a.link.container, #middle a.link.container { border-bottom: none }

.nav-column a:link { color: #666; text-decoration: none; border-bottom: none }
.nav-column a:visited { color: #666; text-decoration: none; border-bottom: none }
.nav-column a:hover { text-decoration: underline; border-bottom: none }

span.new { font-size: 65%; color: #EF5733; }
ul { margin: 0.75em 0em 0.75em 0em; padding: 0 0 0 1.2em; }
ol { margin: 0.75em 0em 0.75em 0em; padding: 0 0 0 1.5em; }
li { margin: 0 0 0.75em 0; }

div.sidenote { float: right; margin: 0 0 1.5em 1.5em; width: 220px; max-width: 40%; padding: 1em; border-left: solid 2px silver; color: #555; }

ul.footnotes { list-style-type: none; font-size: 12px; margin: 0; padding: 0; }
ul.footnotes > li { margin: 0.5em 0 0.5em 1.65em; }
ul.footnotes > li > span.marker { float: left; width: 1.5em; text-align: right; margin-left: -2em; margin-right: 0.15em; }

#center { margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px }
body.w200 #center { max-width: 1115px; /*max-width: 1050px;*/ }
body.w250 #center { max-width: 1165px; /*max-width: 1100px;*/ }
body.w300 #center { max-width: 1215px; /*max-width: 1100px;*/ }

div#top-panel { background: #EF5733; padding: 6px; text-align: center; }
#layout { display: flex; flex-wrap: wrap; width: 100%;
    margin: 11px auto auto auto; }
#layout > div { padding: 0px; }
#layout > #left { flex: 0 0 250px; /* cannot use flex-grow: 0 -- need it to grow when wrapped to its own line */
    order: 1; padding-left: 10px; padding-right: 30px;
}
body.w200 #layout > #left { flex: 0 0 200px; }
body.w300 #layout > #left { flex: 0 0 300px; }
#layout > #middle { flex: 9999 1 612px; order: 2; }
#layout > #right { flex: 1 0 100px; order: 3; padding-left: 26px; padding-right: 2px }
#middle-container { /* h1, toolbars and textbox */
    display: flex; flex-direction: column;
    min-height: calc(100vh - 80px); /* has to be min-height, not height, because for short windows, we want to allow
        the textbox and toolbars to spill out of the viewport;  this declaration is overridden for IE, iOS, < 701px */
}
#textbox-and-buttons-container {
    display: flex; flex-direction: column; flex-grow: 1;
    min-height: 305px;
}
 
body.text #layout { max-width: 980px; }
body.text #layout > #left { flex: 1 0 105px; padding-left: 22px; padding-right: 22px; }
body.text #layout > #right { flex: 9999 0 320px; padding-right: 30px; text-align: left; font-size: 14px; line-height: 1.40; }
div#maintext h2 { font-size: 18px; font-weight: bold; margin-top: 1.5em; margin-bottom: 0.7em; }
div#maintext h2.num { text-indent: -1.1em; margin-left: 1.1em; }
div#maintext p { margin-bottom: 0.7em; }
div#maintext a:link, .moreinf a:link { color: #666; }
div#maintext a:visited, .moreinf a:visited { color: #666; }
div#maintext > p, div#maintext > ol, div#maintext > ul, div#maintext > h1, div#maintext > h2, div#maintext > h3 { max-width: 500px; }

[id^=typeit_toolbar] { box-sizing: border-box; -moz-box-sizing: border-box; visibility: hidden;
    user-select: none; -moz-user-select: none; -webkit-user-select: none; cursor: default; }
#typeit_buttons { margin-bottom: 4px; }

/* NEW FLEX INSTEAD OF TABLE LAYOUT */
#typeit_toolbar_char { display: flex; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }

#toolbar-tip { font-size: 11px; color: #888 }
#toolbar-tip.top { margin-top: -5px; margin-bottom: 4px; }
#toolbar-tip.side {  flex: 1 1 5.5em; /* 5.5em is minimum size, ensures linebreaks in the tip to make space for buttons */
    margin: 0 0 6px 9px; line-height: 15px; }
#toolbar-tip .important-tip, #toolbar-tip .important-tip > kbd { color: #ef5733; border-color: #ef5733; }    

/* #layout div#tip { margin-top: 10px; margin-bottom: -4px } */
/* #toolbar-tip .kbdhelp img { vertical-align: bottom; width: 15px; height: 12px; margin-right: 5px } */

/* #typeit_buttons { margin-top: 10px; } */
.tiny-screen { display: none; }
#typeit_buttons.standard { display: flex; flex-wrap: wrap-reverse; }
[id^=typeit_toolbar] button { padding: 0; margin-left: 0px; margin-bottom: 3px; vertical-align: middle; text-align: center;
    -webkit-appearance: none; appearance: none; font-size: 13px; border-radius: 2px; border-style: solid; border-color: #999; border-width: 1px;
    background-color: #eaeaea;
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#f0f0f0 40%,#e6e6e6 60%,#e6e6e6 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 40%, #e6e6e6 60%, #e6e6e6 100%);
    box-sizing: border-box;
}
[id^=typeit_toolbar] button:hover, [id^=typeit_toolbar] button:focus {
    border-color: #58A7B7;
    background-color: #f2f2f2;
    background: -webkit-linear-gradient(top, #F7F7F7 0%, #F7F7F7 40%, #EFEFEF 60%, #EFEFEF 100%);
    background: linear-gradient(to bottom, #F7F7F7 0%, #F7F7F7 40%, #EFEFEF 60%, #EFEFEF 100%);
}
[id^=typeit_toolbar] button:active {
    box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.2);
    background-color: #dfdfdf;
    background: -webkit-linear-gradient(top, #EBEBEB 0%, #EBEBEB 46%, #DFDFDF 66%, #DFDFDF 100%);
    background: linear-gradient(to bottom, #EBEBEB 0%, #EBEBEB 46%, #DFDFDF 66%, #DFDFDF 100%);
    color: inherit; /* prevent Safari white text on active button */
}

#typeit_buttons button { font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", sans-serif;
    font-size: 16px; line-height: 29px; width: 33px; height: 29px; margin-right: 3px; color: #000; }
#typeit_buttons button.narrow { width: 29px; }
#typeit_buttons button.narrower { width: 24px; margin-right: 1px; opacity: 1; color: #555 }
#typeit_buttons button.diacritic { font-size: 19px; font-family: -apple-system, "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", sans-serif; }
#typeit_buttons button > svg { width: auto; height: 21px; vertical-align: -4px; }
#typeit_buttons button > svg.dotted-circle { width: auto; height: 17px; vertical-align: -1px; }

#typeit_toolbar_edit button, #typeit_toolbar_edit a.toolbar-extra-link { height: 23px; width: auto; padding: 0px 4px; margin-right: 0px;
    font-family: times, serif; font-weight: normal; font-size: 13px; line-height: 21px; color: #333; }
#typeit_toolbar_edit a.toolbar-extra-link { box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: center;
    padding: 0px 6px; background: none; border: solid 1px #999; border-radius: 2px; color: #555; text-decoration: none; margin-bottom: 3px; }
#typeit_toolbar_edit a.toolbar-extra-link > span.icon { color: #888; margin-left: -1px; }
#typeit_toolbar_edit a.toolbar-extra-link:hover { background-color: #f3f3f3 }
#typeit_toolbar_edit button sub { vertical-align: -10%; font-size: 75% }

.typeit-capslock > .icon {
    /* source: Shift Arrow Black.svg
    <svg xmlns="http://www.w3.org/2000/svg" width="793.7" height="1122.5" viewBox="0 0 210 297"><path d="M9.3 41V20H0L20 0 39.7 20h-9.3V41H9.3" style="fill:#000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.32292;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg>
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath d='M9.3 41V20H0L20 0 39.7 20h-9.3V41H9.3'/%3E%3C/svg%3E");                                              
    background-size: auto 12px; width: 12px; height: 12px; opacity: 0.6; margin: 0 2px 0 2px;
}
#typeit_toolbar_char .typeit-capslock.on, #typeit_toolbar_char .typeit-capslock.on:hover { border-color: #ef5733; background: #777; }
.typeit-capslock.on > .icon { -webkit-filter: invert(100%); filter: invert(100%); opacity: 1; }

.typeit-backspace > .icon {
    /* source: BackspaceTall.svg */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -12 308 224'%3E %3Cpath fill='none' stroke='black' stroke-width='24' d='M0,100 l80,100 h200 v-200 h-200 z'/%3E %3Cpath fill='none' stroke='black' stroke-width='24' d='M120,50 l100,100'/%3E %3Cpath fill='none' stroke='black' stroke-width='24' d='M120,150 l100,-100'/%3E %3C/svg%3E");
    background-size: auto 11px; width: 17px; height: 11px; margin: 0 2px 0 2px;
}

/* #typeit_toolbar_edit #typeit_undo, #typeit_toolbar_edit #typeit_redo { text-align: center; padding-top: 3px; } */
#typeit_toolbar_edit #typeit_undo > .icon, #typeit_toolbar_edit #typeit_redo > .icon { 
    width: 13px; height: 13px;
    margin: 0 3px 0 3px; vertical-align: -3px;  
    opacity: 0.55;
    /*
    source: Undo Arrow.svg
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 187 115 115'><path d='M33.324 227.018l16.44 16.44H0v-49.764l16.662 16.662c62.61-63.04 123.3 19.995 66.65 86.644 29.991-53.32-2.324-123.268-49.988-69.982z'/></svg> */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 187 115 115'%3E%3Cpath d='M33.324 227.018l16.44 16.44H0v-49.764l16.662 16.662c62.61-63.04 123.3 19.995 66.65 86.644 29.991-53.32-2.324-123.268-49.988-69.982z'/%3E%3C/svg%3E");
}
#typeit_toolbar_edit #typeit_redo > .icon { transform: scaleX(-1); }
#typeit_toolbar_edit #typeit_copyall { padding-left: 6px; padding-right: 6px; }
#typeit_toolbar_edit #typeit_clearall { padding-left: 5px; padding-right: 5px; }

#typeit_formattingbuttons > button { width: 28px; }
#typeit_formattingbuttons > button sup { font-size: 80%; vertical-align: 25%; line-height: 1.0; }

#typeit_buttons.standard.annotated { margin-top: 10px; }
#typeit_buttons.standard.annotated button { position: relative; overflow: visible }
#typeit_buttons.standard.annotated button > span.numabove { position: absolute; top: 0px; left: 1px; font-size: 11px; line-height: 13px; color: #ef5733;
    display: inline-block; width: 100%; top: -15px; left: 0px; text-align: center }

/* PACT = PACKED button layout (IPA-English) */
#typeit_buttons.pact > div.big-screen { display: flex; flex-wrap: wrap-reverse }
#typeit_buttons.pact button { border: none; border-radius: 0px; margin: 0px; width: 30px; height: 30px; font-size: 17px; line-height: 28px;
}
#typeit_buttons.pact span.keyblock { display: inline-block; margin: 0 3px 2px 0; }
#typeit_buttons.pact span.keyblock.darker button { background: linear-gradient(to bottom, hsl(0,0%,84%) 0%, hsl(0,0%,84%) 42%, hsl(0,0%,82%) 82%, hsl(0,0%,82%) 100%); }
#typeit_buttons.pact span.keyblock.darker button:hover { background: #dfdfdf }
#typeit_buttons.pact span.keyblock.narrow button { width: 24px }
#typeit_buttons.pact button:active { background: rgb(210,210,210) !important; /*must override js-based hover style*/ } 

/* #typeit_buttons.compact div.buttons { margin-bottom: 3px } */
#typeit_buttons.compact span.keyblock { position: relative; z-index: 0; display: inline-block; box-sizing: border-box;
    padding-right: 4px; padding-left: 2px; margin: 0 3px 2px 0; vertical-align: middle;
    background-color: rgb(230,230,230);
    background: linear-gradient(to bottom, hsl(0,0%,92%) 0%, hsl(0,0%,92%) 42%, hsl(0,0%,89%) 82%, hsl(0,0%,89%) 100%);
}
#typeit_buttons.compact button { position: relative; z-index: auto; /* needed to allow pseudoelements to appear behind button contents */
    box-sizing: content-box; border-style: none; width: 22px; height: 30px; line-height: 24px;
    background-color: rgb(230,230,230); /* ignored by IE8 */ background: transparent; border-radius: 0px;
    color: #222; margin-bottom: 0px; margin-top: 0px; margin-right: 0px; font-size: 17px;
}
#typeit_buttons.compact button.larger { font-size: 20px; }
#typeit_buttons.compact button:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* must set all these properties in bare button (without :hover) - if we display new content on hover,
        iOS will require two clicks to activate a button */
#typeit_buttons.compact button:hover:after { background-color: rgba(255,255,255,0.6) }
#typeit_buttons.compact button > svg { width: auto; height: 19px; vertical-align: -1px; }

#typeit_buttons.compact span.keyblock.add1px button { width: 23px; }

#typeit_buttons.compact span.keyblock label { display: inline-block; vertical-align: middle;
    border-radius: 9px; text-align: center; margin-right: 3px; margin-left: 3px;
    color: white; font-size: 11px; line-height: 17px; width: 16px; height: 16px; background-color: #EF937C;
}
/* #typeit_buttons.compact span.keyblock.extra button { width: 18px; } */
/* #typeit_buttons.compact span.keyblock.extra,  */
#typeit_buttons.compact span.keyblock.darker {
    background-color: rgb(212,212,212); color: rgb(45,45,45);
    /* background: linear-gradient(to bottom, hsl(0,0%,84%) 0%, hsl(0,0%,84%) 42%, hsl(0,0%,82%) 82%, hsl(0,0%,82%) 100%); */
    background: linear-gradient(to bottom, hsl(0,0%,85%) 0%, hsl(0,0%,85%) 42%, hsl(0,0%,83%) 82%, hsl(0,0%,83%) 100%);
}
#typeit_buttons.compact button:active { background: rgb(210,210,210) !important; /*must override js-based hover style*/ } 
#typeit_buttons.compact span.keyblock.narrower { padding-right: 2px; }
#typeit_buttons.compact span.keyblock.narrower button { width: 21px; }

#typeit_buttons.compact.symbols button[title*=Alt], #typeit_buttons.compact.symbols button[title*=Ctrl] {
/*     height: 28px; margin-bottom: 0px; border-bottom: solid 2px #f2ac9b; */ /* overridden for smaller screens below */
    box-shadow: inset 0px -2px 0px 0px #f2ac9b
}

#typeit_buttons.custom div.buttons.normal { background-color: #e5e5e5; padding: 3px 4px 4px 7px }
#typeit_buttons.custom div.buttons.special { border: solid 1px #ddd; padding: 3px 4px 4px 6px }

#typeit_buttons button { -webkit-transition: transform 0.1s ease-in; transition: transform 0.1s ease-in, box-shadow 0.1s ease-in; }
#typeit_buttons button.copied { background: white !important; position: relative; z-index: 200; overflow: visible;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.25); border-width: 1px;
    transform: scale(1.7); /*-webkit-transition: transform 0.1s ease-in; transition: transform 0.1s ease-in, box-shadow 0.1s ease-in;*/
}
#typeit_buttons button.copied:before { background: white !important; }
    #typeit_buttons span.keyblock.copied { z-index: 1; }

/* Prefbar */
#typeit_prefbar { position: relative; box-sizing: border-box; -moz-box-sizing: border-box; font-size: 12px;
    line-height: 20px; /* controls the distance of text labels from the top edge */
    height: 20px; text-align: right; margin-top: 4px; visibility: hidden }
#typeit_prefbar button { -webkit-appearance: none; appearance: none }
#typeit_prefbar label { color: #777; font-weight: bold; }
#typeit_prefbar a, #typeit_settings_window a {
    color: #777; font-weight: bold; text-decoration: none; cursor: pointer; border-bottom: dotted 1px #999; vertical-align: 10%;
}
#typeit_prefbar a { border: none }
/*#typeit_prefbar label.typeit_autoprettyselector { vertical-align: 10%; vertical-align: top }*/
#typeit_prefbar span.separator { vertical-align: top; font-size: 13px; border-right: solid 1px silver; margin: 0px 12px 0px 11px; }
/* #typeit_prefbar label.typeit_fontselector { margin-right: 4px; vertical-align: 10%; vertical-align: top; } */
#typeit_prefbar label.typeit_shortcuts_toggle_selector { display: inline-block; vertical-align: top; height: 19px; }

#typeit_settings_link { border: none; vertical-align: top; display: inline-block; }
#typeit_settings_link > span.icon { background-size: 16px 16px;
    width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
#typeit_settings_link > span.text { vertical-align: top; border-bottom: dotted 1px #777; }

.round-button {
    display: none; margin-left: 7px; width: 30px; height: 30px; text-align: center;
    border: solid 1px #aaa !important; border-radius: 17px; font-size: 20px; line-height: 30px; color: #888 !important;
}
.round-button { text-decoration: none !important; }
#typeit_burger_button {
    /*original:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1500'><path fill='#888' stroke='none' d='M0,0 h24 v4 H0 z'/><path fill='#888' stroke='none' d='M0,8 h24 v4 H0 z'/><path fill='#888' stroke='none' d='M0,16 h24 v4 H0 z'/></svg>
    */    
    display: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%23888' stroke='none' d='M0%2C0 h24 v4 H0 z'/%3E%3Cpath fill='%23888' stroke='none' d='M0%2C8 h24 v4 H0 z'/%3E%3Cpath fill='%23888' stroke='none' d='M0%2C16 h24 v4 H0 z'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
 }
#typeit_settings_button, #typeit_settings_link > span.icon {
    /* SVG optimized with SVGOMG, " replaced with ', then < > & % # are URIComponent-encoded; cannot use currentColor
    source: 1Gear_icon_modified
    original:
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 4.55 17 17'><path d='M20.417 14.576v-3.052L18.2 11.3c-.1-.4-.3-.8-.6-1.4l1.449-1.742-2.21-2.21L15.1 7.4c-.5-.3-1-.5-1.4-.6l-.122-2.22h-3.05L10.3 6.8c-.5.1-.9.3-1.4.6L7.16 5.949 4.951 8.158 6.3 9.9c-.3.5-.4.9-.6 1.4l-2.117.12v3.05l2.217.23c.1.5.3.9.6 1.4l-1.344 1.737 2.21 2.21L9 18.7c.4.2.9.4 1.4.6l.232 2.22h3.157L14 19.3c.5-.1.9-.3 1.4-.6l1.755 1.451 2.21-2.209L17.9 16.2c.3-.5.5-1 .6-1.4zM12 16.356c-1.902 0-3.356-1.454-3.356-3.356S10.098 9.644 12 9.644s3.356 1.454 3.356 3.356-1.454 3.356-3.356 3.356z' fill='#888'/></svg>
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 4.55 17 17'%3E%3Cpath d='M20.417 14.576v-3.052L18.2 11.3c-.1-.4-.3-.8-.6-1.4l1.449-1.742-2.21-2.21L15.1 7.4c-.5-.3-1-.5-1.4-.6l-.122-2.22h-3.05L10.3 6.8c-.5.1-.9.3-1.4.6L7.16 5.949 4.951 8.158 6.3 9.9c-.3.5-.4.9-.6 1.4l-2.117.12v3.05l2.217.23c.1.5.3.9.6 1.4l-1.344 1.737 2.21 2.21L9 18.7c.4.2.9.4 1.4.6l.232 2.22h3.157L14 19.3c.5-.1.9-.3 1.4-.6l1.755 1.451 2.21-2.209L17.9 16.2c.3-.5.5-1 .6-1.4zM12 16.356c-1.902 0-3.356-1.454-3.356-3.356S10.098 9.644 12 9.644s3.356 1.454 3.356 3.356-1.454 3.356-3.356 3.356z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
#typeit_settings_button {
    background-size: 18px 18px;
}

#typeit_buttons .show-hide-buttons { display: inline-block; vertical-align: bottom; margin: 0 0 2px 1px; line-height: 1 }
#typeit_buttons .show-hide-buttons > hr { margin: 0; height: 0px; border: none; border-top: dashed 1px #777 }
#typeit_buttons .show-button, #typeit_buttons .hide-button { display: inline-block; font-size: 11px; line-height: 1.25;
    color: #777; text-decoration: none; cursor: pointer }
#typeit_buttons .show-button { vertical-align: bottom; /* border-bottom: dotted 1px; */ padding-bottom: 1px; }
#typeit_buttons .hide-button { vertical-align: bottom; /* border-top: dotted 1px; */ }

#typeit_textbox { visibility: hidden; box-sizing: border-box; width: 100%; /* height: 380px; */ flex: 1 0 200px;
    border: solid 1px #7F9DB9; border-radius: 0px; margin: 0px; }
textarea#typeit_textbox { padding: 8px; resize: vertical; outline: none; -webkit-appearance: none; appearance: none }

span.char { font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", "Arial Unicode MS", sans-serif; }
span.char sup { vertical-align: 10% }
kbd { white-space: nowrap; font-family: inherit; font-weight: normal; font-style: normal; padding: 1px 4px;
    background-color: #fff; border: solid 1px #d9d9d9; border-radius: 3px; 
    color: #777; box-shadow: 0px 1px 0px 0px #ccc;
}
div.box kbd { opacity: 1; padding-bottom: 1px; color: #777; background-color: #fbfbfb; border-color: #d5d5d5; box-shadow: 0px 1px 0px 0px #c8c8c8; }
#toolbar-tip kbd, #typeit_prefbar kbd { opacity: 1; padding: 0px 3px; color: #888; border-color: #ccc; box-shadow: 0px 1px 0px 0px #eee; }
#typeit_buttons kbd { opacity: 1; padding: 0px 4px; }
#typeit_prefbar kbd { opacity: 1; margin-left: 1px; padding: 1px 3px; font-size: 11px; color: #999 }
#browser_warning kbd { opacity: 0.8; }
div.popuphelpbox kbd { color: #555; }

div.box { width: 218px; padding: 14px 16px; line-height: 1.55; background: #eee;
    font-size: 12px; color: #444; border-radius: 2px } /* l-h in percent to ensure inheritance of computed value into span.char */
body.w200 div.box { width: 180px; padding: 11px 10px; line-height: 1.5; }
body.w300 div.box { box-sizing: border-box; width: 300px; padding: 16px 18px; }
div.box label { display: block; margin: 0; color: #EF5733; /* text-align: center; */ padding: 0px;
    margin-bottom: 10px; font-size: 17px; font-weight: bold; text-transform: lowercase }
div.box p { margin-top: 0.75em; margin-bottom: 0.75em; } 
div.box ul > li { margin: 0.4em 0em; }
code { font-family: consolas, monaco, monospace; color: #ef5733 }
div.box span.char { font-size: 15px; color: black }
help { margin-top: 12px; }

div#intro { background: #ddd; color: #333; text-align: left; font-size: 12px; line-height: 1.5;
    border-radius: 2px; hyphens: auto;
}
div#help { margin-top: 15px; }

/*some properties set in JS */
.image-overlay { /*top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: 90vw;*/
    position: fixed;
    background-color: white; cursor: pointer; opacity: 0.95; border-radius: 3px; padding: 3px;
    box-shadow: 0px 0px 120px 40px rgba(0,0,0,0.25); }
.image-overlay .message { top: 0px; left: 0px; width: 100%; text-align: center; color: #ef5733; font-weight: bold; padding-top: 5px; visibility: inherit }

#typeit_settings_window { z-index: 300; width: 270px; background-color: #fff; font-size: 12px; border-radius: 3px; padding: 20px;
    box-shadow: 0px 0px 120px 40px rgba(0,0,0,0.25); }
#typeit_settings_window input, #typeit_settings_window button, #typeit_settings_window select {
    box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}
#typeit_settings_window > h3 { margin: 0 0 30px 0; color: #ef5733; text-transform: lowercase; /* text-align: center; */ font-size: 17px; }
#typeit_settings_window > div.line { margin: 25px 0px }
#typeit_settings_window > div.line > div.selector-line { margin: 5px 0px; line-height: 16px; }
#typeit_settings_window div.selector-line kbd { color: #555 }
#typeit_settings_window > div.line > div.heading { margin-bottom: 5px }
#typeit_settings_window div.selector-container { float: left; width: 25px; }
#typeit_settings_window input[type=checkbox], #typeit_settings_window input[type=radio] {
    margin: 0; padding: 0; vertical-align: middle; text-align: left }
#typeit_settings_window input[type=radio] { margin-left: 20px; }
#typeit_settings_window select.font-select { height: 21px; margin-right: 7px; width: 120px; font-size: 12px; }
#typeit_settings_window input.fontsize-readout { width: 3.5em; height: 21px; margin-right: 3px; border: none; background: none }
.font-plus, .font-minus { display: inline-block; border: none; cursor: pointer; vertical-align: top;
    width: 23px; height: 21px; line-height: 21px;
    background-color: #999; color: #fff; border-radius: 3px;
    padding: 0px; }
.font-plus:hover, .font-minus:hover { opacity: 0.8 }
#typeit_settings_window .font-minus { /* background-position: 0px 0px; */ font-size: 11px; margin-right: 3px; } 
#typeit_settings_window .font-plus { /* background-position: -21px 0; */ font-size: 20px;  }

#typeit_settings_window label { vertical-align: middle }
#typeit_settings_window div.desc { margin-top: 4px; /*margin-left: 25px;*/ color: #888; }
#typeit_settings_window .close-message { margin: 20px 0 -5px 0; text-align: center; color: #ef5733; font-style: italic; visibility: inherit }

#browser_warning { margin-top: 10px; font-size: 12px; line-height: 1.50; background: #f2dad6; padding: 10px; text-align: left; color: #EF5733; display: none }
#browser_warning label { display: inline; font-weight: bold; margin: 0; color: #333; text-align: center;
    text-transform: uppercase; font-size: 12px; }
#browser_warning ul { padding-left: 1.2em; margin-left: 0; margin-top: 0.5em }
#browser_warning ul li { display: inline; margin-right: 2em }
#browser_warning a { text-decoration: none }

div.share-links { margin-top: 10px; width: 100%; height: 25px; overflow: hidden; text-align: left; }
div.share-links > button { display: inline-block; vertical-align: top; margin-right: 2px; overflow: hidden;
    border: none; background: url('img/share-buttons-sprite.png') no-repeat;
}
div.share-links > button#share-fb { background-position: 0 0; width: 57px; height: 20px; }
div.share-links > button#share-twitter { background-position: -58px 0; width: 58px; height: 20px; }
div.share-links > button#share-gplus { background-position: -117px 0; width: 32px; height: 20px; }
div.share-links > button:last-child { margin-right: 0px }
div.share-links > button:hover { opacity: 0.8 }

.typad { position: relative; text-align: left; }
.typad > .typadcont { position: relative }
.typad .blocker { position: absolute; z-index: 100; background-color: rgba(0,0,0,0.0); max-height: 100% /* ensures disappearance when parent is collapsed due to adblock */ }
.typad .blocker.ad-banner-blocker { bottom: 0px; top: 0px; right: 0px; left: 0px; background-color: rgba(255,255,255,0.05); visibility: hidden }
.typad .ad-banner-remove-msg { position: absolute; /* must be absolute, so we can display it and measure height without reflowing column, which would cause Flash of Content */
    display: none; /*max-height: 100%; */ overflow: hidden; padding: 11px 10px;
    background-color: #F2D2CC; color: #d14626; border-radius: 5px; line-height: 19px; hyphens: auto; }
.typad .ad-banner-remove-msg a { color: #666 !important; border-bottom: dotted 1px #666; text-decoration: none }
.typad .ad-banner-adblock-msg { display: none; background-color: #9e8d88; color: white; padding: 11px 13px; border-radius: 3px; line-height: 17px; }
.typad .ad-banner-adblock-msg a { color: white !important; text-decoration: none; border-bottom: dotted 1px white !important }

#typadside { display: block; margin: 14px 0 14px 0; }
#typadside .blocker.bottom-blocker { bottom: 0px; left: 0px; right: 0px; height: 18px; }
#typadside .blocker.side-blocker { bottom: 0px; top: 16px; right: 0px; width: 28px; }

a.remove-ad-link { display: inline-block; max-height: 100%; margin: 5px 0 0px 0; color: #888; font-size: 11px; text-decoration: none; border-bottom: none; }
a.remove-ad-link > span.ui-link-label { text-decoration: none; display: inline; }
a.remove-ad-link ins { display: none }
a.remove-ad-link:hover ins { display: inline; text-decoration: none }
.ui-link-label { display: inline-block; /* fixes IE/Safari border disappearing due to overflow:hidden on parent */
    line-height: 13px; border-bottom: dotted 1px #888 }

#typadtop { /* element is flex-positioned */ margin: 0px 0 15px 0; }
#typadtop > .typadcont { display: inline-block }
#typadtop.size728 > .typadcont { width: 728px; } /* prevents remove ui from appearing over intro text if ublock origin enabled */
#typadtop.size468 > .typadcont { width: 468px; }
#typadtop .blocker.bottom-blocker { bottom: 0px; width: 230px; right: 0px; height: 23px; }
#typadtop .blocker.side-blocker { bottom: 0px; top: 16px; right: 0px; width: 28px; }
#typadtop .ad-banner-remove-msg { width: 460px; }
#typadtop a.remove-ad-link { position: absolute; right: 5px; top: 100%; margin: 3px 0 0 0; border: none; }
#typadtop.size468 a.remove-ad-link { left: 100%; right: auto; top: 0; width: 100px; margin-left: 5px; }
#typadtop a.remove-ad-link .ui-link-label { border-color: #aaa }
#typadtop.blocked { display: none }

/*div#ad-help { font-size: 11px; color: #888; text-align: center; margin-top: 6px }*/
#banner-container { position: relative; display: inline-block; margin: 3px 0px 13px 0px; padding-right: 20px;
    overflow: hidden; font-size: 0px; line-height: 0px; /*needed to fully collapse inline-block when ad is blank*/ }
#banner-container span.close { position: absolute; right: 0px; top: 0px; 
    display: block; cursor: pointer; border: solid 2px #EC9884; color: #EC9884;
    font-weight: bold; padding: 0px 2px; font-size: 15px; line-height: 16px;
}
hr.footer { color: #EF5733; background: #EF5733; border: #EF5733; height: 2px; margin-top: 2em }
footer { font-size: 11px; color: gray; line-height: 150%; padding: 2px 0px; }

.moreinf { margin-top: 20px; font-size: 14px; line-height: 1.40; clear: both }
.moreinf .header { color: #EF5733; font-size: 20px; font-weight: bold }
.moreinf aside { float: right; margin: 0.75em 0 0.75em 2em; border-left: solid 1px #999; padding: 0.5em 0 0.5em 1em }
.moreinf aside > h3 { margin: 0 0 0.5em 0; color: #999; font-size: 16px; font-weight: normal } 

nav { font-size: 13px; line-height: 1.35 }
nav > h3 { display: none; font-size: 16px;  text-transform: uppercase; word-spacing: 1px; letter-spacing: 0.5px; color: #ef5733 }
nav > hr { border-style: solid none none none; border-color: #ccc; border-width: 1px; width: 95px; margin: 1em 0; }
nav .typeit_navbar { margin: 0px; padding: 0px; list-style-type: none; }
nav .typeit_navbar li { margin: 0px; padding: 0px; }
nav .typeit_navbar li.selected { font-size: 15px; color: #333 }
nav .typeit_navbar li.selected:after { content: '♦\FE0E'; font-size: 15px; color: #ef5733; margin-left: 4px; } /* Android version below */
/* Android Chrome doesn't respect \FE0E and renders basic diamond as an emoji.
    That's why why use a different Unicode char for Android. */
@media not (any-pointer: fine) {
    @supports not (-webkit-touch-callout: none) { /* not iOS */
        nav .typeit_navbar li.selected:after { content: '◆\FE0E'; font-size: 14px; }
    }
}
/* SVG version of navbar diamond.
Slightly different sizing depending on browser. Hard to ensure exact match with original Arial diamond (which is concave)
    nav .typeit_navbar li.selected:after { display: inline-block; margin-left: 3px;
    / original:
     <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'><path fill='#ef5733' stroke='none' d='M0,10 l7,10 l7,-10 l-7,-10 z'/></svg>
     /
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 19 23'%3E%3Cpath fill='%23ef5733' stroke='none' d='M0,10 l8,10 l8,-10 l-8,-10 z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom;
    width: 8px; height: 11px;
}*/
nav .typeit_navbar li small { font-size: 11px; font-style: italic }
nav .typeit_navbar li.symbols:after { content: ' ⌘'; color: #777 }
nav ul.other { margin: 0px; margin-top: 0.75em; padding: 0px; /* padding-top: 0.75em; border-top: solid 1px #c5c5c5; */ list-style-type: none }
nav ul.other li { margin-bottom: 0.4em; }
nav ul.other li.selected { font-size: 15px; color: #333 }
nav ul.other li.highlighted { color: #EF5733; margin-top: 0.5em; }
nav ul.other li.highlighted a { color: #EF5733 }

#cookie-message { font-size: 11px; line-height: 17px;
    padding: 5px 12px; background-color: rgb(117, 75, 64) }
#cookie-message a { background-color: #303030; border-style: none; white-space: nowrap;
    background-color: #51352D; border-radius: 3px; text-decoration: none; padding: 4px 10px; cursor: pointer; }
#cookie-message, #cookie-message a { color: #FFBDAC; }

#top-box-wrapper { overflow: hidden; }
#top-box { overflow: visible; margin-bottom: 18px; padding: 7px; padding-top: 5px; text-align: left;
    /*background-color: #ec9884; background-color: #E79B88; background-color: #DE8A75; background-color: #D88570; */ background-color: #D47B64;
    color: white; font-weight: bold; border: solid 2px #f6beb1; border-radius: 5px; font-size: 15px; line-height: 22px;
    -webkit-font-smoothing: antialiased; /* fix for Mac Chrome fuzzy rendering of bold text */
}
#top-box a:link, #top-box a:hover, #top-box a:visited {
    color: black; text-decoration: none; border-bottom: dotted 1px black;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.3), 0px 0px 4px rgba(255, 255, 255, 0.5); }
#top-box div.pseudotable { display: table; cursor: pointer; min-width: 90%; margin-left: 3px; }
#top-box div { display: table-cell; height: 26px; vertical-align: middle; padding-top: 2px;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.4); }
#top-box span.close { display: block; float: right; cursor: pointer; margin-left: 9px; border: solid 2px white;
    padding: 0px 2px; font-size: 15px; line-height: 16px; width: 11px; text-align: center }
#top-box a.close { float: right; }
#top-box kbd { text-shadow: none }
#top-box a.top-box-button { cursor: pointer; margin-left: 3px; background-color: #854; border-radius: 2px; padding: 2px 5px; text-shadow: none; border: none; color: white }

#top-box.light, #top-box.important-message { background-color: #F4E7E5; background-color: #F2D2CC; font-size: 15px; line-height: 22px; color: #dd5130; color: #d14626; border: solid 1px #e7b8af; border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2); margin-right: 2px; padding: 8px; padding-top: 5px;
    -webkit-font-smoothing: auto }
#top-box.light div, #top-box.important-message div { text-shadow: 1px 1px 0px rgba(255,255,255,0.5); }
#top-box.light span.close, #top-box.important-message span.close { border-color: #d14626 }

a.kbdhelp { line-height: 12px }
a.kbdhelp > span.icon {
    /* original: kbd-2x-optimized.png */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAAAG1BMVEUAAAD///+JiYmioqKzs7PNzc309PTy8vLa2tq0O9YCAAAAAXRSTlMAQObYZgAAAGFJREFUGNNjQAalIS7IXFYXFxcIDQWuAWDxEBi3AaLOpYABBaAYkmqMDMIYglH4pgzOgsjAhMEYhW8M5DspwYAKmK+EABA+HOLgIwBO/UAAJHHwEQDTPejuRfcPun/RwwMA75stLtHK//4AAAAASUVORK5CYII=");
    background-size: 15px 12px; vertical-align: middle;
    width: 15px; height: 12px; margin-right: 4px; margin-bottom: 1px;
}
a.kbdhelp > span.text { border-bottom: dotted 1px #777; color: #666; font-size: 11px; /*vertical-align: middle;*/ }    

[data-popup_title] { cursor: help }

div.popup { z-index: 200; box-sizing: border-box; width: 320px;
    border: double 1px silver; border-radius: 3px; padding: 1em 1em 1em 1em; font-size: 13px; line-height: 19px;
    background-color: #F4E7E5; opacity: 0.95;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
div.popup > p { margin: 0; margin-bottom: 0.7em; color: #111; }
div.popup > p > span.char { font-size: 14px; color: #000; line-height: 19px }
div.popup > .message { text-align: center; font-size: 13px; margin: 0.5em 0.5em -0.5em 0.5em; color: #ef5733; font-style: italic; }
div.popup.typeit_h1_help_button { width: 380px; max-width: 93%; font-size: 16px; line-height: 1.6; }

div.popup.brief-popup { width: 130px;
    padding: 0.25em; text-align: center; font-weight: bold; font-size: 13px; line-height: 1.5; z-index: 201;
    background-color: #ef5733; color: white; border: none; border-radius: 0px;
}

div.popup.copied { opacity: 1; background-color: #ef5733; color: white; border: none; border-radius: 0px; font-size: 14px; line-height: 23px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.25); }
div.popup.copied.short { width: 210px; padding: 0.5em; text-align: center; }
div.popup.copied.long { width: 325px; padding: 1.2em; }
div.popup.copied.error { width: 280px; }
div.popup.copied h5 { margin: 0; font-size: 15px; font-weight: bold; letter-spacing: 0.2px }
div.popup.copied.short > h5 { font-size: 14px; }
div.popup.copied.long > div { margin-top: 0.75em }
div.popup.copied a { color: inherit; text-decoration: none; border-bottom: solid 2px white; }

input#dont-show-again-checkbox { margin-right: 6px; }
label[for=dont-show-again-checkbox] { vertical-align: top; font-size: 13px; color: #777; }
#typeit_capslock_indicator { display: none; position: absolute; left: 0px; top: 0px; width: 8em;
    border-radius: 3px; padding: 0.25em; text-align: center; font-weight: bold; font-size: 12px; line-height: 1.5; z-index: 3;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #ef5733; color: white; border: none; border-radius: 0px;
}
#typeit_capslock_indicator.on { display: block }

#typeit_burgermenu {
    position: fixed; right: 0; top: 0;
    max-width: 110px; max-height: 94%; overflow: auto;
    background-color: #fff; font-size: 12px; border-radius: 3px; padding: 20px;
    box-shadow: 0px 0px 120px 40px rgba(0,0,0,0.25);
}
body.text #typeit_burgermenu { right: auto; left: 0; }
#typeit_burgermenu nav > h3 { display: none }
#typeit_burgermenu nav .typeit_navbar { display: flex; flex-direction: column; flex-wrap: wrap; max-height: none; height: auto }
#typeit_burgermenu nav .typeit_navbar > li { min-width: 7em; font-size: 14px; line-height: 20px; }
#typeit_burgermenu nav .typeit_navbar > li.selected { font-size: 14px }
#typeit_burgermenu a { text-decoration: none; color: #777 }
#typeit_burgermenu a:hover { text-decoration: underline }

/* RESPONSIVE LAYOUT GOALS:
    - all touch devices with screen < 1033px must show larger buttons for easier touching
        - 1033px guarantees disappearance of left column, which gives us more space to make buttons larger
        - ignore landscape mode of Galaxy Tab 10, iPad Pro, etc. - would be hard to fit with left column shown; most people probably use portrait mode when touch typing
    - all devices <= 701px must use a perfect grid button layout to eliminate all whitespace and maximize use of available space
*/

/* MOVE LEFT COLUMN BELOW
    Applies to desktop layout with 300px left column
    == REMEMBER to update SHOW_INFO_COLUMN in editor-page.php ==
 */
@media (max-width: 1127px) {
    :root {
        --info-column-below: 1; /* referenced in JS */
    }
    body.editor.w300 #layout > #left { order: 3; box-sizing: border-box; flex-grow: 1; /* must grow to take up whole space when on its own line */
        /* flex-basis: 100%; */ padding-left: 0px; padding-right: 0px; }
    body.editor.w300 #left #intro { box-sizing: border-box; width: 100%; max-width: 480px; font-size: 14px; margin-top: 40px }
    body.editor.w300 #left #typadside { display: none }
    body.editor.w300 #left #help { display: none }
    body.editor.w300 #layout > #right { order: 2; }
    body.editor.w300 #layout > #middle { order: 1; }
    body.editor.w300 #center { padding-left: 20px; max-width: 880px } /* ensures center alignment of layout w/o left column */
    body.editor.w300 #typeit_h1_help_button { display: inline-block; }
}
/* MOVE LEFT COLUMN BELOW
    Applies to desktop layout with 250px left column
    == REMEMBER to update SHOW_INFO_COLUMN in editor-page.php ==
 */
@media (max-width: 1076px) {
    :root {
        --info-column-below: 1; /* referenced in JS */
    }
    body.editor.w250 #layout > #left { order: 3; box-sizing: border-box; flex-grow: 1; padding-left: 0px; padding-right: 0px; }
    body.editor.w250 #left #intro { box-sizing: border-box; width: 100%; max-width: 480px; font-size: 14px; margin-top: 40px }
    body.editor.w250 #left #typadside { display: none }
    body.editor.w250 #left #help { display: none }
    body.editor.w250 #layout > #right { order: 2; }
    body.editor.w250 #layout > #middle { order: 1; }
    body.editor.w250 #center { padding-left: 20px; max-width: 880px } /* ensures center alignment of layout w/o left column */
    body.editor.w250 #typeit_h1_help_button { display: inline-block; }
}
/*  MOVE LEFT COLUMN BELOW
    Applies to:     (1) desktop layout with 200px left column – chosen by JS on smaller viewport widths
                              (2) all touch devices (even large tablets)
                              not (any-pointer: fine) used to exclude touchscreen laptops (which have a fine pointer)
*/
@media (max-width: 1033px), not (any-pointer: fine) { /* was: 1020px; iPad Pro 12" has 1024px width in portrait mode */
    :root {
        --info-column-below: 1; /* referenced in JS */
    }
    body.editor #layout > #left { order: 3; box-sizing: border-box; flex-grow: 1; padding-left: 0px; padding-right: 0px; }
    body.editor #left #intro { box-sizing: border-box; width: 100%; max-width: 480px; font-size: 14px; margin-top: 40px; }
    body.editor #left #typadside { display: none }
    body.editor #left #help { display: none }
    body.editor #layout > #right { order: 2; }
    body.editor #layout > #middle { order: 1; min-height: 100vh; /* prevent #left flashing before #middle is parsed */ }
    body.editor #center { padding-left: 20px; max-width: 880px }
    body.editor #typeit_h1_help_button { display: inline-block; }
}
/* MOVE RIGHT COLUMN BELOW on phones and tablets in portrait mode for easier typing on full screen Russian/IPA keyboard */
/* #middle 622px + #right 26+100+8 + #center 20+10 = 776px -- test on Russian with mobile buttons */
/* also targeting mobile screens <= 900px because we need more space for bigger buttons (see media query below) */
/* iPad Pro M1 has width 834px in portrait mode */
@media (max-width: 834px) {
    body.editor.editor #center { padding-left: 10px } /* specificity trick to ensure overriding of body.editor.w300/250 declarations above */
    body.editor #layout > #middle { min-height: 100vh; /* order already set above, prevent #left flashing before #middle is parsed */ }
    body.editor #layout > #right { padding-left: 0px; padding-right: 6px; flex-basis: 100%; }
    body.editor nav > h3 { display: block; }
    body.editor nav .typeit_navbar { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 175px; height: 1000px; /* needed for IE, otherwise max-height ignored */ }
    body.editor nav .typeit_navbar > li.selected { font-size: inherit }
    body.editor #typeit_burger_button { display: inline-block; }
}

.touch-specific, #typeit_buttons span.keyblock.touch-specific { display: none }
.touch-specific-invisible { visibility: hidden } /* elements which are only visible on touch devices, invisible (not display: none) on non-touch devices */

/* ALL TOUCH DEVICES (devices with on-screen keyboard, approximated as devices without a mouse)
    - shrink middle container (h1+toolbars+textbox) to allow space for on-screen keyboard & make sure buttons are visible on load
        - in landscape, there is too little space...
    - move charbar below the textbox
    - make buttons bigger
    - show .touch-specific buttons
    - hide most of the prefbar, show h1 settings button instead
    - remove red digits on Pinyin/Vietnamese/Welsh
    - does not affect .tiny-screen section
    this should be tweaked together with the @media queries that remove the left and right columns to ensure things like math/sci fit

    Note: typeit3.js/charToolbar.isThisButtonVisible() uses DEVICE_HAS_MOUSE to determine the visibility of .touch-specific elements
*/
@media not (any-pointer: fine) {
    #middle-container { min-height: calc(70vh + 40px); }
    /* the middle container (h1 + toolbars + textbox) should take up 70% of screen height (30% is keyboard on iPad) +
        extra pixels for stuff we don't care about fitting
        leads to small textbox height if topbox is active - but user can hide topbox, so it's OK
        This doesn't work in landscape mode.    
    */
    @media (orientation: landscape) {
        /* ????? in landscape orientation, do not put charbar below textbox (so it can be seen) ????
        OR just severely limit the height of #middle-container (test on ipad mini in simulator?)
        it's just not usable in landscape -- too little vertical space
        use orientation: landscape? - this just detects if viewport W > H, but it's OK with the modern rule that viewport = viewport without kbd
        */
        #middle-container { min-height: calc(63vh + 40px); }
    }
    .kbd-specific { display: none }
    #toolbar-tip.side { display: none } /* simplifies layout */
    .touch-specific, #typeit_buttons span.keyblock.touch-specific { display: inline-block; }
    .touch-specific-invisible { visibility: inherit }
    div.touch-specific { display: block } /* 'unset' always resets to inline, regardless of element */
    #typeit_buttons.compact button { box-shadow: none !important; } /* disable :active inset effect */
    #typeit_prefbar:not(.always_shortcut_toggle) { display: none } /* hide shortcut toggle, but always show it on Russian, Greek, etc. */
    #typeit_prefbar.always_shortcut_toggle #typeit_settings_link, /* ...but don't show other elements besides the toggle */
        #typeit_prefbar.always_shortcut_toggle span.separator { display: none }
    #typeit_settings_button:link { display: inline-block; }
    #typeit_buttons.standard.annotated button > span.numabove { display: none; } /* Pinyin/Vietnamese/Welsh red digits above buttons */
    #typeit_buttons.standard.annotated { margin-top: 0px; }

    #typeit_toolbar_char { order: 10; margin: 5px 0 0; }
    #typeit_toolbar_edit { margin-bottom: 2px; }
    #toolbar-tip.top { margin: 0px 0 8px; }

    #typeit_buttons { width: 100% !important; }
    #typeit_buttons.custom, #typeit_buttons.compact { margin-left: -6px; margin-right: -6px; width: calc(100% + 12px) !important; }
    #typeit_toolbar_edit button, #typeit_toolbar_edit a.toolbar-extra-link { min-width: 34px; height: 28px; line-height: 26px; }
    #typeit_formattingbuttons > button { width: 34px; }
    #typeit_buttons button, #typeit_buttons.pact button { width: 40px; /* min-width: 33px; */ min-width: 40px;
        /* min-width works even if button has more specific CSS for width -- e.g. Russian special buttons */
        height: 35px; min-height: 33px; line-height: 35px; font-size: 17px; }
    #typeit_buttons.compact span.keyblock label { display: none }
    #typeit_buttons.compact button { width: 29px; height: 33px; /* line-height: 33px; */
        font-size: 17px; margin: 0 3px 0 0 !important; min-width: 27px; min-height: 33px; }
    #typeit_buttons.compact span.keyblock.narrower button { width: 24px !important; }
        #typeit_buttons.compact.ipafull div.ext, #typeit_buttons.compact.ipafull div.ext2 { display: flex; flex-wrap: wrap }
        #typeit_buttons.compact.ipafull button { width: 31px !important; }
        #typeit_buttons.compact.ipafull span.keyblock.combining button { width: 20px !important; }    
    /* #typeit_buttons.compact button.noness { display: none } */
    #typeit_buttons.compact button { margin-right: 0px !important; }
    #typeit_buttons.compact span.keyblock { padding-right: 4px !important; }
}

/* FREE-FLOWING BUTTON LAYOUT to maximize use of space on small screens
        - does not impose any limit on charbar height, there is no scrolling within the charbar
        - this is handled below in the PHONES section
         == Careful setting height: !important because it can screw up hidden button slide-in animation ==
         == Remember to update editor.php ==
*/
@media (max-width: 701px) and (not (any-pointer: fine)), (max-width: 660px) { /* #middle 612px + #center 20+10 + scrollbars 15px = 657px */
    :root {
        --tiny-screen: 1; /* this is referenced in JS */
    }
    .big-screen { display: none }
    .tiny-screen { display: inherit }
    div.tiny-screen { display: block }
    div#top-panel { padding: 0px; font-size: 10px; }

    #typeit_textbox { flex-basis: 100px; }
    /* min-content height of an iframe is always 150px -> even if you specify flex-basis of 120px,
        it will still take up 150px. Using % height on iframe also fails, unless ancestor has hardcoded height. */
    /* #typeit_textbox:focus { max-height: none;} */
    body.editor { min-width: auto; }
    body.editor #layout { min-width: auto; }
    #toolbar-tip { display: none }
    
    #typeit_buttons { width: 100% !important; } /* 'auto' fails on IE10 -- exceeds container */
    #typeit_buttons button { margin-right: 2px !important; } /* otherwise standard buttons don't fit nicely on 360px screens */
    #typeit_buttons.standard.annotated button > span.numabove { display: none; } /* Pinyin/Vietnamese/Welsh red digits above buttons */    
    #typeit_buttons > .big-screen { display: none !important; }
    #typeit_buttons > .tiny-screen { display: flex; flex-wrap: wrap-reverse; }

    #typeit_buttons.pact button { margin: 0 !important; }
    #typeit_buttons.pact button.darker { background: linear-gradient(to bottom, hsl(0,0%,85%) 0%, hsl(0,0%,85%) 42%, hsl(0,0%,83%) 82%, hsl(0,0%,83%) 100%); }

    #typeit_buttons.custom button { border: none; min-width: auto; }
    #typeit_buttons.custom div.buttons.normal, #typeit_buttons.custom div.buttons.special {
        background-color: #fff; border: none; padding: 0px;
    }
    #typeit_buttons.compact button, #typeit_buttons.compact.ipafull button {
        width: 32px !important; /*35px doesn't fit nicely on very common 360px width screens */
        height: 32px; line-height: 28px !important; margin: 0px !important; /* 30px height led to complaints from Google Search Console */
    }
    /* #typeit_buttons.compact button.noness { display: none } */
    /* #typeit_buttons.compact div.buttons { display: inline; white-space: normal; } */
    #typeit_buttons.compact span.keyblock { display: inline; font-size: 29px; }
    /* #typeit_buttons.compact > .tiny-screen button { z-index: auto;  } */
    #typeit_buttons.compact > .tiny-screen button.start-group:before { box-shadow: 2px 0px 2px -2px inset #ce8b7b; }
    #typeit_buttons.compact > .tiny-screen button:before { content: ""; position: absolute; z-index: -2;
        display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(230,230,230);
        background: linear-gradient(to bottom, hsl(0,0%,92%) 0%, hsl(0,0%,92%) 42%, hsl(0,0%,89%) 82%, hsl(0,0%,89%) 100%);
     }
     #typeit_buttons.compact > .tiny-screen button.darker:before {
        background: linear-gradient(to bottom, hsl(0,0%,85%) 0%, hsl(0,0%,85%) 42%, hsl(0,0%,83%) 82%, hsl(0,0%,83%) 100%);
     }
     #typeit_buttons.compact > .tiny-screen .hide-button, #typeit_buttons.compact > .tiny-screen .show-button { box-sizing: border-box;
        margin: 0px; border: solid 1px #eee !important; width: 32px; height: 30px; text-align: center; font-size: 20px; line-height: 11px;
        font-weight: bold;
    }
    #typeit_buttons.compact > .tiny-screen .show-button:before { content: '▲'; display: block; font-size: 11px; }
    #typeit_buttons.compact > .tiny-screen .hide-button:before { content: '▼'; display: block; font-size: 11px; }
    /* #typeit_formattingbuttons { display: none } */

    body.text #left nav { display: none  }
    body.text #layout > #left { flex: 1 1 0px; padding-left: 0px; padding-right: 18px; }
    body.text #layout > #right { padding-left: 8px; padding-right: 8px; }
    body.text #typeit_burger_button { display: block }
}

/* PHONES
    - limit height of char toolbar, use vertical flow
    - fit textbox and buttons to screen height, do not fit middle column as on PCs
*/
@media (max-width: 701px) and (not (any-pointer: fine)) {
    :root {
        --phone-screen: 1; /* this is referenced in JS */
    }
    .not-phone { display: none }

    /* on phones, we no longer fit the middle container, we fit only the textbox-and-buttons */
    #middle-container { min-height: auto } /* 'auto' used to cause flash of content on Android, not anymore?  ; default (100vh - 80px) is too tall (keyboard not subtracted) */
    #textbox-and-buttons-container {
        /* As of Chrome Mobile 108, vh is no longer updated when the keyboard was displayed. Now behavior is same as iOS.
        That is, 100vh is maximum viewport height (top navbar and keyboard hidden.
        You can force the old behavior by adding a viewport value */
        min-height: auto; /*override desktop setting*/
        height: 52vh;
        /* height: calc(90vh - max(env(keyboard-inset-height, 0px), 20vh)); */
        /* As of Aug 2023, cannot use VirtualKeyboard API, because env(keyboard-inset-height) will not report the keyboard height UNTIL the kbd is shown */
    }
    /* iOS vh issues */
    @supports (-webkit-touch-callout: none) {
        #textbox-and-buttons-container { /*height: 55vh;*/ height: 57vh; }
        /* 58vh fits the textbox and buttons (without edit buttons) on iPhone SE 2/3ed, iPhone 14 and iPhone 14 Pro Max (higher models have _slightly_ more space
            1vh margin in case user enables text size scaling which slightly decreases the available space
             iPhone 14 Pro Max works ok -- edit buttons shown, iPhone 11 editbuttons almost shown in full
        iPhone 12-14 all have 844px height, Pro/Max variants have more
        */
    }

    #typeit_buttons { flex-wrap: wrap-reverse }
    #typeit_buttons.compact > .tiny-screen { flex-direction: column; flex-wrap: wrap; align-content: flex-start;
        /* max-height: 50vh; -- causes reflow of toolbar when onscreen kbd shown/hidden */
        max-height: 198px; overflow-x: auto; -webkit-overflow-scrolling: touch }
    #typeit_buttons.compact > .tiny-screen button:before { content: ""; position: absolute; z-index: -2;
            display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(230,230,230);
            background: linear-gradient(to right, hsl(0,0%,92%) 0%, hsl(0,0%,92%) 42%, hsl(0,0%,89%) 82%, hsl(0,0%,89%) 100%);
    }
    #typeit_buttons.compact > .tiny-screen button.darker:before {
        background: linear-gradient(to right, hsl(0,0%,85%) 0%, hsl(0,0%,85%) 42%, hsl(0,0%,83%) 82%, hsl(0,0%,83%) 100%);
    }
    #typeit_buttons.compact { position: relative }
     #typeit_buttons.compact.right-overflow:after { position: absolute; content: ''; z-index: 10;
        right: 0px; top: 0px; bottom: 0px; width: 16px; pointer-events: none;
        background: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0)); }
    #typeit_buttons.compact.left-overflow:before { position: absolute; content: ''; z-index: 10; /* iOS needs this */
        left: 0px; top: 0px; bottom: 0px; width: 16px; pointer-events: none;
        background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));
    }
    #typeit_buttons.compact > .tiny-screen button.start-group:before { box-shadow: 0px 2px 2px -2px inset #ce8b7b }
    #typeit_buttons.compact > .tiny-screen .hide-button, #typeit_buttons.compact > .tiny-screen .show-button { height: 33px; }
    #typeit_buttons.compact > .tiny-screen .show-button:before { content: '▶︎\FE0E'; }
    #typeit_buttons.compact > .tiny-screen .hide-button:before { content: '◀\FE0E'; }
}