html {
    /* font-weight: 900; */
}

*
{
    margin: 0px;
    padding: 0px;
}

a:link {
    color: #000;
    text-decoration: none;
}

a:visited {
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

#PageFrame
{
    width: 100%;
}

a:active {
    color: #000;
    text-decoration: none;
}

.TopBox {
    box-shadow: 0px 0.1em 1.2em rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.phrase-table,.translation-table
{
    margin: auto;
}

.phrase-table td {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid;
}

.translation-table td {
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid;
    /* padding: 5px; */

}

.translation-table td a {
    margin-left: 50px;
}

.translation-table td input {
    width: calc(100% - 150px);
    height: 50px;
}

#HeadFrame {
    width: 100%;
}

#Head
{
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    display: block;
    
    width:805px; 
}

#Head button
{
    margin: 5px;
    /* display: none; */
}

#SearchFrame
{

    display: inline-block;
}

#Head input {
    margin: 5px;
    vertical-align: top;
    height: 45px;
    width: 300px;
    /* display: inline-block; */
}
#Head select {
    margin: 5px;
    vertical-align: top;
    height: 50px;
    width: 300px;
    /* display: inline-block; */
}

.icon {
    height: 50px;
    width: 25px;
    float: left;
    font-size: 25px;
    vertical-align: middle;
    margin-right: -25px;
    /* margin-top: 12.5px; */
    /* display: table-cell; */
}

.tagFrame {
    /* border: 1px solid; */
}

.appliedTag {
    text-align: center;
    border: 1px solid;
    display: inline-block;
    padding: 5px;
    margin: 5px;
}

.tagAddButton {
    text-align: center;
    border: 1px solid;
    display: inline-block;
    padding: 5px;
    margin: 5px;
}

.tagInput {
    text-align: center;
    border: 1px solid;
    display: inline-block;
    padding: 7px;
    margin: 5px;
}

td.thai {
    font-size: 50px;
}

td.roman {
    font-size: 30px;
}

td.tone {
    /* height: 50px; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top;
}

.toneF {
    background-image: url('/Tones/ThaiTones-F.svg');
}

.toneH {
    background-image: url('/Tones/ThaiTones-H.svg');
    content: "high";

}

.toneL {
    background-image: url('/Tones/ThaiTones-L.svg');
    content: "high";
}

.toneM {
    background-image: url('/Tones/ThaiTones-M.svg');
    content: "high";

}

.toneR {
    background-image: url('/Tones/ThaiTones-R.svg');
    content: "high";
}

table, th, td {
    /* border: 1px solid; */
}