[class|=coco],
    [class|=coco]::after,
    [class|=coco]::before {
      box-sizing: border-box;
      outline: 0
    }

    .coco-msg-progress {
      width: 13px;
      height: 13px
    }

    .coco-msg__circle {
      stroke-width: 2;
      stroke-linecap: square;
      fill: none;
      transform: rotate(-90deg);
      transform-origin: center
    }

    .coco-msg-stage:hover .coco-msg__circle {
      -webkit-animation-play-state: paused !important;
      animation-play-state: paused !important
    }

    .coco-msg__background {
      stroke-width: 2;
      fill: none
    }

    .coco-msg-stage {
      position: fixed;
      top: 20px;
      left: 50%;
      width: auto;
      transform: translate(-50%, 0);
      z-index: 3000
    }

    .coco-msg-wrapper {
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
      transform: translate3d(-50%, 0, 0);
      transition: height .3s ease, padding .3s ease;
      padding: 6px 0;
      will-change: transform, opacity
    }

    .coco-msg {
      padding: 15px 21px;
      border-radius: 3px;
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
      transform: translate3d(-50%, 0, 0);
      display: flex;
      align-items: center
    }

    .coco-msg-content,
    .coco-msg-icon,
    .coco-msg-wait {
      display: inline-block
    }

    .coco-msg-icon {
      position: relative;
      width: 13px;
      height: 13px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .coco-msg-icon svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 11px;
      height: 11px
    }

    .coco-msg-wait {
      width: 20px;
      height: 20px;
      position: relative;
      fill: #4eb127
    }

    .coco-msg-wait svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }

    .coco-msg-close {
      width: 14px;
      height: 14px
    }

    .coco-msg-content {
      margin: 0 10px;
      min-width: 240px;
      text-align: left;
      font-size: 14px;
      font-weight: 500;
      font-family: -apple-system, Microsoft Yahei, sans-serif;
      text-shadow: 0 0 1px rgba(0, 0, 0, .01)
    }

    .coco-msg.info {
      color: #0fafad;
      background-color: #e7fdfc;
      box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c0faf9
    }

    .coco-msg.info .coco-msg-icon {
      background-color: #0fafad
    }

    .coco-msg.success {
      color: #4ebb23;
      background-color: #f3ffe8;
      box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #d9f8bb
    }

    .coco-msg.success .coco-msg-icon {
      background-color: #4ebb23
    }

    .coco-msg.warning {
      color: #f1b306;
      background-color: #fff9eb;
      box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #fcf2cd
    }

    .coco-msg.warning .coco-msg-icon {
      background-color: #f1b306
    }

    .coco-msg.error {
      color: #f34b51;
      background-color: #fff7f7;
      box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #ffe3e3
    }

    .coco-msg.error .coco-msg-icon {
      background-color: #f34b51
    }

    .coco-msg.loading {
      color: #0fafad;
      background-color: #e7fdfc;
      box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
    }

    .coco-msg_loading {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      position: relative
    }

    .coco-msg-circular {
      -webkit-animation: coco-msg-rotate 2s linear infinite both;
      animation: coco-msg-rotate 2s linear infinite both;
      transform-origin: center center;
      height: 18px !important;
      width: 18px !important
    }

    .coco-msg-path {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      stroke: #0fafad;
      -webkit-animation: coco-msg-dash 1.5s ease-in-out infinite;
      animation: coco-msg-dash 1.5s ease-in-out infinite;
      stroke-linecap: round
    }

    @-webkit-keyframes coco-msg-rotate {
      100% {
        transform: translate(-50%, -50%) rotate(360deg)
      }
    }

    @keyframes coco-msg-rotate {
      100% {
        transform: translate(-50%, -50%) rotate(360deg)
      }
    }

    @-webkit-keyframes coco-msg-dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
      }

      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
      }

      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
      }
    }

    @keyframes coco-msg-dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
      }

      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
      }

      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
      }
    }

    .coco-msg.info .coco-msg-wait {
      fill: #0fafad
    }

    .coco-msg.success .coco-msg-wait {
      fill: #4ebb23
    }

    .coco-msg.warning .coco-msg-wait {
      fill: #f1b306
    }

    .coco-msg.error .coco-msg-wait {
      fill: #f34b51
    }

    .coco-msg.loading .coco-msg-wait {
      fill: #0fafad
    }

    .coco-msg-pointer {
      cursor: pointer
    }

    @-webkit-keyframes coco-msg_info {
      0% {
        stroke: #0fafad
      }

      to {
        stroke: #0fafad;
        stroke-dasharray: 0 100
      }
    }

    @keyframes coco-msg_info {
      0% {
        stroke: #0fafad
      }

      to {
        stroke: #0fafad;
        stroke-dasharray: 0 100
      }
    }

    @-webkit-keyframes coco-msg_success {
      0% {
        stroke: #4eb127
      }

      to {
        stroke: #4eb127;
        stroke-dasharray: 0 100
      }
    }

    @keyframes coco-msg_success {
      0% {
        stroke: #4eb127
      }

      to {
        stroke: #4eb127;
        stroke-dasharray: 0 100
      }
    }

    @-webkit-keyframes coco-msg_warning {
      0% {
        stroke: #fcbc0b
      }

      to {
        stroke: #fcbc0b;
        stroke-dasharray: 0 100
      }
    }

    @keyframes coco-msg_warning {
      0% {
        stroke: #fcbc0b
      }

      to {
        stroke: #fcbc0b;
        stroke-dasharray: 0 100
      }
    }

    @-webkit-keyframes coco-msg_error {
      0% {
        stroke: #eb262d
      }

      to {
        stroke: #eb262d;
        stroke-dasharray: 0 100
      }
    }

    @keyframes coco-msg_error {
      0% {
        stroke: #eb262d
      }

      to {
        stroke: #eb262d;
        stroke-dasharray: 0 100
      }
    }

    .coco-msg-fade-in {
      -webkit-animation: coco-msg-fade .2s ease-out both;
      animation: coco-msg-fade .2s ease-out both
    }

    .coco-msg-fade-out {
      animation: coco-msg-fade .3s linear reverse both
    }

    @-webkit-keyframes coco-msg-fade {
      0% {
        opacity: 0;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, -80%, 0)
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0)
      }
    }

    @keyframes coco-msg-fade {
      0% {
        opacity: 0;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, -80%, 0)
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0)
      }
    }
  

 
    .immersive-translate-input {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 2147483647;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .immersive-translate-attach-loading::after {
      content: " ";

      --loading-color: #f78fb6;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: block;
      margin: 12px auto;
      position: relative;
      color: white;
      left: -100px;
      box-sizing: border-box;
      animation: immersiveTranslateShadowRolling 1.5s linear infinite;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-2000%, -50%);
      z-index: 100;
    }

    .immersive-translate-loading-spinner {
      vertical-align: middle !important;
      width: 10px !important;
      height: 10px !important;
      display: inline-block !important;
      margin: 0 4px !important;
      border: 2px rgba(221, 244, 255, 0.6) solid !important;
      border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
      border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
      border-radius: 50% !important;
      padding: 0 !important;
      -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
      animation: immersive-translate-loading-animation 0.6s infinite linear !important;
    }

    @-webkit-keyframes immersive-translate-loading-animation {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(359deg);
      }
    }

    @keyframes immersive-translate-loading-animation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }

    .immersive-translate-input-loading {
      --loading-color: #f78fb6;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: block;
      margin: 12px auto;
      position: relative;
      color: white;
      left: -100px;
      box-sizing: border-box;
      animation: immersiveTranslateShadowRolling 1.5s linear infinite;
    }

    @keyframes immersiveTranslateShadowRolling {
      0% {
        box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
          0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
      }

      12% {
        box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
          0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
      }

      25% {
        box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
          0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
      }

      36% {
        box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
          100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
      }

      50% {
        box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
          110px 0 var(--loading-color), 100px 0 var(--loading-color);
      }

      62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
          120px 0 var(--loading-color), 110px 0 var(--loading-color);
      }

      75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
          130px 0 var(--loading-color), 120px 0 var(--loading-color);
      }

      87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
          200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
      }

      100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
          200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
      }
    }

    .immersive-translate-modal {
      position: fixed;
      z-index: 2147483647;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
      font-size: 15px;
    }

    .immersive-translate-modal-content {
      background-color: #fefefe;
      margin: 10% auto;
      padding: 40px 24px 24px;
      border-radius: 12px;
      width: 350px;
      font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
        "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
      position: relative;
    }

    @media screen and (max-width: 768px) {
      .immersive-translate-modal-content {
        margin: 25% auto !important;
      }
    }

    @media screen and (max-width: 480px) {
      .immersive-translate-modal-content {
        width: 80vw !important;
        margin: 20vh auto !important;
        padding: 20px 12px 12px !important;
      }

      .immersive-translate-modal-title {
        font-size: 14px !important;
      }

      .immersive-translate-modal-body {
        font-size: 13px !important;
        max-height: 60vh !important;
      }

      .immersive-translate-btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
        margin: 0 4px !important;
      }

      .immersive-translate-modal-footer {
        gap: 6px !important;
        margin-top: 16px !important;
      }
    }

    .immersive-translate-modal .immersive-translate-modal-content-in-input {
      max-width: 500px;
    }

    .immersive-translate-modal-content-in-input .immersive-translate-modal-body {
      text-align: left;
      max-height: unset;
    }

    .immersive-translate-modal-title {
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #333333;
    }

    .immersive-translate-modal-body {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }

    @media screen and (max-width: 768px) {
      .immersive-translate-modal-body {
        max-height: 250px;
        overflow-y: auto;
      }
    }

    .immersive-translate-close {
      color: #666666;
      position: absolute;
      right: 16px;
      top: 16px;
      font-size: 20px;
      font-weight: bold;
    }

    .immersive-translate-close:hover,
    .immersive-translate-close:focus {
      text-decoration: none;
      cursor: pointer;
    }

    .immersive-translate-modal-footer {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .immersive-translate-btn {
      width: fit-content;
      color: #fff;
      background-color: #ea4c89;
      border: none;
      font-size: 14px;
      margin: 0 8px;
      padding: 9px 30px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .immersive-translate-btn-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .immersive-translate-btn:hover {
      background-color: #f082ac;
    }

    .immersive-translate-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .immersive-translate-btn:disabled:hover {
      background-color: #ea4c89;
    }

    .immersive-translate-link-btn {
      background-color: transparent;
      color: #ea4c89;
      border: none;
      cursor: pointer;
      height: 30px;
      line-height: 30px;
    }

    .immersive-translate-cancel-btn {
      /* gray color */
      background-color: rgb(89, 107, 120);
    }

    .immersive-translate-cancel-btn:hover {
      background-color: hsl(205, 20%, 32%);
    }

    .immersive-translate-action-btn {
      background-color: transparent;
      color: #ea4c89;
      border: 1px solid #ea4c89;
    }

    .immersive-translate-btn svg {
      margin-right: 5px;
    }

    .immersive-translate-link {
      cursor: pointer;
      user-select: none;
      -webkit-user-drag: none;
      text-decoration: none;
      color: #ea4c89;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    .immersive-translate-primary-link {
      cursor: pointer;
      user-select: none;
      -webkit-user-drag: none;
      text-decoration: none;
      color: #ea4c89;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    .immersive-translate-modal input[type="radio"] {
      margin: 0 6px;
      cursor: pointer;
    }

    .immersive-translate-modal label {
      cursor: pointer;
    }

    .immersive-translate-close-action {
      position: absolute;
      top: 2px;
      right: 0px;
      cursor: pointer;
    }

    .imt-image-status {
      background-color: rgba(0, 0, 0, 0.5) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 16px !important;
    }

    .imt-image-status img,
    .imt-image-status svg,
    .imt-img-loading {
      width: 28px !important;
      height: 28px !important;
      margin: 0 0 8px 0 !important;
      min-height: 28px !important;
      min-width: 28px !important;
      position: relative !important;
    }

    .imt-img-loading {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
      background-size: 28px 28px;
      animation: image-loading-rotate 1s linear infinite !important;
    }

    .imt-image-status span {
      color: var(--bg-2, #fff) !important;
      font-size: 14px !important;
      line-height: 14px !important;
      font-weight: 500 !important;
      font-family: "PingFang SC", Arial, sans-serif !important;
    }

    .imt-primary-button {
      display: flex;
      padding: 12px 80px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      background: #ea4c89;
      color: #fff;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      border: none;
      cursor: pointer;
    }

    .imt-retry-text {
      color: #999;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 21px;
      cursor: pointer;
    }

    .imt-action-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .imt-modal-content-text {
      text-align: left;
      color: #333;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }

    @keyframes image-loading-rotate {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    .imt-linear-gradient-text {
      background: linear-gradient(90deg, #00a6ff 0%, #c369ff 52.4%, #ff4590 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .imt-flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .imt-linear-black-btn {
      border-radius: 50px;
      background: linear-gradient(66deg, #222 19%, #696969 94.25%);
      height: 48px;
      width: 100%;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: center;
    }