.sun .sider-draw-info{
    background-color: #fff !important;
}
.sider-draw-info {
    width: 100%;
    background-color: #1E1F22;
    border-radius: 10px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw-message-item {
    display: flex;
}

.draw-message-item .flex-align {
    display: flex;
    align-items: center;
}

.draw-image-item img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.draw-message-item .draw-m-time {
    color: #707070; font-size: 12px;
}

.draw-message-item .draw-m-model {
    border-radius: 4px;
    height: 24px;
    line-height: 24px;
    --un-bg-opacity: .5;
    background-color: #1980FA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #fff;
}
.sun .draw-message-item-answer{
    background-color: #fff !important;
}
.draw-message-item-answer {
    --un-bg-opacity: 1;
    background-color: rgba(64,61,56,var(--un-bg-opacity));
}

.draw-msg-btn-del,.draw-msg-btn-copy {
    cursor: pointer;
}

.box-desc {
    white-space: normal;
}

.d3_config_radio ul li{
    width: 72px;height: 40px; line-height: 40px; padding: 5px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    float: left;
    cursor: pointer;
}
.d3_config_radio ul li:hover, .d3_config_radio ul li.selected{
    border: 1px solid #1980FA;
}
.d3_config h1{ font-weight: bold}
.d3_config .layui-input{ border-radius: 10px}
.setting-size-bg{ background-color: #E5E7EB;}
.setting-size-value{ float: left; margin-top: 2px;}
.setting-size-value div{ float: left;}
.config-set ul li{ width: 72px; height: 40px; line-height: 40px;padding: 5px; text-align: center; font-size: 12px; border: 1px solid #ccc; border-radius: 5px; float: left; cursor: pointer;}
.clear{
    clear: both;
}

.dialog-show-image .dialog-tip-content {
    position: relative;
}

.dialog-tip-content .control-bar {
    width: 300px;
    height: 30px;
    line-height: 30px;
    background: rgba(255, 255, 255, .4);
    border-radius: 15px;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 150px);
}
.dialog-tip-content .control-bar i {
    font-size: 20px !important;
    cursor: pointer;
}

.draw-msg-btn-copy {
    display: inline-block;
    vertical-align: sub;
    padding-left: 1em;
}
#layui-layer-photos .icon-download {
    font-size: 18px;
}

.draw-image-item img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto; border-radius: 10px;
}
.sun .select-1-inner{
    background-color: #1980FA !important; color: #fff;
}
.select-1-inner {
    width: 100%;
    padding-right: 4%;
    height: 40px;
    line-height: 40px;
    background-color: #303033;
    border-radius: 3px;
}

.sun .select-1{background-color: #1980FA !important;}
.select-1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #303033;
    padding: 5px 30px 5px 5px;
    border-radius: 3px;
}
.sun .draw-image-item{ background-color: #EDF5FF !important;}
.draw-image-item {
    width: 250px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    background-color: #303033;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px 15px 0;
}

.draw-message-item .content {
    padding: 8px 0;
}
.sun .input-bg{
    background-color: #1980FA !important; padding: 0 5px !important;
}
.input-bg{
    background-color: #303033; padding: 0 5px
}
.sun #create-wanxiang-seed{
    background-color: #1980FA;
}
#create-wanxiang-seed{
    padding: 10px; border-radius: 5px; background-color: #18181c;
}

.sun .draw-header{
    background-color: #fff;
}
.draw-right{ border-left: 1px solid #ebebeb;}

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center
}
.p-12{ font-size: 12px}
.sun .w-216{
    background-color:#FFF;
}
.w-216{ width: 216px; height: 216px; background-color:#1E1F22;border-radius:10px;flex-direction:column; display: flex;
    align-items: center;justify-content: center; box-sizing:border-box}
.el-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.el-image-64{width: 64px; height: 64px; margin-bottom: 10px;}
.mj-title{margin-bottom:5px;color: #333;display: flex;align-items: center; font-weight: bold}
.mj-title-icon{border-radius:3px; font-size: 12px;width: 28px; height: 16px; margin-left: 5px; color: #FFF; background-color: #1980FA; display: flex;
    align-items: center;justify-content: center}
.mj-desc{ color: #7D8289;flex-direction:column;}
.mj-desc-doc{word-break: break-all;white-space: normal; font-size: 12px; line-height: 15px; padding: 0px 10px 0px 10px; text-align: center}
.modal-list{
    padding-left: 8px;padding-right: 8px; overflow: hidden; flex: 1 1 0%;
}
.py-6{
    padding-top: 6px;padding-bottom: 6px;display: flex;align-items: center
}
.py-6 .el-image{
    display: block !important;
}
.modal-gc{ color: #333; margin-left: 5px; font-weight: 700;}
.modal-xj{border-radius:2px; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; margin-bottom: 10px; color: #949BA4;    display: flex;align-items: center;}
.mr-10{ margin-right: 10px;}
.h10{ height: 10px;}
.modal-desc{gap: 5px;justify-content:space-between; flex-direction:column;flex:1 1 0%; display:flex; height: 100%}
.modal-desc-title{ font-size: 13px; color: #333; display: flex; text-align: center;}
.modal-desc-d{ word-break: break-all;white-space: normal; font-size: 12px; line-height: 15px; color: #949BA4;}
.mj-mx{
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    margin: 0 8px;
    background-color: #1980FA;
    border-radius: 4px;
    white-space:normal;
    font-size: 12px;
    color: #fff;
}
.mj-time{ color: #333; font-size: 12px; white-space:pre-wrap; font-weight: normal}
.draw-m-model{ padding: 8px 0;}
.sun .mj-list{ background-color: #fff;}
.mj-list{ background-color: #403D38;  }
.sun .mj-m-model{ color: #333;}
.mj-m-model{    word-break: break-all;white-space: normal; color: #FFF; padding: 8px 0; font-size: 12px}
.mj-images{ width: 340px; padding: 10px 0;}
.mj-config-title{ line-height: 32px; margin-right: 15px; float: left;}
.sun .mj-config-span{ background-color: #DDDFEE !important; }
.mj-config-span{
    float: left;
    border-radius: 3px;
    font-size: 13px;
    height: 32px;
    margin-right: 8px;
    background-color: #4E5058;
    cursor: pointer;
    padding: 0 10px;
}
.sun .mj-config-span:hover{ background-color:#DDDFEE !important; }
.mj-config-span:hover{ background-color: #6e717c;}
.clear{ clear:both;}
.mj-draw-list{ margin-top: 10px;}
.draw-message-item{ margin-top: 10px}

.generate-description {
    width: 100%;
    padding: 15px 1rem;
    margin: 0 auto;
}
.sun .generate-description .generate-description-body{
    background-color: #fff !important;
}
.generate-description .generate-description-body {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background-color: #37393f;
    display: flex;
    color: #b4b9bf;
    z-index: 10;
    height: 100px;
    padding: 10px;
}
.sun .generate-description .generate-description-body .el-textarea__inner{
    color: #333;
}
.generate-description .generate-description-body .el-textarea__inner {
    background-color: transparent;
    box-shadow: none;
    color: #fff;
    padding-left: 0;
    padding-right: 0;
    resize: none; width: calc(100% - 200px); float: left;
}

.generate-description .generate-description-body .el-textarea__inner::-webkit-scrollbar {
    display: none!important
}

.generate-description .generate-description-body .guidance {
    position: absolute;
    top: 0;
    transform: translate(100px) translateY(calc(-100% + 30px))
}

.generate-description .generate-description-body .guidance-content {
    animation: scale-breathe 2s infinite linear
}

.generate-description .generate-description-body .mobile-guidance {
    transform: translate(-10px) translateY(calc(-100% + 30px))!important
}
.generate-description .mj-ov{
    overflow: hidden;  flex-direction:column; flex: 1 1 0%; width: 100%; height: 100%;
}
.mj-full{ width: 100%;  }
.fiex-1{ flex: 1 1 0%;}
.relative{ position: relative;}
.absolute{ position: absolute}
.z-5{ z-index: 5;}
.hidden{ display: none}

.primary-button {
    cursor: pointer;
    background-color: #5865f2;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    user-select: none; width: 78px; height: 36px; line-height: 36px; float: right;
}

.primary-button:hover {
    background-color: rgba(88,101,242,.867)
}

.primary-button:active {
    background-color: #5865f2
}

.primary-button.disabled {
    background-color: rgba(88,101,242,.533);
    cursor: not-allowed
}

.primary-button.disabled_black {
    cursor: not-allowed;
    background-color: #393b3f;
    user-select: none;
    color: #999
}
.btn-config{ margin-top: 5px; }
.sun .kuaisu{
    background-color: #1980FA; color: #fff;
}
.kuaisu{
    width: 89px;
    height: 28px;
    border-radius: 4px;
    background-color: #17181a;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6d6f78;
    position: relative;
    cursor: pointer; float: left; margin-right: 10px;
}
.sun .kuaisu .select-2{ background-color: #1980FA; color: #fff;}
.kuaisu .select-2{ background: #17181a}

.draw-msg-btn-del,.draw-msg-btn-copy {
    cursor: pointer;
}

.draw-msg-btn-copy {
    display: inline-block;
    vertical-align: sub;
    padding-left: 1em;
}

.layui-layer{ background: #1d2027 !important;}
.layui-layer-title{ color: #B4B9BF !important;}
.layui-layer-setwin span{ color: #B4B9BF !important;}
.sun .canshu_main{
    background: #EDF5FF; color: #333;
}
.canshu_main{ width: calc(100% - 20px); height: 100%; overflow-y: scroll; background: #1d2027; padding: 10px; color: #fff; padding-bottom: 120px;}
.sun .cs-title{
    color: #333;
}
.cs-title{width: 100%; height: 30px; line-height: 30px;  color: #fff; border-left: 5px solid #1980FA; border-radius: 5px; }
.cs-title h1{ margin-left: 10px}
.cs-title a{ height: 30px; display: inline-block;  color: #1980FA; padding: 0 5px; border-radius: 10px; border: 1px solid #1980FA; margin-right: 10px; float: right}
.sun .mj-item-block{
    color: #333;
}
.mj-item-block{ width: 500px; height: 35px; line-height: 35px; font-size: 12px; border-radius: 4px!important; color: #CBCBCB;  margin: 10px 0; display: flex; align-items:center; padding: 0 15px;}
.mj-item-right select{width: 200px;height: 30px;line-height: 30px;border-radius: 5px;background: #1980FA;color: #fff; margin-left: 80px; }
.cs-zy{ width: 450px; height: 100px; border: 1px solid #393c43; border-radius: 8px; margin: 10px 0; padding: 10px 0;     display: flex;flex-direction: column;justify-content: space-between; }
.mj-cs-bl{ display: flex; align-items: center; margin-top: 10px;}
.sun .mj-cs-bl ul li{ color: #333;}
.mj-cs-bl ul li{ width: 70px; height: 100px; margin: 0px 10px 10px 0; border-radius: 4px; border: 1px solid #393C43; text-align: center; float: left; color: #8E9093; padding-top: 10px; font-size: 12px;}
.mj-cs-bl ul li img{ width: 36px; height: 40px; margin-left: 15px;}
.modal-select, .modal-xj:hover {
    cursor: pointer;
    --un-gradient-shape: to right;
    --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
    background-image: linear-gradient(var(--un-gradient)); color: #fff;
}

.modal-select, .modal-xj:hover {
    --un-gradient-to-position: 100%;
    --un-gradient-to: rgba(68,103,235,var(--un-to-opacity, 1)) var(--un-gradient-to-position);
}
.modal-select, .modal-xj:hover {
    --un-gradient-from-position: 0%;
    --un-gradient-from: rgba(27,99,231,var(--un-from-opacity, 1)) var(--un-gradient-from-position);
    --un-gradient-to-position: 100%;
    --un-gradient-to: rgba(48,85,67,0) var(--un-gradient-to-position);
    --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
}
.modal-select .modal-desc-title, .modal-xj:hover .modal-desc-title{
    color: #fff;
}
.modal-select .modal-desc-d, .modal-xj:hover .modal-desc-d{
    color: #fff;
}
.draw-image-item {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #303033;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px 15px 0;
}

.mj-ar-selected {
    border: 1px solid #5865F2 !important;
}
.sun #canshu_config{
    background: #EDF5FF; color: #333;
}
#canshu_config {
    width: 850px;
    height: 660px;
    position: absolute;
    left: 1rem;
    z-index: 1000;
    bottom: 120px;
    border-radius: 5px;
    overflow: hidden;
    background: #1d2027;
    display: none;
}

#canshu_config .n-card-header {
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
}

#canshu_config .n-card-header__main {
    width: calc(100% - 38px);
    padding: 10px; color: #1980FA;
}

.mj-img-item {
    width: 150px;
    height: 150px;
    margin: 10px 10px 10px 0;
    border: 2px #5E6166 dashed;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mj-upload-btn {
    margin-top: 56px;
    text-align: center;
}

.mj-img-item img {
    width: 100%;
    height: 100%;
}

.mj-img-item .layui-icon-close {
    position: absolute;
    right: 0;
    top: 0;
    background: #403d38;
    border-radius: 2px;
}

.range-input {
    width: 15% !important;
    padding: 5px;
}

.range-input-bar {
    position: relative;
    top: -2px;
    background-size: 34.6939% 100%;
}
.draw-shuoming{
    font-size: 12px; padding: 5px 0;
}

.draw-item-del-confirm {
    border: 1px solid var(--main-bg-color);
}

.SceneReplicationPanel{
    width: 100%; padding: 0 16px 0px;
}
.SceneReplicationPanel .upload_img{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.SceneReplicationPanel .upload_img .u_title{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; color: #1c1d1f;
}
.SceneReplicationPanel .upload_img .box_2{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 248px;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px; border: 1px dashed #d0d2d6; position: relative;
}
.SceneReplicationPanel .block_bx3{
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 8px 8px;
}
.SceneReplicationPanel .button_EO7FD{
    display: flex;
    min-width: 122px;
    height: 32px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D0D2D6;
    background: #FFF;
    color: #1C1D1F;
    cursor: pointer;
}
.SceneReplicationPanel .button_EO7FD span{
    font-size: 14px;
    margin-left: 4px;
}
.SceneReplicationPanel .desc_pVcxD{
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    text-align: center; color: #939599;
}

.footer_OrZg6{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 66px;
    padding: 16px;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}
.xdesign-meidou-info-btn{
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color:#fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 8px;
    background: #38f;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.img_positio{
    width: 100%; height: 35px; line-height: 35px; position: absolute; right: 0; top: 0;
}
.img_positio_btn{ width: 35px; height: 35px;  line-height: 35px; text-align: center; margin-right: 10px; border-radius: 5px; background-color: #333; color: #fff; cursor: pointer}
.img_positio_btn:hover{ background-color: #1980fa}
.img_positio_btn_list{ display: flex; justify-content: flex-end;}

.kuozhan{ font-size: 12px; }
.kuozhan span{ margin-left: 5px}