/* 全局变量 */
/*
    width:100%;aspect-ratio: 16 / 9;

    ~     h1~h3 兄弟元素（同级子元素）中，h1后面的h3元素，不需要紧邻
    +     h1+h3 兄弟元素（同级子元素）中，h1后面的h3元素，需要紧邻
    >     h1>h3 父子元素（上下级元素）中，h1下的h3元素（仅子代，不含孙代）
    空格  h1 h3 父子元素（上下级元素）中，h1下的h3元素（含子代、含孙代）
    ,     h1,h3 共用后面大括号中的样式
    :     h1:hover 伪类
    #     元素id

    伪类
    链接相关伪类
    :active         鼠标按下到松开之间的时间
    :link           未访问的链接
    :visited        已访问的链接
    :hover          选择鼠标悬停的元素
    结构伪类
    :first-child    选择父元素的第一个子元素。
    :last-child     选择父元素的最后一个子元素。
    :nth-child(n)   选择父元素的第n个子元素。
    :only-child     选择父元素中唯一的子元素。
    表单伪类
    :checked        选择被选中的表单元素（如复选框或单选按钮）。
    :disabled       选择被禁用的表单元素。
    :enabled        选择启用的表单元素。
    :focus          选择当前获得焦点的表单元素。
    语言伪类
    :lang(language) 根据语言属性选择元素。
    其他常用伪类
    :not(selector)  选择不匹配指定选择器的元素。
    :root           选择文档的根元素。
    :empty          选择没有子元素的元素。

    :scope
    :host
    :host-context()
    :is()
    :where()
    :not()
    :has()

    配色：
    .opblock-post       { background: rgba(73, 204, 144, 0.1);  border-color: rgb(73, 204, 144);  }   绿色
    .opblock-put        { background: rgba(252, 161, 48, 0.1);  border-color: rgb(252, 161, 48);  }   橙色
    .opblock-delete     { background: rgba(249, 62, 62, 0.1);   border-color: rgb(249, 62, 62);   }   红色
    .opblock-get        { background: rgba(97, 175, 254, 0.1);  border-color: rgb(97, 175, 254);  }   蓝色
    .opblock-patch      { background: rgba(80, 227, 194, 0.1);  border-color: rgb(80, 227, 194);  }   青色
    .opblock-head       { background: rgba(144, 18, 254, 0.1);  border-color: rgb(144, 18, 254);  }   紫色
    .opblock-options    { background: rgba(13, 90, 167, 0.1);   border-color: rgb(13, 90, 167);   }   深蓝
    .opblock-deprecated { background: rgba(235, 235, 235, 0.1); border-color: rgb(235, 235, 235); opacity: 0.6; } 禁用项 - 灰色

    .jianbian-bg-text   { -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:linear-gradient(to right,#501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%); }

    { min-width:min-content; } 这个值超好用，div 的最小宽度为内容区的宽度，不会小于内容区，用于 kkcReportFields 做容器太合适了。

*/
.jianbian-bg-text   { -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:linear-gradient(to right,#501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%); }



:root {

  accent-color:var(--kkvBtnPrimaryBG);  /* <input type=checkbox/radio/range> 和 <progress> 的主题色 */

  --kkvFontFamily:'PingFang SC','.萍方-简','微软雅黑','黑体';

  --kkvBoxShadow:0 0 10px 5px rgba(0,0,0,0.1);
  --kkvBoxShadowLeft:-5px 0 10px 5px rgba(0,0,0,0.1);
  --kkvBoxShadowRight:5px 0 10px 5px rgba(0,0,0,0.1);
  --kkvBoxShadowNoTop:-5px 5px 10px 5px rgba(0,0,0,0.1);
  --kkvBoxBorder:1px solid var(--kkvColorGlassBorder);

  --kkvTransitionKuaiDaoMan:ease-in-out; /* 动画效果：先加速后减速 - 仿真 */
  --kkvTransitionHuiTan:cubic-bezier(.62,-0.14,.62,1.25); /* 动画效果：使用曲线函数，有回弹效果 - 生动活泼 */

  --kkvBtnPrimaryColor:#fff;
  --kkvBtnPrimaryBG:#0F7AF5;
  --kkvBtnPrimaryHoverBG:#0E66CB;
  --kkvBtnPrimaryActiveBG:#0071e3;
  --kkvBtnPrimaryBorder:1px solid #0E66CB;
  --kkvBtnPrimaryShadow:rgba(255,255,255,0.2) 0px 2px 2px 0px inset,rgba(15,122,245,0.4) 0px 2px 3px 0px;

  --kkvWinDockBG:rgba(237,237,237,0.7);
  --kkvWinDockSize:32px;
  --kkvWinDockIconSize:28px;
  --kkvWinAreaBG:transparent;
  --kkvWinDragBG:transparent; /* rgba(0,0,0,0.1); */
  --kkvWinFormBG:rgba(237,237,237,0.7);
  --kkvWinFormTopBarBG:transparent;
  --kkvWinFormTopBarHeight:32px;
  --kkvWinFormIconBG:transparent;
  --kkvWinFormIconSize:24px;
  --kkvWinFormIconMargin:4px;
  --kkvWinFormContentMargin:8px;
  --kkvWinFormContentBG:var(--kkvColorPageBG);
  --kkvWinFormResizeArea:8px;
  --kkvWinFormResizeBG:transparent;
  --kkvWinFormContentFinder:transition:0.5s var(--kkvTransitionHuiTan);left:100px;top:0px;right:0px;bottom:0px;border-radius:0px 6px 6px 0px;





  --kkvTopBarHeight:60px;
  --kkvFooterHeight:30px;
  --kkvLeftBarWidth:60px;
  --kkvMenuBarWidth:180px;
  --kkvRightBarWidth:180px;

/* 白天配色 */
  --kkvImageLogo:url('/frontend/logo-light.png');
  --kkvColorGlassBorder:white;
  --kkvColorBorder:#00000014;
  --kkvColorFont:rgb(0,0,0);
  --kkvColorTitle:rgb(128,128,128);
  --kkvColorRootBG:rgb(237,237,237);
  --kkvColorMenuBG:rgb(243,243,243);
  --kkvColorPageBG:rgb(255,255,255);
  --kkvColorPageThBG:rgba(255,255,255,0.5);
  --kkvColorPrimaryBG:rgb(59,100,252);
  --kkvColorSecondaryBG:rgb(59,100,252);
  --kkvColorHoverBG:rgb(232,232,232);
  --kkvColorSelectedBG:rgb(226,230,246);

  --kkvColorTrBG:rgb(255,255,255);
  --kkvColorTrHoverBG:rgb(242,242,242);
  --kkvColorTrActiveBG:rgb(236,236,236);
  --kkvColorTrSelBG:rgb(225,225,225);
  --kkvColorTrSelHoverBG:rgb(225,225,225);
  --kkvColorTrSelActiveBG:rgb(236,236,236);

  --kkvColorInputTextBG:var(--kkvColorPageBG); /*rgba(255,255,255,0.9);*/
  --kkvColorInputCheckBG:var(--kkvColorPageBG);/*rgba(255,255,255,0.9);*/
}
/* 夜晚配色 - 自动跟随系统黑色模式 */
@media (prefers-color-scheme:dark){
  :root {

    --kkvWinDockBG:rgba(24,24,24,0.7);
    --kkvWinAreaBG:rgba(24,24,24,0.5);
    --kkvWinFormBG:rgba(24,24,24,0.7);

    --kkvBtnPrimaryShadow:none;



    --kkvImageLogo:url('/frontend/logo-dark.png');
    --kkvColorGlassBorder:rgba(115,117,118,1);
    --kkvColorBorder:#ffffff17;
    --kkvColorFont:rgb(226,226,226);
    --kkvColorTitle:rgb(158,158,158);
    --kkvColorRootBG:rgb(24,24,24);
    --kkvColorMenuBG:rgb(31,31,31);
    --kkvColorPageBG:rgb(38,38,38);
    --kkvColorPageThBG:rgba(38,38,38,0.5);
    --kkvColorPrimaryBG:rgb(37,114,230);
    --kkvColorPrimaryHoverBG:rgb(35,96,189);
    --kkvColorSecondaryBG:rgb(47,47,47);
    --kkvColorSecondaryHoverBG:rgb(51,51,51);
    --kkvColorHoverBG:rgb(46,46,46);
    --kkvColorSelectedBG:rgb(226,230,246);

    --kkvColorTrBG:rgb(21,21,21);
    --kkvColorTrHoverBG:rgb(34,34,34);
    --kkvColorTrActiveBG:rgb(30,30,30);
    --kkvColorTrSelBG:rgb(43,43,43);
    --kkvColorTrSelHoverBG:rgb(43,43,43);
    --kkvColorTrSelActiveBG:rgb(21,21,21);

    --kkvColorInputTextBG:var(--kkvColorPageBG); /*rgb(54,54,55);*/
    --kkvColorInputCheckBG:var(--kkvColorPageBG);/*rgb(54,54,55);*/
  }
}



/* 前端 jsonSHL 函数的样式，拎出来，后期可以扩展 白天/夜晚 模式 */
.jsonSHL                                        { max-width:100%;overflow-x:auto;background:rgb(40,41,35);color:rgb(248,248,220);padding:10px;border-radius:6px; }
.jsonSHL .key                                   { color:rgb(103,216,239); }
.jsonSHL .number                                { color:rgb(172,128,255); }
.jsonSHL .string                                { color:rgb(231,219,116); }
.jsonSHL .boolean                               { color:rgb(253,150,34);  }
.jsonSHL .null                                  { color:rgb(144,145,139); }

.ace_editor.fullScreen { height:auto;width:auto;border:0;margin:0;position:fixed !important;top:0;bottom:0;left:0;right:0;z-index:100; }



/* html body 全局样式 */
html                                            { background:var(--kkvColorRootBG);color:var(--kkvColorFont); font-family:var(--kkvFontFamily); height:100%;width:100%; font-size:12px; min-width:320px;min-height:260px; scroll-behavior:smooth; }
body                                            { margin:0;padding:0;height:100%;width:100%; overscroll-behavior-y:none; } /* overscroll-behavior-y:contain; 禁止移动端下拉页面刷新 lch:BUT! 为啥测试无效👀？？？ */



textarea                                        { border:1px solid var(--kkvColorBorder); }
input[type=checkbox]                            { background:var(--kkvColorInputTextBG); }

select,
input[type=text],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],input[type=email],
input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]
                                                { transition:0.5s;background:var(--kkvColorInputTextBG);color:var(--kkvColorFont);height:24px;border-radius:24px;border:1px solid var(--kkvColorBorder);padding:0px 12px;box-sizing:border-box; }
select:user-valid,
input[type=text]:user-valid,input[type=password]:user-valid,input[type=number]:user-valid,
input[type=search]:user-valid,input[type=url]:user-valid,input[type=tel]:user-valid,input[type=email]:user-valid,
input[type=date]:user-valid,input[type=datetime-local]:user-valid,input[type=time]:user-valid,input[type=month]:user-valid,input[type=week]:user-valid
                                                { bborder-color:rgba(0,255,0,0.1); box-shadow:0 0 5px 1px rgba(0,255,0,0.2); }
select:user-invalid,
input[type=text]:user-invalid,input[type=password]:user-invalid,input[type=number]:user-invalid,
input[type=search]:user-invalid,input[type=url]:user-invalid,input[type=tel]:user-invalid,input[type=email]:user-invalid,
input[type=date]:user-invalid,input[type=datetime-local]:user-invalid,input[type=time]:user-invalid,input[type=month]:user-invalid,input[type=week]:user-invalid
                                                { bborder-color:rgba(255,0,0,0.1); box-shadow:0 0 5px 1px rgba(255,0,0,0.2); }

input:placeholder-shown                         { opacity:0.8; }



/*

*/

#kkdDesktop                                     { position:absolute;inset:0;overflow:hidden;background:center center no-repeat uuurl('https://ssl.diyol.net/_wallpapers/012.jpeg');background-size:cover;background-color:var(--kkvColorMenuBG); user-select:none;-webkit-user-select:none; }
#kkdDesktop .iconfont                           { font-size:inherit; }
#kkdWinDock                                     { position:absolute;inset:0 0 auto 0;text-align:center;height:var(--kkvWinDockSize);overflow:visible;background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--kkvColorBorder); }
.kkcWinDockIcon                                 { display:inline-block;color:var(--kkvColorFont);font-size:14px;text-align:center;line-height:var(--kkvWinDockIconSize);min-width:var(--kkvWinDockIconSize);height:var(--kkvWinDockIconSize);border-radius:var(--kkvWinDockIconSize);cursor:pointer;margin:2px;background:center center no-repeat url('');background-size:cover; }
.kkcWinDockIcon:hover                           { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow); }
.kkcWinDockIcon:active                          { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
.kkcWinDockItems                                { display:inline-block;height:var(--kkvWinDockSize);max-width:calc(100% - 64px);overflow:hidden; }
.kkcWinDockItem                                 { position:relative;display:inline-block;line-height:var(--kkvWinDockIconSize);min-width:calc(var(--kkvWinDockIconSize) / 2);height:var(--kkvWinDockIconSize);padding:0px calc(var(--kkvWinDockIconSize) / 2);margin:2px;text-align:center;cursor:pointer;border-radius:var(--kkvWinDockIconSize);color:var(--kkvColorFont); }
.kkcWinDockItem:hover                           { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow); }
.kkcWinDockItem:active                          { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
.kkcWinDockItem .tips                           { width:6px;height:6px;background:red;position:absolute;top:10px;right:4px;border:var(--kkvBoxBorder);border-radius:6px; }

.kkcWinDockCur                                  { background:var(--kkvColorPageBG); }
.kkcWinDockMin                                  { color:rgb(162,92,12); }
.kkcWinDockMax                                  { color:rgb(10,81,0); }
.kkcWinDockClose                                { color:rgb(134,0,2); }

.kkcWinGlassBG                                  { background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }

#kkdWinArea                                     { position:absolute;inset:var(--kkvWinDockSize) 0 0 0;overflow:hidden;background:var(--kkvWinAreaBG); }
#kkdWinList                                     { position:absolute;inset:var(--kkvWinDockSize) -385px 0 auto;width:375px;max-width:100vw;overflow:hidden;background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);bbbox-shadow:var(--kkvBoxShadowNoTop);border-left:1px solid var(--kkvColorBorder); }
#kkdWinStart                                    { position:absolute;inset:0                     auto 0 -385px;width:375px;max-width:100vw;overflow:hidden;background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);bbbox-shadow:var(--kkvBoxShadowNoTop);border-right:1px solid var(--kkvColorBorder); }
#kkdWinDrag                                     { position:absolute;inset:0;overflow:hidden;background:var(--kkvWinDragBG); }
#kkdWinLock                                     { position:absolute;inset:0;overflow:hidden;background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--kkvBoxShadow); }
#kkdLoginLogo                                   { width:128px;height:128px;border:0px;background:no-repeat center center;background-size:contain;background-image:var(--kkvImageLogo); }
#kkdWinLockICP                                  { position:absolute;bottom:10px;font-size:12px;text-decoration:none;color:var(--kkvColorTitle); }
#kkdWinLockSupport                              { position:absolute;inset:auto auto 10px 10px;font-size:10px;text-decoration:none;color:var(--kkvColorTitle); }
#kkdWinLockCopyRight                            { position:absolute;inset:auto 10px 10px auto;font-size:10px;text-decoration:none;color:var(--kkvColorTitle); }
.kkcWinForm                                     { position:absolute;top:1px;left:1px;width:480px;height:360px;background:var(--kkvWinFormBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);bbbox-shadow:var(--kkvBoxShadow);border-radius:26px;overflow:hidden;outline:1px solid var(--kkvColorGlassBorder);outline-offset:-1px; } /* border-radius:8px;  */
.kkcWinFormContent                              { position:absolute;top:var(--kkvWinFormTopBarHeight);left:var(--kkvWinFormContentMargin);right:var(--kkvWinFormContentMargin);bottom:var(--kkvWinFormContentMargin);background:var(--kkvWinFormContentBG);overflow:auto;border-radius:20px 20px 20px 20px; user-select:text;-webkit-user-select:text; } /* border-radius:6px;  */
.kkcWinFormBody                                 { position:absolute;inset:0px;overflow:auto; } /* 这里 kkcWinFormBody 显示滚动条，windows 下 kkcWinFormContent 圆角才不会被滚动条影响美观（如果滚动条在 kkcWinFormContent 则会受影响） */
.kkcWinFormTopBar                               { height:var(--kkvWinFormTopBarHeight);background:var(--kkvWinFormTopBarBG);color:var(--kkvColorTitle); }
.kkcWinFormTitle                                { position:absolute;top:0px;left:calc(2 * var(--kkvWinFormIconMargin) + var(--kkvWinFormIconSize));right:calc(4 * var(--kkvWinFormIconMargin) + 3 * var(--kkvWinFormIconSize));height:calc(2 * var(--kkvWinFormIconMargin) + var(--kkvWinFormIconSize));background:var(--kkvWinFormIconBG);line-height:calc(2 * var(--kkvWinFormIconMargin) + var(--kkvWinFormIconSize));text-align:center;overflow:hidden;user-select:none;cursor:move; }
.kkcWinFormIcon                                 { position:absolute;top:var(--kkvWinFormIconMargin);left:calc(3 * var(--kkvWinFormIconMargin));width:var(--kkvWinFormIconSize);height:var(--kkvWinFormIconSize);background:var(--kkvWinFormIconBG);cursor:pointer;line-height:var(--kkvWinFormIconSize);text-align:center;border-radius:24px; }
.kkcWinFormIcon:hover                           { font-size:14px;background:rgb(104,179,234);color:rgb(52,90,118); }
.kkcWinFormIcon:active                          { font-size:inherit; }
.kkcWinFormMin                                  { position:absolute;top:var(--kkvWinFormIconMargin);right:calc(5 * var(--kkvWinFormIconMargin) + 2 * var(--kkvWinFormIconSize));width:var(--kkvWinFormIconSize);height:var(--kkvWinFormIconSize);background:var(--kkvWinFormIconBG);cursor:pointer;line-height:var(--kkvWinFormIconSize);text-align:center;border-radius:24px; }
.kkcWinFormMin:hover                            { font-size:14px;background:rgb(252,176,36);color:rgb(162,92,12); }
.kkcWinFormMin:active                           { font-size:inherit; }
.kkcWinFormMax                                  { position:absolute;top:var(--kkvWinFormIconMargin);right:calc(4 * var(--kkvWinFormIconMargin) + var(--kkvWinFormIconSize));width:var(--kkvWinFormIconSize);height:var(--kkvWinFormIconSize);background:var(--kkvWinFormIconBG);cursor:pointer;line-height:var(--kkvWinFormIconSize);text-align:center;border-radius:24px; }
.kkcWinFormMax:hover                            { font-size:14px;background:rgb(40,193,49);color:rgb(10,81,0); }
.kkcWinFormMax:active                           { font-size:inherit; }
.kkcWinFormClose                                { position:absolute;top:var(--kkvWinFormIconMargin);right:calc(3 * var(--kkvWinFormIconMargin));width:var(--kkvWinFormIconSize);height:var(--kkvWinFormIconSize);background:var(--kkvWinFormIconBG);cursor:pointer;line-height:var(--kkvWinFormIconSize);text-align:center;border-radius:24px; }
.kkcWinFormClose:hover                          { font-size:14px;background:rgb(253,70,70);color:rgb(134,0,2); }
.kkcWinFormClose:active                         { font-size:inherit; }
.kkcWinFormZOrder                               { position:absolute;inset:0;background:rgba(0,0,0,0.02); }
.kkcWinFormActive                               {  }
.kkcWinFormActive .kkcWinFormTopBar             { color:var(--kkvColorFont); }
.kkcWinFormActive .kkcWinFormZOrder             { display:none; }
/* form loading */
.kkcWinFormLoading                              { display:none;position:absolute;inset:0;background:rgba(0,0,0,0.05); } /* display:flex; 后子元素 margin:auto auto; 则垂直居中，水平居中 */
.kkcWinFormLoadingIcon                          { margin:auto auto;width:30px;height:30px;border:2px solid var(--kkvColorTitle);border-top-color:transparent;border-radius:100%;animation:ani-circle infinite 0.75s linear; }
@keyframes ani-circle                           { 0% { transform: rotate(0); } 100% { transform:rotate(360deg); } } /* 转转转动画 */
.kkcWinFormBusy .kkcWinFormLoading              { display:flex; }
/* Finder */
.kkcWinFormFinder .kkcWinFormContent            { transition:0.5s var(--kkvTransitionHuiTan);left:calc(7 * var(--kkvWinFormIconMargin) + 4 * var(--kkvWinFormIconSize));top:1px;right:1px;bottom:1px;border-radius:0px 26px 26px 0; }
.kkcWinFormFinder .kkcWinFormMin                { left:calc(4 * var(--kkvWinFormIconMargin) + 1 * var(--kkvWinFormIconSize));right:none; }
.kkcWinFormFinder .kkcWinFormMax                { left:calc(5 * var(--kkvWinFormIconMargin) + 2 * var(--kkvWinFormIconSize));right:none; }
.kkcWinFormFinder .kkcWinFormClose              { left:calc(6 * var(--kkvWinFormIconMargin) + 3 * var(--kkvWinFormIconSize));right:none; }
.kkcWinFormFinder .kkcWinFormTitle              { left:calc(7 * var(--kkvWinFormIconMargin) + 4 * var(--kkvWinFormIconSize));right:0px; }
.kkcWinFormFinder .kkcWinFormLeft               { position:absolute;left:calc(2 * var(--kkvWinFormIconMargin));top:calc(3 * var(--kkvWinFormIconMargin) + 1 * var(--kkvWinFormIconSize));width:calc(4 * var(--kkvWinFormIconMargin) + 4 * var(--kkvWinFormIconSize));bottom:calc(2 * var(--kkvWinFormIconMargin));overflow:hidden;color:var(--kkvColorTitle);line-height:200%; }
.kkcWinFormLeftItem .iconfont                   { color:var(--kkvColorFont); }
.kkcWinFormLeftItem                             { color:var(--kkvColorFont);padding:var(--kkvWinFormIconMargin);border-radius:6px;cursor:pointer; }
.kkcWinFormLeftItem:hover                       { background:var(--kkvColorPageBG); }
.kkcWinFormLeftItem:active                      { background:var(--kkvColorMenuBG); }
/* button */
.kkcWinBtnPrimary                               { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);border:var(--kkvBtnPrimaryBorder);box-shadow:var(--kkvBtnPrimaryShadow);font-size:inherit;line-height:var(--kkvWinDockSize);border-radius:var(--kkvWinDockSize);padding:0px calc(var(--kkvWinDockSize) / 2);cursor:pointer; }
.kkcWinBtnPrimary:hover                         { background:var(--kkvBtnPrimaryHoverBG); }
.kkcWinBtnPrimary:active                        { background:var(--kkvBtnPrimaryActiveBG); }
/* message box */
.kkcWinMsgBox                                   { position:absolute;top:0px;width:300px;max-width:80%;padding:10px;background:var(--kkvWinDockBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:0px 0px 20px 20px;box-shadow:var(--kkvBoxShadowNoTop);border:var(--kkvBoxBorder);border-top:0px; }
.kkcWinMsgBox .kkcWinMsgBoxTitle                { color:var(--kkvColorTitle);text-align:left;text-weight:bold; }
.kkcWinMsgBox .kkcWinMsgBoxContent              { color:var(--kkvColorFont);text-align:center;margin:10px;word-wrap:break-word;word-break:break-all; }
.kkcWinMsgBox .kkcWinMsgBoxBtns                 { text-align:right; }
/* menu */
#kkdWinStartLogo                                { height:48px;background:no-repeat center center;background-size:contain;background-image:var(--kkvImageLogo); }
#kkdWinStartMenu                                { height:calc(100% - 48px - var(--kkvWinDockSize));overflow-x:hidden;overflow-y:auto; }
#kkdWinStartInfo                                { height:var(--kkvWinDockSize);color:var(--kkvColorTitle); }



.kkcWinMenuBar                                  { position:relative;padding:10px; }
.kkcWinMenuBar hr                               { height:1px;border:none;border-top:1px solid var(--kkvColorBorder); }
.kkcWinMenuSub                                  { overflow:hidden; }
.kkcWinMenuCon                                  { position:relative;padding-bottom:5px; }
.kkcWinMenuItem                                 { cursor:pointer;border-radius:var(--kkvWinDockSize);display:flex;align-items:center;padding:0px calc(var(--kkvWinDockSize) / 4);height:var(--kkvWinDockSize); }
.kkcWinMenuItem font                            { display:inline-block; }
.kkcWinMenuItem span                            { width:16px; }
.kkcWinMenuItem .tips                           { color:white;background:red;font-size:10px;min-width:6px;padding:0 5px;text-align:center;line-height:16px;height:16px;position:absolute;right:6px;border:var(--kkvBoxBorder);border-radius:16px; }
.kkcWinMenuItem .tips:empty                     { padding:0px;width:6px;height:6px; }
.kkcWinMenuItem:hover                           { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow); }
.kkcWinMenuItem:active                          { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
.kkcWinMenuItemDisabled                         { cursor:pointer;border-radius:var(--kkvWinDockSize);display:flex;align-items:center;padding:0px calc(var(--kkvWinDockSize) / 4);height:var(--kkvWinDockSize); }
.kkcWinMenuItemDisabled font                    { color:var(--kkvColorTitle);display:inline-block; }
.kkcWinMenuItemDisabled span                    { color:var(--kkvColorTitle);width:16px; }



.kkcWinFormBody input                           {  }
.kkcReportFields                                { margin:10px;padding:10px;border:1px solid var(--kkvColorBorder);border-radius:16px 16px 8px 8px;min-width:min-content; }
.kkcReportData                                  { margin:10px; }
.kkcFormInputs                                  {  }
.kkcFormGroup                                   {  }





.kkcLayoutFull                                  { position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:var(--kkvColorRootBG); }

/* 默认布局样式 */
.kkcLayoutTopBar                                { position:fixed; overflow:none; background:var(--kkvColorRootBG); transition:0.3s var(--kkvTransitionHuiTan); left:0;right:0;top:0; height:var(--kkvTopBarHeight); }
.kkcLayoutFooter                                { position:fixed; overflow:auto; background:var(--kkvColorRootBG); transition:0.3s var(--kkvTransitionHuiTan); left:0;right:0;bottom:0; height:var(--kkvFooterHeight); color:var(--kkvColorTitle); line-height:var(--kkvFooterHeight); padding:0 6px; }
.kkcLayoutLeftBar                               { position:fixed; overflow:auto; background:var(--kkvColorRootBG); transition:0.3s var(--kkvTransitionHuiTan); user-select:none; }
.kkcLayoutMenuBar                               { position:fixed; overflow:auto; background:var(--kkvColorMenuBG); transition:0.3s var(--kkvTransitionHuiTan); user-select:none; }
.kkcLayoutContent                               { position:fixed; overflow:auto; background:var(--kkvColorPageBG); transition:0.3s var(--kkvTransitionHuiTan); }
.kkcLayoutContentLoading                        { position:fixed; overflow:auto; background:rgba(255,255,255,0.7); background:rgba(0,0,0,0.05); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); }
.kkcLayoutRightBar                              { position:fixed; overflow:auto; background:var(--kkvColorRootBG); transition:0.3s var(--kkvTransitionHuiTan); }
.kkcLayoutContainer                             { position:relative; width:100%;height:100%; }
.kkcIconTopBarTitle                             { line-height:var(--kkvTopBarHeight); }
.kkcIconTopBarMenu                              { display:none; position:absolute; left:6px;top:0px;bottom:0px;line-height:var(--kkvTopBarHeight); transition:0.3s; }
.kkcIconTopBarRight                             { display:none; position:absolute; right:6px;top:0px;bottom:0px;line-height:var(--kkvTopBarHeight); transition:0.3s; }
.kkcIconTopBarMenu:hover                        { background-color:var(--kkvColorPageBG); }
.kkcIconTopBarRight:hover                       { background-color:var(--kkvColorPageBG); }
.kkcLayoutLoginForm                             { display:inline-block;background:var(--kkvColorMenuBG);padding:20px;line-height:250%;text-align:right; }

body .iconfont { font-size:inherit; } /* 让 图标字体大小 别固定是 16px 改为上下文默认大小。测试必须 body 下才有效 */
.kkcLayoutMenuBar span                          { transition:0.3s;cursor:pointer;padding:10px;display:block;color:var(--kkvColorTitle); }
.kkcLayoutMenuBar span:hover                    { transition:0.3s;background-color:var(--kkvColorPageBG);color:var(--kkvColorFont); }
.kkcLayoutMenuBar span:active                   { background-color:var(--kkvColorRootBG); }
/*
.kkcDataTable                                   { max-width:100%; overflow-x:auto; }
.kkcDataTable table                             { min-width:calc(100% - 20px); border-collapse:collapse; border-spacing:0; border:1px solid var(--kkvColorRootBG); border-radius:10px; }
*/
.kkcDataTable                                   { min-width:calc(100% - 0px); border-collapse:collapse;border-spacing:0;border:1px solid var(--kkvColorRootBG);border-radius:10px; }
.kkcDataTable th                                { padding:10px;color:var(--kkvColorFont); }
.kkcDataTable th:hover                          { color:var(--kkvColorTitle); }
.kkcDataTable td                                { padding:5px 10px;border:1px solid var(--kkvColorMenuBG);min-height:36px; }
.kkcDataTable thead                             { position:sticky;top:0px;border-bottom:1px solid var(--kkvColorGlassBorder);background:var(--kkvColorPageThBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
.kkcDataTable thead th                          { white-space:nowrap; }
.kkcDataTable tbody tr:hover                    { background-color:var(--kkvColorTrHoverBG); }
.kkcDataTable tbody tr:active                   { background-color:var(--kkvColorTrActiveBG); }
.kkcDataTable tbody tr:active td                { border:1px solid var(--kkvColorRootBG); }
.kkcDataTable tbody tr.sel                      { background-color:var(--kkvColorTrSelBG); }
.kkcDataTable tbody tr.sel:hover                { background-color:var(--kkvColorTrSelBG-hover); }
.kkcDataTable tbody tr.sel:active               { background-color:var(--kkvColorTrSelBG-active); }
.kkcDataTable tbody th                          { position:sticky;left:0px;right:0px;background:var(--kkvColorPageThBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid var(--kkvColorRootBG);border-right:1px solid var(--kkvColorRootBG); }
.kkcDataTable tbody .sel th                     { background-color:var(--kkvColorTrSelBG); }
.kkcDataTable tfoot                             { position:sticky;bottom:0px;border-bottom:1px solid var(--kkvColorRootBG);background:var(--kkvColorPageThBG); } /* 一个容器里有多个的话，后面的会遮挡前面的，这个要思考一下 */
/* .kkcDataTable tbody .sel th:hover               { background-color:var(--kkvColorTrSelHoverBG); } */
/* .kkcDataTable tbody .sel td:hover               { background-color:var(--kkvColorTrSelHoverBG); } */
/* .kkcDataTable tbody th:hover                    { background-color:var(--kkvColorRootBG); } */
/* .kkcDataTable tbody th:active                   { background-color:var(--kkvColorMenuBG); } */
/* .kkcDataTable tbody td:hover                    { background-color:var(--kkvColorRootBG); } */
/* .kkcDataTable tbody td:active                   { background-color:var(--kkvColorMenuBG); } */
.kkcDataTable .searchBar th                     { padding:0px; }
.kkcDataTable .searchBar td                     { padding:0px; }
.kkcDataTable .searchBar input                  { text-align:center; width:calc(100% - 8px);height:100%; }
.kkcDataTable .searchBar input[value]           { background-color:yellow; }
.kkcDataTable th .btn                           { cursor:pointer;transition:0.3s;display:inline-block; }
.kkcDataTable th .btn:hover                     { -webkit-transform:perspective(60px) scale(1.5);transform:perspective(60px) scale(1.5);transition:0s; }
.kkcDataTable th .btn:active                    { -webkit-transform:perspective(60px) scale(1.0);transform:perspective(60px) scale(1.0); }
.kkcDataPagebar                                 { max-width:100%; overflow-x:auto; user-select:none; position:sticky;left:0px;zzz-index:1; text-align:right; }
.kkcDataPagebar font                            { display:inline-block;padding:5px; }
.kkcDataPagebar .btn                            { transition:0.3s;cursor:pointer;color:var(--kkvColorTitle); }
.kkcDataPagebar .btn:hover                      { transition:0.0s;background-color:var(--kkvColorMenuBG);color:var(--kkvColorFont); }
.kkcDataPagebar .btn:active                     { background-color:var(--kkvColorRootBG); }
.kkcDataPagebar .cur                            { text-decoration:underline; }
.kkcDataPagebar .more                           { color:#ccc; }
.kkcDataToolbar                                 { max-width:100%; overflow-x:auto; user-select:none; position:sticky;top:0px;left:0px;zzz-index:3; background-color:var(--kkvColorPageBG); }
.kkcDataToolbar .btn                            { transition:0.3s;display:inline-block;padding:5px;cursor:pointer; color:var(--kkvColorTitle); }
.kkcDataToolbar .btn:hover                      { background-color:var(--kkvColorMenuBG);transition:0.0s; color:var(--kkvColorFont); }
.kkcDataToolbar .btn:active                     { background-color:var(--kkvColorRootBG); }



/* 响应式布局样式 */
@media screen and (max-width: 576px){
  .kkcLayoutFooter::before                      { content:"小于576px 手机版，主按钮在最下方，菜单和右侧收起。上下栏 下翻收起，上翻显示，点击中间区域滚动到最上方"; }
  .kkcLayoutTopBar                              { border-radius:0 0 6px 6px; }
  .kkcLayoutFooter                              { bottom:var(--kkvLeftBarWidth); height:var(--kkvFooterHeight); background:var(--kkvColorMenuBG); border-radius:6px 6px 0 0; }
  .kkcLayoutLeftBar                             { left:0;right:0;bottom:0; height:var(--kkvLeftBarWidth); }
  .kkcLayoutMenuBar                             { left:0;top:0;bottom:0;z-index:1; width:var(--kkvMenuBarWidth); border-radius:0 6px 6px 0; display:none; }
  .kkcLayoutContent                             { inset:0; padding:var(--kkvTopBarHeight) 0 calc(var(--kkvFooterHeight) + var(--kkvLeftBarWidth)) 0; }
  .kkcLayoutContentLoading                      { inset:0; }
  .kkcLayoutRightBar                            { right:0;top:0;bottom:0;z-index:1; width:var(--kkvRightBarWidth); border-radius:6px 0 0 6px; display:none; background:var(--kkvColorMenuBG); }
  .kkcIconTopBarMenu                            { display:block; }
  .kkcIconTopBarRight                           { display:block; }
}
@media screen and (min-width: 577px) and (max-width: 768px){
  .kkcLayoutFooter::before                      { content:"577-768 手机-平板之间，主按钮在左侧，菜单和右侧收起"; }
  .kkcLayoutTopBar                              { left:var(--kkvLeftBarWidth); border-radius:0 0 6px 6px; }
  .kkcLayoutFooter                              { left:var(--kkvLeftBarWidth); border-radius:6px 6px 0 0; }
  .kkcLayoutLeftBar                             { left:0;top:0;bottom:0; width:var(--kkvLeftBarWidth); }
  .kkcLayoutMenuBar                             { left:0;top:0;bottom:0;z-index:1; width:var(--kkvMenuBarWidth); border-radius:0 6px 6px 0; display:none; }
  .kkcLayoutContent                             { left:var(--kkvLeftBarWidth);right:0;top:0;bottom:0; padding:var(--kkvTopBarHeight) 0 var(--kkvFooterHeight) 0; border-radius:6px 0 0 6px; }
  .kkcLayoutContentLoading                      { left:var(--kkvLeftBarWidth);right:0;top:0;bottom:0; border-radius:6px 0 0 6px; }
  .kkcLayoutRightBar                            { right:0;top:0;bottom:0;z-index:1; width:var(--kkvRightBarWidth); border-radius:6px 0 0 6px; display:none; background:var(--kkvColorMenuBG); }
  .kkcIconTopBarMenu                            { display:block; }
  .kkcIconTopBarRight                           { display:block; }
}
@media screen and (min-width: 769px) and (max-width: 992px){
  .kkcLayoutFooter::before                      { content:"769-992 小平板，主按钮在左侧，菜单和右侧收起，内容区域开始不上下顶边"; }
/*.kkcLayoutTopBar                              { }
  .kkcLayoutFooter                              { } */
  .kkcLayoutLeftBar                             { left:0;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvLeftBarWidth); }
  .kkcLayoutMenuBar                             { left:0;top:0;bottom:0;z-index:1; width:var(--kkvMenuBarWidth); border-radius:0 6px 6px 0; display:none; }
  .kkcLayoutContent                             { left:var(--kkvLeftBarWidth);right:10px;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:6px; }
  .kkcLayoutContentLoading                      { left:var(--kkvLeftBarWidth);right:10px;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:6px; }
  .kkcLayoutRightBar                            { right:0;top:0;bottom:0;z-index:1; width:var(--kkvRightBarWidth); border-radius:6px 0 0 6px; display:none; background:var(--kkvColorMenuBG); }
  .kkcIconTopBarMenu                            { display:block; }
  .kkcIconTopBarRight                           { display:block; }
}
@media screen and (min-width: 993px) and (max-width: 1200px){
  .kkcLayoutFooter::before                      { content:"993-1200 大平板，主按钮和菜单在左侧，右侧收起，内容区域不上下顶边"; }
/*.kkcLayoutTopBar                              { }
  .kkcLayoutFooter                              { } */
  .kkcLayoutLeftBar                             { left:0;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvLeftBarWidth); }
  .kkcLayoutMenuBar                             { left:var(--kkvLeftBarWidth);top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvMenuBarWidth); border-radius:6px 0 0 6px; }
  .kkcLayoutContent                             { left:calc(var(--kkvLeftBarWidth) + var(--kkvMenuBarWidth));right:10px;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:0 6px 6px 0; }
  .kkcLayoutContentLoading                      { left:calc(var(--kkvLeftBarWidth) + var(--kkvMenuBarWidth));right:10px;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:0 6px 6px 0; }
  .kkcLayoutRightBar                            { right:0;top:0;bottom:0;z-index:1; width:var(--kkvRightBarWidth); border-radius:6px 0 0 6px; display:none; background:var(--kkvColorMenuBG); }
  .kkcIconTopBarRight                           { display:block; }
}
@media screen and (min-width: 1201px){
  .kkcLayoutFooter::before                      { content:"1201以上 电脑版本，全部展开"; }
/*.kkcLayoutTopBar                              { }
  .kkcLayoutFooter                              { } */
  .kkcLayoutLeftBar                             { left:0;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvLeftBarWidth); }
  .kkcLayoutMenuBar                             { left:var(--kkvLeftBarWidth);top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvMenuBarWidth); border-radius:6px 0 0 6px; }
  .kkcLayoutContent                             { left:calc(var(--kkvLeftBarWidth) + var(--kkvMenuBarWidth));right:var(--kkvRightBarWidth);top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:0 6px 6px 0; }
  .kkcLayoutContentLoading                      { left:calc(var(--kkvLeftBarWidth) + var(--kkvMenuBarWidth));right:var(--kkvRightBarWidth);top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); border-radius:0 6px 6px 0; }
  .kkcLayoutRightBar                            { right:0;top:var(--kkvTopBarHeight);bottom:var(--kkvFooterHeight); width:var(--kkvRightBarWidth); }
}

/*
  test memo
*/









/* 变量颜色值借鉴 https://developer.apple.com/cn/design/resources/
--code-background: #f9fafa;
--code-background-xcode: #f9fafa;
--code-border: 1px solid #d2d2d7;
--code-comment: #007400;
--code-enum: #37799d;
--code-key: #ad3ea4;
--code-method: #4a22b0;
--code-number: #2629d7;
--code-pointer: #3e7f87;
--code-preprocessor: #78492b;
--code-string: #d22e1b;
--code-title: #804fb8;
--code-type: #22575c;
--code-var: #027db0;
--color-button-background-active: #0071e3;
--color-button-background-hover: rgb(0, 119, 237);
--color-button-text: #fff;
--color-callout-background: #f5f5f7;
--color-callout-border: transparent;
--color-callout-label: #1d1d1f;
--color-callout-shadow: transparent;
--color-figure-blue: #06c;
--color-fill-blue: #0071e3;
--fill-secondary: #fbfbfd;
--fill-secondary-alt: #fbfbfd;
--fill-tertiary: #f5f5f7;
--glyph-blue: #2997ff;
--r-globalnav-height: 44px;
--r-globalnav-segmentbar-height: 0;
--r-globalnav-viewport-large-max-width: 1441px;
--r-globalnav-viewport-large-min-width: 1024px;
--r-globalnav-viewport-large-query: (min-width: 1024px);
--r-globalnav-viewport-medium-max-width: 1023px;
--r-globalnav-viewport-medium-min-width: 768px;
--r-globalnav-viewport-medium-query: (max-width: 1023px);
--r-globalnav-viewport-small-max-width: 767px;
--r-globalnav-viewport-small-min-width: 420px;
--r-globalnav-viewport-small-query: (max-width: 767px);
--r-globalnav-viewport-xsmall-max-width: 419px;
--r-globalnav-viewport-xsmall-min-width: 320px;
--r-globalnav-viewport-xsmall-query: (max-width: 419px);
--r-localnav-gn-height: 44px;
--r-localnav-height: calc(52px * 1);
--r-localnav-stacked-height: calc(66px * 1);
--r-localnav-text-zoom-factor: 1;
--r-localnav-viewport-large-min-width: viewport-get-property-for("ac-localnav:large", min-width);
--r-localnav-viewport-large-query: min-width(1024px);
--r-localnav-viewport-medium-max-width: viewport-get-property-for("ac-localnav:medium", max-width);
--r-localnav-viewport-medium-min-width: viewport-get-property-for("ac-localnav:medium", min-width);
--r-localnav-viewport-medium-query: min-width(834px);
--r-localnav-viewport-small-max-width: viewport-get-property-for("ac-localnav:small", max-width);
--r-localnav-viewport-small-min-width: viewport-get-property-for("ac-localnav:small", min-width);
--r-localnav-viewport-small-query: min-width(320px);
--r-sk-end: right;
--r-sk-logical-factor: 1;
--r-sk-safe-area-inset-end: 0px;
--r-sk-safe-area-inset-start: 0px;
--r-sk-start: left;
--sk-body-background-color: rgb(255, 255, 255);
--sk-body-font-stack: text;
--sk-body-link-color: rgb(0, 102, 204);
--sk-body-text-color: rgb(29, 29, 31);
--sk-default-stacked-margin: 0.4em;
--sk-enviro-green: rgb(0, 217, 89);
--sk-enviro-neutral: rgb(232, 232, 237);
--sk-fill: rgb(255, 255, 255);
--sk-fill-blue: rgb(0, 113, 227);
--sk-fill-gray: rgb(29, 29, 31);
--sk-fill-gray-alpha: rgba(0, 0, 0, 0.88);
--sk-fill-gray-quaternary: rgb(232, 232, 237);
--sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08);
--sk-fill-gray-secondary: rgb(134, 134, 139);
--sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48);
--sk-fill-gray-tertiary: rgb(210, 210, 215);
--sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16);
--sk-fill-green: rgb(3, 161, 14);
--sk-fill-green-secondary: rgb(245, 255, 246);
--sk-fill-orange: rgb(245, 99, 0);
--sk-fill-orange-secondary: rgb(255, 249, 244);
--sk-fill-red: rgb(227, 0, 0);
--sk-fill-red-secondary: rgb(255, 242, 244);
--sk-fill-secondary: rgb(250, 250, 252);
--sk-fill-tertiary: rgb(245, 245, 247);
--sk-fill-yellow: rgb(255, 224, 69);
--sk-fill-yellow-secondary: rgb(255, 254, 242);
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0, 0, 0);
--sk-focus-offset: 1px;
--sk-focus-offset-container: 3px;
--sk-footnote-font-size: 0.6em;
--sk-footnote-offset-top: -0.5em;
--sk-footnote-reduced-font-size: 0.45em;
--sk-footnote-reduced-offset-top: -0.86em;
--sk-glyph: rgb(0, 0, 0);
--sk-glyph-blue: rgb(0, 102, 204);
--sk-glyph-gray: rgb(29, 29, 31);
--sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88);
--sk-glyph-gray-secondary: rgb(110, 110, 115);
--sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56);
--sk-glyph-gray-secondary-alt: rgb(66, 66, 69);
--sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72);
--sk-glyph-gray-tertiary: rgb(134, 134, 139);
--sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48);
--sk-glyph-green: rgb(0, 128, 9);
--sk-glyph-orange: rgb(182, 68, 0);
--sk-glyph-red: rgb(227, 0, 0);
--sk-headline-plus-first-element-margin: 0.8em;
--sk-headline-plus-headline-margin: 0.4em;
--sk-headline-text-color: rgb(29, 29, 31);
--sk-link-disabled-opacity: 0.42;
--sk-links-inline-margin: 0.8em;
--sk-links-stacked-margin: 0.4em;
--sk-lockup-base-margin: 1.2em;
--sk-lockup-elevated-margin: 1.4em;
--sk-lockup-reduced-margin: 1em;
--sk-lockup-super-margin: 1.6em;
--sk-lockup-tiny-margin: 0.2em;
--sk-paragraph-plus-element-margin: 0.8em;
--sk-paragraph-plus-headline-margin: 1.6em;
--sk-productred: rgb(175, 30, 45);
--system-primary: rgb(249, 249, 249);
--system-secondary: rgb(193, 193, 193);
--system-tertiary: rgb(123, 123, 123);
*/



/* 变量颜色值借鉴 mail.qq.com
--accent_blue: #0F7AF5;
--accent_blue_alpha_005: rgba(15, 122, 245, 0.05);
--accent_blue_alpha_010: rgba(15, 122, 245, 0.1);
--accent_blue_alpha_015: rgba(15, 122, 245, 0.15);
--accent_blue_alpha_020: rgba(15, 122, 245, 0.2);
--accent_blue_alpha_025: rgba(15, 122, 245, 0.25);
--accent_blue_alpha_030: rgba(15, 122, 245, 0.3);
--accent_blue_alpha_040: rgba(15, 122, 245, 0.4);
--accent_blue_alpha_050: rgba(15, 122, 245, 0.5);
--accent_blue_alpha_060: rgba(15, 122, 245, 0.6);
--accent_blue_alpha_070: rgba(15, 122, 245, 0.7);
--accent_blue_alpha_080: rgba(15, 122, 245, 0.8);
--accent_blue_alpha_090: rgba(15, 122, 245, 0.9);
--accent_blue_darken_1: #0E70DF;
--accent_blue_darken_2: #0E66CB;
--accent_blue_darken_3: #0E5CB5;
--accent_blue_darken_4: #0F52A0;
--accent_blue_darken_5: #0F498B;
--accent_blue_lighten_1: #328DF6;
--accent_blue_lighten_2: #57A2F8;
--accent_blue_lighten_3: #7CB7FA;
--accent_blue_lighten_3l: #92C2FA;
--accent_blue_lighten_4: #A8CFFB;
--accent_blue_lighten_4l: #C0DCFC;
--accent_blue_lighten_5: #DAEBFD;
--active-bg: rgba(22, 46, 74, 0.1);
--base_black: #000000;
--base_gray_003: rgba(19, 46, 64, 0.03);
--base_gray_005: rgba(20, 46, 77, 0.05);
--base_gray_007: rgba(21, 46, 74, 0.07);
--base_gray_010: rgba(22, 46, 74, 0.1);
--base_gray_015: rgba(23, 46, 71, 0.15);
--base_gray_020: rgba(23, 45, 69, 0.2);
--base_gray_025: rgba(24, 44, 66, 0.25);
--base_gray_030: rgba(24, 43, 64, 0.3);
--base_gray_040: rgba(25, 41, 59, 0.4);
--base_gray_050: rgba(25, 38, 54, 0.5);
--base_gray_060: rgba(24, 36, 48, 0.6);
--base_gray_070: rgba(23, 33, 43, 0.7);
--base_gray_080: rgba(22, 30, 38, 0.8);
--base_gray_090: rgba(21, 26, 33, 0.9);
--base_gray_100: #13181D;
--base_white_003: rgba(255, 255, 255, 0.03);
--base_white_005: rgba(255, 255, 255, 0.05);
--base_white_007: rgba(255, 255, 255, 0.07);
--base_white_010: rgba(255, 255, 255, 0.1);
--base_white_015: rgba(255, 255, 255, 0.15);
--base_white_020: rgba(255, 255, 255, 0.2);
--base_white_025: rgba(255, 255, 255, 0.25);
--base_white_030: rgba(255, 255, 255, 0.3);
--base_white_040: rgba(255, 255, 255, 0.4);
--base_white_050: rgba(255, 255, 255, 0.5);
--base_white_060: rgba(255, 255, 255, 0.6);
--base_white_070: rgba(255, 255, 255, 0.7);
--base_white_080: rgba(255, 255, 255, 0.8);
--base_white_090: rgba(255, 255, 255, 0.9);
--base_white_100: #FFFFFF;
--bg: transparent;
--bg_gray_web_0: #E6EDF5;
--bg_gray_web_1: #F2F7FA;
--bg_gray_web_2: #F7FAFC;
--bg_gray_web_3: #FAFBFC;
--bg_panel_blur_stroke: #FFFFFF;
--bg_segmented_control_option_selected: #FFFFFF;
--bg_switch_grabber: #FFFFFF;
--bg_white_web: #FFFFFF;
--bg_white_web_alpha_090: rgba(255, 255, 255, 0.9);
--button_clearbutton_gray_xmark: #FFFFFF;
--button_clearbutton_white_xmark: rgba(24, 36, 48, 0.6);
--chrome_cyan: #00B1F7;
--chrome_cyan_darken_1: #00A1E1;
--chrome_cyan_darken_2: #0092CD;
--chrome_cyan_darken_3: #0083B6;
--chrome_cyan_darken_4: #0073A1;
--chrome_cyan_darken_5: #00648C;
--chrome_cyan_lighten_1: #25BCF8;
--chrome_cyan_lighten_2: #4CC8F9;
--chrome_cyan_lighten_3: #74D4FB;
--chrome_cyan_lighten_3l: #8BDCFB;
--chrome_cyan_lighten_4: #A3E3FC;
--chrome_cyan_lighten_4l: #BCEBFD;
--chrome_cyan_lighten_5: #D8F3FE;
--chrome_green: #07AB28;
--chrome_green_darken_1: #079C27;
--chrome_green_darken_2: #078D27;
--chrome_green_darken_3: #077E26;
--chrome_green_darken_4: #077025;
--chrome_green_darken_5: #076125;
--chrome_green_lighten_1: #2BB747;
--chrome_green_lighten_2: #51C468;
--chrome_green_lighten_3: #78D18A;
--chrome_green_lighten_3l: #8ED99D;
--chrome_green_lighten_4: #A6E1B1;
--chrome_green_lighten_4l: #BEE9C7;
--chrome_green_lighten_5: #D9F2DE;
--chrome_orange: #FF8800;
--chrome_orange_darken_1: #E67C00;
--chrome_orange_darken_2: #CE7100;
--chrome_orange_darken_3: #B66600;
--chrome_orange_darken_4: #9F5B00;
--chrome_orange_darken_5: #875000;
--chrome_orange_lighten_1: #FF9925;
--chrome_orange_lighten_2: #FFAB4C;
--chrome_orange_lighten_3: #FFBE74;
--chrome_orange_lighten_3l: #FFC98B;
--chrome_orange_lighten_4: #FFD4A3;
--chrome_orange_lighten_4l: #FFE0BC;
--chrome_orange_lighten_5: #FFEDD8;
--chrome_pink: #EB387D;
--chrome_pink_darken_1: #D43473;
--chrome_pink_darken_2: #BE316B;
--chrome_pink_darken_3: #A82E61;
--chrome_pink_darken_4: #932B58;
--chrome_pink_darken_5: #7D284F;
--chrome_pink_lighten_1: #EE5590;
--chrome_pink_lighten_2: #F173A4;
--chrome_pink_lighten_3: #F493B8;
--chrome_pink_lighten_3l: #F6A4C4;
--chrome_pink_lighten_4: #F8B7D0;
--chrome_pink_lighten_4l: #FACBDD;
--chrome_pink_lighten_5: #FCE1EB;
--chrome_purple: #7C16F7;
--chrome_purple_darken_1: #7016E1;
--chrome_purple_darken_2: #6516CD;
--chrome_purple_darken_3: #5B16B6;
--chrome_purple_darken_4: #5016A1;
--chrome_purple_darken_5: #46168C;
--chrome_purple_lighten_1: #8F38F8;
--chrome_purple_lighten_2: #A35BF9;
--chrome_purple_lighten_3: #B880FB;
--chrome_purple_lighten_3l: #C395FB;
--chrome_purple_lighten_4: #D0ABFC;
--chrome_purple_lighten_4l: #DDC2FD;
--chrome_purple_lighten_5: #EBDBFE;
--chrome_red: #F73116;
--chrome_red_darken_1: #DF2E16;
--chrome_red_darken_2: #C82B16;
--chrome_red_darken_3: #B02916;
--chrome_red_darken_4: #9A2616;
--chrome_red_darken_5: #832416;
--chrome_red_lighten_1: #F84F38;
--chrome_red_lighten_2: #F96E5B;
--chrome_red_lighten_3: #FB8F80;
--chrome_red_lighten_3l: #FBA195;
--chrome_red_lighten_4: #FCB5AB;
--chrome_red_lighten_4l: #FDC9C2;
--chrome_red_lighten_5: #FEDFDB;
--chrome_yellow: #F7C200;
--chrome_yellow_darken_1: #DFB000;
--chrome_yellow_darken_2: #C89F00;
--chrome_yellow_darken_3: #B08E00;
--chrome_yellow_darken_4: #9A7D00;
--chrome_yellow_darken_5: #836D00;
--chrome_yellow_lighten_1: #F8CB25;
--chrome_yellow_lighten_2: #F9D44C;
--chrome_yellow_lighten_3: #FBDE74;
--chrome_yellow_lighten_3l: #FBE38B;
--chrome_yellow_lighten_4: #FCE9A3;
--chrome_yellow_lighten_4l: #FDEFBC;
--chrome_yellow_lighten_5: #FEF6D8;
--color-scroll-bar-active-bg: rgba(24, 36, 48, 0.6);
--color-scroll-bar-bg: rgba(23, 45, 69, 0.2);
--color-scroll-bar-hover-bg: rgba(25, 38, 54, 0.5);
--email-color: rgba(22, 30, 38, 0.8);
--hover-bg: rgba(20, 46, 77, 0.05);
--inner_shadow_mask: 0 6px 6px -6px rgba(19, 24, 29, 0.2) inset;
--mask_gray_030: rgba(0, 0, 0, 0.3);
--mask_white_030: rgba(255, 255, 255, 0.3);
--mask_white_095: rgba(255, 255, 255, 0.95);
--material_BlueButton_ExtraLarge: 0 2px 4px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px 0 rgba(15, 122, 245, 0.4);
--material_BlueButton_ExtraSmall: 0 1px 2px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 2px 0 rgba(15, 122, 245, 0.25);
--material_BlueButton_Large: 0 2px 2px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 3px 0 rgba(15, 122, 245, 0.4);
--material_BlueButton_Medium: 0 2px 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px 0 rgba(15, 122, 245, 0.3);
--material_BlueButton_Small: 0 1px 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px 0 rgba(15, 122, 245, 0.3);
--material_castshadow_1: 0 1px 2px 0 rgba(19, 24, 29, 0.32);
--material_castshadow_2: 0 1px 2px 0 rgba(19, 24, 29, 0.34);
--material_castshadow_3: 0 1px 2px 0 rgba(19, 24, 29, 0.36);
--material_castshadow_4: 0 2px 3px 0 rgba(19, 24, 29, 0.38);
--material_castshadow_5: 0 2px 4px 0 rgba(19, 24, 29, 0.4);
--material_compose_default: 0 2px 4px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px 0 rgba(15, 122, 245, 0.4);
--material_compose_white: 0 2px 4px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px 0 rgba(19, 24, 29, 0.12);
--material_highlight_1: 0 1px 2px 0 rgba(255, 255, 255, 0.12) inset;
--material_highlight_2: 0 1px 2px 0 rgba(255, 255, 255, 0.14) inset;
--material_highlight_3: 0 2px 2px 0 rgba(255, 255, 255, 0.14) inset;
--material_highlight_4: 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset;
--material_highlight_5: 0 2px 4px 0 rgba(255, 255, 255, 0.16) inset;
--material_panel: 0 1px 2px 0 #FFF inset;
--nick-color: rgba(22, 30, 38, 0.8);
--shadow_1: 0 2px 3px 0 rgba(19, 24, 29, 0.12);
--shadow_2: 0 4px 6px 0 rgba(19, 24, 29, 0.12);
--shadow_3: 0 6px 9px 0 rgba(19, 24, 29, 0.14);
--shadow_4: 0 8px 12px 0 rgba(19, 24, 29, 0.14);
--shadow_5: 0 10px 15px 0 rgba(19, 24, 29, 0.16);
--shadow_6: 0 12px 18px 0 rgba(19, 24, 29, 0.16);
--shadow_7: 0 14px 21px 0 rgba(19, 24, 29, 0.18);
--shadow_8: 0 16px 24px 0 rgba(19, 24, 29, 0.18);
--shadow_card: 0 8px 16px 0 rgba(19, 24, 29, 0.06);
--shadow_graph: 0 1px 1px 0 rgba(0, 0, 0, 0.6);
--shadow_text: 0 1px 1px rgba(0, 0, 0, 0.7);
--text-shadow: none;
--theme_alpha_005: rgba(15, 122, 245, 0.05);
--theme_alpha_010: rgba(15, 122, 245, 0.1);
--theme_alpha_015: rgba(15, 122, 245, 0.15);
--theme_alpha_020: rgba(15, 122, 245, 0.2);
--theme_alpha_025: rgba(15, 122, 245, 0.25);
--theme_alpha_030: rgba(15, 122, 245, 0.3);
--theme_alpha_040: rgba(15, 122, 245, 0.4);
--theme_alpha_050: rgba(15, 122, 245, 0.5);
--theme_alpha_060: rgba(15, 122, 245, 0.6);
--theme_alpha_070: rgba(15, 122, 245, 0.7);
--theme_alpha_080: rgba(15, 122, 245, 0.8);
--theme_alpha_090: rgba(15, 122, 245, 0.9);
--theme_darken_1: #0E70DF;
--theme_darken_2: #0E66CB;
--theme_darken_3: #0E5CB5;
--theme_darken_4: #0F52A0;
--theme_darken_5: #0F498B;
--theme_lighten_1: #328DF6;
--theme_lighten_2: #57A2F8;
--theme_lighten_3: #7CB7FA;
--theme_lighten_3l: #92C2FA;
--theme_lighten_4: #A8CFFB;
--theme_lighten_4l: #C0DCFC;
--theme_lighten_5: #DAEBFD;
--theme_primary: #0F7AF5;
*/