/**
* =====================================
* 滚动条美化
**/

/* 亮色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #878787;
}

/* 暗色 */
body[theme-mode=dark] ::-webkit-scrollbar-thumb {
  background: #565656;
}

body[theme-mode=dark] ::-webkit-scrollbar-thumb:hover {
  background: #424242; /* 更深的灰色 */
}


 :root {
    --wk-color-theme: #0D8BFF;
    --wk-color-secondary: #F6F8FC;
    --wk-color-secondary-2: #EEF4FB;
    --wk-color-hover: #E8F3FF;
    /* 提示类型的字体颜色 */
    --wk-color-font-tip: rgb(170,170,170);
    --wk-width-layout-content-left: 300px;
    --wk-wdith-conversation-list: var(--wk-width-layout-content-left);
    /* --wk-height-chat-search: 65px; */
    --wk-height-chat-search: 64px;
    --wk-height-chat-conversation-header: 64px;
    --wk-wdith-chat-channelsetting: 340px;
    --wk-layer-transition: 300ms cubic-bezier(0.33,1,0.68,1);
    --wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    --wk-line: 1px solid #E5ECF5;
    --wk-line-color:  #E5ECF5;

    --wk-color-item: white;
    --wk-text-item:  rgba(9,30,66,.87);

    --wk-message-item: white;
    --wk-message-color: #0F0F0F;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body[theme-mode=dark] {
    --wk-color-secondary: #0F0F0F;
    --wk-color-secondary-2: rgb(33,33,33);
    --wk-line: 1px solid rgb(255,255,255,0.1);
    --wk-line-color: rgb(255,255,255,0.1);
    --wk-color-item: rgb(33,33,33);
    --wk-text-item: white;
    color: white !important;

    --wk-message-item: #0F0F0F;
    --wk-message-color: white;

    --semi-color-primary: #0D8BFF;
    --semi-color-primary-hover: rgba(13, 139, 255, 0.5);

  }

  /* ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
  } */

html {
    height: 100%;
    box-sizing: border-box;
}
  
  body {
    height: 100%;
    margin: 0;
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Cantarell,sans-serif; */
    font-family: "Roboto",-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Helvetica Neue",sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var( --background-color);
    color: rgba(9,30,66,.87) ;

    --semi-color-primary: #0D8BFF;
  }

  div {
    outline:none; /** 让div没有焦点边框 不加这个 第一次打开Modal会聚焦**/
  }
  
  #root {
    height: 100%;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
  
  
  .page {
    width: 100%;
    height: 100%;
    background-color: rgb(236, 239, 243);
  }
  
  .pageContent {
    padding: 0px 40px;
    overflow-y: auto;
  }
  
    .pageContent.space {
        padding-top: 40px;
        width: 100%;
        height: 100%;
    }
  
  @font-face {
    font-family: "icomoon";
    src: url(/static/media/icomoon.536087723585cc76b849.woff2);
  }
  
  [class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  
  ul {
      list-style-type: none;
      margin-block-start: 0px;
      margin-block-end: 0px;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 0px;
  }
  


  .wk-loading {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0px;
  }

  .wk-text-oneline {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[theme-mode=dark] .semi-badge-count {
    color: white;
  }


#root {
  width: 100%;
  height: 100%;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wk-login {
    background-color: rgb(255, 255, 255);
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    position: relative;
    width: 100%;
}

.wk-login-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

.wk-login-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 32px;
    padding: 0;
    width: 100%;
}

.wk-login-footer a {
    color: #667085;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
}

.wk-login-footer a:hover {
    color: var(--wk-color-theme);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wk-login-content-scanlogin {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: center;
}

.wk-login-content-scanlogin-qrcode {
    height: 280px;
    position: relative;
    width: 280px;
}

.wk-login-content-scanlogin-qrcode-avatar {
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
}

.wk-login-content-scanlogin-qrcode-avatar-show {
    opacity: 1;
    transform: scale(1);
}

.wk-login-content-scanlogin-qrcode-avatar img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
}

.wk-login-content-scanlogin-qrcode-title {
    color: rgba(9, 30, 66, .87);
    margin-top: 30px;
}

.wk-login-content-scanlogin-qrcode-title h3 {
    margin: 0;
    line-height: 24px;
}

.wk-login-content-scanlogin-qrcode-desc {
    max-width: 100%;
}

.wk-login-content-scanlogin-qrcode-desc li {
    color: rgba(9, 30, 66, .87);
    counter-increment: item;
    display: flex;
    margin: 0.75rem 0;
    text-align: left;
}

.wk-login-content-scanlogin-qrcode-desc li::before {
    align-items: center;
    background: var(--wk-color-theme);
    border-radius: 50%;
    color: #fff;
    content: counter(item);
    display: flex;
    font-size: smaller;
    height: 1.375rem;
    justify-content: center;
    margin: 0 0.75rem 0 0;
    min-width: 1.375rem;
    padding: 0;
}

.wk-login-content-scanlogin-qrcode-expire {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.wk-login-content-scanlogin-qrcode-expire img {
    cursor: pointer;
    height: 50px;
    width: 50px;
}

@media (max-width: 480px) {
    .wk-login {
        padding: 20px 12px;
    }

    .wk-login-content {
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
    }

    .wk-login-content-scanlogin-qrcode-title {
        margin-top: 20px;
    }

    .wk-login-footer {
        margin-top: 24px;
        gap: 6px 16px;
    }
}