/* #output.dark-mode {
    background-color: #4d4e53;
    color: #b5b7bb;
} */
:root {
    --color-bg-main: #fff;
    --color-border-light: #E8E8EB;
    --color-text-main: #000;
  }
.dark-mode {
    --color-border-light: rgba(255, 255, 255,.08);
    --color-bg-main: #1c1e24;
    --color-text-main: #737886;
  }
  /**
 * Dark theme overrides
 */
.dark-mode img {
    opacity: 0.5;
  }

  .dark-mode .cdx-simple-image__picture--with-border,
  .dark-mode .cdx-input {
    border-color: var(--color-border-light);
  }

  .dark-mode .ce-example__button {
    box-shadow: 0 24px 18px -14px rgba(4, 154, 255, 0.24);
  }

  .dark-mode .ce-example__output {
    background-color: #17191f;
  }

  .dark-mode .inline-code {
    background-color: rgba(53, 56, 68, 0.62);
    color: #727683;
  }

  .dark-mode a {
    color: #959ba8;
  }

  .dark-mode .ce-example__statusbar-toggler,
  .dark-mode .ce-example__statusbar-button {
    background-color: #343842;
  }

  .dark-mode .ce-example__statusbar-toggler::before {
    transform: translateX(calc(var(--toggler-size) * 2.2 - var(--toggler-size)));
  }

  .dark-mode .ce-example__statusbar-toggler::after {
    content: '*';
    right: auto;
    left: 6px;
    top: 7px;
    color: #fff;
    box-shadow: none;
    font-size: 32px;
  }

  .dark-mode.show-block-boundaries .ce-block,
  .dark-mode.show-block-boundaries .ce-block__content {
    box-shadow: 0 0 0 1px rgba(128, 144, 159, 0.09) inset;
  }

  .dark-mode.thin-mode .ce-example__content{
    border-color: var(--color-border-light);
  }

  .dark-mode .ce-example__statusbar-item:not(:last-of-type)::after {
    color: var(--color-border-light);
  }

  .dark-mode .ce-block--selected .ce-block__content,
  .dark-mode ::selection{
    background-color: rgba(57, 68, 84, 0.57);
  }

  .dark-mode .ce-toolbox__button,
  .dark-mode .ce-toolbar__settings-btn,
  .dark-mode .ce-toolbar__plus {
    color: inherit;
  }

  .dark-mode .ce-stub {
    opacity: 0.3;
  }
.divider {
    border-bottom: 1px solid #DCDFE6;
    margin: 15px 36.5px;
}

.simple-image {
    padding: 20px 0;
}

.ce-block__content img {
    max-width: 100%;
  /*padding: 5px;*/
    box-sizing: border-box;
}

.ce-block__content .el-image > img {
    padding: 0;
}

.inline-image {
    vertical-align: bottom;
  margin: 0 5px !important;
}
.image-dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #00000080;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
}
.inline-img {
    width:400px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    background-color: #fff;
    z-index: 99999;
    border-radius: 5px;
}
.inline-button {
    background-color: #003BFC;
    padding: 4px 20px;
    border: none;
    color: #fff;
    border-radius: 10px;
    margin: 0 12px;
    cursor: pointer;
}
.upload-imageX span {
    line-height: 30px;
}
.upload-imageX {
    font-size: 14px;
    margin-left: 40px;
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}
.upload-imageX .selectDiv {
    margin-left: 5px;
    width: 200px;
    padding-right: 24px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    position: relative;
}
.upload-imageX .selectDiv ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 222px;
    margin-top: 32px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 5px;

    height: 100px;
    overflow-y: scroll;
    display: none;
}
.upload-imageX .selectDiv ul::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

/* 滚动的滑块 */
.upload-imageX .selectDiv ul::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #9eb2c8;
}

/* 外层轨道 */
.upload-imageX .selectDiv ul::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: #f0f3f5;
}

.upload-imageX .selectDiv ul li {
    text-indent: 10px;
    width: 100%;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.upload-imageX .selectDiv ul li:hover {
    cursor: pointer;
    background-color: #F5F7FA;
}
.upload-imageX .selectDiv:hover ul{
    display: block;
}
.upload-imageX .selectDiv::before{
    content: "";
    position: absolute;
    top: 12px;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #666;
}
.upload-imageX .selectDiv::after {
    content: attr(data-after);
    position: absolute;
    top: 0;
    left: 10px;
    width: 200px;
    height: 30px;
    line-height: 30px;
}
.inline-div input::placeholder {
    color: #999;
    font-size: 12px;
}
.upload-imageX .selectDiv:hover::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #666;
    border-top: none;
}

.upload-imageX input {
    margin-left: 6px;
}
.upload-imageX .image-block {
    max-width: 220px;
    margin-left: 6px;
}
.close-btnX{
    position: absolute;
    right:10px;
    top:10px;
    border: none;
    background-color: #fff;
    color: #909399;
    font-size: 24px;
    cursor: pointer;
}
.submit-ok{
    position:absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    font-size: 14px;
    background-color: #409eff;
    color: #fff;
    border-radius: 5px;
    border: none;
    width:60px;
    height:32px;
    cursor: pointer;
}
.inline-div {
    margin-left: 40px;
    margin-top: 24px;
}
.inline-div span {
    font-size: 14px;
}
.inline-div input {
    border-width: 0;
    border: 1px solid #dcdfe6;
    height: 28px;
    outline:0;
    border-radius: 5px;
    width: 220px;
    font-size: 14px;
    text-indent: 6px;
}
.inline-div input:focus {
    border: 1px solid #409eff !important;
}

.cell-collectBtn{
    width: 20px;
    height: 20px;
    position: absolute;
    font-size: 16px;
    border-radius: 5px;
    left: 0;
    top: 0;
    display: none;
    cursor: pointer;
    color: gray;
}
.tc-cell{
    box-sizing: border-box;
    height: 100%;
}
.tc-cell[celltype="input"]{
    box-shadow: rgb(204, 219, 232) 2px 2px 4px 0px inset, rgba(255, 255, 255, 0.5) -2px -2px 4px 1px inset;
}
.tc-cell[celltype="collect"]{
    box-shadow: rgb(232, 204, 226) 2px 2px 4px 0px inset, rgba(255, 255, 255, 0.5) -2px -2px 4px 1px inset;
}

.cell-wrap:hover .cell-switcher{
    display: block;
}
.cell-wrap[celltype="collect"]:hover .cell-collectBtn{
    display: block;
}
.cell-switcher svg{
    width: 20px;
    height: 20px;
}
.cell-switcher{
    position: absolute;
    font-size: 16px;
    border-radius: 7px;
    right: 0;
    top: 0;
    display: none;
    cursor: pointer;
    color: gray;
}
.switcher-item{
    border-radius: 5px;
}
.switcher-item:hover{
    background-color: #eff2f5;
}
/* .cell-switcher:hover{
    background-color: gray;
} */
.simple-image.withBorder img {
    border: 1px solid #e8e8eb;
}

.simple-image.withBackground {
    background: #eff2f5;
    padding: 10px;
}

.simple-image.withBackground img {
    display: block;
    max-width: 60%;
    margin: 0 auto 15px;
}

.simple-image input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
}
.cdx-input.image-tool__caption[contenteditable="false"]{
    text-align: center;
    box-shadow: none;
    border: none;
}

.simple-image input,
.simple-image [contenteditable] {
    width: 100%;
    padding: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
}

.simple-image.withBorder img {
    border: 1px solid #e8e8eb;
}

.simple-image.withBackground {
    background: #eff2f5;
    padding: 10px;
}

.simple-image.withBackground img {
    display: block;
    max-width: 60%;
    margin: 0 auto 15px;
}

#config {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    padding: 5px;
    overflow: auto;
    width: 300px;
    /* background-color: rgba(193, 221, 221, 0.541); */
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    z-index: 99;
}

.config-item {
    margin: 8px 0;
}

#menu {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    padding: 5px;
    overflow: auto;
    width: 300px;
    /* background-color: rgba(193, 221, 221, 0.541); */
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    z-index: 99;
}
.teacher-view{
    position:relative;
    margin: 5px 36px;
    color: #1f88ff;
}
.question-mark{
    position: absolute;
    right: 5px;
    top: -10px;
}

.editorjs-output {
    background: var(--color-bg-main);
    color: var(--color-text-main);
    position: relative;
    margin: 0 auto;
    width: 797px;
    min-height: 1127.2px;
    box-sizing: border-box;
    /* box-shadow: 0 -3px 29px -5px rgba(27, 31, 37, 0.3); */
    padding: 97px 37px;
    border-radius: 5px;
}

.codex-editor .ce-block .ce-block__content {
    padding: 10px;
    box-sizing: border-box;
}
.codex-editor .ce-block.ce-block--focused .ce-block__content,
.codex-editor .ce-block:hover .ce-block__content,
.codex-editor .ce-block:focus .ce-block__content {
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

#menu-wrap h1.menu-item {
    margin-left: 0px;
}

#menu-wrap h2.menu-item {
    margin-left: 5px;
}

#menu-wrap h3.menu-item {
    margin-left: 10px;
}

#menu-wrap h4.menu-item {
    margin-left: 15px;
}

#menu-wrap h5.menu-item {
    margin-left: 20px;
}

#menu-wrap h6.menu-item {
    margin-left: 25px;
}

#menu-wrap .menu-item {
    line-height: 30px;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0px 10px;
    margin: 10px 0px 10px 30px;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* background-color: rgb(243, 243, 243); */
}

#menu-wrap .menu-question {
    border: 1px dashed red;
}

.content-type {
    font-size: 16px;
    font-weight: 400;
}

.codeflask.codeflask--has-line-numbers:before {
    /* 修复层叠显示错误 */
    z-index: 0 !important;
}
.score-input{
    width: 48px;
    line-height: 20px;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
}

.codeflask__lines{
    z-index: 0!important;
}
.codeflask__textarea{
    z-index: 0!important;
}
.codeflask__pre{
    z-index: 0!important;

}
.combine-input {
    max-width: 100%;
    padding: 4px;
    outline: none;
    font-size: 14px;
    line-height: 19px;
    border: none;
    border-bottom: 1px solid #333;
    display: inline-block;
    /* display: inline; */
    /* text-decoration: underline; */
}
.reticle {
    position: absolute;
    width: 23px;
    height: 23px;
    /* display:none; */
}

.reticle.left-top {
    left: 47px;
    top: 60px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

.reticle.right-top {
    right: 47px;
    top: 60px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
}

.reticle.left-bottom {
    left: 47px;
    bottom: 60px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
}

.reticle.right-bottom {
    right: 47px;
    bottom: 60px;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}

.answer-card-info .row {
    display: flex;
    flex-wrap: wrap;
}

.answer-card-info .col-4 {
    flex-basis: 16.67%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.answer-card-info .col-8 {
    color: #999;
    flex-basis: 33.33%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.answer-card-info .col-20 {
    color: #999;
    flex-basis: 83.33%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.cdx-checklist__item-checkbox svg {
  top: 0 !important;
}

.el-tree-node__content__label span:not(.katex span),
.ce-header span:not([class]):not(.katex span),
.question-name span:not([class]):not(.katex span),
.ce-paragraph span:not([class]):not(.katex span),
.input-tool-input span:not([class]):not(.katex span),
.question-gap-filling span:not([class]):not(.katex span),
.tc-cell span:not([class]):not(.katex span),
.cdx-short-answer span:not([class]):not(.katex span),
.cdx-checklist span:not([class]):not(.katex span) {
  font-size:inherit !important;
  color:inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}