不会爬树的猴 2 سال پیش
کامیت
c3de5e18a1
19فایلهای تغییر یافته به همراه10556 افزوده شده و 0 حذف شده
  1. 944 0
      css/app.css
  2. 1115 0
      css/app.new.css
  3. 340 0
      css/case.css
  4. 245 0
      css/case.info.css
  5. 871 0
      css/cr.map.css
  6. 62 0
      css/cr.menu.css
  7. 213 0
      css/csa.count.css
  8. 98 0
      css/khpm.child.css
  9. 181 0
      css/module.css
  10. 5649 0
      css/mui.css
  11. 4 0
      css/mui.min.css
  12. 285 0
      css/mui.picker.all.css
  13. 85 0
      css/mui.picker.css
  14. 6 0
      css/mui.picker.min.css
  15. 64 0
      css/mui.poppicker.css
  16. 125 0
      css/query_result.css
  17. 90 0
      css/query_where.css
  18. 83 0
      css/sms.css
  19. 96 0
      css/spatial.analysis.css

+ 944 - 0
css/app.css

@@ -0,0 +1,944 @@
+/* 通用样式 */
+
+/* Unable to preventDefault inside passive event listener due to target being treated as passive. See */
+/* 解决控制台以上输出提示 */
+
+* {
+	touch-action: pan-y;
+}
+
+@font-face {
+	font-family: "iconfont";
+	src: url('../fonts/iconfont.ttf');
+}
+
+/* 自定义字体通用样式 */
+.app-icon {
+	font-family: "iconfont", sans-serif !important;
+	font-size: 16px;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.app-icon.mui-active {
+	color: #FF0000;
+}
+
+/* 账号 */
+.app-icon-account:before {
+	content: "\e8eb";
+}
+
+/* 密码 */
+.app-icon-password:before {
+	content: "\e808";
+}
+
+/* IP地址图标 */
+.app-icon-ip::before {
+	content: "\e6b6";
+}
+
+/* COM端口图标 */
+.app-icon-com::before {
+	content: "\e69c";
+}
+
+/* 用户图标 */
+.app-ico-user::before {
+	content: "\e68f";
+}
+
+/* 下一条信息图标 */
+.app-ico-next:before {
+	content: "\e84e";
+}
+
+/* 所属河道图标 */
+.app-icon-sshd:before {
+	content: "\ebfe";
+}
+
+/* 上报类别图标 */
+.app-icon-sslb:before {
+	content: "\ebb8";
+}
+
+/* 日期图标 */
+.app-icon-date:before {
+	content: "\eb9a";
+}
+
+/* 用户图标 */
+.app-icon-member:before {
+	content: "\eb8e";
+}
+
+/* 案件审核图标 */
+.app-icon-verify:before {
+	content: "\eb74";
+}
+
+/* 派发案件图标 */
+.app-icon-assign:before {
+	content: "\eb89";
+}
+
+/* 督办案件图标 */
+.app-icon-supervise:before {
+	content: "\e6be";
+}
+
+/* 督办人员图标 */
+.app-icon-supervise-user:before {
+	content: "\e6c1";
+}
+
+/* 撤派案件图标 */
+.app-icon-undoassign:before {
+	content: "\e7a9";
+}
+
+/* 地图定位图标 */
+.app-icon-location:before {
+	content: "\e7a5";
+}
+
+/* GPS导航图标 */
+.app-icon-navigation:before {
+	content: "\eb8b";
+}
+
+/* 详情图标 */
+.app-icon-info:before {
+	content: "\e7db";
+}
+
+/* 微信图标 */
+.app-icon-weixin:before {
+	content: "\e8e9";
+}
+
+/* 案件处理图标 */
+.app-icon-check:before {
+	content: "\e816";
+}
+
+/* 电话图标 */
+.app-icon-phone:before {
+	content: "\e848";
+}
+
+/* 相机图标 */
+.app-icon-camera:before {
+	content: "\e820";
+}
+
+/* 主页图标-统计 */
+.app-icon-main-count:before {
+	content: "\e6cd";
+}
+
+/* 主页图标-任务 */
+.app-icon-main-task:before {
+	content: "\e616";
+}
+
+/* 主页图标-地图 */
+.app-icon-main-map:before {
+	content: "\e695";
+}
+
+/* 主页图标-通讯录 */
+.app-icon-main-address:before {
+	content: "\e6dd";
+}
+
+/* 主页图标-我的 */
+.app-icon-main-set:before {
+	content: "\e622";
+}
+
+/* 菜单图标-待处理 */
+.app-cion-menu-waitcheck:before {
+	content: "\e6b9";
+}
+
+/* 菜单图标-待复飞 */
+.app-cion-menu-waitrepeat:before {
+	content: "\e6b3";
+}
+
+/* 菜单图标-待审核 */
+.app-cion-menu-waitverify:before {
+	content: "\e6f5";
+}
+
+/* 菜单图标-已结案 */
+.app-cion-menu-close:before {
+	content: "\e6b4";
+}
+
+/* 菜单图标-待派发 */
+.app-cion-menu-assign:before {
+	content: "\e6ba";
+}
+
+/* 菜单图标-撤销派发 */
+.app-cion-menu-undoassign:before {
+	content: "\e6b5";
+}
+
+/* 菜单图标-待督办 */
+.app-cion-menu-wait-supervise:before {
+	content: "\e6be";
+}
+
+/* 菜单图标-已督办 */
+.app-cion-menu-supervise:before {
+	content: "\e6bf";
+}
+
+/* 菜单图标-飞行航线 */
+.app-cion-menu-line:before {
+	content: "\e6b2";
+}
+
+/* 菜单图标-考核排名 */
+.app-cion-menu-khpm:before {
+	content: "\e9ae";
+}
+
+/* 菜单图标-统计分析 */
+.app-cion-menu-tjfx:before {
+	content: "\e6c0";
+}
+
+/* 菜单图标-查询 */
+.app-cion-menu-query:before {
+	content: '\e6ae';
+}
+
+/* 菜单图标-首页 */
+.app-cion-menu-main:before {
+	content: '\e606';
+}
+
+/* 菜单图标-饼图 */
+.app-cion-menu-pie:before {
+	content: '\e6ad';
+}
+
+/* 菜单图标-本地案件 */
+.app-cion-menu-local:before {
+	content: "\e6bf";
+}
+
+/* 案件列表-图标-待处理 */
+.app-icon-caseinfo-waitcheck::before {
+	content: "\e62d";
+}
+
+/* 案件列表-图标-待复飞 */
+.app-icon-caseinfo-waitrepeat::before {
+	content: "\e635";
+}
+
+/* 案件列表-图标-待审核 */
+.app-icon-caseinfo-waitverify::before {
+	content: "\e633";
+}
+
+/* 案件列表-图标-已结案 */
+.app-icon-caseinfo-close::before {
+	content: "\e625";
+}
+
+/* 案件列表-图标-待派发 */
+.app-icon-caseinfo-waitassign::before {
+	content: "\e627";
+}
+
+/* 案件列表-图标-以派发 */
+.app-icon-caseinfo-yesassign::before {
+	content: "\e634";
+}
+
+/* 导航栏按钮 审核 */
+.app-icon-nav-button-verify::before {
+	content: "\e655";
+}
+
+/* 案件审核 审核类型 同意结案 */
+.app-icon-chk-close::before {
+	content: "\e6bb";
+}
+
+/* 案件审核 审核类型 重新处理 */
+.app-icon-chk-recheck::before {
+	content: "\e62e";
+}
+
+/* 案件审核 审核类型 重新复飞 */
+.app-icon-chk-rerepeat::before {
+	content: "\e659";
+}
+
+/* 地图 按钮 测量面积 */
+.app-icon-map-measurearea::before {
+	content: "\e6db";
+}
+
+/* 地图 按钮 测量长度 */
+.app-icon-map-measurelength::before {
+	content: "\e6cf";
+}
+
+/* 地图 按钮 通用占地分析 */
+.app-icon-map-common-analysis:before {
+	content: '\edb5';
+}
+
+/* 地图 按钮 栅格图 */
+.app-icon-map-raster::before {
+	content: "\e729";
+}
+
+/* 地图 按钮 矢量图 */
+.app-icon-map-vector::before {
+	content: "\e626";
+}
+
+/* 地图 按钮 定位 */
+.app-icon-map-location::before {
+	content: "\e6e0";
+}
+
+/* 地图 按钮 初始定位 */
+.app-icon-map-initlocation::before {
+	content: "\e6da";
+}
+
+/* 地图 按钮 图层控制 */
+.app-icon-map-layer::before {
+	content: "\e600";
+}
+
+/* 地图 按钮 坐标查询 */
+.app-icon-map-inputcoord-location::before {
+	content: "\e6dc";
+}
+
+/* 地图 按钮 查询坐标 */
+.app-icon-map-querycoord::before {
+	content: "\e6d9";
+}
+
+/* 地图 按钮 分屏对比 */
+.app-icon-map-screen::before {
+	content: "\e6a0";
+}
+
+/* 地图 按钮 点查询 */
+.app-icon-map-pointquery::before {
+	content: "\e8c7";
+}
+
+/* 地图 按钮 区域查询 */
+.app-icon-map-areaquery::before {
+	content: "\e6f0";
+}
+
+/* 地图 按钮 案件 点查询 */
+.app-icon-map-case-pointquery::before {
+	content: "\e6de";
+}
+
+/* 地图 按钮 案件 区域查询 */
+.app-icon-map-case-areaquery::before {
+	content: "\e6e1";
+}
+
+/* 地图 按钮 点图查询 */
+.app-icon-map-query-point:before {
+	content: '\e6c4';
+}
+
+/* 地图 按钮 区域查询 */
+.app-icon-map-query-polygon:before {
+	content: '\e6c5';
+}
+
+/* 回退一步 */
+.app-icon-map-redo::before {
+	content: "\e6ce";
+}
+
+/* 恢复原状 */
+.app-icon-map-undo::before {
+	content: "\e6cc";
+}
+
+/* 地图 图层 矢量图层 */
+.app-icon-map-layer-vector::before {
+	content: "\e754";
+}
+
+/* 地图 图层 栅格图层 */
+.app-icon-map-layer-raster::before {
+	content: "\e674";
+}
+
+/* 普通图层 */
+.app-icon-map-layer-normal::before {
+	content: "\e640";
+}
+
+/* 地图 按钮 窗口工具 */
+.app-icon-map-window::before {
+	content: "\e6d8";
+}
+
+/* 地图 按钮 清扫工具 */
+.app-icon-map-clean::before {
+	content: "\e69e";
+}
+
+/* 地图 按钮 地类分析 */
+.app-icon-map-land::before {
+	content: "\e6f3"
+}
+
+/* 地图 按钮 地类分析结果展示 */
+.app-icon-map-land-result::before {
+	content: "\ec71";
+}
+
+/* 案件分析 */
+.app-icon-map-case-analysis::before {
+	content: "\e6c3";
+}
+
+/* 图层选择图标 */
+.app-icon-map-layer-select::before {
+	content: "\e6e2";
+}
+
+/* 定位图标 */
+.app-icon-nomarl-location::before {
+	content: "\e636";
+}
+
+/* 上升箭头 */
+.app-icon-arrow-up::before {
+	content: "\e64f";
+}
+
+/* 下降箭头 */
+.app-icon-arrow-down::before {
+	content: "\e652";
+}
+
+.app-icon-arrow-other:before {
+	content: "\e8c0";
+}
+
+/* 通讯录电话图标 */
+.app-icon-address-phone::before {
+	content: "\e68e";
+	color: rgb(255, 255, 255);
+}
+
+/* 通讯录短信图标 */
+.app-icon-address-message::before {
+	content: "\ec3f";
+	color: rgb(255, 255, 255);
+}
+
+/* 设置-编辑个人信息图标 */
+.app-icon-set-edit::before {
+	content: "\e6f4";
+}
+
+/* 设置-版本图标 */
+.app-icon-set-version::before {
+	content: "\eb66";
+}
+
+/* 设置-关于图标 */
+.app-icon-set-about::before {
+	content: "\e6a1";
+}
+
+/* 设置-重登陆图标 */
+.app-icon-set-relogin::before {
+	content: "\e6a2";
+}
+
+/* 设置-快捷键 */
+.app-icon-set-kjkey::before {
+	content: "\e676";
+}
+
+/* 关闭图标 */
+.app-icon-close::before {
+	content: "\e88a";
+}
+
+/* 右向双箭头 */
+.app-icon-arrow-right::before {
+	content: "\e85d";
+}
+
+/* 向下双箭头 */
+.app-icon-arrow-down-copy::before {
+	content: '\ec0d';
+}
+
+/* 查询图标 */
+.app-icon-menu-query::before {
+	content: '\e6ae';
+}
+
+/* 柱状图菜单图标 */
+.app-icon-menu-bar::before {
+	content: '\e6aa';
+}
+
+/* 金额柱状图图标 */
+.app-icon-menu-bar-money::before {
+	content: '\e6ad';
+}
+
+/* 折线图图标 */
+.app-icon-menu-line::before {
+	content: '\e6af';
+}
+
+/* 资源统计图标 */
+.app-icon-menu-resource-count:before {
+	content: '\e8cd';
+}
+
+/* 摄像头图标 */
+.app-icon-menu-monitor:before {
+	content: '\e67b';
+}
+
+/* 地图上展示线图标 */
+.app-icon-map-line::before {
+	content: '\e6b2';
+}
+
+/* 错误图标 */
+.app-icon-error:before {
+	content: '\ec00';
+}
+
+/* 关闭按钮向左箭头 */
+.app-icon-close-left-arrow:before {
+	content: '\e7a9';
+}
+
+/* 详细信息 */
+.app-iocn-details:before {
+	content: '\e6ae';
+}
+
+/* 占压分析图标 */
+.app-icon-accupy-analysis:before {
+	content: '\e63d';
+}
+
+.
+/**
+ * 主页样式
+ */
+
+/* 案件动态 单元格样式 */
+.cr-case-dynamic-cell {
+	padding: 3px 0px 3px 15px;
+}
+
+/* 案件动态 大行样式 */
+.cr-case-dynamic-row-big {
+	display: flex;
+	align-items: center;
+}
+
+/* 案件动态 前置图标样式 */
+.cr-case-dynamic-ico {
+	width: 34px;
+	height: 34px;
+	line-height: 34px;
+	margin-right: 10px;
+	background-color: rgba(255, 255, 255, 0);
+	border-radius: 17px;
+	text-align: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 案件动态 标识样式 */
+.cr-case-dynamic-ico>span {
+	display: inline-block;
+	color: rgb(255, 255, 255);
+	/* background: linear-gradient(to bottom, rgb(86, 113, 235) 50%, rgb(99, 144, 231) 50%);
+	-webkit-background-clip: text;
+	color: transparent; */
+}
+
+/* 案件动态 单元格内行样式 */
+.cr-case-dynamic-row {
+	font-size: 11px;
+	height: 20px !important;
+	line-height: 24px;
+}
+
+/* 案件动态  行内 日期样式 */
+.cr-case-dynamic-row .cr-case-dynamic-date {
+	color: rgb(46, 122, 253) !important;
+	font-size: 13px;
+}
+
+/* 案件动态  行内 标题样式 */
+.cr-case-dynamic-row .cr-case-dynamic-title {
+	font-family: 'TTTGB-Medium' !important;
+	font-size: 15px;
+	color: rgb(223, 141, 49);
+}
+
+/* 案件动态  行内 标题样式 */
+.cr-case-dynamic-row .cr-case-dynamic-key {
+	font-family: 'TTTGB-Medium';
+	font-size: 13px;
+	color: rgb(203, 203, 203);
+}
+
+/* 案件动态  行内 值样式 */
+.cr-case-dynamic-row .cr-case-dynamic-val {
+	color: rgb(125, 201, 236) !important;
+	/* font-weight: bold; */
+	margin-right: 10px;
+	margin-left: 3px;
+	font-family: 'UnidreamLED' !important;
+	font-size: 14px;
+}
+
+/* 案件动态  行内 排名样式 */
+.cr-case-dynamic-row .cr-case-dynamic-ranking {
+	display: inline-block;
+	background-color: rgb(50, 85, 239) !important;
+	width: 16px;
+	height: 16px;
+	line-height: 16px;
+	color: rgb(255, 255, 255) !important;
+	text-align: center;
+	border-radius: 3px;
+}
+
+/**
+ * 激活控件的背景色
+ */
+.cr-active {
+	background-color: rgb(51, 165, 40) !important;
+}
+
+/**
+ * 图表ECharts样式
+ */
+
+/* 图表提示框标题样式 */
+.echarts-tooltip-title {
+	font-family: 'TTTGB-Medium', sans-serif;
+	color: rgb(0, 35, 155);
+}
+
+/* 图表提示框行值样式 */
+.echarts-tooltip-row-value {
+	font-weight: bold;
+	float: right;
+	color: rgb(26, 38, 80);
+}
+
+/* 图表提示框行占比样式 */
+.echarts-tooltip-row-proportion {
+	font-weight: bold;
+	color: rgb(0, 89, 38);
+	font-family: 'UnidreamLED', sans-serif;
+}
+
+/* 通用样式 */
+
+/* html body通用样式 */
+html,
+body {
+	height: 100%;
+	margin: 0px;
+	padding: 0px;
+}
+
+/* body通用背景样式 */
+body {
+	background-color: rgb(53, 72, 116, 1.0) !important;
+}
+
+
+/* 横向分割线样式 */
+.cr-line-h {
+	height: 4px;
+	width: 100%;
+	background-color: rgba(230, 230, 230, 0);
+}
+
+/***+++++++++++++修改MUI样式+++++++++++++***/
+
+/* 此用于非沉浸式导航栏 注意 这很重要 */
+.mui-bar {
+	background: #243f6d !important;
+	height: 44px !important;
+	padding-top: 0px !important;
+	color: rgb(34, 97, 179) !important;
+}
+
+/* 导航栏搜索框的颜色 */
+.mui-bar .mui-search input {
+	border: solid 1px rgba(0, 0, 0, 0.6);
+	border-radius: 3px;
+	color: rgba(0, 0, 0, 1);
+}
+
+
+.mui-bar-nav h1 {
+	color: #fff
+}
+
+/* 紧跟在mui-bar-nav之后的mui-content类 */
+.mui-bar-nav~.mui-content {
+	padding-top: 64px;
+}
+
+.mui-bar-nav~.mui-content .mui-pull-top-pocket {
+	top: 64px;
+}
+
+.mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
+	top: 64px;
+}
+
+.mui-bar-nav~.mui-content .mui-slider.mui-fullscreen {
+	top: 64px;
+}
+
+/* 选择项弹出框整体样式 */
+.mui-poppicker {
+	background-color: rgb(230, 230, 230) !important;
+	border-top-right-radius: 10px !important;
+	border-top-left-radius: 10px !important;
+	border-top: solid 0px rgb(255, 255, 255) !important;
+	box-shadow: none !important;
+}
+
+/* 选择项弹出框确定按钮样式 */
+.mui-poppicker-btn-ok {
+	background-color: rgb(240, 61, 89) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 选择项弹出框取消按钮样式 */
+.mui-poppicker-btn-cancel {
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 选择项弹出框题头样式 */
+.mui-poppicker-header {
+	background-color: rgb(37, 109, 187) !important;
+	border-top-right-radius: 10px !important;
+	border-top-left-radius: 10px !important;
+}
+
+/* 选择项框选中项的颜色 */
+.mui-pciker-list li.highlight {
+	color: rgb(236, 182, 98) !important;
+}
+
+/* 选择项框边框颜色 */
+.mui-pciker-rule-ft {
+	border-top: solid 1px rgba(236, 182, 98, 0.45) !important;
+	border-bottom: solid 1px rgba(236, 182, 98, 0.45) !important;
+}
+
+/* mui按钮点击样式 */
+.mui-btn:active {
+	border: solid 1px rgba(37, 109, 187, 0.8) !important;
+}
+
+/* 行样式 */
+.cr-input-row {
+	display: flex;
+}
+
+/* 行内标签样式 */
+.cr-input-row>label {
+	width: 110px !important;
+}
+
+/* 行内输入框样式 */
+.cr-input-row>input {
+	flex: 1;
+}
+
+
+/* 文字颜色 */
+.f-color {
+	color: rgb(59, 146, 255) !important;
+}
+
+/* 普通案件颜色 */
+.f-color-case-normal {
+	color: rgb(0, 0, 0) !important;
+}
+
+/* 派发中案件颜色 */
+.f-color-case-wait-assign {
+	color: rgb(211, 11, 3) !important;
+}
+
+/* 处理中案件颜色 */
+.f-color-case-wait-check {
+	color: rgb(129, 210, 226) !important;
+}
+
+/* 复飞中案件颜色 */
+.f-color-case-wait-flight {
+	color: rgb(205, 84, 99) !important;
+}
+
+/* 审核中案件颜色 */
+.f-color-case-wait-verify {
+	color: rgb(225, 149, 67) !important;
+}
+
+/* 结案案件颜色 */
+.f-color-case-close {
+	color: rgb(144, 239, 124) !important;
+}
+
+/* 重要标识颜色 */
+.f-important {
+	color: rgb(255, 255, 0);
+	font-weight: bold;
+}
+
+/* 背景色 */
+.f-back-color {
+	background-color: rgba(36, 63, 109, 0.8) !important;
+}
+
+/* 普通标题 */
+.wc-title-normal {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	font-size: 15px;
+	color: rgb(255, 255, 255) !important;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 重要标题 */
+.wc-title-important {
+	color: rgb(11, 102, 255);
+}
+
+/**
+ * 以下是ArcGIS For JS 样式改正
+ */
+
+/* esriView Popup 整体样式 */
+.esri-popup__main-container {
+	background-color: rgba(174, 186, 208, 1.0) !important;
+	width: auto !important;
+	display: block !important;
+}
+
+/* esriView Popup 顶部标题栏包含按钮区域整体样式 */
+.esri-popup__header {
+	background-color: rgb(37, 109, 187) !important;
+}
+
+/* esriView Popup 标题文字样式 */
+.esri-popup__header-title {
+	color: rgb(255, 255, 255) !important;
+}
+
+/* esriView Popup 标题关闭按钮样式 */
+.esri-popup__button {
+	color: rgb(255, 255, 255) !important;
+}
+
+/* esriView Popup 文字内容样式 */
+.esri-popup__content {
+	color: #0000FF;
+	margin: 10px !important;
+	text-align: center;
+}
+
+/* esriView Popup 底部工具栏背景 */
+.esri-popup__footer {
+	/* background-color: red !important; */
+}
+
+/* 底部小三角的样式 */
+.esri-popup__pointer-direction {
+	background-color: rgba(174, 186, 208, 1.0) !important;
+}
+
+/* 通用样式 */
+
+/* flex容器布局竖向 */
+.cr-layout-flex-v {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 顶部时间 */
+.topTime {
+	position: absolute;
+	top: 10px;
+	z-index: 30;
+	left: 10px;
+	color: rgb(255, 255, 255);
+	font-size: 12px;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 顶部时间内元素统一样式 */
+.topTime span {
+	margin-left: 5px;
+}
+
+/* 当前号样式 */
+.topTime span:nth-child(1) {
+	font-size: 20px;
+	font-weight: bold;
+	color: rgb(235, 195, 48);
+}
+
+/* 当前时间样式 */
+.topTime span:last-child {
+	font-size: 20px;
+	font-family: 'UnidreamLED' !important;
+}
+
+/* 奇数行样式 */
+.jt-row-odd-number {
+	background-color: rgb(39, 56, 122) !important;
+}
+
+/* 偶数行样式 */
+.jt-row-even-number {
+	background-color: rgb(49, 72, 157) !important;
+}

+ 1115 - 0
css/app.new.css

@@ -0,0 +1,1115 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年4月27日
+ * 描述:补充样式集合 所有样式均以jt开头
+ */
+
+/* Unable to preventDefault inside passive event listener due to target being treated as passive. See */
+/* 解决控制台以上输出提示 */
+
+* {
+	touch-action: pan-y;
+}
+
+* {
+	margin: 0px;
+	padding: 0px;
+	font-family: 'JtChina', sans-serif;
+}
+
+/* 行样式 */
+.jt-label-block {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgb(255, 255, 255);
+	margin-top: 5px;
+	margin-bottom: 5px;
+	height: 34px;
+	font-size: 14px;
+	font-family: "TTTGB-Medium", sans-serif;
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+	background: -webkit-linear-gradient(right, rgba(35, 42, 151, 0.0), rgba(35, 42, 151, 0.45), rgba(35, 42, 151, 0.0));
+}
+
+/* ----------右侧侧滑窗口样式集合开始---------- */
+
+/* 右侧滑出容器样式 */
+.jt-wrap-right-canvas {
+	background-color: rgb(53, 72, 116) !important;
+	display: flex !important;
+	flex-direction: column;
+	height: 100%;
+}
+
+/* 右侧弹框导航栏样式 */
+.jt-wrap-right-head {
+	height: 40px;
+	line-height: 40px;
+	background-color: rgb(67, 96, 200);
+	font-size: 15px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 右侧弹框导航栏标题样式 */
+.jt-wrap-right-head>span:nth-child(1) {
+	color: rgb(255, 255, 255);
+	flex: 1;
+	text-align: center;
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+	font-size: 15px;
+}
+
+/* 右侧弹框导航栏关闭按钮样式 */
+.jt-wrap-right-head>span:nth-child(2) {
+	color: rgb(255, 255, 255);
+	font-size: 16px;
+	display: flex;
+	width: 40px;
+	height: 40px;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 内容样式 */
+.jt-wrap-right-content {
+	position: relative;
+	flex: 1;
+	margin-bottom: 5px;
+	overflow-y: auto;
+	z-index: 999 !important;
+}
+
+/* -----------右侧侧滑窗口样式结合结束---------- */
+
+/* -----------更改mui样式---------- */
+
+/* 内容背景通用样式 */
+.mui-content {
+	background-color: rgba(53, 72, 116, 1.0);
+}
+
+/* 你迷开关的样式 */
+.mui-switch-mini {
+	width: 44px !important;
+	height: 22px !important;
+	border: 0px solid rgb(255, 0, 0) !important;
+}
+
+/* 迷你开关激活状态背景样式 */
+.mui-switch.mui-active {
+	background-color: rgb(84, 126, 251) !important;
+}
+
+/* 你迷开关激活是小圆的样式 */
+.mui-switch-mini.mui-active .mui-switch-handle {
+	transform: translate(23px, 0px) !important;
+	-webkit-transform: translate(23px, 0px) !important;
+	background-color: rgb(255, 255, 255) !important;
+}
+
+/* 迷你开关关闭状态下小圆的样式 */
+.mui-switch-mini .mui-switch-handle {
+	transform: translate(2px, 0px) !important;
+	-webkit-transform: translate(2px, 0px) !important;
+	width: 18px !important;
+	height: 18px !important;
+	top: 2px !important;
+	background-color: rgb(84, 126, 251) !important;
+}
+
+/* 选择器整体样式 */
+.mui-segmented-control {
+	border: solid 0px rgb(255, 0, 0);
+}
+
+/* 选择器普通状态样式 */
+.mui-segmented-control .mui-control-item {
+	color: rgb(217, 145, 45) !important;
+	box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
+		inset 0px -15px 15px -15px rgb(95, 150, 222);
+	border: solid 0px rgb(255, 0, 0);
+
+}
+
+/* 选择器选中状态样式 */
+.mui-segmented-control .mui-control-item.mui-active {
+	color: rgb(255, 255, 255) !important;
+	background-color: rgb(49, 72, 157) !important;
+	box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
+		inset 0px -15px 15px -15px rgb(95, 150, 222);
+	border: solid 0px rgb(255, 0, 0);
+}
+
+/* 滑动窗口样式 */
+.mui-off-canvas-left,
+.mui-off-canvas-right {
+	background-color: rgb(26, 38, 80) !important;
+	width: 50%;
+}
+
+/* 滑动窗口主要内容背景 */
+.jt-wrap-right-content,
+.mui-inner-wrap {
+	background-color: rgb(53, 72, 116, 1.0) !important;
+	height: 100%;
+}
+
+/* 页面宽度小于600 */
+@media screen and (max-width: 600px) {
+
+	.mui-off-canvas-left,
+	.mui-off-canvas-right {
+		width: 90%;
+	}
+}
+
+/* 修改左右滑出窗口的宽度 */
+/* .mui-off-canvas-wrap.mui-right .mui-inner-wrap {
+	-webkit-transform: translate3d(50%, 0, 0);
+	transform: translate3d(50%, 0, 0);
+} */
+
+/* .mui-popup {
+	background-color: transparent !important;
+}
+
+.mui-popup-in {
+	background-color: transparent !important;
+}
+
+.mui-popup-buttons {
+	background-color: rgb(255, 0, 0) !important;
+}
+
+.mui-popup-inner {
+	background-color: rgba(0, 0, 0, 0.25);
+	color: rgb(255, 255, 255) !important;
+} */
+
+/* slider容器样式 */
+.mui-slider {
+	height: 100%;
+}
+
+/* slider容器内项目样式 */
+.mui-slider-group {
+	height: calc(100% - 44px);
+}
+
+/* 展开数据集样式 */
+.mui-card {
+	width: 100%;
+	margin: 0px;
+	height: auto;
+	background-color: rgba(34, 50, 106, 1) !important;
+	border-radius: 0px !important;
+}
+
+/* 展开数据集中表格样式 */
+.mui-card .mui-table-view {
+	position: relative !important;
+	margin: 0px !important;
+	border-radius: 0px !important;
+	background-color: rgba(34, 50, 106, 0) !important;
+}
+
+/* 展开数据集表格单元格样式 */
+.mui-card .mui-table-view li {
+	border-radius: 0px !important;
+	color: rgb(225, 150, 44);
+}
+
+.mui-card .mui-table-view li:active {
+	background-color: black;
+}
+
+.mui-card .mui-table-view>li>a {
+	height: 44px !important;
+}
+
+/* 干掉行的边框线 */
+.mui-card .mui-table-view-cell::after {
+	height: 0px !important;
+}
+
+/* 折叠面板挂接内容样式 */
+.mui-collapse .mui-collapse-content {
+	padding: 0px !important;
+	background-color: rgb(34, 50, 106, 1) !important;
+	border-top: solid 1px rgba(133, 215, 253, 0.3);
+	border-bottom: solid 1px rgba(133, 215, 253, 0.3);
+}
+
+/* 展开数据集-表格-单元格-a标签样式 */
+.mui-card .mui-table-view li a {
+	text-align: left;
+}
+
+/* 展开数据集-表格-单元格-a标签内的span标签样式 */
+.mui-card .mui-table-view li a span {
+	display: inline-block;
+	text-align: left;
+	width: calc(100% - 20px);
+	/* 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格 */
+	white-space: nowrap;
+	/* 隐藏超出单元格的部分 */
+	overflow: hidden;
+	/* 将被隐藏的那部分用省略号代替 */
+	text-overflow: ellipsis;
+}
+
+/* 修复点击激活样式异常 */
+.mui-card .mui-table-view *:active {
+	background-color: none !important;
+	border-radius: 0px !important;
+}
+
+/* 修复点击激活样式异常 */
+.mui-popover .mui-table-view .mui-table-view-cell:first-child,
+.mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {
+	border-radius: 0px !important;
+}
+
+/* 修复点击激活样式异常 */
+.mui-popover .mui-table-view .mui-table-view-cell:last-child,
+.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {
+	border-radius: 0px !important;
+}
+
+/* 提示文字样式 */
+.mui-input-row input::placeholder {
+	font-size: 13px;
+}
+
+/* 修正清除图标样式 */
+.mui-icon {
+	font-size: 14px !important;
+	height: 100% !important;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: 0px !important;
+}
+
+/* 底部弹出框的标题样式 */
+.mui-popover .mui-bar {
+	height: 100%;
+	line-height: 100%;
+	background-color: rgb(37, 109, 187) !important;
+	font-size: 14px;
+	font-weight: bold;
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+	text-align: center;
+	color: rgb(255, 255, 255) !important;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding: 0px 10px;
+}
+
+/* 弹框头样式 */
+.mui-popover header {
+	position: relative;
+}
+
+/* 弹框中滚动条样式 */
+.mui-popover .mui-scroll-wrapper {
+	position: relative;
+	height: 100%;
+	margin: 0px !important;
+	border-radius: 0px !important;
+	/* background-color: rgba(34, 50, 106, 1) !important; */
+}
+
+
+/* 搜索框提示内容容器样式 */
+.mui-search .mui-placeholder {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	height: auto;
+	color: rgba(255, 255, 255, 0.65) !important;
+	font-size: 12px;
+}
+
+/* 搜索框图标与内容间隔 */
+.mui-search .mui-placeholder>span:nth-child(2) {
+	margin-left: 10px;
+}
+
+/* 日期选择框整体样式 */
+.mui-dtpicker {
+	background-color: rgba(255, 255, 255, 0) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 日期选择框头确定按钮样式 */
+.mui-dtpicker .mui-dtpicker-header .mui-btn-blue {
+	background-color: rgb(240, 61, 89) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 日期选择框头样式 */
+.mui-dtpicker-header {
+	background-color: antiquewhite;
+	background-color: rgb(37, 109, 187) !important;
+	font-size: 14px;
+	font-weight: bold;
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+}
+
+/* 对话框内容样式 */
+.mui-popup-inner {
+	background-color: rgba(45, 65, 134, 0.9) !important;
+	color: rgb(255, 255, 255) !important;
+}
+
+/* 默认按钮样式 */
+.mui-popup-button-bold {
+	color: rgb(174, 196, 144) !important;
+}
+
+/* 对话框按钮样式 */
+.mui-popup-button {
+	position: relative;
+	background-color: rgba(32, 46, 96, 0.8) !important;
+	color: rgb(236, 182, 98);
+}
+
+.mui-popup-button:after {
+	background-color: rgba(255, 255, 255, 0.2) !important;
+	width: 2px;
+}
+
+/* 对话框遮罩层颜色 */
+.mui-popup-backdrop {
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 弹框背景色样式 */
+.mui-poppicker .mui-poppicker-body {
+	border: solid 0px rgba(255, 255, 255, 0);
+}
+
+/* 弹框内部子控件背景色样式 */
+.mui-poppicker-body .mui-picker {
+	background-color: rgba(36, 63, 109, 1) !important;
+}
+
+/* -----------更改mui样式---------- */
+
+/* 字体样式 需要进入font-jt.css*/
+
+/* 中英文字体 */
+.jt-font-china {
+	font-family: 'JtChina' !important;
+}
+
+/* 数字字体 */
+.jt-font-number {
+	font-family: 'JtNumber', sans-serif !important;
+}
+
+/* 字体颜色 */
+.jt-font-color {
+	color: rgb(84, 126, 251) !important;
+}
+
+/* 容器样式 */
+iframe {
+	height: 100%;
+	width: 100%;
+	border: solid 0px rgba(255, 255, 255, 0);
+}
+
+iframe:focus {
+	outline: none;
+}
+
+/* 分组菜单样式 */
+.jt-menu-group {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	/* background-color: antiquewhite; */
+}
+
+/* 分组菜单行样式 */
+.jt-menu-group .jt-menu-row {
+	height: 40px;
+	line-height: 40px;
+	position: relative;
+	width: 100%;
+	/* background-color: rgb(32, 46, 96); */
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+/* 分组菜单行底部分隔线 */
+.jt-menu-group .jt-menu-row::after {
+	position: absolute;
+	content: '';
+	height: 1px;
+	background-color: rgb(79, 105, 166);
+	top: 40px;
+	left: 32px;
+	width: 100%;
+	z-index: 10;
+}
+
+/* 分组菜单行右侧箭头 */
+.jt-menu-group .jt-menu-row::before {
+	font-family: 'iconfont', sans-serif !important;
+	position: absolute;
+	content: '\e856';
+	height: 40px;
+	width: 20px;
+	color: rgb(150, 201, 239);
+	right: 15px;
+	padding: 0px;
+	z-index: 10;
+}
+
+/* 分组菜单行激活 */
+.jt-menu-group .jt-menu-row:active {
+	background-color: rgb(32, 46, 120);
+}
+
+/* 分组菜单前置图标 */
+.jt-menu-group .jt-menu-row>span:nth-child(1) {
+	color: rgb(150, 201, 239);
+	margin-left: 8px;
+	font-size: 18px !important;
+}
+
+/* 分组菜单前置图标 */
+.jt-menu-group .jt-menu-row>img {
+	width: 20px;
+	height: 20px;
+	margin-left: 8px;
+}
+
+/* 分组菜单标题 */
+.jt-menu-group .jt-menu-row>span:nth-child(2) {
+	color: rgb(255, 255, 255);
+	margin-left: 8px;
+	font-size: 14px !important;
+}
+
+/* 隐藏 */
+.jt-hide,
+.jt-ld-hide,
+.jt-zf-hide,
+.jt-normal-hide,
+.jt-zd-hide,
+.jt-yj-hide {
+	display: none;
+}
+
+/* 显示 */
+.jt-show {
+	visibility: visible;
+}
+
+/* 加载更多按钮样式 */
+.jt-btn-load {
+	height: 40px !important;
+	width: calc(100% - 10px);
+	font-size: 15px !important;
+	background-color: rgba(218, 120, 74, 1.0) !important;
+	border: solid 0px rgb(255, 0, 0) !important;
+	color: rgb(255, 255, 255);
+	margin: 5px !important;
+	padding: 0px !important;
+}
+
+/* 图层提示信息样式 */
+.jt-font-layer-hint {
+	color: rgb(32, 46, 96) !important;
+	font-weight: bold;
+}
+
+/* +++++++++++图斑展示样式集+++++++++++ */
+/* 数据行样式 */
+.jt-feature-data-row {
+	position: relative;
+	width: 100%;
+	height: 36px;
+	line-height: 36px;
+	padding: 0px 15px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	font-size: 13px;
+}
+
+/* 数据行边框分隔线 */
+.jt-feature-data-row::after {
+	content: '';
+	position: absolute;
+	right: 10px;
+	left: 30px;
+	bottom: 0px;
+	height: 1px;
+	background-color: rgba(133, 215, 253, 0.3);
+}
+
+/* 数据行边框分隔线 去掉最后一个 */
+.jt-feature-data-row:last-child::after {
+	height: 1px;
+	right: 0px;
+	left: 0px;
+}
+
+/* 数据行序号样式 */
+.jt-feature-data-row>span:nth-child(1) {
+	display: inline-block;
+	height: 22px;
+	width: 22px;
+	line-height: 22px;
+	font-size: 12px;
+	border: solid 1px rgb(230, 230, 230);
+	border-radius: 20px;
+	color: rgb(146, 224, 212);
+	font-weight: bold;
+	background-color: rgba(255, 255, 255, 0);
+	text-align: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+	margin-right: 5px;
+}
+
+/* 数据行内容样式 */
+.jt-feature-data-row>span:nth-child(2) {
+	color: rgb(230, 230, 230);
+	flex: 1;
+
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* 数据行面积样式 */
+.jt-feature-data-row>span:nth-child(3) {
+	color: rgb(255, 255, 0);
+	/* flex: 1; */
+	width: 80px;
+	text-align: center;
+}
+
+/* 数据行定位按钮样式 */
+.jt-feature-data-row>button {
+	width: 32px;
+	height: 32px;
+	background-color: rgba(255, 255, 255, 0);
+	padding: 0px;
+	border: solid 0px rgba(255, 255, 255, 0);
+	color: rgb(91, 152, 76);
+	font-size: 22px !important;
+}
+
+/* +++++++++++多图层选择样式集合+++++++++++++++++ */
+/* 多图层选择-容器样式 */
+.jt-layer-select-content {
+	display: flex;
+	flex-direction: column;
+}
+
+/* 多图层选择-内容容器-子内容通用样式 */
+.jt-layer-select-content * {
+	margin-left: 0px;
+}
+
+/* 多图层选择-子内容容器-按钮样式 */
+.jt-layer-select-content>button {
+	position: relative;
+	background-color: rgba(255, 255, 255, 0);
+	border: solid 0px rgba(255, 255, 255, 0);
+	color: rgba(255, 255, 255, 1.0) !important;
+	text-align: left;
+}
+
+/* 多图层选择-按钮-内部图标样式 */
+.jt-layer-select-content>button>span {
+	background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+	margin-right: 5px;
+}
+
+/* 多图层选择-子内容容器-按钮之间分隔线样式 */
+.jt-layer-select-content>button::after {
+	content: '';
+	left: 25px;
+	right: 10px;
+	bottom: 0px;
+	position: absolute;
+	height: 1px;
+	background-color: rgba(133, 215, 253, 0.35);
+	background-color: rgba(255, 255, 255, 0.35);
+	z-index: 999;
+}
+
+/* 多图层选择按钮 */
+.jt-layer-select-btn {
+	position: absolute;
+	top: 10px;
+	right: 20px;
+	height: calc(100% - 20px);
+	width: 22px;
+	z-index: 999;
+	background-color: transparent;
+	border: solid 1px rgb(203, 203, 203);
+	padding: 0px !important;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: rgb(255, 255, 255);
+
+}
+
+/* 多图层选择按钮内图标样式 */
+.jt-layer-select-btn>span {
+	background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+	font-size: 15px;
+}
+
+/* +++++++++++++弹框样式++++++++++++++ */
+
+/* 弹框样式 */
+.jt-popover {
+	background-color: rgba(34, 50, 106, 1) !important;
+	border-radius: 10px !important;
+}
+
+/* 弹框箭头样式 */
+.jt-popover .mui-popover-arrow:after {
+	background-color: rgba(34, 50, 106, 1) !important;
+}
+
+/* 弹框中滚动容器样式 */
+.jt-popover .mui-scroll-wrapper {
+	position: relative;
+	height: 100%;
+	margin: 0px !important;
+	border-radius: 0px !important;
+}
+
+/* 弹框中滚动容器样式 清除背景 */
+.jt-popover .mui-scroll-wrapper .mui-scroll {
+	background-color: rgba(255, 255, 255, 0) !important;
+}
+
+/* +++++++定位数据行样式++++++++ */
+
+/* 数据行容器样式 */
+.jt-data-panel {
+	display: flex;
+	flex-direction: column;
+	font-size: 13px;
+	color: rgb(255, 255, 255);
+	background-color: rgba(34, 50, 106, 1) !important;
+}
+
+/* 数据行样式 */
+.jt-data-row {
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+/* 弹框标题样式 */
+.jt-popover-title {
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	color: rgb(236, 182, 98) !important;
+	flex: 1;
+	padding: 0px 8px;
+}
+
+/* +++++++++++图表统计相关页面样式++++++++++++ */
+
+/* 统计图表容器样式 */
+.jt-count-echarts-panel {
+	height: auto;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 统计图表标题样式 */
+.jt-count-echarts-panel .jt-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgb(133, 215, 253);
+	margin-top: 10px;
+	margin-bottom: 10px;
+	height: 34px;
+	font-size: 14px;
+	font-family: "TTTGB-Medium", sans-serif;
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+	background: -webkit-linear-gradient(right, rgba(35, 42, 151, 0.0), rgba(35, 42, 151, 0.45), rgba(35, 42, 151, 0.0));
+}
+
+/* 标题选择器样式 */
+.jt-count-echarts-panel .jt-title .jt-select {
+	background-color: rgba(255, 255, 255, 0);
+	border: 0px solid rgb(255, 255, 255);
+	color: rgb(230, 230, 230);
+}
+
+/* 标题选择器点击样式 */
+.jt-count-echarts-panel .jt-title .jt-select:active {
+	color: rgb(255, 0, 0);
+}
+
+/* 统计图表内容样式 */
+.jt-count-echarts-panel .jt-content {
+	width: 100%;
+	aspect-ratio: 4/3;
+}
+
+/* +++++++++++++++++++++左侧弹框样式+++++++++++++++++++++++++ */
+/* 左侧弹框容器样式 */
+.jt-popover-left {
+	display: flex;
+	position: absolute;
+	top: 50px;
+	right: 100%;
+	/* left: 0px; */
+	bottom: 50px;
+	width: 50%;
+	background-color: rgba(45, 65, 134, 1.0) !important;
+	z-index: 999;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	overflow: hidden;
+	flex-direction: column;
+}
+
+.jt-popover-left .mui-scroll-wrapper {
+	position: relative;
+	flex: 1;
+	/* background-color: antiquewhite; */
+}
+
+/* 左侧弹框顶部标题容器样式 */
+.jt-popover-left .mui-bar {
+	position: relative;
+	background-color: rgb(32, 46, 96) !important;
+	width: 100% !important;
+	color: white !important;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 30px !important;
+	line-height: 30px !important;
+}
+
+/* 左侧弹框顶部标题样式 */
+.jt-popover-left .mui-bar .jt-title {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 14px;
+}
+
+/* 左侧弹出框顶部关闭按钮样式 */
+.jt-popover-left .mui-bar .jt-icon {
+	font-weight: bold;
+	font-size: 20px;
+	background: linear-gradient(to right, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+/* 通用占地分析样式 */
+/* 通用占地分析 容器 */
+.jt-csa-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+/* 通用占地分析 左侧容器 */
+.jt-csa-root .jt-csa-let {
+	width: 120px;
+	height: 100%;
+}
+
+/* 通用占地分析 右侧容器 */
+.jt-csa-root .jt-csa-right {
+	height: 100%;
+	flex: 1;
+}
+
+/* 通用占地分析 左右容器滚动容器 */
+.jt-csa-root .jt-csa-let .mui-scroll-wrapper,
+.jt-csa-root .jt-csa-right .mui-scroll-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+/* 通用占地分析 配置项和数据项的数据行 */
+.jt-csa-config-item-row,
+.jt-csa-data-item-row {
+	height: 44px;
+	color: rgba(255, 255, 255, 1);
+	font-size: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 通用占地分析 配置项 */
+.jt-csa-config-item-row {
+	margin-right: 5px;
+	padding: 0px 5px;
+}
+
+/* 通用占地分析 配置项行内容 */
+.jt-csa-config-item-row>span {
+	font-family: 'TTTGB-Medium', sans-serif !important;
+	font-size: 14px;
+}
+
+/* 通用占地分析 数据项容器 */
+.jt-csa-data-panel {
+	display: flex;
+	flex-direction: column;
+}
+
+/* 通用占地分析 数据行 */
+.jt-csa-data-item-row {
+	padding: 0px 5px;
+	justify-content: left;
+	width: 100%;
+}
+
+/* 通用占地分析 数据行数字图标 */
+.jt-csa-data-item-row .jt-number-icon {
+	display: flex;
+	height: 24px !important;
+	width: 24px !important;
+	font-size: 12px;
+	border: solid 1px rgb(230, 230, 230);
+	border-radius: 20px;
+	color: rgb(146, 224, 212);
+	font-weight: bold;
+	background-color: rgba(255, 255, 255, 0);
+	justify-content: center;
+	align-items: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 通用占压分析 内容样式 */
+.jt-csa-data-item-row .jt-content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	margin-left: 5px;
+	flex: 1;
+	justify-content: center;
+}
+
+/* 通用占地分析 数据项内容及面积样式 */
+.jt-csa-data-item-row .jt-content .jt-title,
+.jt-csa-data-item-row .jt-content .jt-area {
+	text-align: left;
+	width: 100%;
+}
+
+/* 通用占地分析 数据项内容样式 */
+.jt-csa-data-item-row .jt-content .jt-title {
+	color: rgb(230, 230, 230);
+	font-size: 14px;
+}
+
+/* 通用占地分析 数据项面积样式 */
+.jt-csa-data-item-row .jt-content .jt-area {
+	color: rgb(236, 182, 98);
+	font-size: 12px;
+}
+
+/* 数据行按钮 */
+.jt-csa-data-item-row .jt-button {
+	width: 32px;
+	height: 32px;
+	background-color: rgba(255, 255, 255, 0);
+	padding: 0px;
+	border: solid 0px rgba(255, 255, 255, 0);
+	color: rgb(91, 152, 76);
+	font-size: 22px !important;
+}
+
+/* 带统计按钮的bar 容器样式 */
+.mui-bar .jt-cnt-bar {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+/* 带统计按钮的bar 标题样式 */
+.mui-bar .jt-cnt-bar .jt-cnt-bar-title {
+	flex: 1;
+}
+
+/* 带统计按钮的bar 统计按钮样式 */
+.mui-bar .jt-cnt-bar .jt-cnt-bar-button {
+	height: 26px;
+	background-color: rgba(255, 255, 255, 0);
+	padding: 0px 10px;
+	border: solid 1px rgba(236, 182, 98, 0.8);
+	color: rgb(255, 255, 255);
+	font-size: 14px !important;
+	font-weight: bold;
+}
+
+/* 带统计按钮的bar 统计按钮图标样式 */
+.mui-bar .jt-cnt-bar .jt-cnt-bar-button::before {
+	margin-right: 5px;
+	color: rgb(236, 182, 98);
+}
+
+/* 带统计按钮的bar 统计按钮点击样式 */
+.mui-bar .jt-cnt-bar .jt-cnt-bar-button:active {
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* 文本阴影 */
+.jt-text-shadow {
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+}
+
+/* 背景阴影 */
+.jt-back-shadow {
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px !important;
+}
+
+/* 改造等待框 */
+.jt-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 改造等待框文字 */
+.jt-loading .jt-label {
+	font-size: 14px;
+	margin-left: 5px;
+}
+
+/* 长度超宽度自动... */
+.jt-nowrap {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* 自动裁切对象点击样式 */
+.jt-nowrap:active {
+	color: rgb(255, 255, 0);
+	font-weight: bold;
+	font-size: 14px;
+}
+
+/* 指示器 */
+.jt-indicator {
+	position: relative;
+}
+
+/* 指示器激活状态 */
+.jt-indicator-active::after {
+	font-family: 'iconfont', sans-serif !important;
+	position: absolute;
+	content: '\e856';
+	height: 44px;
+	width: 20px;
+	color: rgb(150, 201, 239);
+	right: 0px;
+	padding: 0px;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+}
+
+/* 以下是地图定位嵌入样式 */
+
+/* 嵌入地图的全局容器样式 */
+.jt-normal-main {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+/* 嵌入地图子容器样式 */
+.jt-normal-main div {
+	flex: 1;
+}
+
+/* 嵌入地图子容器第一容器滚动容器样式 */
+.jt-normal-main .mui-scroll-wrapper {
+	position: relative;
+	height: 100%;
+}
+
+/* 嵌入地图容器中包含嵌入地图子容器样式 */
+.jt-map-location-panel {
+	display: flex;
+	position: absolute;
+	left: -3000px;
+	flex-direction: column;
+	width: 100%;
+	flex: 1;
+}
+
+/* 嵌入地图容器中标题头样式 */
+.jt-map-location-panel .jt-bar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: rgb(236, 182, 98) !important;
+	font-size: 14px;
+	position: relative !important;
+	font-weight: bold;
+}
+
+/* 嵌入地图容器中地图标题头关闭按钮样式 */
+.jt-map-location-panel .jt-bar:before {
+	font-family: 'iconfont', sans-serif !important;
+	position: absolute;
+	content: '\e614';
+	height: 44px;
+	line-height: 44px;
+	width: 20px;
+	right: 15px;
+	padding: 0px;
+	z-index: 10;
+	color: rgb(236, 182, 98) !important;
+	font-weight: bold;
+	font-size: 18px;
+}

+ 340 - 0
css/case.css

@@ -0,0 +1,340 @@
+/*************和案件有关的样式集*********************/
+
+/* 按钮样式 */
+.wc-btn {
+	height: 40px;
+	padding: 0px;
+	font-size: 16px;
+	margin: 5px;
+	width: calc(100% - 10px);
+}
+
+/* 一条案件数据 */
+.wc-row {
+	width: 100%;
+	background-color: rgba(255, 255, 255, 0);
+}
+
+/* 案件下部主体内容样式 */
+.wc-row .jt-main-content {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+
+/* 一条案件的标题行背景 */
+.wc-row-title-content {
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+	background-color: rgba(54, 81, 179, 1.0);
+	border-radius: 3px 3px 0px 0px;
+}
+
+/* 导航按钮背景 */
+.wc-btn-nav {
+	background-color: rgb(115, 140, 238) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 详情按钮背景 */
+.wc-btn-info {
+	background-color: rgb(49, 83, 242) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 定位按钮背景 */
+.wc-btn-location {
+	background-color: rgb(115, 140, 238) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 查询按钮背景 */
+.wc-btn-query {
+	background-color: rgb(115, 140, 238) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 地图页面查询按钮样式 */
+.wc-btn-map-query {
+	width: 80% !important;
+}
+
+/* 标题行的图标样式 */
+.wc-ico {
+	width: 30px;
+	height: 30px;
+	border-radius: 15px;
+	color: #765075;
+	font-weight: bold;
+	line-height: 30px;
+	position: relative;
+	top: calc(50% - 15px);
+	left: 5px;
+	float: left;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* background-color: #009688; */
+}
+
+/* 案件图标内图片的样式 */
+.wc-ico>img {
+	width: 24px;
+	height: 24px;
+}
+
+/* 案件字体图标样式 */
+.wc-ico span {
+	font-size: 24px;
+	color: #0062CC;
+	margin-left: 3px;
+	margin-top: 3px;
+}
+
+/* 标题行的案件名称样式 */
+.wc-title {
+	float: left;
+	font-size: 16px;
+	font-weight: bold;
+	position: relative;
+	left: 5px;
+	text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255);
+}
+
+/* 案件状态上标样式 */
+.wc-title>sup {
+	color: rgb(115, 140, 238);
+}
+
+/* 标题行的行政区标识样式 */
+.wc-xzq {
+	float: right;
+	height: 40px;
+	line-height: 40px;
+	position: relative;
+	right: 10px;
+	color: rgb(255, 255, 255);
+}
+
+/* 标题行行政区的所属乡镇样式 */
+.wc-xzq-ssxz {
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	font-weight: bold;
+	text-align: center;
+}
+
+/* 标题行的行政区的所属村庄样式 */
+.wc-xzq-sscz {
+	font-size: 10px;
+	font-weight: normal;
+}
+
+/* 案件中按钮行的样式 */
+.wc-btn-content {
+	width: 100%;
+	/* flex: 0 !important; */
+	/* padding-bottom: 30px; */
+	height: 34px;
+	line-height: 34px;
+	/* height: 100%; */
+	/* bottom: 0px; */
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	background-color: rgba(54, 81, 179, 0.0);
+}
+
+.wc-btn-content>*:last-child {
+	margin-bottom: 5px;
+}
+
+/* 案件中按钮的样式 目前按照4个案件的布局设计 */
+.wc-btn-child {
+	position: relative;
+	/* flex: 1; */
+	border-radius: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+	height: 30px !important;
+	border: solid 0px rgb(255, 0, 0);
+	/* background-color: rgb(115, 140, 0) !important; */
+	margin-top: 5px;
+}
+
+/* 主要内容背景样式 */
+.wc-main-content {
+	padding: 5px;
+	flex: 1;
+}
+
+/* 主要内容-人员样式 */
+.wc-main-content h4 {
+	font-size: 14px;
+	padding: 3px 0px 0px 0px;
+	font-weight: bold;
+	color: #32373b;
+}
+
+/* 标签内的图标样式 */
+.wc-main-content h4 span {
+	font-size: 14px;
+	padding: 3px 0px 0px 0px;
+	font-weight: bold;
+	color: #32373b;
+}
+
+/* 主要内容-日期样式 */
+.wc-main-content h5 {
+	font-size: 16px;
+	padding: 3px 0px 0px 0px;
+	font-weight: bold;
+	color: #32373b;
+}
+
+/* 主要内容-明细样式 */
+.wc-main-content p {
+	font-size: 13px;
+	padding: 3px 0px 0px 0px;
+	font-weight: bold;
+	color: rgb(206, 177, 79);
+}
+
+/* 标签前置图标样式 */
+.wc-span {
+	font-size: 12px;
+	font-weight: bold;
+	font-family: "microsoft yahei";
+}
+
+/* 标签文字样式 */
+.wc-span-icon {
+	font-size: 12px;
+	font-family: "microsoft yahei";
+}
+
+/* 标签行样式 */
+.wc-div-row {
+	height: 24px;
+	width: 100%;
+	position: relative;
+	color: rgb(255, 255, 255);
+}
+
+/* 案件容器的样式*/
+.wc-li {
+	background-color: rgba(34, 50, 106, 1.0);
+	padding: 0px 0px 5px 0px;
+	margin: 0px 0px 10px 0px;
+	border-radius: 5px;
+}
+
+/* 地图案件容器样式 */
+.wc-li-map {
+	margin: 0px 0px 0px 0px;
+	padding: 0px;
+	border-radius: 0px;
+	height: calc(100%);
+}
+
+/* 地图案件案件标题容器样式 */
+.wc-li-map .wc-row-title-content {
+	background-color: rgba(255, 255, 0, 0);
+}
+
+/* 地图案件行样式 */
+.wc-li-map-row {
+	display: flex;
+	flex-direction: row;
+	background-color: rgba(36, 63, 109, 1);
+	padding: 5px;
+	border-radius: 5px;
+	height: 100%;
+}
+
+
+/* 地图案件行内容列样式 */
+.wc-map-column-content {
+	width: calc(100% - 90px);
+}
+
+/* 地图案件行按钮列样式 */
+.wc-map-column-button {
+	width: 90px;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 地图案件按钮列按钮样式 */
+.wc-map-column-button .wc-btn-child {
+	height: 40px !important;
+	margin-bottom: 5px;
+	flex: 0;
+}
+
+/* .wc-li-map .wc-row{
+	display: flex;
+	flex-direction: column;
+}
+
+.wc-li-map .wc-row .wc-main-content{
+	display: block;
+	background-color: #009E94;
+	width: 100%;
+	text-align: left;
+	height: 110px;
+} */
+
+/* 案件页面中内容容器样式 */
+.mui-content {
+	padding-top: 44px !important;
+	background-color: rgb(26, 38, 80) !important;
+}
+
+/* 案件页面滚动容器样式 */
+.mui-content .mui-scroll {
+	background-color: rgb(26, 38, 80) !important;
+}
+
+/* 案件列表容器样式 */
+.mui-content .mui-scroll .mui-table-view {
+	margin: 5px !important;
+	background-color: rgb(26, 38, 80) !important;
+}
+
+/* 查询框背景色 */
+.mui-bar {
+	background-color: rgb(36, 63, 109) !important;
+}
+
+.mui-bar .mui-search input {
+	background-color: rgba(174, 186, 208, 0.85) !important;
+	border: solid 1px rgba(170, 176, 198, 0.85) !important;
+	color: rgb(33, 47, 100) !important;
+	font-size: 13px !important;
+	border-radius: 22px !important;
+}
+
+/* 输入框提示文字颜色 */
+.mui-search .mui-placeholder {
+	color: rgba(255, 255, 255, 0.65) !important;
+	font-size: 12px;
+}
+
+/* 去掉表格后置边框 */
+.mui-table-view::after {
+	height: 0px;
+}
+
+/* 去掉表格前置边框 */
+.mui-table-view:before {
+	height: 0px;
+}
+
+/* 去掉导航栏底部边框 */
+.mui-bar-nav {
+	-webkit-box-shadow: 0 0px 0px #ccc;
+}

+ 245 - 0
css/case.info.css

@@ -0,0 +1,245 @@
+/* ul li 的通用样式 */
+ul,
+li {
+	margin: 0;
+	padding: 0;
+}
+
+/* 时间轴线 整体 */
+.layui-timeline {
+	padding-left: 5px;
+}
+
+/* 时间轴线 子项 */
+.layui-timeline-item {
+	position: relative;
+	padding-bottom: 20px;
+}
+
+/* 时间轴展示块标题样式 */
+.layui-timeline-title {
+	color: rgb(255, 255, 255);
+}
+
+li {
+	list-style: none;
+}
+
+/* 时间轴子项 第一个样式 */
+.layui-timeline-item:first-child::before {
+	display: block;
+}
+
+/* 时间轴子项 最后一项样式 */
+.layui-timeline-item:last-child::before {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 0;
+	z-index: 0;
+	width: 0;
+	height: 100%;
+}
+
+.layui-timeline-item::before {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 0;
+	z-index: 0;
+	width: 1px;
+	height: 100%;
+}
+
+.layui-timeline-item::before,
+hr {
+	background-color: #FF00FF;
+}
+
+/* 时间轴左侧图标样式 外框*/
+.layui-timeline-axis {
+	position: absolute;
+	left: -7px;
+	top: -7px;
+	z-index: 10;
+	width: 24px;
+	height: 24px;
+	line-height: 24px;
+	color: #0062CC;
+	border-radius: 50%;
+	text-align: center;
+	cursor: pointer;
+	background-color: rgba(255, 255, 255, 1.0);
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 展示块样式 */
+.mui-table-view {
+	background-color: rgb(203, 203, 203) !important;
+	border-radius: 5px;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 去除展示块底部边框 */
+.mui-table-view::after {
+	height: 0px;
+}
+
+/* 去掉展示块顶部边框 */
+.mui-table-view::before {
+	height: 0px;
+}
+
+/* 分组展示样式 */
+.mui-input-group {
+	background-color: rgb(203, 203, 203) !important;
+	border-radius: 5px;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 去除分组展示底部边框 */
+.mui-input-group::after {
+	height: 0px;
+}
+
+/* 去除分组展示顶部边框 */
+.mui-input-group::before {
+	height: 0px;
+}
+
+/* 分组行分隔线样式 */
+.mui-input-group .mui-input-row::after {
+	background-color: rgb(255, 255, 255);
+}
+
+/* 分组行分隔线样式 去掉最有一行的分隔线*/
+.mui-input-group .mui-input-row:last-child::after {
+	height: 0px;
+}
+
+/* 修正图标按钮样式 */
+.mui-icon {
+	font-family: 'Muiicons' !important;
+}
+
+/* 时间轴左侧图标 内部样式 */
+.layui-icon {
+	font-family: layui-icon !important;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: bold;
+}
+
+/* 时间轴内容样式 */
+.layui-timeline-content {
+	padding-left: 20px;
+}
+
+/* 时间轴日期格式 */
+.layui-timeline-title {
+	position: relative;
+	margin-bottom: 5px;
+}
+
+/* 标题样式 */
+h3 {
+	font-size: 14px;
+	color: #000000;
+	padding-top: 0px;
+}
+
+/* 案件关联人员样式 */
+.wc-member {
+	font-size: 14px;
+	color: #000000;
+	font-weight: normal;
+	margin-bottom: 10px;
+}
+
+/* 描述内容样式 */
+p {
+	font-size: 13px;
+	color: #0b5890;
+	font-weight: bold;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 下一环节 等待 图标 */
+.wc-wait-icon {
+	color: #FF0000;
+}
+
+/* 下一环节 等待 文字样式 */
+.wc-completion-icon {
+	color: #009688;
+}
+
+/* 下一环节 完结 图标 */
+.wc-wait-text {
+	color: #FF0000;
+}
+
+/* 下一环节 完结 文字样式 */
+.wc-completion-text {
+	color: #009688;
+}
+
+/* 案件基础信息标识样式 */
+.mui-input-row .key {
+	font-size: 14px;
+	width: 90px;
+}
+
+/* 案件基础信息内容样式 */
+.mui-input-row .value {
+	font-size: 14px;
+	width: calc(100% - 90px);
+	color: #0062CC;
+}
+
+/* 图片容器样式 */
+.wc-img-panel {
+	height: 50px;
+	line-height: 50px;
+	margin-top: 10px;
+}
+
+/* 图片样式 */
+img {
+	width: 50px;
+	height: 50px;
+	border-radius: 5px;
+	border: solid 1px #007DDB;
+	margin-right: 10px;
+}
+
+/* 案件审核信息输入行样式 */
+.case-input-row {
+	background-color: rgb(203, 203, 203) !important;
+	border-radius: 5px;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 案件审核输入行输入框样式 */
+.case-input-row>textarea {
+	height: 100%;
+	margin-bottom: 0px;
+	background-color: rgba(255, 255, 255, 0);
+	color: rgb(82, 111, 242);
+	border: solid 0px rgb(255, 255, 255);
+}
+
+/* 案件输入行多行文本和单行文本提示文字样式 */
+.case-input-row>textarea::placeholder,
+.case-input-row>input::placeholder {
+	font-size: 14px;
+}
+
+/* 案件审核输入行输入框样式 */
+.case-input-row>input {
+	height: 100%;
+	margin-bottom: 0px;
+	background-color: rgba(255, 255, 255, 0);
+	color: rgb(82, 111, 242);
+	border: solid 0px rgb(255, 255, 255);
+}

+ 871 - 0
css/cr.map.css

@@ -0,0 +1,871 @@
+/**
+ * 作者:王成
+ * 创建日期:2021年12月15日
+ * 操作系统:MAC
+ * 描述:地图页面的通用样式
+ */
+
+.jt-map-tools .wc-map-div-btn:first-child {
+	border-radius: 0px;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+}
+
+.jt-map-tools .wc-map-div-btn {
+	border-radius: 0px;
+}
+
+.jt-map-tools .wc-map-div-btn:last-child {
+	border-radius: 0px;
+	border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+
+/* 地图界面的按钮容器样式 */
+.wc-map-div-btn {
+	position: relative;
+	width: 40px;
+	height: 40px;
+	background-color: rgba(0, 0, 0, 0.75);
+	padding: 4px;
+	border-width: 0px;
+	margin-top: 0px;
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+/* 按钮内图标样式 */
+.wc-map-div-btn>span:nth-child(1) {
+	font-size: 18px;
+	background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+.wc-map-div-btn>span:nth-child(2) {
+	font-size: 7px;
+	color: rgb(255, 255, 255);
+	margin-top: 3px;
+}
+
+/* 本页独立导航栏样式 */
+.cr-bar {
+	background-color: rgba(36, 63, 109, 1.0) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+	box-shadow: none !important;
+}
+
+/* 查询输入框样式 */
+.mui-search input {
+	background-color: rgba(174, 186, 208, 0.85) !important;
+	border: solid 1px rgba(170, 176, 198, 0.85) !important;
+	color: rgb(33, 47, 100) !important;
+	font-size: 13px !important;
+	border-radius: 22px !important;
+}
+
+/* 输入框提示文字颜色 */
+.mui-search .mui-placeholder {
+	color: rgba(255, 255, 255, 0.65) !important;
+	font-size: 12px;
+}
+
+/* 弹框的高度 */
+.mui-popover {
+	height: 300px;
+}
+
+/* 3D地图中定位图层的按钮样式 */
+.cr-layer-control-location {
+	display: inline-block;
+	position: absolute;
+	height: 26px;
+	width: 26px;
+	line-height: 26px;
+	top: 6px;
+	right: 50px;
+	text-align: center;
+	font-size: 18px !important;
+	color: #ffffff;
+	background: linear-gradient(to bottom, rgb(57, 124, 229) 50%, rgb(69, 69, 69) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+/* 修改图层控制标题 */
+h5 {
+	font-size: 15px;
+	color: black;
+	font-weight: bold;
+	height: 30px;
+	line-height: 30px;
+	text-align: left;
+	margin: 0px !important;
+	padding-left: 10px !important;
+}
+
+/* 坐标查询弹框 */
+.wc-popover-coord-input {
+	height: 180px !important;
+	background-color: rgba(36, 63, 109, 1) !important;
+	border-top-right-radius: 10px !important;
+	border-top-left-radius: 10px !important;
+}
+
+/* 案件查询底部弹出框 */
+.wc-popover-case {
+	height: 260px !important;
+	/* background-color: rgb(230, 230, 230) !important; */
+	background-color: rgba(36, 63, 109, 1) !important;
+	border-top-right-radius: 10px !important;
+	border-top-left-radius: 10px !important;
+	display: flex !important;
+	flex-direction: column !important;
+}
+
+.wc-popover-case-property {
+	height: 300px !important;
+}
+
+/* 行样式 */
+.wc-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-top: 10px;
+	border-radius: 5px;
+	margin-left: 10px;
+	margin-right: 10px;
+	width: calc(100% - 20px);
+}
+
+/* 输入行样式 */
+.wc-input-row {
+	border: solid 1px rgba(255, 255, 255, 0.6) !important;
+	height: 30px !important;
+}
+
+/* 输入行图标样式 */
+.wc-input-row span:nth-child(1) {
+	font-size: 14px;
+	margin-left: 10px;
+	margin-right: 5px;
+	background: linear-gradient(to bottom, rgb(0, 255, 0) 50%, rgb(205, 197, 0) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+/* 输入行文字标签样式 */
+.wc-input-row span:nth-child(2) {
+	color: rgb(255, 255, 255);
+	font-size: 14px;
+	margin-right: 10px;
+}
+
+/* 输入行输入容器样式 */
+.wc-input-row .mui-input-row {
+	width: calc(100% - 100px) !important;
+	margin: 0px !important;
+}
+
+/* 输入行输入框样式 */
+.wc-input-row .mui-input-row .mui-input {
+	margin: 0px !important;
+	background-color: rgba(255, 255, 255, 0) !important;
+	border: solid 1px rgba(255, 255, 255, 0.0) !important;
+	font-size: 14px !important;
+}
+
+/* 输入框提示文字样式 */
+.wc-input-row .mui-input-row .mui-input::placeholder {
+	font-size: 14px;
+}
+
+/**
+ * 
+ */
+
+/* 地图窗口样式 */
+.map3d {
+	position: relative;
+	background-color: rgb(128, 128, 128);
+	height: calc(100vh - 0px);
+	width: calc(100vw - 0px);
+}
+
+/* 底部信息栏样式 */
+.divButtomInfo {
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	width: 160px;
+	height: 110px;
+	background-color: rgba(0, 0, 0, 0.45);
+	border-radius: 5px;
+	font-size: 12px;
+	color: rgba(255, 255, 255, 1.0);
+	display: flex;
+	flex-direction: column;
+	padding: 5px;
+}
+
+/* 3D 地图底部展示信息内部div样式 */
+.divButtomInfo>div {
+	height: 25px;
+	line-height: 25px;
+}
+
+/* 3D 地图底部展示信息内部div 内部标签标题样式 */
+.divButtomInfo>div>span:nth-child(1) {
+	display: inline-block;
+	width: 45px;
+	text-align: right;
+	margin-right: 5px;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 3D 地图底部展示信息内部div 内部标签值样式 */
+.divButtomInfo>div>span:nth-child(2) {
+	color: yellowgreen;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 三维地图 气泡窗口 容器样式 */
+.cr-popup {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 110px;
+	height: 50px;
+	border: 0px solid rgb(255, 0, 0);
+	position: absolute;
+	background-color: rgba(174, 186, 208, 0.65);
+	border-radius: 10px;
+	top: -300px;
+	left: -500px;
+}
+
+/* 三维地图 气泡窗口 小箭头样式 */
+.cr-popup .arrow {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	bottom: -30px;
+	left: 45px;
+}
+
+/* 三维地图 气泡窗口 小箭头样式 */
+.cr-popup .arrow * {
+	display: block;
+	border-width: 10px;
+	position: absolute;
+	border-style: dashed dashed dashed dashed;
+	font-size: 0;
+	line-height: 0;
+}
+
+/* 三维地图 气泡窗口 小箭头样式 */
+.cr-popup .arrow em {
+	border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
+}
+
+/* 案件查询按钮样式 */
+.wc-btn-case-query {
+	position: relative;
+	border-radius: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+	height: 34px !important;
+	background-color: rgb(115, 140, 238) !important;
+	border: solid 0px rgb(255, 255, 255) !important;
+}
+
+/* 三维地图 气泡提示信息窗口 容器样式 */
+.cr-tooltip-popup {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 180px;
+	height: 40px;
+	border: 0px solid rgb(255, 0, 0);
+	position: absolute;
+	background-color: rgba(174, 186, 208, 0.65);
+	border-radius: 20px;
+	top: 200px;
+	left: 300px;
+}
+
+/* 三维地图 气泡提示信息窗口 标题样式 */
+.cr-tooltip-popup .title {
+	color: rgb(255, 255, 255);
+	font-size: 10px;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 三维地图 气泡提示信息窗口 上标样式 */
+.cr-tooltip-popup>div>sup {
+	color: rgb(255, 255, 0);
+	font-size: 5px !important;
+	top: -6px;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 三维地图 气泡提示信息窗口 小箭头样式 */
+.cr-tooltip-popup .arrow {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	bottom: -30px;
+	left: calc(calc(180px - 20px) / 2);
+	/* 这很重要 主要是为了计算小箭头的位置 */
+}
+
+/* 三维地图 气泡提示信息窗口 竖线样式 */
+.cr-tooltip-popup .line {
+	position: absolute;
+	width: 30px;
+	height: 50px;
+	background-color: rgba(0, 0, 0, 0.0);
+	bottom: -60px;
+	border-right: dashed 2px rgb(255, 255, 0);
+	left: calc(calc(180px) / 2 - 29px);
+}
+
+/* 三维地图 气泡提示信息窗口 底部小圆圈样式 */
+.cr-tooltip-popup .circle {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background-color: rgba(0, 0, 0, 0.0);
+	bottom: calc(-60px - 10px);
+	left: calc(calc(180px - 10px) / 2);
+	border: solid 2px rgb(255, 255, 0);
+	border-radius: 10px;
+}
+
+/* 三维地图 气泡提示信息窗口 小箭头样式 */
+.cr-tooltip-popup .arrow * {
+	display: block;
+	border-width: 10px;
+	position: absolute;
+	border-style: dashed dashed dashed dashed;
+	font-size: 0;
+	line-height: 0;
+}
+
+/* 三维地图 气泡提示信息窗口 小箭头样式 */
+.cr-tooltip-popup .arrow em {
+	border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
+}
+
+
+/**
+ * 三维地图标签样式
+ */
+
+
+/* 三维标签 容器样式 */
+.jt-tooltip-popup {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 120px;
+	height: 90px;
+	top: 200px;
+	left: 300px;
+}
+
+/* 三维标签 容器样式 */
+.jt-tooltip-popup>div:nth-child(1) {
+	border: 0px solid rgb(255, 0, 0);
+	width: 100%;
+	height: 30px;
+	background-image: linear-gradient(to right, rgba(171, 108, 190, 0.65), rgba(138, 227, 196, 0.65));
+	border-radius: 5px;
+	border: dashed 1px rgb(255, 255, 0);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	line-height: 12px;
+}
+
+/* 三维标签 容器内部标题样式 */
+.jt-tooltip-popup .title {
+	color: rgb(10, 10, 10);
+	font-size: 10px;
+	font-family: 'TTTGB-Medium';
+	text-decoration: underline;
+}
+
+/* 三维标签 容器内部状态样式 */
+.jt-tooltip-popup .state {
+	color: rgb(255, 255, 255);
+	font-size: 10px;
+	font-family: 'TTTGB-Medium';
+}
+
+/* 三维标签 容器内部面积样式 */
+.jt-tooltip-popup .area {
+	color: rgb(120, 55, 190);
+	font-size: 10px;
+	font-family: 'TTTGB-Medium';
+	margin-left: 5px;
+}
+
+
+/* 三维标签 竖线样式 */
+.jt-tooltip-popup>div:nth-child(2) {
+	width: 1px;
+	height: 50px;
+	background-color: rgba(0, 0, 0, 0.0);
+	border-right: dashed 2px rgb(255, 255, 0);
+}
+
+/* 三维标签 底部小圆圈样式 */
+.jt-tooltip-popup>div:nth-child(3) {
+	width: 10px;
+	height: 10px;
+	background-color: rgba(0, 0, 0, 0.0);
+	bottom: calc(-50px - 10px);
+	left: calc(calc(180px - 10px) / 2);
+	border: solid 2px rgb(255, 255, 0);
+	border-radius: 10px;
+}
+
+/* +++++++++++++以下是图层控制相关样式集合+++++++++++++++++++ */
+
+/* 图层控制分组标签样式 */
+.jt-layer-control-label {
+	position: relative;
+	font-size: 13px;
+	color: rgb(203, 203, 203);
+	background-color: rgb(44, 64, 134);
+	padding-left: 24px !important;
+	height: 40px !important;
+	line-height: 40px !important;
+}
+
+/* 图层控制分组标签前置div小方块样式 */
+.jt-layer-control-label:before {
+	position: absolute;
+	content: '';
+	width: 4px;
+	height: calc(40px - 16px);
+	background-color: rgb(64, 97, 173);
+	left: 12px;
+	top: 8px;
+}
+
+/* 图层控制分组内容样式 */
+.jt-layer-control-content {
+	position: relative !important;
+	background-color: rgb(27, 38, 80) !important;
+}
+
+/* 图层控制行样式 */
+.jt-layer-control-input-row {
+	background-color: rgba(27, 38, 80, 1.0) !important;
+	display: flex !important;
+	flex-direction: row;
+	align-items: center;
+}
+
+/* 图层控制行标签样式 */
+.jt-layer-control-input-row>label {
+	font-size: 14px !important;
+	color: rgb(255, 255, 255) !important;
+	font-weight: 400;
+	flex: 1;
+	padding: 11px 5px;
+}
+
+/* 图层控制行标签内图标样式 */
+.jt-layer-control-input-row .app-icon {
+	font-size: 14px !important;
+	color: rgb(255, 255, 255) !important;
+	font-weight: bold;
+	margin-right: 8px;
+}
+
+/* 图层控制补充文字样式 */
+.jt-layer-control-input-row .jt-label {
+	color: rgb(236, 182, 98);
+	margin-right: 5px;
+	font-size: 13px !important;
+}
+
+/* 去掉图层控制分组底部的边框线 */
+.mui-input-group:after {
+	height: 0px !important;
+}
+
+/* 修改图层控制分组行底部的边框线 */
+.mui-input-group .mui-input-row:after {
+	background-color: rgb(39, 84, 183) !important;
+	background-color: rgb(203, 203, 203) !important;
+	height: 1px;
+}
+
+/* 去掉图层控制分组行最有一条底部的边框线 */
+.mui-input-group .mui-input-row:last-child::after {
+	height: 0px !important;
+}
+
+/* 引入外部字体 */
+@font-face {
+	font-family: alFont;
+	src: url('../fonts/iconfont.ttf');
+}
+
+/* 图层控制 状态图标样式 */
+.jt-sms-content-row input[type=checkbox],
+.jt-layer-control-input-row input[type=checkbox],
+.jt-layer-control-input-row input[type=radio] {
+	position: relative;
+	width: 40px;
+	height: 20px;
+	border-radius: 15px;
+	margin-right: 5px;
+}
+
+/* 图层控制 隐藏状态图标样式 */
+.jt-sms-content-row input[type=checkbox]:before,
+.jt-layer-control-input-row input[type=checkbox]:before,
+.jt-layer-control-input-row input[type=radio]:before {
+	position: absolute;
+	content: '';
+	width: 40px;
+	height: 20px;
+	background-color: rgb(69, 89, 168);
+	border-radius: 12px;
+}
+
+/* 图层控制 显示状态图标样式 */
+.jt-sms-content-row input[type=checkbox]:checked:before,
+.jt-layer-control-input-row input[type=checkbox]:checked:before,
+.jt-layer-control-input-row input[type=radio]:checked:before {
+	position: absolute;
+	content: '';
+	background-color: rgb(107, 176, 111);
+}
+
+/* 图层隐藏状态 小球的样式 */
+.jt-sms-content-row input[type=checkbox]::after,
+.jt-layer-control-input-row input[type=checkbox]::after,
+.jt-layer-control-input-row input[type=radio]::after {
+	position: absolute;
+	content: '';
+	width: 16px;
+	height: 16px;
+	top: 2px;
+	background-color: rgb(255, 255, 255);
+	left: 4px;
+	border-radius: 10px;
+}
+
+/* 图层显示状态 小球的样式 */
+.jt-sms-content-row input[type=checkbox]:checked::after,
+.jt-layer-control-input-row input[type=checkbox]:checked::after,
+.jt-layer-control-input-row input[type=radio]:checked::after {
+	left: calc(40px - 16px - 4px);
+}
+
+/* +++++++++++++以上是图层控制相关样式集合+++++++++++++++++++ */
+
+.jt-btn-normal {
+	border-radius: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+	height: 30px !important;
+}
+
+/* +++++++++++++++++++航线查询样式集+++++++++++++++++++++++++++++++ */
+/* 航线查询弹出框容器样式 */
+.jt-line-panel {
+	position: absolute;
+	width: 100%;
+	height: 160px;
+	line-height: 160px;
+	background-color: rgb(32, 46, 96);
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+	overflow: hidden;
+	bottom: 0px;
+	z-index: 100;
+	display: none;
+}
+
+/* 航线查询顶部标题容器样式 */
+.jt-line-top {
+	height: 44px;
+	background-color: rgb(37, 109, 187) !important;
+	line-height: 44px;
+	font-size: 14px;
+	font-weight: bold;
+	text-align: center;
+	color: rgb(255, 255, 255) !important;
+	position: relative;
+}
+
+/* 航线查询顶部标题右侧箭头样式 */
+.jt-line-top::after {
+	position: absolute;
+	font-family: 'iconfont', sans-serif !important;
+	content: '\ec0d';
+	right: 10px;
+	font-size: 20px;
+}
+
+/* 航线查询内容行样式 */
+.jt-line-panel .jt-line-row {
+	display: flex;
+	flex-direction: row;
+	height: 30px;
+	line-height: 30px;
+	align-items: center;
+	margin-top: 5px;
+}
+
+/* 航线查询内容行文字标题样式 */
+.jt-line-panel .jt-line-row>span {
+	display: inline-block;
+	width: 100px;
+	/* background-color: blue; */
+	height: 100%;
+	font-size: 13px;
+	color: rgb(255, 255, 255);
+	margin: 0px;
+	padding: 0px;
+	position: relative;
+	text-align: right;
+}
+
+/* 航线查询内容行选择按钮样式 */
+.jt-line-panel .jt-line-row .jt-line-select-btn {
+	display: inline;
+	flex: 1;
+	background-color: rgba(255, 255, 255, 0);
+	border: solid 1px rgb(133, 215, 253) !important;
+	height: 26px;
+	line-height: 26px;
+	font-size: 13px;
+	color: rgb(133, 215, 253);
+	padding: 0px !important;
+	margin: 0px 5px;
+}
+
+.jt-line-panel .jt-line-row .jt-line-select-btn:active {
+	border: solid 1px rgb(255, 0, 0) !important;
+}
+
+/* 航线查询查询结果展示内容样式 */
+.jt-line-panel .jt-line-row .jt-line-result {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgb(255, 255, 255);
+	margin-top: 10px;
+	margin-bottom: 10px;
+	height: 34px;
+	font-size: 14px;
+	font-family: "TTTGB-Medium", sans-serif !important;
+	background: -webkit-linear-gradient(right, rgba(35, 42, 151, 0.0), rgba(35, 42, 151, 0.45), rgba(35, 42, 151, 0.0));
+}
+
+/* 航线查询按钮样式 */
+.jt-line-panel .jt-line-row .jt-line-btn {
+	margin-right: 10px;
+	height: 30px;
+	padding: 0px 10px 0px 10px !important;
+}
+
+/* 日期选择弹出框年月日行样式 */
+.mui-dtpicker-title h5 {
+	padding: 0px !important;
+}
+
+/* 右侧滑出容器样式 */
+.cr-canvas {
+	background-color: rgb(230, 230, 230) !important;
+	display: flex !important;
+	flex-direction: column;
+	height: 100%;
+}
+
+/* 结果展示容器样式 */
+.cr-result {
+	background-color: rgb(69, 69, 69, 0.6);
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	position: absolute;
+	height: 40px;
+	line-height: 40px;
+	bottom: 0px;
+	color: rgb(255, 255, 255);
+	z-index: 1000;
+}
+
+/* 结果展示内容样式 */
+.cr-result>div {
+	flex: 1;
+	font-size: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 结果展示关闭按钮样式 */
+.cr-result>span {
+	display: flex;
+	width: 40px;
+	height: 40px;
+	margin-right: 10px;
+	font-size: 24px !important;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 结果展示关闭按钮点击样式 */
+.cr-result>span:active {
+	color: rgb(81, 142, 211);
+}
+
+/* 展示地类分析结果的容器样式 */
+.cr-land-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 地类分析结果-查询框容器样式 */
+.cr-search {
+	display: flex;
+	flex-direction: row;
+	background-color: rgba(255, 255, 255, 0.0);
+	height: 40px;
+	padding: 5px;
+	margin-top: 5px;
+}
+
+/* 地类分析结果-查询框内容样式 */
+.cr-search>div {
+	flex: 1;
+	/* margin: 0px 15px; */
+	margin-right: 10px;
+	background-color: rgb(157, 170, 198);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 5px;
+	color: rgb(255, 255, 255);
+	font-size: 13px;
+}
+
+/* 地类分析结果-查询框内容激活样式 */
+.cr-search>div:active {
+	background-color: rgb(69, 69, 69);
+}
+
+/* 地类分析结果-查询框查询按钮样式 */
+.cr-search>button {
+	border-radius: 5px !important;
+	color: rgb(255, 255, 255) !important;
+}
+
+/* 地类分析结果-图表展示容器样式 */
+.cr-map-echarts {
+	height: 240px;
+	background-color: rgba(255, 255, 255, 0.0);
+}
+
+/* 地类分析结果-详细内容容器样式 */
+.cr-map-content-panel {
+	position: relative;
+	background-color: rgba(255, 255, 255, 0.0);
+	flex: 1;
+	/* height: 100px; */
+	overflow-y: auto;
+}
+
+/* 地类分析结果-详细内容行样式 */
+.cr-map-content-row {
+	position: relative;
+	height: 30px;
+	display: flex;
+	flex-direction: row;
+	color: rgb(230, 230, 230);
+	background-color: rgba(255, 255, 255, 0.0);
+}
+
+/* 地类分析结果-详细内容条目分隔线样式 */
+.cr-map-content-row::before {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 10;
+	top: 0px;
+	height: 0px;
+	width: calc(100% - 10px);
+	content: '';
+	border-bottom: solid 1px rgb(203, 203, 203);
+}
+
+/* 地类分析结果-干掉首个条目的分隔线 */
+.cr-map-content-row:first-child::before {
+	border-bottom: solid 0px red;
+}
+
+/* 地类分析结果-条目子项内容样式 */
+.cr-map-content-row>span {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 12px;
+}
+
+/* 地类分析结果-条目子项第1个样式 */
+.cr-map-content-row>span:nth-child(1) {
+	margin-left: 8px;
+	margin-right: 8px;
+}
+
+/* 地类分析结果-条目子项第2个样式 */
+.cr-map-content-row>span:nth-child(2) {
+	width: 80px;
+}
+
+/* 地类分析结果-条目子项第3个样式 */
+.cr-map-content-row>span:nth-child(3) {
+	flex: 1;
+}
+
+/* 地类分析结果-条目子项第4个样式 */
+.cr-map-content-row>span:nth-child(4) {
+	width: 80px;
+}
+
+/* 激活样式 */
+.cr-map-content-row-active:active {
+	background-color: rgb(69, 69, 69);
+	color: rgb(255, 255, 255);
+}
+
+/* 该页独有的内容样式 */
+.mui-content {
+	padding-top: 0px !important;
+}
+
+/* 主要内容背景 */
+/* .mui-scroll-wrapper {
+	background: url(../img/map/map_back.jpg) no-repeat left top;
+	background-size: 100% 100%;
+} */

+ 62 - 0
css/cr.menu.css

@@ -0,0 +1,62 @@
+/**
+ * 作者:王成
+ * 创建日期:2021年11月19日
+ * 操作系统:MAC
+ * 描述:网格菜单样式集合
+ */
+
+/* 菜单容器 */
+.cr-menu-panel {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 菜单容器内图片样式 */
+.cr-menu-panel>img {
+	width: 60px;
+	height: 60px;
+	margin: 5px;
+}
+
+/* 菜单内文字样式 */
+.cr-menu-panel>span {
+	font-size: 14px;
+	margin-bottom: 5px;
+	color: rgb(255, 255, 255);
+}
+
+/* 菜单点击效果 */
+.mui-grid-view>li:active {
+	background-color: rgba(255, 0, 0, 0.3) !important;
+	border-radius: 5px;
+}
+
+h5 {
+	font-size: 16px;
+	margin-left: 16px;
+	color: rgb(114, 198, 254);
+}
+
+/* 菜单小容器 */
+.cr-menu-smart-panel {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 菜单小容器内图片样式 */
+.cr-menu-smart-panel>img {
+	width: 30px;
+	height: 30px;
+	margin: 5px;
+}
+
+/* 菜单小容器内文字样式 */
+.cr-menu-smart-panel>span {
+	font-size: 14px;
+	margin-bottom: 5px;
+	color: rgb(203, 203, 203);
+}

+ 213 - 0
css/csa.count.css

@@ -0,0 +1,213 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年9月20日
+ * 描述:占压分析统计结果展示样式
+ */
+
+/* 母容器样式 */
+.jt-csa-count-result-panel {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+/* 顶部横向滚动条样式 */
+.mui-segmented-control.mui-scroll-wrapper {
+	margin: 5px !important;
+	width: calc(100% - 10px);
+	height: 30px;
+}
+
+/* 顶部横向滚动条样式内部滚动 */
+.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
+	height: 100%;
+}
+
+/* 如果顶部的选择项只有一个 则直接占满宽度 */
+.mui-segmented-control.mui-scroll-wrapper .mui-scroll .jt-control-item {
+	width: calc(100vw) !important;
+}
+
+/* 选择器样式 */
+.mui-segmented-control.mui-scroll-wrapper .mui-scroll .mui-control-item {
+	color: rgb(217, 145, 45) !important;
+	box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
+		inset 0px -15px 15px -15px rgb(95, 150, 222);
+	border: solid 0px rgb(255, 0, 0);
+	height: 100%;
+	line-height: 100%;
+	font-size: 14px;
+	padding: 8px 15px;
+}
+
+/* 选择器选中状态样式 */
+.mui-segmented-control.mui-scroll-wrapper .mui-scroll .mui-control-item.mui-active {
+	color: rgb(255, 255, 255) !important;
+	background-color: rgb(49, 72, 157) !important;
+	box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
+		inset 0px -15px 15px -15px rgb(95, 150, 222);
+	border: solid 0px rgb(255, 0, 0) !important;
+}
+
+/* 主体内容样式 */
+.mui-content-padded {
+	margin: 5px;
+	margin-top: 0px;
+	flex: 1;
+}
+
+/* 主体内容子容器样式 */
+.mui-content-padded .mui-control-content {
+	border: 1px solid rgba(255, 255, 255, 0.45);
+	height: 100%;
+	color: rgb(255, 255, 255);
+}
+
+/* 子容器内容样式 */
+.mui-control-content .jt-row-content {
+	height: calc(100% - 30px);
+	position: relative;
+}
+
+/* 内容样式 去掉容器边框 */
+.jt-mui-control-content {
+	border: 0px solid rgba(255, 255, 255, 0) !important;
+}
+
+/* 数据内容占据全部高度 */
+.jt-mui-control-content .jt-row-content {
+	height: 100%;
+}
+
+/* 内容滚动容器样式 */
+.mui-control-content .jt-row-content .mui-scroll-wrapper {
+	position: relative;
+	height: 100%;
+	/* background-color: rgb(67, 96, 200); */
+}
+
+/* 标题行及数据行样式 */
+.mui-control-content .jt-row-head,
+.mui-control-content .jt-row-content .jt-row {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 30px;
+}
+
+/* 标题行独有样式 */
+.mui-control-content .jt-row-head {
+	background-color: rgb(44, 64, 134);
+	font-size: 14px;
+	font-weight: bold;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+
+/* 标题行及容器行子内容样式 */
+.mui-control-content .jt-row-head>span,
+.mui-control-content .jt-row-content .jt-row>span {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 标题行及数据行第一列样式 */
+.mui-control-content .jt-row-head>span:nth-child(1),
+.mui-control-content .jt-row-content .jt-row>span:nth-child(1) {
+	border-right: 1px solid rgba(255, 255, 255, 0.45);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* 标题行及数据行第二列样式 */
+.mui-control-content .jt-row-head>span:nth-child(2),
+.mui-control-content .jt-row-content .jt-row>span:nth-child(2) {
+	width: 45%;
+}
+
+/* 标题行及数据行内容样式 */
+.mui-control-content .jt-row-head>span,
+.mui-control-content .jt-row-content .jt-row>span {
+	display: inline-block;
+	padding: 4px 5px;
+	width: calc(55% - 1px);
+	text-align: center;
+}
+
+/* 标题行及数据行内容样式点击样式 */
+.mui-control-content .jt-row-head>span:active,
+.mui-control-content .jt-row-content .jt-row>span:active {
+	color: rgb(255, 255, 0);
+	font-weight: bold;
+	font-size: 14px;
+}
+
+
+/* 数据行独有样式 */
+.mui-control-content .jt-row-content .jt-row {
+	font-size: 13px;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+
+.mui-popover-bottom .mui-bar {
+	padding-right: 40px;
+}
+
+/* 弹框顶部增加关闭按钮 */
+.mui-popover-bottom .mui-bar::after {
+	font-family: 'iconfont', sans-serif !important;
+	position: absolute;
+	content: '\e614';
+	height: 44px;
+	line-height: 44px;
+	width: 20px;
+	right: 15px;
+	padding: 0px;
+	z-index: 10;
+	color: rgb(255, 255, 255);
+	font-weight: bold;
+	font-size: 18px;
+}
+
+/* 弹框顶部关闭按钮点击样式 */
+.mui-popover-bottom .mui-bar:active::after {
+	color: rgb(255, 255, 0);
+}
+
+/* 案件容器顶部选择项容器样式 */
+.jt-segmented-control-item {
+	padding-top: 0px !important;
+	padding-bottom: 0px !important;
+}
+
+/* 案件容器顶部选择项内容容器样式 */
+.jt-segmented-control-item .jt-segmented-control-item-content {
+	display: flex !important;
+	flex-direction: row;
+	align-items: center;
+	height: 100%;
+	width: calc(100% - 10px);
+}
+
+/* 案件容器顶部选择器数字样式 */
+.jt-segmented-control-item .jt-segmented-control-item-content .jt-number {
+	color: rgb(255, 255, 0);
+	flex: 1;
+	text-align: left;
+	padding: 0px 5px;
+}
+
+/* 案件容器顶部选择器加载更多按钮样式 */
+.jt-segmented-control-item .jt-segmented-control-item-content .jt-cnt-bar-button {
+	height: 24px;
+	background-color: rgba(255, 255, 255, 0);
+	padding: 0px 10px;
+	border: solid 1px rgba(236, 182, 98, 0.8);
+	color: rgb(255, 255, 255);
+	font-size: 13px !important;
+	font-weight: bold;
+	margin: 0px;
+}

+ 98 - 0
css/khpm.child.css

@@ -0,0 +1,98 @@
+* {
+	touch-action: none;
+}
+
+/* 统计项样式 */
+.cr-item {
+	background-color: rgb(255, 255, 0);
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 5px;
+}
+
+/* 统计项行样式 */
+.cr-item-row {
+	display: flex;
+	flex-direction: row;
+	height: 20px;
+	align-items: center;
+}
+
+/* 统计项列样式 */
+.cr-item-column {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 统计项标题样式 */
+.cr-item-title {
+	font-size: 14px !important;
+	color: rgb(232, 183, 99);
+
+}
+
+/* 统计项值样式 */
+.cr-item-value {
+	font-family: 'UnidreamLED', sans-serif !important;
+	font-size: 16px !important;
+	color: rgb(255, 255, 255);
+}
+
+/* 统计项名称样式 */
+.cr-item-name {
+	flex: 1;
+}
+
+/* 统计项名称标题样式 */
+.cr-item-name span {
+	background-color: rgb(200, 211, 251);
+	display: inline-block;
+	padding: 4px 4px 4px 14px;
+	margin-left: 20px;
+	font-size: 14px;
+	width: 140px;
+	font-family: 'TTTGB-Medium', sans-serif !important;
+	border-radius: 0px 14px 14px 0px;
+}
+
+/* 统计项排序样式 */
+.cr-item-order {
+	/* width: 120px; */
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: right;
+	/* background-color: blue; */
+	margin-right: 10px;
+}
+
+/* 统计项排序名称标识 */
+.cr-item-order span:nth-child(1) {
+	display: inline-block;
+	font-size: 14px;
+	color: rgb(147, 225, 212);
+}
+
+/* 统计项执法率 */
+.cr-item-order span:nth-child(2) {
+	display: inline-block;
+	font-size: 14px;
+	color: rgb(216, 126, 113);
+	font-weight: bold;
+}
+
+/* 统计项排序数字样式 */
+.cr-item-order span:nth-child(3) {
+	font-size: 14px;
+	background-color: rgb(236, 201, 201);
+	width: 24px;
+	height: 24px;
+	border-radius: 12px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-left: 8px;
+	font-family: 'UnidreamLED', sans-serif !important;
+}

+ 181 - 0
css/module.css

@@ -0,0 +1,181 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年5月28日
+ * 描述:专题首页样式 单独摘出 屏幕适配
+ */
+
+/* 顶部统计信息容器样式 */
+.cr-panel-count {
+	width: 100%;
+	height: 90px;
+	display: flex;
+	flex-direction: row;
+}
+
+/* 统计容器所有子节点容器样式 */
+.cr-panel-count>* {
+	position: relative;
+	flex: 1;
+	background-color: rgb(36, 63, 109);
+	margin-top: 5px;
+	margin-left: 5px;
+	margin-right: 5px;
+	border-radius: 5px;
+}
+
+/* 统计容器最后一个子元素容器样式 */
+.cr-panel-count>*:last-child {
+	margin-left: 0px;
+	margin-right: 5px;
+}
+
+/* 统计容器第一个子元素容器样式 */
+.cr-panel-count>*:first-child {
+	margin-left: 5px;
+	margin-right: 0px;
+}
+
+/* 统计值动画变量 */
+:root {
+	--left--from: 10px;
+	--left--to: 10px;
+}
+
+/* 统计值动画 */
+@keyframes www {
+	0% {
+		left: var(--left--from);
+	}
+
+	100% {
+		left: var(--left--to);
+	}
+}
+
+/* 统计数值的样式 */
+.cr-panel-count>*>*:nth-child(2) {
+	color: rgb(234, 191, 43);
+	font-family: "UnidreamLED", sans-serif;
+	font-size: 24px;
+	position: absolute;
+	width: 100px;
+	text-align: center;
+	bottom: 24px;
+	-webkit-animation: www 2s linear infinite alternate;
+}
+
+/* 统计标题的样式 */
+.cr-panel-count>*>*:nth-child(1) {
+	color: rgb(142, 230, 254);
+	font-family: "TTTGB-Medium", sans-serif;
+	font-size: 16px;
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	bottom: 50px;
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+}
+
+/* 统计图片的样式 */
+.cr-panel-count>*>*:nth-child(3) {
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	right: 10px;
+	width: calc(100% - 20px);
+	height: 24px;
+	content: url(../img/back/count_bottom_back.png);
+}
+
+/* 底部菜单容器 */
+.cr-land-menu-panel {
+	position: relative;
+	flex: 1;
+	background-image: url(../img/land/ico_land_expropriate_home.png);
+	background-size: 100% 100%;
+	margin: 10px;
+
+}
+
+/* 底部菜单通用样式 */
+.cr-land-menu {
+	position: absolute;
+	width: 80px;
+	height: 80px;
+}
+
+/* 菜单内图片样式 */
+.cr-land-menu>img {
+	width: 80px;
+	height: 80px;
+}
+
+/* 菜单内文字样式 */
+.cr-land-menu>div {
+	position: absolute;
+	color: rgb(142, 230, 254);
+	font-family: "TTTGB-Medium", sans-serif;
+	font-size: 16px;
+	width: 100%;
+	bottom: 40px;
+	text-align: center;
+	text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
+	-webkit-animation: rotate 2s infinite;
+}
+
+/* 跳动动画 */
+@keyframes rotate {
+
+	0%,
+	100%,
+	20%,
+	50%,
+	80% {
+		-webkit-transform: translateY(0);
+	}
+
+	40% {
+		-webkit-transform: translateY(-20px);
+	}
+
+	60% {
+		-webkit-transform: translateY(-10px);
+	}
+}
+
+/* 第一个菜单位置 */
+.cr-land-menu-a {
+	top: 15%;
+	left: 10%;
+}
+
+/* 第二个菜单位置 */
+.cr-land-menu-b {
+	right: 20%;
+	bottom: 10%;
+}
+
+/* 第三个菜单位置 */
+.cr-land-menu-c {
+	right: 5%;
+	top: 90px;
+}
+
+/* 页面宽度小于600 */
+@media screen and (max-width: 600px) {
+
+	/* 统计标题的样式 */
+	.cr-panel-count>*>*:nth-child(1) {
+		font-size: 14px;
+	}
+
+	/* 统计数值的样式 */
+	.cr-panel-count>*>*:nth-child(2) {
+		font-size: 16px;
+	}
+
+	/* 菜单内文字样式 */
+	.cr-land-menu>div {
+		font-size: 14px;
+	}
+}

+ 5649 - 0
css/mui.css

@@ -0,0 +1,5649 @@
+/*!
+ * =====================================================
+ * Mui v3.7.3 (http://dev.dcloud.net.cn/mui)
+ * =====================================================
+ */
+
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+html
+{
+    font-family: sans-serif;
+
+    -webkit-text-size-adjust: 100%;
+}
+
+body
+{
+    margin: 0;
+}
+
+body::after
+{
+    position: fixed;
+    top: -1000px;
+    left: -1000px;
+
+    content: '';
+    -webkit-animation: shadow-preload .1s;
+            animation: shadow-preload .1s;
+    -webkit-animation-delay: 3s;
+            animation-delay: 3s;
+}
+
+@-webkit-keyframes shadow-preload
+{
+    0%
+    {
+        background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
+    }
+
+    100%
+    {
+        background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
+    }
+}
+@keyframes shadow-preload
+{
+    0%
+    {
+        background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
+    }
+
+    100%
+    {
+        background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
+    }
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary
+{
+    display: block;
+}
+
+audio,
+canvas,
+progress,
+video
+{
+    display: inline-block;
+
+    vertical-align: baseline;
+}
+
+audio:not([controls])
+{
+    display: none;
+
+    height: 0;
+}
+
+[hidden],
+template
+{
+    display: none;
+}
+
+a
+{
+    background: transparent;
+}
+
+a:active,
+a:hover
+{
+    outline: 0;
+}
+
+abbr[title]
+{
+    border-bottom: 1px dotted;
+}
+
+b,
+strong
+{
+    font-weight: bold;
+}
+
+dfn
+{
+    font-style: italic;
+}
+
+h1
+{
+    font-size: 2em;
+
+    margin: .67em 0;
+}
+
+mark
+{
+    color: #000;
+    background: #ff0;
+}
+
+small
+{
+    font-size: 80%;
+}
+
+sub,
+sup
+{
+    font-size: 75%;
+    line-height: 0;
+
+    position: relative;
+
+    vertical-align: baseline;
+}
+
+sup
+{
+    top: -.5em;
+}
+
+sub
+{
+    bottom: -.25em;
+}
+
+img
+{
+    border: 0;
+}
+
+svg:not(:root)
+{
+    overflow: hidden;
+}
+
+figure
+{
+    margin: 1em 40px;
+}
+
+hr
+{
+    box-sizing: content-box;
+    height: 0;
+}
+
+pre
+{
+    overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp
+{
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea
+{
+    font: inherit;
+
+    margin: 0;
+
+    color: inherit;
+}
+
+button
+{
+    overflow: visible;
+}
+
+button,
+select
+{
+    text-transform: none;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit']
+{
+    cursor: pointer;
+
+    -webkit-appearance: button;
+}
+
+button[disabled],
+html input[disabled]
+{
+    cursor: default;
+}
+
+input
+{
+    line-height: normal;
+}
+
+input[type='checkbox'],
+input[type='radio']
+{
+    box-sizing: border-box;
+    padding: 0;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button
+{
+    height: auto;
+}
+
+input[type='search']
+{
+    -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+
+    -webkit-appearance: textfield;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration
+{
+    -webkit-appearance: none;
+}
+
+fieldset
+{
+    margin: 0 2px;
+    padding: .35em .625em .75em;
+
+    border: 1px solid #c0c0c0;
+}
+
+legend
+{
+    padding: 0;
+
+    border: 0;
+}
+
+textarea
+{
+    overflow: auto;
+}
+
+optgroup
+{
+    font-weight: bold;
+}
+
+table
+{
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+td,
+th
+{
+    padding: 0;
+}
+
+*
+{
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+
+    -webkit-user-select: none;
+
+    outline: none;
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body
+{
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    font-size: 17px;
+    line-height: 21px;
+
+    color: #000;
+    background-color: #efeff4;
+
+    -webkit-overflow-scrolling: touch;
+}
+
+a
+{
+    text-decoration: none;
+
+    color: #007aff;
+}
+a:active
+{
+    color: #0062cc;
+}
+
+.mui-content
+{
+    background-color: #efeff4;
+
+    -webkit-overflow-scrolling: touch;
+}
+
+.mui-bar-nav ~ .mui-content
+{
+    padding-top: 44px;
+}
+.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    top: 44px;
+}
+
+.mui-bar-header-secondary ~ .mui-content
+{
+    padding-top: 88px;
+}
+.mui-bar-header-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    top: 88px;
+}
+
+.mui-bar-footer ~ .mui-content
+{
+    padding-bottom: 44px;
+}
+.mui-bar-footer ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    bottom: 44px;
+}
+
+.mui-bar-footer-secondary ~ .mui-content
+{
+    padding-bottom: 88px;
+}
+.mui-bar-footer-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    bottom: 88px;
+}
+
+.mui-bar-tab ~ .mui-content
+{
+    padding-bottom: 50px;
+}
+.mui-bar-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    bottom: 50px;
+}
+
+.mui-bar-footer-secondary-tab ~ .mui-content
+{
+    padding-bottom: 94px;
+}
+.mui-bar-footer-secondary-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
+{
+    bottom: 94px;
+}
+
+.mui-content-padded
+{
+    margin: 10px;
+}
+
+.mui-inline
+{
+    display: inline-block;
+
+    vertical-align: top;
+}
+
+.mui-block
+{
+    display: block !important;
+}
+
+.mui-visibility
+{
+    visibility: visible !important;
+}
+
+.mui-hidden
+{
+    display: none !important;
+}
+
+.mui-ellipsis
+{
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.mui-ellipsis-2
+{
+    display: -webkit-box;
+    overflow: hidden;
+
+    white-space: normal !important;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.mui-table
+{
+    display: table;
+
+    width: 100%;
+
+    table-layout: fixed;
+}
+
+.mui-table-cell
+{
+    position: relative;
+
+    display: table-cell;
+}
+
+.mui-text-left
+{
+    text-align: left !important;
+}
+
+.mui-text-center
+{
+    text-align: center !important;
+}
+
+.mui-text-justify
+{
+    text-align: justify !important;
+}
+
+.mui-text-right
+{
+    text-align: right !important;
+}
+
+.mui-pull-left
+{
+    float: left;
+}
+
+.mui-pull-right
+{
+    float: right;
+}
+
+.mui-list-unstyled
+{
+    padding-left: 0;
+
+    list-style: none;
+}
+
+.mui-list-inline
+{
+    margin-left: -5px;
+    padding-left: 0;
+
+    list-style: none;
+}
+
+.mui-list-inline > li
+{
+    display: inline-block;
+
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+.mui-clearfix:before, .mui-clearfix:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-clearfix:after
+{
+    clear: both;
+}
+
+.mui-bg-primary
+{
+    background-color: #007aff;
+}
+
+.mui-bg-positive
+{
+    background-color: #4cd964;
+}
+
+.mui-bg-negative
+{
+    background-color: #dd524d;
+}
+
+.mui-error
+{
+    margin: 88px 35px;
+    padding: 10px;
+
+    border-radius: 6px;
+    background-color: #bbb;
+}
+
+.mui-subtitle
+{
+    font-size: 15px;
+}
+
+h1, h2, h3, h4, h5, h6
+{
+    line-height: 1;
+
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+h1, .mui-h1
+{
+    font-size: 36px;
+}
+
+h2, .mui-h2
+{
+    font-size: 30px;
+}
+
+h3, .mui-h3
+{
+    font-size: 24px;
+}
+
+h4, .mui-h4
+{
+    font-size: 18px;
+}
+
+h5, .mui-h5
+{
+    font-size: 14px;
+    font-weight: normal;
+
+    color: #8f8f94;
+}
+
+h6, .mui-h6
+{
+    font-size: 12px;
+    font-weight: normal;
+
+    color: #8f8f94;
+}
+
+p
+{
+    font-size: 14px;
+
+    margin-top: 0;
+    margin-bottom: 10px;
+
+    color: #8f8f94;
+}
+
+.mui-row:before, .mui-row:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-row:after
+{
+    clear: both;
+}
+
+.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
+{
+    position: relative;
+
+    min-height: 1px;
+}
+
+.mui-row > [class*='mui-col-']
+{
+    float: left;
+}
+
+.mui-col-xs-12
+{
+    width: 100%;
+}
+
+.mui-col-xs-11
+{
+    width: 91.66666667%;
+}
+
+.mui-col-xs-10
+{
+    width: 83.33333333%;
+}
+
+.mui-col-xs-9
+{
+    width: 75%;
+}
+
+.mui-col-xs-8
+{
+    width: 66.66666667%;
+}
+
+.mui-col-xs-7
+{
+    width: 58.33333333%;
+}
+
+.mui-col-xs-6
+{
+    width: 50%;
+}
+
+.mui-col-xs-5
+{
+    width: 41.66666667%;
+}
+
+.mui-col-xs-4
+{
+    width: 33.33333333%;
+}
+
+.mui-col-xs-3
+{
+    width: 25%;
+}
+
+.mui-col-xs-2
+{
+    width: 16.66666667%;
+}
+
+.mui-col-xs-1
+{
+    width: 8.33333333%;
+}
+
+@media (min-width: 400px)
+{
+    .mui-col-sm-12
+    {
+        width: 100%;
+    }
+
+    .mui-col-sm-11
+    {
+        width: 91.66666667%;
+    }
+
+    .mui-col-sm-10
+    {
+        width: 83.33333333%;
+    }
+
+    .mui-col-sm-9
+    {
+        width: 75%;
+    }
+
+    .mui-col-sm-8
+    {
+        width: 66.66666667%;
+    }
+
+    .mui-col-sm-7
+    {
+        width: 58.33333333%;
+    }
+
+    .mui-col-sm-6
+    {
+        width: 50%;
+    }
+
+    .mui-col-sm-5
+    {
+        width: 41.66666667%;
+    }
+
+    .mui-col-sm-4
+    {
+        width: 33.33333333%;
+    }
+
+    .mui-col-sm-3
+    {
+        width: 25%;
+    }
+
+    .mui-col-sm-2
+    {
+        width: 16.66666667%;
+    }
+
+    .mui-col-sm-1
+    {
+        width: 8.33333333%;
+    }
+}
+.mui-scroll-wrapper
+{
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    overflow: hidden;
+
+    width: 100%;
+}
+
+.mui-scroll
+{
+    position: absolute;
+    z-index: 1;
+
+    width: 100%;
+}
+
+.mui-scrollbar
+{
+    position: absolute;
+    z-index: 9998;
+
+    overflow: hidden;
+
+    -webkit-transition: 500ms;
+            transition: 500ms;
+    transform: translateZ(0px);
+    pointer-events: none;
+
+    opacity: 0;
+}
+
+.mui-scrollbar-vertical
+{
+    top: 0;
+    right: 1px;
+    bottom: 2px;
+
+    width: 4px;
+}
+.mui-scrollbar-vertical .mui-scrollbar-indicator
+{
+    width: 100%;
+}
+
+.mui-scrollbar-horizontal
+{
+    right: 2px;
+    bottom: 0;
+    left: 2px;
+
+    height: 4px;
+}
+.mui-scrollbar-horizontal .mui-scrollbar-indicator
+{
+    height: 100%;
+}
+
+.mui-scrollbar-indicator
+{
+    position: absolute;
+
+    display: block;
+
+    box-sizing: border-box;
+
+    -webkit-transition: .01s cubic-bezier(.1, .57, .1, 1);
+            transition: .01s cubic-bezier(.1, .57, .1, 1);
+    transform: translate(0px, 0px) translateZ(0px);
+
+    border: 1px solid rgba(255, 255, 255, .80196);
+    border-radius: 2px;
+    background: rgba(0, 0, 0, .39804);
+}
+
+.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper, .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper
+{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    overflow: hidden;
+
+    width: 100%;
+}
+.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll, .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll
+{
+    position: absolute;
+
+    width: 100%;
+}
+.mui-plus-pullrefresh .mui-scroll-wrapper, .mui-plus-pullrefresh .mui-slider-group
+{
+    position: static;
+    top: auto;
+    bottom: auto;
+    left: auto;
+
+    overflow: auto;
+
+    width: auto;
+}
+.mui-plus-pullrefresh .mui-slider-group
+{
+    overflow: visible;
+}
+.mui-plus-pullrefresh .mui-scroll
+{
+    position: static;
+
+    width: auto;
+}
+
+.mui-off-canvas-wrap .mui-bar
+{
+    position: absolute !important;
+
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.mui-off-canvas-wrap
+{
+    position: relative;
+    z-index: 1;
+
+    overflow: hidden;
+
+    width: 100%;
+    height: 100%;
+}
+.mui-off-canvas-wrap .mui-inner-wrap
+{
+    position: relative;
+    z-index: 1;
+
+    width: 100%;
+    height: 100%;
+}
+.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning
+{
+    -webkit-transition: -webkit-transform 350ms;
+            transition:         transform 350ms cubic-bezier(.165, .84, .44, 1);
+}
+.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left
+{
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+}
+.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right
+{
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+}
+.mui-off-canvas-wrap.mui-active
+{
+    overflow: hidden;
+
+    height: 100%;
+}
+.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop
+{
+    position: absolute;
+    z-index: 998;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    transition: background 350ms cubic-bezier(.165, .84, .44, 1);
+
+    background: rgba(0, 0, 0, .4);
+    box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
+
+    -webkit-tap-highlight-color: transparent;
+}
+.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right
+{
+    z-index: 10000 !important;
+
+    -webkit-transform: translate3d(100%, 0px, 0px);
+}
+.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left
+{
+    z-index: 10000 !important;
+
+    -webkit-transform: translate3d(-100%, 0px, 0px);
+}
+
+.mui-off-canvas-left, .mui-off-canvas-right
+{
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+
+    visibility: hidden;
+
+    box-sizing: content-box;
+    width: 70%;
+    min-height: 100%;
+
+    background: #333;
+
+    -webkit-overflow-scrolling: touch;
+}
+.mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning
+{
+    -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1);
+            transition:         transform 350ms cubic-bezier(.165, .84, .44, 1);
+}
+
+.mui-off-canvas-left
+{
+    left: 0;
+}
+
+.mui-off-canvas-right
+{
+    right: 0;
+}
+
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
+{
+    background-color: #333;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    width: 80%;
+
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+
+    opacity: .1;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
+{
+    -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
+            transition:         transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
+{
+    -webkit-transform-origin: -100%;
+            transform-origin: -100%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    -webkit-transform-origin: 200%;
+            transform-origin: 200%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
+{
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
+{
+    -webkit-transform: scale(1);
+            transform: scale(1);
+
+    opacity: 1;
+}
+
+.mui-loading .mui-spinner
+{
+    display: block;
+
+    margin: 0 auto;
+}
+
+.mui-spinner
+{
+    display: inline-block;
+
+    width: 24px;
+    height: 24px;
+
+    -webkit-transform-origin: 50%;
+            transform-origin: 50%;
+    -webkit-animation: spinner-spin 1s step-end infinite;
+            animation: spinner-spin 1s step-end infinite;
+}
+
+.mui-spinner:after
+{
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    content: '';
+
+    background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100%;
+}
+
+.mui-spinner-white:after
+{
+    background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
+}
+
+@-webkit-keyframes spinner-spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0deg);
+    }
+
+    8.33333333%
+    {
+        -webkit-transform: rotate(30deg);
+    }
+
+    16.66666667%
+    {
+        -webkit-transform: rotate(60deg);
+    }
+
+    25%
+    {
+        -webkit-transform: rotate(90deg);
+    }
+
+    33.33333333%
+    {
+        -webkit-transform: rotate(120deg);
+    }
+
+    41.66666667%
+    {
+        -webkit-transform: rotate(150deg);
+    }
+
+    50%
+    {
+        -webkit-transform: rotate(180deg);
+    }
+
+    58.33333333%
+    {
+        -webkit-transform: rotate(210deg);
+    }
+
+    66.66666667%
+    {
+        -webkit-transform: rotate(240deg);
+    }
+
+    75%
+    {
+        -webkit-transform: rotate(270deg);
+    }
+
+    83.33333333%
+    {
+        -webkit-transform: rotate(300deg);
+    }
+
+    91.66666667%
+    {
+        -webkit-transform: rotate(330deg);
+    }
+
+    100%
+    {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes spinner-spin
+{
+    0%
+    {
+        transform: rotate(0deg);
+    }
+
+    8.33333333%
+    {
+        transform: rotate(30deg);
+    }
+
+    16.66666667%
+    {
+        transform: rotate(60deg);
+    }
+
+    25%
+    {
+        transform: rotate(90deg);
+    }
+
+    33.33333333%
+    {
+        transform: rotate(120deg);
+    }
+
+    41.66666667%
+    {
+        transform: rotate(150deg);
+    }
+
+    50%
+    {
+        transform: rotate(180deg);
+    }
+
+    58.33333333%
+    {
+        transform: rotate(210deg);
+    }
+
+    66.66666667%
+    {
+        transform: rotate(240deg);
+    }
+
+    75%
+    {
+        transform: rotate(270deg);
+    }
+
+    83.33333333%
+    {
+        transform: rotate(300deg);
+    }
+
+    91.66666667%
+    {
+        transform: rotate(330deg);
+    }
+
+    100%
+    {
+        transform: rotate(360deg);
+    }
+}
+input[type='button'],
+input[type='submit'],
+input[type='reset'],
+button,
+.mui-btn
+{
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42;
+
+    position: relative;
+
+    display: inline-block;
+
+    margin-bottom: 0;
+    padding: 6px 12px;
+
+    cursor: pointer;
+    -webkit-transition: all;
+            transition: all;
+    -webkit-transition-timing-function: linear;
+            transition-timing-function: linear;
+    -webkit-transition-duration: .2s;
+            transition-duration: .2s;
+    text-align: center;
+    vertical-align: top;
+    white-space: nowrap;
+
+    color: #333;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-color: #fff;
+    background-clip: padding-box;
+}
+input[type='button']:enabled:active, input[type='button'].mui-active:enabled,
+input[type='submit']:enabled:active,
+input[type='submit'].mui-active:enabled,
+input[type='reset']:enabled:active,
+input[type='reset'].mui-active:enabled,
+button:enabled:active,
+button.mui-active:enabled,
+.mui-btn:enabled:active,
+.mui-btn.mui-active:enabled
+{
+    color: #fff;
+    background-color: #929292;
+}
+input[type='button']:disabled, input[type='button'].mui-disabled,
+input[type='submit']:disabled,
+input[type='submit'].mui-disabled,
+input[type='reset']:disabled,
+input[type='reset'].mui-disabled,
+button:disabled,
+button.mui-disabled,
+.mui-btn:disabled,
+.mui-btn.mui-disabled
+{
+    opacity: .6;
+}
+
+input[type='submit'],
+.mui-btn-primary,
+.mui-btn-blue
+{
+    color: #fff;
+    border: 1px solid #007aff;
+    background-color: #007aff;
+}
+input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
+.mui-btn-primary:enabled:active,
+.mui-btn-primary.mui-active:enabled,
+.mui-btn-blue:enabled:active,
+.mui-btn-blue.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #0062cc;
+    background-color: #0062cc;
+}
+
+.mui-btn-positive,
+.mui-btn-success,
+.mui-btn-green
+{
+    color: #fff;
+    border: 1px solid #4cd964;
+    background-color: #4cd964;
+}
+.mui-btn-positive:enabled:active, .mui-btn-positive.mui-active:enabled,
+.mui-btn-success:enabled:active,
+.mui-btn-success.mui-active:enabled,
+.mui-btn-green:enabled:active,
+.mui-btn-green.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #2ac845;
+    background-color: #2ac845;
+}
+
+.mui-btn-warning,
+.mui-btn-yellow
+{
+    color: #fff;
+    border: 1px solid #f0ad4e;
+    background-color: #f0ad4e;
+}
+.mui-btn-warning:enabled:active, .mui-btn-warning.mui-active:enabled,
+.mui-btn-yellow:enabled:active,
+.mui-btn-yellow.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #ec971f;
+    background-color: #ec971f;
+}
+
+.mui-btn-negative,
+.mui-btn-danger,
+.mui-btn-red
+{
+    color: #fff;
+    border: 1px solid #dd524d;
+    background-color: #dd524d;
+}
+.mui-btn-negative:enabled:active, .mui-btn-negative.mui-active:enabled,
+.mui-btn-danger:enabled:active,
+.mui-btn-danger.mui-active:enabled,
+.mui-btn-red:enabled:active,
+.mui-btn-red.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #cf2d28;
+    background-color: #cf2d28;
+}
+
+.mui-btn-royal,
+.mui-btn-purple
+{
+    color: #fff;
+    border: 1px solid #8a6de9;
+    background-color: #8a6de9;
+}
+.mui-btn-royal:enabled:active, .mui-btn-royal.mui-active:enabled,
+.mui-btn-purple:enabled:active,
+.mui-btn-purple.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #6641e2;
+    background-color: #6641e2;
+}
+
+.mui-btn-grey
+{
+    color: #fff;
+    border: 1px solid #c7c7cc;
+    background-color: #c7c7cc;
+}
+.mui-btn-grey:enabled:active, .mui-btn-grey.mui-active:enabled
+{
+    color: #fff;
+    border: 1px solid #acacb4;
+    background-color: #acacb4;
+}
+
+.mui-btn-outlined
+{
+    background-color: transparent;
+}
+.mui-btn-outlined.mui-btn-primary, .mui-btn-outlined.mui-btn-blue
+{
+    color: #007aff;
+}
+.mui-btn-outlined.mui-btn-positive, .mui-btn-outlined.mui-btn-success, .mui-btn-outlined.mui-btn-green
+{
+    color: #4cd964;
+}
+.mui-btn-outlined.mui-btn-warning, .mui-btn-outlined.mui-btn-yellow
+{
+    color: #f0ad4e;
+}
+.mui-btn-outlined.mui-btn-negative, .mui-btn-outlined.mui-btn-danger, .mui-btn-outlined.mui-btn-red
+{
+    color: #dd524d;
+}
+.mui-btn-outlined.mui-btn-royal, .mui-btn-outlined.mui-btn-purple
+{
+    color: #8a6de9;
+}
+.mui-btn-outlined.mui-btn-primary:enabled:active, .mui-btn-outlined.mui-btn-blue:enabled:active, .mui-btn-outlined.mui-btn-positive:enabled:active, .mui-btn-outlined.mui-btn-success:enabled:active, .mui-btn-outlined.mui-btn-green:enabled:active, .mui-btn-outlined.mui-btn-warning:enabled:active, .mui-btn-outlined.mui-btn-yellow:enabled:active, .mui-btn-outlined.mui-btn-negative:enabled:active, .mui-btn-outlined.mui-btn-danger:enabled:active, .mui-btn-outlined.mui-btn-red:enabled:active, .mui-btn-outlined.mui-btn-royal:enabled:active, .mui-btn-outlined.mui-btn-purple:enabled:active
+{
+    color: #fff;
+}
+
+.mui-btn-link
+{
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    color: #007aff;
+    border: 0;
+    background-color: transparent;
+}
+.mui-btn-link:enabled:active, .mui-btn-link.mui-active:enabled
+{
+    color: #0062cc;
+    background-color: transparent;
+}
+
+.mui-btn-block
+{
+    font-size: 18px;
+
+    display: block;
+
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 15px 0;
+}
+
+.mui-btn .mui-badge
+{
+    font-size: 14px;
+
+    margin: -2px -4px -2px 4px;
+
+    background-color: rgba(0, 0, 0, .15);
+}
+
+.mui-btn .mui-badge-inverted,
+.mui-btn:enabled:active .mui-badge-inverted
+{
+    background-color: transparent;
+}
+
+.mui-btn-primary:enabled:active .mui-badge-inverted,
+.mui-btn-positive:enabled:active .mui-badge-inverted,
+.mui-btn-negative:enabled:active .mui-badge-inverted
+{
+    color: #fff;
+}
+
+.mui-btn-block .mui-badge
+{
+    position: absolute;
+    right: 0;
+
+    margin-right: 10px;
+}
+
+.mui-btn .mui-icon
+{
+    font-size: inherit;
+}
+
+.mui-btn.mui-icon
+{
+    font-size: 14px;
+    line-height: 1.42;
+}
+
+.mui-btn.mui-fab
+{
+    width: 56px;
+    height: 56px;
+    padding: 16px;
+
+    border-radius: 50%;
+    outline: none;
+}
+.mui-btn.mui-fab.mui-btn-mini
+{
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+}
+.mui-btn.mui-fab .mui-icon
+{
+    font-size: 24px;
+    line-height: 24px;
+
+    width: 24px;
+    height: 24px;
+}
+
+.mui-btn .mui-spinner
+{
+    width: 14px;
+    height: 14px;
+
+    vertical-align: text-bottom;
+}
+
+.mui-btn-block .mui-spinner
+{
+    width: 22px;
+    height: 22px;
+}
+
+.mui-bar
+{
+    position: fixed;
+    z-index: 10;
+    right: 0;
+    left: 0;
+
+    height: 44px;
+    padding-right: 10px;
+    padding-left: 10px;
+
+    border-bottom: 0;
+    background-color: #f7f7f7;
+    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
+            box-shadow: 0 0 1px rgba(0, 0, 0, .85);
+
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+}
+
+.mui-bar .mui-title
+{
+    right: 40px;
+    left: 40px;
+
+    display: inline-block;
+    overflow: hidden;
+
+    width: auto;
+    margin: 0;
+
+    text-overflow: ellipsis;
+}
+.mui-bar .mui-backdrop
+{
+    background: none;
+}
+
+.mui-bar-header-secondary
+{
+    top: 44px;
+}
+
+.mui-bar-footer
+{
+    bottom: 0;
+}
+
+.mui-bar-footer-secondary
+{
+    bottom: 44px;
+}
+
+.mui-bar-footer-secondary-tab
+{
+    bottom: 50px;
+}
+
+.mui-bar-footer,
+.mui-bar-footer-secondary,
+.mui-bar-footer-secondary-tab
+{
+    border-top: 0;
+}
+
+.mui-bar-transparent
+{
+    top: 0;
+
+    background-color: rgba(247, 247, 247, 0);
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.mui-bar-nav
+{
+    top: 0;
+
+    -webkit-box-shadow: 0 1px 6px #ccc;
+            box-shadow: 0 1px 6px #ccc;
+}
+.mui-bar-nav ~ .mui-content .mui-anchor
+{
+    display: block;
+    visibility: hidden;
+
+    height: 45px;
+    margin-top: -45px;
+}
+.mui-bar-nav.mui-bar .mui-icon
+{
+    margin-right: -10px;
+    margin-left: -10px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.mui-title
+{
+    font-size: 17px;
+    font-weight: 500;
+    line-height: 44px;
+
+    position: absolute;
+
+    display: block;
+
+    width: 100%;
+    margin: 0 -10px;
+    padding: 0;
+
+    text-align: center;
+    white-space: nowrap;
+
+    color: #000;
+}
+
+.mui-title a
+{
+    color: inherit;
+}
+
+.mui-bar-tab
+{
+    bottom: 0;
+
+    display: table;
+
+    width: 100%;
+    height: 50px;
+    padding: 0;
+
+    table-layout: fixed;
+
+    border-top: 0;
+    border-bottom: 0;
+
+    -webkit-touch-callout: none;
+}
+.mui-bar-tab .mui-tab-item
+{
+    display: table-cell;
+    overflow: hidden;
+
+    width: 1%;
+    height: 50px;
+
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: #929292;
+}
+.mui-bar-tab .mui-tab-item.mui-active
+{
+    color: #007aff;
+}
+.mui-bar-tab .mui-tab-item .mui-icon
+{
+    top: 3px;
+
+    width: 24px;
+    height: 24px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.mui-bar-tab .mui-tab-item .mui-icon ~ .mui-tab-label
+{
+    font-size: 11px;
+
+    display: block;
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+}
+.mui-bar-tab .mui-tab-item .mui-icon:active
+{
+    background: none;
+}
+
+.mui-focusin > .mui-bar-nav,
+.mui-focusin > .mui-bar-header-secondary
+{
+    position: absolute;
+}
+
+.mui-focusin > .mui-bar ~ .mui-content
+{
+    padding-bottom: 0;
+}
+
+.mui-bar .mui-btn
+{
+    font-weight: 400;
+
+    position: relative;
+    z-index: 20;
+    top: 7px;
+
+    margin-top: 0;
+    padding: 6px 12px 7px;
+}
+.mui-bar .mui-btn.mui-pull-right
+{
+    margin-left: 10px;
+}
+.mui-bar .mui-btn.mui-pull-left
+{
+    margin-right: 10px;
+}
+
+.mui-bar .mui-btn-link
+{
+    font-size: 16px;
+    line-height: 44px;
+
+    top: 0;
+
+    padding: 0;
+
+    color: #007aff;
+    border: 0;
+}
+.mui-bar .mui-btn-link:active, .mui-bar .mui-btn-link.mui-active
+{
+    color: #0062cc;
+}
+
+.mui-bar .mui-btn-block
+{
+    font-size: 16px;
+
+    top: 6px;
+
+    margin-bottom: 0;
+    padding: 5px 0;
+}
+
+.mui-bar .mui-btn-nav.mui-pull-left
+{
+    margin-left: -5px;
+}
+.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav
+{
+    margin-right: -3px;
+}
+.mui-bar .mui-btn-nav.mui-pull-right
+{
+    margin-right: -5px;
+}
+.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav
+{
+    margin-left: -3px;
+}
+.mui-bar .mui-btn-nav:active
+{
+    opacity: .3;
+}
+
+.mui-bar .mui-icon
+{
+    font-size: 24px;
+
+    position: relative;
+    z-index: 20;
+
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.mui-bar .mui-icon:active
+{
+    opacity: .3;
+}
+.mui-bar .mui-btn .mui-icon
+{
+    top: 1px;
+
+    margin: 0;
+    padding: 0;
+}
+.mui-bar .mui-title .mui-icon
+{
+    margin: 0;
+    padding: 0;
+}
+.mui-bar .mui-title .mui-icon.mui-icon-caret
+{
+    top: 4px;
+
+    margin-left: -5px;
+}
+
+.mui-bar input[type='search']
+{
+    height: 29px;
+    margin: 6px 0;
+}
+
+.mui-bar .mui-input-row .mui-btn
+{
+    padding: 12px 10px;
+}
+
+.mui-bar .mui-search:before
+{
+    margin-top: -10px;
+}
+
+.mui-bar .mui-input-row .mui-input-clear ~ .mui-icon-clear,
+.mui-bar .mui-input-row .mui-input-speech ~ .mui-icon-speech
+{
+    top: 0;
+    right: 12px;
+}
+
+.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear ~ .mui-icon-clear,
+.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech ~ .mui-icon-speech
+{
+    top: 0;
+    right: 0;
+}
+
+.mui-bar .mui-segmented-control
+{
+    top: 7px;
+
+    width: auto;
+    margin: 0 auto;
+}
+
+.mui-bar.mui-bar-header-secondary .mui-segmented-control
+{
+    top: 0;
+}
+
+.mui-badge
+{
+    font-size: 12px;
+    line-height: 1;
+
+    display: inline-block;
+
+    padding: 3px 6px;
+
+    color: #333;
+    border-radius: 100px;
+    background-color: rgba(0, 0, 0, .15);
+}
+.mui-badge.mui-badge-inverted
+{
+    padding: 0 5px 0 0;
+
+    color: #929292;
+    background-color: transparent;
+}
+
+.mui-badge-primary, .mui-badge-blue
+{
+    color: #fff;
+    background-color: #007aff;
+}
+.mui-badge-primary.mui-badge-inverted, .mui-badge-blue.mui-badge-inverted
+{
+    color: #007aff;
+    background-color: transparent;
+}
+
+.mui-badge-success, .mui-badge-green
+{
+    color: #fff;
+    background-color: #4cd964;
+}
+.mui-badge-success.mui-badge-inverted, .mui-badge-green.mui-badge-inverted
+{
+    color: #4cd964;
+    background-color: transparent;
+}
+
+.mui-badge-warning, .mui-badge-yellow
+{
+    color: #fff;
+    background-color: #f0ad4e;
+}
+.mui-badge-warning.mui-badge-inverted, .mui-badge-yellow.mui-badge-inverted
+{
+    color: #f0ad4e;
+    background-color: transparent;
+}
+
+.mui-badge-danger, .mui-badge-red
+{
+    color: #fff;
+    background-color: #dd524d;
+}
+.mui-badge-danger.mui-badge-inverted, .mui-badge-red.mui-badge-inverted
+{
+    color: #dd524d;
+    background-color: transparent;
+}
+
+.mui-badge-royal, .mui-badge-purple
+{
+    color: #fff;
+    background-color: #8a6de9;
+}
+.mui-badge-royal.mui-badge-inverted, .mui-badge-purple.mui-badge-inverted
+{
+    color: #8a6de9;
+    background-color: transparent;
+}
+
+.mui-icon .mui-badge
+{
+    font-size: 10px;
+    line-height: 1.4;
+
+    position: absolute;
+    top: -2px;
+    left: 100%;
+
+    margin-left: -10px;
+    padding: 1px 5px;
+
+    color: white;
+    background: red;
+}
+
+.mui-card
+{
+    font-size: 14px;
+
+    position: relative;
+
+    overflow: hidden;
+
+    margin: 10px;
+
+    border-radius: 2px;
+    background-color: white;
+    background-clip: padding-box;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+}
+
+.mui-content > .mui-card:first-child
+{
+    margin-top: 15px;
+}
+
+.mui-card .mui-input-group:before, .mui-card .mui-input-group:after
+{
+    height: 0;
+}
+.mui-card .mui-input-group .mui-input-row:last-child:before, .mui-card .mui-input-group .mui-input-row:last-child:after
+{
+    height: 0;
+}
+
+.mui-card .mui-table-view
+{
+    margin-bottom: 0;
+
+    border-top: 0;
+    border-bottom: 0;
+    border-radius: 6px;
+}
+.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
+{
+    top: 0;
+
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
+{
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+.mui-card .mui-table-view:before, .mui-card .mui-table-view:after
+{
+    height: 0;
+}
+
+.mui-card > .mui-table-view > .mui-table-view-cell:last-child:before, .mui-card > .mui-table-view > .mui-table-view-cell:last-child:after
+{
+    height: 0;
+}
+
+.mui-card-header,
+.mui-card-footer
+{
+    position: relative;
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display:         flex;
+
+    min-height: 44px;
+    padding: 10px 15px;
+
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+}
+.mui-card-header .mui-card-link,
+.mui-card-footer .mui-card-link
+{
+    line-height: 44px;
+
+    position: relative;
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display:         flex;
+
+    height: 44px;
+    margin-top: -10px;
+    margin-bottom: -10px;
+
+    -webkit-transition-duration: .3s;
+            transition-duration: .3s;
+    text-decoration: none;
+
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+}
+
+.mui-card-header:after,
+.mui-card-footer:before
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-card-header
+{
+    font-size: 17px;
+
+    border-radius: 2px 2px 0 0;
+}
+.mui-card-header:after
+{
+    top: auto;
+    bottom: 0;
+}
+.mui-card-header > img:first-child
+{
+    font-size: 0;
+    line-height: 0;
+
+    float: left;
+
+    width: 34px;
+    height: 34px;
+}
+
+.mui-card-footer
+{
+    color: #6d6d72;
+    border-radius: 0 0 2px 2px;
+}
+
+.mui-card-content
+{
+    font-size: 14px;
+
+    position: relative;
+}
+
+.mui-card-content-inner
+{
+    position: relative;
+
+    padding: 15px;
+}
+
+.mui-card-media
+{
+    vertical-align: bottom;
+
+    color: #fff;
+    background-position: center;
+    background-size: cover;
+}
+
+.mui-card-header.mui-card-media
+{
+    display: block;
+
+    padding: 10px;
+}
+.mui-card-header.mui-card-media .mui-media-body
+{
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 17px;
+
+    margin-bottom: 0;
+    margin-left: 44px;
+
+    color: #333;
+}
+.mui-card-header.mui-card-media .mui-media-body p
+{
+    font-size: 13px;
+
+    margin-bottom: 0;
+}
+
+.mui-table-view
+{
+    position: relative;
+
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    list-style: none;
+
+    background-color: #fff;
+}
+.mui-table-view:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-table-view:before
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-table-view:before
+{
+    top: -1px;
+}
+
+.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
+{
+    font-size: 20px;
+
+    margin-top: -1px;
+    margin-right: 5px;
+    margin-left: -5px;
+}
+.mui-table-view-icon .mui-table-view-cell:after
+{
+    left: 40px;
+}
+
+.mui-table-view-chevron .mui-table-view-cell
+{
+    padding-right: 65px;
+}
+.mui-table-view-chevron .mui-table-view-cell > a:not(.mui-btn)
+{
+    margin-right: -65px;
+}
+
+.mui-table-view-radio .mui-table-view-cell
+{
+    padding-right: 65px;
+}
+.mui-table-view-radio .mui-table-view-cell > a:not(.mui-btn)
+{
+    margin-right: -65px;
+}
+.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after
+{
+    font-size: 30px;
+    font-weight: 600;
+
+    right: 9px;
+
+    content: '';
+
+    color: #007aff;
+}
+.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after
+{
+    content: '\e472';
+}
+
+.mui-table-view-inverted
+{
+    color: #fff;
+    background: #333;
+}
+.mui-table-view-inverted:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #222;
+}
+.mui-table-view-inverted:before
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #222;
+}
+.mui-table-view-inverted .mui-table-view-cell:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 15px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #222;
+}
+.mui-table-view-inverted .mui-table-view-cell.mui-active
+{
+    background-color: #242424;
+}
+.mui-table-view-inverted .mui-table-view-cell > a:not(.mui-btn).mui-active
+{
+    background-color: #242424;
+}
+
+.mui-table-view-cell
+{
+    position: relative;
+
+    overflow: hidden;
+
+    padding: 11px 15px;
+
+    -webkit-touch-callout: none;
+}
+.mui-table-view-cell:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 15px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-table-view-cell.mui-radio input[type=radio], .mui-table-view-cell.mui-checkbox input[type=checkbox]
+{
+    top: 8px;
+}
+.mui-table-view-cell.mui-radio.mui-left, .mui-table-view-cell.mui-checkbox.mui-left
+{
+    padding-left: 58px;
+}
+.mui-table-view-cell.mui-active
+{
+    background-color: #eee;
+}
+.mui-table-view-cell:last-child:before, .mui-table-view-cell:last-child:after
+{
+    height: 0;
+}
+.mui-table-view-cell > a:not(.mui-btn)
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: -11px -15px;
+    padding: inherit;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: inherit;
+  /*&:active {
+      background-color: #eee;
+  }*/
+}
+.mui-table-view-cell > a:not(.mui-btn).mui-active
+{
+    background-color: #eee;
+}
+.mui-table-view-cell p
+{
+    margin-bottom: 0;
+}
+
+.mui-table-view-cell.mui-transitioning > .mui-slider-handle, .mui-table-view-cell.mui-transitioning > .mui-slider-left .mui-btn, .mui-table-view-cell.mui-transitioning > .mui-slider-right .mui-btn
+{
+    -webkit-transition: -webkit-transform 300ms ease;
+            transition:         transform 300ms ease;
+}
+.mui-table-view-cell.mui-active > .mui-slider-handle
+{
+    background-color: #eee;
+}
+.mui-table-view-cell > .mui-slider-handle
+{
+    position: relative;
+
+    background-color: #fff;
+}
+.mui-table-view-cell > .mui-slider-handle.mui-navigate-right:after, .mui-table-view-cell > .mui-slider-handle .mui-navigate-right:after
+{
+    right: 0;
+}
+.mui-table-view-cell > .mui-slider-handle, .mui-table-view-cell > .mui-slider-left .mui-btn, .mui-table-view-cell > .mui-slider-right .mui-btn
+{
+    -webkit-transition: -webkit-transform 0ms ease;
+            transition:         transform 0ms ease;
+}
+.mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right
+{
+    position: absolute;
+    top: 0;
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display:         flex;
+
+    height: 100%;
+}
+.mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn
+{
+    position: relative;
+    left: 0;
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display:         flex;
+
+    padding: 0 30px;
+
+    color: #fff;
+    border: 0;
+    border-radius: 0;
+
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+}
+.mui-table-view-cell > .mui-slider-left > .mui-btn:after, .mui-table-view-cell > .mui-slider-right > .mui-btn:after
+{
+    position: absolute;
+    z-index: -1;
+    top: 0;
+
+    width: 600%;
+    height: 100%;
+
+    content: '';
+
+    background: inherit;
+}
+.mui-table-view-cell > .mui-slider-left > .mui-btn.mui-icon, .mui-table-view-cell > .mui-slider-right > .mui-btn.mui-icon
+{
+    font-size: 30px;
+}
+.mui-table-view-cell > .mui-slider-right
+{
+    right: 0;
+
+    -webkit-transition: -webkit-transform 0ms ease;
+            transition:         transform 0ms ease;
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+}
+.mui-table-view-cell > .mui-slider-left
+{
+    left: 0;
+
+    -webkit-transition: -webkit-transform 0ms ease;
+            transition:         transform 0ms ease;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+}
+.mui-table-view-cell > .mui-slider-left > .mui-btn:after
+{
+    right: 100%;
+
+    margin-right: -1px;
+}
+
+.mui-table-view-divider
+{
+    font-weight: 500;
+
+    position: relative;
+
+    margin-top: -1px;
+    margin-left: 0;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 15px;
+
+    color: #999;
+    background-color: #fafafa;
+}
+.mui-table-view-divider:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-table-view-divider:before
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-table-view .mui-media,
+.mui-table-view .mui-media-body
+{
+    overflow: hidden;
+}
+
+.mui-table-view .mui-media-large .mui-media-object
+{
+    line-height: 80px;
+
+    max-width: 80px;
+    height: 80px;
+}
+.mui-table-view .mui-media .mui-subtitle
+{
+    color: #000;
+}
+.mui-table-view .mui-media-object
+{
+    line-height: 42px;
+
+    max-width: 42px;
+    height: 42px;
+}
+.mui-table-view .mui-media-object.mui-pull-left
+{
+    margin-right: 10px;
+}
+.mui-table-view .mui-media-object.mui-pull-right
+{
+    margin-left: 10px;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object
+{
+    line-height: 29px;
+
+    max-width: 29px;
+    height: 29px;
+    margin: -4px 0;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img
+{
+    line-height: 29px;
+
+    max-width: 29px;
+    height: 29px;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left
+{
+    margin-right: 10px;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon
+{
+    font-size: 29px;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 55px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-table-view .mui-table-view-cell.mui-media-icon:after
+{
+    height: 0 !important;
+}
+
+.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view
+{
+    display: block;
+}
+.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after
+{
+    height: 0 !important;
+}
+.mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 70px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-table-view-cell > .mui-btn,
+.mui-table-view-cell > .mui-badge,
+.mui-table-view-cell > .mui-switch,
+.mui-table-view-cell > a > .mui-btn,
+.mui-table-view-cell > a > .mui-badge,
+.mui-table-view-cell > a > .mui-switch
+{
+    position: absolute;
+    top: 50%;
+    right: 15px;
+
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+}
+.mui-table-view-cell .mui-navigate-right > .mui-btn,
+.mui-table-view-cell .mui-navigate-right > .mui-badge,
+.mui-table-view-cell .mui-navigate-right > .mui-switch,
+.mui-table-view-cell .mui-push-left > .mui-btn,
+.mui-table-view-cell .mui-push-left > .mui-badge,
+.mui-table-view-cell .mui-push-left > .mui-switch,
+.mui-table-view-cell .mui-push-right > .mui-btn,
+.mui-table-view-cell .mui-push-right > .mui-badge,
+.mui-table-view-cell .mui-push-right > .mui-switch,
+.mui-table-view-cell > a .mui-navigate-right > .mui-btn,
+.mui-table-view-cell > a .mui-navigate-right > .mui-badge,
+.mui-table-view-cell > a .mui-navigate-right > .mui-switch,
+.mui-table-view-cell > a .mui-push-left > .mui-btn,
+.mui-table-view-cell > a .mui-push-left > .mui-badge,
+.mui-table-view-cell > a .mui-push-left > .mui-switch,
+.mui-table-view-cell > a .mui-push-right > .mui-btn,
+.mui-table-view-cell > a .mui-push-right > .mui-badge,
+.mui-table-view-cell > a .mui-push-right > .mui-switch
+{
+    right: 35px;
+}
+
+.mui-content > .mui-table-view:first-child
+{
+    margin-top: 15px;
+}
+
+.mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view-cell.mui-collapse .mui-table-view:after
+{
+    height: 0;
+}
+.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after
+{
+    height: 0;
+}
+.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after
+{
+    content: '\e581';
+}
+.mui-table-view-cell.mui-collapse.mui-active
+{
+    margin-top: -1px;
+}
+.mui-table-view-cell.mui-collapse.mui-active .mui-table-view, .mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content
+{
+    display: block;
+}
+.mui-table-view-cell.mui-collapse.mui-active > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse.mui-active > .mui-push-right:after
+{
+    content: '\e580';
+}
+.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell > a:not(.mui-btn).mui-active
+{
+    margin-left: -31px;
+    padding-left: 47px;
+}
+.mui-table-view-cell.mui-collapse .mui-collapse-content
+{
+    position: relative;
+
+    display: none;
+    overflow: hidden;
+
+    margin: 11px -15px -11px;
+    padding: 8px 15px;
+
+    -webkit-transition: height .35s ease;
+         -o-transition: height .35s ease;
+            transition: height .35s ease;
+
+    background: white;
+}
+.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-input-group, .mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
+{
+    width: auto;
+    height: auto;
+    margin: -8px -15px;
+}
+.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
+{
+    margin: -8px -16px;
+}
+.mui-table-view-cell.mui-collapse .mui-table-view
+{
+    display: none;
+
+    margin-top: 11px;
+    margin-right: -15px;
+    margin-bottom: -11px;
+    margin-left: -15px;
+
+    border: 0;
+}
+.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron
+{
+    margin-right: -65px;
+}
+.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell
+{
+    padding-left: 31px;
+
+    background-position: 31px 100%;
+}
+.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 30px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-table-view.mui-grid-view
+{
+    font-size: 0;
+
+    display: block;
+
+    width: 100%;
+    padding: 0 10px 10px 0;
+
+    white-space: normal;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell
+{
+    font-size: 17px;
+
+    display: inline-block;
+
+    margin-right: -4px;
+    padding: 10px 0 0 14px;
+
+    text-align: center;
+    vertical-align: middle;
+
+    background: none;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object
+{
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn)
+{
+    margin: -10px 0 0 -14px;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn):active, .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn).mui-active
+{
+    background: none;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body
+{
+    font-size: 15px;
+    line-height: 15px;
+
+    display: block;
+
+    width: 100%;
+    height: 15px;
+    margin-top: 8px;
+
+    text-overflow: ellipsis;
+
+    color: #333;
+}
+.mui-table-view.mui-grid-view .mui-table-view-cell:before, .mui-table-view.mui-grid-view .mui-table-view-cell:after
+{
+    height: 0;
+}
+
+.mui-grid-view.mui-grid-9
+{
+    margin: 0;
+    padding: 0;
+
+    border-top: 1px solid #eee;
+    border-left: 1px solid #eee;
+    background-color: #f2f2f2;
+}
+.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-grid-view.mui-grid-9:after
+{
+    clear: both;
+}
+.mui-grid-view.mui-grid-9:after
+{
+    position: static;
+}
+.mui-grid-view.mui-grid-9 .mui-table-view-cell
+{
+    margin: 0;
+    padding: 11px 15px;
+
+    vertical-align: top;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+}
+.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
+{
+    background-color: #eee;
+}
+.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn)
+{
+    margin: 0;
+    padding: 10px 0;
+}
+.mui-grid-view.mui-grid-9:before
+{
+    height: 0;
+}
+.mui-grid-view.mui-grid-9 .mui-media
+{
+    color: #797979;
+}
+.mui-grid-view.mui-grid-9 .mui-media .mui-icon
+{
+    font-size: 2.4em;
+
+    position: relative;
+}
+
+.mui-slider-cell
+{
+    position: relative;
+}
+.mui-slider-cell > .mui-slider-handle
+{
+    z-index: 1;
+}
+.mui-slider-cell > .mui-slider-left, .mui-slider-cell > .mui-slider-right
+{
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+}
+.mui-slider-cell > .mui-slider-left
+{
+    left: 0;
+}
+.mui-slider-cell > .mui-slider-right
+{
+    right: 0;
+}
+
+input,
+textarea,
+select
+{
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    font-size: 17px;
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+}
+input:focus,
+textarea:focus,
+select:focus
+{
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-modify: read-write-plaintext-only;
+}
+
+select,
+textarea,
+input[type='text'],
+input[type='search'],
+input[type='password'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='date'],
+input[type='month'],
+input[type='time'],
+input[type='week'],
+input[type='number'],
+input[type='email'],
+input[type='url'],
+input[type='tel'],
+input[type='color']
+{
+    line-height: 21px;
+
+    width: 100%;
+    height: 40px;
+    margin-bottom: 15px;
+    padding: 10px 15px;
+
+    -webkit-user-select: text;
+
+    border: 1px solid rgba(0, 0, 0, .2);
+    border-radius: 3px;
+    outline: none;
+    background-color: #fff;
+
+    -webkit-appearance: none;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button
+{
+    margin: 0;
+
+    -webkit-appearance: none;
+}
+
+input[type='search']
+{
+    font-size: 16px;
+
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    height: 34px;
+
+    text-align: center;
+
+    border: 0;
+    border-radius: 6px;
+    background-color: rgba(0, 0, 0, .1);
+}
+
+input[type='search']:focus
+{
+    text-align: left;
+}
+
+textarea
+{
+    height: auto;
+
+    resize: none;
+}
+
+select
+{
+    font-size: 14px;
+
+    height: auto;
+    margin-top: 1px;
+
+    border: 0 !important;
+    background-color: #fff;
+}
+select:focus
+{
+    -webkit-user-modify: read-only;
+}
+
+.mui-input-group
+{
+    position: relative;
+
+    padding: 0;
+
+    border: 0;
+    background-color: #fff;
+}
+.mui-input-group:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-input-group:before
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-input-group input,
+.mui-input-group textarea
+{
+    margin-bottom: 0;
+
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.mui-input-group input[type='search']
+{
+    background: none;
+}
+
+.mui-input-group input:last-child
+{
+    background-image: none;
+}
+
+.mui-input-row
+{
+    clear: left;
+    overflow: hidden;
+}
+.mui-input-row select
+{
+    font-size: 17px;
+
+    height: 37px;
+    padding: 0;
+}
+
+.mui-input-row:last-child,
+.mui-input-row label + input, .mui-input-row .mui-btn + input
+{
+    background: none;
+}
+
+.mui-input-group .mui-input-row
+{
+    height: 40px;
+}
+.mui-input-group .mui-input-row:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 15px;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+
+.mui-input-row label
+{
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    line-height: 1.1;
+
+    float: left;
+
+    width: 35%;
+    padding: 11px 15px;
+}
+
+.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea
+{
+    float: right;
+
+    width: 65%;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    border: 0;
+}
+
+.mui-input-row .mui-btn
+{
+    line-height: 1.1;
+
+    float: right;
+
+    width: 15%;
+    padding: 10px 15px;
+}
+
+.mui-input-row .mui-btn ~ input, .mui-input-row .mui-btn ~ select, .mui-input-row .mui-btn ~ textarea
+{
+    float: left;
+
+    width: 85%;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    border: 0;
+}
+
+.mui-button-row
+{
+    position: relative;
+
+    padding-top: 5px;
+
+    text-align: center;
+}
+
+.mui-input-group .mui-button-row
+{
+    height: 45px;
+}
+
+.mui-input-row
+{
+    position: relative;
+}
+.mui-input-row.mui-input-range
+{
+    overflow: visible;
+
+    padding-right: 20px;
+}
+.mui-input-row .mui-inline
+{
+    padding: 8px 0;
+}
+.mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech, .mui-input-row .mui-input-password ~ .mui-icon-eye
+{
+    font-size: 20px;
+
+    position: absolute;
+    z-index: 1;
+    top: 10px;
+    right: 0;
+
+    width: 38px;
+    height: 38px;
+
+    text-align: center;
+
+    color: #999;
+}
+.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-active, .mui-input-row .mui-input-speech ~ .mui-icon-speech.mui-active, .mui-input-row .mui-input-password ~ .mui-icon-eye.mui-active
+{
+    color: #007aff;
+}
+.mui-input-row .mui-input-speech ~ .mui-icon-speech
+{
+    font-size: 24px;
+
+    top: 8px;
+}
+.mui-input-row .mui-input-clear ~ .mui-icon-clear ~ .mui-icon-speech
+{
+    display: none;
+}
+.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-hidden ~ .mui-icon-speech
+{
+    display: inline-block;
+}
+.mui-input-row .mui-icon-speech ~ .mui-placeholder
+{
+    right: 38px;
+}
+.mui-input-row.mui-search .mui-icon-clear
+{
+    top: 7px;
+}
+.mui-input-row.mui-search .mui-icon-speech
+{
+    top: 5px;
+}
+
+.mui-radio, .mui-checkbox
+{
+    position: relative;
+}
+.mui-radio label, .mui-checkbox label
+{
+    display: inline-block;
+    float: none;
+
+    width: 100%;
+    padding-right: 58px;
+}
+
+.mui-radio.mui-left input[type='radio'], .mui-checkbox.mui-left input[type='checkbox']
+{
+    left: 20px;
+}
+
+.mui-radio.mui-left label, .mui-checkbox.mui-left label
+{
+    padding-right: 15px;
+    padding-left: 58px;
+}
+
+.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']
+{
+    position: absolute;
+    top: 4px;
+    right: 20px;
+
+    display: inline-block;
+
+    width: 28px;
+    height: 26px;
+
+    border: 0;
+    outline: 0 !important;
+    background-color: transparent;
+
+    -webkit-appearance: none;
+}
+.mui-radio input[type='radio'][disabled]:before, .mui-checkbox input[type='checkbox'][disabled]:before
+{
+    opacity: .3;
+}
+.mui-radio input[type='radio']:before, .mui-checkbox input[type='checkbox']:before
+{
+    font-family: Muiicons;
+    font-size: 28px;
+    font-weight: normal;
+    line-height: 1;
+
+    text-decoration: none;
+
+    color: #aaa;
+    border-radius: 0;
+    background: none;
+
+    -webkit-font-smoothing: antialiased;
+}
+.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before
+{
+    color: #007aff;
+}
+
+.mui-radio.mui-disabled label, .mui-radio label.mui-disabled, .mui-checkbox.mui-disabled label, .mui-checkbox label.mui-disabled
+{
+    opacity: .4;
+}
+
+.mui-radio input[type='radio']:before
+{
+    content: '\e411';
+}
+
+.mui-radio input[type='radio']:checked:before
+{
+    content: '\e441';
+}
+
+.mui-checkbox input[type='checkbox']:before
+{
+    content: '\e411';
+}
+
+.mui-checkbox input[type='checkbox']:checked:before
+{
+    content: '\e442';
+}
+
+.mui-select
+{
+    position: relative;
+}
+
+.mui-select:before
+{
+    font-family: Muiicons;
+
+    position: absolute;
+    top: 8px;
+    right: 21px;
+
+    content: '\e581';
+
+    color: rgba(170, 170, 170, .6);
+}
+
+.mui-input-row .mui-switch
+{
+    float: right;
+
+    margin-top: 5px;
+    margin-right: 20px;
+}
+
+.mui-input-range
+{
+  /*input[type="range"] {
+      -webkit-appearance: none;
+      background: #999;
+      height: 36px;
+      border-radius: 1px;
+      overflow: hidden;
+      margin-top: 2px;
+      margin-bottom: 2px;
+      outline:none;
+      position:relative;
+      width:100%;
+  }*/
+  /*input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none!important;
+      opacity: 0.5;
+      height:28px;
+      width:28px;
+      border-radius: 50%;
+      background:#00b7fb;
+      position: relative;
+      pointer-events: none;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      &:before{
+          position: absolute;
+          top: 13px;
+          left: -2000px;
+          width: 2000px;
+          height: 2px;
+          background: #00b7fb;
+          content:' ';
+      }
+  }*/
+}
+.mui-input-range input[type='range']
+{
+    position: relative;
+
+    width: 100%;
+    height: 2px;
+    margin: 17px 0;
+    padding: 0;
+
+    cursor: pointer;
+
+    border: 0;
+    border-radius: 3px;
+    outline: none;
+    background-color: #999;
+
+    -webkit-appearance: none !important;
+}
+.mui-input-range input[type='range']::-webkit-slider-thumb
+{
+    width: 28px;
+    height: 28px;
+
+    border-color: #0062cc;
+    border-radius: 50%;
+    background-color: #007aff;
+    background-clip: padding-box;
+
+    -webkit-appearance: none !important;
+}
+.mui-input-range label ~ input[type='range']
+{
+    width: 65%;
+}
+.mui-input-range .mui-tooltip
+{
+    font-size: 36px;
+    line-height: 64px;
+
+    position: absolute;
+    z-index: 1;
+    top: -70px;
+
+    width: 64px;
+    height: 64px;
+
+    text-align: center;
+
+    opacity: .8;
+    color: #333;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background-color: #fff;
+    text-shadow: 0 1px 0 #f3f3f3;
+}
+
+.mui-search
+{
+    position: relative;
+}
+.mui-search input[type='search']
+{
+    padding-left: 30px;
+}
+.mui-search .mui-placeholder
+{
+    font-size: 16px;
+    line-height: 34px;
+
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: inline-block;
+
+    height: 34px;
+
+    text-align: center;
+
+    color: #999;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+}
+.mui-search .mui-placeholder .mui-icon
+{
+    font-size: 20px;
+
+    color: #333;
+}
+.mui-search:before
+{
+    font-family: Muiicons;
+    font-size: 20px;
+    font-weight: normal;
+
+    position: absolute;
+    top: 50%;
+    right: 50%;
+
+    display: none;
+
+    margin-top: -18px;
+    margin-right: 31px;
+
+    content: '\e466';
+}
+.mui-search.mui-active:before
+{
+    font-size: 20px;
+
+    right: auto;
+    left: 5px;
+
+    display: block;
+
+    margin-right: 0;
+}
+.mui-search.mui-active input[type='search']
+{
+    text-align: left;
+}
+.mui-search.mui-active .mui-placeholder
+{
+    display: none;
+}
+
+.mui-segmented-control
+{
+    font-size: 15px;
+    font-weight: 400;
+
+    position: relative;
+
+    display: table;
+    overflow: hidden;
+
+    width: 100%;
+
+    table-layout: fixed;
+
+    border: 1px solid #007aff;
+    border-radius: 3px;
+    background-color: transparent;
+
+    -webkit-touch-callout: none;
+}
+.mui-segmented-control.mui-segmented-control-vertical
+{
+    border-collapse: collapse;
+
+    border-width: 0;
+    border-radius: 0;
+}
+.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
+{
+    display: block;
+
+    border-bottom: 1px solid #c8c7cc;
+    border-left-width: 0;
+}
+.mui-segmented-control.mui-scroll-wrapper
+{
+    height: 38px;
+}
+.mui-segmented-control.mui-scroll-wrapper .mui-scroll
+{
+    width: auto;
+    height: 40px;
+
+    white-space: nowrap;
+}
+.mui-segmented-control.mui-scroll-wrapper .mui-control-item
+{
+    display: inline-block;
+
+    width: auto;
+    padding: 0 20px;
+
+    border: 0;
+}
+.mui-segmented-control .mui-control-item
+{
+    line-height: 38px;
+
+    display: table-cell;
+    overflow: hidden;
+
+    width: 1%;
+
+    -webkit-transition: background-color .1s linear;
+            transition: background-color .1s linear;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: #007aff;
+    border-color: #007aff;
+    border-left: 1px solid #007aff;
+}
+.mui-segmented-control .mui-control-item:first-child
+{
+    border-left-width: 0;
+}
+.mui-segmented-control .mui-control-item.mui-active
+{
+    color: #fff;
+    background-color: #007aff;
+}
+.mui-segmented-control.mui-segmented-control-inverted
+{
+    width: 100%;
+
+    border: 0;
+    border-radius: 0;
+}
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
+{
+    border-bottom: 1px solid #c8c7cc;
+}
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
+{
+    border-bottom: 1px solid #c8c7cc;
+}
+.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
+{
+    color: inherit;
+    border: 0;
+}
+.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
+{
+    color: #007aff;
+    border-bottom: 2px solid #007aff;
+    background: none;
+}
+.mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar
+{
+    background-color: #007aff;
+}
+
+.mui-segmented-control-positive
+{
+    border: 1px solid #4cd964;
+}
+.mui-segmented-control-positive .mui-control-item
+{
+    color: #4cd964;
+    border-color: inherit;
+}
+.mui-segmented-control-positive .mui-control-item.mui-active
+{
+    color: #fff;
+    background-color: #4cd964;
+}
+.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active
+{
+    color: #4cd964;
+    border-bottom: 2px solid #4cd964;
+    background: none;
+}
+.mui-segmented-control-positive.mui-segmented-control-inverted ~ .mui-slider-progress-bar
+{
+    background-color: #4cd964;
+}
+
+.mui-segmented-control-negative
+{
+    border: 1px solid #dd524d;
+}
+.mui-segmented-control-negative .mui-control-item
+{
+    color: #dd524d;
+    border-color: inherit;
+}
+.mui-segmented-control-negative .mui-control-item.mui-active
+{
+    color: #fff;
+    background-color: #dd524d;
+}
+.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active
+{
+    color: #dd524d;
+    border-bottom: 2px solid #dd524d;
+    background: none;
+}
+.mui-segmented-control-negative.mui-segmented-control-inverted ~ .mui-slider-progress-bar
+{
+    background-color: #dd524d;
+}
+
+.mui-control-content
+{
+    position: relative;
+
+    display: none;
+}
+.mui-control-content.mui-active
+{
+    display: block;
+}
+
+.mui-popover
+{
+    position: absolute;
+    z-index: 999;
+
+    display: none;
+
+    width: 280px;
+
+    -webkit-transition: opacity .3s;
+            transition: opacity .3s;
+    -webkit-transition-property: opacity;
+            transition-property: opacity;
+    -webkit-transform: none;
+            transform: none;
+
+    opacity: 0;
+    border-radius: 7px;
+    background-color: #f7f7f7;
+    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
+            box-shadow: 0 0 15px rgba(0, 0, 0, .1);
+}
+.mui-popover .mui-popover-arrow
+{
+    position: absolute;
+    z-index: 1000;
+    top: -25px;
+    left: 0;
+
+    overflow: hidden;
+
+    width: 26px;
+    height: 26px;
+}
+.mui-popover .mui-popover-arrow:after
+{
+    position: absolute;
+    top: 19px;
+    left: 0;
+
+    width: 26px;
+    height: 26px;
+
+    content: ' ';
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+
+    border-radius: 3px;
+    background: #f7f7f7;
+}
+.mui-popover .mui-popover-arrow.mui-bottom
+{
+    top: 100%;
+    left: -26px;
+
+    margin-top: -1px;
+}
+.mui-popover .mui-popover-arrow.mui-bottom:after
+{
+    top: -19px;
+    left: 0;
+}
+.mui-popover.mui-popover-action
+{
+    bottom: 0;
+
+    width: 100%;
+
+    -webkit-transition: -webkit-transform .3s, opacity .3s;
+            transition:         transform .3s, opacity .3s;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+
+    border-radius: 0;
+    background: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+.mui-popover.mui-popover-action .mui-popover-arrow
+{
+    display: none;
+}
+.mui-popover.mui-popover-action.mui-popover-bottom
+{
+    position: fixed;
+}
+.mui-popover.mui-popover-action.mui-active
+{
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+.mui-popover.mui-popover-action .mui-table-view
+{
+    margin: 8px;
+
+    text-align: center;
+
+    color: #007aff;
+    border-radius: 4px;
+}
+.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+
+    background-color: #c8c7cc;
+}
+.mui-popover.mui-popover-action .mui-table-view small
+{
+    font-weight: 400;
+    line-height: 1.3;
+
+    display: block;
+}
+.mui-popover.mui-active
+{
+    display: block;
+
+    opacity: 1;
+}
+.mui-popover .mui-bar ~ .mui-table-view
+{
+    padding-top: 44px;
+}
+
+.mui-backdrop
+{
+    position: fixed;
+    z-index: 998;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-color: rgba(0, 0, 0, .3);
+}
+
+.mui-bar-backdrop.mui-backdrop
+{
+    bottom: 50px;
+
+    background: none;
+}
+
+.mui-backdrop-action.mui-backdrop
+{
+    background-color: rgba(0, 0, 0, .3);
+}
+
+.mui-bar-backdrop.mui-backdrop, .mui-backdrop-action.mui-backdrop
+{
+    opacity: 0;
+}
+.mui-bar-backdrop.mui-backdrop.mui-active, .mui-backdrop-action.mui-backdrop.mui-active
+{
+    -webkit-transition: all .4s ease;
+            transition: all .4s ease;
+
+    opacity: 1;
+}
+
+.mui-popover .mui-btn-block
+{
+    margin-bottom: 5px;
+}
+.mui-popover .mui-btn-block:last-child
+{
+    margin-bottom: 0;
+}
+
+.mui-popover .mui-bar
+{
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.mui-popover .mui-bar-nav
+{
+    border-bottom: 1px solid rgba(0, 0, 0, .15);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.mui-popover .mui-scroll-wrapper
+{
+    margin: 7px 0;
+
+    border-radius: 7px;
+    background-clip: padding-box;
+}
+
+.mui-popover .mui-scroll .mui-table-view
+{
+    max-height: none;
+}
+
+.mui-popover .mui-table-view
+{
+    overflow: auto;
+
+    max-height: 300px;
+    margin-bottom: 0;
+
+    border-radius: 7px;
+    background-color: #f7f7f7;
+    background-image: none;
+
+    -webkit-overflow-scrolling: touch;
+}
+.mui-popover .mui-table-view:before, .mui-popover .mui-table-view:after
+{
+    height: 0;
+}
+.mui-popover .mui-table-view .mui-table-view-cell:first-child,
+.mui-popover .mui-table-view .mui-table-view-cell:first-child > a:not(.mui-btn)
+{
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.mui-popover .mui-table-view .mui-table-view-cell:last-child,
+.mui-popover .mui-table-view .mui-table-view-cell:last-child > a:not(.mui-btn)
+{
+    border-bottom-right-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.mui-popover.mui-bar-popover .mui-table-view
+{
+    width: 106px;
+}
+.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell
+{
+    padding: 11px 15px 11px 15px;
+
+    background-position: 0 100%;
+}
+.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell > a:not(.mui-btn)
+{
+    margin: -11px -15px -11px -15px;
+}
+
+.mui-popup-backdrop
+{
+    position: fixed;
+    z-index: 998;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    -webkit-transition-duration: 400ms;
+            transition-duration: 400ms;
+
+    opacity: 0;
+    background: rgba(0, 0, 0, .4);
+}
+.mui-popup-backdrop.mui-active
+{
+    opacity: 1;
+}
+
+.mui-popup
+{
+    position: fixed;
+    z-index: 10000;
+    top: 50%;
+    left: 50%;
+
+    display: none;
+    overflow: hidden;
+
+    width: 270px;
+
+    -webkit-transition-property: -webkit-transform,opacity;
+            transition-property:         transform,opacity;
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
+            transform: translate3d(-50%, -50%, 0) scale(1.185);
+    text-align: center;
+
+    opacity: 0;
+    color: #000;
+    border-radius: 13px;
+}
+.mui-popup.mui-popup-in
+{
+    display: block;
+
+    -webkit-transition-duration: 400ms;
+            transition-duration: 400ms;
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
+            transform: translate3d(-50%, -50%, 0) scale(1);
+
+    opacity: 1;
+}
+.mui-popup.mui-popup-out
+{
+    -webkit-transition-duration: 400ms;
+            transition-duration: 400ms;
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
+            transform: translate3d(-50%, -50%, 0) scale(1);
+
+    opacity: 0;
+}
+
+.mui-popup-inner
+{
+    position: relative;
+
+    padding: 15px;
+
+    border-radius: 13px 13px 0 0;
+    background: rgba(255, 255, 255, .95);
+}
+.mui-popup-inner:after
+{
+    position: absolute;
+    z-index: 15;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    width: 100%;
+    height: 1px;
+
+    content: '';
+    -webkit-transform: scaleY(.5);
+            transform: scaleY(.5);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+
+    background-color: rgba(0, 0, 0, .2);
+}
+
+.mui-popup-title
+{
+    font-size: 18px;
+    font-weight: 500;
+
+    text-align: center;
+}
+
+.mui-popup-title + .mui-popup-text
+{
+    font-family: inherit;
+    font-size: 14px;
+
+    margin: 5px 0 0;
+}
+
+.mui-popup-buttons
+{
+    position: relative;
+
+    display: -webkit-box;
+    display: -webkit-flex;
+    display:         flex;
+
+    height: 44px;
+
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+            justify-content: center;
+}
+
+.mui-popup-button
+{
+    font-size: 17px;
+    line-height: 44px;
+
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 44px;
+    padding: 0 5px;
+
+    cursor: pointer;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: #007aff;
+    background: rgba(255, 255, 255, .95);
+
+    -webkit-box-flex: 1;
+}
+.mui-popup-button:after
+{
+    position: absolute;
+    z-index: 15;
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+
+    display: block;
+
+    width: 1px;
+    height: 100%;
+
+    content: '';
+    -webkit-transform: scaleX(.5);
+            transform: scaleX(.5);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+
+    background-color: rgba(0, 0, 0, .2);
+}
+.mui-popup-button:first-child
+{
+    border-radius: 0 0 0 13px;
+}
+.mui-popup-button:first-child:last-child
+{
+    border-radius: 0 0 13px 13px;
+}
+.mui-popup-button:last-child
+{
+    border-radius: 0 0 13px 0;
+}
+.mui-popup-button:last-child:after
+{
+    display: none;
+}
+.mui-popup-button.mui-popup-button-bold
+{
+    font-weight: 600;
+}
+
+.mui-popup-input input
+{
+    font-size: 14px;
+
+    width: 100%;
+    height: 26px;
+    margin: 15px 0 0;
+    padding: 0 5px;
+
+    border: 1px solid rgba(0, 0, 0, .3);
+    border-radius: 0;
+    background: #fff;
+}
+
+.mui-plus.mui-android .mui-popup-backdrop
+{
+    -webkit-transition-duration: 1ms;
+            transition-duration: 1ms;
+}
+
+.mui-plus.mui-android .mui-popup
+{
+    -webkit-transition-duration: 1ms;
+            transition-duration: 1ms;
+    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
+            transform: translate3d(-50%, -50%, 0) scale(1);
+}
+
+/* === Progress Bar === */
+.mui-progressbar
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    width: 100%;
+    height: 2px;
+
+    -webkit-transform-origin: center top;
+            transform-origin: center top;
+    vertical-align: middle;
+
+    border-radius: 2px;
+    background: #b6b6b6;
+
+    -webkit-transform-style: preserve-3d;
+            transform-style: preserve-3d;
+}
+.mui-progressbar span
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    -webkit-transition: 150ms;
+            transition: 150ms;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+
+    background: #007aff;
+}
+.mui-progressbar.mui-progressbar-infinite:before
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: '';
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: left center;
+            transform-origin: left center;
+    -webkit-animation: mui-progressbar-infinite 1s linear infinite;
+            animation: mui-progressbar-infinite 1s linear infinite;
+
+    background: #007aff;
+}
+
+body > .mui-progressbar
+{
+    position: absolute;
+    z-index: 10000;
+    top: 44px;
+    left: 0;
+
+    border-radius: 0;
+}
+
+.mui-progressbar-in
+{
+    -webkit-animation: mui-progressbar-in 300ms forwards;
+            animation: mui-progressbar-in 300ms forwards;
+}
+
+.mui-progressbar-out
+{
+    -webkit-animation: mui-progressbar-out 300ms forwards;
+            animation: mui-progressbar-out 300ms forwards;
+}
+
+@-webkit-keyframes mui-progressbar-in
+{
+    from
+    {
+        -webkit-transform: scaleY(0);
+
+        opacity: 0;
+    }
+
+    to
+    {
+        -webkit-transform: scaleY(1);
+
+        opacity: 1;
+    }
+}
+@keyframes mui-progressbar-in
+{
+    from
+    {
+        transform: scaleY(0);
+
+        opacity: 0;
+    }
+
+    to
+    {
+        transform: scaleY(1);
+
+        opacity: 1;
+    }
+}
+@-webkit-keyframes mui-progressbar-out
+{
+    from
+    {
+        -webkit-transform: scaleY(1);
+
+        opacity: 1;
+    }
+
+    to
+    {
+        -webkit-transform: scaleY(0);
+
+        opacity: 0;
+    }
+}
+@keyframes mui-progressbar-out
+{
+    from
+    {
+        transform: scaleY(1);
+
+        opacity: 1;
+    }
+
+    to
+    {
+        transform: scaleY(0);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes mui-progressbar-infinite
+{
+    0%
+    {
+        -webkit-transform: translate3d(-50%, 0, 0) scaleX(.5);
+    }
+
+    100%
+    {
+        -webkit-transform: translate3d(100%, 0, 0) scaleX(.5);
+    }
+}
+@keyframes mui-progressbar-infinite
+{
+    0%
+    {
+        transform: translate3d(-50%, 0, 0) scaleX(.5);
+    }
+
+    100%
+    {
+        transform: translate3d(100%, 0, 0) scaleX(.5);
+    }
+}
+.mui-pagination
+{
+    display: inline-block;
+
+    margin: 0 auto;
+    padding-left: 0;
+
+    border-radius: 6px;
+}
+.mui-pagination > li
+{
+    display: inline;
+}
+.mui-pagination > li > a,
+.mui-pagination > li > span
+{
+    line-height: 1.428571429;
+
+    position: relative;
+
+    float: left;
+
+    margin-left: -1px;
+    padding: 6px 12px;
+
+    text-decoration: none;
+
+    color: #007aff;
+    border: 1px solid #ddd;
+    background-color: #fff;
+}
+.mui-pagination > li:first-child > a,
+.mui-pagination > li:first-child > span
+{
+    margin-left: 0;
+
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    background-clip: padding-box;
+}
+.mui-pagination > li:last-child > a,
+.mui-pagination > li:last-child > span
+{
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    background-clip: padding-box;
+}
+.mui-pagination > li:active > a, .mui-pagination > li:active > a:active,
+.mui-pagination > li:active > span,
+.mui-pagination > li:active > span:active,
+.mui-pagination > li.mui-active > a,
+.mui-pagination > li.mui-active > a:active,
+.mui-pagination > li.mui-active > span,
+.mui-pagination > li.mui-active > span:active
+{
+    z-index: 2;
+
+    cursor: default;
+
+    color: #fff;
+    border-color: #007aff;
+    background-color: #007aff;
+}
+.mui-pagination > li.mui-disabled > span,
+.mui-pagination > li.mui-disabled > span:active,
+.mui-pagination > li.mui-disabled > a,
+.mui-pagination > li.mui-disabled > a:active
+{
+    opacity: .6;
+    color: #777;
+    border: 1px solid #ddd;
+    background-color: #fff;
+}
+
+.mui-pagination-lg > li > a,
+.mui-pagination-lg > li > span
+{
+    font-size: 18px;
+
+    padding: 10px 16px;
+}
+
+.mui-pagination-sm > li > a,
+.mui-pagination-sm > li > span
+{
+    font-size: 12px;
+
+    padding: 5px 10px;
+}
+
+.mui-pager
+{
+    padding-left: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.mui-pager:before, .mui-pager:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-pager:after
+{
+    clear: both;
+}
+.mui-pager li
+{
+    display: inline;
+}
+.mui-pager li > a,
+.mui-pager li > span
+{
+    display: inline-block;
+
+    padding: 5px 14px;
+
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background-color: #fff;
+    background-clip: padding-box;
+}
+.mui-pager li:active > a, .mui-pager li:active > span, .mui-pager li.mui-active > a, .mui-pager li.mui-active > span
+{
+    cursor: default;
+    text-decoration: none;
+
+    color: #fff;
+    border-color: #007aff;
+    background-color: #007aff;
+}
+.mui-pager .mui-next > a,
+.mui-pager .mui-next > span
+{
+    float: right;
+}
+.mui-pager .mui-previous > a,
+.mui-pager .mui-previous > span
+{
+    float: left;
+}
+.mui-pager .mui-disabled > a,
+.mui-pager .mui-disabled > a:active,
+.mui-pager .mui-disabled > span,
+.mui-pager .mui-disabled > span:active
+{
+    opacity: .6;
+    color: #777;
+    border: 1px solid #ddd;
+    background-color: #fff;
+}
+
+.mui-modal
+{
+    position: fixed;
+    z-index: 999;
+    top: 0;
+
+    overflow: hidden;
+
+    width: 100%;
+    min-height: 100%;
+
+    -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+            transition:         transform .25s, opacity 1ms .25s;
+    -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+            transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+
+    opacity: 0;
+    background-color: #fff;
+}
+.mui-modal.mui-active
+{
+    height: 100%;
+
+    -webkit-transition: -webkit-transform .25s;
+            transition:         transform .25s;
+    -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+            transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+
+    opacity: 1;
+}
+
+.mui-android .mui-modal .mui-bar
+{
+    position: static;
+}
+
+.mui-android .mui-modal .mui-bar-nav ~ .mui-content
+{
+    padding-top: 0;
+}
+
+.mui-slider
+{
+    position: relative;
+    z-index: 1;
+
+    overflow: hidden;
+
+    width: 100%;
+}
+.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
+{
+    border-bottom: 0;
+}
+.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item
+{
+    border-top: 1px solid #c8c7cc;
+    border-bottom: 1px solid #c8c7cc;
+}
+.mui-slider .mui-slider-group
+{
+    font-size: 0;
+
+    position: relative;
+
+    -webkit-transition: all 0s linear;
+            transition: all 0s linear;
+    white-space: nowrap;
+}
+.mui-slider .mui-slider-group .mui-slider-item
+{
+    font-size: 14px;
+
+    position: relative;
+
+    display: inline-block;
+
+    width: 100%;
+    height: 100%;
+
+    vertical-align: top;
+    white-space: normal;
+}
+.mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
+{
+    line-height: 0;
+
+    position: relative;
+
+    display: block;
+}
+.mui-slider .mui-slider-group .mui-slider-item img
+{
+    width: 100%;
+}
+.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before, .mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after
+{
+    height: 0;
+}
+.mui-slider .mui-slider-group.mui-slider-loop
+{
+    -webkit-transform: translate(-100%, 0px);
+            transform: translate(-100%, 0px);
+}
+
+.mui-slider-title
+{
+    line-height: 30px;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 30px;
+    margin: 0;
+
+    text-align: left;
+    text-indent: 12px;
+
+    opacity: .8;
+    background-color: #000;
+}
+
+.mui-slider-indicator
+{
+    position: absolute;
+    bottom: 8px;
+
+    width: 100%;
+
+    text-align: center;
+
+    background: none;
+}
+.mui-slider-indicator.mui-segmented-control
+{
+    position: relative;
+    bottom: auto;
+}
+.mui-slider-indicator .mui-indicator
+{
+    display: inline-block;
+
+    width: 6px;
+    height: 6px;
+    margin: 1px 6px;
+
+    cursor: pointer;
+
+    border-radius: 50%;
+    background: #aaa;
+    -webkit-box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
+            box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
+}
+.mui-slider-indicator .mui-active.mui-indicator
+{
+    background: #fff;
+}
+.mui-slider-indicator .mui-icon
+{
+    font-size: 20px;
+    line-height: 30px;
+
+    width: 40px;
+    height: 30px;
+    margin: 3px;
+
+    text-align: center;
+
+    border: 1px solid #ddd;
+}
+.mui-slider-indicator .mui-number
+{
+    line-height: 32px;
+
+    display: inline-block;
+
+    width: 58px;
+}
+.mui-slider-indicator .mui-number span
+{
+    color: #ff5053;
+}
+
+.mui-slider-progress-bar
+{
+    z-index: 1;
+
+    height: 2px;
+
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+}
+
+.mui-switch
+{
+    position: relative;
+
+    display: block;
+
+    width: 74px;
+    height: 30px;
+
+    -webkit-transition-timing-function: ease-in-out;
+            transition-timing-function: ease-in-out;
+    -webkit-transition-duration: .2s;
+            transition-duration: .2s;
+    -webkit-transition-property: background-color, border;
+            transition-property: background-color, border;
+
+    border: 2px solid #ddd;
+    border-radius: 20px;
+    background-color: #fff;
+    background-clip: padding-box;
+}
+.mui-switch.mui-disabled
+{
+    opacity: .3;
+}
+.mui-switch .mui-switch-handle
+{
+    position: absolute;
+    z-index: 1;
+    top: -1px;
+    left: -1px;
+
+    width: 28px;
+    height: 28px;
+
+    -webkit-transition: .2s ease-in-out;
+            transition: .2s ease-in-out;
+    -webkit-transition-property: -webkit-transform, width,left;
+            transition-property:         transform, width,left;
+
+    border-radius: 16px;
+    background-color: #fff;
+    background-clip: padding-box;
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
+}
+.mui-switch:before
+{
+    font-size: 13px;
+
+    position: absolute;
+    top: 3px;
+    right: 11px;
+
+    content: 'Off';
+    text-transform: uppercase;
+
+    color: #999;
+}
+.mui-switch.mui-dragging
+{
+    border-color: #f7f7f7;
+    background-color: #f7f7f7;
+}
+.mui-switch.mui-dragging .mui-switch-handle
+{
+    width: 38px;
+}
+.mui-switch.mui-dragging.mui-active .mui-switch-handle
+{
+    left: -11px;
+
+    width: 38px;
+}
+.mui-switch.mui-active
+{
+    border-color: #4cd964;
+    background-color: #4cd964;
+}
+.mui-switch.mui-active .mui-switch-handle
+{
+    -webkit-transform: translate(43px, 0);
+            transform: translate(43px, 0);
+}
+.mui-switch.mui-active:before
+{
+    right: auto;
+    left: 15px;
+
+    content: 'On';
+
+    color: #fff;
+}
+.mui-switch input[type='checkbox']
+{
+    display: none;
+}
+
+.mui-switch-mini
+{
+    width: 47px;
+}
+.mui-switch-mini:before
+{
+    display: none;
+}
+.mui-switch-mini.mui-active .mui-switch-handle
+{
+    -webkit-transform: translate(16px, 0);
+            transform: translate(16px, 0);
+}
+
+.mui-switch-blue.mui-active
+{
+    border: 2px solid #007aff;
+    background-color: #007aff;
+}
+
+.mui-content.mui-fade
+{
+    left: 0;
+
+    opacity: 0;
+}
+.mui-content.mui-fade.mui-in
+{
+    opacity: 1;
+}
+.mui-content.mui-sliding
+{
+    z-index: 2;
+
+    -webkit-transition: -webkit-transform .4s;
+            transition:         transform .4s;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+.mui-content.mui-sliding.mui-left
+{
+    z-index: 1;
+
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+}
+.mui-content.mui-sliding.mui-right
+{
+    z-index: 3;
+
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+}
+
+.mui-navigate-right:after,
+.mui-push-left:after,
+.mui-push-right:after
+{
+    font-family: Muiicons;
+    font-size: inherit;
+    line-height: 1;
+
+    position: absolute;
+    top: 50%;
+
+    display: inline-block;
+
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+    text-decoration: none;
+
+    color: #bbb;
+
+    -webkit-font-smoothing: antialiased;
+}
+
+.mui-push-left:after
+{
+    left: 15px;
+
+    content: '\e582';
+}
+
+.mui-navigate-right:after,
+.mui-push-right:after
+{
+    right: 15px;
+
+    content: '\e583';
+}
+
+.mui-pull-top-pocket, .mui-pull-bottom-pocket
+{
+    position: absolute;
+    left: 0;
+
+    display: block;
+    visibility: hidden;
+    overflow: hidden;
+
+    width: 100%;
+    height: 50px;
+}
+
+.mui-plus-pullrefresh .mui-pull-top-pocket, .mui-plus-pullrefresh .mui-pull-bottom-pocket
+{
+    display: none;
+    visibility: visible;
+}
+
+.mui-pull-top-pocket
+{
+    top: 0;
+}
+
+.mui-bar-nav ~ .mui-content .mui-pull-top-pocket
+{
+    top: 44px;
+}
+
+.mui-bar-nav ~ .mui-bar-header-secondary ~ .mui-content .mui-pull-top-pocket
+{
+    top: 88px;
+}
+
+.mui-pull-bottom-pocket
+{
+    position: relative;
+    bottom: 0;
+
+    height: 40px;
+}
+.mui-pull-bottom-pocket .mui-pull-loading
+{
+    visibility: hidden;
+}
+.mui-pull-bottom-pocket .mui-pull-loading.mui-in
+{
+    display: inline-block;
+}
+
+.mui-pull
+{
+    font-weight: bold;
+
+    position: absolute;
+    right: 0;
+    bottom: 10px;
+    left: 0;
+
+    text-align: center;
+
+    color: #777;
+}
+
+.mui-pull-loading
+{
+    margin-right: 10px;
+
+    -webkit-transition: -webkit-transform .4s;
+            transition:         transform .4s;
+    -webkit-transition-duration: 400ms;
+            transition-duration: 400ms;
+    vertical-align: middle;
+}
+
+.mui-pull-loading.mui-reverse
+{
+    -webkit-transform: rotate(180deg) translateZ(0);
+            transform: rotate(180deg) translateZ(0);
+}
+
+.mui-pull-caption
+{
+    font-size: 15px;
+    line-height: 24px;
+
+    position: relative;
+
+    display: inline-block;
+    overflow: visible;
+
+    margin-top: 0;
+
+    vertical-align: middle;
+}
+.mui-pull-caption span
+{
+    display: none;
+}
+.mui-pull-caption span.mui-in
+{
+    display: inline;
+}
+
+.mui-toast-container
+{
+    line-height: 17px;
+
+    position: fixed;
+    z-index: 9999;
+    bottom: 50px;
+    left: 50%;
+
+    -webkit-transition: opacity .3s;
+            transition: opacity .3s;
+    -webkit-transform: translate(-50%, 0);
+            transform: translate(-50%, 0);
+
+    opacity: 0;
+}
+.mui-toast-container.mui-active
+{
+    opacity: .9;
+}
+
+.mui-toast-message
+{
+    font-size: 14px;
+
+    padding: 10px 25px;
+
+    text-align: center;
+
+    color: #fff;
+    border-radius: 6px;
+    background-color: #323232;
+}
+
+.mui-numbox
+{
+    position: relative;
+
+    display: inline-block;
+    overflow: hidden;
+
+    width: 120px;
+    height: 35px;
+    padding: 0 40px 0 40px;
+
+    vertical-align: top;
+    vertical-align: middle;
+
+    border: solid 1px #bbb;
+    border-radius: 3px;
+    background-color: #efeff4;
+}
+.mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
+{
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 100%;
+
+    position: absolute;
+    top: 0;
+
+    overflow: hidden;
+
+    width: 40px;
+    height: 100%;
+    padding: 0;
+
+    color: #555;
+    border: none;
+    border-radius: 0;
+    background-color: #f9f9f9;
+}
+.mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
+{
+    background-color: #ccc;
+}
+.mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
+{
+    color: #c0c0c0;
+}
+.mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
+{
+    right: 0;
+
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+.mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
+{
+    left: 0;
+
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
+{
+    display: inline-block;
+    overflow: hidden;
+
+    width: 100% !important;
+    height: 100%;
+    margin: 0;
+    padding: 0 3px !important;
+
+    text-align: center;
+    text-overflow: ellipsis;
+    word-break: normal;
+
+    border: none !important;
+    border-right: solid 1px #ccc !important;
+    border-left: solid 1px #ccc !important;
+    border-radius: 0 !important;
+}
+
+.mui-input-row .mui-numbox
+{
+    float: right;
+
+    margin: 2px 8px;
+}
+
+@font-face {
+    font-family: Muiicons;
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('../fonts/mui.ttf') format('truetype');
+}
+.mui-icon
+{
+    font-family: Muiicons;
+    font-size: 24px;
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+
+    display: inline-block;
+
+    text-decoration: none;
+
+    -webkit-font-smoothing: antialiased;
+}
+.mui-icon.mui-active
+{
+    color: #007aff;
+}
+.mui-icon.mui-right:before
+{
+    float: right;
+
+    padding-left: .2em;
+}
+
+.mui-icon-contact:before
+{
+    content: '\e100';
+}
+
+.mui-icon-person:before
+{
+    content: '\e101';
+}
+
+.mui-icon-personadd:before
+{
+    content: '\e102';
+}
+
+.mui-icon-contact-filled:before
+{
+    content: '\e130';
+}
+
+.mui-icon-person-filled:before
+{
+    content: '\e131';
+}
+
+.mui-icon-personadd-filled:before
+{
+    content: '\e132';
+}
+
+.mui-icon-phone:before
+{
+    content: '\e200';
+}
+
+.mui-icon-email:before
+{
+    content: '\e201';
+}
+
+.mui-icon-chatbubble:before
+{
+    content: '\e202';
+}
+
+.mui-icon-chatboxes:before
+{
+    content: '\e203';
+}
+
+.mui-icon-phone-filled:before
+{
+    content: '\e230';
+}
+
+.mui-icon-email-filled:before
+{
+    content: '\e231';
+}
+
+.mui-icon-chatbubble-filled:before
+{
+    content: '\e232';
+}
+
+.mui-icon-chatboxes-filled:before
+{
+    content: '\e233';
+}
+
+.mui-icon-weibo:before
+{
+    content: '\e260';
+}
+
+.mui-icon-weixin:before
+{
+    content: '\e261';
+}
+
+.mui-icon-pengyouquan:before
+{
+    content: '\e262';
+}
+
+.mui-icon-chat:before
+{
+    content: '\e263';
+}
+
+.mui-icon-qq:before
+{
+    content: '\e264';
+}
+
+.mui-icon-videocam:before
+{
+    content: '\e300';
+}
+
+.mui-icon-camera:before
+{
+    content: '\e301';
+}
+
+.mui-icon-mic:before
+{
+    content: '\e302';
+}
+
+.mui-icon-location:before
+{
+    content: '\e303';
+}
+
+.mui-icon-mic-filled:before, .mui-icon-speech:before
+{
+    content: '\e332';
+}
+
+.mui-icon-location-filled:before
+{
+    content: '\e333';
+}
+
+.mui-icon-micoff:before
+{
+    content: '\e360';
+}
+
+.mui-icon-image:before
+{
+    content: '\e363';
+}
+
+.mui-icon-map:before
+{
+    content: '\e364';
+}
+
+.mui-icon-compose:before
+{
+    content: '\e400';
+}
+
+.mui-icon-trash:before
+{
+    content: '\e401';
+}
+
+.mui-icon-upload:before
+{
+    content: '\e402';
+}
+
+.mui-icon-download:before
+{
+    content: '\e403';
+}
+
+.mui-icon-close:before
+{
+    content: '\e404';
+}
+
+.mui-icon-redo:before
+{
+    content: '\e405';
+}
+
+.mui-icon-undo:before
+{
+    content: '\e406';
+}
+
+.mui-icon-refresh:before
+{
+    content: '\e407';
+}
+
+.mui-icon-star:before
+{
+    content: '\e408';
+}
+
+.mui-icon-plus:before
+{
+    content: '\e409';
+}
+
+.mui-icon-minus:before
+{
+    content: '\e410';
+}
+
+.mui-icon-circle:before, .mui-icon-checkbox:before
+{
+    content: '\e411';
+}
+
+.mui-icon-close-filled:before, .mui-icon-clear:before
+{
+    content: '\e434';
+}
+
+.mui-icon-refresh-filled:before
+{
+    content: '\e437';
+}
+
+.mui-icon-star-filled:before
+{
+    content: '\e438';
+}
+
+.mui-icon-plus-filled:before
+{
+    content: '\e439';
+}
+
+.mui-icon-minus-filled:before
+{
+    content: '\e440';
+}
+
+.mui-icon-circle-filled:before
+{
+    content: '\e441';
+}
+
+.mui-icon-checkbox-filled:before
+{
+    content: '\e442';
+}
+
+.mui-icon-closeempty:before
+{
+    content: '\e460';
+}
+
+.mui-icon-refreshempty:before
+{
+    content: '\e461';
+}
+
+.mui-icon-reload:before
+{
+    content: '\e462';
+}
+
+.mui-icon-starhalf:before
+{
+    content: '\e463';
+}
+
+.mui-icon-spinner:before
+{
+    content: '\e464';
+}
+
+.mui-icon-spinner-cycle:before
+{
+    content: '\e465';
+}
+
+.mui-icon-search:before
+{
+    content: '\e466';
+}
+
+.mui-icon-plusempty:before
+{
+    content: '\e468';
+}
+
+.mui-icon-forward:before
+{
+    content: '\e470';
+}
+
+.mui-icon-back:before, .mui-icon-left-nav:before
+{
+    content: '\e471';
+}
+
+.mui-icon-checkmarkempty:before
+{
+    content: '\e472';
+}
+
+.mui-icon-home:before
+{
+    content: '\e500';
+}
+
+.mui-icon-navigate:before
+{
+    content: '\e501';
+}
+
+.mui-icon-gear:before
+{
+    content: '\e502';
+}
+
+.mui-icon-paperplane:before
+{
+    content: '\e503';
+}
+
+.mui-icon-info:before
+{
+    content: '\e504';
+}
+
+.mui-icon-help:before
+{
+    content: '\e505';
+}
+
+.mui-icon-locked:before
+{
+    content: '\e506';
+}
+
+.mui-icon-more:before
+{
+    content: '\e507';
+}
+
+.mui-icon-flag:before
+{
+    content: '\e508';
+}
+
+.mui-icon-home-filled:before
+{
+    content: '\e530';
+}
+
+.mui-icon-gear-filled:before
+{
+    content: '\e532';
+}
+
+.mui-icon-info-filled:before
+{
+    content: '\e534';
+}
+
+.mui-icon-help-filled:before
+{
+    content: '\e535';
+}
+
+.mui-icon-more-filled:before
+{
+    content: '\e537';
+}
+
+.mui-icon-settings:before
+{
+    content: '\e560';
+}
+
+.mui-icon-list:before
+{
+    content: '\e562';
+}
+
+.mui-icon-bars:before
+{
+    content: '\e563';
+}
+
+.mui-icon-loop:before
+{
+    content: '\e565';
+}
+
+.mui-icon-paperclip:before
+{
+    content: '\e567';
+}
+
+.mui-icon-eye:before
+{
+    content: '\e568';
+}
+
+.mui-icon-arrowup:before
+{
+    content: '\e580';
+}
+
+.mui-icon-arrowdown:before
+{
+    content: '\e581';
+}
+
+.mui-icon-arrowleft:before
+{
+    content: '\e582';
+}
+
+.mui-icon-arrowright:before
+{
+    content: '\e583';
+}
+
+.mui-icon-arrowthinup:before
+{
+    content: '\e584';
+}
+
+.mui-icon-arrowthindown:before
+{
+    content: '\e585';
+}
+
+.mui-icon-arrowthinleft:before
+{
+    content: '\e586';
+}
+
+.mui-icon-arrowthinright:before
+{
+    content: '\e587';
+}
+
+.mui-icon-pulldown:before
+{
+    content: '\e588';
+}
+
+.mui-fullscreen
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.mui-fullscreen.mui-slider .mui-slider-group
+{
+    height: 100%;
+}
+.mui-fullscreen .mui-segmented-control ~ .mui-slider-group
+{
+    position: absolute;
+    top: 40px;
+    bottom: 0;
+
+    width: 100%;
+    height: auto;
+}
+.mui-fullscreen.mui-slider .mui-slider-item > a
+{
+    top: 50%;
+
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+}
+.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item > a
+{
+    top: auto;
+
+    -webkit-transform: none;
+            transform: none;
+}
+
+.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen
+{
+    top: 44px;
+}
+
+.mui-bar-tab ~ .mui-content .mui-slider.mui-fullscreen .mui-segmented-control ~ .mui-slider-group
+{
+    bottom: 50px;
+}
+
+.mui-android.mui-android-4-0 input:focus,
+.mui-android.mui-android-4-0 textarea:focus
+{
+    -webkit-user-modify: inherit;
+}
+
+.mui-android.mui-android-4-2 input,
+.mui-android.mui-android-4-2 textarea, .mui-android.mui-android-4-3 input,
+.mui-android.mui-android-4-3 textarea
+{
+    -webkit-user-select: text;
+}
+
+.mui-ios .mui-table-view-cell
+{
+    -webkit-transform-style: preserve-3d;
+            transform-style: preserve-3d;
+}
+
+.mui-plus-visible, .mui-wechat-visible
+{
+    display: none !important;
+}
+
+.mui-plus-hidden, .mui-wechat-hidden
+{
+    display: block !important;
+}
+
+.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
+{
+    display: table-cell !important;
+}
+
+.mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
+{
+    display: block !important;
+}
+
+.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
+{
+    display: table-cell !important;
+}
+
+.mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
+{
+    display: none !important;
+}
+
+.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav
+{
+    height: 64px;
+    padding-top: 20px;
+}
+.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content
+{
+    padding-top: 64px;
+}
+.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content .mui-pull-top-pocket
+{
+    top: 64px;
+}
+.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary
+{
+    top: 64px;
+}
+.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary ~ .mui-content
+{
+    padding-top: 94px;
+}
+
+.mui-iframe-wrapper
+{
+    position: absolute;
+    right: 0;
+    left: 0;
+
+    -webkit-overflow-scrolling: touch;
+}
+.mui-iframe-wrapper iframe
+{
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+}

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 4 - 0
css/mui.min.css


+ 285 - 0
css/mui.picker.all.css

@@ -0,0 +1,285 @@
+/**
+ * 选择列表插件
+ * varstion 2.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+.mui-picker {
+    background-color: #ddd;
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    -webkit-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+.mui-picker-inner {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+}
+.mui-pciker-list,
+.mui-pciker-rule {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    margin-top: -18px;
+}
+.mui-pciker-rule-bg {
+    z-index: 0;
+    /*background-color: #cfd5da;*/
+}
+.mui-pciker-rule-ft {
+    z-index: 2;
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+}
+.mui-pciker-list {
+    z-index: 1;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+}
+.mui-pciker-list li {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-size: 16px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+    color: #888;
+    padding: 0px 8px;
+    white-space: nowrap;
+    -webkit-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: default;
+    visibility: hidden;
+}
+.mui-pciker-list li.highlight,
+.mui-pciker-list li.visible {
+    visibility: visible;
+}
+.mui-pciker-list li.highlight {
+    color: #222;
+}
+.mui-poppicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-poppicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+.mui-android-5-1 .mui-poppicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-poppicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-poppicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-poppicker-header .mui-btn {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-poppicker-btn-cancel {
+	float: left;
+}
+.mui-poppicker-btn-ok {
+	float: right;
+}
+.mui-poppicker-clear {
+	clear: both;
+	height: 0px;
+	line-height: 0px;
+	font-size: 0px;
+	overflow: hidden;
+}
+.mui-poppicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	border-top: solid 1px #ddd;
+	/*-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
+}
+.mui-poppicker-body .mui-picker {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	border: none;
+	float: left;
+}
+.mui-dtpicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-dtpicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+/*用于将 html body 禁止滚动条*/
+
+.mui-dtpicker-active-for-page {
+	overflow: hidden !important;
+}
+.mui-android-5-1 .mui-dtpicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-dtpicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-dtpicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-dtpicker-header button {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-dtpicker-header button:last-child {
+	float: right;
+}
+.mui-dtpicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	/*border-top: solid 1px #eee;
+	background-color: #fff;*/
+}
+.mui-ios .mui-dtpicker-body {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-dtpicker-title h5 {
+	display: inline-block;
+	width: 20%;
+	margin: 0px;
+	padding: 8px;
+	text-align: center;
+	border-top: solid 1px #ddd;
+	background-color: #f0f0f0;
+	border-bottom: solid 1px #ccc;
+}
+.mui-dtpicker .mui-picker {
+	width: 20%;
+	height: 100%;
+	margin: 0px;
+	float: left;
+	border: none;
+}
+/*年月日时分*/
+
+[data-type="datetime"] .mui-picker,
+[data-type="time"] .mui-dtpicker-title h5 {
+	width: 20%;
+}
+[data-type="datetime"] [data-id="picker-h"],
+[data-type="datetime"] [data-id="title-h"] {
+	border-left: dotted 1px #ccc;
+}
+/*年月日*/
+
+[data-type="date"] .mui-picker,
+[data-type="date"] .mui-dtpicker-title h5 {
+	width: 33.3%;
+}
+[data-type="date"] [data-id="picker-h"],
+[data-type="date"] [data-id="picker-i"],
+[data-type="date"] [data-id="title-h"],
+[data-type="date"] [data-id="title-i"] {
+	display: none;
+}
+/*年月日时*/
+
+[data-type="hour"] .mui-picker,
+[data-type="hour"] .mui-dtpicker-title h5 {
+	width: 25%;
+}
+[data-type="hour"] [data-id="picker-i"],
+[data-type="hour"] [data-id="title-i"] {
+	display: none;
+}
+[data-type="hour"] [data-id="picker-h"],
+[data-type="hour"] [data-id="title-h"] {
+	border-left: dotted 1px #ccc;
+}
+/*时分*/
+
+[data-type="time"] .mui-picker,
+[data-type="time"] .mui-dtpicker-title h5 {
+	width: 50%;
+}
+[data-type="time"] [data-id="picker-y"],
+[data-type="time"] [data-id="picker-m"],
+[data-type="time"] [data-id="picker-d"],
+[data-type="time"] [data-id="title-y"],
+[data-type="time"] [data-id="title-m"],
+[data-type="time"] [data-id="title-d"] {
+	display: none;
+}
+/*年月*/
+
+[data-type="month"] .mui-picker,
+[data-type="month"] .mui-dtpicker-title h5 {
+	width: 50%;
+}
+[data-type="month"] [data-id="picker-d"],
+[data-type="month"] [data-id="picker-h"],
+[data-type="month"] [data-id="picker-i"],
+[data-type="month"] [data-id="title-d"],
+[data-type="month"] [data-id="title-h"],
+[data-type="month"] [data-id="title-i"] {
+	display: none;
+}

+ 85 - 0
css/mui.picker.css

@@ -0,0 +1,85 @@
+/**
+ * 选择列表插件
+ * varstion 2.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+.mui-picker {
+    background-color: #ddd;
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    -webkit-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+.mui-picker-inner {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+}
+.mui-pciker-list,
+.mui-pciker-rule {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    margin-top: -18px;
+}
+.mui-pciker-rule-bg {
+    z-index: 0;
+    /*background-color: #cfd5da;*/
+}
+.mui-pciker-rule-ft {
+    z-index: 2;
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+}
+.mui-pciker-list {
+    z-index: 1;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+}
+.mui-pciker-list li {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-size: 16px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+    color: #888;
+    padding: 0px 8px;
+    white-space: nowrap;
+    -webkit-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: default;
+    visibility: hidden;
+}
+.mui-pciker-list li.highlight,
+.mui-pciker-list li.visible {
+    visibility: visible;
+}
+.mui-pciker-list li.highlight {
+    color: #222;
+}

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 6 - 0
css/mui.picker.min.css


+ 64 - 0
css/mui.poppicker.css

@@ -0,0 +1,64 @@
+.mui-poppicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-poppicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+.mui-android-5-1 .mui-poppicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-poppicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-poppicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-poppicker-header .mui-btn {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-poppicker-btn-cancel {
+	float: left;
+}
+.mui-poppicker-btn-ok {
+	float: right;
+}
+.mui-poppicker-clear {
+	clear: both;
+	height: 0px;
+	line-height: 0px;
+	font-size: 0px;
+	overflow: hidden;
+}
+.mui-poppicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	border-top: solid 1px #ddd;
+	/*-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
+}
+.mui-poppicker-body .mui-picker {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	border: none;
+	float: left;
+}

+ 125 - 0
css/query_result.css

@@ -0,0 +1,125 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年6月24日
+ * 描述:查询结果样式集
+ */
+
+/* 查询结果标题容器 */
+.jt-query-result-title {
+	height: 40px;
+	line-height: 40px;
+	color: rgb(255, 255, 255);
+	font-size: 14px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	background-color: rgb(32, 46, 96);
+	padding: 0px 5px;
+}
+
+/* 查询结果标题 数字图标 */
+.jt-query-result-title .jt-icon {
+	display: inline-block;
+	height: 24px;
+	width: 24px;
+	line-height: 24px;
+	font-size: 12px;
+	border: solid 1px rgb(230, 230, 230);
+	border-radius: 20px;
+	color: rgb(146, 224, 212);
+	font-weight: bold;
+	background-color: rgba(255, 255, 255, 0);
+	text-align: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+}
+
+/* 查询结果标题 标题内容 */
+.jt-query-result-title .jt-title {
+	flex: 1;
+	padding: 0px 5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 查询结果标题 按钮 */
+.jt-query-result-title .jt-btn {
+	position: relative;
+	margin: 0px;
+	margin-right: 5px;
+	background-color: rgba(255, 255, 255, 0);
+	border: solid 0px rgba(255, 255, 255, 0);
+	color: rgba(236, 182, 98, 1.0);
+	padding: 0px 8px !important;
+
+}
+
+/* 查询结果标题 按钮分隔线 */
+.jt-query-result-title .jt-btn::after {
+	content: '';
+	width: 1px;
+	position: absolute;
+	top: 3px;
+	bottom: 3px;
+	right: -2px;
+	background-color: rgba(255, 255, 255, 0.75);
+}
+
+/* 查询结果标题 去掉最后一个按钮的分隔线 */
+.jt-query-result-title .jt-btn:last-child::after {
+	width: 0px;
+}
+
+/* 查询结果 内容容器 */
+.jt-query-result-content {
+	border-radius: 8px;
+}
+
+/* 查询结果 内容行 */
+.jt-query-result-content .jt-query-result-row {
+	height: 40px;
+	font-size: 13px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+/* 查询结果 内容行标题 */
+.jt-query-result-content .jt-query-result-row .jt-title {
+	display: inline-block;
+	width: 70px;
+	text-align: right;
+	color: rgba(161, 182, 233, 1.0);
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 查询结果 内容行 值 */
+.jt-query-result-content .jt-query-result-row .jt-value {
+	display: inline-block;
+	flex: 1;
+	text-align: left;
+	padding-left: 8px;
+	color: rgba(149, 192, 110, 1.0);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 查询结果 内容行 值 点击样式 */
+.jt-query-result-content .jt-query-result-row .jt-value:active {
+	color: rgb(255, 0, 0);
+	font-weight: bold;
+}
+
+/* 地块查询结果底部弹框 */
+.jt-query-result-popover {
+	height: 300px !important;
+	background-color: rgb(39, 56, 122) !important;
+	border-top-right-radius: 10px !important;
+	border-top-left-radius: 10px !important;
+	display: flex !important;
+	flex-direction: column !important;
+}

+ 90 - 0
css/query_where.css

@@ -0,0 +1,90 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年6月24日
+ * 描述:查询条件样式集
+ */
+
+/* 查询条件文字标签 */
+.jt-query-where-group-label {
+	position: relative;
+	font-size: 13px;
+	color: rgb(203, 203, 203);
+	background-color: rgb(44, 64, 134);
+	padding-left: 24px !important;
+	height: 40px !important;
+	line-height: 40px !important;
+	font-weight: bold;
+}
+
+/* 查询条件文字标签前置div小方块样式 */
+.jt-query-where-group-label:before {
+	position: absolute;
+	content: '';
+	width: 4px;
+	height: calc(40px - 16px);
+	background-color: rgb(64, 97, 173);
+	left: 12px;
+	top: 8px;
+}
+
+/* 输入查询条件、选择查询条件样式 */
+input[type=number],
+input[type=text],
+.jt-query-where-input,
+.jt-query-where-select {
+	background-color: rgba(255, 255, 255, 0);
+	border: solid 1px rgb(133, 215, 253) !important;
+	width: calc(100% - 30px);
+	margin: 5px 15px;
+	height: 30px;
+	line-height: 30px;
+	font-size: 13px;
+	color: rgb(133, 215, 253);
+	padding-left: 10px !important;
+	border-radius: 5px !important;
+}
+
+/* 选择查询条件样式 */
+.jt-query-where-select {
+	padding: 0px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 选择条件行样式 */
+.jt-query-where-row {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+/* 查询按钮\重置按钮样式 */
+.jt-query-btn,
+.jt-reset-btn {
+	background-color: rgb(81, 121, 251);
+	border: solid 0px rgb(255, 255, 255);
+	margin-top: 20px;
+	color: rgb(255, 255, 255);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	margin-right: 10px;
+}
+
+/* 重置按钮样式 */
+.jt-reset-btn {
+	background-color: rgb(199, 62, 67);
+}
+
+/* 查询按钮图标样式 */
+.jt-reset-btn>span,
+.jt-query-btn>span {
+	background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
+	-webkit-background-clip: text;
+	color: transparent;
+	margin-right: 5px;
+}

+ 83 - 0
css/sms.css

@@ -0,0 +1,83 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年9月15日
+ * 描述:短消息结果样式集 所有样式均以jt开头
+ */
+
+/* 分析结果行样式 */
+.jt-sms-content-row {
+	position: relative;
+	height: 34px;
+	line-height: 34px;
+	color: rgb(255, 255, 255);
+	font-size: 13px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0px 5px;
+}
+
+/* 分析结果行底边框线样式 */
+.jt-sms-content-row::after {
+	content: '';
+	width: 100%;
+	position: absolute;
+	left: 20px;
+	bottom: 0px;
+	border-bottom: solid 1px rgba(203, 203, 203, 0.75);
+	z-index: 20,
+}
+
+/* 干掉最有一条底部边框线 */
+.jt-sms-content-row-last::after {
+	border-bottom: solid 0px red;
+}
+
+/* 分析结果编号样式 */
+.jt-sms-content-row .jt-icon {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	line-height: 20px;
+	font-size: 11px;
+	border: solid 1px rgb(230, 230, 230);
+	border-radius: 20px;
+	color: rgb(146, 224, 212);
+	font-weight: bold;
+
+	background-color: rgba(255, 255, 255, 0);
+	text-align: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+
+	margin-left: 10px;
+}
+
+/* 分析结果面积值样式 */
+.jt-sms-content-row .jt-name {
+	display: inline-block;
+	width: 100px;
+	text-align: center;
+	padding-right: 10px;
+	color: rgb(147, 224, 212);
+	font-weight: bold;
+}
+
+/* 分析结果面积值样式 */
+.jt-sms-content-row .jt-mobile {
+	display: inline-block;
+	width: 100px;
+	text-align: center;
+	padding-right: 10px;
+	color: rgb(255, 255, 0);
+	font-weight: bold;
+}
+
+/* 分析结果标题样式 */
+.jt-sms-content-row .jt-message {
+	display: inline-block;
+	width: 100px;
+	text-align: left;
+	padding-right: 10px;
+	flex: 1;
+	font-family: 'TTTGB-Medium', sans-serif !important;
+}

+ 96 - 0
css/spatial.analysis.css

@@ -0,0 +1,96 @@
+/**
+ * 创建者:王成
+ * 创建日期:2022年7月2日
+ * 描述:空间分析结果样式集 所有样式均以jt开头
+ */
+
+/* 分析结果分组标签样式 */
+.jt-spatial-analysis-group-label {
+	position: relative;
+	font-size: 13px;
+	color: rgb(203, 203, 203);
+	background-color: rgb(44, 64, 134);
+	padding-left: 24px !important;
+	height: 40px !important;
+	line-height: 40px !important;
+	font-weight: bold;
+}
+
+/* 分析结果分组标签前置div小方块样式 */
+.jt-spatial-analysis-group-label:before {
+	position: absolute;
+	content: '';
+	width: 4px;
+	height: calc(40px - 16px);
+	background-color: rgb(64, 97, 173);
+	left: 12px;
+	top: 8px;
+}
+
+/* 分析结果行样式 */
+.jt-spatial-analysis-content-row {
+	position: relative;
+	height: 34px;
+	line-height: 34px;
+	color: rgb(255, 255, 255);
+	font-size: 13px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0px 5px;
+}
+
+/* 分析结果行底边框线样式 */
+.jt-spatial-analysis-content-row::after {
+	content: '';
+	width: 100%;
+	position: absolute;
+	left: 20px;
+	bottom: 0px;
+	border-bottom: solid 1px rgba(203, 203, 203, 0.75);
+	z-index: 20,
+}
+
+/* 干掉最有一条底部边框线 */
+.jt-spatial-analysis-content-row-last::after {
+	border-bottom: solid 0px red;
+}
+
+/* 分析结果编号样式 */
+.jt-spatial-analysis-content-row>span:nth-child(1) {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	line-height: 20px;
+	font-size: 11px;
+	border: solid 1px rgb(230, 230, 230);
+	border-radius: 20px;
+	color: rgb(146, 224, 212);
+	font-weight: bold;
+
+	background-color: rgba(255, 255, 255, 0);
+	text-align: center;
+	box-shadow: rgb(95, 150, 222) 0px 0px 10px inset;
+
+	margin-left: 10px;
+}
+
+/* 分析结果面积值样式 */
+.jt-spatial-analysis-content-row>span:nth-child(2) {
+	display: inline-block;
+	width: 100px;
+	text-align: right;
+	padding-right: 10px;
+	color: rgb(147, 224, 212);
+	font-weight: bold;
+}
+
+/* 分析结果标题样式 */
+.jt-spatial-analysis-content-row>span:nth-child(3) {
+	display: inline-block;
+	width: 100px;
+	text-align: left;
+	padding-right: 10px;
+	flex: 1;
+	font-family: 'TTTGB-Medium', sans-serif !important;
+}

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است