@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap");

.SiteMain {
  margin-top: 50px !important;
  min-width: 1200px !important;
}

.SiteHeader-holder,
.BackgroundPanel,
.MetaEditor-beforeWorks-panel,
.Form-row-header-tools,
.MetaWorkCard.shadowed-block.MetaEditor-card .Form > div:nth-last-child(1),
.MetaWorkCard.shadowed-block.MetaEditor-card .Form > div:nth-last-child(2),
.MetaWorkCard.shadowed-block.MetaEditor-card .Form > div:nth-last-child(3),
.MetaEditorFooter,
.RatePage,
.SeoBlock.shadowed-block.SiteSeo,
.SiteFooter-copyright,
.SiteFooter,
.MetaWorkCard-translation,
.SuggestedKeywords-legend,
.Form-row-buttons-center,
.MetaWorkCard-keywords-sort,
.KeywordHoveringContainer-popup.DropdownContent,
span.cm-separator,
.KeywordSuggestBox-keywords-one .KeywordSuggestBox-keywords-one-comma,
.KeywordSuggestBox-keywords-one
  .KeywordSuggestBox-keywords-one-block.state-selected,
span.KeywordSuggestBox-keywords-one-block.kwd-block::after,
.Form-row.MetaWorkCard-keywords .Form-row-header,
.KeywordSuggestBoxPresenterTable-row:has(
    .KeywordSuggestBox-keywords-one
      .KeywordSuggestBox-keywords-one-block.state-selected
  ),
.ResizingHorizontalLine-resizer {
  display: none !important;
}

.WorkPickerWithToolbar,
.MetaWorkCard-keywordsButtons {
  position: absolute !important;
  top: -500px !important;
  visibility: hidden !important;
}

body {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  position: relative !important;
  top: 0px !important;
  background: #f5f5f5 !important;
}

div#__layout {
  max-width: 1200px !important;
}

div#__nuxt {
  visibility: hidden;
  display: flex !important;
  justify-content: center !important;
  position: relative;
  top: -50px;
}

.TwoColumnAppLayout.state-one-column {
  display: flex !important;
  flex-direction: row !important;
  height: 95vh !important;
  justify-content: space-around;
}

TwoColumnAppLayout-left {
  width: 45vw !important;
  height: 99vh !important;
}
TwoColumnAppLayout-right {
  width: 45vw !important;
  height: 99vh !important;
}

.KeywordSuggestBox[data-v-540afcf1] {
  background: none !important;
  border: none !important;
}

/* .TwoColumnAppLayout.state-one-column div {
  height: 50%;
}*/

.KeywordSuggestBoxPresenterList.KeywordHoveringContainer-canvas {
  max-height: calc(100vh - 150px) !important;
  cursor: default !important;
  direction: rtl !important;
}

.TwoColumnAppLayout.state-one-column .TwoColumnAppLayout-left[data-v-ef1a7fc2],
.TwoColumnAppLayout.state-one-column
  .TwoColumnAppLayout-right[data-v-ef1a7fc2] {
  width: 45% !important;
}

.KeywordBox.state-good-number-of-keywords.state-good-number-of-keywords-preview,
.KeywordBoxPresenterSimple.KeywordBox-presenter {
  height: calc(100vh - 150px) !important;
  cursor: default !important;
}

.Form-row-input {
  height: auto !important;
}

.KeywordBox-presenter .cm-word,
.KeywordSuggestBox-keywords-one .KeywordSuggestBox-keywords-one-block {
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 5px !important;
  padding: 10px !important;
  border: #747474 solid 1px !important;
  color: #222222 !important;
  padding: 10px 10px 10px 10px !important;
  border-radius: 12px !important;
  box-shadow: 0px 0px 3px white;
}

.KeywordSuggestBox-keywords-one .KeywordSuggestBox-keywords-one-block {
  box-shadow: none !important;
}

.kwd-block-remove:before {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.KeywordBox.state-good-number-of-keywords.state-good-number-of-keywords-preview,
.KeywordBox.state-too-many-words.state-too-many-words-preview {
  background: white !important;
  border: none !important;
}

.KeywordBox,
.MetaWorkCard.shadowed-block.MetaEditor-card {
  background: none !important;
  border-radius: 20px !important;
}

.shadowed-block {
  box-shadow: none !important;
}

.KeywordBox-presenter .cm-word:hover {
  background: #ffffffe8 !important;
  transition: background 1s !important;
  cursor: grab;
}

.KeywordSuggestBox-stat {
  color: #666 !important;
}

::-webkit-scrollbar {
  width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fcfcfc !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #636363 !important;
  border-radius: 10px !important;
}

span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-0
  ) {
  border: 1px solid #ffffff !important;
  background: white !important;
}
span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-1
  ) {
  border: 1px solid #b9bdb8 !important;
  background: white !important;
}
span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-2
  ) {
  border: 1px solid #d4d663 !important;
  background: white !important;
}
span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-3
  ) {
  border: 1px solid #5ad09f !important;
  background: white !important;
}
span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-4
  ) {
  border: 1px solid #6381d6 !important;
  background: white !important;
}
span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt:has(
    span.kwd-block-rank.state-val-5
  ) {
  border: 1px solid #aa63d6 !important;
  background: white !important;
}

span.KeywordSuggestBox-keywords-one-block.kwd-block.type-cnt {
  box-shadow: rgba(0, 0, 0, 0.05) 1px 1px 4px 0px !important;
}

span.kwd-block-rank {
  display: none !important;
}

.kwd-block-rank.state-val-0 {
  border: 1px solid white !important;
}

.MetaWorkCard.shadowed-block.MetaEditor-card {
  padding: 10px !important;
}

.Form-row-header-caption,
div#yourKeywordHeaderDiv {
  text-align: center !important;
  width: 100% !important;
  position: absolute;
  bottom: -20px !important;
}

div#yourKeywordHeaderDiv button,
.Form-row-header-caption button {
  border: 1px solid #666666;
  border-radius: 5px;
  background: none;
  color: #666666;
  position: absolute;
}

div#yourKeywordHeaderDiv button {
  right: 20px;
}

.Form-row-header-caption button {
  left: 20px;
}

div#yourKeywordHeaderDiv button:hover {
  color: #f34b47 !important;
  border: 1px solid #f34b47;
}

.KeywordBox-presenter,
.KeywordBox-presenter .CodeMirror {
  height: auto !important;
}

.DialogHostDialog-content {
  height: 150px !important;
  text-align: center !important;
}

.DialogHostDialog-center {
  padding: 0px !important;
}

.KeywordSuggestBoxPresenterTable.KeywordHoveringContainer-canvas {
  max-height: calc(100vh - 150px) !important;
  direction: rtl !important;
  overflow-x: hidden !important;
}

.SuggestedKeywords-displayMode {
  position: absolute !important;
  left: 100px !important;
  width: 53px !important;
  bottom: 10px !important;
}

.KeywordBox-presenter .cm-word::before {
  display: none !important;
}

.KeywordSuggestBoxPresenterTable-row-check {
  visibility: hidden !important;
}

.KeywordSuggestBoxPresenterTable-row:hover {
  background: none !important;
}

.KeywordSuggestBoxPresenterTable-row {
  border-bottom: none !important;
  padding: 0px !important;
}

.KeywordSuggestBoxPresenterTable-row-keyword {
  border: none !important;
  width: auto !important;
}

.Form-row-header .Form-row-header-caption {
  bottom: 30px !important;
}

a {
  text-decoration: none !important;
}

span.KeywordSuggestBoxPresenterTable-translation-one-content {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-right: 10px !important;
}

.Form-row-header-caption[data-v-065fff10],
.Form-row-header-tools[data-v-065fff10],
.SuggestedKeywords-displayMode[data-v-065fff10],
.SuggestedKeywords-legend[data-v-065fff10] {
  margin-bottom: 20px !important;
}

#loadingIcon {
  width: 200px !important;
  height: 200px !important;
}
