/*
    组件级样式
    依赖SPLibrary.css
*/

/*========基本元素迭代========*/
/* * { transition: all 0.5s ease;} */
html{font-size:16px;}
body,a,p,b,strong,dt,dd,textarea,select{padding:0;margin:0}
body {margin: 0;height:100vh;}
img{}
input{outline-style:none;}
a{text-decoration: none;}
p{font-size:13px}
h1{ font:700 32px SimHei;color:var(--Title);}
h2{ font:700 24px SimHei;color:var(--Title);}
h3{ font:700 20px SimHei;color:var(--Title);}
h4{ font:700 16px SimHei;color:var(--Title);}
h5{ font:700 14px SimHei;color:var(--Title);}
h6{ font:700 12px SimHei;color:var(--Title);}
svg{height:16px;width:16px;color:var(--Title)}

/*========BS迭代========*/
/*输入组*/
.input-group .input-group-text{ background-color:transparent; }
.input-group input.form-control{ border-left:none;border-right:none;padding-top:8px;padding-bottom:8px;font-size:13px }
.input-group input.form-control:focus{ border-color:var(--bs-border-color);box-shadow:none }
.input-group button{ border-color:var(--bs-border-color); }
/*导航条-横*/
.nav{ gap:0 8px }
.nav .nav-link { padding:4px 8px;border-bottom:3px solid #00000000;cursor:pointer;font:400 13px var(--FontfamilyText);color:var(--Text)  }
.nav .nav-link.active{ border-bottom:3px solid var(--Title);font-family:var(--FontfamilyTitle);font-weight:700;color:var(--Title)  }
/*导航条-竖*/
.nav.flex-column{ gap:0 0 }
.nav.flex-column .nav-item{ padding:8px 16px;}
.nav.flex-column .nav-section{ font:700 13px var(--FontfamilyTitle);color:var(--Primary);margin-top:24px;margin-bottom:12px; }
.nav.flex-column .nav-link{ padding:8px 16px;border-left:1px solid var(--Color-eee);border-bottom:none; }
.nav.flex-column .nav-link:hover{ border-left:1px solid var(--Title);color:var(--Title) }
.nav.flex-column .nav-link.active{ font-weight:700;color:var(--Title) }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
/*按钮*/
.btn{ border-radius:4px }
.btn-primary{ background-color:var(--Primary);color:var(--White);font-size:13px }
.btn-primary:hover{ background-color:var(--Primary); }
/*开关组件*/
.form-check-input:focus{box-shadow:none }
.form-check-input:checked{background-color:var(--Primary); border-color:var(--Primary);}
/*警告框*/
.alert-warning { background-color:var(--Amber-100)}

/*下拉菜单*/
.dropdown-menu .dropdown-item{font-size:13px}


/*========EU迭代========*/




/*========H5组件========*/






/*文本禁选*/
.SPselect-none { user-select: none}
/*背景*/
.SPbg0 { background-color:var(--Background); }
.SPbg3 { background:linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url('/assets/img/SPbg3.png') no-repeat center;background-size: cover;background-attachment: fixed; }
/* 背景-组合 */
.SPbg-svg {position: absolute;right: 8px;top: -2px;width:80px;height:80px;opacity: .03}
/*分隔线*/
.SPdividerV,.SPdividerV8{ display:inline-block;width:1px;height:8px;border-left:1px solid var(--Border2); }
.SPdividerV12{ display:inline-block;width:1px;height:12px;border-left:1px solid var(--Border2); }
.SPdividerV16{ display:inline-block;width:1px;height:16px;border-left:1px solid var(--Border2); }
.SPdividerV20{ display:inline-block;width:1px;height:20px;border-left:1px solid var(--Border2); }
.SPdividerH{ display:block;height:1px;border-top:1px solid var(--Border2); }


/*按钮*/
.SPImgBtn{ border:1px solid transparent;border-radius:4px;align-items:center;display:inline-flex;cursor:pointer ; }
.SPImgBtn:hover{ background-color:var(--Background);border:1px solid var(--Border);  }
.SPImgBtn.SPImgBtn-bd { border:1px solid var(--Border);}


.SPBtn { border:1px solid transparent;border-radius:4px;align-items:center;display:inline-flex;cursor:pointer }
.SPBtn:hover { background-color:var(--Background);border:1px solid var(--Border); }
.SPBtn.SPBtn-bd { border:1px solid var(--Border);}
.SPBtn.SPBtn-primary { background-color: var(--Primary);color:#EEE}
.SPBtn.SPBtn-primary:hover { opacity:0.8 }


/*键值对*/
.SPDataList {padding: 0}
.SPDataList .item {padding:6px 12px;border:1px solid transparent;display: flex;align-items: center;justify-content: flex-start}
.SPDataList .item:hover{ border-left:1px solid #5153BE }
.SPDataList .item > dt { flex-shrink:0;align-self:flex-start;padding: 0px 12px;font:400 13px var(--FontfamilyText);color: var(--SubText)}
.SPDataList .item > dd { flex:1;align-self:flex-start; padding: 0 6px;font:400 14px var(--FontfamilyText);color: var(--Title)}

/*菜单*/
.SPMenuList { padding:0 8px;display:flex;flex-direction:column;gap:8px 0 }
.SPMenuList .button{ margin:8px 0;padding:4px 8px;background-color:#5153BE22;font-size:14px;border:1px solid var(--Border);border-radius:4px;text-align:center;cursor:pointer }
.SPMenuList .button:hover{ }
.SPMenuList .line{ margin:8px 0;height:1px;border-top:1px solid var(--Border) }
.SPMenuItem{border:1px solid #00000000;border-radius:4px;font-size:13px;display:flex;align-items:center;cursor:pointer; }
.SPMenuItem:hover{background-color:var(--BackgroundHover);border:1px solid var(--Border);}
.SPMenuItem .ico{height:32px;width:32px;display:flex;align-items:center;justify-content:center;}
.SPMenuItem .title{flex:1; padding:0 8px;color:var(--Title);overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.SPMenuItem .text{flex:1; padding:0 8px;color:var(--Text);overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.SPMenuItem .end{height:32px;width:32px;display:flex;align-items:center;justify-content:center;}
.SPMenuItem .end:hover{ opacity:0.7 }


/*警告框*/
.SPAlert{ padding:6px 16px 4px;border:1px solid var(--Border);border-radius:4px;background-color:var(--Amber-200);font-size:14px;display:flex;align-items:center;justify-content:flex-start }



header{ height:50px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background-color:transparent;box-shadow: 2px 2px 5px 2px rgba(0,0,0,0);}
header>:first-child{ display:flex;align-items:center;font:700 16px var(--FontfamilyTitle);color:var(--Title); }
header>:last-child{ display:flex;align-items:center;gap:0 32px;}
header>:last-child .SPLink{ max-width:140px;font-size:14px;cursor:pointer}
main{ flex:1;display:flex;justify-content:center;align-items:center}
footer{ height:50px;background-color:transparent;box-shadow: 2px 2px 5px 2px rgba(0,0,0,0); }





/*========JS组件配套========*/