/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-生成器/工具基础样式
 * ------------------------------------------------------------------------------
 */
.uk-tool-default{
    
}
.uk-tool-default .work{
    background: #24292f;
    border-radius: 10px;
}
.uk-tool-default .work .work-parameter{
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
}
.uk-tool-default .work .work-parameter span{
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 50px;
    background-color: #1b1f23;
    color: #fff;
    display: inline-block;
    margin-left: 20px;
}
.uk-tool-default .work .uk-subnav-pill {
    margin-left: 0;
    background: #292e35;
    border: 10px solid #292e35;
    padding: 0px 10px;
    border-radius: 10px 10px 0px 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
}
.uk-tool-default .work .uk-subnav-pill > *{
    padding-right: 10px;
    padding-left: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.uk-tool-default .work .uk-subnav-pill > *:last-child{
    padding-right: 0px;
}
.uk-tool-default .work .uk-subnav-pill > .uk-active > a {
    background-color: #1b1f23;
    color: #fff;
}
.uk-tool-default .work .uk-subnav-pill > * > :first-child {
    padding: 8px 15px;
    font-size: 16px;
    color: rgb(224 233 255 / 70%);
    border-radius: 50px;
    text-transform: inherit;
    gap: 5px;
}
.uk-tool-default .work .uk-subnav-pill > * > :first-child i{
    font-size: 20px;
}
.uk-tool-default .work .uk-subnav-pill > * > :first-child i.ceoicon-html5-fill{
    color: rgb(231 77 77);
}
.uk-tool-default .work .uk-subnav-pill > * > :first-child i.ceoicon-css3-fill{
    color: rgb(6 147 255);
}
.uk-tool-default .work .uk-subnav-pill > * > :first-child i.ceoicon-terminal-window-fill{
    color: rgb(213 169 0);
}
.uk-tool-default .work .uk-subnav-pill > * > a:hover {
    background-color: #1b1f23;
    color: #fff;
}
.uk-tool-default .work .uk-switcher{
    border-radius: 0px 0px 10px 10px;
}
.uk-tool-default .work .work-box{
    height: 100%;
    overflow: hidden;
    background: #24292f;
    border-radius: 0px 0px 10px 10px;
    /*padding: 20px 0;旧*/
    padding: 20px 0 85px 0;/*新*/
    position: relative;/*新*/
}
.uk-tool-default .work .work-box .control-section{
    /*height: 500px !important;旧*/
    height: 435px !important;/*新*/
    overflow-y: auto;
    padding: 0 20px;
}
.uk-tool-default .work .work-box .control-section::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .work .work-box .control-section::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .work .work-box .control-section::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

.uk-tool-default .work .work-box .type-title{
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.uk-tool-default .work .work-box .work-follow-btn{
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
    background: #24292f;
    padding-top: 20px;
}
.uk-tool-default .work .work-box .work-follow-btn .control-btn{
    display: flex;
    gap: 10px;
}
.uk-tool-default .work .work-box .work-button{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.uk-tool-default .work .work-box .work-button button{
    font-size: 14px;
    color: #fff;
    background: #1b1f23;
    border-radius: 4px;
    padding: 0 10px;
    border: 2px solid #1b1f23;
    flex: 1 1 calc(33.333% - 10px);
    flex: 1 1 calc((100% - 20px) / 3);
    text-transform: none;
}
.uk-tool-default .work .work-box .work-button button.active,.uk-tool-default .work .work-box .work-button button:hover{
    border: 2px solid #6366f1;
}

.uk-tool-default .work .work-box .work-button-2 button{
    flex: 1 1 calc(50% - 10px);
    flex: 1 1 calc((100% - 20px) / 2);
}
.uk-tool-default .work .work-box .work-button-4 button{
    flex: 1 1 calc((100% - 30px) / 4);
    flex: 1 1 calc(25% - 7.5px);
}
.uk-tool-default .work .work-box .work-button-4 button svg{
    stroke: rgb(224 224 224);
    width: 45px;
}

.uk-tool-default .work .work-box .work-radio{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    background-color: #1b1f23;
    box-sizing: border-box;
    padding: 5px;
    font-size: 14px;
    transition: clip-path 0.3s ease;
    align-items: center;
}
.uk-tool-default .work .work-box .work-radio label {
    flex: 1 1 auto;
    text-align: center;
    width: 50%;
}
.uk-tool-default .work .work-box .work-radio-4 label{
    width: 25%;
}
.uk-tool-default .work .work-box .work-radio label input {
    display: none;
}
.uk-tool-default .work .work-box .work-radio label span {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    padding: 8px;
    color: rgb(224 233 255 / 70%);
    transition: background-color 0.5s ease, font-weight 0.5s ease;
}
.uk-tool-default .work .work-box .work-radio label span:hover{
    color: #fff;
}
.uk-tool-default .work .work-box .work-radio input:checked ~ span {
    background-color: #292e35;
    color: #fff;
}
.uk-tool-default .work .work-box .work-radio input:checked ~ label {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.uk-tool-default .work .work-box .work-radio-btn{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.uk-tool-default .work .work-box .work-radio-btn label {
    flex: 1 1 calc(50% - 10px);
    flex: 1 1 calc((100% - 20px) / 2);
}
.uk-tool-default .work .work-box .work-radio-btn-3 label{
    flex: 1 1 calc(33.333% - 10px);
    flex: 1 1 calc((100% - 30px) / 3);
}
.uk-tool-default .work .work-box .work-radio-btn-4 label{
    flex: 1 1 calc((100% - 30px) / 4);
    flex: 1 1 calc(25% - 7.5px);
}
.uk-tool-default .work .work-box .work-radio-btn label input {
    display: none;
}
.uk-tool-default .work .work-box .work-radio-btn label span {
    font-size: 14px;
    color: #fff;
    background: #1b1f23;
    border-radius: 4px;
    padding: 0 10px;
    border: 2px solid #1b1f23;
    line-height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}
.uk-tool-default .work .work-box .work-radio-btn label span:hover{
    border: 2px solid #6366f1;
}
.uk-tool-default .work .work-box .work-radio-btn input:checked ~ span {
    border: 2px solid #6366f1;
}
.uk-tool-default .work .work-box .work-radio-btn input:checked ~ label {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.uk-tool-default .work .work-box .work-checkbox{
    height: 25px;
    color: rgb(224 233 255);
    background: #1b1f23;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
    cursor: pointer;
}
.uk-tool-default .work .work-box .work-checkbox input{
    transform: translateY(1px);
}

.uk-tool-default .work .work-box .work-reset{
    display: block;
    text-align: center;
    color: #fff;
    background: linear-gradient(117deg, #d946ef, #6366f1);
    line-height: 45px;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;
}
.uk-tool-default .work .work-box .work-reset:hover {
    box-shadow: 0 0.1rem 0.8rem rgb(153 87 240);
}

.uk-tool-default .work .work-box .work-btn{
    display: block;
    text-align: center;
    color: #fff;
    background: linear-gradient(117deg, #d946ef, #6366f1);
    line-height: 45px;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    flex: 1;
}
.uk-tool-default .work .work-box .work-btn:hover{
    box-shadow: 0 0.1rem 0.8rem rgb(153 87 240);
}

.uk-tool-default .work .work-box .work-btn-reset{
    display: block;
    text-align: center;
    color: #fff;
    background: #1b1f23;
    line-height: 45px;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    width: 84px;
}
.uk-tool-default .work .work-box .work-btn-reset:hover{
    opacity: .8;
}

.uk-tool-default .work .work-box .work-upload{
    border-radius: 4px;
    border: 2px dashed #545e6c;
    padding: 40px 20px;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.uk-tool-default .work .work-box .work-upload.uk-dragover{
    border: 2px dashed #6366f1;
}
.uk-tool-default .work .work-box .work-upload:hover{
    border: 2px dashed #6366f1;
}
.uk-tool-default .work .work-box .work-upload .work-upload-ico{
    background-image: url(https://style.jztheme.com/static/images/tools/picture-upload.png);
     width: 60px;
    height: 56px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
}
.uk-tool-default .work .work-box .work-upload-original{
    max-width: 100%;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.uk-tool-default .work .work-box .work-upload .btn{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
.uk-tool-default .work .work-box .work-upload .btn button{
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    margin-left: 5px;
    color: #6366f1;
    background: rgb(255 255 255 / 0%);
    vertical-align: inherit;
}
.uk-tool-default .work .work-box .work-upload .btn button:hover{
    color: #fff;
}
.uk-tool-default .work .work-box .work-file-info{
    background: #1b1f23;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    color: rgb(224 233 255 / 70%);
}

.uk-tool-default .custom-tab-nav{
    display: flex;
    align-items: center;
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
}
.uk-tool-default .custom-tab-nav .tab-button{
    margin-left: 20px;
    padding: 0 15px;
    font-size: 16px;
    color: rgb(224 233 255 / 70%);
    border-radius: 50px;
    text-transform: inherit;
    gap: 5px;
    display: flex;
    align-items: center;
    background: rgb(255 255 255 / 0%);
    line-height: 40px;
}
.uk-tool-default .custom-tab-nav .tab-button.active{
    background-color: #1b1f23;
    color: #fff;
}
.uk-tool-default .custom-tab-nav .tab-button i{
    font-size: 20px;
}
.uk-tool-default .custom-tab-nav .tab-button i.ceoicon-computer-line{
    color: rgb(225 225 225);
}
.uk-tool-default .custom-tab-nav .tab-button i.ceoicon-css3-fill{
    color: rgb(6 147 255);
}
.uk-tool-default .custom-tab-nav .tab-button i.ceoicon-html5-fill{
    color: rgb(231 77 77);
}
.uk-tool-default .custom-tab-nav .tab-button:hover {
    background-color: #1b1f23;
    color: #fff;
}
.uk-tool-default .tab-content{
    
}
.uk-tool-default .tab-content .tab-pane{
    display: none;
}
.uk-tool-default .tab-content .tab-pane.active{
    display: block;
}
.uk-tool-default .preview-content{
    height: 100%;
    overflow: hidden;
    background: #24292f;
    border-radius: 0px 0px 10px 10px;
    padding: 20px 0;
}
.uk-tool-default .preview-content .preview{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 500px !important;
    overflow-y: auto;
    padding: 0 20px;
}
.uk-tool-default .preview-content .preview::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .preview-content .preview::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .preview-content .preview::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

.uk-tool-default .editor{
    position: relative;
}
.uk-tool-default .editor .editor-title{
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    align-items: center;
}
.uk-tool-default .editor .editor-title span{
    padding: 8px 20px;
    font-size: 15px;
    border-radius: 50px;
    background-color: #1b1f23;
    color: #fff;
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.uk-tool-default .editor .editor-title span i{
    font-size: 20px;
    margin-right: 5px;
}
.uk-tool-default .editor .editor-title span i.ceoicon-html5-fill {
    color: rgb(231 77 77);
}
.uk-tool-default .editor .editor-title span i.ceoicon-css3-fill {
    color: rgb(6 147 255);
}
.uk-tool-default .editor .editor-title span i.ceoicon-terminal-window-fill {
    color: rgb(213 169 0);
}
.uk-tool-default .editor .copy{
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    background: #1b1f23;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 15px;
    line-height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.uk-tool-default .editor .copy:hover{
    background: #0f0f0f;
}
.uk-tool-default .editor .copy i{
    font-size: 18px;
    transform: translateY(0px);
}
.uk-tool-default .editor .editor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 542px;
}
.uk-tool-default .editor .editor-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgb(255 255 255 / 10%);
    border-left-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
.uk-tool-default .editor .CodeMirror{
    background: #24292f;
    height: 500px !important;
    min-height: 500px !important;
    border-radius: 0px 0px 10px 10px;
    padding: 20px 0;
}
.uk-tool-default .editor .CodeMirror .CodeMirror-gutters {
    background: #24292f;
}
.uk-tool-default .editor .CodeMirror .CodeMirror-selected {
  background-color: #323941;
}
.uk-tool-default .editor .CodeMirror-vscrollbar::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .editor .CodeMirror-vscrollbar::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .editor .CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

.uk-tool-default .work-preview-title{
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
}
.uk-tool-default .work-preview-title span{
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 50px;
    background-color: #1b1f23;
    color: #fff;
    display: inline-block;
    margin-left: 20px;
}
.uk-tool-default .work-preview-box{
    overflow: hidden;
    background: #24292f;
    border-radius: 0px 0px 10px 10px;
    padding: 20px 0;
}
.uk-tool-default .work-preview-box .work-preview-item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 500px !important;
    overflow-y: auto;
    padding: 0 20px;
}
.uk-tool-default .work-preview-box .work-preview-item::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .work-preview-box .work-preview-item::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .work-preview-box .work-preview-item::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

/*适用于工具生成预览内容*/
.uk-tool-default .work-preview-box .work-content-item{
    position: relative;
    border-radius: 10px;
    height: 500px !important;
    overflow-y: auto;
    padding: 0 20px;
}
.uk-tool-default .work-preview-box .work-content-item::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .work-preview-box .work-content-item::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .work-preview-box .work-content-item::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}
.uk-tool-default .work-preview-box .work-content-item .editor-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}
.uk-tool-default .work-preview-box .work-content-item .editor-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgb(255 255 255 / 10%);
    border-left-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-CSS生成器-内页样式
 * ------------------------------------------------------------------------------
 */
/* CSS新拟态生成器 */
.uk-tool-default .custom-tab-nav:has(.active.preview-tab){
    background: #d9d9d9;
}
.uk-tool-default .custom-tab-nav .preview-tab.active {
    background-color: #bcbcbc;
    color: #fff!important;
}
.uk-tool-default .custom-tab-nav:has(.active.preview-tab) .tab-button {
    color: #999;
}
.uk-tool-default .custom-tab-nav:has(.active.preview-tab) .tab-button:hover{
    background-color: #bcbcbc;
    color: #fff;
}
.uk-tool-default .neumorphic-preview{
    height: 100%;
    overflow: hidden;
    border-radius: 0px 0px 10px 10px;
    position: relative;
}
.uk-tool-default .neumorphic-preview .preview{
    height: 540px !important;
    border-radius: 0px 0px 10px 10px !important;
}
.uk-tool-default .neumorphic-preview .preview::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tool-default .neumorphic-preview .preview::-webkit-scrollbar-track{background-color:#24292f}
.uk-tool-default .neumorphic-preview .preview::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

.uk-tool-default .neumorphic-preview .preview .create-preview-box {
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uk-tool-default .neumorphic-preview .preview .create-preview-box .jztheme-tools-css-neumorphic{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
}
/* CSS毛玻璃生成器 */
.uk-tool-default .frosted-glass-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 10px;
}
.uk-tool-default .frosted-glass-preview.preview1 {
    background: linear-gradient(135deg, #d946ef 0%, #6366f1 100%);
}
.uk-tool-default .frosted-glass-preview.preview2 {
    background: linear-gradient(135deg, rgb(240, 147, 251) 0%, rgb(245, 87, 108) 100%);
}
.uk-tool-default .frosted-glass-preview.preview3 {
    background: linear-gradient(135deg, rgb(79, 172, 254) 0%, rgb(0, 242, 254) 100%);
}
.uk-tool-default .jztheme-tools-css-frosted-glass {
    padding: 30px;
    max-width: 300px;
    color: rgb(224 233 255);
}
.uk-tool-default .jztheme-tools-css-frosted-glass span{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
}
.uk-tool-default .jztheme-tools-css-frosted-glass p{
    font-size: 14px;
    font-weight: 400;
}
/* CSS盒子阴影生成器 */
.jztheme-tools-css-box-hadow{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    color: #24292f;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
}
/* CSS过渡生成器 */
.jztheme-tools-css-transition {
    padding: 20px 40px;
    background-color: #8e97f2;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.jztheme-tools-css-transition:hover {
    transform: rotate(15deg) scale(1) skew(-14deg, 0deg) translate(29px, 0px);
}
/* CSS渐变背景生成器 */
.jztheme-tools-css-gradient{
    width: 300px;
    height: 300px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
}
/* CSS动画生成器 */
.jztheme-tools-css-animation {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #8e97f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    border-radius: 10px;
    position: relative;
}
/* CSS三角形生成器 */
.uk-tool-default .jztheme-tools-css-triangle {
    transition: all 0.3s ease;
}
/* CSS边框半径生成器 */
.jztheme-tools-css-border-radius{
    width: 300px;
    height: 300px;
    background-color: #e9ebee; 
    font-size: 16px;
    color: #24292f;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
/* CSS列生成器 */
.uk-tool-default .create-preview-box {
    color: #fff;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* CSS输入滑块生成器 */
.jztheme-tools-css-input-slider{
    width: 399px;
}
/* CSS文本渐变生成器 */
.jztheme-tools-css-text-gradient{
    font-size: 48px;
    font-weight: bold;
    text-align: center;
}
/* CSS文本霓虹生成器 */
.jztheme-tools-css-text-neon {
    text-align: center;
    transition: all 0.3s ease;
}
/* CSS RGBA颜色值生成器 */
.jztheme-tools-css-rgba {
    color: #fff;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
/* CSS文本旋转生成器 */
.jztheme-tools-css-text-rotation {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    transition: transform 0.3s ease;
}
/* CSS方向转换生成器 */
.jztheme-tools-css-transform{
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #24292f;
    border-radius: 4px;
    transition: transform 0.3s ease;
}
/*CSS过滤器生成器*/
.jztheme-tools-css-filter-preview {
    width: 100%;
    text-align: center;
}

.jztheme-tools-css-filter-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    transition: filter 0.3s ease;
}
.filter-presets-item {
    cursor: pointer;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: rgb(224 233 255 / 70%);
}

.filter-presets-item:hover {
    color: #fff;
    background-color: #1b1f23;
}

.filter-presets-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 5px;
}

.filter-presets-item span {
    display: block;
    font-size: 12px;
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-图片工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*ICO图标生成工具*/
.jztheme-tools-picture-ico{

}
.jztheme-tools-picture-ico span{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
/*图片圆角生成工具*/
.jztheme-tools-picture-round{
    
}
.jztheme-tools-picture-round span{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
/*圆形图片生成工具*/
.jztheme-tools-picture-rotundity{
    
}
.jztheme-tools-picture-rotundity span{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-加密工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*MD5在线加密工具*/
.tools-encrypt-md5{
    
}
.tools-encrypt-md5 ul{

}
.tools-encrypt-md5 ul li{
    margin-bottom: 20px;
}
.tools-encrypt-md5 ul li:last-child{
    margin-bottom: 0;
}
.tools-encrypt-md5 ul li .title{
    color:#fff;
    font-size: 14px;
}
.tools-encrypt-md5 ul li .input{
    display: flex;
    align-items: center;
    gap: 10px;
}
.tools-encrypt-md5 ul li input{
    flex: 1;
}
.tools-encrypt-md5 ul li button{
    flex: 0 0 auto;
    padding: 0 20px;
    color: #fff;
    background: #1b1f23;
    line-height: 45px;
    font-size: 14px;
    border-radius: 4px;
}
.tools-encrypt-md5 ul li button:hover{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}

/*Email邮箱地址加密工具*/
.tools-encrypt-email{
    
}
.tools-encrypt-email .tips{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 500px !important;
    overflow-y: auto;
    padding: 0 20px;
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
.tools-encrypt-email .email-item{
    padding: 20px;
    color: #fff;
    background: #1b1f23;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.tools-encrypt-email .email-item:last-child{
    margin-bottom: 0;
}
.tools-encrypt-email .email-item .email-row{
    margin-bottom: 10px;
}
.tools-encrypt-email .email-item .email-row:last-child{
    margin-bottom: 0;
}
.tools-encrypt-email .email-item .email-row label{
    margin-bottom: 5px;
}
.tools-encrypt-email .email-item .email-row .email-value{
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    display: flex;
    gap: 10px;
}
.tools-encrypt-email .email-item .email-row .email-value .email-result{
    flex: 1 1 auto;
    line-height: 30px;
}
.tools-encrypt-email .email-item .email-row .email-value .copy-btn{
    flex: 0 0 auto;
    padding: 0 20px;
    color: #fff;
    background: #292e35;
    line-height: 30px;
    font-size: 14px;
    border-radius: 4px;
}
.tools-encrypt-email .email-item .email-row .email-value .copy-btn:hover{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}

/*URL网址链接加密工具*/
.tools-encrypt-url{
    
}
.tools-encrypt-url .tips{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 500px !important;
    overflow-y: auto;
    padding: 0 20px;
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
.tools-encrypt-url .url-item{
    padding: 20px;
    color: #fff;
    background: #1b1f23;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.tools-encrypt-url .url-item:last-child{
    margin-bottom: 0;
}
.tools-encrypt-url .url-item .url-row{
    margin-bottom: 10px;
}
.tools-encrypt-url .url-item .url-row:last-child{
    margin-bottom: 0;
}
.tools-encrypt-url .url-item .url-row label{
    margin-bottom: 5px;
}
.tools-encrypt-url .url-item .url-row .url-value{
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    display: flex;
    gap: 10px;
}
.tools-encrypt-url .url-item .url-row .url-value .url-result{
    flex: 1 1 auto;
    line-height: 30px;
}
.tools-encrypt-url .url-item .url-row .url-value .copy-btn{
    flex: 0 0 auto;
    padding: 0 20px;
    color: #fff;
    background: #292e35;
    line-height: 30px;
    font-size: 14px;
    border-radius: 4px;
}
.tools-encrypt-url .url-item .url-row .url-value .copy-btn:hover{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}

/*网络工具通用*/
.tools-network-info{
    padding: 20px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background: #1b1f23;
}
.tools-network-info label:last-child{
    margin-bottom: 0;
}
.tools-network-textarea{
    resize: none;
    line-height: 2;
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-网站工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*网页TDK查询工具*/
.tools-website-webpage-tdk{
    
}
.tools-website-webpage-tdk .tdk-item{
    margin-bottom: 20px;
}
.tools-website-webpage-tdk .tdk-item:last-child{
    margin-bottom: 0;
}
.tools-website-webpage-tdk .tdk-item .tdk-title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tools-website-webpage-tdk .tdk-item .tdk-title strong{
    font-size: 14px;
    color: rgb(224 233 255);
    font-weight: 400;
    flex: 1;
}
.tools-website-webpage-tdk .tdk-item .tdk-title .char-count{
    font-size: 14px;
    color: rgb(224 233 255);
}
.tools-website-webpage-tdk .tdk-item .tdk-title .char-count em{
    font-weight: bold;
    color: #fe2c55;
}
.tools-website-webpage-tdk .tdk-item .tdk-title .copy-single-btn{
    padding: 0 20px;
    color: #fff;
    background: #1b1f23;
    line-height: 30px;
    font-size: 14px;
    border-radius: 4px;
}
.tools-website-webpage-tdk .tdk-item .tdk-title .copy-single-btn:hover{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}
.tools-website-webpage-tdk .tdk-item .tdk-content{
    font-size: 15px;
    color: #fff;
    line-height: 2;
    background: #1b1f23;
    border-radius: 4px;
    padding: 15px 20px;
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-生成工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*随机密码生成工具*/
.jztheme-tools-generate-password{
    
}
.jztheme-tools-generate-password:has(.password-placeholder){
    display: flex;
    align-items: center;
    justify-content: center;
}
.jztheme-tools-generate-password .password-placeholder p{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
.jztheme-tools-generate-password .password-item{
    margin-bottom: 10px;
}
.jztheme-tools-generate-password .password-item:last-child{
    margin-bottom: 0;
}
.jztheme-tools-generate-password .password-item .grid{
    display: flex;
    align-items: center;
    gap: 10px;
}
.jztheme-tools-generate-password .password-item .grid .password-index{
    flex: 0 0 auto;
    width: 30px;
    font-size: 14px;
    color: rgb(224 233 255);
}
.jztheme-tools-generate-password .password-item .grid .password-value{
    flex: 1 1 auto;
}
.jztheme-tools-generate-password .password-item .grid .password-strength{
    flex: 0 0 auto;
    width: 30px;
    font-size: 14px;
    text-align: center;
}
.jztheme-tools-generate-password .password-item .grid .copy-password-btn{
    flex: 0 0 auto;
    padding: 0 20px;
    color: #fff;
    background: #1b1f23;
    line-height: 45px;
    font-size: 14px;
    border-radius: 4px;
}
.jztheme-tools-generate-password .password-item .grid .copy-password-btn:hover{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}
/*二维码生成工具*/
.jztheme-tools-generate-qrcode{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}
/*LOGO制作生成工具*/
/*.jztheme-tools-generate-logo .work{*/
/*    position: relative;*/
/*}*/
/*.jztheme-tools-generate-logo .work .work-follow-btn{*/
/*    position: absolute;*/
/*    bottom: 20px;*/
/*    right: 20px;*/
/*    left: 20px;*/
/*    background: #24292f;*/
/*    padding-top: 20px;*/
/*}*/
/*.jztheme-tools-generate-logo .work .work-follow-btn .control-btn{*/
/*    display: flex;*/
/*    gap: 10px;*/
/*}*/
/*.jztheme-tools-generate-logo .work .work-follow-btn .control-btn .work-btn{*/
/*    display: block;*/
/*    text-align: center;*/
/*    color: #fff;*/
/*    background: linear-gradient(117deg, #d946ef, #6366f1);*/
/*    line-height: 45px;*/
/*    border-radius: 4px;*/
/*    padding: 0 10px;*/
/*    font-size: 14px;*/
/*    flex: 1;*/
/*}*/
/*.jztheme-tools-generate-logo .work .work-follow-btn .control-btn .work-btn:hover{*/
/*    box-shadow: 0 0.1rem 0.8rem rgb(153 87 240);*/
/*}*/

/*.jztheme-tools-generate-logo .work .work-follow-btn .control-btn .work-btn-reset{*/
/*    display: block;*/
/*    text-align: center;*/
/*    color: #fff;*/
/*    background: #1b1f23;*/
/*    line-height: 45px;*/
/*    border-radius: 4px;*/
/*    padding: 0 10px;*/
/*    font-size: 14px;*/
/*    width: 84px;*/
/*}*/
/*.jztheme-tools-generate-logo .work .work-follow-btn .control-btn .work-btn-reset:hover{*/
/*    opacity: .8;*/
/*}*/
/*.jztheme-tools-generate-logo .work .logo-selector{*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 10px;*/
/*}*/
/*.jztheme-tools-generate-logo .work .logo-selector a{*/
/*    display: block;*/
/*    flex: 1 1 calc(33.333% - 10px);*/
/*    flex: 1 1 calc((100% - 20px) / 3);*/
/*}*/
/*.jztheme-tools-generate-logo .work .logo-selector a img{*/
    
/*}*/
/*.jztheme-tools-generate-logo .preview-placeholder{*/
/*    font-size: 14px;*/
/*    color: rgb(224 233 255 / 70%);*/
/*}*/
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-运行工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*HTML/CSS/JS在线运行工具*/
.tools-run-html-css-js{
    
}
.tools-run-html-css-js .uk-page-loading{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-image: linear-gradient(rgb(186 66 255 / 50%) 35%, rgb(0 225 255 / 50%));
    width: 50px;
    height: 50px;
    animation: container-loading 1.7s linear infinite;
    text-align: center;
    border-radius: 100px;
    filter: blur(2px);
    box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
}
.tools-run-html-css-js .uk-page-loading .load{
    background-color: rgb(192 77 240 / 10%);
    width: 50px;
    height: 50px;
    border-radius: 100px;
    filter: blur(10px);
}
.tools-run-html-css-js .editor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 542px;
    color: rgb(224 233 255 / 70%);
}
.tools-run-html-css-js .editor-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgb(255 255 255 / 10%);
    border-left-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
.tools-run-html-css-js .CodeMirror{
    background: #24292f!important;
    border: 0px solid rgb(255 255 255 / 0%);
    height: 522px!important;
	border-radius: 0px 0px 10px 10px;
	padding: 10px 0;
}
.tools-run-html-css-js .CodeMirror .CodeMirror-gutters {
    background: #24292f;
}
.tools-run-html-css-js .CodeMirror .CodeMirror-selected {
  background-color: #323941;
}
.tools-run-html-css-js .CodeMirror-vscrollbar::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.tools-run-html-css-js .CodeMirror-vscrollbar::-webkit-scrollbar-track{background-color:#24292f}
.tools-run-html-css-js .CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}
.tools-run-html-css-js .uk-subnav-pill {
    margin-left: 0;
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
}
.tools-run-html-css-js .uk-subnav-pill > .uk-active > a {
    background-color: #1b1f23;
    color: #fff;
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child {
    padding: 8px 20px;
    font-size: 16px;
    color: rgb(224 233 255 / 70%);
    border-radius: 50px;
    gap: 5px;
    text-transform: inherit;
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child i{
    font-size: 20px;
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child i.ceoicon-html5-fill{
    color: rgb(231 77 77);
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child i.ceoicon-css3-fill{
    color: rgb(6 147 255);
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child i.javascript{
    background-image: url("data:image/png;base64,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");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.tools-run-html-css-js .uk-subnav-pill > * > a:hover {
    background-color: #1b1f23;
    color: #fff;
}
.tools-run-html-css-js .uk-switcher{
    border-radius: 0px 0px 10px 10px;
}
.tools-run-html-css-js .editor{
    position: relative;
}
.tools-run-html-css-js .editor .copy{
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    background: #1b1f23;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 15px;
    line-height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tools-run-html-css-js .editor .copy:hover{
    background: #0f0f0f;
}
.tools-run-html-css-js .editor .copy i{
    font-size: 18px;
    transform: translateY(0px);
}
.tools-run-html-css-js .preview{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    height: 600px;
    width: 100%;
    border-radius: 10px;
}
.tools-run-html-css-js .preview iframe{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.tools-run-html-css-js .tools-btn{
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.tools-run-html-css-js .tools-btn span{
    border-radius: 50px;
    background: #0f0f0f;
    padding: 0 10px;
    line-height: 23px;
    font-size: 12px;
    margin-left: 10px;
}
.tools-run-html-css-js .tools-btn span i{
    margin-right: 3px;
}
.tools-run-html-css-js .tools-btn .btn{
    background: #292e35;
    border: 0px solid rgb(255 255 255 / 0%) !important;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
}
.tools-run-html-css-js .tools-btn .btn:hover{
    opacity: .8;
}
.tools-run-html-css-js .tools-btn .btn-1{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}
.tools-run-html-css-js .tools-btn label{
    margin-bottom: 0;
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-编程工具-内页样式
 * ------------------------------------------------------------------------------
 */
.uk-tools-program{
    
}
.uk-tools-program .editor{

}
.uk-tools-program .editor-title{
    background: #292e35;
    padding: 10px 0;
    border-radius: 10px 10px 0px 0px;
}
.uk-tools-program .editor-title span{
    padding: 8px 20px;
    font-size: 15px;
    border-radius: 50px;
    background-color: #1b1f23;
    color: #fff;
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
}
.uk-tools-program .editor-title span i{
    font-size: 20px;
    margin-right: 5px;
}
.uk-tools-program .editor-title span i.ceoicon-html5-fill {
    color: rgb(231 77 77);
}
.uk-tools-program .editor-title span i.ceoicon-css3-fill {
    color: rgb(6 147 255);
}
.uk-tools-program .editor-title span i.javascript {
    background-image: url(data:image/png;base64,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);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.uk-tools-program .editor-title span i.ceoicon-database-2-fill{
    color: rgb(49 177 255);
    transform: translateY(0px);
}
.uk-tools-program .editor-title span i.ceoicon-code-box-fill{
    color: rgb(49 177 255);
    transform: translateY(0px);
}
.uk-tools-program .editor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 542px;
    color: rgb(224 233 255 / 70%);
}
.uk-tools-program .editor-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgb(255 255 255 / 10%);
    border-left-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
.uk-tools-program .CodeMirror{
    background: #24292f!important;
    border: 0px solid rgb(255 255 255 / 0%);
    height: 522px!important;
	border-radius: 0px 0px 10px 10px;
	padding: 10px 0;
}
.uk-tools-program .CodeMirror .CodeMirror-gutters {
    background: #24292f;
}
.uk-tools-program .CodeMirror .CodeMirror-selected {
  background-color: #323941;
}
.uk-tools-program .CodeMirror-vscrollbar::-webkit-scrollbar{width:10px;height:4px;background-color:#24292f}
.uk-tools-program .CodeMirror-vscrollbar::-webkit-scrollbar-track{background-color:#24292f}
.uk-tools-program .CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background-color:#35393f;border-radius:10px}

.uk-tools-program .tools-btn{
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.uk-tools-program .tools-btn .uk-select{
    max-width: 130px;
    background-color: #292e35;
    height: 38px;
    border: 2px solid #292e35;
    flex: 0 0 auto;
}
.uk-tools-program .tools-btn .btn{
    background: #292e35;
    border: 0px solid rgb(255 255 255 / 0%) !important;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.uk-tools-program .tools-btn .btn:hover{
    opacity: .8;
}
.uk-tools-program .tools-btn .btn-1{
    background: linear-gradient(117deg, #d946ef, #6366f1);
}
.uk-tools-program .tools-btn label{
    margin-bottom: 0;
    color: rgb(224 233 255 / 70%);
}
/*
 * ------------------------------------------------------------------------------
 * JZTHEME主题-工具-编码工具-内页样式
 * ------------------------------------------------------------------------------
 */
/*Base64编码转图片工具*/
.jztheme-tools-encoding-base64-turn-image{
    
}
.jztheme-tools-encoding-base64-turn-image span{
    font-size: 14px;
    color: rgb(224 233 255 / 70%);
}

/*
* ------------------------------------------------------------------------------
* JZTHEME主题-工具-手机端
* ------------------------------------------------------------------------------
*/

/*低于隐藏*/
@media screen and (max-width:1400px){
.uk-tool-default .work .work-box .work-btn-reset {
    width: 50px;
}

}

@media screen and (max-width:1000px){
.tools-run-html-css-js .uk-subnav-pill > * {
    padding-left: 10px;
}
.tools-run-html-css-js .uk-subnav-pill > * > :first-child {
    padding: 8px 15px;
    font-size: 14px;
}
.tools-run-html-css-js .tools-btn .btn {
    font-size: 12px;
    padding: 0 20px;
    line-height: 33px;
}
.tools-run-html-css-js .tools-btn span {
    margin-left: 0px;
}
.uk-tools-program .editor-title span {
    padding: 8px 15px;
    font-size: 14px;
    margin-left: 10px;
}
.uk-tools-program .tools-btn .btn{
    font-size: 12px;
    padding: 0 20px;
    line-height: 33px;
}
.uk-tools-program .tools-btn .uk-select {
    max-width: 110px;
    height: 33px;
    font-size: 12px;
}
.uk-tool-default .work .work-parameter span {
    font-size: 14px;
    margin-left: 10px;
}
.uk-tool-default .work-preview-title span {
    font-size: 14px;
    margin-left: 10px;
}
.uk-tool-default .editor .editor-title span {
    padding: 8px 15px;
    font-size: 14px;
    margin-left: 10px;
}
.tools-website-webpage-tdk .tdk-item .tdk-content {
    font-size: 14px;
}

}