@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400&display=swap');
body{font-size:81.25%;color:#111111;font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;background-color:#FFF;background-image:url(/images/bg.png);margin-left:0px;margin-top:0px;text-rendering: optimizeLegibility;}

input {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;outline:0;}
select {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;outline:0;}
textarea {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;outline:0;}
td {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;}
li {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;}
ul {font-family:'Sarabun',Tahoma,Segoe UI,Arial,Verdana,sans-serif;}
div {width:auto;border-radius:5px;}
p {width:100%;display:block;margin:0px;padding:0px;}
img {max-width:100%;height:auto;width:auto\9;}
a img {border:none;} 

a:link{text-decoration:none;color:#353d5d;border-bottom:1px dotted #a1a1b1;}
a:active{text-decoration:none;color:#BB0000;}
a:visited{text-decoration:none;color:#353d5d;}
a:hover{text-decoration:none;color:#f86706;}

#container{width:1080px;margin:0 auto;overflow:hidden;padding-left:5px;padding-right:5px}

.main{background-color:#5894f5;padding:10px;border:1px solid #3665b2;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding-bottom:15px;background:-webkit-linear-gradient(top, #3665b2, #5894f5);background:-moz-linear-gradient(top, #3665b2, #5894f5);}
.input{height:25px; margin:0 auto;text-align:left;background-color:#FFFFFF;border:0px solid #ecd345;padding:5px;vertical-align:top;position:relative;border-radius:7px;}
.result{margin: 0 auto;text-align:left; background-color:#FFFFFF; border: 1px  solid #FFFFFF;padding:8px ;vertical-align: top;position:relative;border-radius: 7px;margin-top:20px; }
.word {outline:0;}

.hdr-h1{font-size:2.5em;color:#226;margin-top:5px;cursor:pointer}
.hdr-h3{font-size:1.15em;color:#ed420b;margin-top:-10px}
.hdr-info {font-size:0.92em;margin-top:8px;padding:5px;margin-bottom:12px}

.box-h2{color:#FFF;font-weight:200;margin-top:-3px}
.box-info{font-size:0.92em;padding-right:53px;margin-top:-10px;color:#FFFFFF;}

.word-h1 {margin-bottom:-5px;font-weight:200;margin-top:0px}
.word-link {font-size:1.46em; border-top: 1px dashed #DDDDDD; margin-top:10px;padding-top:10px;padding-bottom:12px;border-radius:0px}
.word-meaning {font-size:1.08em;line-height:1.8em}
.word-ref {font-size:0.92em;color:#cccccc;margin-top:5px;}
.word-notmach {font-size:1.2em;color:#cc0000;margin-top:-10px;margin-bottom:10px;}

.list-lang{ float:left;width:133px; text-align:left; margin-right:0px;height:28px; }
.link-partner{font-size:.85em;color:#999;text-decoration:none;padding-right:3px;border:none}

.submit {margin-top:3px;box-shadow: 0px 0px 0px 0px #f0f7fa;background:linear-gradient(to bottom, #6298ee 5%, #2c65c0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6298ee', endColorstr='#2c65c0',GradientType=0);background-color:#6298ee;border-radius:7px;border:2px solid #f7f8fa;display:inline-block;cursor:pointer;color:#ffffff;font-size:1.2em;padding:4px 13px;text-decoration:none;text-shadow:2px 2px 0px #1940cc;}
.submit:hover {background:linear-gradient(to bottom, #2c65c0 5%, #6298ee 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c65c0', endColorstr='#6298ee',GradientType=0);background-color:#2c65c0;}
.submit:active {position:relative;top:1px;}

.m-5 {margin:5px}.m-l5 {margin-left:5px}.mt-5 {margin-top:5px}.mr-5 {margin-right:5px}.mb-5 {margin-bottom:5px}
.m-10 {margin:10px}.m-l10 {margin-left:10px}.mt-10 {margin-top:10px}.mr-10 {margin-right:10px}.mb-10 {margin-bottom:10px}
.m-15 {margin:15px}.m-l15 {margin-left:15px}.mt-15 {margin-top:15px}.mr-15 {margin-right:15px}.mb-15 {margin-bottom:15px}
.m-20 {margin:20px}.m-l20 {margin-left:20px}.mt-20 {margin-top:20px}.mr-20 {margin-right:20px}.mb-20 {margin-bottom:20px}

.pad-5 {padding:5px}.pad-10 {padding:10px}
.text-center {text-align:center;}
.float-left {float:left !important;}
.bd-0{border:0px  !important;border:none !important;}
.cls {zoom:1;clear:both;line-height:0;height:0;}
.ptr {cursor:pointer}

.fs-small {font-size:0.85em !important;}
.fs-large {font-size:1.23em !important;}

@media only screen and (min-width: 768px) and (max-width: 959px) {
#container{width:100%;}
.list-lang{width:125px;}
}

@media only screen and (max-width: 767px) {
#container{width:99.5%;}
.list-lang{width:125px;}
}

@media only screen and (min-width: 620px) and (max-width: 767px) {
#container{width:100%;}
#translator{display:none;}
.list-lang{width:20%;}
}

@media only screen and (min-width: 480px) and (max-width: 619px) {
#container{width:100%;}
#translator{display:none;}
.list-lang{width:20%;}
}

@media only screen and (min-width:320px) and (max-width:479px) {
#container{width:100%;}
#translator{display:none;}
.list-lang{width:33%;}
}

@media only screen  and (max-width:319px) {
#container{width:100%;}
#translator{display:none;}
.list-lang{width:33%;}
}