
html #layuicss-layuiAdmin{display: none; position: absolute; width: 1989px;}




/* 系统 */
::-webkit-input-placeholder{color: #ccc}

/** 滚动条 **/
/*
::-webkit-scrollbar{width: 10px; height: 10px;}
::-webkit-scrollbar-button:vertical{display: none;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
*/


/* 全局 */
html{background-color: #e3e8ee; color: #666;}
*[template],
.layadmin-tabsbody-item{display: none;}
*[lay-href],
*[lay-tips],
*[layadmin-event]{cursor: pointer;}

/* 重置布局结构 */
.layui-layout-admin .layui-header{position: fixed; top: 0; left: 0; width: 100%; height: 69px;}

/*
.layui-layout-admin .layui-header .layui-layout-right .layui-nav-item a{color: #fff;}
.layui-layout-admin .layui-header .layui-layout-right .layui-nav-item a cite{color: rgba(255,255,255,.7);}
*/

.layui-layout-admin .layui-header .layui-nav .layui-nav-child a{color: #333;}
.layui-layout-admin .layui-side{width: 178px; top: 0; z-index: 1001;}
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item{height: 50px; line-height: 50px;}
.layui-layout-admin .layui-logo{position: fixed; left: 0; top: 0; z-index: 1002; width: 178px; height: 69px; padding-left: 20px; padding-top: 5px; box-sizing: border-box; overflow: hidden; font-weight: 500; background-repeat: no-repeat; background-position: center center;}
.layui-layout-admin .layui-layout-left,
.layadmin-pagetabs,
.layui-layout-admin .layui-footer{left: 208px;}
.layadmin-pagetabs{position: fixed; top: 50px; right: 0; z-index: 999;}
.layadmin-pagetabs .layui-breadcrumb{padding: 0 15px;}
.layui-layout-admin .layui-header .layui-nav-img{width: 26px; height: 26px;}
.layui-layout-admin .layui-header .layui-nav-child{top: 55px;}
.layui-layout-admin .layui-header .layui-layout-right .layui-nav-child{left: auto; right: 0;}
.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this a,
.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this{color: #5469d4;}

/* 统一动画 */
.layui-layout-admin .layui-header .layui-nav .layui-nav-item,
.layui-layout-admin .layui-layout-left,
.layadmin-pagetabs,
.layui-layout-admin .layui-footer,
.layui-layout-admin .layui-side,
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-header .layui-layout-right{transition: all .3s; -webkit-transition: all .3s;}

/* 图标 */
.layui-icon-login-qq{color: #3492ED;}
.layui-icon-login-wechat{color: #4DAF29;}
.layui-icon-login-weibo{color: #CF1900;}

/* 重置表格风格 */
/*
.layui-table th, 
.layui-table td, 
.layui-table[lay-skin="line"],
.layui-table[lay-skin="row"], 
.layui-table-view, 
.layui-table-header,
.layui-table-tool,
.layui-table-page,
.layui-table-fixed-r,
.layui-table-tips-main{border-color: #f6f6f6;}

.layui-table thead tr, 
.layui-table-header, 
.layui-table-tool,
.layui-table-patch, 
.layui-table-mend{background-color: #fff;}

.layui-table[lay-even] tr:nth-child(even),
.layui-table tbody tr:hover,
.layui-table-hover,
.layui-table-click{background-color: #f8f8f8;}
*/

/* 表单 */
.layui-form[wid100] .layui-form-label{width: 100px;}
.layui-form[wid100] .layui-input-block{margin-left: 130px;}
@media screen and (max-width: 450px){
  .layui-form[wid100] .layui-form-item .layui-input-inline{margin-left: 132px;}
  .layui-form[wid100] .layui-form-item .layui-input-inline+.layui-form-mid{margin-left: 130px;}
}
.layui-form-item .layui-input-company{width: auto; padding-right: 10px; line-height: 38px;}

/* 辅助 */
.layadmin-flexible{}
.layui-bg-white{background-color: #fff;}
.layadmin-loading{position: absolute; left: 50%; top: 50%; margin: -16px -15px; font-size: 30px; color: #c2c2c2;}
.layadmin-fixed{position: fixed; left: 0; top: 0; z-index: 999;}
.layadmin-link{color: #029789!important;}
.layadmin-link:hover{opacity: 0.8;}

/* 弹出面板 */
.layui-layer-admin .layui-layer-title{height: 40px; line-height: 40px; border: none 0; color:#20222a;}
.layui-layer-admin i[close]{position: absolute; padding: 5px; right: 10px; top: 6px; color: #20222a; cursor: pointer;}
.layui-layer-admin .layui-layer-content{padding: 20px; line-height: 22px;}
.layui-layer-admin .layui-layer-content cite{font-style: normal; color: #5a95dd;}

/* 右侧面板 */
.layui-layer-adminRight{top: 50px !important; bottom: 0; box-shadow: 1px 1px 10px rgba(0,0,0,.1); border-radius: 0; overflow: auto;}

/* 弹出便签 */
.layadmin-note .layui-layer-content{padding: 0;}
.layadmin-note textarea{display: block; width: 300px; height: 132px; min-width: 300px; min-height: 132px; line-height: 20px; padding: 10px 20px; border: none; box-sizing: border-box; color: #666; word-wrap: break-word;}

/* 头部导航 */
.layui-layout-admin .layui-layout-left{padding: 0 10px;}
.layui-layout-admin .layui-layout-left .layui-nav-item{margin: 0 20px;}
.layui-layout-admin .layui-input-search{display: inline-block; vertical-align: middle; height: 34px; border: none; cursor: text;}
.layui-layout-admin .layui-layout-left a{padding: 0;}
.layui-layout-admin .layui-layout-right{padding: 0;}
.layui-header .layui-nav-item .layui-icon{position: relative; top: 1px; font-size: 16px;}
.layui-header .layui-nav-item:hover{}
.layui-header .layui-layout-right .layui-badge-dot{margin-left: 0px;}
.layui-header .layui-nav .layui-this:after,
.layui-layout-admin .layui-header .layui-nav-bar{top: 0 !important; bottom: auto; height: 3px; background-color: #fff; background-color: rgba(255,255,255,.3);}

/* 遮罩 */
.layadmin-body-shade{position: fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.3); z-index: 1000;}

/* 侧边菜单 */
.layui-side-menu .layui-side-scroll{width: 178px;}
.layui-side-menu .layui-nav{width: 178px; }
.layui-side-menu .layui-nav .layui-nav-item a{ padding-left: 0px; padding-right: 0px;}
.layui-side-menu .layui-nav .layui-nav-item > a{}
.layui-side-menu .layui-nav .layui-nav-item a:hover{background: none;}
.layui-side-menu .layui-nav .layui-nav-itemed > .layui-nav-child{padding: 5px 0;}
.layui-side-menu .layui-nav .layui-nav-item .layui-icon{position: absolute; top: 50%; left: 20px; margin-top: -19px;}
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child{background: none!important;}
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a{padding-left: 60px}
.layui-side-menu .layui-nav .layui-nav-more{right: 15px;}

/* 侧边菜单 - 平板移动设备 */
@media screen and (max-width: 992px) {
  .layui-layout-admin .layui-side{transform: translate3d(-220px, 0, 0); -webkit-transform: translate3d(-220px, 0, 0); width: 220px;}
  .layui-layout-admin .layui-layout-left,
  .layadmin-pagetabs,
  .layui-layout-admin .layui-body,
  .layui-layout-admin .layui-footer{left: 0;}
}

/* 侧边收缩模式 */
.layadmin-side-shrink .layui-layout-admin .layui-logo{width: 60px; background-size: 40% 40%;}
.layadmin-side-shrink .layui-layout-admin .layui-logo span{display: none;}
.layadmin-side-shrink .layui-side{left: 0; width: 60px;}
.layadmin-side-shrink .layui-layout-admin .layui-layout-left,
.layadmin-side-shrink .layadmin-pagetabs,
.layadmin-side-shrink .layui-layout-admin .layui-footer{left: 60px;}
.layadmin-side-shrink .layui-side-menu .layui-nav{position: static; width: 60px;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item{position: static;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item>a{padding-right: 0;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item cite,
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-item > a .layui-nav-more,
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-item > .layui-nav-child{display: none; padding: 8px 0; width: 200px;}
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-itemed>a{color: #5469d4;font-weight:600; background: rgba(0,0,0,.3);}

/* 移动端展开模式 */
.layadmin-side-spread-sm .layui-layout-admin .layui-layout-left,
.layadmin-side-spread-sm .layadmin-pagetabs,
.layadmin-side-spread-sm .layui-layout-admin .layui-footer{left: 0; transform: translate3d(220px, 0, 0); -webkit-transform: translate3d(220px, 0, 0);}
.layadmin-side-spread-sm .layui-layout-admin .layui-layout-right{transform: translate3d(220px, 0, 0); -webkit-transform: translate3d(220px, 0, 0);}
.layadmin-side-spread-sm .layui-side{transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
.layadmin-side-spread-sm .layadmin-body-shade{display: block; }


/* 页面标签 */
.layadmin-pagetabs{height: 40px; line-height: 40px; padding: 0 80px 0 40px; /*border-bottom: 2px solid #292B34;*/ background-color: #fff; box-sizing: border-box; box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);}
.layadmin-pagetabs .layadmin-tabs-control{position: absolute; top: 0; width: 40px; height: 100%; text-align: center; cursor: pointer; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box; border-left: 1px solid #f6f6f6;}
.layadmin-pagetabs .layadmin-tabs-control:hover{background-color: #f6f6f6;}
.layadmin-pagetabs .layui-icon-prev{left: 0; border-left: none; border-right: 1px solid #f6f6f6;}
.layadmin-pagetabs .layui-icon-next{right: 40px; right: 40px;}
.layadmin-pagetabs .layui-icon-down{right: 0;}
.layadmin-tabs-select.layui-nav{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background: none;}
.layadmin-tabs-select.layui-nav .layui-nav-item{line-height: 40px;}
.layadmin-tabs-select.layui-nav .layui-nav-item>a{height: 40px;}
.layadmin-tabs-select.layui-nav .layui-nav-item a{color: #666;}
.layadmin-tabs-select.layui-nav .layui-nav-child{top: 40px; left: auto; right: 0;}
.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this,
.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a{background-color: #f2f2f2!important; color: #333;}
.layadmin-tabs-select.layui-nav .layui-nav-more,
.layadmin-tabs-select.layui-nav .layui-nav-bar{display: none;}

.layadmin-pagetabs .layui-tab{margin: 0; overflow: hidden;}
.layadmin-pagetabs .layui-tab-title{height: 40px; border: none;}
.layadmin-pagetabs .layui-tab-title li{min-width: 0; line-height: 40px; max-width: 160px; text-overflow: ellipsis; padding-right: 40px; overflow: hidden; border-right: 1px solid #f6f6f6; vertical-align: top;}
.layadmin-pagetabs .layui-tab-title li:first-child{ padding-right: 15px;}
.layadmin-pagetabs .layui-tab-title li:first-child .layui-tab-close{display: none;}
.layadmin-pagetabs .layui-tab-title li .layui-tab-close{position: absolute; right: 8px; top: 50%; margin: -7px 0 0 0; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; font-size: 12px;}
.layadmin-pagetabs .layui-tab-title li:after{content:''; position: absolute; top: 0; left: 0; width: 0; height: 2px; border-radius: 0; background-color: #292B34; transition: all .3s; -webkit-transition: all .3s;}
.layadmin-pagetabs .layui-tab-title li:hover:after{width: 100%;}
.layadmin-pagetabs .layui-tab-title li:hover,
.layadmin-pagetabs .layui-tab-title li.layui-this{background-color: #f6f6f6;}
.layadmin-pagetabs .layui-tab-title li.layui-this:after{width: 100%; border: none; height: 2px; background-color: #292B34;}

/* 不开启页面标签时 */
/*.layadmin-tabspage-none .layui-layout-admin .layui-header{border-bottom: none; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}*/
.layadmin-tabspage-none .layadmin-header{display: block;}
.layadmin-tabspage-none .layadmin-header .layui-breadcrumb{border-top: 1px solid #f6f6f6;}

/* 底部固定区域 */
.layui-layout-admin .layui-footer{padding: 10px 0; text-align: center;}

/* 默认主题修饰 */
/*.layui-layout-admin .layui-header{border-bottom: 1px solid #f6f6f6; box-sizing: border-box; background-color: #fff;}*/
.layui-layout-admin .layui-header a,
.layui-layout-admin .layui-header a cite{color: #333;}
.layui-layout-admin .layui-header a:hover{color: #000;}
.layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color: #666}
.layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color: transparent; border-bottom-color: #666;}
.layui-layout-admin .layui-header .layui-nav .layui-this:after, 
.layui-layout-admin .layui-header .layui-nav-bar{height: 2px; }
/*.layui-layout-admin .layui-logo{box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);}*/
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-logo a{color: #1a1f36; font-weight: 600;}
/*.layui-side-menu{box-shadow: 1px 0 2px 0 rgba(0,0,0,.05);}*/
.layui-layout-admin .layui-footer{box-shadow: 0 -1px 2px 0 rgba(0,0,0,.05);}

.layui-side-menu,
.layadmin-setTheme-side{color: #1a1f36;}
.layadmin-setTheme-header{background-color: #ffff;}

.layui-layout-admin .layui-footer{background-color: #fff;}
.layui-tab-admin .layui-tab-title{background-color: #393D49; color: #fff;}


/*
 
 格局
 
*/

.layui-fluid{}
.layadmin-header{display: none; height: 50px; line-height: 50px; margin-bottom: 0; border-radius: 0;}
.layadmin-header .layui-breadcrumb{padding: 0 15px;}
.layui-card-header{position: relative;}
.layui-card-header .layui-icon{line-height: initial; position: absolute; right: 15px; top: 50%; margin-top: -7px;}
.layadmin-iframe{position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0;}


/*
 
 控制台
 
*/


/* 重置轮播样式 */
.layadmin-carousel{height: 185px !important; background-color: #fff;}
.layadmin-carousel .layui-carousel-ind li{background-color: #e2e2e2;}
.layadmin-carousel .layui-carousel-ind li:hover{background-color: #c2c2c2;}
.layadmin-carousel .layui-carousel-ind li.layui-this{background-color: #999;}
.layadmin-carousel .layui-carousel,
.layadmin-carousel > *[carousel-item] > *{background-color: #fff;}
.layadmin-carousel .layui-col-space10{margin: 0;}
.layadmin-carousel .layui-carousel-ind{position: absolute; top: -41px; text-align: right;}
.layadmin-carousel .layui-carousel-ind ul{background: none;}

/* 重置tab样式 */
.layui-card .layui-tab-brief .layui-tab-title{height: 42px; border-bottom-color: #f6f6f6;}
.layui-card .layui-tab-brief .layui-tab-title li{margin: 0 15px; padding: 0; line-height: 42px;}
.layui-card .layui-tab-brief .layui-tab-title li.layui-this{color: #333;}
.layui-card .layui-tab-brief .layui-tab-title .layui-this:after{height: 43px;}
/*.layui-card .layui-tab-brief .layui-tab-content{padding: 15px;}*/
.layui-card .layui-table-view{margin: 0;}

/* 快捷方式 */
.layadmin-shortcut li{text-align: center;}
.layadmin-shortcut li .layui-icon{display: inline-block; width: 100%; height: 60px; line-height: 60px; text-align: center; border-radius: 2px; font-size: 30px; background-color: #F8F8F8; color: #333; transition: all .3s; -webkit-transition: all .3s;}
.layadmin-shortcut li cite{position: relative; top: 2px; display: block; color: #666; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px;}
.layadmin-shortcut li:hover .layui-icon{background-color: #f2f2f2;}

/* 待办事项 */
.layadmin-backlog .layadmin-backlog-body{display: block; padding: 10px 15px; background-color: #f8f8f8; color: #999; border-radius: 2px; transition: all .3s; -webkit-transition: all .3s;}
.layadmin-backlog-body h3{padding-bottom: 10px; font-size: 12px;}
.layadmin-backlog-body p cite{font-style: normal; font-size: 30px; font-weight: 300; color: #009688;}
.layadmin-backlog-body:hover{background-color: #f2f2f2; color: #888;}

/* 数据概览 */
.layadmin-dataview{height: 332px !important;}
.layadmin-dataview>*[carousel-item]:before{display: none;}
.layadmin-dataview>*[carousel-item]>div{height: 332px;}

/* 控制台效果报告 */
.layadmin-takerates{padding-top: 5px;}
.layadmin-takerates .layui-progress{margin: 50px 0 60px;}
.layadmin-takerates .layui-progress:last-child{margin-bottom: 10px;}
.layadmin-takerates .layui-progress h3{position: absolute; right: 0; top: -35px; color: #999; font-size: 14px;}
.layadmin-takerates .layui-progress-bar{text-align: left;}
.layadmin-takerates .layui-progress-text{top: -35px; line-height: 26px; font-size: 26px;}

/* 产品动态 */
.layadmin-news{height: 60px !important; padding: 5px 0;}
.layadmin-news a{display: block; line-height: 60px; text-align: center;}
.layadmin-news .layui-carousel-ind{height: 45px;}

/* 文字列表 */
.layadmin-list li{margin-bottom: 6px; padding-bottom: 6px; border-bottom-color: #f6f6f6; list-style-position: inside; list-style-type: disc;}
.layadmin-list li{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layadmin-list li a{color: #666;}
.layadmin-list li a:hover{color: #009688;}
.layadmin-list li:last-child{border: none; padding: 0; margin: 0;}

/* 文本区域 */
.layadmin-text p{margin-bottom: 10px; text-indent: 2em;}
.layadmin-text p:last-child{margin: 0;}
.layadmin-font-em{font-size: 13px; color: #758697;}



/* 进行中的项目 */
.layui-card-header .layui-a-tips{position: absolute; right: 15px; color: #01AAED;}
.layuiadmin-card-text{background-color: #f8f8f8; color: #777; padding: 24px;}
.layuiadmin-card-text .layui-text-top{padding-bottom: 10px;}
.layuiadmin-card-text .layui-text-top i{margin-right: 10px; font-size: 24px; color: #009688;}
.layuiadmin-card-text .layui-text-top a{line-height: 24px; font-size: 16px; vertical-align: top;}
.layuiadmin-card-text .layui-text-center{height: 44px; line-height: 22px; margin-bottom: 10px; overflow: hidden;}
.layuiadmin-card-text .layui-text-bottom{position: relative;}
.layuiadmin-card-text .layui-text-bottom a{color: #777; font-size: 12px; text-overflow: ellipsis; word-break: break-all;}
.layuiadmin-card-text .layui-text-bottom span{color: #CCC; font-size: 12px; position: absolute; right: 0;}
.layuiadmin-card-text a:hover,
.layuiadmin-card-link a:hover,
.layuiadmin-card-team li a:hover{color: #01AAED; transition: all 300ms;}

/* 动态 */
.layuiadmin-card-status{padding: 0 10px 10px 10px;}
.layuiadmin-card-status dd{padding: 15px 0; border-bottom: 1px solid #EEE; display: -webkit-flex; display: flex;}
.layuiadmin-card-status dd:last-child{border: none;}
.layuiadmin-card-status dd div.layui-status-img,
.layuiadmin-card-team .layui-team-img{width: 32px; height: 32px; border-radius: 50%; background-color: #009688; margin-right: 15px;}
.layuiadmin-card-status dd div.layui-status-img a{width: 100%; height: 100%; display: inline-block; text-align: center; line-height: 32px;}
.layuiadmin-card-status dd div.layui-status-img img,
.layuiadmin-card-team .layui-team-img img{width: 50%; height: 50%;}
.layuiadmin-card-status dd div a{color: #01AAED;}
.layuiadmin-card-status dd div span{color: #BBB;}

/* 便捷导航 */
.layuiadmin-card-link{padding-left: 10px; font-size: 0}
.layuiadmin-card-link a{display: inline-block; width: 25%; color: #666; font-size: 14px; margin-bottom: 12px;}
.layuiadmin-card-link button{vertical-align: top;}
.layuiadmin-card-link button:hover{color: #009688;}

/* 团队 */
.layuiadmin-card-team li{padding: 10px 0 10px 10px;}
.layuiadmin-card-team .layui-team-img{display: inline-block; margin-right: 8px; width: 24px; height: 24px; text-align: center; line-height: 24px;}
.layuiadmin-card-team span{color: #777;}


/* 主页示例二 by star1029 */
.layuiadmin-badge{position: absolute; top: 50%; margin-top: -9px; right: 15px; color: #01AAED; }
.layuiadmin-card-list{padding: 15px;}
.layuiadmin-card-list p.layuiadmin-big-font{font-size: 36px; color: #666; line-height: 36px; padding: 5px 0 10px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap;}
.layuiadmin-card-list p.layuiadmin-normal-font{padding-bottom: 10px; font-size: 20px; color: #666; line-height: 24px;}
.layuiadmin-span-color{font-size: 14px; position: absolute; right: 15px;}
.layuiadmin-span-color i{padding-left: 5px;}
.layuiadmin-btn-group{position: absolute; right: 15px;}

.layuiadmin-card-status li{position: relative; padding: 10px 0; border-bottom: 1px solid #EEE;}
.layuiadmin-card-status li h3{padding-bottom: 5px; font-weight: 700;}
.layuiadmin-card-status li p{padding-bottom: 10px;}
.layuiadmin-card-status li>span{color: #999;}
.layuiadmin-home2-usernote .layuiadmin-reply{display: none; position: absolute; right: 0; bottom: 12px;}
.layuiadmin-home2-usernote li:hover .layuiadmin-reply{display: block;}

.layuiadmin-page-table td span{color: #2F4056;}
.layuiadmin-page-table td span.first{color: #FF5722;}
.layuiadmin-page-table td span.second{color: #FFB800;}
.layuiadmin-page-table td span.third{color: #5FB878;}



/* 消息中心 */
.layuiAdmin-msg-detail h1{font-size: 16px;}
.layuiAdmin-msg-detail .layui-card-header{height: auto; line-height: 30px; padding: 15px;}
.layuiAdmin-msg-detail .layui-card-header span{padding: 0 5px; color: #999;}
.layuiAdmin-msg-detail .layui-card-header span:first-child{padding-left: 0;}
.layuiAdmin-msg-detail .layui-card-body{padding: 15px;}

/* 文章列表 */
.layuiadmin-content-bread{padding-bottom: 20px;}

/* 进度条样式 */
.layuiadmin-order-progress{position: relative; top: 12px;}




/*
 
 系统
 
*/


/* 头部图标重置 */
.layui-card-header.layuiadmin-card-header-auto{padding-top: 15px; padding-bottom: 15px; height: auto;}
.layuiadmin-card-header-auto i.layuiadmin-button-btn{position: relative; right: 0; top: 0; vertical-align: middle;}
.layuiadmin-card-header-auto .layui-form-item:last-child{margin-bottom: 0;}


/* 主题设置 */
.layadmin-setTheme{padding: 15px; overflow-x: hidden;}
.layadmin-setTheme>h5{padding: 20px 0 10px; color: #000;}
.layadmin-setTheme>h5:first-child{padding-top: 0;}
.layadmin-setTheme-color{width: 330px; font-size: 0;}
.layadmin-setTheme-color li{position: relative; display: inline-block; vertical-align: top; width: 80px; height: 50px; margin: 0 15px 15px 0; background-color: #f2f2f2; cursor: pointer; font-size: 12px; color: #666;}
.layadmin-setTheme-color li:after{content: ''; position: absolute; z-index: 20; top: 50%; left: 50%; width: 1px; height: 0; border: 1px solid #f2f2f2; transition: all .3s; -webkit-transition: all .3s; opacity: 0;}
.layadmin-setTheme-color li.layui-this:after,
.layadmin-setTheme-color li:hover:after{width: 100%; height: 100%; padding: 4px; top: -5px; left: -5px; border-color: #5FB878; opacity: 1;}

.layadmin-setTheme-header{position: relative; z-index: 10; height: 10px; border-top: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2;}
.layadmin-setTheme-side{position: absolute; left: 0; top: 0; width: 20px; height: 100%; z-index: 11; box-shadow: 1px 0 2px 0 rgba(0,0,0,.05);}
.layadmin-setTheme-logo{position: absolute; left: 0; top: 0; width: 100%; height: 10px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);}
.layadmin-form-right{text-align: right;}


/* 关于 */
.layadmin-about p{margin-bottom: 10px;}

/* 菜单列表 */
.layadmin-menu-list .layui-card-header{height: 50px; line-height: 50px; font-size: 16px;}
.layadmin-menu-list .layui-card-header:active{background-color: #f2f2f2;}
.layadmin-menu-list .layui-card-header .layui-icon{position: relative; top: 1px; left: 0; display: inline-block; margin: 0 10px 0; font-size: 18px;}


/* 动画 */
@-webkit-keyframes layui-rl{ /* 从右往左滑入 */
  from {-webkit-transform: translate3d(100%, 0, 0);}
  to {-webkit-transform: translate3d(0, 0, 0);}
}
@keyframes layui-rl{
  from {transform: translate3d(100%, 0, 0);}
  to {transform: translate3d(0, 0, 0);}
}
.layui-anim-rl{-webkit-animation-name: layui-rl; animation-name: layui-rl;}

@-webkit-keyframes layui-lr{ /* 从右往左滑入 */
  from {-webkit-transform: translate3d(0 0, 0); opacity: 1;}
  to {-webkit-transform: translate3d(100%, 0, 0); opacity: 1;}
}
@keyframes layui-lr{
  from {transform: translate3d(0, 0, 0);}
  to {transform: translate3d(100%, 0, 0);}
}
.layui-anim-lr{-webkit-animation-name: layui-lr; animation-name: layui-lr;}

.layui-anim-rl.layer-anim-close{-webkit-animation-name: layui-lr; animation-name: layui-lr;}


/* 提示页 */
.layadmin-tips{margin-top: 30px; text-align: center;}
.layadmin-tips .layui-icon[face]{display: inline-block; font-size: 300px; color: #393D49;}
.layadmin-tips .layui-text{width: 500px; margin: 30px auto; padding-top: 20px; border-top: 5px solid #009688; font-size: 16px;}
.layadmin-tips h1{font-size: 100px; line-height: 100px; color: #009688;}
.layadmin-tips .layui-text .layui-anim{display: inline-block;}


/*

  响应式补充

*/

@media screen and (max-width: 768px) {
  
  /* 产品清单模板 */
  .layadmin-panel-selection{margin: 0; width: auto;}
  
  /* 导航 */
  .layui-body .layui-nav .layui-nav-item{display: block;}

}



/* 输入框添加蓝色边框效果，阴影边框效果  */
.layui-textarea, .layui-input{
  border-radius: 4px;
}
/*.layui-input:focus,*/
/*.layui-textarea:focus,*/
/*.layui-input:active,*/
/*.layui-textarea:active{*/
/*  border-color: rgb(21, 137, 238) !important;*/
/*  -webkit-box-shadow: 0 0 5px #0070D2;*/
/*  -moz-box-shadow: 0 0 5px #0070D2;*/
/*  box-shadow: 0 0 5px #0070D2;*/
/*}*/

/*.layui-input:hover,*/
/*.layui-textarea:hover {*/
/*  border-color: rgba(21, 137, 238, 0.8) !important;*/
/*  -webkit-box-shadow: 0 0 5px rgba(21, 137, 238, 1);*/
/*  -moz-box-shadow: 0 0 5px rgba(21, 137, 238, 1);*/
/*  box-shadow: 0 0 5px rgba(21, 137, 238, 1);*/
/*}*/

/* 表单验证失败红色边框效果，阴影效果 */
.layui-form-danger, .layui-form-danger:focus, .layui-form-danger:hover{
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */


html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,canvas,progress,video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,kbd,pre,samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,input,optgroup,select,textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,th {
  padding: 0;
}

:root {

  /* LINE */

  /* Quick hack to shorten variables to avoid rbga() mangling by formatters */

  /* TEXT */
}

/* Custom mappings for font weights */

/* Maps to local font weights for system fonts that don't have all the weights */

/* GLOBAL */

/* Segoe UI (Windows Vista+) */

/* Map 400 to Regular, 500-600 to Bold when Semibold (Win 7+) not available */

@font-face {
  font-weight: 400;
  font-family: "Segoe UI";
  src: local("Segoe UI");
}

@font-face {
  font-weight: 500;
  font-family: "Segoe UI";
  src: local("Segoe UI Semibold"), local("Segoe UI Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Segoe UI";
  src: local("Segoe UI Semibold"), local("Segoe UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Segoe UI";
  src: local("Segoe UI Bold");
}

/* JAPANESE */

/* ja-JP */

/* Hiragino Sans (macOS 10.11+) */

/* Map 400-700 directly */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
}

/* Hiragino Kaku Gothic ProN (macOS 10.6-10.10, iOS 5+) */

/* Map 400 to W3, 500-700 to W6 */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W3"), local("Hiragino Kaku Gothic ProN");
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN";
  src: local("ヒラギノ角ゴ ProN W6"), local("Hiragino Kaku Gothic ProN W6");
}

/* Yu Gothic UI (Windows 8+) */

/* Map 400 to Medium, 500 to Semibold, 600-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Regular");
}

@font-face {
  font-weight: 500;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Semibold");
}

@font-face {
  font-weight: 600;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Yu Gothic UI";
  src: local("Yu Gothic UI Bold");
}

/* Meiryo UI (Windows 7+) */

/* 400 to Regular, 500-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Meiryo UI";
  src: local("Meiryo UI");
}

@font-face {
  font-weight: 500;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Meiryo UI";
  src: local("Meiryo UI Bold");
}

/* SIMPLIFIED CHINESE */

/* zh-Hans */

/* PingFang SC (Mac OS 10.11+, iOS 9+) */

/* Map 400-700 directly */

@font-face {
  font-weight: 400;
  font-family: "PingFang SC";
  src: local("PingFang SC Regular");
}

@font-face {
  font-weight: 500;
  font-family: "PingFang SC";
  src: local("PingFang SC Medium");
}

@font-face {
  font-weight: 600;
  font-family: "PingFang SC";
  src: local("PingFang SC Semibold");
}

@font-face {
  font-weight: 700;
  font-family: "PingFang SC";
  src: local("PingFang SC Bold");
}

/* Hiragino Sans GB (macOS 10.8+) */

/* Map 400 to W3, 500-700 to W6 */

@font-face {
  font-weight: 400;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W3");
}

@font-face {
  font-weight: 500;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

@font-face {
  font-weight: 600;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

@font-face {
  font-weight: 700;
  font-family: "Hiragino Sans GB";
  src: local("Hiragino Sans GB W6");
}

/* Heiti SC (macOS 10.10+) */

/* Map 400 to Light, 500-700 to Medium */

@font-face {
  font-weight: 400;
  font-family: "Heiti SC";
  src: local("Heiti SC Light");
}

@font-face {
  font-weight: 500;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

@font-face {
  font-weight: 600;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

@font-face {
  font-weight: 700;
  font-family: "Heiti SC";
  src: local("Heiti SC Medium");
}

/* Microsoft YaHei (Windows Vista+) */

/* Map 400 to Regular, 500-600 to Bold when Semibold (Win 10+) not available */

@font-face {
  font-weight: 400;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei");
}

@font-face {
  font-weight: 500;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Semibold"), local("Microsoft YaHei Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Semibold"), local("Microsoft YaHei Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Microsoft YaHei";
  src: local("Microsoft YaHei Bold");
}

/* Microsoft JhengHei (Windows Vista+) */

/* Map 400 to Regular, 500-700 to Bold */

@font-face {
  font-weight: 400;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei");
}

@font-face {
  font-weight: 500;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

@font-face {
  font-weight: 600;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

@font-face {
  font-weight: 700;
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei Bold");
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
}

body,html {
  color: #3c4257;
  font-weight: 400;
  font-size: 14px;
}

code,kbd,pre,samp {
  font-size: 13px;
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  monospace;
}

code {
  color: inherit;
}

code:lang(ja-JP),kbd:lang(ja-JP),pre:lang(ja-JP),samp:lang(ja-JP) {
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  "Hiragino Sans"
  ,
  "Yu Gothic UI"
  ,
  "Meiryo UI"
  ,
  "Hiragino Kaku Gothic ProN"
  ,
  monospace;
}

code:lang(zh-Hans),kbd:lang(zh-Hans),pre:lang(zh-Hans),samp:lang(zh-Hans) {
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  "PingFang SC"
  ,
  "Hiragino Sans GB"
  ,
  "Heiti SC"
  ,
  "Microsoft YaHei"
  ,
  "Microsoft JhengHei"
  ,
  monospace;
}

body,button,html,input {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:lang(ja-JP),html:lang(ja-JP) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "Hiragino Sans"
  ,
  "Yu Gothic UI"
  ,
  "Meiryo UI"
  ,
  "Hiragino Kaku Gothic ProN"
  ,
  sans-serif;
}

body:lang(zh-Hans),html:lang(zh-Hans) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "PingFang SC"
  ,
  "Hiragino Sans GB"
  ,
  "Heiti SC"
  ,
  "Microsoft YaHei"
  ,
  "Microsoft JhengHei"
  ,
  sans-serif;
}

a {
  color: #5469d4;
  text-decoration: none;
}

a:hover {
  color: #1a1f36;
  text-decoration: none;
}

b,strong {
  font-weight: 500;
}

em,i {
  font-style: italic;
}

/** @define UnstyledLink **/

.UnstyledLink {
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  text-align: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.UnstyledLink:hover {
  color: inherit;
}

/** @define TextAligner, AlignInfo, TypeLine; */

.TextAligner::before {
  content: "\200B";
}

.AlignInfo {
  z-index: 1;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.AlignInfo-overlay {
  position: absolute;
  right: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  height: 100%;
  overflow: hidden;
}

.AlignInfo-overlay--boundary {
  box-shadow: 0 0 0 1px rgba(107, 124, 147, .2);
}

.TypeLine {
  z-index: 1;
  height: 1px;

  /* mix-blend-mode: hard-light; */
}

.TypeLine-inner {
  position: absolute;
  height: 1px;
  background: rgba(107, 124, 147, .2);
}

/** @define Flex; */

.Flex-flex {
  display: -ms-flexbox;
  display: flex;
}

.Flex-inlineFlex {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.Flex-alignContent--flexStart {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.Flex-alignContent--flexEnd {
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.Flex-alignContent--center {
  -ms-flex-line-pack: center;
  align-content: center;
}

.Flex-alignContent--spaceBetween {
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.Flex-alignContent--spaceAround {
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

.Flex-alignContent--stretch {
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

.Flex-alignItems--flexStart {
  -ms-flex-align: start;
  align-items: flex-start;
}

.Flex-alignItems--flexEnd {
  -ms-flex-align: end;
  align-items: flex-end;
}

.Flex-alignItems--center {
  -ms-flex-align: center;
  align-items: center;
}

.Flex-alignItems--baseline {
  -ms-flex-align: baseline;
  align-items: baseline;
}

.Flex-alignItems--stretch {
  -ms-flex-align: stretch;
  align-items: stretch;
}

.Flex-direction--row {
  -ms-flex-direction: row;
  flex-direction: row;
}

.Flex-direction--rowReversed {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.Flex-direction--column {
  -ms-flex-direction: column;
  flex-direction: column;
}

.Flex-direction--columnReverse {
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.Flex-justifyContent--flexStart {
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.Flex-justifyContent--flexEnd {
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.Flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.Flex-justifyContent--spaceBetween {
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.Flex-justifyContent--spaceAround {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.Flex-wrap--nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.Flex-wrap--wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.Flex-wrap--wrapReverse {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

/** @define Box; */

.Box-root {
  box-sizing: border-box;
}

.Box-hideIfEmpty:empty {
  display: none;
}

.Box-background--white {
  background-color: #fff;
}

.Box-background--surface {
  background-color: #e3e8ee;
}

.Box-background--offset {
  background-color: #f7fafc;
}

.Box-background--library {
  background-color: #f7fafc;
}

.Box-background--gray {
  background-color: #697386;
}

.Box-background--gray900 {
  background-color: #1a1f36;
}

.Box-background--gray800 {
  background-color: #2a2f45;
}

.Box-background--gray700 {
  background-color: #3c4257;
}

.Box-background--gray600 {
  background-color: #4f566b;
}

.Box-background--gray500 {
  background-color: #697386;
}

.Box-background--gray400 {
  background-color: #8792a2;
}

.Box-background--gray300 {
  background-color: #a3acb9;
}

.Box-background--gray200 {
  background-color: #c1c9d2;
}

.Box-background--gray100 {
  background-color: #e3e8ee;
}

.Box-background--gray50 {
  background-color: #f7fafc;
}

.Box-background--blue {
  background-color: #5469d4;
}

.Box-background--blue900 {
  background-color: #131f41;
}

.Box-background--blue800 {
  background-color: #212d63;
}

.Box-background--blue700 {
  background-color: #2f3d89;
}

.Box-background--blue600 {
  background-color: #3d4eac;
}

.Box-background--blue500 {
  background-color: #5469d4;
}

.Box-background--blue400 {
  background-color: #6c8eef;
}

.Box-background--blue300 {
  background-color: #7dabf8;
}

.Box-background--blue200 {
  background-color: #a4cdfe;
}

.Box-background--blue100 {
  background-color: #d6ecff;
}

.Box-background--blue50 {
  background-color: #f5fbff;
}

.Box-background--cyan {
  background-color: #067ab8;
}

.Box-background--cyan900 {
  background-color: #042235;
}

.Box-background--cyan800 {
  background-color: #093353;
}

.Box-background--cyan700 {
  background-color: #06457a;
}

.Box-background--cyan600 {
  background-color: #075996;
}
Gr
.Box-background--cyan500 {
  background-color: #067ab8;
}

.Box-background--cyan400 {
  background-color: #3a97d4;
}

.Box-background--cyan300 {
  background-color: #4db7e8;
}

.Box-background--cyan200 {
  background-color: #7fd3ed;
}

.Box-background--cyan100 {
  background-color: #c4f1f9;
}

.Box-background--cyan50 {
  background-color: #edfdfd;
}

.Box-background--green {
  background-color: #09825d;
}

.Box-background--green900 {
  background-color: #082429;
}

.Box-background--green800 {
  background-color: #0b3733;
}

.Box-background--green700 {
  background-color: #0d4b3b;
}

.Box-background--green600 {
  background-color: #0e6245;
}

.Box-background--green500 {
  background-color: #09825d;
}

.Box-background--green400 {
  background-color: #1ea672;
}

.Box-background--green300 {
  background-color: #33c27f;
}

.Box-background--green200 {
  background-color: #85d996;
}

.Box-background--green100 {
  background-color: #cbf4c9;
}

.Box-background--green50 {
  background-color: #efffed;
}

.Box-background--orange {
  background-color: #c44c34;
}

.Box-background--orange900 {
  background-color: #420e11;
}

.Box-background--orange800 {
  background-color: #5d161b;
}

.Box-background--orange700 {
  background-color: #7e1e23;
}

.Box-background--orange600 {
  background-color: #9e2f28;
}

.Box-background--orange500 {
  background-color: #c44c34;
}

.Box-background--orange400 {
  background-color: #e56f4a;
}

.Box-background--orange300 {
  background-color: #f5925e;
}

.Box-background--orange200 {
  background-color: #f8b886;
}

.Box-background--orange100 {
  background-color: #fee3c0;
}

.Box-background--orange50 {
  background-color: #fffaee;
}

.Box-background--purple {
  background-color: #a450b5;
}

.Box-background--purple900 {
  background-color: #2d0f55;
}

.Box-background--purple800 {
  background-color: #401d6a;
}

.Box-background--purple700 {
  background-color: #5b2b80;
}

.Box-background--purple600 {
  background-color: #7b3997;
}

.Box-background--purple500 {
  background-color: #a450b5;
}

.Box-background--purple400 {
  background-color: #c96ed0;
}

.Box-background--purple300 {
  background-color: #e28ddc;
}

.Box-background--purple200 {
  background-color: #f0b4e4;
}

.Box-background--purple100 {
  background-color: #fce0f6;
}

.Box-background--purple50 {
  background-color: #fff8fe;
}

.Box-background--red {
  background-color: #cd3d64;
}

.Box-background--red900 {
  background-color: #420828;
}

.Box-background--red800 {
  background-color: #5e1039;
}

.Box-background--red700 {
  background-color: #80143f;
}

.Box-background--red600 {
  background-color: #a41c4e;
}

.Box-background--red500 {
  background-color: #cd3d64;
}

.Box-background--red400 {
  background-color: #ed5f74;
}

.Box-background--red300 {
  background-color: #fa8389;
}

.Box-background--red200 {
  background-color: #fbb5b2;
}

.Box-background--red100 {
  background-color: #fde2dd;
}

.Box-background--red50 {
  background-color: #fff8f5;
}

.Box-background--yellow {
  background-color: #bb5504;
}

.Box-background--yellow900 {
  background-color: #3a1607;
}

.Box-background--yellow800 {
  background-color: #571f0d;
}

.Box-background--yellow700 {
  background-color: #762b0b;
}

.Box-background--yellow600 {
  background-color: #983705;
}

.Box-background--yellow500 {
  background-color: #bb5504;
}

.Box-background--yellow400 {
  background-color: #d97917;
}

.Box-background--yellow300 {
  background-color: #e5993e;
}

.Box-background--yellow200 {
  background-color: #efc078;
}

.Box-background--yellow100 {
  background-color: #f8e5b9;
}

.Box-background--yellow50 {
  background-color: #fcf9e9;
}

.Box-background--violet {
  background-color: #8260c3;
}

.Box-background--violet900 {
  background-color: #1f184e;
}

.Box-background--violet800 {
  background-color: #352465;
}

.Box-background--violet700 {
  background-color: #4b3480;
}

.Box-background--violet600 {
  background-color: #61469b;
}

.Box-background--violet500 {
  background-color: #8260c3;
}

.Box-background--violet400 {
  background-color: #9c82db;
}

.Box-background--violet300 {
  background-color: #b0a1e1;
}

.Box-background--violet200 {
  background-color: #c7c2ea;
}

.Box-background--violet100 {
  background-color: #e6e6fc;
}

.Box-background--violet50 {
  background-color: #f8f9fe;
}

.Box-divider--light-top-1 {
  box-shadow: inset 0 1px #e3e8ee;
}

.Box-divider--light-bottom-1 {
  box-shadow: inset 0 -1px #e3e8ee;
}

.Box-divider--light-left-1 {
  box-shadow: inset 1px 0 #e3e8ee;
}

.Box-divider--light-right-1 {
  box-shadow: inset -1px 0 #e3e8ee;
}

.Box-divider--light-vertical-1 {
  box-shadow: inset 0 -1px #e3e8ee,
  inset 0 1px #e3e8ee;
}

.Box-divider--light-horizontal-1 {
  box-shadow: inset -1px 0 #e3e8ee,
  inset 1px 0 #e3e8ee;
}

.Box-divider--light-all-1 {
  box-shadow: inset 0 0 0 1px #e3e8ee;
}

.Box-divider--medium-top-1 {
  box-shadow: inset 0 1px #c1c9d2;
}

.Box-divider--medium-bottom-1 {
  box-shadow: inset 0 -1px #c1c9d2;
}

.Box-divider--medium-left-1 {
  box-shadow: inset 1px 0 #c1c9d2;
}

.Box-divider--medium-right-1 {
  box-shadow: inset -1px 0 #c1c9d2;
}

.Box-divider--medium-vertical-1 {
  box-shadow: inset 0 -1px #c1c9d2,
  inset 0 1px #c1c9d2;
}

.Box-divider--medium-horizontal-1 {
  box-shadow: inset -1px 0 #c1c9d2,
  inset 1px 0 #c1c9d2;
}

.Box-divider--medium-all-1 {
  box-shadow: inset 0 0 0 1px #c1c9d2;
}

.Box-divider--dark-top-1 {
  box-shadow: inset 0 1px #4f566b;
}

.Box-divider--dark-bottom-1 {
  box-shadow: inset 0 -1px #4f566b;
}

.Box-divider--dark-left-1 {
  box-shadow: inset 1px 0 #4f566b;
}

.Box-divider--dark-right-1 {
  box-shadow: inset -1px 0 #4f566b;
}

.Box-divider--dark-vertical-1 {
  box-shadow: inset 0 -1px #4f566b,
  inset 0 1px #4f566b;
}

.Box-divider--dark-horizontal-1 {
  box-shadow: inset -1px 0 #4f566b,
  inset 1px 0 #4f566b;
}

.Box-divider--dark-all-1 {
  box-shadow: inset 0 0 0 1px #4f566b;
}

.Box-divider--white-top-1 {
  box-shadow: inset 0 1px white;
}

.Box-divider--white-bottom-1 {
  box-shadow: inset 0 -1px white;
}

.Box-divider--white-left-1 {
  box-shadow: inset 1px 0 white;
}

.Box-divider--white-right-1 {
  box-shadow: inset -1px 0 white;
}

.Box-divider--white-vertical-1 {
  box-shadow: inset 0 -1px white, inset 0 1px white;
}

.Box-divider--white-horizontal-1 {
  box-shadow: inset -1px 0 white, inset 1px 0 white;
}

.Box-divider--white-all-1 {
  box-shadow: inset 0 0 0 1px white;
}

.Box-divider--light-top-2 {
  box-shadow: inset 0 2px #e3e8ee;
}

.Box-divider--light-bottom-2 {
  box-shadow: inset 0 -2px #e3e8ee;
}

.Box-divider--light-left-2 {
  box-shadow: inset 2px 0 #e3e8ee;
}

.Box-divider--light-right-2 {
  box-shadow: inset -2px 0 #e3e8ee;
}

.Box-divider--light-vertical-2 {
  box-shadow: inset 0 -2px #e3e8ee,
  inset 0 2px #e3e8ee;
}

.Box-divider--light-horizontal-2 {
  box-shadow: inset -2px 0 #e3e8ee,
  inset 2px 0 #e3e8ee;
}

.Box-divider--light-all-2 {
  box-shadow: inset 0 0 0 2px #e3e8ee;
}

.Box-divider--medium-top-2 {
  box-shadow: inset 0 2px #c1c9d2;
}

.Box-divider--medium-bottom-2 {
  box-shadow: inset 0 -2px #c1c9d2;
}

.Box-divider--medium-left-2 {
  box-shadow: inset 2px 0 #c1c9d2;
}

.Box-divider--medium-right-2 {
  box-shadow: inset -2px 0 #c1c9d2;
}

.Box-divider--medium-vertical-2 {
  box-shadow: inset 0 -2px #c1c9d2,
  inset 0 2px #c1c9d2;
}

.Box-divider--medium-horizontal-2 {
  box-shadow: inset -2px 0 #c1c9d2,
  inset 2px 0 #c1c9d2;
}

.Box-divider--medium-all-2 {
  box-shadow: inset 0 0 0 2px #c1c9d2;
}

.Box-divider--dark-top-2 {
  box-shadow: inset 0 2px #4f566b;
}

.Box-divider--dark-bottom-2 {
  box-shadow: inset 0 -2px #4f566b;
}

.Box-divider--dark-left-2 {
  box-shadow: inset 2px 0 #4f566b;
}

.Box-divider--dark-right-2 {
  box-shadow: inset -2px 0 #4f566b;
}

.Box-divider--dark-vertical-2 {
  box-shadow: inset 0 -2px #4f566b,
  inset 0 2px #4f566b;
}

.Box-divider--dark-horizontal-2 {
  box-shadow: inset -2px 0 #4f566b,
  inset 2px 0 #4f566b;
}

.Box-divider--dark-all-2 {
  box-shadow: inset 0 0 0 2px #4f566b;
}

.Box-divider--white-top-2 {
  box-shadow: inset 0 2px white;
}

.Box-divider--white-bottom-2 {
  box-shadow: inset 0 -2px white;
}

.Box-divider--white-left-2 {
  box-shadow: inset 2px 0 white;
}

.Box-divider--white-right-2 {
  box-shadow: inset -2px 0 white;
}

.Box-divider--white-vertical-2 {
  box-shadow: inset 0 -2px white, inset 0 2px white;
}

.Box-divider--white-horizontal-2 {
  box-shadow: inset -2px 0 white, inset 2px 0 white;
}

.Box-divider--white-all-2 {
  box-shadow: inset 0 0 0 2px white;
}

/** @define Margin; */

.Margin-top--0 {
  margin-top: 0;
}

.Margin-top--2 {
  margin-top: 2px;
}

.Margin-top--4 {
  margin-top: 4px;
}

.Margin-top--8 {
  margin-top: 8px;
}

.Margin-top--12 {
  margin-top: 12px;
}

.Margin-top--16 {
  margin-top: 16px;
}

.Margin-top--20 {
  margin-top: 20px;
}

.Margin-top--24 {
  margin-top: 24px;
}

.Margin-top--32 {
  margin-top: 32px;
}

.Margin-top--48 {
  margin-top: 48px;
}

.Margin-top--64 {
  margin-top: 64px;
}

.Margin-top--80 {
  margin-top: 80px;
}

.Margin-right--0 {
  margin-right: 0;
}

.Margin-right--2 {
  margin-right: 2px;
}

.Margin-right--4 {
  margin-right: 4px;
}

.Margin-right--8 {
  margin-right: 8px;
}

.Margin-right--10 {
  margin-right: 10px;
}

.Margin-right--12 {
  margin-right: 12px;
}

.Margin-right--16 {
  margin-right: 16px;
}

.Margin-right--20 {
  margin-right: 20px;
}

.Margin-right--24 {
  margin-right: 24px;
}

.Margin-right--32 {
  margin-right: 32px;
}

.Margin-right--48 {
  margin-right: 48px;
}

.Margin-right--64 {
  margin-right: 64px;
}

.Margin-right--80 {
  margin-right: 80px;
}

.Margin-bottom--0 {
  margin-bottom: 0;
}

.Margin-bottom--2 {
  margin-bottom: 2px;
}

.Margin-bottom--4 {
  margin-bottom: 4px;
}

.Margin-bottom--8 {
  margin-bottom: 8px;
}

.Margin-bottom--12 {
  margin-bottom: 12px;
}

.Margin-bottom--16 {
  margin-bottom: 16px;
}

.Margin-bottom--20 {
  margin-bottom: 20px;
}

.Margin-bottom--24 {
  margin-bottom: 24px;
}

.Margin-bottom--32 {
  margin-bottom: 32px;
}

.Margin-bottom--48 {
  margin-bottom: 48px;
}

.Margin-bottom--64 {
  margin-bottom: 64px;
}

.Margin-bottom--80 {
  margin-bottom: 80px;
}

.Margin-left--0 {
  margin-left: 0;
}

.Margin-left--2 {
  margin-left: 2px;
}

.Margin-left--4 {
  margin-left: 4px;
}

.Margin-left--8 {
  margin-left: 8px;
}

.Margin-left--12 {
  margin-left: 12px;
}

.Margin-left--16 {
  margin-left: 16px;
}

.Margin-left--20 {
  margin-left: 20px;
}

.Margin-left--24 {
  margin-left: 24px;
}

.Margin-left--32 {
  margin-left: 32px;
}

.Margin-left--48 {
  margin-left: 48px;
}

.Margin-left--64 {
  margin-left: 64px;
}

.Margin-left--80 {
  margin-left: 80px;
}

.Margin-vertical--0 {
  margin-top: 0;
  margin-bottom: 0;
}

.Margin-vertical--2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.Margin-vertical--4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.Margin-vertical--8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.Margin-vertical--12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.Margin-vertical--16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.Margin-vertical--20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.Margin-vertical--24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.Margin-vertical--32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.Margin-vertical--48 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.Margin-vertical--64 {
  margin-top: 64px;
  margin-bottom: 64px;
}

.Margin-vertical--80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.Margin-horizontal--0 {
  margin-right: 0;
  margin-left: 0;
}

.Margin-horizontal--2 {
  margin-right: 2px;
  margin-left: 2px;
}

.Margin-horizontal--4 {
  margin-right: 4px;
  margin-left: 4px;
}

.Margin-horizontal--8 {
  margin-right: 8px;
  margin-left: 8px;
}

.Margin-horizontal--12 {
  margin-right: 12px;
  margin-left: 12px;
}

.Margin-horizontal--16 {
  margin-right: 16px;
  margin-left: 16px;
}

.Margin-horizontal--20 {
  margin-right: 20px;
  margin-left: 20px;
}

.Margin-horizontal--24 {
  margin-right: 24px;
  margin-left: 24px;
}

.Margin-horizontal--32 {
  margin-right: 32px;
  margin-left: 32px;
}

.Margin-horizontal--48 {
  margin-right: 48px;
  margin-left: 48px;
}

.Margin-horizontal--64 {
  margin-right: 64px;
  margin-left: 64px;
}

.Margin-horizontal--80 {
  margin-right: 80px;
  margin-left: 80px;
}

.Margin-all--0 {
  margin: 0;
}

.Margin-all--2 {
  margin: 2px;
}

.Margin-all--4 {
  margin: 4px;
}

.Margin-all--8 {
  margin: 8px;
}

.Margin-all--12 {
  margin: 12px;
}

.Margin-all--16 {
  margin: 16px;
}

.Margin-all--20 {
  margin: 20px;
}

.Margin-all--24 {
  margin: 24px;
}

.Margin-all--32 {
  margin: 32px;
}

.Margin-all--48 {
  margin: 48px;
}

.Margin-all--64 {
  margin: 64px;
}

.Margin-all--80 {
  margin: 80px;
}

/** @define Padding; */

.Padding-top--0 {
  padding-top: 0;
}

.Padding-top--2 {
  padding-top: 2px;
}

.Padding-top--4 {
  padding-top: 4px;
}

.Padding-top--8 {
  padding-top: 8px;
}

.Padding-top--12 {
  padding-top: 12px;
}

.Padding-top--16 {
  padding-top: 16px;
}

.Padding-top--20 {
  padding-top: 20px;
}

.Padding-top--24 {
  padding-top: 24px;
}

.Padding-top--32 {
  padding-top: 32px;
}

.Padding-top--48 {
  padding-top: 48px;
}

.Padding-top--64 {
  padding-top: 64px;
}

.Padding-top--80 {
  padding-top: 80px;
}

.Padding-right--0 {
  padding-right: 0;
}

.Padding-right--2 {
  padding-right: 2px;
}

.Padding-right--4 {
  padding-right: 4px;
}

.Padding-right--8 {
  padding-right: 8px;
}

.Padding-right--12 {
  padding-right: 12px;
}

.Padding-right--16 {
  padding-right: 16px;
}

.Padding-right--20 {
  padding-right: 20px;
}

.Padding-right--24 {
  padding-right: 24px;
}

.Padding-right--32 {
  padding-right: 32px;
}

.Padding-right--48 {
  padding-right: 48px;
}

.Padding-right--64 {
  padding-right: 64px;
}

.Padding-right--80 {
  padding-right: 80px;
}

.Padding-bottom--0 {
  padding-bottom: 0;
}

.Padding-bottom--2 {
  padding-bottom: 2px;
}

.Padding-bottom--4 {
  padding-bottom: 4px;
}

.Padding-bottom--8 {
  padding-bottom: 8px;
}

.Padding-bottom--12 {
  padding-bottom: 12px;
}

.Padding-bottom--16 {
  padding-bottom: 16px;
}

.Padding-bottom--20 {
  padding-bottom: 20px;
}

.Padding-bottom--24 {
  padding-bottom: 24px;
}

.Padding-bottom--32 {
  padding-bottom: 32px;
}

.Padding-bottom--48 {
  padding-bottom: 48px;
}

.Padding-bottom--64 {
  padding-bottom: 64px;
}

.Padding-bottom--80 {
  padding-bottom: 80px;
}

.Padding-left--0 {
  padding-left: 0;
}

.Padding-left--2 {
  padding-left: 2px;
}

.Padding-left--4 {
  padding-left: 4px;
}

.Padding-left--8 {
  padding-left: 8px;
}

.Padding-left--12 {
  padding-left: 12px;
}

.Padding-left--16 {
  padding-left: 16px;
}

.Padding-left--20 {
  padding-left: 20px;
}

.Padding-left--24 {
  padding-left: 24px;
}

.Padding-left--32 {
  padding-left: 32px;
}

.Padding-left--48 {
  padding-left: 48px;
}

.Padding-left--64 {
  padding-left: 64px;
}

.Padding-left--80 {
  padding-left: 80px;
}

.Padding-vertical--0 {
  padding-top: 0;
  padding-bottom: 0;
}

.Padding-vertical--2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.Padding-vertical--4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.Padding-vertical--6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.Padding-vertical--8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.Padding-vertical--10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.Padding-vertical--12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.Padding-vertical--16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.Padding-vertical--20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.Padding-vertical--24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.Padding-vertical--32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.Padding-vertical--48 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.Padding-vertical--64 {
  padding-top: 64px;
  padding-bottom: 64px;
}

.Padding-vertical--80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.Padding-horizontal--0 {
  padding-right: 0;
  padding-left: 0;
}

.Padding-horizontal--2 {
  padding-right: 2px;
  padding-left: 2px;
}

.Padding-horizontal--4 {
  padding-right: 4px;
  padding-left: 4px;
}

.Padding-horizontal--6 {
  padding-right: 6px;
  padding-left: 6px;
}

.Padding-horizontal--8 {
  padding-right: 8px;
  padding-left: 8px;
}

.Padding-horizontal--12 {
  padding-right: 12px;
  padding-left: 12px;
}

.Padding-horizontal--14 {
  padding-right: 14px;
  padding-left: 14px;
}

.Padding-horizontal--16 {
  padding-right: 16px;
  padding-left: 16px;
}

.Padding-horizontal--20 {
  padding-right: 20px;
  padding-left: 20px;
}

.Padding-horizontal--24 {
  padding-right: 24px;
  padding-left: 24px;
}

.Padding-horizontal--32 {
  padding-right: 32px;
  padding-left: 32px;
}

.Padding-horizontal--48 {
  padding-right: 48px;
  padding-left: 48px;
}

.Padding-horizontal--64 {
  padding-right: 64px;
  padding-left: 64px;
}

.Padding-horizontal--80 {
  padding-right: 80px;
  padding-left: 80px;
}

.Padding-all--0 {
  padding: 0;
}

.Padding-all--2 {
  padding: 2px;
}

.Padding-all--4 {
  padding: 4px;
}

.Padding-all--8 {
  padding: 8px;
}

.Padding-all--12 {
  padding: 12px;
}

.Padding-all--16 {
  padding: 16px;
}

.Padding-all--20 {
  padding: 20px;
}

.Padding-all--24 {
  padding: 24px;
}

.Padding-all--32 {
  padding: 32px;
}

.Padding-all--48 {
  padding: 48px;
}

.Padding-all--64 {
  padding: 64px;
}

.Padding-all--80 {
  padding: 80px;
}

/** @define BankCheck **/

.BankCheck-tear {
  position: relative;
  z-index: 2;
  width: 100%;
}

.BankCheck-tearSvg {
  filter: drop-shadow(0 -1px 0 hsla(0, 0%, 0%, .04));
}

.BankCheck .BankCheck-card {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.BankCheck-bankName {
  width: 64px;
  height: 8px;
  border-radius: 2px;
}

.BankCheck--size--small .BankCheck-bankName {
  width: 40px;
  height: 6px;
}

.BankCheck-row {
  height: 32px;
}

.BankCheck--size--small .BankCheck-row {
  height: 24px;
}

.BankCheck-orderOf {
  width: 65%;
}

.BankCheck-amount {
  width: 35%;
  border-radius: 32px;
}

.BankCheck-memo {
  width: 50%;
}

.BankCheck-signature {
  width: 50%;
}

/** @define StatementPreview **/

.StatementPreview-descriptor {
  text-transform: uppercase;
}

.StatementPreview-tear {
  margin-top: -2px;
}

.StatementPreview-tearCover {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 4px;
}

.StatementPreview-tearPeaks {
  position: relative;
  z-index: 1;
  width: 100%;
}

.StatementPreview-tearSvg {
  filter: drop-shadow(0 2px 3px hsla(0, 0%, 0%, .07)) drop-shadow(0 1px 0 hsla(0, 0%, 0%, .04));
}

.Card-root {
  overflow: hidden;
}

.Card--shadow--keyline {
  box-shadow: 0
  0
  0
  1px
  #e3e8ee;
}

.Card--shadow--small {
  box-shadow: 0
  2px
  5px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  1px
  1px
  0
  rgba(0,0,0, 0.12);
}

.Card--shadow--medium {
  box-shadow: 0
  7px
  14px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  3px
  6px
  0
  rgba(0,0,0, 0.12);
}

.Card--shadow--large {
  box-shadow: 0
  15px
  35px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  5px
  15px
  0
  rgba(0,0,0, 0.12);
}

.Card--shadow--extraLarge {
  box-shadow: 0
  50px
  100px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  15px
  35px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  5px
  15px
  0
  rgba(0,0,0, 0.12);
}

.Card--radius--all {
  border-radius: 4px;
}

.Card--radius--bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Card--radius--bottomLeft {
  border-bottom-left-radius: 4px;
}

.Card--radius--bottomRight {
  border-bottom-right-radius: 4px;
}

.Card--radius--circle {
  border-radius: 50%;
}

.Card--radius--left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Card--radius--right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.Card--radius--top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Card--radius--topLeft {
  border-top-left-radius: 4px;
}

.Card--radius--topRight {
  border-top-right-radius: 4px;
}

/** @define DateInput **/

.DateInput-root .DateInput-input {
  width: 32px;
  text-align: center;
}

.DateInput-root .DateInput-input--year {
  width: 44px;
}

.DateInput-root--size--jumbo .DateInput-input {
  width: 40px;
}

.DateInput-root--size--jumbo .DateInput-input--year {
  width: 52px;
}

.DateInput-root .DateInput-input--year:lang(ja-JP),.DateInput-root .DateInput-input--year:lang(zh-Hans) {
  width: 60px;
}

.DateInput-root--size--jumbo .DateInput-input:lang(ja-JP),.DateInput-root--size--jumbo .DateInput-input:lang(zh-Hans) {
  width: 44px;
}

.DateInput-root--size--jumbo .DateInput-input--year:lang(ja-JP),.DateInput-root--size--jumbo .DateInput-input--year:lang(zh-Hans) {
  width: 76px;
}

/** @define Dialog; */

.Dialog-size--small {
  width: 320px;
}

.Dialog-size--medium {
  width: 448px;
}

.Dialog-size--large {
  width: 600px;
}

.Dialog-size--xlarge {
  width: 896px;
}

/** @define Grid **/

.Grid-root {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
}

/** Grid - gap **/

.Grid-gap--column-2 {
  margin-right: -1px;
  margin-left: -1px;
}

.Grid-gap--column-4 {
  margin-right: -2px;
  margin-left: -2px;
}

.Grid-gap--column-8 {
  margin-right: -4px;
  margin-left: -4px;
}

.Grid-gap--column-12 {
  margin-right: -6px;
  margin-left: -6px;
}

.Grid-gap--column-16 {
  margin-right: -8px;
  margin-left: -8px;
}

.Grid-gap--column-20 {
  margin-right: -10px;
  margin-left: -10px;
}

.Grid-gap--column-24 {
  margin-right: -12px;
  margin-left: -12px;
}

.Grid-gap--column-32 {
  margin-right: -16px;
  margin-left: -16px;
}

.Grid-gap--column-48 {
  margin-right: -24px;
  margin-left: -24px;
}

.Grid-gap--column-64 {
  margin-right: -32px;
  margin-left: -32px;
}

.Grid-gap--row-2 {
  margin-top: -2px;
}

.Grid-gap--row-4 {
  margin-top: -4px;
}

.Grid-gap--row-8 {
  margin-top: -8px;
}

.Grid-gap--row-12 {
  margin-top: -12px;
}

.Grid-gap--row-16 {
  margin-top: -16px;
}

.Grid-gap--row-20 {
  margin-top: -20px;
}

.Grid-gap--row-24 {
  margin-top: -24px;
}

.Grid-gap--row-32 {
  margin-top: -32px;
}

.Grid-gap--row-48 {
  margin-top: -48px;
}

.Grid-gap--row-64 {
  margin-top: -64px;
}

/** Grid - item **/

.Grid-item--columnStart1 {
  -ms-grid-column: 1;
  grid-column-start: 1;
}

.Grid-item--columnStart2 {
  -ms-grid-column: 2;
  grid-column-start: 2;
}

.Grid-item--columnStart3 {
  -ms-grid-column: 3;
  grid-column-start: 3;
}

.Grid-item--columnStart4 {
  -ms-grid-column: 4;
  grid-column-start: 4;
}

.Grid-item--columnStart5 {
  -ms-grid-column: 5;
  grid-column-start: 5;
}

.Grid-item--columnStart6 {
  -ms-grid-column: 6;
  grid-column-start: 6;
}

.Grid-item--columnStart7 {
  -ms-grid-column: 7;
  grid-column-start: 7;
}

.Grid-item--columnStart8 {
  -ms-grid-column: 8;
  grid-column-start: 8;
}

.Grid-item--columnStart9 {
  -ms-grid-column: 9;
  grid-column-start: 9;
}

.Grid-item--columnStart10 {
  -ms-grid-column: 10;
  grid-column-start: 10;
}

.Grid-item--columnStart11 {
  -ms-grid-column: 11;
  grid-column-start: 11;
}

.Grid-item--columnStart12 {
  -ms-grid-column: 12;
  grid-column-start: 12;
}

.Grid-item--columnSpan1 {
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

.Grid-item--columnSpan2 {
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

.Grid-item--columnSpan3 {
  -ms-grid-column-span: 3;
  grid-column-end: span 3;
}

.Grid-item--columnSpan4 {
  -ms-grid-column-span: 4;
  grid-column-end: span 4;
}

.Grid-item--columnSpan5 {
  -ms-grid-column-span: 5;
  grid-column-end: span 5;
}

.Grid-item--columnSpan6 {
  -ms-grid-column-span: 6;
  grid-column-end: span 6;
}

.Grid-item--columnSpan7 {
  -ms-grid-column-span: 7;
  grid-column-end: span 7;
}

.Grid-item--columnSpan8 {
  -ms-grid-column-span: 8;
  grid-column-end: span 8;
}

.Grid-item--columnSpan9 {
  -ms-grid-column-span: 9;
  grid-column-end: span 9;
}

.Grid-item--columnSpan10 {
  -ms-grid-column-span: 10;
  grid-column-end: span 10;
}

.Grid-item--columnSpan11 {
  -ms-grid-column-span: 11;
  grid-column-end: span 11;
}

.Grid-item--columnSpan12 {
  -ms-grid-column-span: 12;
  grid-column-end: span 12;
}

.Grid-item-gap {
  height: 100%;
}

.Grid-item-gap--column-2 {
  padding-right: 1px;
  padding-left: 1px;
}

.Grid-item-gap--column-4 {
  padding-right: 2px;
  padding-left: 2px;
}

.Grid-item-gap--column-8 {
  padding-right: 4px;
  padding-left: 4px;
}

.Grid-item-gap--column-12 {
  padding-right: 6px;
  padding-left: 6px;
}

.Grid-item-gap--column-16 {
  padding-right: 8px;
  padding-left: 8px;
}

.Grid-item-gap--column-20 {
  padding-right: 10px;
  padding-left: 10px;
}

.Grid-item-gap--column-24 {
  padding-right: 12px;
  padding-left: 12px;
}

.Grid-item-gap--column-32 {
  padding-right: 16px;
  padding-left: 16px;
}

.Grid-item-gap--column-48 {
  padding-right: 24px;
  padding-left: 24px;
}

.Grid-item-gap--column-64 {
  padding-right: 32px;
  padding-left: 32px;
}

.Grid-item-gap--row-2 {
  padding-top: 2px;
}

.Grid-item-gap--row-4 {
  padding-top: 4px;
}

.Grid-item-gap--row-8 {
  padding-top: 8px;
}

.Grid-item-gap--row-12 {
  padding-top: 12px;
}

.Grid-item-gap--row-16 {
  padding-top: 16px;
}

.Grid-item-gap--row-20 {
  padding-top: 20px;
}

.Grid-item-gap--row-24 {
  padding-top: 24px;
}

.Grid-item-gap--row-32 {
  padding-top: 32px;
}

.Grid-item-gap--row-48 {
  padding-top: 48px;
}

.Grid-item-gap--row-64 {
  padding-top: 64px;
}

/** @define PressableCore, PressableContext, PressableControlLabel **/

/** # PressableCore **/

.PressableCore {
  position: relative;
  transition: background-color 240ms, box-shadow 240ms;
}

/** # Pressable -- cursor **/

.PressableCore--cursor--arrow .PressableContext--cursor--arrow {
  cursor: default;
}

.PressableContext--cursor--pointer,.PressableCore--cursor--pointer {
  cursor: pointer;
}

.PressableContext--cursor--text,.PressableCore--cursor--text {
  cursor: text;
}

/** # Pressable -- radius **/

.PressableContext--radius--all,.PressableCore--radius--all {
  border-radius: 4px;
}

.PressableContext--radius--bottom,.PressableCore--radius--bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--bottomLeft,.PressableCore--radius--bottomLeft {
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--bottomRight,.PressableCore--radius--bottomRight {
  border-bottom-right-radius: 4px;
}

.PressableContext--radius--circle,.PressableCore--radius--circle {
  border-radius: 50%;
}

.PressableContext--radius--left,.PressableCore--radius--left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.PressableContext--radius--right,.PressableCore--radius--right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.PressableContext--radius--top,.PressableCore--radius--top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.PressableContext--radius--topLeft,.PressableCore--radius--topLeft {
  border-top-left-radius: 4px;
}

.PressableContext--radius--topRight,.PressableCore--radius--topRight {
  border-top-right-radius: 4px;
}

/** # Pressable -- height **/

.PressableContext--height {
  min-height: inherit;
}

.PressableContext--height--jumbo,.PressableCore--height--jumbo {
  min-height: 44px;
}

.PressableContext--height--large,.PressableCore--height--large {
  min-height: 36px;
}

.PressableContext--height--medium,.PressableCore--height--medium {
  min-height: 28px;
}

.PressableContext--height--small,.PressableCore--height--small {
  min-height: 24px;
}

/** # Pressable -- width **/

.PressableCore--width {
  max-width: 100%;
}

.PressableCore--width--long {
  width: 352px;
}

.PressableCore--width--maximized {
  width: 100%;
}

.PressableCore--width--short {
  width: 168px;
}

.PressableContext--width {
  width: 100%;
}

/** # Pressable - base **/

.PressableCore-base {
  position: relative;
  z-index: 1;
  display: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

/** # Pressable - overlay **/

.PressableCore-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}

.PressableCore-overlay--isVisible {
  z-index: 10;
  opacity: 0.5;
  pointer-events: all;
}

.PressableCore-overlay--extendBy1 {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
}

.PressableCore-overlay--extendBy2 {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
}

/** # PressableContext **/

.PressableContext {
  position: relative;
  z-index: 1;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/
  margin: 0;
  text-decoration: none;
  vertical-align: middle;
  word-break: normal;
  background: transparent;
  border: 0;
  outline: 0;
  transition: color 240ms;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

.PressableContext:-ms-input-placeholder {
  color: #a3acb9;
}

.PressableContext::-ms-input-placeholder {
  color: #a3acb9;
}

.PressableContext::placeholder {
  color: #a3acb9;
}

/** # PressableContext -- display **/

.PressableContext--display--block {
  display: block;
}

.PressableContext--display--flex {
  display: -ms-flexbox;
  display: flex;
}

.PressableContext--display--inline {
  display: inline;
}

.PressableContext--display--inlineFlex {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/** # PressableContext -- fontLineHeight **/

.PressableContext--fontLineHeight--16 {
  line-height: 16px;
}

.PressableContext--fontLineHeight--20 {
  line-height: 20px;
}

.PressableContext--fontLineHeight--24 {
  line-height: 24px;
}

.PressableContext--fontLineHeight--28 {
  line-height: 28px;
}

/** # PressableContext -- fontSize **/

.PressableContext--fontSize--13 {
  font-size: 13px;
}

.PressableContext--fontSize--14 {
  font-size: 14px;
}

.PressableContext--fontSize--16 {
  font-size: 16px;
}

/** # PressableContext -- fontWeight **/

.PressableContext--fontWeight--regular {
  font-weight: 400;
}

.PressableContext--fontWeight--medium {
  font-weight: 500;
}

.PressableContext--fontWeight--bold {
  font-weight: 600;
}

/** # PressableControlLabel - label **/

.PressableControlLabel-label {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.PressableControlLabel.Is--disabled .PressableControlLabel-label {
  cursor: default;
}

/** @define Text; */

.Text-align--center {
  text-align: center;
}

.Text-align--left {
  text-align: left;
}

.Text-align--right {
  text-align: right;
}

.Text-color--dark {
  color: #1a1f36;
}

.Text-color--default {
  color: #3c4257;
}

.Text-color--disabled {
  color: #a3acb9;
}

.Text-color--inherit {
  color: inherit;
}

.Text-color--invalid {
  color: #cd3d64;
}

.Text-color--selected {
  color: #5469d4;
}

.Text-color--white {
  color: #fff;
}

.Text-color--gray {
  color: #697386;
}

.Text-color--gray900 {
  color: #1a1f36;
}

.Text-color--gray800 {
  color: #2a2f45;
}

.Text-color--gray700 {
  color: #3c4257;
}

.Text-color--gray600 {
  color: #4f566b;
}

.Text-color--gray500 {
  color: #697386;
}

.Text-color--gray400 {
  color: #8792a2;
}

.Text-color--gray300 {
  color: #a3acb9;
}

.Text-color--gray200 {
  color: #c1c9d2;
}

.Text-color--gray100 {
  color: #e3e8ee;
}

.Text-color--gray50 {
  color: #f7fafc;
}

.Text-color--blue {
  color: #5469d4;
}

.Text-color--blue900 {
  color: #131f41;
}

.Text-color--blue800 {
  color: #212d63;
}

.Text-color--blue700 {
  color: #2f3d89;
}

.Text-color--blue600 {
  color: #3d4eac;
}

.Text-color--blue500 {
  color: #5469d4;
}

.Text-color--blue400 {
  color: #6c8eef;
}

.Text-color--blue300 {
  color: #7dabf8;
}

.Text-color--blue200 {
  color: #a4cdfe;
}

.Text-color--blue100 {
  color: #d6ecff;
}

.Text-color--blue50 {
  color: #f5fbff;
}

.Text-color--cyan {
  color: #067ab8;
}

.Text-color--cyan900 {
  color: #042235;
}

.Text-color--cyan800 {
  color: #093353;
}

.Text-color--cyan700 {
  color: #06457a;
}

.Text-color--cyan600 {
  color: #075996;
}

.Text-color--cyan500 {
  color: #067ab8;
}

.Text-color--cyan400 {
  color: #3a97d4;
}

.Text-color--cyan300 {
  color: #4db7e8;
}

.Text-color--cyan200 {
  color: #7fd3ed;
}

.Text-color--cyan100 {
  color: #c4f1f9;
}

.Text-color--cyan50 {
  color: #edfdfd;
}

.Text-color--green {
  color: #09825d;
}

.Text-color--green900 {
  color: #082429;
}

.Text-color--green800 {
  color: #0b3733;
}

.Text-color--green700 {
  color: #0d4b3b;
}

.Text-color--green600 {
  color: #0e6245;
}

.Text-color--green500 {
  color: #09825d;
}

.Text-color--green400 {
  color: #1ea672;
}

.Text-color--green300 {
  color: #33c27f;
}

.Text-color--green200 {
  color: #85d996;
}

.Text-color--green100 {
  color: #cbf4c9;
}

.Text-color--green50 {
  color: #efffed;
}

.Text-color--red {
  color: #cd3d64;
}

.Text-color--red900 {
  color: #420828;
}

.Text-color--red800 {
  color: #5e1039;
}

.Text-color--red700 {
  color: #80143f;
}

.Text-color--red600 {
  color: #a41c4e;
}

.Text-color--red500 {
  color: #cd3d64;
}

.Text-color--red400 {
  color: #ed5f74;
}

.Text-color--red300 {
  color: #fa8389;
}

.Text-color--red200 {
  color: #fbb5b2;
}

.Text-color--red100 {
  color: #fde2dd;
}

.Text-color--red50 {
  color: #fff8f5;
}

.Text-color--yellow {
  color: #bb5504;
}

.Text-color--yellow900 {
  color: #3a1607;
}

.Text-color--yellow800 {
  color: #571f0d;
}

.Text-color--yellow700 {
  color: #762b0b;
}

.Text-color--yellow600 {
  color: #983705;
}

.Text-color--yellow500 {
  color: #bb5504;
}

.Text-color--yellow400 {
  color: #d97917;
}

.Text-color--yellow300 {
  color: #e5993e;
}

.Text-color--yellow200 {
  color: #efc078;
}

.Text-color--yellow100 {
  color: #f8e5b9;
}

.Text-color--yellow50 {
  color: #fcf9e9;
}

.Text-color--orange {
  color: #c44c34;
}

.Text-color--orange900 {
  color: #420e11;
}

.Text-color--orange800 {
  color: #5d161b;
}

.Text-color--orange700 {
  color: #7e1e23;
}

.Text-color--orange600 {
  color: #9e2f28;
}

.Text-color--orange500 {
  color: #c44c34;
}

.Text-color--orange400 {
  color: #e56f4a;
}

.Text-color--orange300 {
  color: #f5925e;
}

.Text-color--orange200 {
  color: #f8b886;
}

.Text-color--orange100 {
  color: #fee3c0;
}

.Text-color--orange50 {
  color: #fffaee;
}

.Text-color--purple {
  color: #a450b5;
}

.Text-color--purple900 {
  color: #2d0f55;
}

.Text-color--purple800 {
  color: #401d6a;
}

.Text-color--purple700 {
  color: #5b2b80;
}

.Text-color--purple600 {
  color: #7b3997;
}

.Text-color--purple500 {
  color: #a450b5;
}

.Text-color--purple400 {
  color: #c96ed0;
}

.Text-color--purple300 {
  color: #e28ddc;
}

.Text-color--purple200 {
  color: #f0b4e4;
}

.Text-color--purple100 {
  color: #fce0f6;
}

.Text-color--purple50 {
  color: #fff8fe;
}

.Text-color--violet {
  color: #8260c3;
}

.Text-color--violet900 {
  color: #1f184e;
}

.Text-color--violet800 {
  color: #352465;
}

.Text-color--violet700 {
  color: #4b3480;
}

.Text-color--violet600 {
  color: #61469b;
}

.Text-color--violet500 {
  color: #8260c3;
}

.Text-color--violet400 {
  color: #9c82db;
}

.Text-color--violet300 {
  color: #b0a1e1;
}

.Text-color--violet200 {
  color: #c7c2ea;
}

.Text-color--violet100 {
  color: #e6e6fc;
}

.Text-color--violet50 {
  color: #f8f9fe;
}

.Text-display--block {
  display: block;
}

.Text-display--inline {
  display: inline;
}

.Text-fontSize--9 {
  font-size: 9px;
}

.Text-fontSize--11 {
  font-size: 11px;
}

.Text-fontSize--12 {
  font-size: 12px;
}

.Text-fontSize--13 {
  font-size: 13px;
}

.Text-fontSize--14 {
  font-size: 14px;
}

.Text-fontSize--15 {
  font-size: 15px;
}

.Text-fontSize--16 {
  font-size: 16px;
}

.Text-fontSize--18 {
  font-size: 18px;
}

.Text-fontSize--20 {
  font-size: 20px;
}

.Text-fontSize--24 {
  font-size: 24px;
}

.Text-fontSize--28 {
  font-size: 28px
}

.Text-fontSize--32 {
  font-size: 32px;
}

.Text-fontSize--48 {
  font-size: 48px;
}

.Text-fontSize--56 {
  font-size: 56px;
}

.Text-fontWeight--regular {
  font-weight: 400;
}

.Text-fontWeight--medium {
  font-weight: 500;
}

.Text-fontWeight--bold {
  font-weight: 700;
}

.Text-lineHeight--16 {
  line-height: 16px;
}

.Text-lineHeight--20 {
  line-height: 20px;
}

.Text-lineHeight--22 {
  line-height: 22px;
}

.Text-lineHeight--24 {
  line-height: 24px;
}

.Text-lineHeight--28 {
  line-height: 28px;
}

.Text-lineHeight--32 {
  line-height: 32px;
}

.Text-lineHeight--40 {
  line-height: 40px;
}

.Text-lineHeight--56 {
  line-height: 56px;
}

.Text-lineHeight--64 {
  line-height: 64px;
}

.Text-numericSpacing--proportional {
  font-feature-settings: "pnum";
  font-variant: proportional-nums;
}

.Text-numericSpacing--tabular {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Text-typeface--base {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  sans-serif;
}

.Text-typeface--base:lang(ja-JP) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "Hiragino Sans"
  ,
  "Yu Gothic UI"
  ,
  "Meiryo UI"
  ,
  "Hiragino Kaku Gothic ProN"
  ,
  sans-serif;
}

.Text-typeface--base:lang(zh-Hans) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "PingFang SC"
  ,
  "Hiragino Sans GB"
  ,
  "Heiti SC"
  ,
  "Microsoft YaHei"
  ,
  "Microsoft JhengHei"
  ,
  sans-serif;
}

.Text-typeface--upper {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  sans-serif;
  text-transform: uppercase;
}

.Text-typeface--upper:lang(ja-JP) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "Hiragino Sans"
  ,
  "Yu Gothic UI"
  ,
  "Meiryo UI"
  ,
  "Hiragino Kaku Gothic ProN"
  ,
  sans-serif;
}

.Text-typeface--upper:lang(zh-Hans) {
  font-family: -apple-system
  ,
  BlinkMacSystemFont
  ,
  "Segoe UI"
  ,
  "Roboto"
  ,
  "Helvetica Neue"
  ,
  "Ubuntu"
  ,
  "PingFang SC"
  ,
  "Hiragino Sans GB"
  ,
  "Heiti SC"
  ,
  "Microsoft YaHei"
  ,
  "Microsoft JhengHei"
  ,
  sans-serif;
}

.Text-typeface--mono {
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  monospace;
}

.Text-typeface--mono:lang(ja-JP) {
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  "Hiragino Sans"
  ,
  "Yu Gothic UI"
  ,
  "Meiryo UI"
  ,
  "Hiragino Kaku Gothic ProN"
  ,
  monospace;
}

.Text-typeface--mono:lang(zh-Hans) {
  font-family: "Menlo"
  ,
  "Consolas"
  ,
  "PingFang SC"
  ,
  "Hiragino Sans GB"
  ,
  "Heiti SC"
  ,
  "Microsoft YaHei"
  ,
  "Microsoft JhengHei"
  ,
  monospace;
}

.Text--visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.Text-wordBreak--all {
  word-break: break-all;
}

.Text-wordBreak--normal {
  word-break: normal;
}

.Text-wordBreak--word {
  word-break: break-word;
}

.Text-wrap--wrap {
  white-space: normal;
}

.Text-wrap--noWrap {
  white-space: nowrap;
}

/** @define AddressInput **/

.AddressInput-grouping {
  width: 100%;
}

/** @define Button **/

.Button-element {
  height: 100%;
}

.Button-align {
  width: 100%;
}

/** Button - label **/

.Button-label {
  text-transform: none;
  transition: color 240ms;
}

.Button--hideLabel .Button-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/** Button - icon **/

.Button-icon {
  transition: color 240ms;
}

/** Button - shortcut **/

.Button-shortcut {
  color: inherit;
  font-size: 11px;
  line-height: 12px;
  opacity: 0.7;
}

/** @define ButtonLink **/

.ButtonLink.Is--disabled,.ButtonLink:disabled {
  pointer-events: none;
}

.ButtonLink:active .ButtonLink-label.Text-color--white,.ButtonLink:hover .ButtonLink-label.Text-color--white {
  color: white;
  opacity: 0.7;
}

.ButtonLink--Is--disabled--white .ButtonLink-label {
  color: white;
  opacity: 0.5;
}

.ButtonLink:active .ButtonLink-label,.ButtonLink:hover .ButtonLink-label {
  color: #1a1f36;
}

.ButtonLink--Is--disabled--white .Icon svg {
  color: white;
  opacity: 0.5;
}

.ButtonLink:active .Icon svg,.ButtonLink:hover .Icon svg {
  fill: #3c4257;
}

.ButtonLink:active .Icon.Icon-color--white svg,.ButtonLink:hover .Icon.Icon-color--white svg {
  opacity: 0.7;
  fill: white;
}

.ButtonLink:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
  0
  0
  4px
  rgba(58,151,212, 0.28)
  ,
  0
  0
  1px
  1px
  rgba(7,89,150, 0.36);
}

/** @define InlineLink **/

.Text-typeface--base .InlineLink,.Text-typeface--upper .InlineLink {
  font-weight: 500;
}

.Text-typeface--mono .InlineLink {
  font-weight: 700;
}

.InlineLink.Is--disabled,.InlineLink:disabled {
  pointer-events: none;
}

.InlineLink:active,.InlineLink:hover {
  color: #1a1f36;
}

.InlineLink:active .Icon svg,.InlineLink:hover .Icon svg {
  fill: #3c4257;
}

.InlineLink:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
  0
  0
  4px
  rgba(58,151,212, 0.28)
  ,
  0
  0
  1px
  1px
  rgba(7,89,150, 0.36);
}

/** @define ButtonBar **/

.ButtonBar-item {
  position: relative;
  z-index: 2;
  margin-right: 1px;
}

.ButtonBar-item--isLast {
  margin-right: 0;
}

.ButtonBar-item:hover {
  z-index: 3;
}

.ButtonBar-item:focus,.ButtonBar-item:focus-within {
  z-index: 4;
}

.ButtonBar-item.Is--disabled {
  z-index: 1;
}

.ButtonBar-item .ButtonBar-button {
  z-index: 2;
}

/**
  * - This is due to the usage of a partially transparent `box-shadow` for the
  *   "borders" causing them to be darker when they overlap oneanother.
**/

.ButtonBar-item::after,.ButtonBar-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 1px;
  background: white;
  content: "";
}

.ButtonBar-item--isFirst::before,.ButtonBar-item--isLast::after {
  display: none;
}

.ButtonBar-item::before {
  left: -1px;
}

.ButtonBar-item::after {
  right: -1px;
}

/** @define Checkbox **/

.Checkbox-source {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Checkbox-mark {
  position: relative;
  z-index: 1;
  transform: scale(0.75);
  opacity: 0;
  transition: transform 240ms, opacity 240ms;
}

.Checkbox-mark--visible {
  transform: scale(1);
  opacity: 1;
}

/** @define CodePuncher */

.CodePuncher-wrapper {
  position: relative;
}

.CodePuncher-groupSeparator {
  width: 8px;
  height: 4px;
  border-radius: 4px;
}

.CodePuncher .CodePuncher-minibox {
  position: relative;
  z-index: 1;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40px;
  height: 52px;
}

.CodePuncher-pressable {
  z-index: 2;
}

.CodePuncher-pressable--isFocused {
  z-index: 5;
}

.CodePuncher-controlInput {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  font-size: 32px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
}

.CodePuncher-target {
  display: none;
}

/** @define FileUploader **/

.FileUploader {
  position: relative;
  z-index: 2;
}

/** FileUploader - output **/

.FileUploader-output {
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: inherit;
}

.FileUploader-field {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.FileUploader--hasFile .FileUploader-field {
  z-index: 1;
  width: 0;
  height: 0;
}

/** FileUploader - file **/

.Is--disabled .FileUploader-field {
  cursor: default;
}

.FileUploader--showingOutput .FileUploader-field {
  z-index: 1;
}

.FileUploader--showingInput .FileUploader-field {
  z-index: 2;
}

.FileUploader-controls {
  position: relative;
}

.FileUploader--showingOutput .FileUploader-controls {
  z-index: 2;
}

.FileUploader--showingInput .FileUploader-controls {
  z-index: 1;
}

.FileUploader-click {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.FileUploader-buttonIcon,.FileUploader-buttonLabel,.FileUploader-fileClearIcon,.FileUploader-fileIcon,.FileUploader-fileNameLabel {
  transition: color 240ms;
}

.FileUploader-fileClear {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.FileUploader-fileNameLabel {
  max-width: 168px;
}

/** @define FormLayout, FormBlock, FormRow **/

.FormBlock,.FormLayout {
  min-width: 0; /* see: https://stackoverflow.com/a/17408815/ */
  margin: 0;
  padding: 0;

  /** CSS reset of <form /> and <fieldset /> **/
  border: 0;
}

/** # FormBlock **/

.FormBlock-header {
  max-width: 700px;
}

/** # FormRow **/

.FormRow--layout--inline .FormRow-start {
  max-width: 320px;
}

.FormRow--layout--inline .FormRow-end {
  max-width: 700px;
}

.FormRow--layout--stacked .FormRow-end,.FormRow--layout--stacked .FormRow-start {
  width: 100%;
  max-width: 700px;
}

.FormRow--hasName .FormRow-label {
  cursor: pointer;
}

/** @define Input **/

.Input--nowrap {
  white-space: nowrap;
}

.Input[type="number"],.Input[type="number"]:-ms-input-placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"],.Input[type="number"]::-ms-input-placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"],.Input[type="number"]::placeholder {
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.Input[type="number"]::-webkit-inner-spin-button,.Input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.Input[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Input[type="time"] {
  height: 0 /** Fixes a weird height bug **/;
}

.Input[type="time"]::-webkit-inner-spin-button,.Input[type="time"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/** @define InputBase **/

.InputBase--width--auto {
  width: -webkit-fit-content;
  width: fit-content;
}

.InputBase-row {
  width: 100%;
}

.InputBase-pressable {
  position: relative;
  z-index: 2;
}

.InputBase-pressable.Is--disabled {
  z-index: 1;
}

.InputBase-pressable.Is--invalid {
  z-index: 3;
}

.InputBase-pressable:hover {
  z-index: 4;
}

.InputBase-pressable:focus,.InputBase-pressable:focus-within {
  z-index: 5;
}

/** @define InputGroup **/

.InputGroup--width--auto {
  width: -webkit-fit-content;
  width: fit-content;
}

.InputGroup-container {
  width: 100%;
}

.InputGroup-pressable {
  position: relative;
  z-index: 2;
}

.InputGroup-pressable.Is--disabled {
  z-index: 1;
}

.InputGroup-pressable.Is--invalid {
  z-index: 3;
}

.InputGroup-pressable:focus,.InputGroup-pressable:focus-within {
  z-index: 5;
}

.InputGroup:not(.Is--disabled) .InputGroup-pressable:hover {
  z-index: 4;
}

/** @define TextArea **/

.TextArea--resize--none .TextInput-element {
  resize: none;
}

.TextArea--resize--vertical .TextInput-element {
  resize: vertical;
}

/** @define TextInput **/

.TextInput-end,.TextInput-search,.TextInput-start {
  cursor: text;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.TextInput-clear {
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.TextInput-element {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; /** `flexItems` can't be used since this is a raw <input /> **/
  width: 100%;
}

.TextInput-element--align--center {
  text-align: center;
}

.TextInput-element--align--left {
  text-align: left;
}

.TextInput-element--align--right {
  text-align: right;
}

.Menu-item {
  width: 100%;
  min-width: 160px;
  padding: 12px 12px;
  text-decoration: none;
  font-weight: 700;
  color:#5469d4;
}

#customer-timeline-menu .Menu-item {
  width: 100%;
  min-width: 160px;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: 700;
  color:#5469d4;
}

.Menu-item:hover {
  background-color: #f7fafc;
  color:#1a1f36;
  text-decoration: none;
}

/** @define Micr **/

.Micr-group {
  position: relative;
  height: 20px;
}

.Micr-group--highlighted .Micr-groupContents {
  box-shadow: 0 2px 0 0 #6c8eef;
}

.Micr-groupAnnotation {
  position: absolute;
  top: 20px;
}

.Micr-groupLine {
  width: 2px;
  height: 8px;
}

.Micr-groupLabel {
  border-radius: 4px;
}

.Link {
  color: #5469d4;
  font-weight: 500;
  text-decoration: none;
  outline: 0;
}

.Link:active,.Link:hover {
  color: #1a1f36;
}

.Link:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
  0
  0
  4px
  rgba(58,151,212, 0.28)
  ,
  0
  0
  1px
  1px
  rgba(7,89,150, 0.36);
}

.Link--wrap--false {
  white-space: nowrap;
}

/** @define PhoneInput **/

.PhoneInput-countryCode,.PhoneInput-countrySelect {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/** @define ScrollableMenu; */

.ScrollableMenu {
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.ScrollableMenu li {
  list-style-type: none;
}

/** @define SearchableList; */

.SearchableList-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #e3e8ee;
  border-width: 0 0 1px 0;
  outline: none;
}

.SearchableList-input:-ms-input-placeholder {
  color: #8792a2;
}

.SearchableList-input::-ms-input-placeholder {
  color: #8792a2;
}

.SearchableList-input::placeholder {
  color: #8792a2;
}

.SearchableList-empty {
  padding: 8px;
  color: #8792a2;
  border-bottom: #e3e8ee;
  cursor: default;
}

.SearchableList-items {
  position: relative;
  overflow-y: auto;
  cursor: pointer;
}

.SearchableList-item--highlighted {
  background-color: #f7fafc;
}

/** @define SearchableSelect; */

.SearchableSelect-container {
  display: inline-block;
  width: 100%;
}

.SearchableSelect-element {
  text-align: left;
}

.SearchableSelect-arrows {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  margin-top: -6px;
  transition: color 240ms;
  pointer-events: none;
}

.SearchableSelect-container--size--jumbo .SearchableSelect-arrows {
  right: 12px;
  margin-top: -8px;
}

.SearchableSelect-container--size--large .SearchableSelect-arrows {
  right: 8px;
}

.SearchableSelect-container--size--small .SearchableSelect-arrows {
  margin-top: -6px;
}

/** @define Select **/

.Select-align {
  width: 100%;
}

/** # Select - element **/

.Select-element {
  position: static;
  z-index: 1;
  white-space: nowrap;
}

.Select-element::-ms-expand {
  display: none; /** Removing the native .Select-element arrow for IE */
}

.Select-element:focus {
  outline: none;
}

/** TODO: SAIL-891
* Hack around the context font size for a large Select in order to match the
* font size for large PressableFields. **/

.Select--size--large .Select-element {
  font-size: 14px;
}

.Select:lang(ja-JP) .Select-element {
  font-weight: 600; /** Bump up font weight for Japanese, where system fonts don't have medium */
}

.Select-element option[hidden] {
  color: #a3acb9;
}

/** # Select - arrows **/

.Select-arrows {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  margin-top: -6px;
  transition: color 240ms;
  pointer-events: none;
}

.Select--size--jumbo .Select-arrows {
  right: 12px;
  margin-top: -8px;
}

.Select--size--large .Select-arrows {
  right: 8px;
}

.Select--size--small .Select-arrows {
  margin-top: -6px;
}

/** @define Switch **/

.Switch-source {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Switch-knob {
  position: relative;
  z-index: 1;
  transition: transform 240ms;
}

.Switch--isChecked .Switch-knob {
  transform: translateX(16px);
}

.Switch--size--small.Switch--isChecked .Switch-knob {
  transform: translateX(10px);
}

/** @define Radio **/

.Radio-source {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Radio-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 8px;
  transform: scale(1.25);
  opacity: 0;
  transition: opacity 240ms, transform 240ms;
}

.Radio-dot--visible {
  transform: scale(1);
  opacity: 1;
}

/** @define Toggle **/

.Toggle {
  min-width: 0;

  /** Cross browser CSS reset for `<fieldset />` **/
  margin: 0;
  padding: 0.01em 0 0 0;
  border: 0;
}

body:not(:-moz-handler-blocked) .Toggle {
  display: table-cell; /** Fix for Firefox's display bug on `<fieldset />`. **/
}

.ToggleItem {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  outline: 0;
}

.ToggleItem-fill {
  min-height: inherit;
}

.ToggleItem-source {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.ToggleItem-annotation {
  border-radius: 4px;
  transition: background-color 240ms;
}

.ToggleItem-annotationLabel,.ToggleItem-icon,.ToggleItem-label {
  transition: color 240ms;
}

.Avatar {
  position: relative;
  overflow: visible;
}

.Avatar--size--16 {
  width: 16px;
  height: 16px;
}

.Avatar--size--20 {
  width: 20px;
  height: 20px;
}

.Avatar--size--28 {
  width: 28px;
  height: 28px;
}

.Avatar--size--48 {
  width: 48px;
  height: 48px;
}

.Avatar--size--32 {
  width: 32px;
  height: 32px;
}

.Avatar--size--64 {
  width: 64px;
  height: 64px;
}

.Avatar-frame {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.Avatar-frame--2 {
  box-shadow: 0 0 0 2px white;
}

.Avatar-frame--4 {
  box-shadow: 0 0 0 4px white;
}

.Avatar-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 100%;
}

.Avatar img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/** @define Badge **/

.Badge--variant--status {
  border-radius: 20px;
}

.Badge--variant--tag {
  border-radius: 4px;
}

.Badge-icon--container {
  transition: padding-left 300ms ease-in-out, padding-right 300ms ease-in-out;
}

.Badge-layer-enter .Badge-text,.Badge-text--collapsed {
  max-width: 0;
  opacity: 0;
  transition: max-width 250ms ease-in-out;
}

.Badge-layer-enter-done .Badge-text {
  max-width: 20em;
  overflow: hidden;
  opacity: 1;
  transition: max-width 350ms ease-in-out, opacity 400ms ease-in-out;
}

.Badge-layer--container {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/** @define BrandIcon **/

.BrandIcon {
  overflow: hidden;
}

/** # BrandIcon -- size **/

.BrandIcon--size--16 {
  border-radius: 1px;
}

.BrandIcon--size--20 {
  border-radius: 2px;
}

.BrandIcon--size--32 {
  border-radius: 3px;
}

.BrandIcon--size--64 {
  border-radius: 4px;
}

/** @define Icon **/

.Icon--hoverable:hover {
  color: #3c4257;
}

.Icon-color svg {
  fill: currentColor;
}

.Icon-color--inherit {
  color: inherit;
}

.Icon-color--white {
  color: white;
}

.Icon-color--gray {
  color: #8792a2;
}

.Icon-color--gray900 {
  color: #1a1f36;
}

.Icon-color--gray800 {
  color: #2a2f45;
}

.Icon-color--gray700 {
  color: #3c4257;
}

.Icon-color--gray600 {
  color: #4f566b;
}

.Icon-color--gray500 {
  color: #697386;
}

.Icon-color--gray400 {
  color: #8792a2;
}

.Icon-color--gray300 {
  color: #a3acb9;
}

.Icon-color--gray200 {
  color: #c1c9d2;
}

.Icon-color--gray100 {
  color: #e3e8ee;
}

.Icon-color--gray50 {
  color: #f7fafc;
}

.Icon-color--blue {
  color: #6c8eef;
}

.Icon-color--blue900 {
  color: #131f41;
}

.Icon-color--blue800 {
  color: #212d63;
}

.Icon-color--blue700 {
  color: #2f3d89;
}

.Icon-color--blue600 {
  color: #3d4eac;
}

.Icon-color--blue500 {
  color: #5469d4;
}

.Icon-color--blue400 {
  color: #6c8eef;
}

.Icon-color--blue300 {
  color: #7dabf8;
}

.Icon-color--blue200 {
  color: #a4cdfe;
}

.Icon-color--blue100 {
  color: #d6ecff;
}

.Icon-color--blue50 {
  color: #f5fbff;
}

.Icon-color--cyan {
  color: #3a97d4;
}

.Icon-color--cyan900 {
  color: #042235;
}

.Icon-color--cyan800 {
  color: #093353;
}

.Icon-color--cyan700 {
  color: #06457a;
}

.Icon-color--cyan600 {
  color: #075996;
}

.Icon-color--cyan500 {
  color: #067ab8;
}

.Icon-color--cyan400 {
  color: #3a97d4;
}

.Icon-color--cyan300 {
  color: #4db7e8;
}

.Icon-color--cyan200 {
  color: #7fd3ed;
}

.Icon-color--cyan100 {
  color: #c4f1f9;
}

.Icon-color--cyan50 {
  color: #edfdfd;
}

.Icon-color--green {
  color: #1ea672;
}

.Icon-color--green900 {
  color: #082429;
}

.Icon-color--green800 {
  color: #0b3733;
}

.Icon-color--green700 {
  color: #0d4b3b;
}

.Icon-color--green600 {
  color: #0e6245;
}

.Icon-color--green500 {
  color: #09825d;
}

.Icon-color--green400 {
  color: #1ea672;
}

.Icon-color--green300 {
  color: #33c27f;
}

.Icon-color--green200 {
  color: #85d996;
}

.Icon-color--green100 {
  color: #cbf4c9;
}

.Icon-color--green50 {
  color: #efffed;
}

.Icon-color--orange {
  color: #e56f4a;
}

.Icon-color--orange900 {
  color: #420e11;
}

.Icon-color--orange800 {
  color: #5d161b;
}

.Icon-color--orange700 {
  color: #7e1e23;
}

.Icon-color--orange600 {
  color: #9e2f28;
}

.Icon-color--orange500 {
  color: #c44c34;
}

.Icon-color--orange400 {
  color: #e56f4a;
}

.Icon-color--orange300 {
  color: #f5925e;
}

.Icon-color--orange200 {
  color: #f8b886;
}

.Icon-color--orange100 {
  color: #fee3c0;
}

.Icon-color--orange50 {
  color: #fffaee;
}

.Icon-color--purple {
  color: #c96ed0;
}

.Icon-color--purple900 {
  color: #2d0f55;
}

.Icon-color--purple800 {
  color: #401d6a;
}

.Icon-color--purple700 {
  color: #5b2b80;
}

.Icon-color--purple600 {
  color: #7b3997;
}

.Icon-color--purple500 {
  color: #a450b5;
}

.Icon-color--purple400 {
  color: #c96ed0;
}

.Icon-color--purple300 {
  color: #e28ddc;
}

.Icon-color--purple200 {
  color: #f0b4e4;
}

.Icon-color--purple100 {
  color: #fce0f6;
}

.Icon-color--purple50 {
  color: #fff8fe;
}

.Icon-color--red {
  color: #ed5f74;
}

.Icon-color--red900 {
  color: #420828;
}

.Icon-color--red800 {
  color: #5e1039;
}

.Icon-color--red700 {
  color: #80143f;
}

.Icon-color--red600 {
  color: #a41c4e;
}

.Icon-color--red500 {
  color: #cd3d64;
}

.Icon-color--red400 {
  color: #ed5f74;
}

.Icon-color--red300 {
  color: #fa8389;
}

.Icon-color--red200 {
  color: #fbb5b2;
}

.Icon-color--red100 {
  color: #fde2dd;
}

.Icon-color--red50 {
  color: #fff8f5;
}

.Icon-color--yellow {
  color: #d97917;
}

.Icon-color--yellow900 {
  color: #3a1607;
}

.Icon-color--yellow800 {
  color: #571f0d;
}

.Icon-color--yellow700 {
  color: #762b0b;
}

.Icon-color--yellow600 {
  color: #983705;
}

.Icon-color--yellow500 {
  color: #bb5504;
}

.Icon-color--yellow400 {
  color: #d97917;
}

.Icon-color--yellow300 {
  color: #e5993e;
}

.Icon-color--yellow200 {
  color: #efc078;
}

.Icon-color--yellow100 {
  color: #f8e5b9;
}

.Icon-color--yellow50 {
  color: #fcf9e9;
}

.Icon-color--violet {
  color: #9c82db;
}

.Icon-color--violet900 {
  color: #1f184e;
}

.Icon-color--violet800 {
  color: #352465;
}

.Icon-color--violet700 {
  color: #4b3480;
}

.Icon-color--violet600 {
  color: #61469b;
}

.Icon-color--violet500 {
  color: #8260c3;
}

.Icon-color--violet400 {
  color: #9c82db;
}

.Icon-color--violet300 {
  color: #b0a1e1;
}

.Icon-color--violet200 {
  color: #c7c2ea;
}

.Icon-color--violet100 {
  color: #e6e6fc;
}

.Icon-color--violet50 {
  color: #f8f9fe;
}

/** @define SocialIcon **/

.SocialIcon {
  overflow: hidden;
}

/** # SocialIcon -- size **/

.SocialIcon--size--16 {
  border-radius: 1px;
}

.SocialIcon--size--20 {
  border-radius: 2px;
}

.SocialIcon--size--32 {
  border-radius: 3px;
}

.SocialIcon--size--64 {
  border-radius: 4px;
}

/** @define Spinner **/
.Spinner-svg-slow {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  transform-origin: 50% 50%;
  transition-timing-function: ease;
  transition-property: opacity, transform;
  animation: SpinnerAnimationShow 250ms normal ease, SpinnerAnimationRotation 1s linear infinite;
}

.Spinner-svg {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  width: 16px;
  height: 16px;
  color: #8792a2;
  transform-origin: 50% 50%;
  transition-timing-function: ease;
  transition-property: opacity, transform;
  animation: SpinnerAnimationShow 250ms normal ease, SpinnerAnimationRotation 0.6s linear infinite;
}

/** # Spinner -- size **/

.Spinner--size--large .Spinner-svg {
  width: 24px;
  height: 24px;
}

.Spinner--size--small .Spinner-svg {
  width: 12px;
  height: 12px;
}

/** # Spinner -- color **/

.Spinner--color--white .Spinner-svg {
  color: white;
}

/** # Spinner ~ Animations **/

@keyframes SpinnerAnimationShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes SpinnerAnimationRotation {
  100% {
    transform: rotate(360deg);
  }
}

/** @define BrandedHeader **/

.BrandedHeader {
  width: 100%;
}

/** # BrandedHeader - header **/

.BrandedHeader-header {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.BrandedHeader-logo {
  overflow: hidden;
  background-color: white;
  border-radius: 64px;
  box-shadow: 0 0 0 2px white, 0 5px 7px rgba(0, 0, 0, .15);
}

.BrandedHeader-title {
  position: relative;
  z-index: 3;
  padding-bottom: 112px;
}

@media (max-width: 1020px) {
  .BrandedHeader-title {
    padding-bottom: 32px;
  }

  .BrandedHeader-content {
    padding-bottom: 0;
  }
}

/** # BrandedHeader - stripes **/

.BrandedHeader-waves {
  position: absolute;
  top: -70px;
  left: 0;
  z-index: 2;
  width: 240px;
  height: 120px;
  overflow: hidden;
  transform: skewY(-12deg);
}

.BrandedHeader-wavesSVG {
  position: relative;
  top: -36px;
  left: -40px;
}

.BrandedHeader-stripes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: skewY(-12deg);
  pointer-events: none;
}

.BrandedHeader-stripe {
  position: absolute;
}

.BrandedHeader-stripe--1 {
  right: 0;
  bottom: 72px;
  left: 0;
  z-index: 1;
  height: 500px;
}

.BrandedHeader-stripe--2 {
  position: absolute;
  right: 0;
  bottom: 72px;
  z-index: 2;
  width: 300px;
  height: 60px;
}

.BrandedHeader-stripe--3 {
  right: 200px;
  bottom: 12px;
  z-index: 3;
  width: 200px;
  height: 60px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(220, 222, 255, .22));
}

.BrandedHeader-stripe--4 {
  position: absolute;
  right: 0;
  bottom: 12px;
  z-index: 4;
  width: 200px;
  height: 60px;
}

@media (max-width: 1020px) {
  .BrandedHeader-stripes {
    transform: skewY(0);
  }

  .BrandedHeader-stripe--1 {
    bottom: 0;
  }

  .BrandedHeader-stripe--2,.BrandedHeader-stripe--3,.BrandedHeader-stripe--4 {
    transform: skewY(-12deg);
  }

  .BrandedHeader-stripe--2 {
    bottom: 28px;
  }

  .BrandedHeader-stripe--3 {
    bottom: -64px;
  }

  .BrandedHeader-stripe--4 {
    bottom: -21px;
  }
}

/** # BrandedHeader - content **/

.BrandedHeader-content {
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
}

/** @define Breadcrumb **/

/** Breadcrumb - item */

.Breadcrumb-item.Is--pressable {
  cursor: pointer;
  pointer-events: auto;
}

.Breadcrumb-item,.Breadcrumb-item.Is--disabled {
  cursor: default;
  pointer-events: none;
}

.Breadcrumb-item:hover .Breadcrumb-itemLabel {
  color: #1a1f36;
}

.Breadcrumb-item--target {
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.Breadcrumb-item--target:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0
  0
  0
  4px
  rgba(58,151,212, 0.28)
  ,
  0
  0
  1px
  1px
  rgba(7,89,150, 0.36);
}

/** @define ContentFooter **/

.ContentFooter:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/** @define ContentHeader **/

.ContentHeader:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/** @define ContentListItem **/

.ContentListItem {
  position: relative;
  width: 100%;

  /** CSS reset */
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  outline: none;

  /** */
}

.ContentListItem.Is--clickable {
  z-index: 1;
  display: block;
  cursor: pointer;
}

.ContentListItem.Is--clickable:focus:not([data-input-method="mouse"]):not([data-input-method="touch"]) {
  z-index: 2;
}

/** # ContentListItem - container **/

.ContentListItem.Is--clickable:focus:not([data-input-method="mouse"]):not([data-input-method="touch"])
.ContentListItem-container {
  box-shadow: 0
  0
  0
  4px
  rgba(58,151,212, 0.28)
  ,
  0
  0
  1px
  1px
  rgba(7,89,150, 0.36);
}

*:first-child > .ContentListItem--hasRadius:first-child .ContentListItem-container {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

*:last-child > .ContentListItem--hasRadius:last-child .ContentListItem-container {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/** @define ContentTabs; */

.ContentTabs {
  position: relative;
  z-index: 0;
  overflow: auto;
}

/** @define ContentTab; */

.ContentTab {
  cursor: pointer;
  transition: background-color 300ms ease-in-out;
}

.ContentTab-link {
  /* Makes sure tabs don't overlap in IE/Edge */
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/

  /** CSS reset */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
}

.ContentTab-link:focus:not([data-input-method="mouse"]):not([data-input-method="touch"])
.ContentTab-text {
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(58,151,212, 0.28),
  0 0 1px 1px rgba(7,89,150, 0.16);
}

.ContentTab--active {
  position: relative;
}

.ContentTab-inner {
  position: relative;
  transition: box-shadow 300ms ease-in-out;
}

.ContentTab-chip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: -1px;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.ContentTab-chip--small {
  height: 2px;
}

.ContentTab-chip--default {
  height: 3px;
}

.ContentTab-inner--active .ContentTab-chip {
  opacity: 1;
}

/** @define DataTable, DataTableHead **/

.DataTable {
  empty-cells: show; /** For cellTruncation **/
}

.DataTableHead-cell {
  background-color: #f7fafc;
  box-shadow: inset 0 -1px 0 0 #e3e8ee;
}

.DataTable-cell {
  box-shadow: inset 0 -1px 0 0 #e3e8ee;
}

.DataTable-cell:first-child,.DataTableHead-cell:first-child {
  padding-left: 12px;
}

.DataTable-cell:last-child,.DataTableHead-cell:last-child {
  padding-right: 12px;
}

.DataTable-row--color--offset .DataTable-cell {
  background-color: #f7fafc;
}

.DataTable-row--color--white .DataTable-cell {
  background-color: white;
}

.DataTable--size--small .DataTable-cell:first-child,.DataTable--size--small .DataTableHead-cell:first-child {
  padding-left: 16px;
}

.DataTable--size--small .DataTable-cell:last-child,.DataTable--size--small .DataTableHead-cell:last-child {
  padding-right: 16px;
}

.DataTable-cellInner {
  position: relative; /** For cellTruncation **/
  min-height: 20px; /** For cellTruncation **/
}

.DataTable--size--small .DataTable-cellInner {
  min-height: 16px; /** For cellTruncation **/
}

.DataTable-cellTruncation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.DataTable--hideLastDivider .DataTable-row:last-child .DataTable-cell {
  box-shadow: none;
}

/** @define Fullscreen **/

.FullscreenView {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.FullscreenView--isLayer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
}

.FullscreenHeader {
  width: 100%;
}

.FullscreenHeader-escapeLabel {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.FullscreenHeader-separator {
  width: 1px;
  height: 16px;
  border-radius: 4px;
}

.FullscreenContent {
  width: 100%;
}

.FullscreenContent--scroll {
  overflow: hidden;
  overflow-y: auto;
}

.FullscreenContent--noScroll {
  overflow: hidden;
}

/** @define IndentedListItem **/

.IndentedListItem.Is--link {
  cursor: pointer;
}

/** # IndentedListItem - area **/

.IndentedListItem .IndentedListItem-area {
  box-shadow: inset 20px 0 0 white, inset -20px 0 0 white, inset 0 -1px 0 #e3e8ee;
}

.IndentedListItem--background--offset .IndentedListItem-area {
  box-shadow: inset 20px 0 0 #f7fafc, inset -20px 0 0 #f7fafc,
  inset 0 -1px 0 #e3e8ee;
}

.IndentedListItem:first-child .IndentedListItem-area {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.IndentedListItem:last-child .IndentedListItem-area {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: none;
}

/**
 * @define ContextualLayer
 */

.ContextualLayer-container {
  position: absolute;
  z-index: 300;
}

/**
  * We don't use visibility: hidden because components might depend on that.
  * For example, `autoFocus` would be broken in <input />
  */

.ContextualLayer--hidden {
  position: fixed;
  top: -200vh;
  left: 0;
}

.ContextualLayer--contained {
  z-index: 0;
}

.ContextualLayer-container:not(.ContextualLayer--pointerEvents) {
  pointer-events: none;
}

.ContextualLayer--inModal {
  z-index: 400;
}

/**
 * @define ContextualPopover
 * @compose ContextualLayer
 */

.ContextualPopover {
  display: -ms-flexbox;
  display: flex;
}

.ContextualLayer-context--anybottom.ContextualLayer-layer--anytop .ContextualPopover {
  -ms-flex-direction: column;
  flex-direction: column;
  transform-origin: 50% -11px;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom .ContextualPopover {
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  transform-origin: 50% calc(100% + 11px);
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft .ContextualPopover {
  -ms-flex-direction: row;
  flex-direction: row;
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright .ContextualPopover {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.ContextualPopover-arrowContainer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-sizing: border-box;
}

.ContextualPopover-arrow {
  z-index: 1;
  width: 21px;
  height: 21px;
  margin: -7px;

  /*  this is --sail-svg-modal-top-arrow, but variables aren't supported in urls */
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMjEgOSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjODg5OEFBIiBmaWxsLW9wYWNpdHk9Ii4xIiBkPSJNMSA5LjA5MmgxOWwtNi40MDItNi43NGMtMS43MTctMS44MDYtNC40ODUtMS44LTYuMTk2IDBMMSA5LjA5M3pNMjAuMzQyIDhsLTYuMDItNi4zMzZjLTIuMTA4LTIuMjItNS41MzgtMi4yMTgtNy42NDUgMEwuNjU4IDhoMTkuNjg0eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03LjQwMiAyLjM1M2MxLjcxMS0xLjgwMSA0LjQ4LTEuODA3IDYuMTk2IDBMMjAgOS4wOTNIMWw2LjQwMi02Ljc0eiIvPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center center;
}

.ContextualLayer-context--anybottom.ContextualLayer-layer--anytop
.ContextualPopover-arrowContainer {
  padding-top: 5px;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom
.ContextualPopover-arrowContainer {
  padding-bottom: 5px;
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft
.ContextualPopover-arrowContainer {
  padding-left: 5px;
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright
.ContextualPopover-arrowContainer {
  padding-right: 5px;
}

.ContextualLayer-context--left.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--topright
.ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer {
  padding-top: 15px;
}

.ContextualLayer-context--bottomleft.ContextualLayer-layer--bottomright
.ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--bottomleft
.ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer {
  padding-bottom: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--topleft
.ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--bottomleft
.ContextualPopover-arrowContainer {
  padding-left: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--topright
.ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--bottomright
.ContextualPopover-arrowContainer {
  padding-right: 15px;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--topleft
.ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--bottomleft
.ContextualPopover-arrowContainer,.ContextualLayer-context--topleft.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--topleft .ContextualPopover-arrowContainer {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.ContextualLayer-context--bottom.ContextualLayer-layer--topright .ContextualPopover-arrowContainer,.ContextualLayer-context--bottomleft.ContextualLayer-layer--bottomright
.ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--bottomleft
.ContextualPopover-arrowContainer,.ContextualLayer-context--bottomright.ContextualLayer-layer--topright
.ContextualPopover-arrowContainer,.ContextualLayer-context--left.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--right.ContextualLayer-layer--bottomleft .ContextualPopover-arrowContainer,.ContextualLayer-context--top.ContextualLayer-layer--bottomright .ContextualPopover-arrowContainer,.ContextualLayer-context--topright.ContextualLayer-layer--bottomright
.ContextualPopover-arrowContainer {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.ContextualLayer-context--anytop.ContextualLayer-layer--anybottom .ContextualPopover-arrow {
  transform: rotate(180deg);
}

.ContextualLayer-context--anyleft.ContextualLayer-layer--anyright .ContextualPopover-arrow {
  transform: rotate(90deg);
}

.ContextualLayer-context--anyright.ContextualLayer-layer--anyleft .ContextualPopover-arrow {
  transform: rotate(-90deg);
}

.ContextualPopover-contents {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1), 0 15px 35px 0 rgba(49, 49, 93, .1),
  0 5px 15px 0 rgba(0, 0, 0, .08);
}

/* Transitions */

.ContextualPopover-animate,.ContextualPopover-animate-exited {
  transform: scale(0.85);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0, 1, 0.4, 1),
  transform 250ms cubic-bezier(0.18, 1.25, 0.4, 1);
}

.ContextualPopover-animate-exiting {
  transform: scale(0.95);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.ContextualPopover-animate-entered,.ContextualPopover-animate-entering,.ContextualPopover-noAnimation {
  transform: scale(1);
  opacity: 1;
}

/** @define List **/

.List {
  margin: 0;
  padding: 0;
}

.List-item {
  padding-top: 0.25em;
}

.List-item--bulleted {
  list-style-type: disc;
}

.List-item--numbered {
  list-style-type: decimal;
}

/** @define ModalLayer; */

.ModalLayer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 400;
}

.ModalLayer-wash {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(82, 95, 127, .25);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.ModalLayer-contents {
  max-width: 100%;
  margin-bottom: 40px;
  outline: none;
  transform: scale(0.95);
  opacity: 0;
}

/* Wash animation */

.ModalLayer-wash.ModalLayer-animate-entered,.ModalLayer-wash.ModalLayer-animate-entering,.ModalLayer-wash:not(.ModalLayer-animate) {
  opacity: 1;
}

/* Content animation */

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entered .ModalLayer-contents,.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entering .ModalLayer-contents,.ModalLayer-wash:not(.ModalLayer-animate) .ModalLayer-contents {
  transform: scale(1);
  opacity: 1;
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-entering .ModalLayer-contents {
  transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.21, 1.5, 0.36, 1);
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exiting .ModalLayer-contents {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exited .ModalLayer-contents,.ModalLayer-wash.ModalLayer-animate.ModalLayer-animate-exiting .ModalLayer-contents {
  transform: scale(0.98);
  opacity: 0;
}

/** @define NavItem; */

.NavItem--disabled {
  cursor: default;
}

/** @define Notice **/

*:last-child > .Notice:last-child {
  box-shadow: none;
}

.Notice-ghostContent {
  position: absolute;
  white-space: noWrap;
  visibility: hidden;
}

/** @define ProgressTracker **/

/** # ProgressTracker - step **/

.ProgressTracker-step.Is--pressable {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.ProgressTracker-step.Is--onClick {
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

/** # ProgressTracker - bullet **/

.ProgressTracker-bullet {
  position: relative;
  width: 16px;
  height: 100%;
}

.ProgressTracker-preCircle {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 6px;
  z-index: 1;
  width: 4px;
}

.ProgressTracker-checkmark {
  position: absolute;
  top: 50%;
  z-index: 4;
  margin-top: -8px;
}

.ProgressTracker-circle {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 16px;
}

.ProgressTracker-postCircle {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 6px;
  z-index: 2;
  width: 4px;
}

/** # ProgressTracker -- direction **/

.ProgressTracker--direction--horizontal .ProgressTracker-step {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; /** `flexItems` can't be used since this can be a non-`Box` element **/
  width: 0;
}

.ProgressTracker--direction--horizontal .ProgressTracker-bullet {
  width: 100%;
  height: 16px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-preCircle {
  top: 50%;
  right: 50%;
  bottom: auto;
  left: 0;
  width: auto;
  height: 4px;
  margin-top: -2px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-preCircle rect,.ProgressTracker--direction--horizontal .ProgressTracker-preCircle svg {
  width: 100%;
  height: 4px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-checkmark {
  top: 0;
  left: 50%;
  margin-top: 0;
  margin-left: -8px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-circle {
  top: 0;
  left: 50%;
  margin-top: 0;
  margin-left: -8px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-postCircle {
  top: 50%;
  right: 0;
  bottom: auto;
  left: 50%;
  width: auto;
  height: 4px;
  margin-top: -2px;
}

.ProgressTracker--direction--horizontal .ProgressTracker-postCircle rect,.ProgressTracker--direction--horizontal .ProgressTracker-postCircle svg {
  width: 100%;
  height: 4px;
}

/** @define PropertyList, PropertyListItem **/

.PropertyListItem-status {
  margin: -2px -4px;
}

.PropertyListItemInline-label {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%; /** `flexItems` can't be used since this can be a non-`Box` element **/
  min-width: 180px;
  max-width: 240px;
}

.PropertyListItemInline-truncatedLabelText {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
}

.PropertyListItemInline-truncatedLabelText::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 48px;
  background-image: linear-gradient(to right, transparent, white);
  transition: all 400ms;
  content: "";
}

.PropertyListItemInline-layer,.PropertyListItemInline-transitionGroup-exit-done .PropertyListItemInline-layer {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.PropertyListItemInline-transitionGroup-enter-done .PropertyListItemInline-layer {
  opacity: 1;
}

/** @define Table **/

.Table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

/** Table - cell **/

/**
  * The alignment values for the `td` in Table is done with a CSS class because
  * `align` isn't supported in HTML5 on a `td` which means React doesn't support
  * it either.
**/

/** Table - cell -- align **/

.Table-cell--align--center {
  text-align: center;
}

.Table-cell--align--left {
  text-align: left;
}

.Table-cell--align--right {
  text-align: right;
}

/** Table - cell -- verticalAlign **/

.Table-cell--verticalAlign--bottom {
  vertical-align: bottom;
}

.Table-cell--verticalAlign--middle {
  vertical-align: middle;
}

.Table-cell--verticalAlign--top {
  vertical-align: top;
}

/** Table - cell -- width **/

.Table-cell--width--auto {
  width: auto;
}

.Table-cell--width--maximized {
  width: 100%;
}

.Table-cell--width--minimized {
  width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

.Table-cell--maxWidth--auto {
  max-width: auto;
}

.Table-cell--maxWidth--maximized {
  max-width: 100%;
}

.Table-cell--maxWidth--minimized {
  max-width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

.Table-cell--minWidth--auto {
  min-width: auto;
}

.Table-cell--minWidth--maximized {
  min-width: 100%;
}

.Table-cell--minWidth--minimized {
  min-width: 1px; /** 1px allows the cell to be as small as possible without being too destructive **/
}

/** Table - cell -- wrap **/

.Table-cell--wrap--noWrap {
  white-space: nowrap;
}

.Table-cell--wrap--wrap {
  white-space: normal;
}

/** @define ToggleBox, ToggleBoxItem **/

.ToggleBox {
  min-width: 0;

  /** Cross browser CSS reset for `<fieldset />` **/
  margin: 0;
  padding: 0.01em 0 0 0;
  border: 0;
}

body:not(:-moz-handler-blocked) .ToggleBox {
  display: table-cell; /** Fix for Firefox's display bug on `<fieldset />`. **/
}

.ToggleBoxItem {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ToggleBoxItem-pressable {
  position: relative;
  z-index: 1;
  height: 100%;
}

.ToggleBoxItem--checked,.ToggleBoxItem--checked .ToggleBoxItem-pressable,.ToggleBoxItem--checked:hover,.ToggleBoxItem--checked:hover .ToggleBoxItem-pressable {
  z-index: 3;
}

.ToggleBoxItem:hover,.ToggleBoxItem:hover .ToggleBoxItem-pressable {
  z-index: 2;
}

.ToggleBoxItem.Is--disabled {
  cursor: default;
  pointer-events: none;
}

.ToggleBox--connected.ToggleBox--direction--horizontal .ToggleBoxItem {
  margin-right: 1px;
}

.ToggleBox--connected.ToggleBox--direction--horizontal .ToggleBoxItem--isLast {
  margin-right: 0;
}

.ToggleBox--connected.ToggleBox--direction--vertical .ToggleBoxItem {
  margin-bottom: 1px;
}

.ToggleBox--connected.ToggleBox--direction--vertical .ToggleBoxItem--isLast {
  margin-bottom: 0;
}

.ToggleBoxItem-initial {
  width: 100%;
}

.ToggleBoxItem-label {
  position: relative;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ToggleBoxItem-source {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  cursor: pointer;
  opacity: 0;
}

.ToggleBoxItem-area {
  width: 100%;
  height: 100%;
}

.ToggleBoxItem-copy {
  width: 100%;
  height: 100%;
}

.ToggleBoxItem-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 8px;
  transform: scale(1.25);
  opacity: 0;
  transition: opacity 240ms, transform 240ms;
}

.ToggleBoxItem-dot--visible {
  transform: scale(1);
  opacity: 1;
}

.ToggleBoxItem-icon,.ToggleBoxItem-title {
  transition: color 240ms;
}

/**
  * # ToggleBoxItem ~ before & after
  * - This is due to the usage of a partially transparent `box-shadow` for the
  *   "borders" causing them to be darker when they overlap oneanother.
**/

.ToggleBox--connected .ToggleBoxItem::after,.ToggleBox--connected .ToggleBoxItem::before {
  position: absolute;
  z-index: 1;
  display: block;
  background: white;
  content: "";
}

.ToggleBox--connected .ToggleBoxItem--isFirst::before,.ToggleBox--connected .ToggleBoxItem--isLast::after {
  display: none;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::after,.ToggleBox--direction--horizontal .ToggleBoxItem::before {
  top: 0;
  bottom: 0;
  width: 1px;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::before {
  left: -1px;
}

.ToggleBox--direction--horizontal .ToggleBoxItem::after {
  right: -1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::after,.ToggleBox--direction--vertical .ToggleBoxItem::before {
  right: 0;
  left: 0;
  height: 1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::before {
  top: -1px;
}

.ToggleBox--direction--vertical .ToggleBoxItem::after {
  bottom: -1px;
}

/** @define Toast; */

.Toast {
  max-width: 576px;
  color: #fff;
  background-color: #3c4257;
  border-radius: 4px;
  box-shadow: 0
  7px
  14px
  0
  rgba(60,66,87, 0.08)
  ,
  0
  3px
  6px
  0
  rgba(0,0,0, 0.12);
  transition: all 0.5s;
  pointer-events: all;
}

.Toast + .Toast {
  margin-top: 8px;
}

/** @define ToastLayer; */

.ToastLayer {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 500;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  pointer-events: none;
}

.ToastLayer--top {
  top: 8px;
}

.ToastLayer--bottom {
  bottom: 8px;
}

/* Toast animation */

.Toast.ToastLayer-animate-enter-active,.Toast.ToastLayer-animate-exit-active {
  transition: opacity 0.3s ease-in-out;
}

.Toast.ToastLayer-animate-enter,.Toast.ToastLayer-animate-exit.ToastLayer-animate-exit-active {
  opacity: 0;
}

.Toast.ToastLayer-animate-enter.ToastLayer-animate-enter-active,.Toast.ToastLayer-animate-exit {
  opacity: 1;
}

/** @define ObjectCard **/

.ObjectCard {
  border-radius: 4px;
}

/** @define Pressable **/

.Pressable {
  position: relative;
}

.Pressable.Is--disabled {
  cursor: default;
  pointer-events: none;
}

/** # Pressable -- layer **/

.Pressable--layer--elevated {
  cursor: pointer;
}

/** # Pressable - part **/

.Pressable-part {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* stylelint-disable no-descending-specificity */

/** # Pressable -- radius **/

.Pressable--radius--all > .Pressable-part,.Pressable--radius--all > .Pressable-part > .Pressable-part {
  border-radius: 4px;
}

.Pressable--radius--bottom > .Pressable-part,.Pressable--radius--bottom > .Pressable-part > .Pressable-part {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Pressable--radius--circle > .Pressable-part,.Pressable--radius--circle > .Pressable-part > .Pressable-part {
  border-radius: 50%;
}

.Pressable--radius--left > .Pressable-part,.Pressable--radius--left > .Pressable-part > .Pressable-part {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Pressable--radius--right > .Pressable-part,.Pressable--radius--right > .Pressable-part > .Pressable-part {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.Pressable--radius--top > .Pressable-part,.Pressable--radius--top > .Pressable-part > .Pressable-part {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* stylelint-enable */

/** # Pressable -- size **/

.Pressable--size--control {
  width: 14px;
  height: 14px;
}

.Pressable--size--jumbo {
  min-height: 44px;
}

.Pressable--size--large {
  min-height: 36px;
}

.Pressable--size--medium {
  min-height: 28px;
}

.Pressable--size--small {
  min-height: 24px;
}

/** # Pressable -- width **/

.Pressable--width {
  max-width: 100%;
}

.Pressable--width--long {
  width: 352px;
}

.Pressable--width--maximized {
  width: 100%;
}

.Pressable--width--short {
  width: 168px;
}

/** # Pressable - overlay **/

.Pressable-overlay {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 5;
  background: rgba(247,250,252, 0.5);
}

/** # Pressable - children **/

.Pressable-children {
  position: relative;
  z-index: 4;
  width: 100%;
}

/** # Pressable - background **/

.Pressable-background {
  z-index: 3;
}

/** # Pressable - keylines **/

.Pressable-keylines {
  z-index: 2;
}

.Pressable-selectedKeyline {
  z-index: 3;
  box-shadow: 0 0 0 2px #6c8eef;
}

.Pressable-baseKeyline {
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(60,66,87, 0.16);
}

.Pressable-blueKeyline {
  z-index: 2;
  background: #5469d4;
  box-shadow: 0 1px 0 0 #3d4eac, 0 0 0 1px #5469d4;
}

.Pressable-invalidKeyline {
  z-index: 2;
  box-shadow: 0 0 0 1px #ed5f74;
}

.Pressable-redKeyline {
  z-index: 2;
  background: #cd3d64;
  box-shadow: 0 1px 0 0 #a41c4e, 0 0 0 1px #cd3d64;
}

/** # Pressable - shadows **/

.Pressable-shadows {
  z-index: 1;
}

.Pressable-baseShadow {
  z-index: 4;
  box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.12);
}

.Pressable-elevatedShadow {
  z-index: 3;
  box-shadow: 0 2px 5px 0 rgba(60,66,87, 0.12);
}

.Pressable-elevatedShadowDarker {
  z-index: 3;
  box-shadow: 0 2px 4px 0 rgba(60,66,87, 0.22);
}

.Pressable--layer--elevated:hover > .Pressable-shadows > .Pressable-hoverShadow {
  z-index: 2;
  box-shadow: 0 3px 9px 0 rgba(60,66,87, 0.12);
}

.Pressable--layer--elevated:hover > .Pressable-shadows > .Pressable-hoverShadowDarker {
  z-index: 2;
  box-shadow: 0 3px 7px 0 rgba(60,66,87, 0.22);
}

.Pressable-focusShadow {
  box-shadow: 0 0 0 0 rgba(58,151,212, 0);
  transition: opacity 250ms, box-shadow 250ms;
}

.Pressable--focus:focus-within
> .Pressable-shadows
> .Pressable--nested-focusShadow,.Pressable--focus:focus
> .Pressable-shadows
> .Pressable--nested-focusShadow {
  z-index: 1;
  box-shadow: 0 1px 0 0 rgba(58,151,212, 0.6);
}

.Pressable--focus--visible > .Pressable-shadows > .Pressable-focusShadow,.Pressable--focus:focus-within > .Pressable-shadows > .Pressable-focusShadow,.Pressable--focus:focus > .Pressable-shadows > .Pressable-focusShadow {
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(58,151,212, 0.28);
}

/** @define TextAreaLegacy; */

.TextAreaLegacy.Is--invalid {
  box-shadow: 0 0 0 1px rgba(58,151,212, 0.2),
  0 0 0 2px rgba(58,151,212, 0.25), 0 1px 1px rgba(0,0,0, 0.12);
}

.TextAreaLegacy.Is--invalid:focus {
  box-shadow: 0 0 0 1px rgba(237,95,116, 0.5),
  0 1px 1px rgba(0,0,0, 0.12);
}

.Keyword {
  background-color: transparent;
  background-image: linear-gradient(
          to bottom,
          rgba(105,115,134, 0.8),
          rgba(105,115,134, 0.8)
  );
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 0.1em;
  border: none;
  transition: all 225ms ease-in-out;
}

.Keyword--hover {
  background-image: linear-gradient(
          to bottom,
          #697386,
          #697386);
  box-shadow: inset 0 1.4em rgba(105,115,134, 0.1);
  transition: all 225ms ease-in-out;
}

.Keyword--inline {
  display: inline;
}

.ListViewItem {
  color: #4f566b;
  height: 100%;
}

.ListViewItem--hasLink {
  cursor: pointer;
}

.ListViewItem-header {
  background-color: #f7fafc;
}

.ListViewItem-cell {
  box-shadow: inset 0 -1px #e3e8ee;
}

.ListView--withoutFooter .ListViewItem:last-of-type:not(.ListViewItem-header) .ListViewItem-cell {
  box-shadow: none;
}

.ListViewItem-cellContent .ListViewItem-text {
  white-space: inherit;
}

.ListViewItem-cell--breakWord .ListViewItem-cellContent {
  white-space: normal;
  overflow: auto;
}

.ListViewItem-cell--breakWord {
  white-space: normal;
  word-break: break-word;
}

.ListViewItem-cell--truncate .ListViewItem-cellContent {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ListViewItem-cell--truncate .ListViewItem-cellContent,.ListViewItem-cell--truncate .ListViewItem-link {
  min-width: inherit;
  max-width: inherit;
}

/* Force cells to be full height */
.ListViewItem-link,.ListViewItem-link .ListViewItem-cellContent {
  height: 100%;
}

.ListViewItem-cell:first-child .ListViewItem-cellContent {
  padding-left: 20px;
}

.ListViewItem-cell:last-child .ListViewItem-cellContent {
  padding-right: 20px;
}

.ListViewItem--hasLink:hover {
  background-color: #f7fafc;
}

.ListViewItem--hasLink:focus {
  background-color: #f7fafc;
  outline: 0;
}

.ListViewItem--hoverable:hover {
  background-color: #f7fafc;
}

.ListViewItem--hoverable:focus {
  background-color: #f7fafc;
  outline: 0;
}

.ListViewItem-link {
  text-decoration: none;
  color: inherit;
  width: 100%;
  display: block;
  -webkit-user-drag: none;
}

.ListViewItem-link--sortable {
  background: none;
  border: 0;
}

.ListViewItem-link--sortable:focus {
  box-shadow: 0 0 0 1px rgba(50, 151, 211, .2), 0 0 0 2px rgba(50, 151, 211, .25), 0 2px 5px 0 rgba(50, 50, 93, .1), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

.ListViewItem-sortIcon--disabled {
  opacity: 0;
}
.ListViewItem-link--sortable:active .ListViewItem-sortIcon--disabled,.ListViewItem-link--sortable:focus .ListViewItem--sortIcon--disabled,.ListViewItem-link--sortable:hover .ListViewItem-sortIcon--disabled {
  opacity: 1;
}

.ListViewItem--hasLink:active,.ListViewItem--selected,.ListViewItem-link--sortable:active {
  background-color: #f7fafc;
}

.ListViewItem--highlighted {
  background-color: #c4f1f9;
}

.ListViewItem-actionsSeparator {
  background-color: #e3e8ee;
}

.ListViewItem .ListViewItem-actions {
  margin-top: -2px;
  margin-bottom: -2px;
}

.ListViewItem--expanded,.ListViewItem--expanded .ListViewItem-cell {
  box-shadow: none;
}

.ListViewItem--expandable .ListViewItem-cell {
  position: relative;
}

.ListViewItem--expandable .ListViewItem-cell:first-child::before {
  content: '';

  left: 20px;
  position: absolute;
  top: 13px;

  height: 10px;
  width: 6px;

  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMiAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+cmlnaHQtLWdyYXk8L3RpdGxlPjxwYXRoIGQ9Ik0xMS4zMzMgOC40MUwzLjc3OC42ODFjLS44OS0uOTEtMi4yMjItLjkxLTMuMTExIDAtLjg5LjkwOS0uODkgMi4yNzMgMCAzLjE4Mmw2IDYuMTM2LTYgNi4xMzZjLS44OS45MS0uODkgMi4yNzMgMCAzLjE4Mi40NDQuNDU1IDEuMTEuNjgyIDEuNTU1LjY4Mi42NjcgMCAxLjExMS0uMjI3IDEuNTU2LS42ODJsNy41NTUtNy43MjdjLjg5LS45MS44OS0yLjI3MyAwLTMuMTgyeiIgZmlsbD0iIzZCN0M5MyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
  background-size: 100% 100%;
  transform: rotate(0);
  transition: transform 250ms ease-in-out;
}

.ListViewItem--expanded .ListViewItem-cell:first-child::before {
  transform: rotate(90deg);
}

.ListViewItem--expandable .ListViewItem-cell:first-child {
  padding-left: 20px;
}

.ListViewItem .BatchCell {
  visibility: hidden;
}

.ListViewItem .BatchCell.BatchCell--isVisible,.ListViewItem .BatchCell:focus,.ListViewItem:hover .BatchCell {
  visibility: visible;
}

.ListViewItem .BatchCell-container .ListViewItem-cellContent {
  height: 100%;
}

.PressableButton button:hover,
.PressableButton button.active_button{
  color: #1a1f36;
  font-weight: 600;
  box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0.12) 0px 1px 1px 0px,rgba(60,66,87,0.16) 0px 0px 0px 1px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(60,66,87,0.08) 0px 2px 5px 0px;

}

.PressableButton button:active {
  font-weight: 600;
  color:#1a1f36;
  box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px,rgba(58,151,212,0.36) 0px 0px 0px 4px,rgba(0,0,0,0.12) 0px 1px 1px 0px,rgba(60,66,87,0.16) 0px 0px 0px 1px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(60,66,87,0.08) 0px 2px 5px 0px;
}

.Table-Icon-Container{
  width: 34px;
  height: 34px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
}

.page-header--title{
  color: rgb(62,62,60);
  font-size: 13px;
  line-height: 13px;
}

.page-header--view{
  color: rgb(8,7,7);
  font-size: 18px;
  line-height: 22.5px;
  font-weight: 700;
  max-width: 100%;
  cursor: pointer;
  display: inline;
  border-bottom: rgba(0,0,0,0) solid 1px;
}

.page-header--view:hover{
  border-bottom: rgb(8,7,7) solid 1px;
}

.triggerLink{
  width: auto;
  display: inline;
}

.page-header--tip{
  color: rgb(8,7,7);
  font-size: 12px;
}



/*
layui 下拉框控件的css。
作者: Microanswer
*/
/* 加载就绪标志 */
html #layuicss-dropdown_css{display:none; position: absolute; width:1989px;}
.dropdown-root {
  position: fixed;
  outline: none;

  display: none;
}

.dropdown-pointer {
  width: 0;
  height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgBAMAAABQs2O3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABVQTFRFAAAAgICAgICAgICAhISE8PDw////jUnEegAAAAd0Uk5TAB/2/////74r3wgAAACOSURBVHicfcztDYAgDEVR2MCwgXEDwwbGDYwbyP4jyJfYlvbdvzc5zrH8ti8OFeKxou+384JEiPeDiAykhIgMpASICiCiAoDogE10wCQGYBEDMAgC6AQBVIIBGsEAhRDATAhgIiZAEhMgCAXghAIwQgUooQKEMICfMIBBmMBHmEAnANAIADQCAYVwCCjEC5fhzAE36RUGAAAAAElFTkSuQmCC") no-repeat bottom center;
  background-size: 100% 50%;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}
.dropdown-pointer.bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.dropdown-root .dropdown-content {
  overflow: hidden;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(136,152,170,.1), 0 15px 35px 0 rgba(49,49,93,.1), 0 5px 15px 0 rgba(0,0,0,.13);
  border-radius: 4px
}

.dropdown-root .dropdown-content .menu-header:first-child {
  margin-top: 10px;
}

.dropdown-root .dropdown-content .menu-header,
.dropdown-root .dropdown-content .menu-header legend{
  font-size: 12px!important;
  line-height: 15px!important;
  padding: 5px 10px 5px!important;
  color: #c2c2c2;
}
.dropdown-root .dropdown-content .menu-item:first-child {
  margin-top: 10px;
}
.dropdown-root .dropdown-content .menu-item:last-child {
  margin-bottom: 10px;
}
.dropdown-root .dropdown-content .menu-item {
  line-height: 36px;
}
.dropdown-root .dropdown-content .menu-item a{
  display: block;
  color: #333;
  padding: 0 20px;
  text-indent: 0;
  font-size: 14px;
}
.dropdown-root .dropdown-content .menu-item a:hover{
  color: #000;
  background-color: #f2f2f2;
  text-decoration: none;
}

.remain-qyh{
  padding-right: 6px;
  padding-top: 4px;
  font-size: 12px;
  color:#505050;
  vertical-align: baseline;
}

.remain-number{
  padding-top: 4px;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 600;
  color:#303030;
}

.im-avatar-table .layui-table-cell{
  color:#1a1f36;
  font-size: 14px;
}

.im-avatar-table .layui-table-body tr{
  height: 56px;
}

.im-avatar-table .layui-table-cell{
  height: 100%;
  line-height: 100%;
}

.im-avatar-table .layui-table-header .layui-table-cell{
  height: 28px;
  line-height: 28px;
}


.table-avatar-holder{
  display: flex;
}

.table-avatar-image{
  width: 38px;
  height: 38px;
  border-radius: 2px;
  margin-right: 8px;
}

.table-avatar-holder .text-name{
  color:#1a1f36;
  margin-top: 4px;
}

.table-avatar-holder .text-name-single{
  color:#1a1f36;
  margin-top: 12px;
}

.table-avatar-holder .text-name.weixin{
  margin-top: 12px;
}

.table-avatar-holder .text-desc{
  margin-top: 6px;
  font-size: 12px;
  color:#f4811f;
}

.table-avatar-holder .text-desc.weixin{
  color:#2ba246;
  display: none;
}
.layim-face-list img{
}

.layim-face-list area:link,
.layim-face-list area:hover,
.layim-face-list area:active,
.layim-face-list area:focus {
  border: 5px #f00 solid;
}

.layim-face-list{
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  padding: 10px;
  border: 1px solid #D9D9D9;
}

#im-faces-image{
  display: block;
  width: 436px;
  height: 204px;
  background: url(res/faces2.png) no-repeat;
  background-size: 436px 204px;
  position: relative;
  margin: 0;
}

#im-faces-image a{
  display: block;
  width: 28px;
  height: 28px;
  overflow: hidden;
  position: absolute;
  background: transparent;
  border: 1px solid transparent;
}

#im-faces-image a:hover{
  border: 1px solid #cdcdcd;
}

 .chat-new-messages {
  margin-left: 8px;
   margin-top:2px;
   background-color: rgba(255,66,52,0.8);
   border-radius: 10px;
   margin-bottom: 2px;
   text-align: center;
   font-size: 10px;
   font-weight: 600;
   color: #ffffff;
   height: 16px;
   line-height: 14px;
   min-width: 16px;
 }

 #messages-load-more{
   padding-right: 54px;
 }
 .messages-load-more{
   font-size:12px;
   color:#828c99;
   line-height:20px;
   height: 30px;
   margin-top:12px;
   background:none;
   border:none;
 }

.im-empty-conv{
 width: 100%;
  text-align: center;
  margin-top: 30px;
  color:#a3acb9;
}
.chat-new-messages-text {
  padding: 0 4px 0 4px;
  display: inline;
}

.avatar-text-container{
}

.conv-badge{
  width: 20px;
  padding: 0; border-radius: 50%;
  color: #fff;
  font-size: 9px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADH0lEQVRoQ+2Zv2/TQBTHv89uTNlgYqCJ04HWZWhBQipioX8CbCAY2r0gQCAhARMgIYFoBd3bAQQb/AllQURCou1A3TI0TsrABBvBqf2QQ4uqxD/u3HMaS7WUKe++9z6+e3fn7xFy/lDO88cBwH6PoLIR+Hb88IDX550H8xkQlcEoA61f8FRBqIK5CqLP+pb+4cT335sq4PcEYA8Yo6zzpAY6x4xxmYSIUPHBH8mjBWvTXZFpuzs2FcDXwX5T2/KnQZgG0J+28+12DTDm/D5t7uRGw5HVkgZYLx265sG/R6Bjsp3FxTP4hw7t8VDtz0sZXSmANdN4w4xLMh3IxhLh7bDjXhZtJwxgl4wagKKo8B7j6lbNLYloCAHYprEMxqiIoLIYworluGNJeokAtmncB+NhklAm/xMeWI77KE47FmC9WJj0ieYzSU5QVGOeGqo3F6LCIwGCpZI8r6J6tRHM+39YsDqxro9HLbGRAHbReArCbdkOM4lnPLPq7p0w7VCAYIeFhoqCTUoVTwM+xsN27HCAUmEGoBuqelejw7NWrXmzXSsCwPgC4JSajpWpLFk193QiwGq5v0y+v6GsW4VCrGmDI9VGdbdkxwisFguTtM9LZxQzM0+NtC2pHQB2T87/HaTOOugEMI13YFxQOPLqpAjvLce9GDuF7FJPFvBOzh2FHDKFjJ8Ajqh7bUqVflk192jSCOQeoBf3AIkplP8i7sVjhNwyegWMV0pLT5UY4arluK9ji7hlUOleXVWfKnV0Ty+2G2Khh7k10/gka1SpTDT03E+oDDvu2cTDXBCwahaeE1PH0TXrJOP0mXhmxGneEgLI/QdNQJnrT8oAIPcf9QFE4IP64Bf7Ofc10PU4vzTR2OqGHxr1gkR80kSAVj101xfd4RHyR4UAWhDd9EcFfdEgL2GAbYjsfVIBPzT2KJFUsIFf6hGeqLYcWxccjLtxPmjoDp2UcNj/ub5i2g30b8fmKYAmUhhhSwAvwqf5rl/yhY1KYIjB8yaIMBZ3zcqMZej6YrtBlWYmSBdx2k6ybCe1CmWZSFrtA4C0b05Vu7+GeDZAXdAxlwAAAABJRU5ErkJggg==");
}
.im-draft-text,
.im-voice-text{
  color:#d0021b;
}

.last-message{
  text-transform: none!important;
  width:120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qyh-side-button .im-chat-qyh-name{
  color:#fff;
}
.qyh-selected .im-chat-qyh-name{
  color:rgb(61,78,172)!important;
  font-weight: 500;
}

.qyh-selected .Text-color--yellow200 {
  color: #e59027!important;
}

.qyh-selected .Text-color--green200 {
  color: #0cc26d!important;
}
.text-hover-bg:hover{
  background-color: #cfd5da;
}
.im-txt-group-edit{
  background-color: #fafafa;
  border:1px solid #598dc9;
  font-size: 16px;
}
.im-chat-title{
  height: 77px;
  margin-right: 100px;
}
.im-chat-other{
  margin-left: 20px;
  font-size: 16px;
  text-overflow: ellipsis;
  text-wrap: none;
  white-space: nowrap;
  overflow: hidden;
}
.im-chat-description{
  margin-left: 20px;
  font-size: 12px;
  color:#666666;
}
.im-chat-box{
  height: 442px;
}

.qyh-total-info{
  position: absolute;
  top:15px;
  left: 390px;
}

.conv-row:hover{
  background-color: #f7fafc;
  cursor: pointer;
}

.conv-row-selected{
  background-color: #cfeafc;
  cursor: pointer;
}

.conv-hidden{
  display:none;
}

.table-button{
  margin-right: 8px;
}

.Gstatus {
  width: 70px;
  text-align: right;
  margin-right: 50px;
}

.chatRecord {
  width: 186px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #fff;
  font-size: 20px;
  color: #7b8190;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
}

.inline-span {
  display: inline-block;
  width: 160px;
}

.width120 {
  width: 120px;
}

.back {
  width: 120px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: rgba(123, 129, 144, 1);
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
}

.label-left {
  position: relative;
  float: left;
  display: block;
  padding: 9px 15px;
  width: 120px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.remarkNote {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.btn-determine {
  display: block;
  width: 302px;
  margin: 100px auto 0;
  border: 0;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #3977ff;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.blue {
  background: #3977ff;
  color: #ffffff;
}

#nickname {
  color: #eb9533;
}

.layui-card-body {
  padding: 0px;
  /* overflow-y: scroll; */
  padding-bottom: 210px;
}

.onlyBorderPadding10 {
  padding: 0px;
  min-height: 66px;
}

.textColor {
  color: #7B8190;
}

.mFormLeft {
  width: auto;
}

.rightNick {
  padding-top: 6px;
  height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 14px;
}

/* 2020-3.19新需求 */
.formAvatar {
  width: 62px;
  height: 62px;
  border-radius: 4px;
}

.head-class {
  padding: 0px;
  padding-bottom: 19px;
}

.info-title {
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  color: rgba(21, 38, 52, 1);
  opacity: 1;
  padding-top: 24px;
  padding-bottom: 19px;
}

.width920 {
  width: 100%;
}

.marginBottom30 {
  border-bottom: 1px solid #E3E5EE;
}

.top-box {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.textRight {
  position: absolute;
  right: 33px;
  top: 22px;
}

.customer-infos {
  display: flex;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-right: 35px;
}

.customer-phone-box{
  margin-top: 22px;
  color: #444444;
  font-size: 13px;
}

.customer-phone-number{
  color:#808080;
}

.customer-phone-number{
  color:#444444;
  font-size: 14px;
  margin-top: 5px;
}

.customer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0px 0px 75px 48px;
}

.sign-box {
  width: 400px;
  padding: 0px;
  display: inline-block;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  /* line-height: 19px; */
  color: rgba(123, 129, 144, 1);
  opacity: 1;
  /* margin-right: 189px; */
  letter-spacing: 1px;
}

.sign-name {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(127, 136, 158, 1);
}

.sign-block {
  padding: 9px 16px 8px 17px;
  height: 33px;
  background: rgba(10, 199, 134, 1);
  opacity: 1;
  border-radius: 2px;
  text-align: center;
  line-height: 33px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, .8);
  margin-right: 14px;
}

.signs {
  line-height: 36px;
  margin-top: 6px;
}

.iconEdit {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  margin-left: 6px;
}

.Label-item-container{
  margin-bottom: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  padding-left: 16px;
  padding-right: 16px;
  box-lines: multiple;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
}

.Label-Group{
  font-size: 16px;
  font-weight: 500;
  padding-left: 16px;
  padding-bottom: 12px;
  display: -ms-flexbox;
  display: flex;
  color:#1a1f36;
}

.Label-item{
  margin-right: 15px;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 6px 15px 6px 15px;
  background-color: #ffffff;
  color: #2e2e2e;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 0px, rgba(157, 157, 157, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(166, 166, 187, 0.08) 0px 1px 1px 0px;
}

.Customer-Label-item{
  margin-right: 15px;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 4px 6px 4px 12px;
  background-color: #ffffff;
  color: #2e2e2e;
  border: #e3e8ee 1px solid;
}

.Label-item.item-selected{
  background-color: #5469d4;
  color: #ffffff;
  border-color: #5469d4;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
}

.ShowMode .Label-editor{
  display: none;
}

.ShowMode .Label-item{
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(57, 57, 57, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 1px 1px 0px;
}

.Label-item .Label-editor{
  -ms-flex-line-pack: center;
  align-content: center;
}

.Tag-Display-Mode .Label-editor{
  display: none;
}

.Label-button{
  padding-left: 5px;
  padding-right: 5px;
  background-color: transparent;
  border: none;
}

.Label-button:hover{
}

.im-popup,.im-popup-msg{
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
  background-color: white;
  border-radius: 4px;
  color:#4f566b;
}
.im-popup-msg .layui-icon, .im-popup-msg .im-error-close,
.im-popup-msg .layui-layer-setwin{
  display: none;
}

.im-popup-msg .layui-layer-btn a{
  display: none;
}

.im-popup .layui-layer-title,
.im-popup-msg .layui-layer-title
{
  border-radius: 4px 4px 0px 0px;
  padding: 8px 20px 16px;
  box-shadow: inset 0 -1px #e3e8ee;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  color:#1a1f36;
  height: 56px;
}

.im-popup-msg .layui-layer-title{
  border: none;
  box-shadow:none;
}


.im-popup .layui-layer-content,
.im-popup-msg .layui-layer-content{
  background-color: #ffffff;
  padding:0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.im-popup-msg .layui-layer-content{
  padding-left: 20px;
  padding-right: 20px;
}

.im-popup .layui-layer-btn a ,
.im-popup-msg .layui-layer-btn a{height: 28px; line-height: 28px; margin: 0; margin-right: 12px; padding: 0 0px; border: 0px solid #dedede; background-color:transparent; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;}
.im-popup .layui-layer-btn a:hover,
.im-popup-msg .layui-layer-btn a:hover{opacity: 1; text-decoration: none;}
.im-popup .layui-layer-btn a:active,
.im-popup-msg .layui-layer-btn a:active{opacity: 1;}

.im-popup .layui-layer-btn,
.im-popup-msg .layui-layer-btn{
  height: 60px;
  color:#4f566b;
  box-shadow: inset 0 1px #e3e8ee;
  padding-top: 16px;
  padding-bottom: 16px;
}

.im-popup-msg .layui-layer-btn{
  box-shadow:none;
}

.im-popup .layui-layer-btn1,
.im-popup-msg .layui-layer-btn1{
  background-color: transparent;
  border: none;
  min-height: 28px;
}

.im-popup .layui-layer-btn0,
.im-popup-msg .layui-layer-btn0{
  border: none;
  background-color: transparent;
  margin-right: 15px;
}

.im-popup .bs-Button,
.im-popup-msg .bs-Button{
  padding-left: 12px;
  padding-right: 12px;
}


.im-popup-btn{
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
  background-color: white;
  border-radius: 4px;
  color:#4f566b;
}

.im-popup-btn .layui-layer-title{
  border-radius: 4px 4px 0px 0px;
  padding: 8px 20px 16px;
  box-shadow: inset 0 -1px #e3e8ee;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  color:#1a1f36;
  height: 56px;
}

.im-popup-btn .layui-layer-content{
  background-color: #ffffff;
  padding:0px;
}

.has-binded{
  font-size:12px;
  color:#697386;
}

.im-qyh-binding .layui-layer-content{
  border-radius: 0px 0px 4px 4px;
}

.im-popup-btn .layui-layer-btn,
.im-edit-popup .layui-layer-btn{
  height: 60px;
  color:#4f566b;
  box-shadow: inset 0 1px #e3e8ee;
  padding-top: 12px;
  display: flex;
  align-content: center;
}

.im-popup-btn .layui-layer-popmsg,
.im-edit-popup .layui-layer-popmsg{
  flex: 1 1 auto;
  text-align: left;
  display: flex;
  align-content: center;
  align-items: center;
}

.im-popup-btn .layui-layer-btn1{
  background-color: #ffffff;
  border: none;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  min-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color:#4f566b;
}

.im-popup-btn .layui-layer-btn0{
  border: none;
  background-color: rgb(84, 105, 212);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  min-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color:#ffffff;
}

.Total-On-Bottom{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.Task-Table .layui-table-body tr{
  height: 58px;
}

.Task-Table .layui-table-cell{
  height: 100%;
  line-height: 100%;
}

.Task-Table .layui-table-header .layui-table-cell{
  height: 28px;
  line-height: 28px;
}

.layui-this .db-SideNav-iconFill--secondary {
  fill: #7dabf8;
}


.layui-this .db-SideNav-iconFill--primary {
  fill: #5469d4;
}

.ww-select-user .layui-table-box{
  height:430px;
  min-height: 430px;
}

.ww-select-panel .layui-table-box{
  height:430px;
  min-height: 430px;
}

.addMaterial {
  width: 125px;
  height: 40px;
  line-height: 40px;
  text-align: cener;
  color: #fff;
  font-size: 14px;
  background: #3977FF;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
}

.layui-card-body {
  padding: 10px 0;
}

.marginTop44 {
  margin-top: 44px;
}

.menuHead {
  border-bottom: 1px solid #E3E5EE;
}

.menu_item {
  float: left;
  position: relative;
  width: 100px;
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  color: #152634;
  font-weight: bold;
  text-align: center;
}

.menu_item a::after {
  display: block;
  width: 80px;
  content: "";
  position: absolute;
  height: 3px;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
}

.active_menu a,
.menu_item a:hover {
  color: #3977FF;
}

.menu_item a:hover::after,
.active_menu a::after {
  background: #3977FF;
}

.tabclass {
  min-height: 500px;
}

.layui-col-md10 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

flex-align {
  display: flex;
  align-items: center;
}

.menu_ul {
  margin-left: 20px;
}

.public-ul {
  margin-left: 40px;
}

.paddingtopBottom {
  width: auto;
  padding: 9px 16px;
}

.border {
  width: 90%;
  margin: 0 auto;
  border: 1px solid #7B8190;
}

.widthCenter {
  width: 90%;
  margin: 0 auto;
}

.displayFlex {
  display: flex;
  justify-content: flex-end;
}

.editthumb {
  margin-right: 6px;
}

.marginRight6 {
  margin-right: 6px;
}

/*   .public-ul li:nth-child(4n) {
  margin-right: 0;
}
*/
.paddingNOLeft {
  padding-left: 0;
}

.btnMarginLeft12 {
  margin-left: 12px;
}

.layui-form-item {
  margin-bottom: 0px !important;
}




.public-head,
.public-foot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-head,
.public-foot {
  color: #7B8190;
}


.layui-layout-body {
  overflow: auto;
}

.form-box {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 4px;
  padding: 48px 0px 0px 0px;
}

#LAY-popup-create-group-select-user{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius:4px;
}

.reset,
.goback {
  width: 85px;
  height: 42px;
  background: rgba(123, 129, 144, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 300;
  line-height: 42px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  border: none;
}

.result {
  width: 52px;
  height: 17px;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 17px;
  color: rgba(21, 38, 52, 1);
  opacity: 1;
  margin-right: 28px;
}

.box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.imgBox {
  width: 51px;
  height: 45px;
  background: #3977FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconSearch2 {
  width: 20px;
  height: 22px;
}

.positionR {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 24px;
}

#keyword {
  width: auto;
  min-width: 350px;
  left: 0px;
  /* border: none; */
  /* margin-right: 10px; */
  border-right: none;
}

.guide-title {
  display: flex;
  justify-content: space-between;
  padding-right: 42px;
}

.table-box {
  width: 100%;
  height: 743px !important;
  height: auto;
  /* position: relative; */
  /* display: flex;
  align-items: flex-start;
  justify-content: flex-start; */
}

.selected-groupchat-user{
  padding-right: 4px;
  padding-left: 8px;
  height: 42px;
  color: #141414;
}
.selected-groupchat-user .qiye{
  color:#f4811f;
}
.selected-groupchat-user .weixin{
  color:#2ba246;
}


.selected-groupchat-user:hover{
  background-color: #f3f8fa;
  border-radius: 2px;
}


.selected-sections {
  float: left;
  /* position: absolute;
  top: 0px;
  left: 0px; */
  width: 270px;
  height: 100%;
  background: white;
  border-left: 1px solid #E7E9EB;
  border-top: 0px;
  overflow-y: scroll;
  margin-right: 0px;
  z-index: 99;
}

.words-sections {
  float: left;
  /* position: absolute;
  top: 0px;
  left: 0px; */
  width: 200px;
  height: 100%;
  background: white;
  border-right: 1px solid #E7E9EB;
  border-top: 0px;
  overflow-y: scroll;
  margin-right: 0px;
  z-index: 99;
}

.words-table .layui-table-body{
  height: 400px;
}

.body-box {
  margin-left: 296px;
  /* border: 1px solid red; */
  height: 100%;
  z-index: 99;
}

.words-header {
  width: 100%;
  height: 39px;
  border-bottom: #e3e8ee solid 1px;
  background: #f7fafc;
  font-size: 13px;
  font-weight: bold;
  line-height: 39px;
  color: rgba(21, 38, 52, 1);
  text-align: center;
}

.words-list{
  flex: 1;
  overflow-y:hidden;
  overflow-x: hidden;
  min-height: 360px;
}

.words-list:hover{
  overflow-y: auto;
}

.words-list section{
  position: relative;
  cursor: pointer;
  width: 100%;

  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: start;
  justify-content: space-around;
  font-size: 14px;
  font-weight: 400;
  color: rgba(21, 38, 52, 1);
}

.words-group{
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  flex: 1;
  padding-left: 16px;
}

.words-group-selected{
  color:#5469d4;
  background-color: #f7fafc;
  font-weight: 500;
}

.words-list section:hover{
  background-color: #f7fafc;
}

.words-edit-buttons{
  display: none;
  padding-right: 8px;
  padding-top: 12px;
}

.words-list section:hover .words-edit-buttons{
  display: inherit;
}

.point {
  display: none;
  position: absolute;
  right: 0px;
  padding: 20px;
}

.movein {
  color: white;
  background: #3977FF;
}

.listGroup {
  position: absolute;
  top: 56px;
  right: -6px;
  z-index: 999;
  border-radius: 2px;
  width: 88px;
  height: 62px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.16);
  font-size: 9px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 12px;
  color: rgba(123, 129, 144, 1);
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.editmsg,
.deletemsg {
  cursor: pointer;
  color: #3977FF;
}

.listInfo:hover{
  background-color: #f7fafc;
}
.activeitem {
  color: white;
  background: #e5e7ea;
}

.listGroup span {
  background: #f9f9f9;
  cursor: pointer;
}

.menu_item {
  float: left;
  position: relative;
  width: 100px;
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  color: #152634;
  font-weight: bold;
  text-align: center;
}

.menu_item a::after {
  display: block;
  width: 80px;
  content: "";
  position: absolute;
  height: 3px;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
}

.active_menu a,
.menu_item a:hover {
  color: #3977FF;
}

.menu_item a:hover::after,
.active_menu a::after {
  background: #3977FF;
}

::-webkit-scrollbar {
  width: 4px;
  height:
          4px;
  background-color: #fff;
}

::-webkit-scrollbar-track {
  border-radius:
          2px;
  background-color: #fff;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #c3c2c2;
}

.library-tab .layui-tab{
  margin-top: 0px;
  margin-bottom: 20px;
}
.im-start .layui-collapse{
  border:none;
}
.im-start .layui-colla-content{
  border:none;
}

.im-start  .layui-colla-item{
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: #e3e8ee solid 1px;
}

.im-start  .layui-colla-item:hover{
  background-color: #f7fafc;
}

.im-start .layui-colla-title{
  padding-left: 40px;
  background-color: transparent;
  font-size: 14px;
  font-weight: 500;
  color:#5469d4;
}

.im-start .layui-expanded .layui-colla-title{
  color:#1a1f36;
}

.im-start .layui-expanded{
  background-color: #f7fafc;
}

.im-start .layui-colla-content{
  padding-left: 40px;
  padding-top: 0px;
  padding-bottom: 5px;
}




/*首页*/
.wrapper {
  padding-bottom: 78px;
  overflow-y: scroll;
}

.f2_left {
  /* border: 1px solid black; */
  background: rgba(242, 244, 245, 1);
}

.trend-days-container {

}

.growth-chart-container {
  width: 100%;
  /* border: 1px solid black; */
}

.growth-chart-title {
  line-height: 24px;
  color: rgba(21, 38, 52, 1);
  margin-bottom: 0px;
}

.growth-chart-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 45px;
  padding-top: 2px;
}

.growth-chart-legend {
  margin-right: 42px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.trend-legend-bar {
  display: inline-block;
  width: 20px;
  height: 5px;
  background: rgba(57, 119, 255, 1);
  opacity: 1;
  border-radius: 30px;
  margin-right: 9px;
}

.join_work {
  width: 14px;
  height: 16px;
  margin-left: 8px;
}

.trend-chart {
  /* border: 1px solid red; */
  width: 100%;
  height: 510px !important;
  /* padding-left: 30px; */
  /* border: 1px solid black; */
}

.trend-chart div:first-child() {
  width: 100% !important;
}

.trend-chart canvas {
  /* border: 1px solid blue !important; */
  width: 100% !important;
  height: 510px !important;
}


.total-chart {
  /* border: 1px solid red; */
  width: 100%;
  height: 77px !important;
  /* padding-left: 30px; */
  /* border: 1px solid black; */
}

.total-chart div:first-child() {
  width: 100% !important;
}

.total-chart canvas {
  /* border: 1px solid blue !important; */
  width: 100% !important;
  height: 77px !important;
}


.yy-middle-box {
  width: 100%;
  height: 18.1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.7vw;
}

.yy-work-platform {
  /* width: 552px; */
  width: 41%;
  height: 18vw;
  background: rgba(57, 119, 255, 1);
  opacity: 1;
  border-radius: 8px;
  justify-content: space-around;
}

.yy-middle-block {
  width: 27%;
  height: 18.7vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.yy-item-png {
  width: 2.4vw;
  height: 2vw;
}

.yy-middle-item {
  width: 100%;
  height: 8.5vw;
  background: rgba(83, 207, 104, 1);
  opacity: 1;
  border-radius: 8px;
  align-items: center;
  justify-content: space-around;
}


.yy-qun {
  background: #53CF68;
}

.yy-qunmsg {
  background: #3A96E6;
}

.yy-friends {
  background: #F58A1E;
}

.yy-gfmsg {
  background: #5565E5;
}

.yy-row {
  display: flex;
  flex-direction: row;
}

.yy-column {
  display: flex;
  flex-direction: column;
}

.yy-platform-top {
  align-items: center;
  justify-content: center;
}

.yy-platform-txt {
  font-size: 1.4vw;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 1.7vw;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 2px;
}

.yy-platform-bottom {
  align-items: center;
  justify-content: space-evenly;
}

.yy-platform-bottom-box {
  justify-content: space-evenly;
}

.yy-num {
  font-size: 2vw;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 2.4vw;
  color: rgba(255, 255, 255, 1);
  display: flex;
  margin-bottom: 13px;
}

.yy-box-infos {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  line-height: 17px;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}

.yy-bottom-box {
  align-items: flex-start;
}

.yy-bottom-block-box {
  width: 100%;
  align-items: center;
  justify-content: space-between;

}

.yy-bottom-block {
  align-items: center;
  justify-content: center;
  width: 18%;
  height: 6vw;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 8px;
}

.yy-bottom-title {
  padding-left: 10px;
  font-size: 1vw;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: rgba(21, 38, 52, 1);
  /* letter-spacing: 20px; */
  opacity: 1;
  display: flex;
  margin-bottom: 1vw;
}

.bottom-png {
  width: 2.1vw;
  height: 2.1vw;
  margin-right: 11px;
}

.bottom-text {
  font-size: 0.9vw;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 1.1vw;
  color: rgba(21, 38, 52, 1);
  opacity: 1;
}

* {
  margin: 0;
  padding: 0;
}

.select-center {
  display: flex;
  align-items: center;
  height: 4.5vw;
}

.marginRight26 {
  margin-right: 26px;
}
.width30{
  width: 30px!important;
}

.colorRed {
  color: #F65B5B !important;
}

.colorRed b {
  color: #F65B5B !important;
}

.colorGreen b {
  color: #3ACC6B !important;
}

.colorBlue{
  color: #3977FF!important;
}

.wrapper {
  padding: 10px 48px;
  padding-bottom: 40px;
  min-width: 1104px;
}

.f1_header {
  height: 4.5vw;
  line-height: 4.5vw;
}

.f1_header h2 {
  font-weight: 600;
  font-size: 20px;
}

.f1_header_left,
.f1_header_right,
.f1_content_left,
.f1_content_right {
}

.f1_content {
  display: flex;
  height: 9.5vw;
  margin-bottom: 1.5vw;
}

.f1_content_left,
.f1_content_right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f1_content_right {
  border-radius: 8px;
  overflow: hidden;
}

.content_list a,.content_list a:hover {
  cursor: pointer;
  text-decoration: none;
}


.content_list {
  height: 100%;
  background: #FFF;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.list_left {
  margin-right: 26px;
  border-radius: 8px;
}

.trend-data-number {
  font-size: 30px;
  font-weight: 600;
  color:#1a1f36;
}
.trend-data-container{
  margin-top:10px;
  text-align: center;
}
.trend-data-title {
  font-size: 12px;
  color: #7B8190;
  margin-top: 3px;
  margin-bottom: 7px;
}

.trend_compare-data {
  font-size: 12px;
  color: #909090;
}

.trend_compare-data b {
  font-size: 1.1vw;
  color: #3c4257;
}

.trend_icon {
  margin-bottom: 10px;
}

.trend_icon img {
  width: 35px;
}

.icon-up,
.icon-down {
  margin-left: 5px;
}

.index_f2 {
  display: flex;
  min-height: 500px;
}

.f2_left {
  flex: 1;
  width: 0;
  min-height: 100%;
  margin-right: 1.7vw;
  background: #FFF;

}

.f2_right {
  width: 20.5vw;
  min-width: 350px;
  min-height: 100%;
}

.f2_contacts {
  padding: 30px 25px;
  background: #FFF;
  margin-bottom: 1.5vw;
  border-radius: 8px;
}

.f2_contacts-info {
  display: flex;
  align-items: center;
}

.info_header {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.info_header img {
  width: 100%;
}

.info_name p {
  height: 23px;
  line-height: 23px;
}

.full_name {
  font-size: 16px;
  color: #070603;
}

.full_post {
  color: #717680;
  font-size: 12px;
}

.tips-text {
  margin-top: 30px;
  border: 1px solid #D5D7DE;
  padding: 16px 25px;
  position: relative;
}

.tips-text:after,
.tips-text:before {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #D5D7DE;
  position: absolute;
  content: "";
  left: 30px;
  top: -20px;
}

.tips-text:before {
  border-bottom-color: white;
  top: -18px;
  z-index: 2;
}

.f2_contacts-code {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.f2_contacts-code p {
  border: 1px dashed #D5D7DE;
}

.f2_contacts-code p img{
  width:8.75vw;
}

.f2_news {
  height: 30.5vw;
  max-height: 510px;
  background: #FFF;
  padding: 34px 25px;
  padding-bottom: 98px;
  border-radius: 8px;
}

.f2_news h3 {
  font-weight: 600;
  font-size: 20px;
  color: #152634;
  margin-bottom: 30px;
}

.news-list {
  display: flex;
  align-items: center;
  height: 5vw;
}

.banner {
  height: 171px;
}

.banner img {
  width: 100%;
  height: 100%;
}

.msg_icon {
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}

.msg_icon img {
  width: 100%;
}

.msg-title {
  font-size: 16px;
  color: #152634;
  margin-bottom: 6px;
}

.msg-date {
  font-size: 13px;
  color: #7B8190;
}

.banner-url {
  width: 100%;
  display: block;
}

.no-more-news {
  text-align: center;
  padding: 20px 0;
}

.im-error{
  min-width: 300px;
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
}

.im-error .layui-layer-title{
  background-color: transparent;
  height: 40px;

  display: flex;
  align-content: center;
}
.im-error .im-error-icon{
  color:#CC2F30;
  margin-top: 10px;
}

.im-error .im-error-title{
   margin-left: 8px;
  font-size: 16px;
  color:#CC2F30;
  align-content: baseline;
  font-weight: 500;
}


.im-error .layui-layer-content{
  padding-top: 0px;
  padding-left: 47px;
  padding-bottom: 30px;
  padding-right: 20px;
  color: #1a1f36;
}

.im-error-close{
  position: absolute;
  right: 12px;
  top: 2px;
  color: #20222a;
  cursor: pointer;
}

.freeze-status{
  color:rgb(205, 61, 100);
}

.normal-status{
  color:#1ea672;
}

.detail-table .layui-table-body{
  min-height: 285px;
}

.detail-table .layui-table-body .layui-none{
  min-height: 330px;
  padding-top: 120px;
}

#pop-ww-qyh .layui-input, .im-popup .layui-input
, .im-edit-popup .layui-input
{
  height: 36px;
  line-height: 1.3;
  line-height: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-style: solid;
  background-color: #fff;
  border-radius: 4px;
  border-width: 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.im-popup .layui-input:focus,
.im-popup .layui-textarea:focus,
.im-popup .layui-input:active,
.im-popup .layui-textarea:active{
  border-color: rgb(21, 137, 238);
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.im-edit-popup .layui-input:focus,
.im-edit-popup .layui-textarea:focus,
.im-edit-popup .layui-input:active,
.im-edit-popup .layui-textarea:active{
  border-color: rgb(21, 137, 238);
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.im-edit-popup .layui-form-danger{
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;

}

.im-edit-popup .layui-form-danger:focus,
.im-edit-popup .layui-form-danger:active{
  border-color: rgb(205, 61, 100);
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}


#LAY-account-detail-select-acct .layui-form-select dl{
  max-height: 130px;
}
#page-weixin-common-setting .layui-form-select dl,
#page-weixin-task-setting .layui-form-select dl,
#page-mass-edit .layui-form-select dl{
  max-height: 160px;
}

.contentTitle {
  color: #1F2D3D;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  /* padding-left: 10px; */
  margin-bottom: 10px;
}
.contentTitle::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 12px;
  background-color: #4D7CFE;
  left: -10px;
  transform: translateY(-50%);
  top: 50%;
}
.label {
  color: #333;
  margin-bottom: 10px;
}

.procedure {
  margin-top: 39px;
}
.procedure .label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}

.procedure .stepBox{
  padding-left: 65px;
  position: relative;
  margin-top: 20px;
}
.procedure .stepBox .step{
  position: absolute;
  width: 60px;
  height: 28px;
  background-color: #EFF2F7;
  text-align: center;
  line-height: 28px;
  border-radius: 2px;
  left: 0;
  top: 0;
}

.slds-input{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 34px;
  line-height: 34px;
}

.procedure .copy {
  color: #4D7CFE;
  cursor: pointer;
}

.CallBackConfig{
  padding: 16px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.im-pop-cancel{
  padding-left: 12px;
  padding-right: 12px;
}

.im-pop-submit{
  padding-left: 12px;
  padding-right: 12px;
}

.binding-status1{
  color: #e5993e;
}

.binding-status2{
  color:#33c27f;
}

.binding-status3{
  color:#697386;
}
.lay-ext-mulitsel .layui-form-select dl dd div {
  margin-top: 0px !important;
}

.lay-ext-mulitsel .layui-form-select dl dd.layui-this {
  background-color: #fff
}

.lay-ext-mulitsel .layui-input.multiple {
  line-height: auto;
  height: auto;
  padding: 4px 10px 4px 10px;
  overflow: hidden;
  min-height: 34px;
  margin-top: -34px;
  left: 0;
  z-index: 99;
  position: relative;
  background: #fff;
}

.lay-ext-mulitsel .layui-input.multiple a {
  padding: 2px 5px;
  background: #5469d4;
  border-radius: 2px;
  color: #fff;
  font-size:13px;
  display: block;
  line-height: 16px;
  height: 20px;
  margin: 02px 5px 2px 0;
  float: left;
  text-decoration:none;
}

.lay-ext-mulitsel .layui-input.multiple a i {
  margin-left: 4px;
  font-size: 14px;
}

.lay-ext-mulitsel .layui-input.multiple a i:hover {
  background-color: #354cc1;
  border-radius: 2px;
  text-decoration:none;
}

.lay-ext-mulitsel .danger {
  border-color: #FF5722 !important
}

.lay-ext-mulitsel .tips {
  pointer-events: none;
  position: absolute;
  left: 10px;
  top: 0px;
  color: #3c4257;
}

.lay-ext-mulitsel dd {color:#1a1f70 !important;}
.lay-ext-mulitsel dd:not(.layui-this):hover{color:white !important;}

#pop-label-edit .add-label-layer label {
  width: 170px;
  text-align: right;
}

.add-label-layer{
  margin-top: 20px;
  margin-bottom: 20px;
}

.layui-form-item{
  margin-top: 8px;
}

.im-popup .layui-form-label{
  padding-top: 8px;
  color:#1a1f36;
}

.im-popup .layui-btn {
  border-radius: 4px;
  height: 36px !important;
  line-height: 36px !important;
}

.im-popup .layui-form-item .layui-input-inline {
  width: 220px;
}

.im-edit-popup .layui-form-label{
  padding-top: 8px;
  color:#1a1f36;
}

.im-edit-popup .layui-btn {
  border-radius: 4px;
  height: 36px !important;
  line-height: 36px !important;
}

.im-edit-popup .layui-form-item .layui-input-inline {
  width: 280px;
}

.im-edit-popup .layui-input-content{
  width: 220px;
}

.label-name-list{
  width: 280px;
}
.label-name-list li{
  margin-bottom: 8px;
}
.label-name-list input{
  width: 220px;
}

.im-edit-popup,.im-choose-popup{
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
  background-color: white;
  border-radius: 4px;
  color:#4f566b;
}
.im-edit-popup .layui-icon, .im-edit-popup .im-error-close{
}
.im-edit-popup .layui-layer-title,
.im-choose-popup .layui-layer-title{
  border-radius: 4px 4px 0px 0px;
  padding: 8px 20px 16px;
  box-shadow: inset 0 -1px #e3e8ee;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  color:#1a1f36;
  height: 56px;
}

.im-edit-popup .layui-layer-content{
  background-color: #f7fafc;
  padding:0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.im-choose-popup .layui-layer-content{
  background-color: #ffffff;
  padding:0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.im-edit-popup .layui-layer-btn a{height: 28px; line-height: 28px; margin: 0; margin-right: 12px; padding: 0 0px; border: 0px solid #dedede; background-color:transparent; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;}
.im-edit-popup .layui-layer-btn a:hover{opacity: 1; text-decoration: none;}
.im-edit-popup .layui-layer-btn a:active{opacity: 1;}

.im-edit-popup .layui-layer-btn{
  height: 60px;
  color:#4f566b;
  box-shadow: inset 0 1px #e3e8ee;
  padding-top: 16px;
  padding-bottom: 16px;
}

.im-edit-popup .layui-layer-btn1{
  background-color: transparent;
  border: none;
  min-height: 28px;
}

.im-edit-popup .layui-layer-btn0{
  border: none;
  background-color: transparent;
  margin-right: 15px;
}

.im-edit-popup .bs-Button{
  padding-left: 12px;
  padding-right: 12px;
}

.im-edit-popup .layui-flow-more a cite,
.im-choose-popup .layui-flow-more a cite{
  padding: 0 20px;
  border-radius: 3px;
  background-color: white;
  color: #5469d4;
  font-style: normal;
}

.im-edit-popup-btn{
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
  background-color: white;
  border-radius: 4px;
  color:#4f566b;
}

.im-edit-popup-btn .layui-layer-title{
  border-radius: 4px 4px 0px 0px;
  padding: 8px 20px 16px;
  box-shadow: inset 0 -1px #e3e8ee;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  color:#1a1f36;
  height: 56px;
}

.im-edit-popup-btn .layui-layer-content{
  background-color: #ffffff;
  padding:0px;

}

.im-edit-popup-btn .layui-layer-btn{
  height: 60px;
  color:#4f566b;
  box-shadow: inset 0 1px #e3e8ee;
  padding-top: 12px;
  display: flex;
  align-content: center;
}

.im-edit-popup-btn .layui-layer-popmsg{
  flex: 1 1 auto;
  text-align: left;
}

.im-edit-popup-btn .layui-layer-btn1{
  background-color: #ffffff;
  border: none;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  min-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color:#4f566b;
}

.im-edit-popup-btn .layui-layer-btn0{
  border: none;
  background-color: rgb(84, 105, 212);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  min-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color:#ffffff;
}

.im-edit-page{
  padding: 20px;
}

.im-edit-page .layui-form-label{
  width: 200px;
  margin-right: 16px;
}

.im-edit-page .layui-input-inline{
  width: 500px;
}

.im-edit-page .layui-form-label{
  padding-top: 8px;
  color:#1a1f36;
}

.im-edit-page .layui-btn {
  border-radius: 4px;
  height: 36px !important;
  line-height: 36px !important;
}

.im-edit-page .layui-form-item .layui-input-inline {
  width: 280px;
  vertical-align: middle;
}

.im-edit-page .layui-input-content{
  width: 220px;
}

.countries-select .layui-form-select dl{
  max-height: 210px;
}


.label-name-list{
  width: 280px;
}
.label-name-list li{
  margin-bottom: 8px;
}
.label-name-list input{
  width: 220px;
}

.im-edit-page{
  background-color: #f7fafc;
  color:#4f566b;
  padding-bottom: 30px;
}
.im-edit-page .layui-icon, .im-edit-page .im-error-close{
}

.im-edit-page .bs-Button{
  padding-left: 12px;
  padding-right: 12px;
}


.im-edit-page .layui-input
{
  height: 36px;
  line-height: 1.3;
  line-height: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-style: solid;
  background-color: #fff;
  border-radius: 4px;
  border-width: 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}


.im-edit-page .layui-input:focus,
.im-edit-page .layui-textarea:focus,
.im-edit-page .layui-input:active,
.im-edit-page .layui-textarea:active{
  border-color: transparent;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.im-edit-page .layui-form-danger{
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(205, 61, 100) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;

}

.im-edit-page .layui-form-danger:focus,
.im-edit-page .layui-form-danger:active{
  border-color: rgb(205, 61, 100);
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(205, 61, 100, 1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.immass_list .layui-table-cell
{
  padding-left:8px;
  padding-right:8px;
}

.im-edit-page .layui-form-label{
  padding-top: 8px;
  color:#1a1f36;
}

.im-edit-page .layui-btn {
  border-radius: 4px;
  height: 36px !important;
  line-height: 36px !important;
}

.im-edit-page .layui-form-item .layui-input-inline {
  width: 380px;
}

.im-edit-page .layui-input-content{
  width: 220px;
}

.layui-form-select .Select-arrows svg {
  color: rgb(60, 66, 87);
}
.layui-form-selected .Select-arrows svg {
  color: rgb(26, 31, 54);
}

.flex-extend {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; /** `flexItems` can't be used since this is a raw <input /> **/
  width: 100%;
}

.layui-upload-img {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 314px;
  height: 314px;
  z-index: 799;
}

.layui-upload-icon {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 99px;
  height: 99px;
  z-index: 799;
}
.import-upload-img-pdata{
  position: absolute;
  left: 1px;
  top: 1px;
  width: 276px;
  height: 276px;
  z-index: 799;
}
.import-upload-img-mass{
  position: absolute;
  left: 1px;
  top: 1px;
  width: 276px;
  height: 276px;
  z-index: 799;
}
.js-table .layui-table-body{
    min-height: 285px;}

.stat-pdata{
  font-size:14px;
  line-height:24px;
}
.stat-pdata-data{
  text-align:right;
  width:100px;
  font-size:16px;
  font-weight:bold;
}
.import-upload-img {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 376px;
  height: 376px;
  z-index: 799;
}

#LAY-popup-library-edit{
  background-color: #ffffff!important;
}

#library-list-container{
}

.library-item{
  border-radius: 2px;
  height: 100%;
}

.library-item-container{
  min-width: 300px;
  width: 30%;
  border-radius: 4px;
  border: rgb(255,255,255) 1px solid;
}

.library-item-container:hover{
  background-color: #ffffff;
  border-radius: 4px;
  border: rgb(84, 105, 212) 1px solid;
}


.db-Library-item {
  overflow: hidden;
  position: relative;
  padding: 8px 15px 10px;
  margin: -1px -1px 0 0;
  height: 312px;
  transition: transform .4s
}

.db-Library-item-0 {
  overflow: hidden;
  position: relative;
  padding: 8px 15px 10px;
  margin: 0px -1px 0 0;
  height: 312px;
  transition: transform .4s
}
.im-choose-popup .db-Library-item,
.im-choose-popup .db-Library-item-0{
  height: 260px;
}

.panel-library .db-Library-item-0{
  height: 240px;
}

.library-item-btns{
  display: none;
}

.Grid-item:hover .library-item-btns{
  display: inherit;
}


.Grid-item:hover{
  background-color: #f7fafc;
}

.layui-layer-prompt .layui-layer-title,
.layui-layer-dialog .layui-layer-title
{
  background-color: #ffffff;
  border: none;
  color:#1a1f36;
  font-weight: 500;
  border-radius: 4px;
  height: 48px;
  padding-top: 6px;
}

.layui-layer-prompt .layui-layer-input{
  border-radius: 4px;

}

.layui-layer-prompt,.layui-layer-dialog {
  box-shadow: 0 7px 14px 0 rgba(60,66,87,.08), 0 3px 6px 0 rgba(0,0,0,.12);
}

.layui-layer-dialog .layui-layer-content,
.layui-layer-prompt .layui-layer-content{
  padding-top: 4px;
}
.layui-layer-dialog .layui-layer-setwin,
.layui-layer-prompt .layui-layer-setwin{
  display: none;
}

.layui-layer-msg .layui-layer-content{
  padding-top: 10px;
  padding-bottom: 10px;
}

.member-list-item{
  background-color: #4D7CFE;
  border-radius: 4px;
  padding-right: 4px;
  padding-left: 8px;
  height: 34px;
  line-height: 34px;
  color: #ffffff;
}

.label-list-item{
  background-color: #4D7CFE;
  border-radius: 8px;
  padding-right: 4px;
  padding-left: 8px;
  height: 34px;
  line-height: 34px;
  color: #ffffff;
}

.del-welcome-btn,.edit-welcome-btn,.up-welcome-btn,.down-welcome-btn{
  color:#5469d4;
  cursor: pointer;
}

.layui-form-checkbox span{
  margin-top: -1px;
}


.im-qrcode-table .layui-table-cell{
  height: 60px;
  line-height: 60px;
  color:#1a1f36;
  font-size: 14px;
  vertical-align: middle;
}

.table-qrcode-image{
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.lay-ext-mulitsel .layui-disabled, .lay-ext-mulitsel .layui-disabled:hover {
  cursor: pointer !important;
}

.im-mass-edit .layui-form-item .layui-input-inline {
  width: 480px;
}

.float-span {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.progress-box {
  height: 40px;
  border-radius: 0px;
  padding-top: 10px;
}

.progress-bar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

#index-selections input{
  border-width: 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;"
}

.customer-tag-container{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  box-lines: multiple;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
}

.customer-tag-container div{
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 4px;
  margin-bottom: 4px;
  border:1px solid #e3e8ee;
}

.qun-member{
  display: none;
}

.qun-owner{
  margin-left: 15px;
  margin-top:10px;
  background-color:#5469d4;
  border-radius: 4px;
  font-size: 10px;
  color:White;
  padding: 3px 4px;
}

.qun-admin{
  margin-left: 15px;
  margin-top:10px;
  background-color:#7dabf8;
  border-radius: 4px;
  font-size: 10px;
  color:White;
  padding: 3px 4px;
}

.status_at_times{
  color:#00dede;
}

.status_vm_disabled{
  color:#828c99;
}

.status_vm_not_activated{
  color:#3d4eac;
}

.mobile-result{
  overflow: hidden;
  flex-wrap: wrap;
}
.mobile-result div{
  margin-right:16px;
  width:100px;
  font-size: 16px;

  background-color:#f7fafc;
}

.login-work-server .layui-input{
  height: 44px;
  padding-left:16px;
}

.login-work-server .layui-form-select dl{
  top:48px;
}

.login-work-server .layui-form-select dd{
  padding-left:16px;
}

.table_pc .layui-table td{

}

.reverse-ellipsis {
  text-overflow: clip;
  position: relative;
  background-color: white;
}

.reverse-ellipsis:before {
  content: '\02026';
  position: absolute;
  z-index: 1;
  left: -1em;
  background-color: inherit;
  padding-left: 1em;
  margin-left: 0.5em;
}

.reverse-ellipsis span {
  min-width: 100%;
  position: relative;
  display: inline-block;
  float: right;
  overflow: visible;
  background-color: inherit;
  text-indent: 0.5em;
}

.reverse-ellipsis span:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: inherit;
  z-index: 200;
  left: -.5em;
}

.vm-avails{
  font-weight:500;
  color:#01a84c;
}
.vm-failed{
  font-weight:500;
  color:#697386;
}
.vm-running{
  font-weight:500;
  color:#db723d;
}
.status_warning{
  color:#d81e06;
  font-weight: 500;
}
.status_warning2{
  color:#db723d;
  font-weight: 500;
}
.status_send_disabled{
  color:#d200c1;
}
.status_login_disabled{
  color:#d81e06;
}
.status_test_disabled{
  color:rgb(205, 61, 100);
}
.status_disabled{
  color:rgb(205, 61, 100);
}
.status_create{
  color:#FFDA00;
}
.status_progress{
  color:#FFA10D;
}
.status_queue{
  color:#4285f4;
}
.status_activated{
  color:#2ba246;
}
.status_success{
  color:#2ba246;
}
.status_wait_times{
  color:#0abfbc;
}
.im-chat-main{
  z-index: 9999;
  width: 820px;
  overflow: hidden;
  height: 580px;
  min-width: 800px;
  min-height: 420px;
  box-sizing: content-box;
  position: fixed;
  left: 0;
  top: 0;
}

.im-chat-main {
  border: 1px solid #3d4eac;
  background-repeat: no-repeat;
  background-color: #F6F6F6;
  color: #333;
}

.im-chat-main {
  background-size: cover;
  border-radius: 4px;
  box-shadow: 0 7px 14px 0 rgba(120, 172, 248, .18), 0 3px 6px 0 rgba(0, 0, 0, .18);
}

.im-chat-setwin {
  position: absolute;
  right: 0px;
  *right: 0;
  top: 0px;
  font-size: 0;
  line-height: initial;
  border-radius: 4px;
  background: none;
}

.im-chat-qyh-sidebar{
  width: 72px;
  min-width: 72px;
  padding: 12px 8px;
  background-color: #3d4eac;
  overflow: hidden;
  scrollbar-width: none;
}

.layui-layim-file{
  width:256px;
  max-width: 256px;
}

.layui-layim-system{
  /*width:100%;*/
  text-align: center;
  font-size: 12px;
  color:#828c99;
  padding-right:60px;
}

.layui-layim-revoked{
  /*width:100%;*/
  text-align: center;
  font-size: 12px;
  color:#828c99;
  padding-right:60px;
  height:16px;
  max-height: 16px;
  margin-bottom:20px;
}

.layui-layim-revoked span{
  background-color: #e4e7eb;
  color:#7e848c;
  padding:4px;
  border-radius: 2px;
}


.layui-layim-time{
  width:100%;
  text-align: center;
  font-size: 12px;
  color:#828c99;
  padding-right:60px;
}

.tu-wen{
  width:256px;
  border:1px solid #ebeced;
  border-radius: 4px;
  background-color: #ffffff;
}

.preview-center{
  transform: translateY(1.1px);
  position:absolute;
  top:calc(50% - 16px);
  right:calc(50% - 16px);
}
.preview-center svg{
  width: 32px;
  height: 32px;
}
.preview-left{
  transform: translateY(1.1px);
  position:absolute;
  top:calc(49% - 12px);
  right:calc(100% + 8px);
}
.preview-left svg{
  width: 24px;
  height: 24px;
}

.tu-wen-title{
  width:180px;
  max-height: 80px;
  color:#000000;
  padding-top: 10px;
  padding-left: 15px;
  overflow: hidden;
  overflow-wrap: break-word;
}

.tu-wen-desc{
  width:180px;
  max-height: 30px;
  color:#8796a5;
  padding-left: 15px;
  margin-top:4px;
  margin-bottom:4px;
}


.im-detail-table{
  background-color: #f7fafc;
  line-height:20px;
  padding: 9px 15px;
  font-weight: 500;
  border-right-width: 0px;border-top-width: 0px;border-left-width: 0px;border-bottom-width: 1px; border-style: solid; border-color: #e3e8ee;
}

.warn-tips-block{
  border-top: 1px solid #e3e8ee;
  background-color: #feeeed;
  color:#807677;
  padding:8px 10px;
}