.s7 {
    font-size: 7px;
}

/* minimum size at chrome (100%) */
.s8 {
    font-size: 8px;
}

.s9 {
    font-size: 9px;
}

.s10 {
    font-size: 10px;
}

.s11 {
    font-size: 11px;
}

.s12 {
    font-size: 12px;
}

.s13 {
    font-size: 13px;
}

/* VTT: 10pt at ThinkVision */
.s14 {
    font-size: 14px;
}

.s15 {
    font-size: 15px;
}

.s16 {
    font-size: 16px;
}

.s17 {
    font-size: 17px;
}

.s18 {
    font-size: 18px;
}

.s19 {
    font-size: 19px;
}

.s20 {
    font-size: 20px;
}

.s21 {
    font-size: 21px;
}

.s22 {
    font-size: 22px;
}

.s23 {
    font-size: 23px;
}

.s24 {
    font-size: 24px;
}

.s25 {
    font-size: 25px;
}

.s26 {
    font-size: 26px;
}

.s27 {
    font-size: 27px;
}

.s28 {
    font-size: 28px;
}

.s29 {
    font-size: 29px;
}

.s30 {
    font-size: 30px;
}

.s31 {
    font-size: 31px;
}

.s32 {
    font-size: 32px;
}

.s33 {
    font-size: 33px;
}

.s34 {
    font-size: 34px;
}

.s35 {
    font-size: 35px;
}

.s36 {
    font-size: 36px;
}

.s37 {
    font-size: 37px;
}

.s38 {
    font-size: 38px;
}

.s39 {
    font-size: 39px;
}

.s40 {
    font-size: 40px;
}

.s41 {
    font-size: 41px;
}

.s42 {
    font-size: 42px;
}

.s43 {
    font-size: 43px;
}

.s44 {
    font-size: 44px;
}

.s45 {
    font-size: 45px;
}

.s46 {
    font-size: 46px;
}

.s47 {
    font-size: 47px;
}

.s48 {
    font-size: 48px;
}

.s49 {
    font-size: 49px;
}

.s50 {
    font-size: 50px;
}

.s51 {
    font-size: 51px;
}

.s52 {
    font-size: 52px;
}

.s53 {
    font-size: 53px;
}

.s54 {
    font-size: 54px;
}

.s55 {
    font-size: 55px;
}

.s56 {
    font-size: 56px;
}

.s57 {
    font-size: 57px;
}

.s58 {
    font-size: 58px;
}

.s59 {
    font-size: 59px;
}

.s60 {
    font-size: 60px;
}

.s95 {
    font-size: 9.5px;
}

.s105 {
    font-size: 10.5px;
}

.s115 {
    font-size: 11.5px;
}

.s125 {
    font-size: 12.5px;
}

.s135 {
    font-size: 13.5px;
}

.s145 {
    font-size: 14.5px;
}

.s155 {
    font-size: 15.5px;
}

.s165 {
    font-size: 16.5px;
}

.s175 {
    font-size: 17.5px;
}

/* 全てに共通 */
.txtcenter {
    text-align: center;
}

.txtright {
    text-align: right;
}

.txtleft {
    text-align: left;
}

.width100 {
    width: 100px;
}

/* カラー */
.co {
    color: rgb(241, 149, 12);
}

.spacebar {
    color: brown
}

.howtotest {
    color: coral;
    font-size: 12px;
}

.diff_add {
    background-color: #aaffaa
}

.diff_chg {
    background-color: #ffff77
}

.diff_sub {
    background-color: #ffaaaa
}

.plus {
    color: rgb(3, 150, 3);
}

.minus {
    color: rgb(151, 8, 187);
}

.correct {
    background-color: rgb(178, 235, 178);
}

.wrong {
    background-color: rgb(241, 189, 189);
}

.gray {
    background-color: rgb(210, 214, 210);
}

/* フォント */
.NotoSans {
    font-family: NotoSansR;
}

.NotoSerif {
    font-family: NotoSerifR;
}

table.fixedwidth {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}

/* 横に広いテーブル */
table.yokonaga {
    width: 100%;
}

table.yokonaga td {
    white-space: nowrap;
    width: 100px;
    height: 100%;
    text-align: left;
    padding-left: 10px;
}

table.yokonaga60 {
    width: 60%;
}

table.yokonaga60 td {
    white-space: nowrap;
    width: 100px;
    height: 100%;
    text-align: left;
    padding-left: 10px;
}

table.yokonaga100 {
    width: 100%;
}

table.yokonaga100 td {
    white-space: nowrap;
    height: 100%;
}


/*********************************************************/
/******************     Common     ***********************/
/*********************************************************/
/* Common/menu (menu for each font) */
#menu {
    border: none;
    margin-bottom: 10px;
}

#menu th {
    font-size: 11px;
    height: 10px;
}

.FontMenu {
    width: 50px;
}

.menu1 {
    background-color: #57a9b65e;
    color: #444;
}

.menu2 {
    background-color: #57a9b621;
    color: #444;
}

.menu3 {
    background-color: #f2f7f556;
    color: rgba(68, 68, 68, 0.644);
}

.menu1 button {
    background-color: transparent;
    border: none;
}

.menu2 button {
    background-color: transparent;
    border: none;
}

.menu3 button {
    background-color: #f2f7f556;
    border-color: #f2f7f556;
    border: none;
    color: rgba(68, 68, 68, 0.644);
}

.currentFont {
    width: 1000px;
    text-align: left;
}

#currentFont {
    color: #008080;
    margin-left: 10px;
}

.menu_version {
    color: #444;
    text-align: right;
}

.menu_version a {
    color: #444;
}

.menu_button {
    text-align: left;
}

.menu_button button {
    background-color: #a357b621;
    border-color: #57a9b6d3;
    margin-left: 10px;
    font-size: 11px;
}


.menu_button1 {
    background-color: #a357b621;
    border-color: #57a9b6d3;
    margin-left: 10px;
    width: 25px;
}

.menu_button2 {
    background-color: #a357b621;
    border-color: #57a9b6d3;
    width: 25px;
}

/* for SVG */
.svg_old {
    color: red;
    stroke: red;
    fill: red;
    fill-opacity: 0.5;
    stroke-opacity: 0.5;
}

.svg_new {
    color: blue;
    stroke: blue;
    fill: blue;
    fill-opacity: 0.5;
    stroke-opacity: 0.5;
}

.svgcenter {
    --justify-items: center;
    --align-items: anchor-end;
}

/*********************************************************/
/********************     HTML     ***********************/
/*********************************************************/
/* 全シートに共通 */
table.checksheet {
    border: 1px solid #bbb;
    font-size: 40px;
}

table.checksheet th {
    border: 1px solid #bbb;
    position: sticky;
    top: 0;
}

table.checksheet tr {
    border: 1px solid #bbb;
}

table.checksheet td {
    border: 1px solid #bbb;
}

/* Template.py (article) */
td.article {
    font-size: 20px;
    width: 1000px;
    text-align: left;
}

/* Template.py (自然改行) */
td.lineFeed {
    width: 100%;
    text-align: left;
    border: 1px solid #bbb;
    font-size: 30px;
}

/* Template.py (sups/subs) */
.subs {
    font-feature-settings: "subs"1;
}

.sups {
    font-feature-settings: "sups"1;
}

.w100 {
    width: 100px;
    text-align: left;
    padding-left: 10px;
}

/* Box.py */
.box td {
    text-align: center;
    height: 80px;
}

/* Matrix.py */
.matrix td {
    text-align: center;
}

/* Waterfall.py */
table.hint {
    width: 100%;
}

table.hint td {
    white-space: nowrap;
    /* height: 80px; */
    /* height: 100%; */
    text-align: left;
}

/*********************************************************/
/*********************     TTF     ***********************/
/*********************************************************/
/* GPOS_mark_diffenator.py */
table.diac {
    width: 100%;
}

table.diac td {
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3px;
}

/* GenerateCheckSheets.py */
.table_menu {
    color: #010101;
    text-align: right;
}

.table_menu a {
    color: #010101;
    text-decoration: none;
}

/* button for open all & close all */
.btn-border {
    color: #010101;
    border: 1px solid #010101a8;
    border-radius: 0;
    background: #fff;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.othead table {
    border: 1px solid #bbb;
    font-size: 12px;
    width: 100%;
}

.othead th {
    border: 1px solid #bbb;
}

.othead tr {
    border: 1px solid #bbb;
}

.othead td {
    border: 1px solid #bbb;
}

._EQ {
    background-color: rgb(184, 226, 184);
}

._O {
    background-color: rgb(100, 224, 100);
}

._X {
    background-color: rgb(248, 98, 98);
}

._UL {
    background-color: rgb(247, 199, 136);
}

._IT {
    background-color: rgb(230, 151, 250);
}

.tate_O {
    color: rgb(100, 224, 100);
}

.tate_X {
    color: rgb(248, 98, 98);
}

.description {
    color: rgb(236, 174, 174);
    font-size: 10pt;
}

.headclm {
    background-color: aliceblue;
    font-size: 11px;
}

.headclm_orgnalsize {
    background-color: aliceblue;
}

/* .headclm2{background-color: rgb(210, 214, 210); font-size: 11px;} タイトル行 */
.pl {
    padding-left: 10px;
    padding-right: 10px;
}

.stick {
    position: sticky;
    top: 0;
}

.copy {
    cursor: copy;
}

.ot_title {
    font-family: "KnollMed";
    font-size: 15px;
    padding: 0.5em;
    background: #57a9b659;
    border-bottom: solid 3px #57AAB6;
    margin-bottom: -0.1em;
    color: #444;
    display: grid;
    grid-template-columns: 1fr 1000px;
    grid-template-rows: 1fr;
    align-items: center;
    cursor: pointer;
}

.navi {
    text-align: right;
    width: 100%;
}

.navi a {
    font-family: "KnollMed";
    font-size: 20px;
    color: #444;
    text-decoration: none;
}


/*********************************************************/
/***************     Language specific     ***************/
/*********************************************************/
td.article_mongolian {
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: tb-lr;
    text-justify: inter-ideograph;

    height: 1000px;
    font-size: 20px;
    width: 1000px;
    text-align: left;
}

/* for Mongolian */
.bichig {
    margin: 2px 1px 0px 1px;
    padding: 0px;

    font-size: 20px;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: tb-lr;
    /*    -webkit-text-orientation: sideways-right;*/
    text-justify: inter-ideograph;

    text-align: right;
}


/*********************************************************/
/***************     For Font Test Page     **************/
/*********************************************************/
.mySetting_string {
    font-size: 15px;
    padding: 0.5em;
    margin-left: 10px;
    margin-right: 10px;
    background: #57a9b659;
    color: #444;
    width: 99%;
}

.mySetting_string input {
    width: 99%;
}

.mySetting_text {
    width: 99%;
    font-size: 18px;
}

.mySetting_ot {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 15px;
    padding: 0.5em;
    background: #57a9b659;
    border-bottom: solid 3px #57AAB6;
    color: #444;
    display: grid;
    cursor: pointer;
}

.mySetting_ot th {
    font-size: 14px;
    width: 150px;
    text-align: left;
}

.mySetting_ot input {
    width: 150px;
    text-align: left;
}

.mySetting_ot label {
    width: 50px;
    text-align: right;
}


.FontPreview {
    font-size: 15px;
    padding: 0.5em;
    margin-left: 10px;
    margin-right: 10px;
    width: 99%;
}

.FontPreview input{
    width: 1000px;
}

.FontToBeChecked {
    font-size: 30px;
}

#slider {
    width: 100%;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    height: 10px;
    width: 300px;
    background: #57a9b691;
    border-radius: 20px;
}

input[type="button"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    height: 30px;
    width: 80px;
    background: #57a9b691;
    border-radius: 20px;
    text-align: center;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #57AAB6;
    width: 24px;
    height: 20px;
    border-radius: 50%;
}

.myselection input {
    display: none;
}

.myselection label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    color: #3e4956;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}

.myselection label:before {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #57a9b659;
    border-radius: 50%;
}

.myselection input[type="radio"]:checked+label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #57AAB6;
}