*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:0.9rem;
    max-width:  1200px;
    min-width:100vh;
    background-color:#E3F6FD;
    display:block;
    margin:25px auto;
    border:1px solid #0c0c0c;
}

#header h1{
    font-size:1.5rem;
    text-align:center;
    color:#060606;
}

#container{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    gap:20px;
}
#container h2{
    font-size:1.4rem;
    background-color:#C9F1FF;
    text-align:center;
    padding :15px 30px;
    margin-bottom: 25px;
    color:#0e02fd;
}


#content{
    width:90%;
    display:grid;
    grid-template-columns: 1fr 5fr;
    /* gap :15px 10px;  */
}

#sidebar{
    display:block;
    width:100%;
    height:100vh;
    margin: 0 auto;
    background-color:#C9F1FF;
}

#uce-pdf{
    display:block;
    text-align:center;
    margin: 0 15px 15px 0;
}

#uce-pdf i{
    font-size:48px;
    color:#640082;    
}

#itemlists{
    list-style-type: none;
    padding: 15px 0px 15px 15px;
}
.header-list{
    display:block;
    height:60px;
    text-align:center;
    font-weight:600;
    font-size:1.2rem;
    padding: 3% 0;
    margin-bottom:25px;
    background-color:#64caef;
    color:#0c0c0c;
}
.items{
    color: rgb(12, 12, 12);
    font-size:1rem;
    padding: 10px 5px;
    cursor: pointer;
}

.item-focus{
    background-color:#007dc5;
    text-align:center;
    font-size:1rem;
    font-weight:bold;
    color:#effb08;
    margin-right:15px;
    border-radius:15px;
}

#content section{
    
    margin: 0 5px 25px 10px;
}

#details{
    width:90%;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.uce-input{
    width:90%;
    display:inline-block;
    align-items: center;
    height:25px;
    border:1px solid #a5b4c8;
    border-radius:5px;
    text-align:center;
    font-size:0.9rem;
    color:#0f0f0f;
}
.uce-input:focus{
    color:#0000ff;
    outline:none;
    border:2px dotted #ff2600;
}

.uce-input::placeholder{
    color:#b4b2b2;
}

.result{
    color:#970606;
}

.result-bg{
    background-color:#C9F1FF;
}

.uce-en{
    color:#1007fe;
}

/* Table 1 */
#table-tss,
#table-bod,
#table-mlss,
#table-sv30,
#table-bod5,
#table-fm{
    width:100%;
    border-collapse:collapse;
    border:1px solid #0c0c0c;
    text-align:center;
}

#table-tss tr td,
#table-bod tr td,
#table-mlss tr td,
#table-sv30 tr td,
#table-bod5 tr td,
#table-fm tr td{
    padding:7px;
    border:1px solid #0c0c0c;
}

#table-tss tr:first-child td,
#table-bod tr:first-child td,
#table-mlss tr:first-child td,
#table-sv30 tr:first-child td,
#table-bod5 tr:first-child td,
#table-fm tr:first-child td
{
    font-weight:bold;
}

#table-tss tr td:nth-child(4),
#table-tss tr td:nth-child(5),
#table-tss tr td:nth-child(6),
#table-tss tr td:nth-child(7),
#table-tss tr td:nth-child(8),
#table-bod5 tr td:nth-child(4),
#table-bod5 tr td:nth-child(5),
#table-bod5 tr td:nth-child(6)
{
    width:13%;
}
#table-mlss tr td:nth-child(3),
#table-sv30 tr td:nth-child(3),
#table-bod5 tr td:nth-child(3){
    width:8%;
}

/* Table 2 */
#table-bod tr td:nth-child(2),
#table-bod tr td:nth-child(3),
#table-bod tr td:nth-child(4){
    width:15%;
}

/* Table 3  */

/* Table 4 */

#table-sv30 tr td:first-child{
    width:10%;
}

#table-mlss tr:nth-child(1),
#table-mlss tr:nth-child(2),
#table-mlss tr td:nth-child(1),
#table-mlss tr td:nth-child(2),
#table-mlss tr td:nth-child(3),
#table-sv30 tr:nth-child(1),
#table-sv30 tr:nth-child(2),
#table-sv30 tr td:nth-child(1),
#table-sv30 tr td:nth-child(2),
#table-sv30 tr td:nth-child(3),
#table-bod5 tr:nth-child(1),
#table-bod5 tr td:nth-child(1),
#table-bod5 tr td:nth-child(2),
#table-bod5 tr td:nth-child(3),
#table-fm tr:nth-child(1),
#table-fm tr td:nth-child(1),
#table-fm tr td:nth-child(2),
#table-fm tr td:nth-child(3)
{
    font-size:0.9rem;
}

#table-mlss tr td:nth-child(2),
#table-sv30 tr td:nth-child(2),
#table-fm tr td:nth-child(2){
    text-align:justify;
    padding: 10px;
}


#table-mlss tr td:nth-child(4),
#table-mlss tr td:nth-child(5),
#table-mlss tr td:nth-child(6),
#table-sv30 tr td:nth-child(4),
#table-sv30 tr td:nth-child(5),
#table-sv30 tr td:nth-child(6),
#table-fm tr td:nth-child(4),
#table-fm tr td:nth-child(5),
#table-fm tr td:nth-child(6){
    width:12%;
}