/*
Document   : dict-style
Created on : Sep 9, 2009, 4:44:21 PM
Author     : Theeranit
Description:
Purpose of the stylesheet follows.
*/
@import url(Kanit/style.css);
@import url(../../css/supermarket/styles.css);
@import url(../../css/Noto_Sans_Thai/style.css);
@import url(../../css/NotoSansJP/style.css);

*{
    margin: 0;
    padding: 0;
    font-family: Tahoma, Arial;
}

body {
    font-size: 7.5pt;
    width: 100%;
    background: #FFFFFF;
    color: #2a2a2a;
    overflow-x: hidden;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    /* min-height: 372px;*/
}


/*
body[orient="landscape"]{
    min-height: 268px;
    background-color:red;
}

*/

#topbar{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 100;
}

#pageTitle {
    height: 4.5em;
    width: 100%;
    text-align: center;
    background: url(/mobile/css/images/bg-header-2x.png) repeat-x;
    background-size: 100% 4.5em;
    display:flex;
    justify-content:space-between;
}

#logo-container {
  position: absolute;
  width: 100%;
}

img#logo {
	width: 17.2em;
	margin: 0.5em 0;
}

img#divider {
	position:absolute;
	left: 5em;
	top: 0;
}

a.linkbutton{
	position:absolute;
	left: 0;
	top: 0;
	width: 4.8em;
	height: 4.4em;
}

a.linkbutton img{
	width: 2.8em;
	padding: 1em;
}

a.linkbutton, #login-container {
  z-index: 2;
}

#login-container {
  color: #FFF;
  font-size: 16px;
  padding-right: 7px;
}

#login-container a {
  color: #FFF !important;
}

.form{
    width:100%;
    /* text-align:center;*/
}

.searchStyle{
    font-size: 2.2em;
    height: 1.556em;
    line-height: 1.556em;
    font-weight: normal;
    width: calc(100% - 8em);
    margin-left: 0.7em;
    margin-top: 0.333em;
    padding: 0 0.833em;
    border: 1px solid #BFBFBF;
    -moz-border-radius: 0.833em;
    -webkit-border-radius: 0.833em;
    -khtml-border-radius: 0.833em;
    border-radius: 0.833em;
}

.mainContainer{
    height: 5em;
    line-height: 4.2em;
    background-color: #E6E6E6;
    vertical-align: middle;
    position: relative;
}

#_suggest_disp, #history-suggest {
    visibility: hidden;
    font-size: 1.7em;
    line-height: 2em;
    z-index: 100;
    position:fixed;
    margin: auto;
    background: white;
    top: calc(4.5em + 1em);
    left: 0;
    right: 0;
    text-align: left;
    overflow: auto;
}
#_suggest_disp table,
#history-suggest table {
    width: 100%;
}

#_suggest_disp td,
#history-suggest td {
    border: none;
    border-bottom: 1px solid gray;
    padding: 0 0 0 1em;
}

#erase-btn{
	font-size: 1em;
	background: url(/mobile/css/images/bt-clear-2x.png) no-repeat;
	background-size: 2.4em;
	width: 2.4em;
	height: 2.4em;
	position: absolute;
	top: 1.3em;
	cursor: pointer;
}

div.read-bt{
  background: url(/images/2017_icon/Dict_read@2x.png) no-repeat center center;
  background-size: 2.6em;
  width: 2.6em;
	height: 2.6em;
  position: absolute;
  top: 0.7em;
  right: 7.7em;
  cursor: pointer;
}
/*
.searchStyleLandscape{
	float:left;
    font-size:18px;
    height:28px;
    line-height:26px;
    font-weight:normal;
    -webkit-border-radius:15px;
    padding-left:27px;
    padding-right:0px;
    background: #FFFFFF url('search-icon.png') no-repeat left center;
    margin-left:5px;
    margin-right:5px;
    margin-top:7px;
    width:373px;
}
*/
.read-bt-accent {
  white-space: nowrap;
  position: absolute;
  width: 3em;
  cursor: pointer;
  top: 1.8em;
  right: 6em;
}
.read-bt-dropdown {
	/* width: 34px; */
	overflow: hidden;
	position: relative;
  border-radius: 3px;
  padding: 0 5px;
}
.read-bt-dropdown::after {
	content: "▼";
	padding: 0px 3px 0 0;
  position: absolute;
  left: 16px;
  top: -11px;
  z-index: 1;
  text-align: center;
  width: 10%;
  pointer-events: none;
}
.read-bt-dropdown select, .read-bt-dropdown::after {
  color: #ff6404;
  font-size: 9px;
}
.read-bt-dropdown select {
  z-index: 10;
  cursor: pointer;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.read-bt-dropdown select:focus {
  outline: none;
}
.read-bt-accent, .read-bt-dropdown, .read-bt-dropdown select {
  height: 3.6em;
}
.hide {
	display: none!important;
}

.button {
	font-size: 1em;
	background: url(/images/2017_icon/Dict_BT_Search@2x.png) no-repeat center center;
  background-size: 3.6em;
  width: 3.6em;
	height: 3.6em;
  margin-top: 0.7em;
	margin-right: 1em;
	border: 0;
	float: right;
}

#topBox {
    text-align: center;
}

#topBox a{
    font-weight: normal;
    font-size: 2.4em;
	color: #FE6A0E;
    text-decoration: none;
}
#menu{
    text-align:center;
    padding-top:1em;
    background-color:#ced4da;
}
#mapLink{
    text-decoration:none;
}

#menu li{
    font-weight:bold;
    display:inline;
    margin-left:2em;
    margin-right:2em;
}

#content{
	padding: 0.5em;
  margin-top: 95px;
}

#content.with-banner-space {
  margin-top: 227px !important;
}

div#result {
    font-size: 1.6em;
}

div#result table{
    text-align: left;
    border-top: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
    border-bottom: none;
    border-left: 1px solid #cfcfcf;
    border-collapse: separate;
    border-spacing: 0;
    -moz-border-radius: 0.625em;
    -webkit-border-radius: 0.625em;
    -khtml-border-radius: 0.625em;
    border-radius: 0.625em;
    width: 100%;
}

div#result td{
	padding: 0 0.188em;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #cfcfcf;
	border-left: none;
	/*vertical-align: top;*/
}
div#result table tr td:first-child {
  min-width: 40%;
}
div#result table tr td:last-child {
  word-wrap: break-word;
  width: 60%;
  max-width: 10em;
}

div#result table.width-50-50 tr td:first-child {
  width: 50%;
}
div#result table.width-50-50 tr td:last-child {
  word-wrap: break-word;
  width: 50%;
}
div#result table tr:last-child td{
	-moz-border-radius: 0 0 0 0.625em;
    -webkit-border-radius: 0 0 0 0.625em;
    -khtml-border-radius: 0 0 0 0.625em;
    border-radius: 0 0 0 0.625em;
}
div#result table tr:last-child td:last-child{
	-moz-border-radius: 0 0 0.625em 0;
    -webkit-border-radius: 0 0 0.625em 0;
    -khtml-border-radius: 0 0 0.625em 0;
    border-radius: 0 0 0.625em 0;
}
iframe#truehits-iframe{
	left: 0;
	position: absolute;
	top: 0;
	visibility: hidden;
}

div#result i font font{
	color: #FE6A0E;
}

div#result a{
	color: #FE6A0E !IMPORTANT;
	text-decoration: none;
}

div#result a.graylink{
	color: gray !IMPORTANT;
  text-decoration: underline;
}

div#result.with-banner-space {
  margin-top: -95px !important;
}

a.audio-ready {
  background: url(/images/2017_icon/Dict_read@2x.png) no-repeat left top;
  background-size: 20px 16px;
  width: 13px;
  height: 20px;
  display:inline-block;
  margin-bottom:-5px;
}

a.audio-ready.is-playing {
  cursor: default;
  width: 20px;
}

/* favorite star */
a.favorite-star {
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  margin-top: -3px;
  position: absolute;
}

a.favorite-star.favorite {
  background: url(/images/Favorite_web/ic_favorite24px/ic_web_fav24-selected@2x.png) no-repeat;
  background-size: 24px;
}
a.favorite-star.unfavorite {
  background: url(/images/Favorite_web/ic_favorite24px/ic_web_fav24-unselected@2x.png) no-repeat;
  background-size: 24px;
}

/* phonemes */
th.show-phonemes {
  border-bottom: 1px solid #BFBFBF;
  padding: 2px 4px;
}


/* feed */
#home-feed-container {
  text-align:left;
  width: calc(100% - 10px*2);
  max-width: calc(700px - 10px*2);
  padding: 7.5px 10px;
  margin: auto;
  background-color:#FFF;
  font-size: 14px;
}a

#home-feed-container * {
  font-family: Kanit;
  font-weight: 300;
}

#home-feed-container a, #search-feed-container a,
div#result #home-feed-container a, div#result #search-feed-container a {
  color:#000 !important;
  text-decoration:none;
}

#home-feed-container b, #home-feed-container strong {
  font-weight: 500;
}

#home-feed-container div:not(:last-child), #home-feed-container li:not(:last-child) {
  margin-bottom: 0.75em;
}

#home-feed-container ul {
  padding: 0 1em;
}

#home-feed-container ul li {
  list-style-position: outside;
}

/* #home-feed-container li div {
  margin-left: -0.25em;
} */

#search-feed-container {
  width: 100%;
  overflow-x: auto;
  display: flex;
  background-color: rgb(248, 248, 248);
  margin:0;
  margin-right: 10px;
  position: relative;
}

#search-feed-container * {
  font-family: Kanit;
  font-weight: 300;
}

#search-feed-container b, #search-feed-container strong {
  font-weight: 500;
}

#search-feed-container .feed-box-container {
  width: 80%;
  flex-shrink: 0;
  padding: 12px 10px;
}

#search-feed-container .feed-tag {
  position: absolute;
  height: 20px;
  margin-left: -0.5em;
  margin-top: 3px;
}

#search-feed-container .feed-box {
  height: 100px;
  border: 1px solid #cfcfcf;
  padding: 8px 6px;
  border-radius:5px;
  display: flex;
}
#search-feed-container .feed-box .blog-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

#search-feed-container .feed-box .blog-thumb.align-left {
  object-position: left;
}

#search-feed-container .feed-box .blog-thumb.align-right {
  object-position: right;
}

#search-feed-container .feed-box .description {
  width: calc(95% - 100px);
  margin-left: 10px;
  font-size: 15px;
  word-break: break-word;
  overflow: hidden;
  line-height: 20px;
  height: 100px;
  position:relative;
}

#about-ads {
	margin: 12px 0 0;
  border: 1px solid #ffd8b2;
  font-size: 12pt;
}
#about-ads .latest-header {
  background: url(/mobile/css/images/bg-header-2x.png) repeat-x 20px center;
  padding: 5px 0;
  margin: 0;
}
.about-ads-content {
  display:flex;
  align-items:start;
  background-color: #fff4ea;
  padding: 7px 15px;
}
.about-ads-image {
	width: 46px;
  border: 2px solid #ffd8b2;
  flex: 0.25;
  border-radius: 7px;
}

/* about page for mobile */
div#result.about-container {
  margin-top: 10px;
  width: 100%;
  word-wrap: break-word;
}

div#result.about-container h2.page-header{
	color:#fff;
	padding-left: 6px;
	background: url(/mobile/css/images/bg-header-2x.png) repeat-x 20px center;
	line-height: 1.8;
  font-size: 16px;
}

div#result.about-container .page-header a {
	color:#fff;
}

div#result.about-container > ol {
  margin-top: 5px;
}

div#result.about-container ol, div#result.about-container ul {
  margin-left: 1.5em;
}

/* language selector */
#language-menu-container {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
}

#language-menu-container div.language-menu-bg {
  width:100%;
  height:200%;
  position:fixed;
  background-color:rgba(0,0,0,0.5);
}

#language-menu-container div.language-menu {
  position:absolute;
  background-color:white;
  margin:auto;
  top:50%;
  left:50%;
  max-width: 65%;
  max-height: 50%;
  min-width:150px;
  min-height: 250px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  overflow: auto;
  padding: 10px 8px;
}

#language-menu-container div.language-menu div.close-bt {
  cursor:pointer;
}

#language-menu-container div.language-menu label * {
  margin: 8px 10px;
  font-size: larger;
}

.not-found-message {
  font-size: large;
  font-family:Kanit;
  font-weight: 300;
  color:red;
  margin-right: 1rem;
}

.not-found-button {
  background-color:#FF7F04;
  font-weight: 300;
  padding: 5px 18px;
  border-radius: 6px;
  display:inline-flex;
  justify-content:center;
  align-items: center;
  font-family:Kanit;
}

.not-found-button * {
  color:white;
}

.not-found-message-container {
  display: flex;
  align-items: center;
  margin: 3px 0;
}

/* premium */
div.signin {
  font-size: 16px;
  color: white;
  margin: 0 10px;
  z-index: 999;
  height: 100%;
  display: flex;
  align-items: center;
}

div.signin a,
div.signin a:link, div.signin a:visited,
div.signin a:hover, div.signin a:active {
  color: white;
}

.user-profile {
  height: 1.75em;
  width: auto;
  border-radius: 100%;
  cursor: pointer;
}
div.user-dropdown-container {
  position: absolute;
  top: 2.85em;
  right: 0.25em;
  display: flex;
  flex-direction: column;
  border: 1px solid #BFBFBF;
  border-radius: 5px;
  background-color: rgb(248, 248, 248);
}
div.user-dropdown-container * {
  text-align: right;
  min-width: 10em;
  padding: 0.25em 0.5em;
}
div.user-dropdown-container i {
  color: #666;
}
div.user-dropdown-container *:not(:last-child) {
  border-bottom: 1px solid #BFBFBF;
}

div.signin div.user-dropdown-container a.user-dropdown-list,
div.signin div.user-dropdown-container a.user-dropdown-list:link,
div.signin div.user-dropdown-container a.user-dropdown-list:visited,
div.signin div.user-dropdown-container a.user-dropdown-list:hover,
div.signin div.user-dropdown-container a.user-dropdown-list:active {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

div.fav-star {
  width: 20px;
  height: 20px;
  position: absolute;
  margin-left: 7.5px;
  display: inline-block;
  background-size: 100%;
  cursor:pointer;
}
div.fav-star.fill-star {
  background-image: url(/images/Fill_Star.svg);
}
div.fav-star.empty-star {
  background-image: url(/images/Empty_Star.svg);
}

#favorite-containter {
  font-size: 16px;
  width: 100%;
  margin-top: 2em;
}
div.favorite-header {
  height: 2.25em;
  background: url(/mobile/css/images/bg-header-2x.png) repeat-x;
  color: white;
  display: flex;
  align-items: center;
  padding-left: 1em;
}
div.premium-favorite > * {
  border-bottom: 1px solid #BFBFBF;
  padding: 0.5em 1.5em;
}

div.hanzi-stroke {
  width: 4rem;
  height: 4rem;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
}

img.play-btn {
  width:12px;
  height:auto;
  position:absolute;
  top:calc(4rem - 13.5px);
  left:4rem;
}

#hanzi-container {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:rgba(0,0,0,0.5);
}

#hanzi-container svg {
  height: 40%;
  width: auto;

  background-color: white;
}

.pronunc-title > span {
  margin-right: 1.25rem;
}

.pratice-btn {
  font-family: NotoSansThai;
  font-size: 12px;
  font-weight: 400;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.25rem;
  border: 1.2px solid #FE6A0E;
  border-radius: 25px;
  background: white;
  max-width: 95px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.pratice-btn:hover {
  background: #fff5ef;
}

.zh-char, .jp-char {
  color: black !important;
  font-size: 4rem;
  line-height: 4rem;
}

.zh-char {
  font-family: 'KaiTi' !important;
}

.jp-char {
  font-family: 'NotoSansJP' !important;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}