@charset "utf-8";

.iconfont { font-size: 16px; width: 1em; height: 1em; vertical-align: middle; fill: currentcolor; overflow: hidden; }

.translate-button { user-select: none; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.88) 0px 0px 4px -1px; color: var(--text-normal); background: var(--bg-content); position: fixed; z-index: 2147483647; }

.panel-icon-btn { display: inline-flex; align-items: center; justify-content: center; user-select: none; position: relative; padding: 3px; cursor: pointer; --ripple-max-opa: 0.16; }

.panel-icon-btn:not(.panel-icon-btn--disabled):hover .ripple::before { opacity: 0.08; }

.panel-icon-btn.panel-icon-btn--activation .ripple::after { animation: 225ms ease 0s 1 normal forwards running mdc-ripple-fg-radius-in, 75ms ease 0s 1 normal forwards running mdc-ripple-fg-opacity-in; }

.panel-icon-btn.panel-icon-btn--deactivation .ripple::after { animation: 150ms ease 0s 1 normal none running mdc-ripple-fg-opacity-out; transform: scale(1.8); }

.panel-icon-btn.panel-icon-btn--disabled { cursor: default; }

.panel-icon-btn .iconfont { pointer-events: none; opacity: 0.8; }

.panel-icon-btn.panel-icon-btn--disabled .iconfont, .panel-icon-btn.panel-icon-btn--icon-grey .iconfont { opacity: 0.4; }

.history { font-size: 13px; z-index: 2147483647; user-select: none; position: fixed; top: 0px; left: -1px; height: 100%; width: 200px; background: var(--bg-content); color: var(--text-normal); transform: translate3d(-100%, 0px, 0px); transition: transform 0.2s; padding-top: 40px; }

.history--show { transform: translate3d(0px, 0px, 0px); transition: transform 0.3s ease-in; }

.history--show .history__unfold { opacity: 0; right: 10px; pointer-events: none; transition: right, opacity; }

.history__unfold { opacity: 1; position: fixed; top: 30%; right: -25px; width: 25px; border-radius: 0px 5px 5px 0px; word-break: break-all; border: 1px solid rgb(153, 153, 153); font-size: 16px; text-align: center; padding: 10px 2px; cursor: pointer; user-select: none; background-color: rgb(255, 255, 255); box-shadow: rgba(182, 187, 179, 0.6) 1px 1px 1px 1px; transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s; color: rgb(0, 0, 0); }

.history__unfold .history__unfold-text { display: inline-block; font-size: 12px; transform: rotate(-180deg); writing-mode: tb-rl; font-weight: bold; }

.history__head { position: absolute; top: 0px; left: 0px; color: var(--text-icon); width: 100%; background: var(--bg-total); padding: 0px 5px; display: flex; height: 40px; justify-content: space-between; align-items: center; }

.history__content { overflow-y: auto; height: 100%; width: 100%; border-right: 1px solid var(--bg-total); }

.history_no-record { margin: 20px; }

.history-head__pin { margin-right: 5px; color: var(--text-icon); opacity: 0.6; cursor: pointer; }

.history-head__pin--ning { transform: rotate(-45deg); opacity: 1; }

.history__e-resize { display: none; height: 100%; position: absolute; width: 6px; right: -2px; bottom: 0px; }

.history__e-resize:hover { cursor: e-resize; }

.history--show .history__e-resize { display: block; }

.source-favicon { display: inline-flex; align-items: center; }

.favicon { font-size: 20px; user-select: none; display: inline-block; padding: 0px; width: 1em; height: 1em; }

.favicon--mock { display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; color: rgb(255, 255, 255); background: rgb(153, 153, 153); font-weight: bold; flex-shrink: 0; }

.favicon--mock-text { font-size: 0.7em; }

.favicon + span { margin-left: 4px; }

.translate-result { padding: 10px 8px; }

.translate-result__item .iconfont { position: relative; bottom: 0.125em; }

.translate-result__item .iconfont:first-child { margin-left: 4px; }

.translate-result__item + .translate-result__item { margin-block-start: 0.8em; }

.translate-result__paragraph + .translate-result__paragraph { display: block; margin-top: 0.625em; }

.history-result-panel { padding-left: 10px; position: fixed; }

.history-result-panel__container { box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 0px; padding: 4px 4px 1px; width: 200px; background: var(--bg-total); border-radius: 5px; user-select: text; max-height: calc(-45px + 100vh); overflow-y: auto; }

.history-item { display: flex; width: 100%; height: 50px; overflow: hidden; font-size: 14px; }

.history-item:hover { background: var(--bg-item-hover); }

.history-item__content { color: var(--text-normal); padding-left: 5px; flex: 1 1 0%; overflow: hidden; cursor: pointer; height: 50px; }

.history-item__content-text, .history-item__content-result { height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.history-item__icons { justify-content: center; align-items: center; display: flex; width: 30px; }

.history-item__icons .iconfont { font-size: 15px !important; }

.logo { height: 1em; width: 1em; vertical-align: bottom; }

.mt-result { background: var(--bg-content); width: 100%; margin-bottom: 4px; border-radius: 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; }

.mt-result__head { padding: 4px; color: var(--text-normal); font-size: 12px; }

.mt-result__head__left { display: flex; align-items: center; overflow: hidden; gap: 4px; }

.mt-result__head__badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }

.mt-result__head__source-language { flex: 1 1 0%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.text-field { display: inline-flex; flex-direction: column; position: relative; margin: 8px; font-weight: 400; color: rgba(0, 0, 0, 0.6); font-size: 16px; }

.text-field.text-field--error { color: rgb(211, 47, 47); }

.text-field__label { position: absolute; top: 0px; left: 0px; color: currentcolor; max-width: 100%; overflow: hidden; white-space: nowrap; transform-origin: left top; transform: translateY(20px); transition: color 200ms, transform 200ms, max-width 200ms; }

.text-field:not(.text-field--error):focus-within > .text-field__label { color: rgb(25, 118, 210); }

.text-field:focus-within > .text-field__label, .text-field__label.value-not-empty { transform: translateY(-1.5px) scale(0.75); max-width: 133%; }

.text-field__input-area { position: relative; width: 100%; display: inline-flex; }

.text-field__label + .text-field__input-area { margin-top: 16px; }

.text-field input { font-size: inherit; background: none; border: 0px; outline: 0px; padding: 4px 0px 5px; height: 2em; width: 100%; color: rgba(0, 0, 0, 0.87); }

.text-field textarea { font-size: inherit; background: none; border: 0px; outline: 0px; width: 100%; padding: 0px; color: rgba(0, 0, 0, 0.87); }

.text-field input::placeholder, .text-field textarea::placeholder { color: currentcolor; opacity: 0.5; }

.text-field input.labeled-input::placeholder, .text-field textarea.labeled-input::placeholder { opacity: 0; transition: opacity 200ms; }

.text-field input.labeled-input:focus::placeholder, .text-field textarea.labeled-input:focus::placeholder { opacity: 0.5; }

.text-field textarea { resize: none; }

.text-field__input-area::before, .text-field__input-area::after { left: 0px; right: 0px; bottom: 0px; content: " "; position: absolute; pointer-events: none; }

.text-field__input-area::before { transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(0, 0, 0, 0.42); }

.text-field__input-area:hover::before { border-bottom: 2px solid rgba(0, 0, 0, 0.87); }

.text-field__input-area::after { border-bottom: 2px solid rgb(25, 118, 210); transform: scaleX(0); transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); }

.text-field__input-area:focus-within::after { transform: scaleX(1) translateX(0px); }

.text-field.text-field--error > .text-field__input-area::before { border-bottom: 1px solid; }

.text-field.text-field--error > .text-field__input-area:hover::before { border-bottom: 1px solid; }

.text-field.text-field--error > .text-field__input-area::after { border-bottom: 2px solid; }

.text-field__helper-text { font-size: 0.75em; margin: 3px 0px 0px; color: currentcolor; }

.select-options { position: absolute; background: var(--bg-content); color: var(--text-normal); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px 0px; overflow: hidden auto; max-height: 300px; z-index: 999; width: auto; max-width: 240px; border-radius: 4px; }

.source-language { overflow: hidden; flex: 1 1 0%; }

.source-language__list__item { padding: 4px 0px 4px 24px; overflow: hidden; cursor: pointer; }

.source-language__list__item:hover { background-color: var(--bg-item-hover); }

.source-language .text-field input { color: var(--text-normal); }

.source-language .panel-icon-btn { overflow: hidden; white-space: nowrap; }

.mtss { position: relative; cursor: pointer; user-select: none; max-width: 150px; }

.mtss > .panel-icon-btn { max-width: 70px; }

.mtss__favicon .favicon { font-size: 16px; }

.mtss__options { background: var(--bg-content); color: var(--text-normal); }

.mtss__options__option { padding: 4px; display: flex; align-items: center; overflow: hidden; cursor: pointer; }

.mtss__options__option:hover { background: var(--bg-item-hover); }

.mtss__source { flex: 1 1 0%; overflow: hidden; white-space: nowrap; }

.mtss__favicon { pointer-events: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.add-source { text-align: right; margin-bottom: 4px; font-size: 14px; }

.add-source__wrapper { display: inline-flex; position: relative; }

.add-source__badge { color: var(--text-icon); font-size: 18px; }

.source-selector__item { padding: 4px; display: flex; justify-content: space-between; }

.source-selector__item:hover { background: var(--bg-item-hover); }

.source-selector__item-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.language-select { position: relative; text-align: start; cursor: pointer; user-select: none; outline: 0px; white-space: pre; padding: 4px; width: 150px; display: inline-block; }

.language-select__badge { display: flex; align-items: center; }

.language-select__badge-text { flex: 1 1 0%; overflow: hidden; }

.language-select__search { display: flex; margin: 4px; border-bottom: 1px solid; align-items: center; padding: 4px; }

.language-select__search-input { flex: 1 1 0%; }

.language-select__search-input > input { outline: 0px; border: 0px; width: 100%; }

.language-select__option, .language-select__no-result { padding: 4px; line-height: 1; }

.language-select__option:hover { background: var(--bg-item-hover); }

.language-selection { display: flex; align-items: center; justify-content: center; gap: 0px 4px; padding: 4px; flex-wrap: wrap; }

.language-selection > .iconfont { cursor: pointer; }

.language-selection__select { width: 100px; }

.raw-text__textarea { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1em; display: block; width: 100%; height: 44px; padding: 4px; resize: vertical; min-width: 100px; min-height: 38px; max-height: 150px; border-radius: 4px; }

.multiple-result { width: 100%; overflow-y: auto; }

.multiple-result__add-source { word-break: break-all; padding: 10px; }

.panel { border-radius: 6px; position: fixed; z-index: 2147483647; width: 250px; background-color: var(--bg-total); box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 5px 0px; min-width: 250px; color: var(--text-normal) !important; }

.panel__content { margin: 0px 4px; }

.panel__header { cursor: grab; user-select: none; padding: 2px 4px; color: var(--text-icon); }

.panel__header-logo { font-weight: bold; font-size: 20px; }

.panel__header-icons .iconfont { font-size: 18px; }

* { box-sizing: border-box; }

#sc-translator-root { font-size: 14px; line-height: initial !important; }

.button { cursor: pointer; }

.scrollbar::-webkit-scrollbar { width: 4px; }

.scrollbar::-webkit-scrollbar-track { background: rgb(239, 239, 239); border-radius: 2px; }

.scrollbar::-webkit-scrollbar-thumb { background: rgb(191, 191, 191); border-radius: 20px; }

.scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(153, 153, 153); }

.iconbutton { opacity: 0.7; }

.iconbutton:hover { opacity: 1; }

.dividing-line { width: 100%; height: 1px; background-color: rgb(148, 163, 184); opacity: 0.7; display: block; }

.span-link { cursor: pointer; text-decoration: underline; }

.span-link:hover { text-decoration: none; }

.flex-align-items-center { display: flex; align-items: center; }

.flex-justify-content-space-between { display: flex; justify-content: space-between; }

.skeleton::after { content: "Loading..."; }

.skeleton { height: 100%; background-color: rgb(238, 238, 238); background-image: linear-gradient(90deg, rgb(238, 238, 238), rgb(245, 245, 245), rgb(238, 238, 238)); background-size: 200px 100%; background-repeat: no-repeat; border-radius: 4px; display: block; line-height: 1; width: 100%; animation: 1.2s ease-in-out 0s infinite normal none running shimmer; color: transparent; }

@keyframes shimmer { 
  0% { background-position: -200px 0px; }
  100% { background-position: calc(100% + 200px) 0px; }
}

.border-bottom-select::before { left: 0px; right: 0px; bottom: 0px; content: " "; position: absolute; transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(136, 136, 136, 0.7); pointer-events: none; }

.border-bottom-select:hover::before { border-bottom-width: 2px; }

.border-bottom-select:focus { background: var(--bg-select-focus); }

.iconfont--enable { opacity: 0.7; cursor: pointer; }

.iconfont--enable:hover { opacity: 1; }

.iconfont--disable { opacity: 0.4; }

.ripple { pointer-events: none; position: absolute; width: 100%; height: 100%; overflow: hidden; left: 0px; top: 0px; border-radius: 4px; }

.ripple::before, .ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; background-color: currentcolor; }

.ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; top: calc(-50%); left: calc(-50%); width: 200%; height: 200%; }

.ripple::after { width: var(--ripple-size, 100%); height: var(--ripple-size, 100%); top: 0px; left: 0px; }

@keyframes mdc-ripple-fg-radius-in { 
  0% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transform: translate(var(--ripple-translate-start, 0)) scale(var(--ripple-scale-start, 0.3)); }
  100% { transform: translate(var(--ripple-translate-end, 0)) scale(var(--ripple-scale-end, 1.08)); }
}

@keyframes mdc-ripple-fg-opacity-in { 
  0% { animation-timing-function: linear; opacity: 0; }
  100% { opacity: var(--ripple-max-opa, 0.12); }
}

@keyframes mdc-ripple-fg-opacity-out { 
  0% { animation-timing-function: linear; opacity: var(--ripple-max-opa, 0.12); }
  100% { opacity: 0; }
}

.spinner, .spinner::before, .spinner::after { width: 1em; height: 1em; border-radius: 50%; box-sizing: border-box; }

.spinner { display: inline-block; position: relative; }

.spinner::before, .spinner::after { content: ""; position: absolute; }

.spinner::before { border: 0.11em solid var(--text-normal); opacity: 0.2; }

.spinner::after { border-width: 0.11em; border-style: solid; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-image: initial; border-left-color: var(--text-normal); transform: translateZ(0px); animation: 1.1s linear 0s infinite normal none running spinning; }

@keyframes spinning { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.source-select { position: relative; align-items: center; display: inline-flex; cursor: pointer; user-select: none; outline: 0px; white-space: pre; padding: 2px; max-width: 150px; }

.source-select .iconfont { margin-left: 4px; }

.source-select--disabled { color: rgb(170, 170, 170); opacity: 0.7; }

.source-select__options { background: var(--bg-content); color: var(--text-normal); }

.source-select__value { flex: 1 1 0%; overflow: hidden; }

.source-select__options__option { padding: 4px; overflow: hidden; cursor: pointer; }

.source-select__options__option:hover { background: var(--bg-item-hover); }

.source-select__favicon-only { pointer-events: none; }

.web-page-translate { position: fixed; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px 0px; right: 8px; bottom: 8px; padding: 4px; border-radius: 4px; color: var(--text-normal); background: var(--bg-content); z-index: 2147483647; }

.web-page-translate__error { margin-bottom: 10px; max-width: 285px; }

.web-page-translate__content .panel-icon-btn > .iconfont { font-size: 20px; }

.page-translation__select-box { display: flex; align-items: flex-end; }

.web-page-translate__content .source-select { padding: 0px; }

.web-page-translate__select { width: 100px; }

.web-page-translate__content__logo { font-size: 20px; display: flex; }

.web-page-translate__content__division { margin: 0px 4px; width: 1px; height: 26px; background-color: var(--text-normal); opacity: 0.6; }