body {
    background-color: #f9f9f9;
}

.cFF0000{
    color: #FF0000;
}
.c008000{
    color: #008000;
}
.c0000FF{
    color: #0000FF;
}
.cFFFF00{
    color: #FFFF00;
}


:root {
    --primary-color: #2962ff;
    --surface: #ffffff;
    --background: #f5f5f5;
    --text-primary: #2c3e50;
    --text-secondary: #555;
    --resizer-width: 4px;
}

.m-application ul {
    padding: 0 !important;
}

.ESMHeaderContainer {
    height: 56px;
    width: 100%;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ESMHeaderContainer .left {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
}

.ESMHeaderContainer .appName {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin-left: 20px;
}

.ESMHeaderContainer .right {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 15px;
}

.ESMHeaderContainer .userName {
    font-size: 13px;
    color: #fff;
}

.ESMHeaderContainer .userIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #60a5fa;
    border-radius: 50%;
    margin-left: 10px;
}

.ESMHeaderContainer .icon-user {
    font-size: 14px;
    color: #fff;
}

.ESMBodyContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 56px);
    background-color: #f9fafb;
}

.ESMMenuContainer {
    padding: 15px;
    width: 224px;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #e5e7eb;
}

.ESMMenuContainer ul {
    padding-left: 0 !important;
}

.ESMMenuContainer .menu {
    display: flex;
    align-items: center;
    height: 36px;
    font-size: 14px;
    color: #4b5563;
    border-radius: 6px;
    padding-left: 15px;
    margin-bottom: 5px;
}

.ESMMenuContainer .menu:hover {
    background-color: #f1f2f5;
}

.ESMMenuContainer .menu .esmfont {
    font-size: 16px;
    color: #4b5563;
    padding-right: 6px;
}

.ESMMenuContainer .menu.active {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.ESMMenuContainer .menu.active .esmfont {
    color: #1d4ed8;
}

.ESMContent {
    flex: 1;
    overflow: auto;
}


/*login*/
.ESMLoginFormContainer .ant-spin-nested-loading {
    width: 100%;
}

.ESMLoginFormContainer .formInput {
    height: 38px;
    width: 100%;
}

.ESMLoginFormContainer .ant-col {
    flex: 1 !important;
    max-width: 100% !important;
}

.ESMLoginFormContainer .submit {
    width: 100%;
    height: 40px;
    background: #3771e4;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.ESMLoginFormContainer .ant-col-offset-8 {
    margin-left: 0 !important;
}

.ESMLoginFormContainer .code {
    color: #3771e4;
    font-size: 14px;
    cursor: pointer;
}

.ESMLoginFormContainer .nav-tabs {
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ESMLoginFormContainer .nav-tabs .nav-link {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.ESMLoginFormContainer .nav-tabs .nav-link.active {
    color: #3771e4;
}

.ESMLoginFormContainer .nav-tabs .nav-link.active::after {
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    height: 2px;
    background: #3771e4;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
}

.ESMLoginFormContainer .nav-tabs-body {
    width: 100%;
}

.ESMLoginFormContainer {
    width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    position: relative;
    color: #333;
}

.ESMLoginFormContainer .tit {
    font-size: 24px;
    font-weight: 700;
    padding: 34px 0 40px 0;
}

.ESMLoginFormContainer .foot {
    width: 100%;
    color: #999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.ESMLoginFormContainer .loginForm {
    padding: 30px 50px;
    width: 100%;
}

.ESMLoginFormContainer .loginForm .name {
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin-bottom: 24px;
    font-weight: bold;
}

.ESMLoginFormContainer .loginForm .formInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 50px;
    border: 1px solid #919396;
    border-radius: 4px;
    background-color: hsla(0, 0%, 100%, .1) !important;
    padding: 10px;
}

.ESMLoginFormContainer .loginForm .formInput .input {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #c9c9c9;
    font-size: 15px;
    flex: 1;
    height: 100%;
}

.ESMLoginFormContainer .loginForm .codeBtn {
    height: 50px;
    width: 120px;
    background-color: #218deb;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

.ESMLoginFormContainer .loginForm .codeCount {
    color: #d0d0d0;
    font-size: 14px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #373f4f inset;
    -webkit-text-fill-color: #c9c9c9;
    transition: background-color 5000s ease-in-out 0s;
    /* webkit */
    transition: color 9999s ease-out;
    /* 其他浏览器 */
}

.ESMLoginFormContainer .loginForm .icon {
    color: #c9c9c9;
    font-size: 18px;
    margin-right: 2px;
}

.ESMLoginFormContainer .loginForm .formInput .inputText {
    flex: 1;
    font-size: 13px;
    color: #666;
}

.ESMLoginFormContainer .loginForm .formInput .code {
    width: 120px;
    flex: auto;
}

.ESMLoginFormContainer .loginForm .formInput .iconfont {
    font-size: 18px;
    color: #999;
    padding: 0 5px;
}

.ESMLoginFormContainer .loginForm .submit {
    margin: 0 0 15px 0;
    width: 100%;
    height: 40px;
    background-color: #53627f;
    border-radius: 4px;
    font-size: 14px;
}

.ESMLoginFormContainer .loginForm .getCode,
.ESMLoginFormContainer .loginForm .count {
    padding-right: 6px;
    font-size: 13px;
    color: #3771E4;
    text-align: right;
}

.ESMLoginFormContainer .loginForm .agree {
    font-size: 12px;
}

.ESMLoginFormContainer .loginForm .count {
    color: #666;
}

.ESMLoginFormContainer .loginForm .f {
    text-align: right;
}

.ESMLoginFormContainer .loginForm .f .link {
    color: #b1b3b6;
    font-size: 16px;
}

.ESMLoginFormContainer .tabHead {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #919396;
    text-align: right;
    padding-right: 20px;
}

.ESMLoginFormContainer .tabHead .link {
    font-size: 16px;
    color: #a6b8da;
    cursor: pointer;
}

/* 微信二维码登录 */
.ESMLoginFormContainer .dreamScanLogin {
    padding: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ESMLoginFormContainer .dreamScanLogin .codeImg {
    width: 220px;
    height: 220px;
}

.ESMLoginFormContainer .dreamScanLogin .text {
    margin-top: 20px;
    font-size: 16px;
    color: #a6b8da;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.ESMLoginFormContainer .dreamScanLogin .text .link {
    margin-left: 20px;
    color: #b1b3b6;
}

.ESMLoginFormContainer .dreamScanLogin .text .r {
    color: #218deb;
}

.getCode {
    color: #3771E4;
}

.verifyContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
}

@media screen and (max-width: 640px) {
    .ESMLoginFormContainer {
        width: 90%;
    }

    .loginContent {
        position: absolute;
        width: 100%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99;
    }

    .loginContent .loginLeft {
        display: none;
    }

    .loginContent .ESMLoginFormContainer {}
}

.pageLogin {
    width: 100%;
    height: 100%;
    background: url(../images/logo_bg.fc644de.jpg) no-repeat 50%;
    background-size: cover;
    position: relative;
}

.loginContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes move-point {
    0% {
        left: 160px;
        top: 167px;
    }

    12% {
        left: 274px;
        top: 120px;
    }

    25% {
        left: 386px;
        top: 166px;
    }

    37% {
        left: 434px;
        top: 282px;
    }

    50% {
        left: 388px;
        top: 395px;
    }

    62% {
        left: 274px;
        top: 442px;
    }

    75% {
        left: 161px;
        top: 396px;
    }

    87% {
        left: 112px;
        top: 281px;
    }

    100% {
        left: 160px;
        top: 167px;
    }
}

@media screen and (max-width: 640px) {
    .loginContent {
        position: absolute;
        width: 100%;
        min-width: 100%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loginContent .loginLeft {
        display: none;
    }

    .loginContent .loginFormContainer {
        width: 90%;
        padding: 0 20px 20px
    }
}

.esmTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.esmTitleContainer .tit {
    position: relative;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

.esmTitleContainer .tit::before {
    content: "";
    width: 2px;
    height: 16px;
    background-color: #2962ff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.experimentListPage {
    padding: 15px;
    width: 100%;
}

.experimentListContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.experimentListContainer .experimentItem {
    background-color: #fff;
    border-radius: 8px;
    width: calc(33.3% - 15px);
    margin: 0 15px 15px 0;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.experimentListContainer .experimentItem {
    display: flex;
    flex-direction: column;
}

.experimentListContainer .experimentItem .hd {
    flex: 1;
    padding: 15px;
}

.experimentListContainer .experimentItem .name {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
}

.experimentListContainer .experimentItem .introduction {
    color: #999;
    line-height: 1.8;
}

.experimentListContainer .experimentItem .foot {

    border-top: 1px solid #f2f2f2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}
.experimentDesignTabsContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #edf4fe;
}
.experimentDesignTabsContainer .opt{
    display: flex;
    flex-direction: row;
}

.ESMHeaderContainer .nav {
    height: 100%;
    margin-left: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ESMHeaderContainer .navItem {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 25px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    position: relative;
}
.ESMHeaderContainer .navItem.active {
    background-color: #2979FF;
}
.ESMHeaderContainer .navItem.active::after{
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ff8f5f;
    position: absolute;
    bottom: 0;
    left: 0;
} 

.experimentDesignContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.experimentDesignContainer ul {
    padding: 0 !important;
}

.experimentDesignComponent {
    width: 130px;
}

.experimentDesignComponent .hd {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    color: #374151;
    font-weight: bold;
    margin:15px 0 10px 15px;
}

.experimentDesignComponent .hd .name {
    margin-left: 8px;
}

.experimentDesignComponent .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left:15px !important;
}

.experimentDesignComponent .list li {
    height: 50px;
    width: 100px;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px 10px 0;
    font-size: 13px;
    color: #333;
    cursor: move;
}

.experimentDesignComponent .list li :nth-child(2n) {
    margin-right: 0;
}

.experimentDesignComponent .list li:last-child {
    margin-bottom: 0;
}

.experimentDesignComponent .list li .esmfont {
    margin-right: 8px;
    font-size: 18px;
}

.experimentDesignComponent .list li .esmfont.icon-text {
    color: #2979ff;
}

.experimentDesignComponent .list li .esmfont.icon-picture {
    color: #8E24AA;
}

.experimentDesignComponent .list li .esmfont.icon-audio {
    color: #EF6C00;
}

.experimentDesignComponent .list li .esmfont.icon-video {
    color: #F44336;
}

.experimentDesignComponent .list li .esmfont.icon-response {
    color: #03A9F4;
}

.experimentDesignComponent .list li .esmfont.icon-zhushidian {
    color: #FB8C00;
}

.experimentDesignAttribute {
    width: 280px;
    padding: 0;
    height: 100%;
    overflow-y: auto;
}

.experimentDesignAttribute .m-tabs>.m-tabs-bar {
    background-color: #eaf0ff;
}

.experimentDesignAttribute .m-tabs-items {
    background-color: #f9fafb;
    padding: 10px;
}

.experimentDesignAttribute .hd {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    color: #374151;
    font-weight: bold;
    margin-bottom: 10px;
}

.experimentDesignAttribute .hd .name {
    margin-left: 8px;
}

.experimentDesignAttribute .list {
    padding: 0 !important;
}

.experimentDesignContent {
    position: relative;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.screenConatiner {
    width: 180px;
    height: 100%;
    overflow: auto;
}
.screenConatiner .m-tabs-items{
 background-color: #f9fafb;
   padding: 5px !important;
}
.screenConatiner .tit {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    color: #448aff;
    font-size: 14px;
    padding-left: 10px;
   
}
.screenConatiner .m-tabs>.m-tabs-bar {
    background-color: #eaf0ff;
}
.screenConatiner .hd{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 0;
}

.screenConatiner .screenList {
  
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.screenConatiner .screenList li {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background-color: #fff;
    margin-bottom: 5px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
}

.screenConatiner .screenList li .tip {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    font-size: 10px;
    color: #fff;
    padding: 0 5px;
}

.screenConatiner .screenList li.active {
    background-color: #218deb;
    color: #fff;
}

.screenDesignAreaContainer {
    flex: 1;
    position: relative;
    background-color: #fff;
    border: 1px solid #eee;
}

.screenDesignArea {
    border: 2px dashed #fde2d6;
    top: 50%;
    left: 50%;
    position: absolute;
    /* background-image: radial-gradient(circle, rgb(219 213 213) 1px, rgb(255 255 255) 2px);
    background-size: 50px 50px;
    background-repeat: repeat; */
}

.m-application--is-ltr .m-btn__content .m-icon--left {
    margin-right: 0 !important;
}

.contorl-handle .video{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.experimentDesignContent .component-content {
    position: absolute;
}

.experimentDesignContent .contorl-handle {
    border: 1px dotted #e5e7eb;
    cursor: pointer;
    position: absolute;
}

.experimentDesignContent .contorl-handle.active {
    border-color: #2962ff;
}

.experimentDesignContent .contorl-handle .text {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.experimentDesignContent .contorl-handle .text.center {
    justify-content: center;
    align-items: center;

}

.experimentDesignAttributeBox {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 10px;
}

.experimentDesignAttributeBox .hd {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.experimentDesignAttributeBox:last-child {
    margin-bottom: 0;
}

.experimentDesignAttributeBox .tit {
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
}

.experimentDesignAttributeBox .opt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.experimentDesignAttributeForm li {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.experimentDesignAttributeForm li:last-child {
    margin-bottom: 0;
}

.experimentDesignAttributeForm .label {
    color: #4b5563;
    font-size: 12px;
    margin-bottom: 6px;
}

.experimentDesignAttributeForm label {
    font-size: 12px !important;
}

.experimentDesignContent .bc,
.experimentDesignContent .bl,
.experimentDesignContent .br,
.experimentDesignContent .lc,
.experimentDesignContent .rc,
.experimentDesignContent .tc,
.experimentDesignContent .tl,
.experimentDesignContent .tr {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #2962ff;
    cursor: nwse-resize
}

/* 分隔条 */
.resizer {
  width: var(--resizer-width);
    background: #e0e0e0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s ease;
}

.resizer:hover {
    background: var(--primary-color);
}

.resizer::before {
    content: "";
    width: 2px;
    height: 40px;
    background: #999;
    border-radius: 1px;
}

.resizer:hover::before {
    background: white;
}

.experimentDesignContent .bl,
.experimentDesignContent .lc,
.experimentDesignContent .tl {
    left: -3px
}

.experimentDesignContent .br,
.experimentDesignContent .rc,
.experimentDesignContent .tr {
    right: -3px
}

.experimentDesignContent .bc,
.experimentDesignContent .bl,
.experimentDesignContent .br {
    bottom: -3px
}

.experimentDesignContent .tc,
.experimentDesignContent .tl,
.experimentDesignContent .tr {
    top: -3px
}

.experimentDesignContent .bl,
.experimentDesignContent .tr {
    cursor: nesw-resize
}

.experimentDesignContent .bc,
.experimentDesignContent .tc {
    cursor: row-resize
}

.experimentDesignContent .lc,
.experimentDesignContent .rc {
    cursor: col-resize
}

.experimentDesignContent .bc,
.experimentDesignContent .tc {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.experimentDesignContent .lc,
.experimentDesignContent .rc {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.m-text-field--outlined fieldset {
    border-color: #d1d5db !important;
}

.m-text-field__suffix {
    color: #c7c7c7 !important;
}

input[type="color" i] {
    block-size: 20px !important;
    padding: 0 !important;
}

.experimentDesignAttributeForm li {
    display: flex;
    flex-direction: column;
}

.experimentDesignAttributeForm li .con {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.experimentDesignAttributeForm textarea {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.experimentDesignAttributeForm .m-text-field input,
.experimentDesignAttributeForm .m-select__selection {
    font-size: 13px !important;
    color: #333;
}

.uploadBtn {
    position: relative;
    overflow: hidden;
    width: fit-content;
}

.uploadBtn .fileInput {
    opacity: 0;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.experimentDataTable thead tr {
    background-color: #f3f4f6;
}

.experimentDataTable th,
.experimentDataTable tr {
    border: 1px solid #e5e7eb;
    padding: 10px;
}

.experimentDataEditPage {
    padding: 15px;
    width: 100%;
    overflow: auto;
}

.experimentDataTable {
    margin-top: 10px;
    background-color: #fff;
}

.experimentDataTable audio {
    width: 220px;
    height: 50px;
}

.AddExperimentComponentModal li {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 10px;
}

.AddExperimentComponentModal li:last-child {
    margin-bottom: 0;

}

.AddExperimentComponentModal li.active {
    border-color: #2962ff;
}

.AddExperimentComponentModal li .name {
    font-weight: bold;
    color: #333;
    font-size: 14px;
    margin-bottom: 5px;
}

.AddExperimentComponentModal li .description {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
}

.experimentDesignElements {
    width: 180px;
    background-color: #fff;

}

.experimentDesignElements .tit {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #eee;
    color: #448aff;
    font-size: 14px;
    padding-left: 10px;
}

.experimentDesignElements .list li {
    line-height: 30px;
    padding-left: 10px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    margin: 5px 0;
}

.experimentDesignElements .list li.active,
.experimentDesignElements .list li:hover {
    background-color: #e9f1ff;

}

.runExperimentContainer {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.runScreenDesignArea {
    top: 50%;
    left: 50%;
    position: absolute;
}

.runScreenDesignArea .contorl-handle {
    position: absolute;
}

.runScreenDesignArea .contorl-handle .text {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.runScreenDesignArea .contorl-handle .text.center {
    justify-content: center;
    align-items: center;

}

.previewOpt {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.previewOpt button {
    margin-left: 10px;
}

.contorl-handle p {
    margin: 0 !important;
    padding: 0 !important;
}

.experimentDetailPage {
    width: 100%;
    overflow: auto;
}

.experimentDetailPage .head {
    padding: 15px;
    width: 100%;
    background-color: #fff;
}

.experimentDetailPage .esmTitleContainer {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.experimentInfo .name {
    font-size: 16px;
    margin-bottom: 10px;
}

.experimentInfo .introduction {
    color: #888;
    line-height: 1.6;
}

.experimentDetailPage .tabContainer {
    padding: 10px;
}

.experimentDetailContent .down {
    font-size: 13px;
    font-weight: normal;
    color: #448aff;
    cursor: pointer;
}

body .m-application .elevation-1 {
    box-shadow: none !important;
}

.ESMWarp .m-data-table>.m-data-table__wrapper>table>tbody>tr:not(:last-child)>td:not(.m-data-table__mobile-row),
.m-data-table>.m-data-table__wrapper>table>tbody>tr:not(:last-child)>th:not(.m-data-table__mobile-row) {
    border-bottom: 1px solid #eee !important;
}

.ESMWarp .m-data-table>.m-data-table__wrapper>table>thead>tr:last-child>th {
    border-bottom: 1px solid #eee !important;
}

.colors{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}
.colors .color{
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 1px solid #eee;
    cursor: pointer;
}
.InstructionsContainer{
    display: flex;
    flex-direction: row;
}
.InstructionsContainer .nav{
    padding: 10px 0 10px 10px;
    width: 220px;
    height: calc(100vh - 56px - 63px - 10px);
    overflow: auto;
}
.InstructionsContainer .tit{    
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.InstructionsContainer .nav li{
    line-height: 36px;
    cursor: pointer;
    font-size: 13px;
    color: #888;
}
.InstructionsContainer .content{
    flex: 1;
    padding: 15px;
     height: calc(100vh - 56px - 63px - 10px);
    overflow: auto;
}
.InstructionsContainer .content .h1{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 25px;
}
.InstructionsContainer .content .h2{
     font-size: 16px;
    font-weight: bold;
    color: #000;
     margin-bottom: 20px;
     margin-top: 20px;
}
.InstructionsContainer .content .section{
    line-height: 1.8;
    font-size: 14px;
    
}