/* 全局变量 */
/*
    input:not([type="file"],[type="image"],[type="checkbox"],[type="radio"]) { }

    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          选择没有子元素的元素。

    :first-letter   内容里第一个字符
    ::selection     文本选中的样式

    :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%); }

    background: linear-gradient(98deg, rgba(19, 102, 236, 0.8) 2%, rgba(110, 38, 234, 0.8) 95%); 阿里云的蓝到紫背景渐变色

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

*/





/* 常规配色 */
:root {
  color-scheme:light dark; /* <- 新方式，可以使用 light-dark() 函数一次性声明完；另外可以在 html 里对需要的元素使用 style='color-scheme:dark;' （也可 color-scheme:dark; 封进 class 里使用）进行局部控制明暗模式 */

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

  --kkvColorText:           light-dark(#333,#fff);
  --kkvColorBG:             light-dark(#fff,#222);

  --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); /* 动画效果：使用曲线函数，有回弹效果 - 生动活泼 */

  --kkvPanelBgColorful:     linear-gradient(to bottom right,light-dark(#D4E4FD,#09439D),light-dark(#E7F8ED,#0F5225));

  --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;

  --kkvBtnSecondaryColor:   #1772F6;
  --kkvBtnSecondaryBG:      #EDF4FE;

  --kkvBtnBgBlue:           #1772F6;
  --kkvBtnBgOrange:         #F77A31;

  --kkvColorLink:           #06c;

  --kkvWinDockBG:           light-dark(rgba(237,237,237,0.7),rgba(24,24,24,0.7));
  --kkvWinDockSize:         32px;
  --kkvWinDockIconSize:     28px;
  --kkvWinAreaBG:           light-dark(transparent,rgba(24,24,24,0.5));
  --kkvWinDragBG:           transparent; /* rgba(0,0,0,0.1); */
  --kkvWinFormBG:           var(--kkvWinDockBG); /* 目前跟随，保持一致性 light-dark(rgba(237,237,237,0.7),rgba(24,24,24,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;

  --kkvWinToastColor:       light-dark(rgb(255,255,255),      rgb(0,0,0));;
  --kkvWinToastColorBG:     light-dark(rgb(0,0,0,0.5),        rgb(255,255,255,0.5));;

  --kkvTipsColorBG:         rgba(255,0,0,1);

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

  --kkvImageLogo:           url('/frontend/logo-light.png');
  --kkvColorGlassBorder:    light-dark(white,                 rgba(115,117,118,1));
  --kkvColorBorder:         light-dark(#00000014,             #ffffff17);
  --kkvColorFont:           light-dark(rgb(0,0,0),            rgb(226,226,226));
  --kkvColorTitle:          light-dark(rgb(128,128,128),      rgb(158,158,158));
  --kkvColorTips:           light-dark(rgb(168,168,168),      rgb(118,118,118));
  --kkvColorRootBG:         light-dark(rgb(237,237,237),      rgb(24,24,24));
  --kkvColorMenuBG:         light-dark(rgb(243,243,243),      rgb(31,31,31));
  --kkvColorPageBG:         light-dark(rgb(255,255,255),      rgb(38,38,38));
  --kkvColorPageThBG:       light-dark(rgba(239,243,248,0.8), rgba(38,38,54,0.8)); /*rgba(255,255,255,0.5);*/
  --kkvColorPrimaryBG:      light-dark(rgb(59,100,252),       rgb(37,114,230));
  --kkvColorSecondaryBG:    light-dark(rgb(59,100,252),       rgb(47,47,47));
  --kkvColorHoverBG:        light-dark(rgb(232,232,232),      rgb(46,46,46));
  --kkvColorSelectedBG:     light-dark(rgb(226,230,246),      rgb(226,230,246));

  --kkvColorTrOddBG:        light-dark(rgb(255,255,255),      rgb(21,21,21));
  --kkvColorTrEvenBG:       light-dark(rgb(246,246,246),      rgb(12,12,12));
  --kkvColorTrHoverBG:      light-dark(rgb(242,242,242),      rgb(34,34,34));
  --kkvColorTrActiveBG:     light-dark(rgb(236,236,236),      rgb(30,30,30));
  --kkvColorTrSelBG:        light-dark(#F7F9FA,               rgb(30,30,30));
  --kkvColorTrSelHoverBG:   light-dark(rgb(236,236,236),      rgb(26,26,26));
  --kkvColorTrSelActiveBG:  light-dark(rgb(225,225,225),      rgb(22,22,22));

  --kkvColorInputTextBG:    var(--kkvColorPageBG);  /*rgba(255,255,255,0.9);*/
  --kkvColorInputCheckBG:   var(--kkvColorPageBG);  /*rgba(255,255,255,0.9);*/

  --kkvColor1Ligth:   #EDEDED;  --kkvColor1Dark:    #C1C6C9;   --kkvColor1: light-dark(var(--kkvColor1Dark), var(--kkvColor1Ligth));   --kkvColorBg1:  light-dark(var(--kkvColor1Ligth), var(--kkvColor1Dark));
  --kkvColor2Ligth:   #DDDFE2;  --kkvColor2Dark:    #AAB0B6;   --kkvColor2: light-dark(var(--kkvColor2Dark), var(--kkvColor2Ligth));   --kkvColorBg2:  light-dark(var(--kkvColor2Ligth), var(--kkvColor2Dark));
  --kkvColor3Ligth:   #CAE0E4;  --kkvColor3Dark:    #84B6C0;   --kkvColor3: light-dark(var(--kkvColor3Dark), var(--kkvColor3Ligth));   --kkvColorBg3:  light-dark(var(--kkvColor3Ligth), var(--kkvColor3Dark));
  --kkvColor4Ligth:   #73D1D3;  --kkvColor4Dark:    #47A5A8;   --kkvColor4: light-dark(var(--kkvColor4Dark), var(--kkvColor4Ligth));   --kkvColorBg4:  light-dark(var(--kkvColor4Ligth), var(--kkvColor4Dark));
  --kkvColor5Ligth:   #A7C6DB;  --kkvColor5Dark:    #699DC0;   --kkvColor5: light-dark(var(--kkvColor5Dark), var(--kkvColor5Ligth));   --kkvColorBg5:  light-dark(var(--kkvColor5Ligth), var(--kkvColor5Dark));
  --kkvColor6Ligth:   #F0E3E1;  --kkvColor6Dark:    #D5B2AC;   --kkvColor6: light-dark(var(--kkvColor6Dark), var(--kkvColor6Ligth));   --kkvColorBg6:  light-dark(var(--kkvColor6Ligth), var(--kkvColor6Dark));
  --kkvColor7Ligth:   #F9BCD3;  --kkvColor7Dark:    #F46FA1;   --kkvColor7: light-dark(var(--kkvColor7Dark), var(--kkvColor7Ligth));   --kkvColorBg7:  light-dark(var(--kkvColor7Ligth), var(--kkvColor7Dark));
  --kkvColor8Ligth:   #EDE1BA;  --kkvColor8Dark:    #D3AD3C;   --kkvColor8: light-dark(var(--kkvColor8Dark), var(--kkvColor8Ligth));   --kkvColorBg8:  light-dark(var(--kkvColor8Ligth), var(--kkvColor8Dark));
  --kkvColor9Ligth:   #F1CBA0;  --kkvColor9Dark:    #E48E30;   --kkvColor9: light-dark(var(--kkvColor9Dark), var(--kkvColor9Ligth));   --kkvColorBg9:  light-dark(var(--kkvColor9Ligth), var(--kkvColor9Dark));
  --kkvColor10Ligth:  #56585D;  --kkvColor10Dark:   #38393C;   --kkvColor10:light-dark(var(--kkvColor10Dark),var(--kkvColor10Ligth));  --kkvColorBg10: light-dark(var(--kkvColor10Ligth),var(--kkvColor10Dark));
  --kkvColor11Ligth:  #46546A;  --kkvColor11Dark:   #2B3441;   --kkvColor11:light-dark(var(--kkvColor11Dark),var(--kkvColor11Ligth));  --kkvColorBg11: light-dark(var(--kkvColor11Ligth),var(--kkvColor11Dark));
  --kkvColor12Ligth:  #1C4C7F;  --kkvColor12Dark:   #0F2B48;   --kkvColor12:light-dark(var(--kkvColor12Dark),var(--kkvColor12Ligth));  --kkvColorBg12: light-dark(var(--kkvColor12Ligth),var(--kkvColor12Dark));
  --kkvColor13Ligth:  #6C36B1;  --kkvColor13Dark:   #452372;   --kkvColor13:light-dark(var(--kkvColor13Dark),var(--kkvColor13Ligth));  --kkvColorBg13: light-dark(var(--kkvColor13Ligth),var(--kkvColor13Dark));
  --kkvColor14Ligth:  #A2131D;  --kkvColor14Dark:   #6A0D12;   --kkvColor14:light-dark(var(--kkvColor14Dark),var(--kkvColor14Ligth));  --kkvColorBg14: light-dark(var(--kkvColor14Ligth),var(--kkvColor14Dark));
  --kkvColor15Ligth:  #20612D;  --kkvColor15Dark:   #143E1D;   --kkvColor15:light-dark(var(--kkvColor15Dark),var(--kkvColor15Ligth));  --kkvColorBg15: light-dark(var(--kkvColor15Ligth),var(--kkvColor15Dark));
  --kkvColor16Ligth:  #3B3B3B;  --kkvColor16Dark:   #2E2E2E;   --kkvColor16:light-dark(var(--kkvColor16Dark),var(--kkvColor16Ligth));  --kkvColorBg16: light-dark(var(--kkvColor16Ligth),var(--kkvColor16Dark));

  --kkvColorBgGreen:  #E7F8F5;  --kkvColorFgGreen:  #1ACFAF;
  --kkvColorBgBlue:   #E7F1FE;  --kkvColorFgBlue:   #277BF6;
  --kkvColorBgYellow: #FEF5E7;  --kkvColorFgYellow: #FAA11E;
  --kkvColorBgRed:    #FDEDEE;  --kkvColorFgRed:    #F97CAE;

}
/* 夜晚配色 - 自动跟随系统黑色模式 - 旧方式，分开重复声明 */
@media (prefers-color-scheme:dark){
  :root {
    --kkvBtnPrimaryShadow:  none;
    --kkvImageLogo:         url('/frontend/logo-dark.png');
  }
}



/* 前端 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; }

.kkcTextJianBianBG { font-weight:bold;background-clip: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%); }



/* 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                                            { color-scheme:light dark;color:light-dark(#333,#fff);background-color:light-dark(#fff,#222); margin:0;padding:0;height:100%;width:100%; overscroll-behavior-y:none; } /* overscroll-behavior-y:contain; 禁止移动端下拉页面刷新 lch:BUT! 为啥测试无效👀？？？ */



input:placeholder-shown                         { opacity:0.8; }
textarea                                        { transition:0.5s;background:var(--kkvColorInputTextBG);color:var(--kkvColorFont);border-radius:24px;border:1px solid var(--kkvColorBorder);padding:12px;box-sizing:border-box; } /* 不指定高度 */
input[type=checkbox]                            { background:var(--kkvColorInputTextBG); } /* 似乎无效 */
input[type=radio]                               { background:var(--kkvColorInputTextBG); } /* 似乎无效 */

select,
/*textarea,*/
input[type=text],
input[type=password],
input[type=number],
input[type=digit],
input[type=idcard],
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:valid,
textarea:valid,
input[type=text]:valid,
input[type=password]:valid,
input[type=number]:valid,
input[type=digit]:valid,
input[type=idcard]:valid,
input[type=search]:valid,
input[type=url]:valid,
input[type=tel]:valid,
input[type=email]:valid,
input[type=date]:valid,
input[type=datetime-local]:valid,
input[type=time]:valid,
input[type=month]:valid,
input[type=week]:valid                          { bborder-color:rgba(255,0,0,0.1); box-shadow:0 0 5px 1px rgba(0,255,0,0.2); } */
select:invalid,
textarea:invalid,
input[type=text]:invalid,
input[type=password]:invalid,
input[type=number]:invalid,
input[type=digit]:invalid,
input[type=idcard]:invalid,
input[type=search]:invalid,
input[type=url]:invalid,
input[type=tel]:invalid,
input[type=email]:invalid,
input[type=date]:invalid,
input[type=datetime-local]:invalid,
input[type=time]:invalid,
input[type=month]:invalid,
input[type=week]:invalid                        { bborder-color:rgba(255,0,0,0.1); box-shadow:0 0 5px 1px rgba(255,0,0,0.2); }
.kkcFormInputs select:user-valid,
.kkcFormInputs textarea:user-valid,
.kkcFormInputs input[type=text]:user-valid,
.kkcFormInputs input[type=password]:user-valid,
.kkcFormInputs input[type=number]:user-valid,
.kkcFormInputs input[type=digit]:user-valid,
.kkcFormInputs input[type=idcard]:user-valid,
.kkcFormInputs input[type=search]:user-valid,
.kkcFormInputs input[type=url]:user-valid,
.kkcFormInputs input[type=tel]:user-valid,
.kkcFormInputs input[type=email]:user-valid,
.kkcFormInputs input[type=date]:user-valid,
.kkcFormInputs input[type=datetime-local]:user-valid,
.kkcFormInputs input[type=time]:user-valid,
.kkcFormInputs input[type=month]:user-valid,
.kkcFormInputs 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,
textarea:user-invalid,
input[type=text]:user-invalid,
input[type=password]:user-invalid,
input[type=number]:user-invalid,
input[type=digit]:user-invalid,
input[type=idcard]: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); } */



#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); }
#kkdWinDockBtnStart                             { position:absolute;top:0px;left:0px; }
#kkdWinDockBtnList                              { position:absolute;top:0px;right:0px; }
#kkdWinDockNotice                               { transition:3s;position:absolute;top:0px;left:var(--kkvWinDockSize);right:var(--kkvWinDockSize);height:var(--kkvWinDockSize);line-height:var(--kkvWinDockSize);overflow:hidden;text-shadow:1px 1px 8px black; }
.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                                { position:absolute;top:0px;left:var(--kkvWinDockSize);right:var(--kkvWinDockSize);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:var(--kkvTipsColorBG);position:absolute;top:10px;right:4px;border:var(--kkvBoxBorder);border-radius:6px; }
.kkcWinDockCur                                  { background:var(--kkvColorPageBG); }
.kkcWinDockMax                                  { color:light-dark(rgb(10,81,0),rgb(40,193,49)); } /* 在 kkcWinDockMin 前，min 时优先级较高 */
.kkcWinDockMin                                  { color:light-dark(rgb(162,92,12),rgb(252,176,36)); }
.kkcWinDockClose                                { color:light-dark(rgb(134,0,2),rgb(253,70,70)); }

.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);display:flex;align-items:center;justify-content:center; }

#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); }
#kkdLoginUID                                    {  }
#kkdLoginLogo                                   { width:128px;height:34px;margin-bottom:10px;border:0px;background:no-repeat center center;background-size:contain;background-image:var(--kkvImageLogo); }
#kkdWinLangs                                    { color:var(--kkvColorTitle);display:flex;align-items:center;margin-bottom:20px; }
#kkdWinLangs font                               { margin-left:5px;margin-right:10px;line-height:90%; }
#kkdWinLangs img                                { margin-left:10px;border-radius:4px;cursor:pointer; }
.kkcLoginForm                                   { transition:0.3s;padding:50px; }
.kkcLoginForm:hover                             { box-shadow:var(--kkvBoxShadow);border-radius:40px; }
.kkcLoginForm label                             { display:block;position:relative;margin-bottom:10px; }
.kkcLoginForm label .iconfont                   { position:absolute;left:9px;top:5px; }
.kkcLoginForm label input[type=text]            { padding:0px 12px 0px 24px;width:100%; }
.kkcLoginForm label input[type=password]        { padding:0px 12px 0px 24px;width:100%; }
/* winform */
.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:hidden;border-radius:20px 20px 20px 20px; user-select:text;-webkit-user-select:text; text-align:right; }
.kkcWinFormBody                                 { position:absolute;inset:0px;overflow:auto;text-align:left; } /* 这里 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                              { transition:0.3s;opacity:0;display:none;position:absolute;inset:0;background:rgba(0,0,0,0.01); } /* display:flex; 后子元素 margin:auto auto; 则垂直居中，水平居中 */
.kkcWinFormLoadingIcon                          { 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;align-items:center;justify-content:center;opacity:1; }
/* 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                   { cccolor: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);white-space:nowrap;cursor:pointer; }
.kkcWinBtnPrimary:hover                         { background:var(--kkvBtnPrimaryHoverBG); }
.kkcWinBtnPrimary:active                        { background:var(--kkvBtnPrimaryActiveBG); }
.kkcWinBtnSecondary                             { background:var(--kkvBtnSecondaryBG);color:var(--kkvBtnSecondaryColor);border:1px solid var(--kkvBtnSecondaryBG);font-size:inherit;line-height:var(--kkvWinDockSize);border-radius:var(--kkvWinDockSize);padding:0px calc(var(--kkvWinDockSize) / 2);cursor:pointer; }
.kkcWinBtnSecondary:hover                       { background:var(--kkvBtnSecondaryColor);color:var(--kkvBtnSecondaryBG);border:1px solid var(--kkvBtnSecondaryBG); }
.kkcWinBtnSecondary:active                      { background:var(--kkvBtnSecondaryBG);color:var(--kkvBtnSecondaryColor);border:1px solid var(--kkvBtnSecondaryColor); }
/* toast */
.kkcWinToast                                    { transition:0.3s;display:inline-block;padding:10px 30px;margin:20px;user-select:none;color:var(--kkvColorFont);background:var(--kkvWinFormBG);border:1px solid var(--kkvColorGlassBorder);;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;box-shadow:var(--kkvBoxShadow); }
.kkcWinToastCenter                              { transition:0.3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-block;padding:10px 30px;margin:20px;user-select:none;color:var(--kkvColorFont);background:var(--kkvWinFormBG);border:1px solid var(--kkvColorGlassBorder);;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;box-shadow:var(--kkvBoxShadow); }
/* message box */
.kkcWinMsgBox                                   { position:absolute;top:0px;min-width:300px;overflow:auto;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 .title                            { color:var(--kkvColorTitle);text-align:left;font-weight:bold; }
.kkcWinMsgBox .body                             { color:var(--kkvColorFont);text-align:center;margin:10px;word-wrap:break-word;word-break:break-all; }
.kkcWinMsgBox .footer                           { text-align:right; }
.kkdWinDock .kkcWinMsgBox                       { max-height:90vh; } /* 不同的限高条件 */
.kkcWinForm .kkcWinMsgBox                       { max-height:90%; }  /* 不同的限高条件 */
/* menu */
#kkdWinStartLogo                                { height:32px;line-height:32px;background:no-repeat center center;background-size:contain;bbbackground-image:var(--kkvImageLogo); }
#kkdWinStartMenu                                { height:calc(100% - 32px - var(--kkvWinDockSize));overflow-x:hidden;overflow-y:auto; }
#kkdWinStartInfo                                { height:var(--kkvWinDockSize);color:var(--kkvColorTitle); }
#kkdWinDockBtnMy                                { background:center center no-repeat url('/avator.png');background-size:cover; }
#kkdWinDockBtnLogout                            { float:right; }
#kkdWinDockBtnHelp                              { float:right; }
#kkdWinDockBtnOptions                           { float:right; }



/* menubar */
.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:var(--kkvTipsColorBG);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; }



/* winform content */
.kkcWinFormBody input                           {  }
.kkcWinFormMemo                                 { margin:20px;display:flex;align-items:center;bbborder-bottom:1px solid var(--kkvColorBorder); } /* windows 上方的描述 */
.kkcWinFormMemo img                             { width:200px;border-radius:20px;margin-right:20px; }
.kkcWinFormAutoTurnPage                         { display:flex;align-items:center;color:var(--kkvColorFont);padding:30px 30px 30px 80px;border-bottom:1px solid var(--kkvColorPageThBG); }
.kkcWinFormAutoTurnPage img                     { height:64px;margin-right:10px; }
.kkcWinFormAutoTurnPage .end                    { color:var(--kkvColorTitle); }
.kkcFormFields                                  { margin:20px;padding:10px;border:1px solid var(--kkvColorBorder);border-radius:8px 8px 8px 8px;min-width:min-content; } /* d.type=='form' 的表单容器 */
.kkcReportFields                                { margin:20px;padding:10px;border:1px solid var(--kkvColorBorder);border-radius:8px 8px 8px 8px;min-width:min-content; /*display:inline-block;*/ color:light-dark(#474747,#C7C7C7);background:var(--kkvPanelBgColorful); } /* d.type=='report' 的表单容器 */
.kkcReportData                                  { mmmargin:20px; } /* d.type=='report' 的数据容器 */
.kkcFormInputs                                  {  } /* 用来包住 wvMakeInputs() 的表单容器，必需品 */
.kkcFormInputs .umi-l                           { padding-right:5px; }
.kkcFormInputs .umi-l label                     { white-space:nowrap; }
.kkcFormInputs .umi-l-fr                        { font-weight:bold; }
.kkcFormInputs .umi-l-frel                      { ttttext-decoration:underline; }
.kkcFormInputs .umi-m                           { white-space:nowrap; }
.kkcFormInputs .umi-fullWidth                   { width:100%;min-width:130px;margin:5px 0px; }
.kkcFormInputs .umi-textCaseC                   { text-transform:capitalize; }
.kkcFormInputs .umi-textCaseL                   { text-transform:lowercase; }
.kkcFormInputs .umi-textCaseU                   { text-transform:uppercase; }
.kkcFormInputs .umi-mvItem span                 { color:var(--kkvColorTitle); }
.kkcFormInputs .umi-inline                      { display:inline-block;padding:5px; }
.kkcFormInputs .umi-inline label                { width:80px;display:inline-block;text-align:right;padding-right:5px; }
.kkcFormInputs .umi-inline input                { width:130px;  }
.kkcFormInputs .umi-inline select               { width:130px; }
.kkcFormInputs::first-line .umi-l-btn           { width:0px;color:red; } /* ::first-line 似乎无效；查了资料原来是有限的 cssName 支持 */

.kkcFormGroup                                   { color:var(--kkvColorTitle);background:var(--kkvPanelBgColorful);font-weight:bold;padding:10px;border-radius:8px; } /* g gv 的样式 */

.kkcForm4Add                                    { background:var(--kkvColorPageBG); }
.kkcForm4Edit                                   { background:var(--kkvColorPageBG); }

.kkcAnimateFlash                                { animation:ani-flash 1 1s linear; } /* 闪烁透明度以提示用户 */
@keyframes ani-flash                            { from,50%,to { opacity:1; } 25%,75%{ opacity:0; } }
.kkcAnimateFlashBG                              { animation:ani-flash-bg 1 1s linear; } /* 闪烁背景色以提示用户；实测并不影响动画前的背景色； */
@keyframes ani-flash-bg                         { from,50%,to { background:transparent; } 25%,75%{ background:yellow; } }





.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); }

/* kkcDataTabs */
.kkcDataTabs                                    { max-width:100%;overflow:auto hidden;padding:4px 10px;box-sizing:border-box;user-select:none; }
.kkcDataTabs .btn                               { transition:0.3s;display:inline-block;padding:5px 10px;cursor:pointer;color:var(--kkvColorFont);white-space:nowrap; }
.kkcDataTabs .btn:hover                         { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow);border-radius:var(--kkvWinDockSize); }
.kkcDataTabs .btn:active                        { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
.kkcDataTabs .turn                              { color:var(--kkvColorFont);background-color:var(--kkvColorPageBG);border-radius:var(--kkvWinDockSize); }

/* kkcDataTable */
/*
.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 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                                   { border-collapse:collapse;border-spacing:0;border-radius:10px;} /* min-width:100%; 移到参数里默认作为可选项 */
.kkcDataTable thead                             { position:sticky;top:0px;border-bottom:1px solid var(--kkvColorBorder);cccolor:light-dark(#474747,#C7C7C7);background:var(--kkvPanelBgColorful); } /* 2026-01-07 去掉后面这个玻璃模糊滤镜后冻结表头左上角直角的问题解决了，酷~ -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); */
.kkcDataTable thead .kkcDataToolbar             { border-bottom:1px solid var(--kkvColorGlassBorder); }
.kkcDataTable thead .header td                  { padding:10px;color:var(--kkvColorFont);text-align:left;white-space:nowrap; }
.kkcDataTable thead .header .sort font          { cursor:pointer;ttttext-decoration:underline; }
.kkcDataTable thead .header .sort font::after   { content:' ¦';color:var(--kkvColorTips); }
.kkcDataTable thead .header .asc  font::after   { content:'↑';color:var(--kkvColorFont); }
.kkcDataTable thead .header .desc font::after   { content:'↓';color:var(--kkvColorFont); }
.kkcDataTable thead th                          { padding:10px;color:var(--kkvColorFont);text-align:left;white-space:nowrap; }
.kkcDataTable thead th:hover                    { cccolor:var(--kkvColorTitle); }
.kkcDataTable thead tr .cellNO                  { color:var(--kkvColorTitle);display:flex;align-items:center; }
.kkcDataTable thead tr .cellBtn                 { color:var(--kkvColorTitle); }

.kkcDataTable .filterRow th                     { padding:0px; }
.kkcDataTable .filterRow td                     { padding:5px;text-align:center; }
.kkcDataTable .filterRow input                  { text-align:center;width:calc(100% - 8px);height:100%; }
.kkcDataTable .btn                              { tttransition:0.3s;cursor:pointer;display:inline-block;color:var(--kkvColorTitle); } /* --kkvColorLink */
.kkcDataTable .btn:hover                        { transition:0s;color:var(--kkvColorFont); }
.kkcDataTable .btn:active                       { color:var(--kkvColorTitle); }

/*.kkcDataTable tbody tr:nth-child(odd)         { background:var(--kkvColorTrOddBG); }
  .kkcDataTable tbody tr:nth-child(even)        { background:var(--kkvColorTrEvenBG); } */
.kkcDataTable tbody tr                          { border-bottom:1px solid var(--kkvColorMenuBG); }
.kkcDataTable tbody tr .cellNO                  { position:sticky;left:0px;display:flex;align-items:center;color:var(--kkvColorTitle); }
.kkcDataTable tbody tr th                       { position:sticky;left:0px;right:0px;padding:10px;bbbackground:var(--kkvColorPageBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
.kkcDataTable tbody tr td                       { padding:20px 10px; }
.kkcDataTable tbody tr:hover                    { background-color:var(--kkvColorTrHoverBG); }
.kkcDataTable tbody tr:active                   { background-color:var(--kkvColorTrActiveBG); }
.kkcDataTable tbody tr:active td                {  }
.kkcDataTable tbody tr.sel                      { background-color:var(--kkvColorTrSelBG); }
.kkcDataTable tbody tr.sel:hover                { background-color:var(--kkvColorTrSelHoverBG); }
.kkcDataTable tbody tr.sel:active               { background-color:var(--kkvColorTrSelActiveBG); }
.kkcDataTable tbody .highLight                  { background:yellow;color:red; }
.kkcDataTable tfoot                             { position:sticky;bottom:0px;border-bottom:1px solid var(--kkvColorRootBG);background:var(--kkvColorPageThBG);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } /* 一个容器里有多个的话，后面的会遮挡前面的，这个要思考一下 */
.kkcDataTable tfoot th                          { padding:10px; }
.kkcDataTable tfoot tr.pagebar td               { position:sticky;left:0px;right:0px; }
/* kkcDataToolbar */
.kkcDataToolbar                                 { max-width:100%;overflow:auto hidden;padding:4px 10px;box-sizing:border-box;user-select:none; position:sticky;top:0px; }
.kkcDataToolbar .btn                            { tttransition:0.3s;display:inline-block;padding:5px 10px;cursor:pointer;color:var(--kkvColorFont); }
.kkcDataToolbar .btn:hover                      { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow);border-radius:var(--kkvWinDockSize); }
.kkcDataToolbar .btn:active                     { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
/*.kkcDataToolbar .btn:hover                    { transition:0.0s;background-color:var(--kkvColorMenuBG);color:var(--kkvColorFont); }
  .kkcDataToolbar .btn:active                   { background-color:var(--kkvColorRootBG); }*/
.kkcDataToolbar .keywords                       { display:inline-block;margin:0px 5px 0px 15px; }
.kkcDataToolbar .txt                            { text-align:right; }
.kkcDataToolbar .turn                           { color:var(--kkvColorFont);background-color:var(--kkvColorPageBG);border-radius:var(--kkvWinDockSize); }
/* kkcDataPagebar */
.kkcDataPagebar                                 { padding:2px 10px;box-sizing:border-box;user-select:none; position:sticky;bottom:0px; background-color:var(--kkvColorPageBG); }
.kkcDataPagebar font                            { display:inline-block;padding:5px 10px; }
.kkcDataPagebar .btn                            { cursor:pointer;color:var(--kkvColorFont); }
.kkcDataPagebar .btn:hover                      { background:var(--kkvBtnPrimaryBG);color:var(--kkvBtnPrimaryColor);box-shadow:var(--kkvBtnPrimaryShadow);border-radius:var(--kkvWinDockSize); }
.kkcDataPagebar .btn:active                     { background:var(--kkvBtnPrimaryActiveBG);color:var(--kkvBtnPrimaryColor); }
.kkcDataPagebar .cur                            { background:var(--kkvColorRootBG);border-radius:var(--kkvWinDockSize); }
.kkcDataPagebar .more                           { color:#ccc; }
/* cellType */
.kkcDataTable .ctP                              { font-weight:bold; }                                                     /* cellType=p       primary */
.kkcDataTable .ctT                              { color:var(--kkvColor4); }                                               /* cellType=t       type */
.kkcDataTable .ctS                              { color:var(--kkvColor9); }                                               /* cellType=t       state */
.kkcDataTable .ctM                              { color:green; }                                                          /* cellType=t       memo */
.kkcDataTable .ctU                              {  }                                                                      /* cellType=u       link */
.kkcDataTable .ctI img                          { max-width:100px;max-height:100px; }                                     /* cellType=i       image */
.kkcDataTable .ctF                              {  }                                                                      /* cellType=f       file */
.kkcDataTable .ctPWD                            {  }                                                                      /* cellType=pwd     password */
.kkcDataTable .ctTEL                            {  }                                                                      /* cellType=tel     phone */
.kkcDataTable .ctMAIL                           {  }                                                                      /* cellType=mail    email */
.kkcDataTable .ctB1                             { color:green; }                                                          /* cellType=b       bool      green */
.kkcDataTable .ctB0                             { color:red; }                                                            /* cellType=b       bool      red */
.kkcDataTable .ctNB                             { text-align:right;white-space:nowrap;color:light-dark(blue,#0F7AF5); }   /* cellType=n       number    blue */
.kkcDataTable .ctNR                             { text-align:right;white-space:nowrap;color:red; }                        /* cellType=n       number    red */
.kkcDataTable .ctAB                             { text-align:right;white-space:nowrap;color:light-dark(blue,#0F7AF5); }   /* cellType=a       area      blue */
.kkcDataTable .ctAR                             { text-align:right;white-space:nowrap;color:red; }                        /* cellType=a       area      red */
.kkcDataTable .ctCB                             { text-align:right;white-space:nowrap;color:light-dark(blue,#0F7AF5); }   /* cellType=c       currency  blue */
.kkcDataTable .ctCR                             { text-align:right;white-space:nowrap;color:red; }                        /* cellType=c       currency  red */
.kkcDataTable .ctPB                             { text-align:right;white-space:nowrap;color:light-dark(blue,#0F7AF5); }   /* cellType=%       percent   blue */
.kkcDataTable .ctPR                             { text-align:right;white-space:nowrap;color:red; }                        /* cellType=%       percent   red */
.kkcDataTable .ctVB                             { text-align:right;white-space:nowrap;color:light-dark(blue,#0F7AF5); }   /* cellType=v       number    blue */
.kkcDataTable .ctVR                             { text-align:right;white-space:nowrap;color:red; }                        /* cellType=v       number    red */





/* 响应式布局样式 */
@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); }
}









/* 变量颜色值借鉴 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;
*/