xtu_mall/public/assets/libs/pear/pear.css

@charset "utf-8";
html, body, .layui-layout {height: 100%; }
.pear-admin .layui-header, .pear-admin .layui-body, .pear-admin .layui-logo, .pear-admin .layui-side, .pear-admin .layui-header .layui-layout-left {transition: all .3s; }
.pear-admin.banner-layout .layui-side {top: 60px!important; }
.pear-admin.banner-layout .layui-side .layui-logo {display: none; }
.pear-admin.banner-layout .layui-header .layui-logo {display: inline-block; }
.pear-admin.banner-layout .layui-side .layui-side-scroll {height: 100%!important; }
.pear-admin.banner-layout .layui-side .layui-side-scroll {height: 100%!important; }
.pear-admin .layui-header.dark-theme .layui-layout-control .layui-this *{background-color: rgba(0,0,0,.1)!important; }
.pear-admin.banner-layout .layui-header {z-index: 99999; width: 100%; left: 0px; }
.pear-admin.banner-layout .layui-header .layui-layout-left {left: 230px; }
.pear-admin.banner-layout .layui-header .layui-logo .title {top: 2px; }
.pear-admin.banner-layout .layui-header .layui-layout-control {display: inline-block; left: 355px; }
.pear-admin.banner-layout .layui-header.dark-theme {box-shadow: 2px 0 6px rgb(0 21 41 / 35%); }
.pear-admin .layui-header .layui-logo {display: none; }
.pear-admin .layui-logo .title {font-size: 20px; }
.pear-admin .layui-layout-right .layui-nav-child {border: 1px solid whitesmoke; border-radius: 4px; width: auto; left: auto; right: -23px; }
.pear-admin .layui-header {left: 230px; width: calc(100% - 230px); background-color: white; border-bottom: 1px solid whitesmoke; }
.pear-admin .layui-layout-control {left: 125px; position: absolute; }
.pear-admin .layui-layout-control .layui-nav {padding: 0px; }
.pear-admin .layui-logo {width: 230px; height: 59px; line-height: 59px; position: relative; background-color: #28333E; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.pear-admin .layui-logo img {width: 34px; height: 34px; }
.pear-admin .layui-logo .title {font-size: 21px; font-weight: 550; color: var(--lay-color-primary); position: relative; top: 5px; margin-left: 5px; }
.pear-admin .layui-logo i{color: var(--lay-color-primary);}
.pear-admin .layui-logo .logo {display: none; }
.pear-admin .layui-side {top: 0px; width: 230px; box-shadow: 2px 0 6px rgba(0, 21, 41, .20); z-index: 9999; }
.pear-admin .layui-side-scroll::-webkit-scrollbar {width: 0px; height: 0px; }
.pear-admin .layui-side-scroll {height: calc(100% - 60px) !important; background-color: #28333E; width: 247px; }
.pear-admin .layui-header .layui-nav .layui-nav-item>a {color: black; font-size: 15px;padding: 0 16px}
.pear-admin .layui-body {left: 230px; bottom: 0px; padding-bottom: 0px; }
.pear-admin .layui-layout-left {left: 0px; }
.pear-admin .layui-footer {position: absolute; display: flex; justify-content: space-between; left: 230px; background: #fff; border-top: 1px solid #F2F2F2; box-shadow: none; -webkit-transition: left .3s; transition: left .3s; overflow: hidden; color: #3c3c3cb3; font-weight: 300; font-size: 13.6px; }
.pear-admin .layui-footer.close {display: none; }

.pear-admin.banner-layout .layui-header.auto-theme .layui-logo,.pear-admin .layui-header.auto-theme{border:none;background-color:var(--lay-color-primary)!important;}
.pear-admin.banner-layout .layui-header.auto-theme .layui-logo .title,.pear-admin .layui-header.auto-theme .layui-nav .layui-nav-item>a{color:whitesmoke!important;}
.pear-admin.banner-layout .layui-header.auto-theme{ box-shadow: 2px 0 6px rgb(0 21 41 / 35%) }
.pear-admin .layui-header.auto-theme .layui-layout-control .layui-this *,.pear-admin.banner-layout .layui-header.auto-theme .layui-layout-control .layui-this *{ background-color: rgba(0,0,0,.1)!important;}

@media screen and (max-width: 768px) {
  .pear-admin.banner-layout .layui-header .layui-logo {display: none; }
  .pear-admin.banner-layout .layui-header .layui-layout-left {left: 0px; }
  .layui-header .layui-nav .layui-nav-item a {padding: 0 13px;}
}

/** 收缩布局 */
.pear-mini .layui-side .layui-logo .title {display: none; }
.pear-mini .layui-side .layui-logo .logo {display: inline-block; }
.pear-mini .layui-side {width: 60px; }
.pear-mini .layui-header {left: 60px; width: calc(100% - 60px); }
.pear-mini .layui-body {left: 60px; }
.pear-mini .layui-side .layui-logo {width: 60px; }
.pear-mini .layui-footer {left: 60px; }
.pear-mini .layui-nav-tree .layui-nav-item span {display: none; }
.pear-mini .layui-side-scroll {height: calc(100% - 60px); }
.pear-admin .layui-header .layui-nav .layui-nav-bar {top: 0px !important; height: 2px !important; background-color: var(--lay-color-primary); }
.pear-admin .layui-header .layui-nav .layui-this:after {display: none; }
.pear-admin .layui-header .layui-nav-more {display: none; }
.pear-collapsed-pe {display: none; width: 50px; position: absolute; z-index: 400000; bottom: 30px; right: 30px; background-color: var(--lay-color-primary); height: 50px; line-height: 50px; text-align: center; border-radius: 50px; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); }
.pear-collapsed-pe a {color: white !important; }

@media screen and (min-width: 768px) {
  .layui-hide-sm {display: inline-block !important; }
}

@media screen and (min-width: 769px) {
  .layui-hide-sm {display: none !important; }
}

/** 新增兼容 */
@media screen and (max-width:768px) {
  .collapse {display: none !important; }
  .pear-collapsed-pe {display: inline-block !important; }
  .layui-layout-control {left: 45px !important; }
  .layui-layout-left {padding-left: 10px; padding-right: 10px; }
  .pear-mini .layui-side-scroll {height: calc(100% - 62px); }
  .pear-mini .layui-side {width: 0px; }
  .pear-mini .layui-header {left: 0px; width: 100%; }
  .pear-mini .layui-body {left: 0px; }
  .pear-mini .layui-footer {left: 0px; }
  .pear-mini .layui-logo {width: 0px; }
  .pear-admin .layui-body {left: 0px; }
  .pear-admin .layui-header {left: 0px; width: 100%; }
  .pear-admin .pear-cover {width: 100%; height: 100%; background-color: #1E1E1E; display: block; position: absolute; z-index: 1000; opacity: 0; margin-top: -60px; }
  .pear-mini .pear-cover {display: none; }
}

.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:var(--lay-color-primary);color:white;}

/** 侧边主题 (亮) */
.light-theme.layui-side {box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05) !important; }
.light-theme.layui-side .layui-logo {background-color: white !important; color: black !important; border-bottom: 1px whitesmoke solid; }
.light-theme.layui-side .layui-side-scroll {background-color: white !important; color: black !important; }
.dark-theme.layui-header {border-bottom: none; background-color: #28333E; color: whitesmoke; }
.dark-theme.layui-header li>a{color: whitesmoke!important; }
.dark-theme.layui-header li>a i{color: whitesmoke!important; }
.dark-theme.layui-header .layui-logo {box-shadow: none; border: none; }

/** 顶部主题 (白) */
.light-theme.layui-header .layui-logo {background-color: white; border: none; box-shadow: none; }

/** 主题面板 */
.pearone-color .set-text {height: 42px; line-height: 42px; }
.pearone-color .color-title {padding: 15px 0 0px 20px; margin-bottom: 4px; }
.pearone-color .color-content {padding: 15px 10px 0 20px; }
.pearone-color .color-content ul {list-style: none; padding: 0px; }
.pearone-color .color-content ul li {position: relative; display: inline-block; vertical-align: top; width: 70px; height: 50px; margin: 0 20px 20px 0; padding: 2px 2px 2px 2px; background-color: #f2f2f2; cursor: pointer; font-size: 12px; color: #666; }
.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {width: 100%; height: 100%; padding: 4px; top: -5px; left: -5px; border: var(--lay-color-primary) 2px solid; opacity: 1; border-radius: 4px; }
.pearone-color .color-content li:after {content: ''; position: absolute; z-index: 20; top: 50%; left: 50%; width: 1px; height: 0; border: 2px solid #F2F2F2; transition: all .3s; -webkit-transition: all .3s; opacity: 0; }
.select-color {margin-bottom: 30px; }
.select-color .select-color-title {padding: 15px 0 0px 20px; margin-bottom: 4px; }
.select-color .select-color-content {padding: 20px 0 0px 0px; margin-bottom: 4px; }
.select-color .select-color-content .select-color-item {background-color: gray; width: 30px; height: 30px; border-radius: 3px; float: left; margin-left: 20px; color: white; font-size: 18px; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15); line-height: 30px; }
.message .layui-tabs-header li:not(:last-child) {border-right: 1px solid #eee; }
@media screen and (max-width: 450px) {
  .pearone-color .layui-form-item .layui-input-inline {float: left !important; width: 190px !important; margin: 0 10px 0 0!important; }
}
/* 搜索面板 */
.menu-search-content .layui-input {padding-left: 30px; }
.menu-search-content {display: flex; flex-wrap: wrap; justify-content: center; }
.menu-search-input-wrapper {width: 100%; padding: 15px 15px; }
.menu-search-no-data {display: flex; justify-content: center; width: 100%; height: 122px; align-items: center; }
.menu-search-list {width: 100%; padding: 5px 15px;max-height:520px;overflow:hidden;overflow-y:auto; }
.menu-search-list li {position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; height: 50px; margin-bottom: 8px; padding: 0px 10px; color: currentColor; font-size: 14px; border-radius: 4px; box-shadow: 0 1px 3px #d4d9e1; cursor: pointer; background-color: #fff; }
.menu-search-list li:hover {background-color: var(--lay-color-primary); color: white; }
.menu-search-list li.this {background-color: var(--lay-color-primary); color: white; }
.menu-search-tips{margin-bottom: 15px;padding: 0 15px;width: 100%}
.menu-search-tips>div{display: flex;align-items: center;justify-content: flex-end;font-size: 12px;}
.menu-search-tips .mr-1 {margin-right: 4px;}
.menu-search-tips .mr-5 {margin-right: 20px;}
.menu-search-tips .w-5 {width: 14px;}
.menu-search-tips kbd{line-height: 1.5;border: 1px solid #e5e7eb;font-size: 10px;text-align: center;padding:2px;font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;border-radius:5px;}
/* 侧边搜索 */
.pear-mini .sider-search {display: none;}
.sider-search {margin: 10px; position: relative; z-index: 99; display: block; max-width: 210px;cursor: pointer;}
.search-input {display: flex; background-color: rgba(255,255,255,0.1);color: rgba(255,255,255,0.7); height: 28px; padding: 5px 10px; margin: 0; border-radius: 2px;border: 1px solid transparent;    justify-content: space-between!important;}
.search-input:hover{color: #fff}
.sider-search .search-icon{width: 28px; height: 28px; background: transparent; line-height: 28px; text-align: center; color: rgba(255,255,255,0.85);}
.sider-search .search-text{font-size: 14px;line-height: 28px;margin-left: 5px;}
/** 亮 样 式*/
.light-theme .sider-search .search-input {background: #fff;color: #666;border-color: rgba(0,0,0,0.1);}
.light-theme .sider-search .search-icon{color: #666;}

/*menu.css*/
.pear-nav-tree {width: 230px !important; border-radius: 0px; background-color: #28333E; }
.pear-nav-tree .layui-nav-item>a {height: 56px; line-height: 56px; padding-top: 0px; padding-bottom: 0px; }
.pear-nav-tree .layui-nav-item dd a {height: 48px; line-height: 48px; }
.pear-nav-tree  .layui-nav-item>a .layui-nav-more {padding: 0px; }
.pear-side-scroll::-webkit-scrollbar {width: 0px; height: 0px; }
.pear-side-scroll{width: 230px; }
.pear-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {background-color: #5FB878; }
.pear-nav-tree .toast {font-size: 14px; margin: 5px; margin-right: 8px; text-align: center; height: 40px; line-height: 40px; color: lightgray; }
.pear-nav-tree .layui-nav-item a i {margin-right: 12px; }
.pear-nav-tree .layui-nav-item a span {letter-spacing: 2px; font-size: 13.5px; }
.pear-nav-tree .layui-nav-item a:hover {background-color: transparent; }
.pear-nav-tree .layui-nav-more {margin-right: 5px; }
.pear-nav-tree .layui-nav-bar {display: none; }
.pear-nav-tree .layui-nav-item a .layui-badge-dot {float: right; right: 13px;}
.pear-nav-tree .layui-nav-item a .layui-badge {float: right; right: 10px; height: 22px;line-height: 22px;}

/** 实 现 菜 单 隐 藏 */
.pear-nav-mini {overflow: hidden; }
.pear-nav-mini .layui-nav-item a span {display: none; }
.pear-nav-mini .layui-nav-child {display: none; }
.pear-nav-mini .layui-nav-more {display: none !important; }
.pear-nav-control.pc a {font-weight: 500; font-size: 14px; }
.pear-nav-control.pc li{display: inline-block; }
.pear-nav-control.pc .layui-nav-bar {top: 0px !important; }
.pear-nav-control.pc .layui-this * {    background-color: #e4e4e4 !important;}
.pear-nav-control.pc *{color: #565656 !important;}
.pear-nav-control.pc .layui-nav-bar{display: none!important; }
.pear-nav-control .layui-nav-child{border: 1px solid whitesmoke; border-radius: 6px; width: 150px; }

/** 隐 藏 后 子 级 悬 浮 菜 单 */
.pear-nav-tree .layui-nav-hover {position: fixed; min-width: 160px; padding: 4px; display: block !important; background: transparent !important; }
.pear-nav-tree .layui-nav-hover:before {content: ''; position: absolute; right: 4px; left: 4px; bottom: 0; top: 0; border-radius: 4px; overflow: hidden; background-color: #28333E; display: block; box-shadow: 0px 0px 3px lightgray; }
.pear-nav-tree .layui-nav-hover a span {display: inline-block !important; }
.pear-nav-tree .layui-nav-hover a i {display: none; }
.pear-nav-tree .layui-nav-child dd a span {margin-left: 26px !important; }
.pear-nav-tree .layui-nav-child dd a i {display: none; }
.pear-nav-tree .layui-nav-hover dd a span {margin-left: 0px !important; }
.pear-nav-tree dl {padding-top: 0; padding-bottom: 0; }

/** 亮 样 式*/
.dark-theme .layui-nav-tree{background-color: #28333E!important; }
.light-theme{background-color: white!important; }
.light-theme .pear-nav-tree, .light-theme .pear-nav-tree .layui-nav-hover:before, .light-theme .pear-nav-tree .layui-nav-child{background-color: white!important; }
.light-theme .pear-nav-tree a, .light-theme .pear-nav-tree .layui-nav-more{color: dimgray!important; border-top-color: dimgray; }
.light-theme .pear-nav-tree .layui-nav-itemed>a>.layui-nav-more{border-top-color: white!important; border-bottom-color: dimgray!important; }
.light-theme .pear-nav-tree .layui-this a, .light-theme .pear-nav-tree .layui-this{color: white!important; background-color: #5FB878!important; }
.light-theme .pear-nav-tree .layui-this a:hover{background-color: #5FB878!important; }
.light-theme .pear-nav-tree .layui-this{ border-right: 3px solid var(--lay-color-primary)!important}
.light-theme .pear-nav-tree .layui-nav-bar{display: none; }
.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: var(--lay-color-primary)!important;}
.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a {background-color:var(--lay-color-accent)!important;color:var(--lay-color-primary)!important;}

/** 下 拉 图 标 */
.pear-nav-tree.arrow .layui-nav-more {font-family: layui-icon !important; font-size: 10px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; width: auto; height: auto; line-height: normal; border: none; top: 23px; margin-right: 2px !important; margin: 0; padding: 0; display: inline-block; transition: all .2s; -webkit-transition: all .2s; }
.pear-nav-tree.arrow .layui-nav-child .layui-nav-more {top: 17px; }
.pear-nav-tree.arrow .layui-nav-more:before {content: "\e61a"; }
.pear-nav-tree.arrow .layui-nav-itemed>a>.layui-nav-more {transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); width: 12px; text-align: center; }
.pear-nav-tree.arrow .layui-nav-child.layui-nav-hover>dd>a>.layui-nav-more {display: inline-block !important; transform: rotate(270deg); -ms-transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); width: 12px; text-align: center; background-color: transparent !important; }
.pear-nav-tree.arrow .layui-nav-child.layui-nav-hover>a>.layui-nav-more:before, .pear-nav-tree.arrow .layui-nav-itemed>a>.layui-nav-more:before {content: '\e61a'; display: inline-block; vertical-align: middle; }

/*tab.css*/
.pear-tab {margin: 0px; overflow: hidden; height: 100% !important; }
.pear-tab .layui-tabs-body {height: calc(100% - 42px) !important; }
.pear-tab .layui-tabs-body .layui-tabs-item {height: 100%; }
.pear-tab-menu{box-shadow: 0 2px 8px #f0f1f2!important; border: 1px solid whitesmoke!important; border-radius: 4px!important; }
.pear-tab-menu .item{height: 20px; padding-left: 18px; padding-top: 7px; padding-bottom: 7px; color: #333; font-size: 13.5px; line-height: 20px; cursor:pointer; }
.pear-tab-menu .item:hover{background: #36b368; color: white; }
.pear-tab .layui-tabs-body {padding: 0px; }
.pear-tab .layui-tabs-header {border: none; border: 1px solid whitesmoke; background-color: white; }
.pear-tab .layui-tabs-header li {border-right: 1px solid whitesmoke; color: dimgray; font-size: 13.5px; }
.pear-tab .layui-tabs-header .layui-this:after {display: none; }
.pear-tab .layui-tabs-header .pear-tab-active {display: inline-block; background-color: lightgray; width: 8px; height: 8px; border-radius: 30px; margin-right: 12px; }
.pear-tab .layui-tabs-header .layui-this .pear-tab-active {background-color: var(--lay-color-primary); }
.pear-tab .layui-tabs-header .layui-tabs-close:hover {background-color: white; line-height: 19px; color: gray; }
.pear-tab .layui-tabs-header .disable-close+.layui-tabs-close {display: none; }
.pear-tab .layui-tabs-header .able-close+.layui-tabs-close {display: inline-block; }
.pear-tab .layui-tabs-close{font-size: 13px; }
.pear-tab .layui-tab-control>li {position: absolute; top: 0px; height: 38px; line-height: 38px; width: 40px; text-align: center; background-color: white; border-top: whitesmoke 1px solid; border-bottom: whitesmoke 1px solid; }
.pear-tab .layui-tab-tool {right: 0px; border-left: 1px solid whitesmoke; }
.pear-tab .layui-tab-control .layui-tab-tool{display: none; }
.pear-tab.layui-tab-roll .layui-tabs-header {padding-left: 40px; padding-right: 40px; }
.pear-tab.layui-tab-tool .layui-tab-control .layui-tab-tool {display: block; }
.pear-tab.layui-tab-tool .layui-tabs-header {padding-left: 0px; padding-right: 40px; }
.pear-tab.layui-tab-rollTool .layui-tab-control .layui-tab-tool {display: block; }
.pear-tab.layui-tab-rollTool .layui-tabs-bar .layui-icon-next{right: 40px}
.pear-tab.layui-tab-rollTool .layui-tabs-bar .layui-icon{box-shadow: none;}
.pear-tab .layui-tab-tool .layui-nav {position: absolute; height: 43px !important; top: 0; width: 100%; height: 100%; padding: 0; background: 0 0; }
.pear-tab .layui-tab-tool .layui-nav-item {height: 40px; }
.pear-tab .layui-tab-tool .layui-nav-bar {display: none; }
.pear-tab .layui-tab-tool .layui-nav-child {left: auto; top: 45px; right: 3px; width: 120px; border: 1px solid whitesmoke; }
.pear-tab .layui-tab-tool .layui-this a {background-color: #009688; }
.pear-tab-loading {position: absolute; display: none; width: 100%; height: calc(100% - 42px); top: 42px; z-index: 19; background-color: #fff }
.pear-tab-loading.close {animation: close 1s; -webkit-animation: close 1s; animation-fill-mode: forwards; }

.ball-loader {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) }
.ball-loader>span, .signal-loader>span {background-color: var(--lay-color-primary) !important; display: inline-block }
.ball-loader>span:nth-child(1), .ball-loader.sm>span:nth-child(1), .signal-loader>span:nth-child(1), .signal-loader.sm>span:nth-child(1) {-webkit-animation-delay: 0s; animation-delay: 0s }
.ball-loader>span:nth-child(2), .ball-loader.sm>span:nth-child(2), .signal-loader>span:nth-child(2), .signal-loader.sm>span:nth-child(2) {-webkit-animation-delay: .1s; animation-delay: .1s }
.ball-loader>span:nth-child(3), .ball-loader.sm>span:nth-child(3), .signal-loader>span:nth-child(3), .signal-loader.sm>span:nth-child(3) {-webkit-animation-delay: .15s; animation-delay: .15s }
.ball-loader>span:nth-child(4), .ball-loader.sm>span:nth-child(4), .signal-loader>span:nth-child(4), .signal-loader.sm>span:nth-child(4) {-webkit-animation-delay: .2s; animation-delay: .2s }
.ball-loader>span {width: 20px; height: 20px; margin: 0 3px; border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); animation: ball-load 1s ease-in-out infinite; -webkit-animation: 1s ball-load ease-in-out infinite }
@-webkit-keyframes ball-load {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }

  50% {
    transform: scale(1);
    -webkit-transform: scale(1)
  }

  100% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }
}

@keyframes ball-load {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }

  50% {
    transform: scale(1);
    -webkit-transform: scale(1)
  }

  100% {
    transform: scale(0);
    -webkit-transform: scale(0)
  }
}

@-webkit-keyframes close {
  0% {
    opacity: 1;
    /*display: block;*/
  }

  100% {
    opacity: 0;
    /*display: none;*/
  }
}

/*loader.css*/
.loader-main{position: fixed; width: 100%; height: 100%; background-color: whitesmoke; z-index: 9999999; }
.loader {width: 50px; height: 50px; margin: 30px auto 40px; margin-top: 20%; position: relative; z-index: 999999; background-color: whitesmoke; }
.loader:before {content: ""; width: 50px; height: 7px; border-radius: 50%; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; animation: shadow .5s linear infinite; }
.loader:after {content: ""; width: 50px; height: 50px; border-radius: 3px; background-color: var(--lay-color-primary); position: absolute; top: 0; left: 0; animation: loading .5s linear infinite; }
@-webkit-keyframes loading {
  17% {
    border-bottom-right-radius: 3px;
  }

  25% {
    transform: translateY(9px) rotate(22.5deg);
  }

  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }

  75% {
    transform: translateY(9px) rotate(67.5deg);
  }

  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes loading {
  17% {
    border-bottom-right-radius: 3px;
  }

  25% {
    transform: translateY(9px) rotate(22.5deg);
  }

  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }

  75% {
    transform: translateY(9px) rotate(67.5deg);
  }

  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes shadow {

  0%,
  100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.2, 1);
  }
}
@keyframes shadow {

  0%,
  100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.2, 1);
  }
}

.pear-frame {width: 100%; height: 100%; position: relative; overflow: hidden; }
.pear-frame .dot {width: 5px; height: 24px; background-color: var(--lay-color-primary); margin-top: 8px; margin-left: 15px; border-radius: 2px; display: inline-block; }
.pear-frame .title {position: absolute; margin-top: 0px; margin-left: 12px; color: dimgray; display: inline-block; letter-spacing: 2px; }
.pear-frame .pear-frame-title {height: 40px; line-height: 40px; background-color: white; border: whitesmoke 1px solid; }
.pear-frame .pear-frame-content {width: 100%; height: calc(100% - 0px) !important; }
.pear-frame-loading {position: absolute; display: none; width: 100%; height: calc(100% - 0px) !important; top: 0px; z-index: 19; background-color: #fff }
.pear-frame-loading.close {animation: close 1s; -webkit-animation: close 1s; animation-fill-mode: forwards; }
.toast-top-right-index {top: 62px;right: 12px;}