@import "../../../../common/css/less/common.less";


@font-face {
    font-family: langoo;
    src: url('../font/langoo.otf');
    font-style: normal;
    font-weight: normal;
    unicode-range: U+32400-32AFF;
}


html {
    font-family: "Noto Sans SC", sans-serif, langoo, Helvetica, 'Microsoft Yahei', Verdana, Tahoma, Arial;
    font-size: var(--font-size);
    // font-weight: 1.8;
    // color: var(--text-primary);
}


// nav {
//     // font-size: 1rem;
// }


.symbol-list,
.meta-list,
.marker-list,
.voice-list,
.part-list,
.simple-list,
.complex-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;

    >div {
        display: flex;
        flex-direction: column;
        align-items: center;

        // border: 1px solid red;
        margin: 10px;
        padding: 0;

        width: 240px;
        height: 240px;

        >svg {
            border: 1px dashed blue;
            width: 100%;
            height: 100%;

            fill: none;
            stroke: red;
            stroke-width: 5;
        }

        >div {
            width: 80px;
            line-height: 1.3;
            font-size: 0.8rem;
            margin: 5px 0;
            text-align: center;
        }
    }
}



ul.char-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    list-style: none;

    >li {
        border: 1px dashed #ccc;

        >* {
            display: block;
            text-align: center;
        }

        >span.char {
            display: block;
            padding: 24px;
            font-size: 2.1rem;
            color: red;
        }


    }
}


// ul.attr-list { 
//     padding: 20px 0;
//     list-style: none;

//     // >li {      
//     // }
// }

table.phoneme-array {

    th, td {
        text-align: center
    }


    tbody>tr>td:not(.tdname) {
        color: rgba(231, 6, 6, 0.816);
        font-size: 1.2rem;


        &:not(:has(>p.remark)) {
            color: var(--text-inactive);
        }

        // .remark {
        //     color: rgb(16, 85, 196);
        // }

        &:has(>p.remark.maybe) {
            color: var(--text-muted);
            font-style: italic;
        }
    }
}

table.phoneme-glyphs {
    th, td {
        &:not(:last-child) {
            min-width: 80px;
            text-align: center
        }
    }
}


ul.pinyin-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    >li {
        width: 120px;
        font-weight: bold;
        font-size: 1.3rem;
    }
}

div.char-list {
    >section {
        >span {
            font-size: 1.4rem;
            // font-weight: bold;
            color: #36c;
            display: inline-flex;
            font-weight: bold;
            width: 60px;
            height: 60px;
            align-items: center;
            justify-content: center;

            &:hover {
                background-color: rgb(166, 214, 214);
            }
        }
    }
}

ul.seq-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    >li {
        width: 60px;
        font-weight: bold;
        font-size: 1.3rem;
    }
}


table.word_cata {

    // color : initial;
    >tbody>tr>td:first-child {
        border-right: 1px solid #89938c;
        white-space: nowrap;
    }

    >tbody>tr>td {
        border-bottom: 1px solid #89938c;
    }
}

table.radial-list {
    thead {
        text-align: left;
        ;
    }

    tbody>tr {
        >td:nth-child(1) {
            width: 60px;
        }

        >td:nth-child(2) {
            width: 80px;
        }
    }
}

.zr_cata_table {
    display: flex;
    flex-direction: column;
    // min-width:600px;
    max-width: 100%;
    font-size: 1.1rem;

    >div {
        display: grid;
        grid-template-columns: 36px 48px 48px auto;
        grid-column-gap: 16px;

        padding: 6px 0;

        &:not(:last-child) {
            border-bottom: 1px solid #89938c;
        }

        > :nth-child(3) {
            color: green;
            // font-size:1.1rem;
        }
    }
}

.note {
    font-size: 0.9rem;
}

fieldset {
    border: none;
    border-left: 1px solid #ccc;

    pre {
        font-style: italic;
    }
}



article {
    width: 1060px;
    // width: 800px;
}

table {

    th,
    td {
        padding: 6px 16px;
    }

    &.phoneme-array {

        th,
        td {
            padding: 1px 10px;
        }
    }

}

dl.char-words {
    // border: 2px solid red;

    dt {
        margin: 60px 0 40px 0;
        font-size: 1.2rem;
        //  border:2px solid red;
        //  padding:0;
    }

    dd {
        margin: 0;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    ul {
        margin: 48px 0;

        li {
            // border:1px solid red;

            margin: 0;
        }
    }
}

blockquote {
    // font-size: 1.4em;
    width: fit-content;
    max-width: 700px;
    // margin: 50px auto;
    // font-family: Open Sans;
    font-style: italic;
    color: #555555;
    padding: 2.2em 16px 1.2em 16px;
    border-left: 3px solid #78C0A8;
    line-height: 1.6;
    position: relative;
    background: #EDEDED;
}

blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #78C0A8;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

blockquote::after {
    content: '';
}

blockquote span {
    display: block;
    color: #333333;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}



ul.dir {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;

    >li {
        margin-bottom: 60px;
        // border: 2px solid red;
    }
}

ul.flexItems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    gap: 12px;
    margin: 24px 0;
    padding: 0;


    >li {
        flex: 20%;
        flex-shrink: 0;
        flex-grow: 0;
        display: flex;
        margin: 0;
        flex-direction: row;


        >div {
            display: flex;

            &:nth-child(1) {
                width: 30px;
            }
        }

        // border:1px solid red;

    }
}


ul.pn-list {

    list-style: none;
    margin: 100px 0;

    >li {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;

        // border: 1px solid red;

        align-items: center;
        // vertical-align: baseline;

        // >* {
        //     // vertical-align: baseline;

        //  }

        >div:nth-child(1) {
            width: 160px;
            font-size: 3.6rem;
            color: red;
        }

        >div:nth-child(2) {
            width: 160px;
            font-size: 2rem;
            color: cadetblue;
        }

        >div:nth-child(3) {
            font-size: 1.8rem;
            color: green
        }


    }
}


.pn_list_container {
    // display: flex;

    // justify-content: space-between;
    // align-items: center;
    // flex-wrap: wrap;

    ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        >* {
            flex: 50%;
            // border: 2px solid red;
        }
    }
}


ul.char_map {
    list-style: none;
    display: flex;
    border: 1px solid red;
    // margin: 48px 0;
    // padding: 0;
    gap: 48px;
    margin: 8px 0;

   flex-wrap: wrap;
    >li {

        margin: 0;
    }
}


ul.chars_map_item {
    // border: 2px solid blue;
    padding: 0;

    >li {
        display: flex;
        // border: 2px solid green;
        margin: 8px 0;
        // flex-wrap: wrap;

        >div {
            width: 40px;
            &:first-child {
                font-size: 1.5rem;
                color: red;
            }
        }
    }
}




figure.video_container {
    width: fit-content;
}