/* @import url('https://fonts.googleapis.com/css2?family=Arial&display=swap'); */
@font-face{
    font-family: 'Amiri';
    src: url('res/Amiri-Slanted.woff2') format('woff2');
    src: url('res/Amiri-Bold.woff2') format('woff2');
    src: url('res/Amiri-Regular.woff2') format('woff2');
    font-style: 'normal';
    font-display: 'swap';
}

/* html { height: 100%; overflow:auto; }
body { height: 100%; } */

html{
    /* scroll-behavior: smooth; */
    height: 100%;
}
body{
    padding:0;
    margin:0;
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.flex{
    display: flex;
    width:100%;
}

.home_footer{
    display: flex;
    width:100%;
}

.home_footer_item{
    padding: 6px;
    width:25%;
    color:#228b22;
    cursor:pointer;
    text-decoration:none;
}

.home_footer_item:hover{
    background: #eeeeee;
}

.grow{
    flex-grow:1;
}

.round{
    border-radius:4px;
}

button{
    cursor:pointer;
    padding:6px 12px 6px 12px;
    font-family:Arial, sans-serif, Amiri;
    font-size:18px;
}

.button{
    background-color: #228b22;
    color:#ffffff;
    width:200px;
    cursor:pointer;
    padding:14px;
    font-family:Arial, Amiri;
    font-size:20px;
    font-weight:500;
    line-height:1.25;
    border:0;
    box-shadow: 2px 2px 4px #888888;
}

.home_button{
    margin:10px;
}

.button:hover{
    background: #226622;
}

a{
    color:#228b22;
    cursor:pointer;
    /* vertical-align:middle; */
    text-decoration:none;
}

 ol{
    padding:12px;
}

.link{
    color:#228b22;
    cursor:pointer;
    text-decoration:none;
}

.link:hover{
    color: #226622;
}

.small{
    width:30px;
}

.c{
    text-align:center;
}

.menu_icon{
    width:30px;
}

.lang_icon{
    width:30px;
    padding:6px 0px 0px 6px;
}

.header_title{
    padding:0px 6px;
    font-family:Arial, Helvetica, sans-serif, Amiri;
    font-size: 18px;
    flex-grow:1;
}

.home_page_logo{
    text-align:center;
    width:200px;
    margin:20px 2px 10px 2px;
}

.welcome_title{
    text-align:center;
    margin:10px 2px 20px 2px;
    font-family:Arial, Amiri;
    font-size: 22px;
}

.search{
    text-align:center;
    margin:10px 2px 0px 2px;
}

.srch{
    font-size: 16px;
    margin-bottom:8px;
    }

.search_inp{
    text-align:center;
    font-family:Arial, Amiri;
    font-size: 18px;
    line-height:1.75;
    margin-bottom:4px;
    border:1px solid #ccc;
    width: 90%;
}

.search_res_item{
    direction:ltr;
    font-family:Arial, Amiri;
    border-top:1px solid #ccc;
    font-size: 16px;
    color:#228b22;
    cursor:pointer;
    text-decoration:none;
    padding:12px;
}

.search_res_count{
    direction:ltr;
    font-size: 16px;
    padding:12px;
}

.lang_menu{
    background: #ffffff;
    position:absolute;
    height:0px;
    width:150px;
    top:48px;
    right:8px;
    overflow: hidden;
    box-shadow: 1px 1px 6px #cccccc;
    transition:all 0.3s ease;
}

.lang_menu_item{
    display:flex;
    padding:16px;
    cursor:pointer;
    font-family:Arial, Amiri;
    line-height:1;
}

.lang_menu_item:hover{
    background: #eeeeee;
}

.lang_menu_item_icon{
    width:40px;
    cursor:pointer;
}

.lang_menu_item_text{
    padding:4px 10px 0px 10px;
}

.main_menu{
    background: #ffffff;
    position:absolute;
    width:240px;
    top:47px;
    left:-250px;
    overflow: hidden;
    box-shadow: 1px 1px 6px #ccc;
    transition:all 0.3s ease;
}

.main_menu_item{
    padding:2px;
    cursor:pointer;
    font-family:Arial, Amiri;
    line-height:1;
    border-top:1px solid #cccccc;
    color:#228b22;
}

.main_menu_item_text{
    padding:0px 14px 14px 14px;
    font-size:20px;
}

.main_menu_item_no{
    position:relative;
    padding:2px 2px 0px 0px;
    font-size:12px;
    color:#a0a0a0;
    z-index:4;
}

.main_menu_item:hover{
    background: #eee;
}
    
.course_list_item_no{
    position:relative;
    padding:2px 2px 0px 0px;
    font-size:12px;
    color:#a0a0a0;
    z-index:2;
}

.lesson_item_text{
    padding:14px;
    font-size:20px;
}

.pbw{
    flex-grow:1;
    display:grid;
    grid-template-columns:repeat(10,1fr);
    grid-gap:1px;
    border-radius:4px;
    background:#ccc;
    margin-left:6px;
}

.pbe{
    padding:6px;
    font-family:Arial, Amiri;
    background:#62d662;
    color:#eee;
    text-align:center;
    cursor:pointer;
    text-decoration:none;
}

.pbe:hover{
    background:#62c662;
}

.lesson_sentence{
    padding:12px;
    font-family:Arial, Amiri;
    font-size:24px;
    line-height:1;
    direction:ltr;
}

.lsm{
    cursor:pointer;
    padding:12px;
    font-family:Arial, Amiri;
    font-size:24px;
    line-height:1.5;
}

.is{
    font-size:12px;
}

.lse{
    height:0px;
    margin:0px;
    padding:0px;
    border-radius:4px;
    font-family:Arial, Amiri;
    font-size:20px;
    line-height:0;
    background:#dfd;
    border:0px;
    overflow:hidden;
    transition: opacity 250ms ease-in-out;
}

.lao{
    padding:12px;
    font-family:Arial, Amiri;
    font-size:24px;
    line-height:1.5;
}

.laog{
    display:grid;
    grid-template-columns:auto auto;
    grid-gap:6px;
    padding:6px;
    min-width:300px;
    max-width:800px;
}

.aob{
    cursor:pointer;
    padding:12px;
    font-family:Arial, Amiri;
    font-size:20px;
    text-align:center;
    background:#eee;
    border-radius:4px;
    border:1px solid #ccc;
}

.aob:hover{
    background:#ddd;
}

.lesson_footer{
    display: flex;
    width:100%;
}

.lfi{
    flex-grow:1;
    padding:8px 2px 2px 2px;
    cursor:pointer;
    border-radius:4px;
}

.lfi svg{
    fill:rgba(0,0,0,0.5);
}

.lfi:hover{
    background:#ddd;
}

.static_page_title{
    padding:12px;
    font-family:Arial, Amiri;
    font-size:28px;
}

.static_page_body{
    font-size:22px;
    padding:0px 12px 12px 12px;
}

.contribution_list{
    direction:ltr;
    font-size:18px;
}

#cli{
    position:fixed;
    bottom:48px;
    width:100%;
}

#icli{
    visibility: hidden;
}

img.center{
    display:block;
    margin:0 auto;
    padding:10px 2px 2px 2px;
}

h1{
  color: navy;
}

h2{
  color:#888;
  font-size:1em;
  /* font-weight:400; */
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
}

h3{
  /* color:#888; */
  font-size:1em;
  /* font-weight:400; */
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
}

hr{
    border: none;
    height: 1px;
    background-color:#ddd; /* Modern Browsers */
}

.root{
    /* width:420px; */
    width:100%;
    /* margin:2px; */
    font-family:Arial, Helvetica, sans-serif, Amiri;
    font-size:24px;
    border:0px solid #cccccc;
    /* height:80vh; */
    overflow:scroll;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow:scroll;
    transition: opacity 250ms ease-in-out;
}

.above{
    width:420px;
    margin:2px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif, Amiri;
    font-size:24px;
    border:0px solid #cccccc;
    /* height:80vh; */
    overflow:scroll;
    transition: opacity 250ms ease-in-out;
}

.bottom{
    width:420px;
    margin:2px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif, Amiri;
    font-size:24px;
    border:0px solid #cccccc;
    overflow:scroll;
    transition: opacity 250ms ease-in-out;
}

.header{
    width:420px;
    /* margin:2px; */
    padding:8px 0px 8px 4px;
    font-family:Arial, Amiri;
    font-size:24px;
    transition: opacity 250ms ease-in-out;
    border-bottom:1px solid #ddd;
    top: 0;
    display: block;
}

.body{
    padding:4px;
    font-family:Arial, Amiri;
    font-size:24px;
    /* border:0px solid #cccccc; */
    /* height:90vh; */
    height: 100%;
    overflow:scroll;
    transition: all 250ms ease-in-out;
}

.table td, .table th{
    font-size:18px;
}

.body_m{
    /* width:420px; */
    margin:2px;
    padding:2px;
    font-family:Arial, Amiri;
    font-size:24px;
    transition: opacity 250ms ease-in-out;
    display: block;
}

/* #footer{
    text-align:center;
    border-top:1px solid #ddd;
    padding:6px;
    bottom:0px;
    position:fixed;
    width:100%;
    background-color:#fff;
    display:none;
} */

#play_bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    border:1px solid #cccccc;
}

.gr{
    background-color:#7ccf84;
    color:#7ccf84;
    width:10px;
    float:left;
    border:0px solid #eee;
    position:absolute;
    bottom:0;
}
.gr:hover{
    background-color: #080;
}
.wt{
    background-color:#fff;
    color:#fff;
    width:10px;
    float:left;
    border:0px solid #eee;
    position:absolute;
    bottom:0;
}

.rt{
    text-align:right;
    /* width:32px; */
}

.sn{
    text-align:right;
    color: #888888;
}

table{
    font-family:Arial, sans-serif, Amiri;
    border-collapse:collapse;
}

#sortableTable td, th{
    border:1px solid #ddd;
    padding:4px;
    font-size: 18px;
    line-height: 1.25;
}

td{
    position:relative;
    vertical-align:top;
}

th{
  background-color:#eee;
  cursor: pointer;
  position:sticky;
  top:0;
}

/* tr{
    overflow:hidden
} */

/* .sortable{
    cursor: pointer;
    user-select: none;
}

.sortable:hover{
    background-color: #f0f0f0;
} */

.hl{
    background-color: #ffffe0;
} */

.pid{
    /* font-size:24px; */
    padding:2px 12px 12px 12px;
    /* margin:4px 6px 4px 6px; */
    max-height: 999999px;
}

#days{
    font-size: 24px;
    border: none;
    background-color: #fff;
    text-align:center;
}

.bar{
    fill: #7ccf84;
    stroke-width:1;
    stroke: #eeeeee;
    cursor: pointer;
}

.bar:hover{
    fill: #008100;
}

svg line{
    fill: #7ccf84;
    /* stroke-width:2; */
    stroke: #808080;
}

.bmi line{
    /* fill: #7ccf84; */
    stroke-width:2;
    stroke: #cccccc;
}

svg circle{
    fill: #808080;
}

svg circle:hover{
    fill: #008100;
}

.tdt{
    padding:0px 8px 0px 14px;
    cursor:pointer;
}

.info{
    /* background: #f6f6f6;
    position:absolute;
    width:320px;
    top:0;
    left:0;
    overflow: hidden;
    box-shadow: 2px 2px 8px #ccc;
    transition:top 0.3s ease; */
    /* visibility: hidden; */
    display: none;
}

/* .info.visible{
    visibility: visible;
}     */

.tdt_menu{
    background:#f8f8f8;
    font-size:20px;
    position:fixed;
    width:320px;
    top:1px;
    left:1px;
    max-height:99vh;
    overflow:scroll;
    box-shadow: 2px 2px 8px #ccc;
    transition:top 0.3s ease;
    z-index: 99;
}

.info_vis{
    background:#ffffe0;
    font-size:20px;
    padding:8px 4px 4px 4px;
    position:fixed;
    width:409px;
    top:1px;
    left:1px;
    /* overflow: hidden; */
    box-shadow: 2px 2px 8px #ccc;
    transition:top 0.3s ease;
    /* visibility: hidden; */
    z-index: 99;
}

.info_vis td{
    /* border: 1px solid #ccc; */
    /* height:24px; */
}

.fl_nodata{
    padding:4px;
    width:90vw;
    font-size:32px;
    color:#888;
    text-align:center
}

.ytv{
    position: relative;
    width: 100%;
    height: 200px;
}

.img{
    /* position: relative; */
    /* width: 100%; */
    width:420px;
    /* height: 200px; */
    }

iframe {
    /* position: absolute; */
    width: 100%;
    height: 100%;
}
.tdt_menu_item{
    padding:2px;
    cursor:pointer;
    font-family:Arial, Amiri;
    line-height:1;
    border-top:1px solid #cccccc;
    color:#228b22;
    font-size:24px;
    padding: 18px 12px 18px 12px;
}

.tdt_menu_item:hover{
    background: #eee;
}

.tdt_menu_item svg{
    vertical-align:bottom;
    height:24px;
    width:24px;
}
.tdt_menu_item button{
    cursor:pointer;
    padding:6px 18px;
    /* font-family:Arial, sans-serif, Amiri; */
    /* font-size:18px; */
}

.flg{
    display:inline-block;
    padding: 0 18px;
}

    
#back_arrow{
    vertical-align:top;
    font-size:40px;
}

.ymd{
    font-size:18px;
    padding:4px;
    border-radius:4px;
    background-color:#ffffff;
    border:1px solid #ddd;
}

.pmb{
    font-size:40px;
    padding:4px;
    margin: 6px 0;
    width:62px;
    background-color:#eee;
    border:1px solid #ccc;
    border-radius:2px;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    user-select:none;
}

.num{
    font-size:40px;
    padding:4px;
    width:120px;
    border:1px solid #ccc;
    border-radius:4px;
    text-align:center;
}

.conm{
    font-size:20px;
    padding:4px;
    width:60px;
    border:1px solid #ccc;
    border-radius:4px;
    text-align:center;
}

.suc{
    background-color:#fff;
    border-radius:5px;
    padding:10px;
    direction:ltr;
    border:1px solid #ccc;
    font-family:arial;
    font-size:22px;
    line-height:normal;
    resize:vertical;
    overflow:auto;
    flex:auto;
    min-height:39px;
    color:#00f;
    margin:8px 4px 8px 2px;
    /* text-align:left; */
}

.suc_rtl{
    background-color:#fff;
    border-radius:5px;
    padding:10px;
    direction:ltr;
    border:1px solid #ccc;
    font-family:arial;
    font-size:22px;
    line-height:normal;
    resize:vertical;
    overflow:auto;
    flex:auto;
    min-height:39px;
    color:#00f;
    margin:8px 4px 8px 2px;
    font-family:Arial, Amiri;
    direction: rtl;
    /* text-align:left; */
}

.icon svg{
    vertical-align:bottom;
    width:32px;
    height:32px;
}

.icon{
    cursor: pointer;
    color: #888;
}

svg text{
    font-size:14px;
    alignment-baseline: middle;
}

.cc{
    /* padding: 14px 12px 2px 12px; */
    direction: rtl;
    text-align:center;
    /* visibility: hidden; */
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.close{
    color:#ff0000;
    padding:8px 4px 0 0;
    cursor:pointer;
    text-align:right;
}

.y{
    background-color:yellow;
}

.edt{
    display:none;
}

.pointer{
    cursor:pointer;
}

@media screen and (orientation:portrait){
    .header{
        max-width:100%
}

    .g-signin2{
        max-width:100%
}

    .bottom{
        max-width:100%
}

    .info_vis{
        max-width:calc(100% - 11px)
}

    .fl_nodata{
        max-width:100%
}
    .ytv{
        max-width:100%
    }
    .img{
        max-width:100%
    }

}

@media print
{    
    .np, .np *
    {
        display: none !important;
    }
}

  
.g-signin2{
    display:none;
    width:420px;
    padding: 0 0 12px 0;
}

.g-signin2 > div{
    margin: 0 auto;
}

.above_center{
    text-align:center;
    /* width:420px; */
    padding:4px 0;
    font-family:Arial, Amiri;
    font-size:24px;
    background-color: red;
    color:#fff;
    transition: opacity 250ms ease-in-out;
}

.center{
    text-align:center;
    /* width:420px; */
    padding:4px 0;
    font-family:Arial, Amiri;
    font-size:24px;
    /* background-color: red; */
    /* color:#fff; */
    transition: opacity 250ms ease-in-out;
}

.pp{
    padding: 24px 6px 6px 6px;
}

.pp input{
    font-size: 22px;
    color: #00f;
}

.pp select{
    font-size: 22px;
    color: #00f;
}


ul{
    padding: 12px 30px;
    margin: 0;
}

.oltoc{
    padding: 6px 0;
    /* margin: 0; */
    background-color:#f4f4f4;
    /* text-indent: -12; */
}
.litoc{
    padding: 2px 32px;
    /* margin: 0; */
    background-color:#f4f4f4;
    text-indent: -26px;
}

.rtl_li{
    direction: rtl;
    text-align: right;
}

.rtl{
    direction: rtl;
    text-align: right;
}

.ltr{
    direction:ltr;
    text-align:left;
}

.todo{
    /* margin-top:6px; */
    /* white-space: pre-wrap; */
    padding:2px 12px;
}

.lsn{
    font-size:28px;
    padding:4px;
    width:42px;
    border:1px solid #ccc;
    border-radius:4px;
    text-align:center;
}

.self_accountability table{
    width: 100%;    
}

.self_accountability svg{
    width: 32px;    
    height: 36px;    
}

.self_accountability td{
    /* width: 8%; */
    text-align:center;
    vertical-align: middle;
    font-size: 10px;
    color:#888888;
    cursor:pointer;
    line-height: 0;
}
.self_accountability th{
    /* text-align:center; */
    /* vertical-align: middle; */
    width: 8%;
    font-size: 14px;
    font-weight: 400;
    background-color: white;
    /* border: 0; */
}

.acc{
    display: none;
}

.acc_vis{
    transition:top 0.3s ease;
}

.acic1 svg{
    cursor: pointer;
    width:32px;
    color:#888;
}

.acic2 svg{
    cursor: pointer;
    color:#888;
    width:24px;
}

.c1 svg, .c2 svg, .c3 svg, .c11 svg, .c9 svg{
    width:24px;
    height:24px;
    cursor:pointer;
}

.home td{
    vertical-align: baseline;
}


.lt{
    text-decoration: line-through;
    color: #888888;
}

.green{
    color: #080;
}

.red{
    color: #e00;
}

.gray{
    background-color: #eee;
}

.tid {
    margin-top:6px;
    white-space: pre-wrap;
    padding:8px;
}

.txt{
    /* margin-n-top:6px; */
    padding:8px;
}

.vm{
    vertical-align: middle;
    }

#tid0s, #tid0c{
    margin: 6px 12px;
    display:none;
}

#record_detail td{
    padding:2px;
    border: 1px solid #ccc;
}


/* The ::before pseudo-element for the placeholder */
[contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder); 
    color: #aaa; 
    pointer-events: none;
    display: block;
    min-height:39px;
    font-family:Arial, Amiri;
    /* direction: rtl; */
}

.lsi{
    /* width:70px; */
    color:#888;
}

.lsi_no{
    width:5%;
    text-align: right;
    border-right: 1px solid #ccc;
    padding-right: 12px;
}

.lsi svg{
    width:40px;
    height:22px;
    float: right;
}

.ci{
    fill:#000
}
i{
    font-style:normal;
    color:#ff0000;
}

.cu{
    font-weight:bold;
    color:#000;
}

label{
    cursor:pointer;
    font-size:18px;
}

/* Freeze the top row (header) */
.fl th:first-child th{
    position: sticky;
    top: 0;
    /* z-index: 3; */
}

/* Freeze the first column */

/* .fl th:nth-child(2){
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #eee;
} */

/* .fl td:nth-child(2){
    position: sticky;
    left: 0;
    z-index: 1;
    background-color:#ffffe0;
} */

/* Ensure the top-left cell stays on top */
.fl th{
    z-index:2;
}
.fl tr:hover{
    background-color:#ffffe0;
}

.tbl td, th{
    border:1px solid #ddd;
    padding:4px;
    font-size: 18px;
    line-height: 1.25;
}


/* .fl tr:nth-child(even) {
    background-color: #f0f0f0;
} */
.tab_parent{
    padding:0px 0px 6px 0px;
    /* font-size:24px; */
    height:90vh;
    overflow:auto;
    transition: all 250ms ease-in-out;
}

.flx{
    display: flex;
    align-items: baseline;
}

.c11{
  display: flex;
  justify-content: center;
/* text-align:center; */
  font-size: 36px;
  margin-top: 0em;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
text-shadow:1px 1px 2px #ccc;
color:#e00;
}
.c9{
padding:0 0 6px;
/* font-size: 30px; */
font-size: 1.25em;
text-shadow:1px 1px 2px #ccc;
color:#00e;
}
.c1{
  display:flex;
  text-transform:uppercase;
  font-size: 26px;
  /* margin-top: 0.4em;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0; */
  /* font-weight: bold; */
text-shadow:1px 1px 2px #ccc;
color:#000;
    /* color:#080; */
}
.c2{
    display: flex;
    /* text-transform:uppercase; */
    font-size: 26px;
    /* margin-top: 0.2em; */
    /* margin-bottom: 0; */
    /* margin-left: 0; */
    /* margin-right: 0; */
    /* font-weight: bold; */
    text-shadow:1px 1px 2px #ccc;
    /* color:#00f; */
    color:#080;
}
.c3{
    display: flex;
    font-size: 26px;
    /* margin-top: 0.1em; */
    /* margin-bottom: 0; */
    /* margin-left: 0; */
    /* margin-right: 0; */
    /* font-weight: bold; */
    text-shadow:1px 1px 2px #ccc;
    color:#080;
}
.c4{
  display: flex;
  font-size: 26px;
  /* margin-top: 0em;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0; */
  /* font-weight: bold; */
text-shadow:1px 1px 2px #ccc;
/* color:#800; */
    color:#080;
}
.c0{
    display: block;
    text-shadow:1px 1px 2px #ccc;
    color:#444;
    transition: all 250ms ease-in-out;
}

.c0c{
    display: block;
    margin-top: 12px;
    padding: 8px;
    text-shadow:1px 1px 2px #ccc;
    color:#444;
    border: #ccc solid 1px;
    background-color: #f4f4f4;
    transition: all 250ms ease-in-out;
}

s{
display:inline-block;
width:16px;
height:46px;
text-decoration:none;
margin-right:3px;
border-right:1px dashed #888;
/* background:linear-gradient(#888, #888) no-repeat center/1px 100%; */
}
u{
display:inline-block;
width:20px;
font-size:24px;
color:#888;
height:46px;
text-align:center;
text-decoration:none;
}

.toc{
    padding: 0 12px;
    cursor:pointer;
    font-family:Arial, Amiri;
    border-top:1px solid #cccccc;
    color:#228b22;
    font-size:24px;
}

    .container {display: flex; height: 100vh;}
    .tree-view {width:200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; background: #f9f9f9; box-sizing: border-box;}
    .content-view {flex: 1; overflow-y: auto; border: 1px solid #ddd; padding: 20px; background: #fff; box-sizing: border-box; direction: rtl; font-size: 18px;}
    .toc ul {margin: 0; padding: 0; list-style: none;}
    .toc_rtl {direction:rtl;}
    .toc_rtl ul {margin: 0; padding: 0; list-style: none;}
    .toc ul.root-level > li {margin-left: 0;}
    .toc_rtl ul.root-level > li {margin-right: 0;}
    .toc ul.root-level > li::before,
    .toc ul.root-level > li::after {display: none;}
    .toc li {position: relative; margin-left: 16px;}
    .toc_rtl li {position: relative; margin-right: 16px;}
    .toc li::before {content: ''; position:absolute; left:-9px; top:0; bottom:0; width:1px; border-left:1px dashed #999;}
    .toc_rtl li::before {content: ''; position:absolute; right:-9px; top:0; bottom:0; width:1px; border-left:1px dashed #999;}
    /* li::after {content: ''; position:absolute; left:-9px; top:1.4ex; width:6px; height:1px; border-top:1px dashed #999;} */
    .toc li:last-child::before {height: 12px;}
    .node-content {display: flex; align-items: center; padding: 4px 0; cursor: pointer; user-select: none;}
    .node-content:hover {background: #e8f4fc; border-radius: 3px;}
    .node-content.selected {background: #e3f2fd; border-radius: 3px;}
    .expand-icon {display:inline-block; font-size:20px; width:16px; height:16px; margin-right:5px; text-align:center; line-height:16px; color:#999; cursor:pointer; user-select:none;}
    .node-title {color:#080; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .content-title {font-size: 1.4em; margin-bottom: 0px; padding-bottom: 0px; border-bottom: 0px solid #333; text-shadow:1px 1px 2px #ccc; color:#00e;}
    .content-text {color: #333;}

.footer_extend{
    flex-grow: 1;
    overflow-y: auto;
    /* background-color: #eee; */
}

.em_ph{
    text-align:center;
    font-family:Arial, Amiri;
    font-size: 18px;
    line-height:1.75;
    margin-top:4px;
    border:1px solid #ccc;
    width: 220px;
}

.nav-bar {
  position: fixed;
  bottom: -60px; /* Start hidden below the viewport */
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: bottom 0.3s ease-in-out;
  z-index: 1000;
}

.nav-bar.visible {
  bottom: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  width: 20%;
  color: #777;
  transition: all 0.3s;
  cursor: pointer;
  border-radius: 2px;
}

.nav-item:hover {
  background-color: #f0f0f0;
  color: rgb(66, 133, 244);
}

.nav-item.active {
  color: #4285f4;
}

.nav-icon {
  font-size: 24px;
}

.nav-text {
  font-size: 12px;
  font-family: Arial, sans-serif;
}

.ytb{
    vertical-align:sub;
}

#top{
    display: none;
    position: fixed;
    top: 14px;
    /* left: 14px; */
    z-index: 99;
    cursor: pointer;
    color: #080;
    /* background-color: #ccc; */
    /* opacity:0.5; */
    width: 24px;
    height: 24px;
    padding: 0px;
}

.cal{
    text-align:right;
    padding-right:4px;
    /* vertical-align:top; */
}

.bl{
    color:#00f;
}

.nowrap{
    white-space: nowrap;
}

#tgtc{
    display: none;
    cursor: pointer;
}
.tgtc{
    display: block;
}