.ai, .ai .ks-range {accent-color: #3f8491}/*定义浏览器控件颜色 浏览器根据深浅色自动调整*/
.ai-wrap { width: 100%; min-width: initial; max-width: 1920px; margin: 0 auto; }
.ai-header { width: 100%; height: 60px;  background: linear-gradient(#20837B, #207983); overflow: hidden;}
.ai-header, .ai-header a {color: #ace1e3; text-shadow: rgba(0,0,0, .5) 0 0 1px;}
.ai-logo { background:url("./logo-ai.png") no-repeat 50% 50%; background-size: auto 36px; color: #fff; width: 245px; height: 60px; line-height: 999px; overflow: hidden;}
.ai-navbar { height: 40px; line-height: 40px; margin: 10px 0 0 0; padding-left: 150px;}
.ai-navbar a {font-size: 16px; font-weight: bold; padding: 0 25px; float: left; border-radius: 100px; margin-right: 20px;}
.ai-navbar a:last-of-type { margin-right: 0}
.ai-navbar a:hover { background: rgba(255,255,255, .1);}
.ai-navbar a.a { background: linear-gradient(135deg, #62dbd3, #74f597); box-shadow: rgba(0,0,0, .18) 0 0 4px; color: #065d39; text-shadow: rgb(255 255 255) -1px -1px 0;}

.ai-header-userinfo > * {float: left; border-left: rgba(255,255,255, .1) 1px solid; display: block; height: 100%; padding: 0 10px;}

.ai-header > div:last-of-type { line-height: 60px;}
.ai-body > .ai-wrap { border: var(--bordercolor) 1px solid;}

/*提示词输入框*/
.ai-txt2img-box {background: #f7f6ff;}
.ai-txt2img-textarea { border: var(--bordercolor) 1px solid; border-radius: 10px; background: #fff; width: 100%;}
.ai-txt2img-textarea::placeholder { color: #999;}
.ai-txt2img-textarea textarea {border: none; background:#f7f7f7; border-radius: 5px; width: 100%; height: 110px; display: block; resize: none; padding: 5px; font-size: inherit}
.ai-txt2img-textarea textarea::placeholder { color: #85a0a4;}
.ai-txt2img-textarea > div {min-height:120px;}
.ai-txt2img-textarea > div:first-of-type { position: relative;}
.ai-txt2img-textarea > div:last-of-type { width: 30%; border-left: var(--bordercolor) 1px dashed;}

.ai-txt2img-textarea-float-btn { position: absolute; left: 40%; top: -10px;}
.ai-txt2img-textarea-float-btn > ks-btn { float: left; padding: 0 10px; border-radius: 100px;}


.ai-toolbar-rightbox { width: 280px; height: 100%;}
/*生成按钮*/
.ai-generate-btn {background: linear-gradient(180deg, #FD8B4D 0%, #E24000 100%); width: 100%; height:90px; border-radius: 10px; cursor: pointer; position: relative; user-select: none; overflow: hidden;}
.ai-generate-btn:hover {opacity: 0.9;}
.ai-generate-btn > div {display: flex; justify-content: center; align-items: center; height: 100%; color: #fff9e7; text-shadow: rgba(0,0,0, .8) 0 0 3px; font-weight: bold; text-align: center}
.ai-generate-btn ks-progress {position: absolute; bottom: 0; left: 0; right: 0; z-index: 11;}
.ai-generate-btn[active]:after {content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0,0,0, .3);}

.ai-tag-template { overflow: hidden; height: 0;}
.ai-tag-template[show] {height: auto;}
.ai-tag-template > div {border: var(--bordercolor) 1px solid; border-radius: 5px; background: #fff;}
.ai-tag-template-tab {border-bottom: var(--bordercolor) 1px solid; height: 30px; background: linear-gradient(to right, #3f9fa3, #28777d); padding:0 10px; user-select: none;}
.ai-tag-template-tab > * { padding: 0 8px; border-radius: 5px 5px 0 0; margin-top: 3px; height: 27px; line-height: 27px; border: transparent 1px solid; border-bottom: 0; cursor: pointer; color: #b5e1e3;}
.ai-tag-template-tab > *:hover {color: #3b1d18;}
.ai-tag-template-tab > .a {  background: #fff; color: #ff6000; font-weight: bold; border-color: var(--bordercolor);}
.ai-tag-template-content {background: #fafffe; box-shadow: rgba(0,0,0, .15) 0 0 10px; border-radius: 5px; overflow: hidden;}

.ai-tag-template-tags > div { cursor: pointer; border: #f2f2f2 1px solid; background: #fcfff7; border-radius: 5px; margin: 0 5px 5px 0;}
.ai-tag-template-tags > div > div {padding: 0 5px; height: 24px; line-height: 24px; font-size: 12px;}
.ai-tag-template-tags > div > div:first-child {color: #918888;}
.ai-tag-template-tags > div:hover {background: #e8f2ff}
.ai-tag-template-tags > div[checked] {background: #fff8e2; border-color: #e9ba85;}
.ai-tag-template-tags > div[checked] > p:first-child { color: #af8252;}



.ui-canvas-div {background: #000; width: 240px; height: 240px; position: relative;}

.ui-canvas-div canvas {position: relative; z-index: 10; max-width: 100%; max-height: 100%;}
.ui-canvas-div ._topright_btn {position: absolute; right: 5px; top: 5px;  z-index: 30; }
.ui-canvas-div ._topright_btn > span {border:#666 1px solid; border-radius: 5px; background: #222; color: #999; font-size: 12px; cursor: pointer; padding: 3px 5px;}
.ui-canvas-div ._pic_size_text {position: absolute; right: 5px; bottom: 5px;  z-index: 30; text-shadow: #000 0 0 1px; color: #999;}

.ui-canvas-div-selectfile { position: absolute; z-index: 20; width: 200px; height: 65px; left: 50%; top: 50%; margin: -32px 0 0 -100px;}
.ui-canvas-div-selectfile > div { height: 30px; line-height: 30px; text-align: center; color: #999; font-size: 14px; border: #666 1px solid; border-radius: 5px; width: 100%; margin-bottom: 5px; user-select: none; overflow: hidden; cursor: pointer;}
.ui-canvas-div-selectfile > div:hover { border-color: #999; color: #fff;}
.ui-canvas-div-selectfile > div:last-of-type {margin-bottom: 0}

.ui-canvas-div-selectfile > div input[type=file] {display: none;}
.ui-canvas-div-selectfile > div label {display: block; width: 100%; height: 100%; cursor: pointer;}
.ui-canvas-div-paste-labelinput input { border: none; background: none; color: inherit;}



.img-list-item {background: rgba(255,255,255, .2); border-radius: 5px; overflow: hidden; border-bottom: var(--bordercolor) 1px solid; box-shadow: rgba(0,0,0, .2) 0 0 10px;}
    .img-list-li {overflow: hidden; background: #000; text-align: center; margin-right: 5px; cursor: pointer; border: #000 1px solid}
    .img-list-li img {width: 100%; height: auto; max-width: 240px}
    .img-list-li:hover { border-color: #fff;}
.img-list-picbox > * { flex: 1;}


.prompt-tag > div { padding: 0 5px; line-height: 24px; float: left; border-radius: 5px; margin: 0 5px 5px 0; cursor: move; user-select: none; }
.prompt-tag ._del {cursor: pointer;}
.prompt-tag ._del:hover { color: var(--blue);}

.ai-form-params ks-input-group > *:first-child {width: 80px;}
.ai-form-params ks-input-group > .ks-range {flex: 1; border-left: var(--bordercolor) 1px solid; padding: 0 5px}
.ai-form-params ks-input-group > .ks-range input[type=range] { width: 100%;}
.ai-form-params-unit { max-width: 80px;}
.ai-form-params-unit input { width: 100%; height: 100%; display: block; background: none; border: none; text-align: center}
.ai-form-params-unit input[disabled] { color: #999; cursor: not-allowed;}

.layer-pay-type label { display: block; cursor: pointer;}
.layer-pay-type label > input { display:none;}
.layer-pay-type label > input + div { border:#e4e8ec 1px solid; border-radius: 5px; background: #fff; height: 40px; line-height: 40px;}
.layer-pay-type label > input + div > div{ padding: 0 10px;}
.layer-pay-type label > input:checked + div {border-color: #ff5700; background: #fff5f2;}

.layer-pay-qrcode { text-align: center;}
.layer-pay-qrcode img { width: 200px; height: 200px; border: var(--bordercolor) 1px solid; padding: 5px; box-shadow: rgba(0,0,0, .2) 0 0 5px; margin-top: 20px;}
.layer-pay-qrcode-status {margin-top: 10px; background: #f2f2f2; text-align: center;}


.vip-plan-item { border-radius:5px; padding: 10px; background: #fff; color: #999; box-shadow: #e5e5e5 0 0 10px;}
.vip-plan-item:hover {border-color: #89d1ff; background: #f2f2f2}
.vip-plan-item.a {border-color: #ff7e5e; background:#fff4de;}

.ai-share-layer ks-input-group > select { border: var(--bordercolor) 1px solid; height: 36px; line-height: 36px;}
.ai-share-layer ks-input-group > select:not(:last-of-type) {border-right: 0}
.ai-share-layer-img-li input[type=radio] {display: none;}
.ai-share-layer-img-li img {border: transparent 3px solid; border-radius: 5px;}
.ai-share-layer-img-li input:checked ~ img { border-color: #ff0000}

.ai-workflow-list {border-bottom: var(--blue) 1px solid; height: 30px;}
.ai-workflow-list-item { float: left; padding: 0 10px; border: var(--bordercolor) 1px solid; border-radius: 5px 5px 0 0; border-bottom: 0; overflow: hidden; white-space: nowrap; color: var(--textcolor); margin-right:5px; user-select: none; cursor: pointer; height: 29px; line-height: 29px; font-weight: bold;}
.ai-workflow-list-item > div { white-space: nowrap; text-align: center;}
.ai-workflow-list-item > div:nth-of-type(2) {color: #ccc; font-size: 12px;}
.ai-workflow-list-item:last-of-type {margin-right: 0}
.ai-workflow-list-item:hover {border-color: var(--indigo); color: var(--indigo);}
.ai-workflow-list-item[active] {border-color: var(--blue); color: var(--white); background: var(--blue); height: 30px;}

.ai-workflow-strategy { padding: 10px; border: var(--blue) 1px solid; border-top: 0; border-radius: 0 0 5px 5px; background: #e8faff;}

.ai-paramsbox[loadding] {pointer-events: none; opacity: 0.5;}
.ai-workflow-parambox {width:50%;}

@media (max-width: 1024px) {
    body {font-size: 12px;}
    .ai-workflow-parambox { width: 60%;}
}