@charset "utf-8"; /* *Last modified: 2021-07-12 20:58:32 *Filename: ax.css *Description: Global CSS *Version: v1.0.3 *Website:www.axui.cn or ax.hobly.cn *Contact:3217728223@qq.com *Author:Michael */ /*reset*/ body { text-align: left; font-size: 14px; color: #333333; line-height: 28px; font-family: "微软雅黑", "microsoft yahei", "Arial", "Helvetica Neue", "sans-serif", "宋体", "simsun"; } body, html { width: 100%; height: 100%; padding: 0; margin: 0; background-color: #fff; } :focus { outline: 0; } ::-ms-clear, ::-ms-reveal { display: none; } * { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } fieldset { border: 1px dotted #ccc; border-radius: 3px; } sup, sub { font-size: 6px; } pre { color: #666666; font-size: 12px; font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; line-height: 18px; white-space: pre-wrap; word-wrap: break-word; } button[type='button'], input[type='button'], input[type='submit'], input[type='text'], input[type='search'], input[type='reset'] { -webkit-appearance: none; } input[type='text'], input[type='search'] { font-size: 14px; } em, i { font-style: normal; } s, u { text-decoration: none; } ul, li, form { list-style-image: none; list-style: none; list-style-type: none; list-style-position: outside; margin: 0; padding: 0; } a, span, font, input, textarea, select, label, i { display: inline-block; vertical-align: top; } a span, label { cursor: pointer; } input, textarea, button { font-size: 14px; outline: none; resize: none; -webkit-appearance: none; transition: all 0.1s linear; vertical-align: top; } select { font-size: 14px; outline: none; resize: none; transition: all 0.1s linear; } input[type=checkbox] { -webkit-appearance: checkbox; } input[type=radio] { -webkit-appearance: radio; } input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; } input, textarea, select, button { font-family: "微软雅黑", "microsoft yahei", "Arial", "Helvetica Neue", "sans-serif", "宋体", "simsun"; } img { border: 0; vertical-align: middle; } svg { vertical-align: middle; } form, div, p { display: block; } p { margin: 0; padding: 0.6em 0 0.6em 0; } a { color: #333333; text-decoration: none; transition: color 0.1s linear, background-color 0.1s linear, box-shadow 0.1s linear; } a:hover { color: #198cff; text-decoration: none; } a:active { color: #0059b2; text-decoration: none; } .ax-cancel, a.ax-cancel, .ax-cancel a, .ax-cancel:hover, a.ax-cancel:hover, .ax-cancel a:hover { color: #b3b3b3; text-decoration: line-through; margin: 0 4px; cursor: text; } a.ax-color-ignore, .ax-color-ignore a { color: #b3b3b3; text-decoration: none; } a.ax-color-ignore:hover, .ax-color-ignore a:hover { color: #b3b3b3; text-decoration: underline; } a.ax-color-primary, .ax-color-primary a { color: #198cff; text-decoration: none; } a.ax-color-primary:hover, .ax-color-primary a:hover { color: #198cff; text-decoration: underline; } a.ax-color-secondary, .ax-color-secondary a { color: #475b66; text-decoration: none; } a.ax-color-secondary:hover, .ax-color-secondary a:hover { color: #475b66; text-decoration: underline; } a.ax-color-success, .ax-color-success a { color: #41a358; text-decoration: none; } a.ax-color-success:hover, .ax-color-success a:hover { color: #41a358; text-decoration: underline; } a.ax-color-danger, .ax-color-danger a { color: #dc3545; text-decoration: none; } a.ax-color-danger:hover, .ax-color-danger a:hover { color: #dc3545; text-decoration: underline; } a.ax-color-warning, .ax-color-warning a { color: #ffc107; text-decoration: none; } a.ax-color-warning:hover, .ax-color-warning a:hover { color: #ffc107; text-decoration: underline; } a.ax-color-info, .ax-color-info a { color: #14ccc9; text-decoration: none; } a.ax-color-info:hover, .ax-color-info a:hover { color: #14ccc9; text-decoration: underline; } a.ax-color-ad, .ax-color-ad a { color: #ff8400; text-decoration: none; } a.ax-color-ad:hover, .ax-color-ad a:hover { color: #ff8400; text-decoration: underline; } a[class*='ax-btn']:hover { text-decoration: none; } .ax-iconfont { font-size: 14px; position: relative; } .ax-iconfont:before { position: relative; top: 1px; } .ax-svg { width: 14px; height: 14px; } @font-face { font-family: 'DINCond-Light'; src: url('../fonts/DINCond-Light.otf'); font-weight: normal; font-style: normal; } .ax-font-lighter { font-family: 'DINCond-Light'; } @font-face { font-family: 'DINCond-Regular'; src: url('../fonts/DINCond-Regular.otf'); font-weight: normal; font-style: normal; } .ax-font-light { font-family: 'DINCond-Regular'; } @font-face { font-family: 'DINCond-Medium'; src: url('../fonts/DINCond-Medium.otf'); font-weight: normal; font-style: normal; } .ax-font-regular { font-family: 'DINCond-Medium'; } @font-face { font-family: 'DINCond-Bold'; src: url('../fonts/DINCond-Bold.otf'); font-weight: normal; font-style: normal; } .ax-font-bold { font-family: 'DINCond-Bold'; } @font-face { font-family: 'DINCond-Black'; src: url('../fonts/DINCond-Black.otf'); font-weight: normal; font-style: normal; } .ax-font-bolder { font-family: 'DINCond-Black'; } /*scrollbar*/ ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.04); } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0.04); } body { scrollbar-arrow-color: #b3b3b3; scrollbar-face-color: #b3b3b3; scrollbar-3dlight-color: #b3b3b3; scrollbar-highlight-color: #f0f0f0; scrollbar-shadow-color: #b3b3b3; scrollbar-darkshadow-color: #b3b3b3; scrollbar-track-color: #f0f0f0; scrollbar-base-color: #f0f0f0; } /*placeholder*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.3); } input::-moz-placeholder, textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.3); } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: rgba(0, 0, 0, 0.3); } input::-o-placeholder, textarea::-o-placeholder { color: rgba(0, 0, 0, 0.3); } input::placeholder, textarea::placeholder { color: rgba(0, 0, 0, 0.3); } .ax-reverse input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.2); } .ax-reverse input::-moz-placeholder, textarea::-moz-placeholder { color: rgba(255, 255, 255, 0.2); } .ax-reverse input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: rgba(255, 255, 255, 0.2); } .ax-reverse input::-o-placeholder, textarea::-o-placeholder { color: rgba(255, 255, 255, 0.2); } .ax-reverse input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.2); } /*global*/ .ax-clear { height: 0; width: 100%; overflow: hidden; clear: both; margin: 0px; padding: 0px; } .ax-scroll { overflow: hidden; } .ax-content { width: 1200px; margin: 0 auto; } /*radius square*/ .ax-radius, *[class*="ax-btn"].ax-radius:after { border-radius: 3px; } .ax-radius-top { border-top-left-radius: 3px; border-top-right-radius: 3px; } .ax-radius-bottom { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .ax-radius-left { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .ax-radius-right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /*radius size*/ .ax-radius-xxs, .ax-avatar.ax-radius-xxs, .ax-sign.ax-radius-xxs { border-radius: 3px; } .ax-radius-xs, .ax-avatar.ax-radius-xs, .ax-sign.ax-radius-xs { border-radius: calc(3px*2); } .ax-radius-xs.ax-radius-top { border-top-left-radius: calc(3px*2); border-top-right-radius: calc(3px*2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xs.ax-radius-bottom { border-bottom-left-radius: calc(3px*2); border-bottom-right-radius: calc(3px*2); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-xs.ax-radius-left { border-top-left-radius: calc(3px*2); border-bottom-left-radius: calc(3px*2); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xs.ax-radius-right { border-top-right-radius: calc(3px*2); border-bottom-right-radius: calc(3px*2); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-radius-sm, .ax-avatar.ax-radius-sm, .ax-sign.ax-radius-sm { border-radius: calc(3px*3); } .ax-radius-sm.ax-radius-top { border-top-left-radius: calc(3px*3); border-top-right-radius: calc(3px*3); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-sm.ax-radius-bottom { border-bottom-left-radius: calc(3px*3); border-bottom-right-radius: calc(3px*3); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-sm.ax-radius-left { border-top-left-radius: calc(3px*3); border-bottom-left-radius: calc(3px*3); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-sm.ax-radius-right { border-top-right-radius: calc(3px*3); border-bottom-right-radius: calc(3px*3); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-radius-md, .ax-avatar.ax-radius-md, .ax-sign.ax-radius-md { border-radius: calc(3px*4); } .ax-radius-md.ax-radius-top { border-top-left-radius: calc(3px*4); border-top-right-radius: calc(3px*4); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-md.ax-radius-bottom { border-bottom-left-radius: calc(3px*4); border-bottom-right-radius: calc(3px*4); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-md.ax-radius-left { border-top-left-radius: calc(3px*4); border-bottom-left-radius: calc(3px*4); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-md.ax-radius-right { border-top-right-radius: calc(3px*4); border-bottom-right-radius: calc(3px*4); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-radius-lg, .ax-avatar.ax-radius-lg, .ax-sign.ax-radius-lg { border-radius: calc(3px*6); } .ax-radius-lg.ax-radius-top { border-top-left-radius: calc(3px*6); border-top-right-radius: calc(3px*6); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-lg.ax-radius-bottom { border-bottom-left-radius: calc(3px*6); border-bottom-right-radius: calc(3px*6); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-lg.ax-radius-left { border-top-left-radius: calc(3px*6); border-bottom-left-radius: calc(3px*6); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-lg.ax-radius-right { border-top-right-radius: calc(3px*6); border-bottom-right-radius: calc(3px*6); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-radius-xl, .ax-avatar.ax-radius-xl, .ax-sign.ax-radius-xl { border-radius: calc(3px*8); } .ax-radius-xl.ax-radius-top { border-top-left-radius: calc(3px*8); border-top-right-radius: calc(3px*8); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xl.ax-radius-bottom { border-bottom-left-radius: calc(3px*8); border-bottom-right-radius: calc(3px*8); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-xl.ax-radius-left { border-top-left-radius: calc(3px*8); border-bottom-left-radius: calc(3px*8); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xl.ax-radius-right { border-top-right-radius: calc(3px*8); border-bottom-right-radius: calc(3px*8); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-radius-xxl, .ax-avatar.ax-radius-xxl, .ax-sign.ax-radius-xxl { border-radius: calc(3px*10); } .ax-radius-xxl.ax-radius-top { border-top-left-radius: calc(3px*10); border-top-right-radius: calc(3px*10); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xxl.ax-radius-bottom { border-bottom-left-radius: calc(3px*10); border-bottom-right-radius: calc(3px*10); border-top-left-radius: 0; border-top-right-radius: 0; } .ax-radius-xxl.ax-radius-left { border-top-left-radius: calc(3px*10); border-bottom-left-radius: calc(3px*10); border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-radius-xxl.ax-radius-right { border-top-right-radius: calc(3px*10); border-bottom-right-radius: calc(3px*10); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-square, *[class*="ax-btn"].ax-square, *[class*="ax-btn"].ax-square:after { border-radius: 0; } .ax-square-top { border-top-left-radius: 0; border-top-right-radius: 0; } .ax-square-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ax-square-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-square-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } /*shadow*/ .ax-shadow { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); } .ax-shadow-border { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1); } .ax-shadow-light { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.06); } .ax-shadow-dark { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); box-shadow: 5px 5px 20px rgba(51, 51, 51, 0.4); } .ax-shadow-cloud { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .ax-shadow-primary { box-shadow: 1px 2px 10px rgba(25, 140, 255, 0.2); } .ax-shadow-secondary { box-shadow: 1px 2px 10px rgba(71, 91, 102, 0.2); } .ax-shadow-success { box-shadow: 1px 2px 10px rgba(65, 163, 88, 0.2); } .ax-shadow-danger { box-shadow: 1px 2px 10px rgba(220, 53, 69, 0.2); } .ax-shadow-info { box-shadow: 1px 2px 10px rgba(20, 204, 201, 0.2); } .ax-shadow-warning { box-shadow: 1px 2px 10px rgba(255, 193, 7, 0.3); } .ax-shadow-ad { box-shadow: 1px 2px 10px rgba(255, 132, 0, 0.2); } /*ellipsis*/ .ax-ell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-subject { font-size: 18px; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2-subject { font-size: 18px; max-height: calc(28px * 2); max-width: 100%; line-height: 28px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3-subject { font-size: 18px; max-height: calc(28px * 3); max-width: 100%; line-height: 28px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ax-ell-title { font-size: 16px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2-title { font-size: 16px; max-height: calc(22px * 2); max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3-title { font-size: 16px; max-height: calc(22px * 3); max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ax-ell-body { font-size: 14px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2-body { font-size: 14px; max-height: calc(22px * 2); max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3-body { font-size: 14px; max-height: calc(22px * 3); max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ax-ell-des { font-size: 14px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2-des { font-size: 14px; max-height: calc(18px * 2); max-width: 100%; line-height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3-des { font-size: 14px; max-height: calc(18px * 3); max-width: 100%; line-height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ax-ell-ignore { font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-ell-2-ignore { font-size: 12px; max-height: calc(16px * 2); max-width: 100%; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-ell-3-ignore { font-size: 12px; max-height: calc(16px * 3); max-width: 100%; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /*border*/ .ax-border { border: 1px solid #ebebeb; } .ax-border-tb { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .ax-border-lr { border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; } .ax-border-grid td, .ax-border-grid th { position: relative; } .ax-border-grid td:before, .ax-border-grid th:before { content: ''; width: 1px; height: 100%; background-color: #ebebeb; position: absolute; left: 0; top: 0; } .ax-border-grid tr td:last-child:not([class*='-sorting']):after, .ax-border-grid tr th:last-child:not([class*='-sorting']):after { content: ''; width: 1px; height: 100%; background-color: #ebebeb; position: absolute; right: 0; top: 0; } .ax-table.ax-border-grid { position: relative; } .ax-table.ax-border-grid:after { content: ''; width: 1px; height: 100%; background-color: #ebebeb; position: absolute; right: 0; top: 0; } /*margin*/ .ax-margin { margin: 14px; box-sizing: border-box; } .ax-margin-tb { margin-top: 14px; margin-bottom: 14px; box-sizing: border-box; } .ax-margin-lr { margin-left: 14px; margin-right: 14px; box-sizing: border-box; } .ax-margin-left { margin-left: 14px; box-sizing: border-box; } .ax-margin-right { margin-right: 14px; box-sizing: border-box; } .ax-margin.ax-xxs { margin: 4px; } .ax-margin.ax-xs { margin: 8px; } .ax-margin.ax-sm { margin: 10px; } .ax-margin.ax-md { margin: 14px; } .ax-margin.ax-lg { margin: 18px; } .ax-margin.ax-xl { margin: 22px; } .ax-margin.ax-xxl { margin: 28px; } .ax-margin-tb.ax-xxs { margin-top: 4px; margin-bottom: 4px; } .ax-margin-tb.ax-xs { margin-top: 8px; margin-bottom: 8px; } .ax-margin-tb.ax-sm { margin-top: 10px; margin-bottom: 10px; } .ax-margin-tb.ax-md { margin-top: 14px; margin-bottom: 14px; } .ax-margin-tb.ax-lg { margin-top: 18px; margin-bottom: 18px; } .ax-margin-tb.ax-xl { margin-top: 22px; margin-bottom: 22px; } .ax-margin-tb.ax-xxl { margin-top: 28px; margin-bottom: 28px; } .ax-margin-lr.ax-xxs { margin-left: 4px; margin-right: 4px; } .ax-margin-lr.ax-xs { margin-left: 8px; margin-right: 8px; } .ax-margin-lr.ax-sm { margin-left: 10px; margin-right: 10px; } .ax-margin-lr.ax-md { margin-left: 14px; margin-right: 14px; } .ax-margin-lr.ax-lg { margin-left: 18px; margin-right: 18px; } .ax-margin-lr.ax-xl { margin-left: 22px; margin-right: 22px; } .ax-margin-lr.ax-xxl { margin-left: 28px; margin-right: 28px; } .ax-margin-left.ax-xxs { margin-left: 4px; } .ax-margin-left.ax-xs { margin-left: 8px; } .ax-margin-left.ax-sm { margin-left: 10px; } .ax-margin-left.ax-md { margin-left: 14px; } .ax-margin-left.ax-lg { margin-left: 18px; } .ax-margin-left.ax-xl { margin-left: 22px; } .ax-margin-left.ax-xxl { margin-left: 28px; } .ax-margin-right.ax-xxs { margin-right: 4px; } .ax-margin-right.ax-xs { margin-right: 8px; } .ax-margin-right.ax-sm { margin-right: 10px; } .ax-margin-right.ax-md { margin-right: 14px; } .ax-margin-right.ax-lg { margin-right: 18px; } .ax-margin-right.ax-xl { margin-right: 22px; } .ax-margin-right.ax-xxl { margin-right: 28px; } .ax-margin-top.ax-xxs { margin-top: 4px; } .ax-margin-top.ax-xs { margin-top: 8px; } .ax-margin-top.ax-sm { margin-top: 10px; } .ax-margin-top.ax-md { margin-top: 14px; } .ax-margin-top.ax-lg { margin-top: 18px; } .ax-margin-top.ax-xl { margin-top: 22px; } .ax-margin-top.ax-xxl { margin-top: 28px; } .ax-margin-bottom.ax-xxs { margin-bottom: 4px; } .ax-margin-bottom.ax-xs { margin-bottom: 8px; } .ax-margin-bottom.ax-sm { margin-bottom: 10px; } .ax-margin-bottom.ax-md { margin-bottom: 14px; } .ax-margin-bottom.ax-lg { margin-bottom: 18px; } .ax-margin-bottom.ax-xl { margin-bottom: 22px; } .ax-margin-bottom.ax-xxl { margin-bottom: 28px; } /*padding*/ .ax-padding { padding: 14px; box-sizing: border-box; } .ax-padding-tb { padding: 14px 0; box-sizing: border-box; } .ax-padding-lr { padding: 0 14px; box-sizing: border-box; } .ax-padding-left { padding-left: 14px; box-sizing: border-box; } .ax-padding-right { padding-right: 14px; box-sizing: border-box; } .ax-padding.ax-xxs { padding: 4px; } .ax-padding.ax-xs { padding: 8px; } .ax-padding.ax-sm { padding: 10px; } .ax-padding.ax-md { padding: 14px; } .ax-padding.ax-lg { padding: 18px; } .ax-padding.ax-xl { padding: 22px; } .ax-padding.ax-xxl { padding: 28px; } .ax-padding-tb.ax-xxs { padding-top: 4px; padding-bottom: 4px; } .ax-padding-tb.ax-xs { padding-top: 8px; padding-bottom: 8px; } .ax-padding-tb.ax-sm { padding-top: 10px; padding-bottom: 10px; } .ax-padding-tb.ax-md { padding-top: 14px; padding-bottom: 14px; } .ax-padding-tb.ax-lg { padding-top: 18px; padding-bottom: 18px; } .ax-padding-tb.ax-xl { padding-top: 22px; padding-bottom: 22px; } .ax-padding-tb.ax-xxl { padding-top: 28px; padding-bottom: 28px; } .ax-padding-lr.ax-xxs { padding-left: 4px; padding-right: 4px; } .ax-padding-lr.ax-xs { padding-left: 8px; padding-right: 8px; } .ax-padding-lr.ax-sm { padding-left: 10px; padding-right: 10px; } .ax-padding-lr.ax-md { padding-left: 14px; padding-right: 14px; } .ax-padding-lr.ax-lg { padding-left: 18px; padding-right: 18px; } .ax-padding-lr.ax-xl { padding-left: 22px; padding-right: 22px; } .ax-padding-lr.ax-xxl { padding-left: 28px; padding-right: 28px; } .ax-padding-left.ax-xxs { padding-left: 4px; } .ax-padding-left.ax-xs { padding-left: 8px; } .ax-padding-left.ax-sm { padding-left: 10px; } .ax-padding-left.ax-md { padding-left: 14px; } .ax-padding-left.ax-lg { padding-left: 18px; } .ax-padding-left.ax-xl { padding-left: 22px; } .ax-padding-left.ax-xxl { padding-left: 28px; } .ax-padding-right.ax-xxs { padding-right: 4px; } .ax-padding-right.ax-xs { padding-right: 8px; } .ax-padding-right.ax-sm { padding-right: 10px; } .ax-padding-right.ax-md { padding-right: 14px; } .ax-padding-right.ax-lg { padding-right: 18px; } .ax-padding-right.ax-xl { padding-right: 22px; } .ax-padding-right.ax-xxl { padding-right: 28px; } .ax-padding-top.ax-xxs { padding-top: 4px; } .ax-padding-top.ax-xs { padding-top: 8px; } .ax-padding-top.ax-sm { padding-top: 10px; } .ax-padding-top.ax-md { padding-top: 14px; } .ax-padding-top.ax-lg { padding-top: 18px; } .ax-padding-top.ax-xl { padding-top: 22px; } .ax-padding-top.ax-xxl { padding-top: 28px; } .ax-padding-bottom.ax-xxs { padding-bottom: 4px; } .ax-padding-bottom.ax-xs { padding-bottom: 8px; } .ax-padding-bottom.ax-sm { padding-bottom: 10px; } .ax-padding-bottom.ax-md { padding-bottom: 14px; } .ax-padding-bottom.ax-lg { padding-bottom: 18px; } .ax-padding-bottom.ax-xl { padding-bottom: 22px; } .ax-padding-bottom.ax-xxl { padding-bottom: 28px; } /*col break*/ .ax-gutter-xxs { width: 4px; overflow: hidden; } .ax-gutter-xs { width: 8px; overflow: hidden; } .ax-gutter-sm { width: 12px; overflow: hidden; } .ax-gutter, .ax-gutter-md { width: 14px; overflow: hidden; } .ax-gutter-lg { width: 16px; overflow: hidden; } .ax-gutter-xl { width: 22px; overflow: hidden; } .ax-gutter-xxl { width: 28px; overflow: hidden; } /*row break*/ .ax-break-xxs { height: 4px; overflow: hidden; } .ax-break-xs { height: 8px; overflow: hidden; } .ax-break-sm { height: 10px; overflow: hidden; } .ax-break, .ax-break-md { height: 14px; overflow: hidden; } .ax-break-lg { height: 18px; overflow: hidden; } .ax-break-xl { height: 22px; overflow: hidden; } .ax-break-xxl { height: 28px; overflow: hidden; } /*line break*/ .ax-gutter-line { height: 100%; width: 1px; background-color: #ebebeb; } .ax-border { border: 1px solid #ebebeb; } .ax-break-line { height: 1px; overflow: hidden; background-color: #ebebeb; } .ax-break-text { display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; box-sizing: border-box; line-height: calc(28px + 1px); } .ax-break-text .ax-left, .ax-break-text .ax-right { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; height: 1px; overflow: hidden; background-color: #ebebeb; margin-top: calc(28px / 2); } .ax-break-text span { color: #b3b3b3; margin: auto 14px; } .ax-break-text.ax-align-left .ax-left { -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: 0; box-flex: 0; width: calc(38px); } .ax-break-text.ax-align-right .ax-right { -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: 0; box-flex: 0; width: calc(38px); } /*headline*/ .ax-headline { text-align: center; margin: calc(14px*2) auto; position: relative; } .ax-headline .ax-body { font-size: 22px; line-height: 22px; } .ax-headline .ax-title { color: #333333; position: relative; } .ax-headline .ax-title:before { content: ''; width: 22px; height: 2px; background-color: #333333; overflow: hidden; position: absolute; left: calc(-12px - 22px); top: 11px; } .ax-headline .ax-title:after { content: ''; width: 22px; height: 2px; background-color: #333333; overflow: hidden; position: absolute; right: calc(-12px - 22px); top: calc(22px / 2 + 1px); } .ax-headline .ax-adorn { font-size: 12px; color: #b3b3b3; line-height: 18px; margin-bottom: 10px; } .ax-headline .ax-des { font-size: 14px; color: #666666; line-height: 18px; margin-top: 10px; } .ax-headline.ax-align-left .ax-title:before, .ax-headline.ax-align-left .ax-title:after, .ax-headline.ax-align-right .ax-title:before, .ax-headline.ax-align-right .ax-title:after { display: none; } .ax-headline.ax-align-left { padding-left: 14px; } .ax-headline.ax-align-left:before { content: ''; width: 3px; height: 100%; background-color: #333333; overflow: hidden; position: absolute; left: 0; top: 0; } .ax-headline.ax-align-right { padding-right: 14px; } .ax-headline.ax-align-right:after { content: ''; width: 3px; height: 100%; background-color: #333333; overflow: hidden; position: absolute; right: 0; top: 0; } .ax-headline.ax-sm .ax-body { font-size: 18px; line-height: 18px; } .ax-headline.ax-sm .ax-title:before, .ax-headline.ax-sm .ax-title:after { width: 18px; top: calc(18px / 2 + 1px); } .ax-headline.ax-sm .ax-title:before { left: calc(-8px - 18px); } .ax-headline.ax-sm .ax-title:after { right: calc(-8px - 18px); } .ax-headline.ax-lg .ax-body { font-size: calc(28px + 4px); line-height: calc(28px + 4px); } .ax-headline.ax-lg .ax-title:before, .ax-headline.ax-lg .ax-title:after { width: 28px; top: calc((28px + 4px) / 2 + 1px); } .ax-headline.ax-lg .ax-title:before { left: calc(-14px - 28px); } .ax-headline.ax-lg .ax-title:after { right: calc(-14px - 28px); } .ax-headline.ax-primary .ax-title { color: #198cff; } .ax-headline.ax-primary .ax-title:before, .ax-headline.ax-primary .ax-title:after { background-color: #d7e7f5; } .ax-headline.ax-secondary .ax-title { color: #475b66; } .ax-headline.ax-secondary .ax-title:before, .ax-headline.ax-secondary .ax-title:after { background-color: #dfe3e5; } .ax-headline.ax-success .ax-title { color: #41a358; } .ax-headline.ax-success .ax-title:before, .ax-headline.ax-success .ax-title:after { background-color: #e1f0e5; } .ax-headline.ax-danger .ax-title { color: #dc3545; } .ax-headline.ax-danger .ax-title:before, .ax-headline.ax-danger .ax-title:after { background-color: #f0dddf; } .ax-headline.ax-warning .ax-title { color: #ffc107; } .ax-headline.ax-warning .ax-title:before, .ax-headline.ax-warning .ax-title:after { background-color: #f5edd7; } .ax-headline.ax-info .ax-title { color: #14ccc9; } .ax-headline.ax-info .ax-title:before, .ax-headline.ax-info .ax-title:after { background-color: #cef0f0; } .ax-headline.ax-ad .ax-title { color: #ff8400; } .ax-headline.ax-ad .ax-title:before, .ax-headline.ax-ad .ax-title:after { background-color: #f5e7d7; } .ax-headline.ax-align-left .ax-title, .ax-headline.ax-align-right .ax-title { color: #333333; } .ax-headline.ax-align-left.ax-primary:before, .ax-headline.ax-align-right.ax-primary:after { background-color: #198cff; } .ax-headline.ax-align-left.ax-secondary:before, .ax-headline.ax-align-right.ax-secondary:after { background-color: #475b66; } .ax-headline.ax-align-left.ax-success:before, .ax-headline.ax-align-right.ax-success:after { background-color: #41a358; } .ax-headline.ax-align-left.ax-danger:before, .ax-headline.ax-align-right.ax-danger:after { background-color: #dc3545; } .ax-headline.ax-align-left.ax-warning:before, .ax-headline.ax-align-right.ax-warning:after { background-color: #ffc107; } .ax-headline.ax-align-left.ax-info:before, .ax-headline.ax-align-right.ax-info:after { background-color: #14ccc9; } .ax-headline.ax-align-left.ax-ad:before, .ax-headline.ax-align-right.ax-ad:after { background-color: #ff8400; } .ax-headline.ax-style-simple .ax-title:before, .ax-headline.ax-style-simple .ax-title:after { display: none; } .ax-headline.ax-style-dash .ax-title:before, .ax-headline.ax-style-dash .ax-title:after { display: none; } .ax-headline.ax-style-dash { margin-bottom: calc(14px*4); } .ax-headline.ax-style-dash:after { content: ''; width: 22px; height: 2px; background-color: #333333; overflow: hidden; transform: translate(-50%, 0); position: absolute; left: 50%; bottom: calc(-14px*2); } .ax-headline.ax-style-underline .ax-title:after { display: none; } .ax-headline.ax-style-underline .ax-title:before { width: 100%; height: 6px; background-color: #ffc107; right: auto; left: 0; top: auto; bottom: -2px; } .ax-headline.ax-style-underline .ax-title i { position: relative; } .ax-headline.ax-style-tab { text-align: left; line-height: 38px; } .ax-headline.ax-style-tab .ax-body { line-height: 38px; display: flex; justify-content: flex-start; align-items: center; } .ax-headline.ax-style-tab .ax-title:before, .ax-headline.ax-style-tab .ax-title:after { display: none; } .ax-headline.ax-style-tab .ax-more { margin-left: calc(14px*2); } .ax-headline.ax-style-tab .ax-des { margin-top: 0; } .ax-headline.ax-style-tab .ax-body .ax-des { margin-left: 14px; } .ax-headline.ax-style-tab .ax-body .ax-badge, .ax-headline.ax-style-tab .ax-body .ax-dot { margin-left: 8px; } /*align*/ .ax-align-left { text-align: left!important; } .ax-align-right { text-align: right!important; } .ax-align-center { text-align: center!important; } .ax-align-left-center { display: flex; justify-content: flex-start; align-items: center; } .ax-align-right-center { display: flex; justify-content: flex-end; align-items: center ; } .ax-align-top-center { display: flex; justify-content: center; align-items: flex-start; } .ax-align-origin, .ax-align-center-center { display: flex; align-items: center; justify-content: center; } .ax-align-bottom-center { display: flex; justify-content: center; align-items: flex-end; } .ax-align-top-left { display: flex; justify-content: flex-start; align-items: flex-start; } .ax-align-top-center { display: flex; justify-content: center; align-items: flex-start; } .ax-align-top-right { display: flex; justify-content: flex-end; align-items: flex-start; } .ax-align-bottom-left { display: flex; justify-content: flex-start; align-items: flex-end; } .ax-align-bottom-center { display: flex; justify-content: center; align-items: flex-end; } .ax-align-bottom-right { display: flex; justify-content: flex-end; align-items: flex-end; } .ax-float-left { float: left; } .ax-float-right { float: right; } /*basic animate*/ @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ax-rotate-360 { animation: rotate360 2s linear infinite; } .ax-rotate-180 { transform: rotate(-180deg); } .ax-rotate-90 { transform: rotate(-90deg); } .ax-rotate-45 { transform: rotate(-45deg); } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } .ax-bounce-in { animation-duration: 1s; animation-fill-mode: both; animation-name: bounceIn; } @keyframes bounceInOut { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 12% { transform: scale3d(1.1, 1.1, 1.1); } 24% { transform: scale3d(0.9, 0.9, 0.9); } 36% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 48% { transform: scale3d(0.97, 0.97, 0.97); } 60% { opacity: 1; transform: scale3d(1, 1, 1); } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } .ax-bounce-inout { animation-duration: 1.5s; animation-fill-mode: both; animation-name: bounceInOut; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .ax-fade-in { animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeIn; } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .ax-fade-inup { animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeInUp; } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .ax-fade-indown { animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeInDown; } @keyframes springIn { 0% { transform: scale(0.7); } 45% { transform: scale(1.05); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } } .ax-spring-in { animation-duration: 0.3s; animation-fill-mode: both; animation-name: springIn; } @keyframes scaleOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } } .ax-scale-out { animation-duration: 0.2s; animation-fill-mode: both; animation-name: scaleOut; } /*width height 100%*/ .ax-full-width { width: 100%; } .ax-full-height { height: 100%; } .ax-full-all { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; } .ax-full-main { box-sizing: border-box; padding: 14px; height: 100%; width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } /*grid layout*/ .ax-grid { width: 100%; box-sizing: border-box; margin: 0 auto; } .ax-grid-inner { box-sizing: border-box; zoom: 1; margin: auto 0; } .ax-grid-inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ax-grid-block { float: left; padding: 0; box-sizing: border-box; } .ax-grid.ax-space-0 { margin: 0 auto; } .ax-grid.ax-space-0 .ax-grid-inner { margin: auto 0; } .ax-grid.ax-space-0 .ax-grid-block { padding: 0; } .ax-grid.ax-space-xxs { margin: calc(-4px/2) auto; } .ax-grid.ax-space-xxs .ax-grid-inner { margin: auto calc(-4px/2); } .ax-grid.ax-space-xxs .ax-grid-block { padding: calc(4px/2) calc(4px/2); } .ax-grid.ax-space-xs { margin: calc(-8px/2) auto; } .ax-grid.ax-space-xs .ax-grid-inner { margin: auto calc(-8px/2); } .ax-grid.ax-space-xs .ax-grid-block { padding: calc(8px/2) calc(8px/2); } .ax-grid.ax-space-sm { margin: calc(-10px/2) auto; } .ax-grid.ax-space-sm .ax-grid-inner { margin: auto calc(-12px/2); } .ax-grid.ax-space-sm .ax-grid-block { padding: calc(10px/2) calc(12px/2); } .ax-grid.ax-space-md, .ax-grid.ax-space { margin: calc(-14px/2) auto; } .ax-grid.ax-space-md .ax-grid-inner, .ax-grid.ax-space .ax-grid-inner { margin: auto calc(-14px/2); } .ax-grid.ax-space-md .ax-grid-block, .ax-grid.ax-space .ax-grid-block { padding: calc(14px/2) calc(14px/2); } .ax-grid.ax-space-lg { margin: calc(-18px/2) auto; } .ax-grid.ax-space-lg .ax-grid-inner { margin: auto calc(-16px/2); } .ax-grid.ax-space-lg .ax-grid-block { padding: calc(18px/2) calc(16px/2); } .ax-grid.ax-space-xl { margin: calc(-22px/2) auto; } .ax-grid.ax-space-xl .ax-grid-inner { margin: auto calc(-22px/2); } .ax-grid.ax-space-xl .ax-grid-block { padding: calc(22px/2) calc(22px/2); } .ax-grid.ax-space-xxl { margin: calc(-28px/2) auto; } .ax-grid.ax-space-xxl .ax-grid-inner { margin: auto calc(-28px/2); } .ax-grid.ax-space-xxl .ax-grid-block { padding: calc(28px/2) calc(28px/2); } .ax-grid-table { width: 100%; overflow: hidden; box-sizing: border-box; zoom: 1; border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; } .ax-grid-table .ax-grid-block { padding: 0; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .ax-grid-table:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*flex layout*/ .ax-flex-row { display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; box-sizing: border-box; } .ax-flex-flex { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; width: 100%; box-sizing: border-box; } .ax-flex-col { display: -moz-box; display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; height: 100%; box-sizing: border-box; } .ax-flex-block, .ax-flex-block-1 { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-flex-block-2 { -webkit-box-flex: 2; -moz-box-flex: 2; -ms-flex: 2; box-flex: 2; position: relative; } .ax-flex-block-3 { -webkit-box-flex: 3; -moz-box-flex: 3; -ms-flex: 3; box-flex: 3; position: relative; } .ax-flex-block-4 { -webkit-box-flex: 4; -moz-box-flex: 4; -ms-flex: 4; box-flex: 4; position: relative; } .ax-flex-block-5 { -webkit-box-flex: 5; -moz-box-flex: 5; -ms-flex: 5; box-flex: 5; position: relative; } .ax-flex-block-6 { -webkit-box-flex: 6; -moz-box-flex: 6; -ms-flex: 6; box-flex: 6; position: relative; } @-moz-document url-prefix() { .ax-with-flexigrid { overflow: hidden; /*hack firefox flexigrid*/ } .ax-flex-block { min-width: 0; /*hack firefox ellipsis*/ } } .ax-noflex-block { -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: 0 auto; box-flex: 0; position: relative; } /*grid layout*/ .ax-row { box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; zoom: 1; } .ax-col { display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; min-width: 0; position: relative; } .ax-col-1 { width: calc((100%/24)*1); } _:-ms-lang(x), .ax-col-1 { width: 4.166666%; } .ax-col-2 { width: calc((100%/24)*2); } .ax-col-3 { width: calc((100%/24)*3); } _:-ms-lang(x), .ax-col-3 { width: 12.5%; } .ax-col-4 { width: calc((100%/24)*4); } _:-ms-lang(x), .ax-col-4 { width: 16.66666%; } .ax-col-5 { width: calc((100%/24)*5); } .ax-col-6 { width: calc((100%/24)*6); } .ax-col-7 { width: calc((100%/24)*7); } _:-ms-lang(x), .ax-col-7 { width: 29.166666%; } .ax-col-8 { width: calc((100%/24)*8); } .ax-col-9 { width: calc((100%/24)*9); } .ax-col-10 { width: calc((100%/24)*10); } .ax-col-11 { width: calc((100%/24)*11); } .ax-col-12 { width: calc((100%/24)*12); } .ax-col-13 { width: calc((100%/24)*13); } .ax-col-14 { width: calc((100%/24)*14); } .ax-col-15 { width: calc((100%/24)*15); } .ax-col-16 { width: calc((100%/24)*16); } .ax-col-17 { width: calc((100%/24)*17); } .ax-col-18 { width: calc((100%/24)*18); } .ax-col-19 { width: calc((100%/24)*19); } .ax-col-20 { width: calc((100%/24)*20); } .ax-col-21 { width: calc((100%/24)*21); } .ax-col-22 { width: calc((100%/24)*22); } .ax-col-23 { width: calc((100%/24)*23); } .ax-col-24 { width: calc((100%/24)*24); } .ax-col-1-avg { width: calc(100%/1); } .ax-col-2-avg { width: calc(100%/2); } .ax-col-3-avg { width: calc(100%/3); } .ax-col-4-avg { width: calc(100%/4); } .ax-col-5-avg { width: calc(100%/5); } .ax-col-6-avg { width: calc(100%/6); } _:-ms-lang(x), .ax-col-6-avg { width: 16.66666%; } .ax-col-7-avg { width: calc(100%/7); } _:-ms-lang(x), .ax-col-7-avg { width: 14.2857%; } .ax-col-8-avg { width: calc(100%/8); } _:-ms-fullscreen, :root .ax-col-8-avg { width: 12.4999%; } .ax-col-9-avg { width: calc(100%/9); } _:-ms-fullscreen, :root .ax-col-9-avg { width: 11.111%; } .ax-col-10-avg { width: calc(100%/10); } .ax-col-11-avg { width: calc(100%/11); } _:-ms-fullscreen, :root .ax-col-11-avg { width: 9.090909%; } .ax-col-12-avg { width: calc(100%/12); } /*color background*/ .ax-color-primary, .ax-color-primary [class*="font"], .ax-color-primary svg { color: #198cff; fill: #198cff; } .ax-color-secondary, .ax-color-secondary [class*="font"], .ax-color-secondary svg { color: #475b66; fill: #475b66; } .ax-color-success, .ax-color-success [class*="font"], .ax-color-success svg { color: #41a358; fill: #41a358; } .ax-color-danger, .ax-color-danger [class*="font"], .ax-color-danger svg { color: #dc3545; fill: #dc3545; } .ax-color-warning, .ax-color-warning [class*="font"], .ax-color-warning svg { color: #ffc107; fill: #ffc107; } .ax-color-info, .ax-color-info [class*="font"], .ax-color-info svg { color: #14ccc9; fill: #14ccc9; } .ax-color-ad, .ax-color-ad [class*="font"], .ax-color-ad svg { color: #ff8400; fill: #ff8400; } .ax-color-title, .ax-color-title [class*="font"], .ax-color-title svg { color: #333333; fill: #333333; } .ax-color-des, .ax-color-des [class*="font"], .ax-color-des svg { color: #666666; fill: #666666; } .ax-color-ignore, .ax-color-ignore [class*="font"], .ax-color-ignore svg { color: #b3b3b3; fill: #b3b3b3; } .ax-color-forbid, .ax-color-forbid [class*="font"], .ax-color-forbid svg { color: #b3b3b3; fill: #b3b3b3; cursor: not-allowed; } .ax-color-white, .ax-color-white [class*="font"], .ax-color-white svg { color: #fff; fill: #fff; } .ax-bg-primary, .ax-avatar.ax-bg-primary { background-color: #198cff; color: #fff; } .ax-bg-secondary, .ax-avatar.ax-bg-secondary { background-color: #475b66; color: #fff; } .ax-bg-success, .ax-avatar.ax-bg-success { background-color: #41a358; color: #fff; } .ax-bg-danger, .ax-avatar.ax-bg-danger { background-color: #dc3545; color: #fff; } .ax-bg-warning, .ax-avatar.ax-bg-warning { background-color: #ffc107; color: #333333; } .ax-bg-info, .ax-avatar.ax-bg-info { background-color: #14ccc9; color: #fff; } .ax-bg-ad, .ax-avatar.ax-bg-ad { background-color: #ff8400; color: #fff; } .ax-bg-title, .ax-avatar.ax-bg-title { background-color: #333333; color: #fff; } .ax-bg-des, .ax-avatar.ax-bg-des { background-color: #666666; color: #fff; } .ax-bg-ignore, .ax-avatar.ax-bg-ignore { background-color: #b3b3b3; } .ax-bg-white, .ax-avatar.ax-bg-white { background-color: #fff; } .ax-bglit-primary, .ax-avatar.ax-bglit-primary { background-color: #f0f7ff; color: #0b72da; } .ax-bglit-secondary, .ax-avatar.ax-bglit-secondary { background-color: #f5f8fa; color: #383e42; } .ax-bglit-success, .ax-avatar.ax-bglit-success { background-color: #edfaf0; color: #3b7649; } .ax-bglit-danger, .ax-avatar.ax-bglit-danger { background-color: #fff0f1; color: #b22c39; } .ax-bglit-warning, .ax-avatar.ax-bglit-warning { background-color: #fffaeb; color: #333333; } .ax-bglit-info, .ax-avatar.ax-bglit-info { background-color: #ebfaf9; color: #189593; } .ax-bglit-ad, .ax-avatar.ax-bglit-ad { background-color: #fff5eb; color: #c2690a; } .ax-bglit-title, .ax-avatar.ax-bglit-title { background-color: #f5f5f5; color: #333333; } /*gradient bg*/ .ax-bg-primary.ax-gradient-0 { background: linear-gradient(0deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient, .ax-gradient, .ax-bg-primary.ax-gradient-45 { background: linear-gradient(45deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-90 { background: linear-gradient(90deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-135 { background: linear-gradient(135deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-180 { background: linear-gradient(180deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-225 { background: linear-gradient(225deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-270 { background: linear-gradient(270deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-315 { background: linear-gradient(315deg, #198cff, #6619ff); } .ax-bg-primary.ax-gradient-360 { background: linear-gradient(360deg, #198cff, #6619ff); } .ax-bg-secondary.ax-gradient-0 { background: linear-gradient(0deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient, .ax-bg-secondary.ax-gradient-45 { background: linear-gradient(45deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-90 { background: linear-gradient(90deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-135 { background: linear-gradient(135deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-180 { background: linear-gradient(180deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-225 { background: linear-gradient(225deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-270 { background: linear-gradient(270deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-315 { background: linear-gradient(315deg, #475b66, #63a0be); } .ax-bg-secondary.ax-gradient-360 { background: linear-gradient(360deg, #475b66, #63a0be); } .ax-bg-success.ax-gradient-0 { background: linear-gradient(0deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient, .ax-bg-success.ax-gradient-45 { background: linear-gradient(45deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-90 { background: linear-gradient(90deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-135 { background: linear-gradient(135deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-180 { background: linear-gradient(180deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-225 { background: linear-gradient(225deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-270 { background: linear-gradient(270deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-315 { background: linear-gradient(315deg, #41a358, #b2d956); } .ax-bg-success.ax-gradient-360 { background: linear-gradient(360deg, #41a358, #b2d956); } .ax-bg-danger.ax-gradient-0 { background: linear-gradient(0deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient, .ax-bg-danger.ax-gradient-45 { background: linear-gradient(45deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-90 { background: linear-gradient(90deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-135 { background: linear-gradient(135deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-180 { background: linear-gradient(180deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-225 { background: linear-gradient(225deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-270 { background: linear-gradient(270deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-315 { background: linear-gradient(315deg, #dc3545, #ffc000); } .ax-bg-danger.ax-gradient-360 { background: linear-gradient(360deg, #dc3545, #ffc000); } .ax-bg-warning.ax-gradient-0 { background: linear-gradient(0deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient, .ax-bg-warning.ax-gradient-45 { background: linear-gradient(45deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-90 { background: linear-gradient(90deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-135 { background: linear-gradient(135deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-180 { background: linear-gradient(180deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-225 { background: linear-gradient(225deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-270 { background: linear-gradient(270deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-315 { background: linear-gradient(315deg, #ffc107, #ffde7a); } .ax-bg-warning.ax-gradient-360 { background: linear-gradient(360deg, #ffc107, #ffde7a); } .ax-bg-info.ax-gradient-0 { background: linear-gradient(0deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient, .ax-bg-info.ax-gradient-45 { background: linear-gradient(45deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-90 { background: linear-gradient(90deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-135 { background: linear-gradient(135deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-180 { background: linear-gradient(180deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-225 { background: linear-gradient(225deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-270 { background: linear-gradient(270deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-315 { background: linear-gradient(315deg, #14ccc9, #2c7be6); } .ax-bg-info.ax-gradient-360 { background: linear-gradient(360deg, #14ccc9, #2c7be6); } .ax-bg-ad.ax-gradient-0 { background: linear-gradient(0deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient, .ax-bg-ad.ax-gradient-45 { background: linear-gradient(45deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-90 { background: linear-gradient(90deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-135 { background: linear-gradient(135deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-180 { background: linear-gradient(180deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-225 { background: linear-gradient(225deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-270 { background: linear-gradient(270deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-315 { background: linear-gradient(315deg, #ff8400, #ffdd23); } .ax-bg-ad.ax-gradient-360 { background: linear-gradient(360deg, #ff8400, #ffdd23); } /*svg loading*/ .ax-loading { height: 28px; width: 28px; margin: auto; } .ax-loading svg { transform-origin: center center; animation: rotate360 2s linear infinite; height: 100%; width: 100%; } .ax-loading circle { fill: none; stroke-width: 2px; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: loading-dash 1.5s ease-in-out infinite, loading-color 6s ease-in-out infinite; stroke-linecap: round; } @keyframes loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes loading-color { 100%, 0% { stroke: #dc3545; } 40% { stroke: #198cff; } 66% { stroke: #ff8400; } 80%, 90% { stroke: #41a358; } } .ax-loading i { animation: rotate360 1s linear infinite; background: transparent; box-sizing: border-box; border: 2px solid rgba(25, 140, 255, 0.2); border-bottom-color: #198cff; border-radius: 50%; height: 100%; width: 100%; } .ax-loading.ax-white i { border-color: rgba(255, 255, 255, 0.2); border-bottom-color: #fff; } /*loading btn*/ .ax-btn-loading { width: 14px; height: 14px; margin-right: 4px; background-repeat: no-repeat; background-position: center; background-size: 14px auto; background-image: url(../images/loading.svg); } .ax-btn-loading.ax-gif { background-image: url(../images/loading.gif); } .ax-btn-loading.ax-white, .ax-btn.ax-primary:not(.ax-line) .ax-btn-loading, .ax-btn.ax-seconday:not(.ax-line) .ax-btn-loading, .ax-btn.ax-warning:not(.ax-line) .ax-btn-loading, .ax-btn.ax-info:not(.ax-line) .ax-btn-loading, .ax-btn.ax-danger:not(.ax-line) .ax-btn-loading, .ax-btn.ax-suscess:not(.ax-line) .ax-btn-loading, .ax-btn.ax-ad:not(.ax-line) .ax-btn-loading, .ax-btn.ax-black:not(.ax-line) .ax-btn-loading { background-image: url(../images/loading-white.svg); } /*alert*/ .ax-alert { font-size: 14px; color: #c8990b; line-height: 18px; background-color: #fffaeb; border: 1px solid #f5edd7; border-radius: 3px; padding: 8px 14px; position: relative; } .ax-alert .ax-close { font-family: arial; font-size: 22px; line-height: 34px; width: 34px; height: 34px; text-align: center; color: rgba(0, 0, 0, 0.2); text-decoration: none; position: absolute; right: 0; top: 0; transition: all 0.2s linear; } .ax-alert .ax-close:before { content: "\00D7"; width: 34px; height: 34px; } .ax-alert .ax-close:hover { color: rgba(0, 0, 0, 0.3); } .ax-alert .ax-title { font-weight: bold; margin-bottom: 4px; } .ax-alert .ax-des { font-size: 12px; } .ax-alert.ax-sm { display: flex; justify-content: flex-start; align-items: flex-start; } .ax-alert.ax-sm [class*='font']:first-child { margin-right: 8px; } .ax-alert.ax-lg { display: flex; justify-content: flex-start; align-items: center; } .ax-alert.ax-lg [class*='font']:first-child { font-size: 28px; margin-right: 14px; } .ax-alert.ax-lg .ax-title { font-size: 14px; } .ax-alert.ax-primary { color: #0b72da; background-color: #f0f7ff; border-color: #d7e7f5; } .ax-alert.ax-secondary { color: #383e42; background-color: #f5f8fa; border-color: #dfe3e5; } .ax-alert.ax-success { color: #3b7649; background-color: #edfaf0; border-color: #e1f0e5; } .ax-alert.ax-danger { color: #b22c39; background-color: #fff0f1; border-color: #f0dddf; } .ax-alert.ax-warning { color: #c8990b; background-color: #fffaeb; border-color: #f5edd7; } .ax-alert.ax-ad { color: #c2690a; background-color: #fff5eb; border-color: #f5e7d7; } .ax-alert.ax-info { color: #189593; background-color: #ebfaf9; border-color: #cef0f0; } .ax-alert.ax-light { color: #666666; background-color: rgba(0, 0, 0, 0.02); border-color: #ebebeb; } .ax-alert.ax-borderless { border: none; } .ax-alert.ax-square { border-radius: 0; } /*tag*/ .ax-tag { display: inline-flex; justify-content: flex-start; align-items: center; position: relative; padding: 0 10px; border: 1px solid #ebebeb; border-radius: 3px; font-size: 14px; line-height: 28px; } .ax-tag i { font-family: arial; font-size: 22px; width: 28px; text-align: center; color: rgba(0, 0, 0, 0.2); text-decoration: none; cursor: pointer; margin-right: -10px; transition: all 0.2s linear; } .ax-tag i:before { content: "\00D7"; } .ax-tag i:hover { color: rgba(0, 0, 0, 0.3); } .ax-tag s { font-family: arial; font-size: 14px; cursor: pointer; color: #b3b3b3; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 16px; text-decoration: none; background-color: #f0f0f0; transition: all 0.2s linear; position: absolute; right: -8px; top: -8px; } .ax-tag s:before { content: "\00D7"; } .ax-tag s:hover { color: #666666; } .ax-tag.ax-primary, *.ax-tag.ax-primary:hover { color: #1063b7; background-color: #f0f7ff; border-color: #d7e7f5; } .ax-tag.ax-secondary, *.ax-tag.ax-secondary:hover { color: #2d2e2f; background-color: #f5f8fa; border-color: #dfe3e5; } .ax-tag.ax-success, *.ax-tag.ax-success:hover { color: #355d3f; background-color: #edfaf0; border-color: #e1f0e5; } .ax-tag.ax-danger, *.ax-tag.ax-danger:hover { color: #942c36; background-color: #fff0f1; border-color: #f0dddf; } .ax-tag.ax-warning, *.ax-tag.ax-warning:hover { color: #a6800e; background-color: #fffaeb; border-color: #f5edd7; } .ax-tag.ax-ad, *.ax-tag.ax-ad:hover { color: #a0590e; background-color: #fff5eb; border-color: #f5e7d7; } .ax-tag.ax-info, *.ax-tag.ax-info:hover { color: #187675; background-color: #ebfaf9; border-color: #cef0f0; } .ax-tag.ax-light, *.ax-tag.ax-light:hover { color: #666666; background-color: rgba(0, 0, 0, 0.02); border-color: #ebebeb; } .ax-tag.ax-borderless { border-width: 0; } .ax-tag.ax-square { border-radius: 0; } .ax-tag.ax-round { border-radius: 28px; } /*result*/ .ax-result { font-size: 54px; width: 90px; height: 90px; line-height: 90px; text-align: center; background-repeat: no-repeat; background-position: center; background-size: 54px; margin: auto; display: inline-flex; justify-content: center; align-items: center; } .ax-result *[class*="font"] { font-size: 54px; } .ax-result.ax-success { color: #198cff; } .ax-result.ax-error { color: #dc3545; } .ax-result.ax-warning { color: #ffc107; } .ax-result.ax-info { color: #14ccc9; } .ax-result.ax-question { color: #ff8400; } @keyframes draw-rotate { 100% { stroke-dashoffset: 0; transform: rotate(0deg); } } @keyframes draw-line { 100% { stroke-dashoffset: 0; } } @keyframes draw-circle { 0% { transform: scale(0.7); opacity: 1; } 45% { transform: scale(1.2); opacity: 1; } 80% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } svg .svg-out, svg .svg-in-1:not(.svg-circle), svg .svg-in-2:not(.svg-circle), svg .svg-bg { stroke-width: 3.7253; stroke-linecap: round; stroke-linejoin: round; } svg .svg-line { fill: none; } .svg-success, .svg-error, .svg-warning, .svg-info, .svg-question { width: 54px; height: 54px; opacity: 0; } .svg-success .svg-out { stroke: #198cff; } .svg-success .svg-in-1 { stroke: #198cff; } .svg-success .svg-bg { stroke: #f0f7ff; } .svg-error .svg-out { stroke: #dc3545; } .svg-error .svg-bg { stroke: #fff0f1; } .svg-error .svg-in-1, .svg-error .svg-in-2 { stroke: #dc3545; } .svg-warning .svg-out { stroke: #ffc107; } .svg-warning .svg-in-1 { stroke: #ffc107; } .svg-warning .svg-bg { stroke: #fffaeb; } .svg-warning .svg-circle { fill: #ffc107; } .svg-info .svg-out { stroke: #14ccc9; } .svg-info .svg-in-1 { stroke: #14ccc9; } .svg-info .svg-bg { stroke: #ebfaf9; } .svg-info .svg-circle { fill: #14ccc9; } .svg-question .svg-out { stroke: #ff8400; } .svg-question .svg-in-1 { stroke: #ff8400; } .svg-question .svg-bg { stroke: #fff5eb; } .svg-question .svg-circle { fill: #ff8400; } .svg-success .svg-out { stroke-dasharray: 227 229; stroke-dashoffset: 228; transform-origin: 50% 50%; transform: rotate(-90deg); } .svg-success .svg-in-1 { stroke-dasharray: 49 51; stroke-dashoffset: 50; } .svg-error .svg-out { stroke-dasharray: 227 229; stroke-dashoffset: 228; transform-origin: 50% 50%; transform: rotate(-90deg); } .svg-error .svg-in-1 { stroke-dasharray: 42 44; stroke-dashoffset: -43; } .svg-error .svg-in-2 { stroke-dasharray: 42 44; stroke-dashoffset: -43; } .svg-warning .svg-out { stroke-dasharray: 248 250; stroke-dashoffset: 249; } .svg-warning .svg-in-1 { stroke-dasharray: 30 32; stroke-dashoffset: 31; } .svg-warning .svg-in-2 { opacity: 0; transform-origin: 43.3492px 64.3337px; } .svg-info .svg-out { stroke-dasharray: 227 229; stroke-dashoffset: 228; transform-origin: 50% 50%; transform: rotate(-90deg); } .svg-info .svg-in-1 { stroke-dasharray: 35 37; stroke-dashoffset: -36; } .svg-info .svg-in-2 { opacity: 0; transform-origin: 43.3492px 23.5856px; } .svg-question .svg-out { stroke-dasharray: 227 229; stroke-dashoffset: 228; transform-origin: 50% 50%; transform: rotate(-90deg); } .svg-question .svg-in-1 { stroke-dasharray: 59 61; stroke-dashoffset: 60; } .svg-question .svg-in-2 { opacity: 0; transform-origin: 44.6612px 60.5502px; } .ax-result-show svg, .swal2-show svg { opacity: 1; } /*plugins for sweetalert2*/ .ax-result-show .svg-success .svg-out, .swal2-show .svg-success .svg-out { animation: draw-rotate 800ms ease-out 0ms forwards; } .ax-result-show .svg-success .svg-in-1, .swal2-show .svg-success .svg-in-1 { animation: draw-line 400ms ease-out 800ms forwards; } .ax-result-show .svg-error .svg-out, .swal2-show .svg-error .svg-out { animation: draw-rotate 800ms ease-out 0ms forwards; } .ax-result-show .svg-error .svg-in-1, .swal2-show .svg-error .svg-in-1 { animation: draw-line 400ms ease-out 800ms forwards; } .ax-result-show .svg-error .svg-in-2, .swal2-show .svg-error .svg-in-2 { animation: draw-line 400ms ease-out 1200ms forwards; } .ax-result-show .svg-warning .svg-out, .swal2-show .svg-warning .svg-out { animation: draw-line 800ms ease-out 0ms forwards; } .ax-result-show .svg-warning .svg-in-1, .swal2-show .svg-warning .svg-in-1 { animation: draw-line 400ms ease-out 800ms forwards; } .ax-result-show .svg-warning .svg-in-2, .swal2-show .svg-warning .svg-in-2 { animation: draw-circle 400ms ease-out 1200ms forwards; } .ax-result-show .svg-info .svg-out, .swal2-show .svg-info .svg-out { animation: draw-rotate 800ms ease-out 0ms forwards; } .ax-result-show .svg-info .svg-in-1, .swal2-show .svg-info .svg-in-1 { animation: draw-line 400ms ease-out 1200ms forwards; } .ax-result-show .svg-info .svg-in-2, .swal2-show .svg-info .svg-in-2 { animation: draw-circle 400ms ease-out 800ms forwards; } .ax-result-show .svg-question .svg-out, .swal2-show .svg-question .svg-out { animation: draw-rotate 800ms ease-out 0ms forwards; } .ax-result-show .svg-question .svg-in-1, .swal2-show .svg-question .svg-in-1 { animation: draw-line 400ms ease-out 800ms forwards; } .ax-result-show .svg-question .svg-in-2, .swal2-show .svg-question .svg-in-2 { animation: draw-circle 400ms ease-out 1200ms forwards; } /*tips before*/ .ax-ace { width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 100%; color: #fff; font-family: arial; font-size: 12px; vertical-align: middle; } .ax-ace-success { background-color: #198cff; } .ax-ace-success:before { content: '\221A'; } .ax-ace-error { background-color: #dc3545; } .ax-ace-error:before { content: '\00D7'; } .ax-ace-warning { background-color: #ffc107; } .ax-ace-warning:before { content: '\0021'; } .ax-ace-info { background-color: #14ccc9; } .ax-ace-info:before { content: '\0069'; } .ax-ace-question { background-color: #ff8400; } .ax-ace-question:before { content: '\003F'; } /*menu*/ .ax-menu { width: 220px; display: block; box-sizing: border-box; } .ax-menu .ax-collapse { overflow: hidden; transition: all 0.2s ease-out; } .ax-menu .ax-collapse:not(.ax-show) { height: 0px; } .ax-menu .ax-collapsing { position: relative; height: 0; overflow: hidden; transition: all 0.2s ease-out; } .ax-menu li { box-sizing: border-box; position: relative; transition: all 0.2s ease-out; } .ax-menu > li { border-bottom: none; } .ax-menu.ax-menu-dark > li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ax-menu > li:before { content: ''; width: 3px; height: 0; background-color: #198cff; position: absolute; left: 0; top: 0; z-index: 2; transition: all 0.2s ease-out; } .ax-menu li a { color: #333333; height: 44px; line-height: 44px; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; position: relative; transition: all 0.2s linear; } .ax-menu.ax-menu-dark li a { color: rgba(255, 255, 255, 0.5); } .ax-menu > li > a { padding-left: 14px; } /*level 1*/ .ax-menu > li > ul > li > a { padding-left: calc(14px*3); } /*level 2*/ .ax-menu > li > ul > li > ul > li > a { padding-left: calc(14px*5); } /*level 3*/ .ax-menu > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*7); } /*level 4*/ .ax-menu > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*9); } /*level 5*/ .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*11); } /*level 6*/ .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*13); } /*level 7*/ .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*15); } /*level 8*/ .ax-menu .ax-name { line-height: 18px; display: flex; justify-content: flex-start; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; transition: all 0.2s linear; } .ax-menu .ax-legend { color: #666666; width: 24px; text-align: center; margin-right: 4px; transition: all 0.2s linear; } .ax-menu.ax-menu-dark .ax-legend { color: rgba(255, 255, 255, 0.5); } .ax-menu .ax-badge { margin-right: 14px; margin-top: calc(22px - 8px); } .ax-menu .ax-dot { margin-right: 14px; margin-top: calc(22px - 3px); } .ax-menu .ax-arrow { width: 38px; text-align: center; color: #ccc; font-size: 12px; transition: all 0.2s linear; } .ax-menu span.ax-dot:nth-last-child(2), .ax-menu span.ax-badge:nth-last-child(2) { margin-right: 0; } .ax-menu.ax-menu-dark .ax-arrow { color: rgba(255, 255, 255, 0.2); } .ax-menu .ax-active > a > .ax-arrow, .ax-menu *[aria-expanded="true"] > .ax-arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .ax-menu .ax-active { background: transparent; } .ax-menu.ax-menu-dark .ax-active { background-color: rgba(0, 0, 0, 0.1); } .ax-menu .ax-active:before { height: 100%; } .ax-menu li:hover > a .ax-name, .ax-menu li:hover > a .ax-legend, .ax-menu li:hover > a .ax-arrow { color: #198cff; } .ax-menu > li > a .ax-name { font-weight: bold; } .ax-menu.ax-menu-dark > li > a .ax-name { font-weight: normal; } .ax-menu.ax-menu-dark li:hover > a .ax-name, .ax-menu.ax-menu-dark li:hover > a .ax-legend, .ax-menu.ax-menu-dark li:hover > a .ax-arrow { color: #fff; } .ax-menu li:hover > a[aria-disabled="true"] .ax-name, .ax-menu li:hover > a[aria-disabled="true"] .ax-legend { color: #b3b3b3; } .ax-menu li:hover > a[aria-disabled="true"] .ax-arrow { color: #ccc; } .ax-menu.ax-menu-dark li:hover > a[aria-disabled="true"] .ax-name, .ax-menu.ax-menu-dark li:hover > a[aria-disabled="true"] .ax-legend, .ax-menu.ax-menu-dark li:hover > a[aria-disabled="true"] .ax-arrow { color: rgba(255, 255, 255, 0.5); } .ax-menu *[aria-expanded="true"], .ax-menu *[aria-expanded="true"] .ax-legend { color: #333333; } .ax-menu *[aria-disabled="true"], .ax-menu *[aria-disabled="true"] .ax-legend { color: #b3b3b3; } .ax-menu.ax-menu-dark *[aria-expanded="true"], .ax-menu.ax-menu-dark *[aria-expanded="true"] .ax-legend { color: rgba(255, 255, 255, 0.5); } .ax-menu.ax-menu-dark *[aria-disabled="true"], .ax-menu.ax-menu-dark *[aria-disabled="true"] .ax-legend { color: #fff; } .ax-menu a[aria-expanded="childless"] { color: #198cff; background-color: rgba(25, 140, 255, 0.06); } .ax-menu.ax-menu-dark a[aria-expanded="childless"] { color: #198cff; background-color: rgba(25, 140, 255, 0.1); } .ax-menu a[aria-expanded="childless"] .ax-legend { color: #198cff; } .ax-menu li:hover > a[aria-expanded="childless"] .ax-name, .ax-menu li:hover > a[aria-expanded="childless"] .ax-legend { color: #198cff; } /*menu style*/ .ax-menu.ax-full { width: 100%; } .ax-menu.ax-no-padding > li:before { display: none; } .ax-menu.ax-no-padding > li > a { padding-left: 0; } .ax-menu.ax-no-padding > li > ul > li > a { padding-left: calc(14px*2); } .ax-menu.ax-no-padding > li > ul > li > ul > li > a { padding-left: calc(14px*4); } .ax-menu.ax-no-padding > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*6); } .ax-menu.ax-no-padding > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*7); } .ax-menu.ax-no-padding > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*10); } .ax-menu.ax-no-padding > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*12); } .ax-menu.ax-no-padding > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: calc(14px*14); } .ax-menu.ax-style-dot > li:before, .ax-menu.ax-style-dot > li > a:before { display: none; } .ax-menu.ax-style-dot a[aria-expanded="childless"]:before { width: 5px; height: 5px; border-radius: 100%; background-color: #198cff; content: ''; position: absolute; left: calc(14px*2 - 4px); top: calc((44px - 5px)/2); } .ax-menu.ax-style-dot > li > a[aria-expanded="childless"]:before { display: none; } .ax-menu.ax-no-padding.ax-style-dot a[aria-expanded="childless"]:before { left: calc(14px - 4px); } .ax-menu.ax-style-dot > li:before { display: none; } .ax-menu.ax-style-line > li:before { display: none; } .ax-menu.ax-style-line a[aria-expanded="childless"]:before { position: absolute; background-color: #198cff; content: ''; width: 2px; height: 100%; left: 0; top: 0; } /*menu row*/ .ax-menu.ax-menu-row { display: inline-block; width: auto; z-index: 4; } .ax-menu.ax-menu-row li { position: relative; } .ax-menu.ax-menu-row ul { width: 100%; position: absolute; background-color: #fff; box-size: border-box; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .ax-menu.ax-menu-row ul > li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px; } .ax-menu.ax-menu-row ul > li:last-child > a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .ax-menu.ax-menu-row .ax-collapse { overflow: inherit; } .ax-menu.ax-menu-row .ax-collapse:not(.ax-show) { display: none; } .ax-menu.ax-menu-row > li { display: inline-block; box-sizing: border-box; width: 180px; } .ax-menu.ax-menu-row > li li { text-align: left; } .ax-menu.ax-menu-row > li::before { display: none; } .ax-menu.ax-menu-row > li > a > .ax-arrow { transform: rotate(90deg); } .ax-menu.ax-menu-row > li > [aria-expanded="true"] > .ax-arrow { transform: rotate(270deg); } .ax-menu.ax-menu-row > li > a { display: inline-block; } .ax-menu.ax-menu-row > li > a > span { display: inline-block; box-flex: 0; } .ax-menu.ax-menu-row > li > ul { left: -1px; top: calc(100% + 6px); box-sizing: border-box; } .ax-menu.ax-menu-row > li > ul:before { width: 100%; height: 6px; content: ""; position: absolute; left: 0; top: -7px; } .ax-menu.ax-menu-row > li > ul > li ul { right: calc(-100% - 1px - 6px); top: -1px; } .ax-menu.ax-menu-row > li > ul > li ul:before { height: 100%; width: 6px; content: ""; position: absolute; left: -7px; top: 0; } .ax-menu.ax-menu-row > li > ul .ax-active > a > .ax-arrow, .ax-menu.ax-menu-row > li > ul [aria-expanded="true"] > .ax-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .ax-menu.ax-menu-row > li > a .ax-name { font-weight: normal; line-height: 38px; } .ax-menu.ax-menu-row li a { line-height: 38px; height: 38px; } .ax-menu.ax-menu-row > li li { border-bottom: 1px solid #ebebeb; padding-left: 0; } .ax-menu.ax-menu-row > li a { padding-left: 14px; } .ax-menu.ax-menu-row > li li:hover { background-color: #fafafa; } .ax-menu.ax-menu-row > li ul li:last-child { border-bottom: 0; } .ax-menu.ax-menu-row a[aria-expanded="childless"], .ax-menu.ax-menu-row a[aria-expanded="childless"]:hover { background-color: #198cff; color: #fff; } .ax-menu.ax-menu-row a[aria-expanded="childless"]:hover .ax-name, .ax-menu.ax-menu-row a[aria-expanded="childless"]:hover .ax-legend, .ax-menu.ax-menu-row a[aria-expanded="childless"]:hover .ax-arrow { color: #fff; } .ax-menu.ax-menu-center > li a, .ax-menu.ax-menu-center > li a { padding-left: 0!important; } .ax-menu.ax-menu-center > li > a, .ax-menu.ax-menu-center > li > a { padding-left: 38px!important; } .ax-menu.ax-menu-center > li { text-align: center; } .ax-menu.ax-menu-center .ax-name { justify-content: center; } .ax-menu.ax-menu-row > li a, .ax-menu > li > a[class*='ax-btn'] { padding-left: 20px; } .ax-menu a[class*='ax-btn'] .ax-arrow { width: auto; } /*dot & badge*/ .ax-dot { width: 8px; height: 8px; border-radius: 100%; background-color: #dc3545; } .ax-dot.ax-primary { background-color: #198cff; } .ax-dot.ax-secondary { background-color: #475b66; } .ax-dot.ax-success { background-color: #41a358; } .ax-dot.ax-danger { background-color: #dc3545; } .ax-dot.ax-warning { background-color: #ffc107; } .ax-dot.ax-info { background-color: #14ccc9; } .ax-dot.ax-ad { background-color: #ff8400; } .ax-dot.ax-light { background-color: #ebebeb; } .ax-dot.ax-dark { background-color: #333333; } .ax-dot.ax-ignore { background-color: #b3b3b3; } .ax-dot.ax-white { background-color: #fff; } .ax-badge { font-family: "微软雅黑", "microsoft yahei", "Arial", "Helvetica Neue", "sans-serif", "宋体", "simsun"; font-weight: normal; font-size: 12px; color: #fff; line-height: 16px; height: 16px; padding: 0 5px; border-radius: 16px; background-color: #dc3545; } .ax-badge.ax-radius { border-radius: 3px; } .ax-badge.ax-drop { border-radius: 16px 16px 16px 0; } .ax-badge.ax-border { color: #dc3545; line-height: 14px; padding: 0 4px; border-width: 1px; border-style: solid; border-color: #dc3545; background: transparent; } .ax-badge.ax-primary { color: #fff; background-color: #198cff; } .ax-badge.ax-border.ax-primary { border-color: #198cff; color: #198cff; background: transparent; } .ax-badge.ax-secondary { color: #fff; background-color: #475b66; } .ax-badge.ax-border.ax-secondary { color: #475b66; border-color: #475b66; background: transparent; } .ax-badge.ax-success { color: #fff; background-color: #41a358; } .ax-badge.ax-border.ax-success { color: #41a358; border-color: #41a358; background: transparent; } .ax-badge.ax-danger { color: #fff; background-color: #dc3545; } .ax-badge.ax-border.ax-danger { color: #dc3545; border-color: #dc3545; background: transparent; } .ax-badge.ax-warning { color: #333333; background-color: #ffc107; } .ax-badge.ax-border.ax-warning { color: #ffc107; border-color: #ffc107; background: transparent; } .ax-badge.ax-info { color: #fff; background-color: #14ccc9; } .ax-badge.ax-border.ax-info { color: #14ccc9; border-color: #14ccc9; background: transparent; } .ax-badge.ax-ad { color: #fff; background-color: #ff8400; } .ax-badge.ax-border.ax-ad { color: #ff8400; border-color: #ff8400; background: transparent; } .ax-badge.ax-light { color: #666666; background-color: #ebebeb; } .ax-badge.ax-border.ax-light { color: #666666; border-color: #ebebeb; background: transparent; } .ax-badge.ax-dark { color: #fff; background-color: #333333; } .ax-badge.ax-border.ax-dark { color: #333333; border-color: #333333; background: transparent; } .ax-badge.ax-ignore { color: #333333; background-color: #b3b3b3; } .ax-badge.ax-border.ax-ignore { color: #b3b3b3; border-color: #b3b3b3; background: transparent; } .ax-badge.ax-white { color: #333333; background-color: #fff; } .ax-badge.ax-border.ax-white { color: #fff; border-color: #fff; background: transparent; } /*flag*/ .ax-flag { font-size: 10px; width: 42px; height: 42px; display: block; overflow: hidden; position: absolute; z-index: 3; } .ax-flag i { color: #fff; height: 60px; width: 60px; line-height: 100px; text-align: center; background-color: #198cff; position: absolute; } .ax-flag.ax-left { left: 0; top: 0; } .ax-flag.ax-left i { top: -30px; left: -30px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .ax-flag.ax-right { right: 0; top: 0; } .ax-flag.ax-right i { top: -30px; right: -30px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .ax-flag.ax-primary i { background-color: #198cff; } .ax-flag.ax-secondary i { background-color: #475b66; } .ax-flag.ax-success i { background-color: #41a358; } .ax-flag.ax-danger i { background-color: #dc3545; } .ax-flag.ax-warning i { color: #333333; background-color: #ffc107; } .ax-flag.ax-info i { background-color: #14ccc9; } .ax-flag.ax-ad i { background-color: #ff8400; } .ax-flag.ax-light i { color: #666666; background-color: #ebebeb; } .ax-flag.ax-dark i { color: #fff; background-color: #333333; } .ax-flag.ax-ignore i { color: #999999; background-color: #f0f0f0; } .ax-flag.ax-white i { color: #333333; background-color: #fff; } /*text*/ h1 { font-family: "Arial", "Helvetica Neue", "sans-serif", "pingfang SC", "Hiragino Sans GB", "微软雅黑", "microsoft yahei", "宋体", "simsun"; font-size: 28px; line-height: calc(28px + 16px); } h2 { font-family: "Arial", "Helvetica Neue", "sans-serif", "pingfang SC", "Hiragino Sans GB", "微软雅黑", "microsoft yahei", "宋体", "simsun"; font-size: 22px; line-height: calc(22px + 12px); } h3 { font-family: "Arial", "Helvetica Neue", "sans-serif", "pingfang SC", "Hiragino Sans GB", "微软雅黑", "microsoft yahei", "宋体", "simsun"; font-size: 18px; line-height: calc(18px + 12px); } h4 { font-size: 16px; } h5 { font-size: 14px; } blockquote { background-color: rgba(94, 140, 186, 0.1); padding: 5px 20px; margin-left: 0; margin-right: 0; margin-bottom: 14px; border-left: 4px solid rgba(94, 140, 186, 0.4); } fieldset { margin: 14px 0; padding: 0 8px; background-color: #fff; border: 1px solid #ebebeb; border-radius: 0; } fieldset legend { font-weight: bold; padding: 0 8px; margin-left: 8px; } fieldset td { padding: 4px; } .ax-article { text-align: left; padding: calc(14px); } .ax-article a:not([class*="ax-btn"]), .ax-article a:not([class*="ax-btn"]):hover { color: #198cff; text-decoration: underline; } .ax-article .ax-cancel, .ax-article a.ax-cancel, .ax-article .ax-cancel a, .ax-article .ax-cancel:hover, .ax-article a.ax-cancel:hover, .ax-article .ax-cancel a:hover { color: #b3b3b3; text-decoration: line-through; margin: 0 4px; cursor: text; } .ax-article a.ax-color-ignore, .ax-article .ax-color-ignore a { color: #b3b3b3; text-decoration: none; } .ax-article a.ax-color-ignore:hover, .ax-article .ax-color-ignore a:hover { color: #b3b3b3; text-decoration: underline; } .ax-article a.ax-color-primary, .ax-article .ax-color-primary a { color: #198cff; text-decoration: none; } .ax-article a.ax-color-primary:hover, .ax-article .ax-color-primary a:hover { color: #198cff; text-decoration: underline; } .ax-article a.ax-color-secondary, .ax-article .ax-color-secondary a { color: #475b66; text-decoration: none; } .ax-article a.ax-color-secondary:hover, .ax-article .ax-color-secondary a:hover { color: #475b66; text-decoration: underline; } .ax-article a.ax-color-success, .ax-article .ax-color-success a { color: #41a358; text-decoration: none; } .ax-article a.ax-color-success:hover, .ax-article .ax-color-success a:hover { color: #41a358; text-decoration: underline; } .ax-article a.ax-color-danger, .ax-article .ax-color-danger a { color: #dc3545; text-decoration: none; } .ax-article a.ax-color-danger:hover, .ax-article .ax-color-danger a:hover { color: #dc3545; text-decoration: underline; } .ax-article a.ax-color-warning, .ax-article .ax-color-warning a { color: #ffc107; text-decoration: none; } .ax-article a.ax-color-warning:hover, .ax-article .ax-color-warning a:hover { color: #ffc107; text-decoration: underline; } .ax-article a.ax-color-info, .ax-article .ax-color-info a { color: #14ccc9; text-decoration: none; } .ax-article a.ax-color-info:hover, .ax-article .ax-color-info a:hover { color: #14ccc9; text-decoration: underline; } .ax-article a.ax-color-ad, .ax-article .ax-color-ad a { color: #ff8400; text-decoration: none; } .ax-article a.ax-color-ad:hover, .ax-article .ax-color-ad a:hover { color: #ff8400; text-decoration: underline; } .ax-article a, .ax-article span { display: inline; } .ax-article img { height: auto!important; width: auto!important; max-width: 100%; } .ax-article video { max-width: 100%; } .ax-article audio { max-width: 100%; } .ax-article ol li { list-style-type: decimal; list-style-position: inside; } .ax-article ul, .ax-article ol { padding-left: calc(14px*3); } .ax-article h2 { border-left: 4px solid rgba(94, 140, 186, 0.4); padding-left: 8px; margin: 14px 0; } .ax-article ul:not(.ax-menu) li { position: relative; padding-left: 14px; } .ax-article ul:not(.ax-menu) li:before { content: ''; position: absolute; left: 0; top: calc(28px/2 - 2px); width: 4px; height: 4px; border-radius: 4px; background-color: #ccc; } /*article alt*/ .ax-good { text-align: center; margin: calc(14px*2) auto; } .ax-good .ax-text { font-size: 12px; color: #666666; width: 100%; line-height: 28px; text-align: center; display: block; position: absolute; left: 0; bottom: -28px; } .ax-good a { line-height: 46px; border-radius: 46px; padding: 0 46px; border: 1px solid #ebebeb; transition: all 0.1s linear; position: relative; } .ax-good a:hover { color: #fff; background-color: #198cff; border-color: #198cff; } .ax-good a *[class*='font'] { font-size: 22px; color: #198cff; margin-right: 8px; transition: all 0.1s linear; } .ax-good-hover a { color: #fff; background-color: #198cff; border-color: #198cff; } .ax-good-hover a *[class*='font'] { color: #fff; } .ax-good a:hover *[class*='font'] { color: #fff; } .ax-good a .num { font-size: 18px; transition: all 0.1s linear; } .ax-good.ax-done a { color: #b3b3b3; } .ax-good.ax-done a *[class*='font'] { color: #b3b3b3; } .ax-good.ax-done a:hover, .ax-good.ax-done a *[class*='font']:hover { color: #b3b3b3; background-color: #fff; border-color: #ebebeb; } /*avatar*/ .ax-avatar { color: #666666; width: 44px; height: 44px; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; border-radius: 3px; box-sizing: border-box; position: relative; display: inline-flex; justify-content: center; align-items: center; text-align: center; } .ax-avatar .ax-dot { box-shadow: 0 0 0 2px #fff; position: absolute; right: -2px; top: -2px; } .ax-avatar .ax-badge { box-shadow: 0 0 0 2px #fff; position: absolute; right: -8px; top: -8px; } .ax-avatar.ax-square { border-radius: 0; } .ax-avatar.ax-round { border-radius: 100%; } .ax-avatar.ax-xxs { font-size: 12px; height: 22px; width: 22px; } .ax-avatar.ax-xs { font-size: 12px; height: calc(38px - 10px); width: calc(38px - 10px); } .ax-avatar.ax-sm { font-size: 14px; height: 38px; width: 38px; } .ax-avatar.ax-md { font-size: 16px; height: 44px; width: 44px; } .ax-avatar.ax-lg { font-size: 18px; height: calc(28px*2); width: calc(28px*2); } .ax-avatar.ax-xl { font-size: 22px; height: calc(28px*3); width: calc(28px*3); } .ax-avatar.ax-xxl { font-size: 32px; height: calc(28px*4); width: calc(28px*4); } /*sign*/ .ax-sign { color: #666666; width: 44px; height: 44px; border-radius: 3px; border: 1px solid #666666; box-sizing: border-box; position: relative; display: inline-flex; justify-content: center; align-items: center; text-align: center; } .ax-sign:hover { color: #666666; text-decoration: none!important; } .ax-sign *[class*="font"] { font-size: 18px; } .ax-sign svg { fill: #666666; height: 18px; width: 18px; } .ax-sign img { height: 18px; width: 18px; } .ax-sign .ax-dot { box-shadow: 0 0 0 2px #fff; position: absolute; right: -2px; top: -2px; } .ax-sign .ax-badge { box-shadow: 0 0 0 2px #fff; position: absolute; right: -8px; top: -8px; } .ax-sign.ax-square { border-radius: 0; } .ax-sign.ax-round { border-radius: 100%; } .ax-sign.ax-borderless { border-width: 0; } .ax-sign.ax-xxs { font-size: 12px; height: 22px; width: 22px; } .ax-sign.ax-xxs *[class*="font"] { font-size: 12px; } .ax-sign.ax-xxs svg { height: 12px; width: 12px; } .ax-sign.ax-xxs img { height: 12px; width: 12px; } .ax-sign.ax-xs { font-size: 14px; height: 28px; width: 28px; } .ax-sign.ax-xs *[class*="font"] { font-size: 14px; } .ax-sign.ax-xs svg { height: 14px; width: 14px; } .ax-sign.ax-xs img { height: 14px; width: 14px; } .ax-sign.ax-sm { font-size: 16px; height: 38px; width: 38px; } .ax-sign.ax-sm *[class*="font"] { font-size: 16px; } .ax-sign.ax-sm svg { height: 16px; width: 16px; } .ax-sign.ax-sm img { height: 16px; width: 16px; } .ax-sign.ax-md { font-size: 18px; height: 44px; width: 44px; } .ax-sign.ax-md *[class*="font"] { font-size: 18px; } .ax-sign.ax-md svg { height: 18px; width: 18px; } .ax-sign.ax-md img { height: 18px; width: 18px; } .ax-sign.ax-lg { font-size: 28px; height: calc(28px*2); width: calc(28px*2); } .ax-sign.ax-lg *[class*="font"] { font-size: 26px; } .ax-sign.ax-lg svg { height: 26px; width: 26px; } .ax-sign.ax-lg img { height: 26px; width: 26px; } .ax-sign.ax-xl { font-size: 32px; height: calc(28px*3); width: calc(28px*3); } .ax-sign.ax-xl *[class*="font"] { font-size: 32px; } .ax-sign.ax-xl svg { height: 32px; width: 32px; } .ax-sign.ax-xl img { height: 32px; width: 32px; } .ax-sign.ax-xxl { font-size: 38px; height: calc(28px*4); width: calc(28px*4); } .ax-sign.ax-xxl *[class*="font"] { font-size: 44px; } .ax-sign.ax-xxl svg { height: 44px; width: 44px; } .ax-sign.ax-xxl img { height: 44px; width: 44px; } .ax-sign.ax-color-primary { border-color: #198cff; } .ax-sign.ax-color-secondary { border-color: #475b66; } .ax-sign.ax-color-success { border-color: #41a358; } .ax-sign.ax-color-danger { border-color: #dc3545; } .ax-sign.ax-color-warning { border-color: #ffc107; } .ax-sign.ax-color-info { border-color: #14ccc9; } .ax-sign.ax-color-ad { border-color: #ff8400; } .ax-sign.ax-color-title { border-color: #333333; } .ax-sign.ax-color-des { border-color: #666666; } .ax-sign.ax-color-ignore { border-color: #b3b3b3; } .ax-sign.ax-bglit { color: #666666; border-color: #666666; background-color: #f5f5f5; } .ax-sign.ax-bglit-primary { color: #198cff; border-color: #198cff; } .ax-sign.ax-bglit-secondary { color: #475b66; border-color: #475b66; } .ax-sign.ax-bglit-success { color: #41a358; border-color: #41a358; } .ax-sign.ax-bglit-danger { color: #dc3545; border-color: #dc3545; } .ax-sign.ax-bglit-warning { color: #ffc107; border-color: #ffc107; } .ax-sign.ax-bglit-info { color: #14ccc9; border-color: #14ccc9; } .ax-sign.ax-bglit-ad { color: #ff8400; border-color: #ff8400; } .ax-sign.ax-bglit-title { color: #333333; border-color: #333333; } .ax-sign.ax-bg { color: #fff; border-width: 0; background-color: #666666; } .ax-sign[class*="-bg-"] { color: #fff; border-width: 0; } .ax-sign.ax-bg svg, .ax-sign[class*="-bg-"] svg { fill: #fff; } /*buoy*/ .ax-buoy { font-size: 12px; color: #333333; height: calc(38px - 16px); line-height: 22px; text-decoration: none; text-align: center; border-radius: 3px; background-color: #fff; position: relative; box-sizing: border-box; transition: all 0.1s linear; } .ax-buoy:after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: #ebebeb; transition: border-color 0.1s linear; } .ax-buoy > i:first-child { color: #666666; background-color: #fafafa; padding: 0 6px; border-right: 1px solid #ebebeb; border-top-left-radius: 3px; border-bottom-left-radius: 3px; position: relative; display: inline-flex; justify-content: center; align-items: center; transition: all 0.1s linear; } .ax-buoy.ax-reverse > i:first-child { background-color: #fff; } .ax-buoy.ax-reverse > i:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .ax-buoy > i:first-child [class*="font"] { font-size: 12px; margin-right: 4px; transition: all 0.1s linear; } .ax-buoy > i.ax-icon [class*="font"] { margin-right: 0; } .ax-buoy > i:first-child svg { fill: #666666; height: 12px; margin-right: 4px; transition: all 0.1s linear; } .ax-buoy > i:last-child { padding: 0 6px; transition: all 0.1s linear; } .ax-buoy.ax-reverse > i:last-child { background-color: #fafafa; } .ax-buoy.ax-more > i:first-child:after { content: ''; width: 5px; height: 5px; margin-left: 4px; margin-top: -1px; background: linear-gradient(135deg, transparent 50%, #666666 50%, #666666 100%); transform: rotate(45deg); transition: all 0.1s linear; } .ax-buoy:not(.ax-reverse) > i:first-child:hover { color: #b3b3b3; } .ax-buoy:not(.ax-reverse) > i:first-child:hover svg { fill: #b3b3b3; } .ax-buoy:not(.ax-reverse) > i:first-child:hover:after { background: linear-gradient(135deg, transparent 50%, #b3b3b3 50%, #b3b3b3 100%); } .ax-buoy.ax-primary { color: #198cff; } .ax-buoy.ax-success { color: #41a358; } .ax-buoy.ax-danger { color: #dc3545; } .ax-buoy.ax-warning { color: #ffc107; } .ax-buoy.ax-info { color: #14ccc9; } .ax-buoy.ax-ad { color: #ff8400; } .ax-buoy.ax-dark { color: #333333; } .ax-buoy.ax-primary:not(.ax-reverse) > i:first-child { background-color: #198cff; } .ax-buoy.ax-primary.ax-reverse > i:last-child { background-color: #198cff; } .ax-buoy.ax-primary:after { border-color: #198cff; } .ax-buoy.ax-success:not(.ax-reverse) > i:first-child { background-color: #41a358; } .ax-buoy.ax-success.ax-reverse > i:last-child { background-color: #41a358; } .ax-buoy.ax-success:after { border-color: #41a358; } .ax-buoy.ax-danger:not(.ax-reverse) > i:first-child { background-color: #dc3545; } .ax-buoy.ax-danger.ax-reverse > i:last-child { background-color: #dc3545; } .ax-buoy.ax-danger:after { border-color: #dc3545; } .ax-buoy.ax-warning:not(.ax-reverse) > i:first-child { background-color: #ffc107; } .ax-buoy.ax-warning.ax-reverse > i:last-child { background-color: #ffc107; } .ax-buoy.ax-warning:after { border-color: #ffc107; } .ax-buoy.ax-info:not(.ax-reverse) > i:first-child { background-color: #14ccc9; } .ax-buoy.ax-info.ax-reverse > i:last-child { background-color: #14ccc9; } .ax-buoy.ax-info:after { border-color: #14ccc9; } .ax-buoy.ax-ad:not(.ax-reverse) > i:first-child { background-color: #ff8400; } .ax-buoy.ax-ad.ax-reverse > i:last-child { background-color: #ff8400; } .ax-buoy.ax-ad:after { border-color: #ff8400; } .ax-buoy.ax-dark > i:first-child { background-color: #333333; } .ax-buoy.ax-dark.ax-reverse > i:last-child { background-color: #333333; } .ax-buoy.ax-dark:after { border-color: #333333; } .ax-buoy.ax-primary > i:first-child, .ax-buoy.ax-success > i:first-child, .ax-buoy.ax-danger > i:first-child, .ax-buoy.ax-warning > i:first-child, .ax-buoy.ax-info > i:first-child, .ax-buoy.ax-ad > i:first-child, .ax-buoy.ax-dark > i:first-child { border-width: 0; } .ax-buoy.ax-primary:not(.ax-reverse) > i:first-child, .ax-buoy.ax-success:not(.ax-reverse) > i:first-child, .ax-buoy.ax-danger:not(.ax-reverse) > i:first-child, .ax-buoy.ax-warning:not(.ax-reverse) > i:first-child, .ax-buoy.ax-info:not(.ax-reverse) > i:first-child, .ax-buoy.ax-ad:not(.ax-reverse) > i:first-child, .ax-buoy.ax-dark:not(.ax-reverse) > i:first-child { color: #fff; } .ax-buoy.ax-primary:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-success:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-danger:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-warning:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-info:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-ad:not(.ax-reverse) > i:first-child svg, .ax-buoy.ax-dark:not(.ax-reverse) > i:first-child svg { fill: #fff; } .ax-buoy.ax-primary.ax-more:not(.ax-reverse) > i:first-child:after, .ax-buoy.ax-success.ax-more:not(.ax-reverse) > i:first-child:after, .ax-buoy.ax-danger.ax-more:not(.ax-reverse) > i:first-child:after, .ax-buoy.ax-warning.ax-more:not(.ax-reverse) > i:first-child:after, .ax-buoy.ax-info.ax-more:not(.ax-reverse) > i:first-child:after, .ax-buoy.ax-ad.ax-more:not(.ax-reverse) > i:first-child::after, .ax-buoy.ax-dark.ax-more:not(.ax-reverse) > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #fff 50%, #fff 100%); } .ax-buoy.ax-primary:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-success:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-danger:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-warning:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-info:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-ad:not(.ax-reverse) > i:first-child:hover, .ax-buoy.ax-dark:not(.ax-reverse) > i:first-child:hover { color: rgba(255, 255, 255, 0.6); } .ax-buoy.ax-primary:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-success:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-danger:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-warning:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-info:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-ad:not(.ax-reverse) > i:first-child:hover svg, .ax-buoy.ax-dark:not(.ax-reverse) > i:first-child:hover svg { fill: rgba(255, 255, 255, 0.6); } .ax-buoy.ax-primary.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-success.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-danger.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-warning.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-info.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-ad.ax-more:not(.ax-reverse) > i:first-child:hover:after, .ax-buoy.ax-dark.ax-more:not(.ax-reverse) > i:first-child:hover:after { background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%); } .ax-buoy.ax-sm { height: 18px; line-height: 18px; } .ax-buoy.ax-sm > i { padding: 0 4px; } .ax-buoy.ax-md { height: 22px; line-height: 22px; } .ax-buoy.ax-md > i { padding: 0 6px; } .ax-buoy.ax-lg { height: 28px; line-height: 28px; } .ax-buoy.ax-lg > i { padding: 0 10px; } .ax-buoy.ax-borderless:after { display: none; } .ax-buoy.ax-primary.ax-reverse > i:first-child { color: #198cff; } .ax-buoy.ax-primary.ax-reverse > i:first-child svg { fill: #198cff; } .ax-buoy.ax-more.ax-primary.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #198cff 50%, #198cff 100%); } .ax-buoy.ax-success.ax-reverse > i:first-child { color: #41a358; } .ax-buoy.ax-success.ax-reverse > i:first-child svg { fill: #41a358; } .ax-buoy.ax-more.ax-success.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #41a358 50%, #41a358 100%); } .ax-buoy.ax-danger.ax-reverse > i:first-child { color: #dc3545; } .ax-buoy.ax-danger.ax-reverse > i:first-child svg { fill: #dc3545; } .ax-buoy.ax-more.ax-danger.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #dc3545 50%, #dc3545 100%); } .ax-buoy.ax-warning.ax-reverse > i:first-child { color: #ffc107; } .ax-buoy.ax-warning.ax-reverse > i:first-child svg { fill: #ffc107; } .ax-buoy.ax-more.ax-warning.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #ffc107 50%, #ffc107 100%); } .ax-buoy.ax-info.ax-reverse > i:first-child { color: #14ccc9; } .ax-buoy.ax-info.ax-reverse > i:first-child svg { fill: #14ccc9; } .ax-buoy.ax-more.ax-info.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #14ccc9 50%, #14ccc9 100%); } .ax-buoy.ax-ad.ax-reverse > i:first-child { color: #ff8400; } .ax-buoy.ax-ad.ax-reverse > i:first-child svg { fill: #ff8400; } .ax-buoy.ax-more.ax-ad.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #ff8400 50%, #ff8400 100%); } .ax-buoy.ax-dark.ax-reverse > i:first-child { color: #333333; } .ax-buoy.ax-dark.ax-reverse > i:first-child svg { fill: #333333; } .ax-buoy.ax-more.ax-dark.ax-reverse > i:first-child:after { background: linear-gradient(135deg, transparent 50%, #333333 50%, #333333 100%); } .ax-buoy.ax-primary.ax-reverse > i:last-child, .ax-buoy.ax-success.ax-reverse > i:last-child, .ax-buoy.ax-danger.ax-reverse > i:last-child, .ax-buoy.ax-warning.ax-reverse > i:last-child, .ax-buoy.ax-info.ax-reverse > i:last-child, .ax-buoy.ax-ad.ax-reverse > i:last-child, .ax-buoy.ax-dark.ax-reverse > i:last-child { color: #fff; } .ax-buoy.ax-reverse > i:last-child:hover { color: #666666; } .ax-buoy.ax-primary.ax-reverse > i:last-child:hover, .ax-buoy.ax-success.ax-reverse > i:last-child:hover, .ax-buoy.ax-danger.ax-reverse > i:last-child:hover, .ax-buoy.ax-warning.ax-reverse > i:last-child:hover, .ax-buoy.ax-info.ax-reverse > i:last-child:hover, .ax-buoy.ax-ad.ax-reverse > i:last-child:hover, .ax-buoy.ax-dark.ax-reverse > i:last-child:hover { color: rgba(255, 255, 255, 0.6); } /*comment*/ .ax-comment { background-color: #fff; font-size: 14px; } .ax-comment .ax-item { box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; padding: 22px 0; } .ax-comment .ax-item .ax-avatar { margin-right: 12px; } .ax-comment .ax-item .ax-text { display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; } .ax-comment .ax-item .ax-reply { color: #666666; font-size: 12px; line-height: 18px; border-left: 1px solid #ccc; padding: 4px 0 4px 10px; margin: 10px 0; } .ax-comment .ax-item .ax-reply .ax-reply { padding: 0 0 0 10px; } .ax-comment .ax-item .ax-reply a, .ax-comment .ax-item .ax-reply span { display: inline; } .ax-comment .ax-item .ax-row01 { line-height: 18px; } .ax-comment .ax-item .ax-name { color: #666666; } .ax-comment .ax-item a.ax-name:hover { color: #198cff; } .ax-comment .ax-item .ax-time { color: #ccc; font-size: 12px; } .ax-comment .ax-item .ax-floor { color: #b3b3b3; font-size: 12px; } .ax-comment .ax-item .ax-row02 { line-height: 22px; margin: 4px auto 10px auto; } .ax-comment .ax-item .ax-row02 span { display: inline; } .ax-comment .ax-item .ax-row02 a, .ax-comment .ax-item .ax-reply a { color: #198cff; } .ax-comment .ax-item .ax-row03 .ax-action { margin-left: 14px; color: #666666; } .ax-comment .ax-item .ax-row03 .ax-action *[class*="font"] { color: #666666; margin-right: 4px; } .ax-comment .ax-item .ax-row03 .ax-action:hover { color: #198cff; } .ax-comment .ax-item .ax-row03 .ax-action:hover *[class*="font"] { color: #198cff; } .ax-comment .ax-item.ax-more { line-height: 44px; } .ax-comment .ax-item.ax-more .ax-avatar { background: transparent; } /*from*/ .ax-from { color: #666666; font-size: 14px; width: 100%; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; } .ax-from .ax-left { display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-from a:not([class*='ax-btn']) { color: #666666; } .ax-from .ax-avatar { margin-right: 8px; } /*author*/ .ax-author { font-size: 14px; width: 100%; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; } .ax-author .ax-left { line-height: 22px; display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-author .ax-right { color: #666666; } .ax-author .ax-des { font-size: 12px; color: #666666; } .ax-author a:not([class*='ax-btn']) { color: #666666; } .ax-author .ax-avatar { margin-right: 8px; } /*share*/ .ax-share { text-align: center; margin: calc(14px*2) auto; } .ax-share a { margin: 0 8px; } /*button*/ .ax-btn { font-size: 14px; color: #333333; height: 38px; line-height: 38px; text-decoration: none; text-align: center; border-radius: 3px; background-color: #fff; padding: 0 20px; display: inline-flex; justify-content: center; align-items: center; position: relative; box-sizing: border-box; transition: all 0.1s linear; } button.ax-btn { font-size: 14px; height: 38px; line-height: calc(38px - 4px); text-decoration: none; border-radius: 3px; cursor: pointer; background-color: #fff; padding: 0 20px; border: 1px solid rgba(0, 0, 0, 0.12); } input.ax-btn { font-size: 14px; height: 38px; line-height: calc(38px - 4px); text-decoration: none; border-radius: 3px; cursor: pointer; background-color: #fff; padding: 0 20px; border: 1px solid rgba(0, 0, 0, 0.12); display: inline-block; } .ax-btn:not(button):after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: rgba(0, 0, 0, 0.12); transition: border-color 0.1s linear; } .ax-btn .ax-svg { fill: #333333; } /**/ .ax-btn.ax-line { background: transparent; } button.ax-btn.ax-line { background-color: #fff; } input.ax-btn.ax-line { background-color: #fff; } .ax-btn.ax-line:not(button):after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: rgba(0, 0, 0, 0.12); transition: border-color 0.1s linear; } .ax-btn.ax-text { background: transparent!important; border: none!important; } .ax-btn.ax-text:after { display: none!important; } .ax-btn.ax-text:hover { box-shadow: none!important; } /**/ .ax-btn *[class*="font"], .ax-btn .ax-svg, .ax-btn img, .ax-btn.ax-line *[class*="font"], .ax-btn.ax-line .ax-svg, .ax-btn.ax-line img, .ax-btn.ax-text *[class*="font"], .ax-btn.ax-text .ax-svg, .ax-btn.ax-text img { transition: all 0.1s linear; margin-right: 4px; } .ax-btn.ax-xxs *[class*="font"] { font-size: 12px; margin-right: 0; } .ax-btn.ax-xxs .ax-svg { width: 12px; margin-right: 0; } .ax-btn.ax-xs *[class*="font"] { font-size: 12px; margin-right: 0; } .ax-btn.ax-xs .ax-svg { width: 12px; margin-right: 0; } .ax-btn.ax-sm *[class*="font"] { font-size: 12px; } .ax-btn.ax-sm .ax-svg { width: 12px; } .ax-btn.ax-lg *[class*="font"] { font-size: 22px; } .ax-btn.ax-lg .ax-svg { width: 22px; } .ax-btn *[class*="font"].ax-at-right, .ax-btn .ax-svg.ax-at-right, .ax-btn img.ax-at-right, .ax-btn.ax-line *[class*="font"].ax-at-right, .ax-btn.ax-line .ax-svg.ax-at-right, .ax-btn.ax-line img.ax-at-right, .ax-btn.ax-text *[class*="font"].ax-at-right, .ax-btn.ax-text .ax-svg.ax-at-right, .ax-btn.ax-text img.ax-at-right { margin-right: 0; margin-left: 4px; } .ax-btn *[class*="font"].ax-at-left, .ax-btn .ax-svg.ax-at-left, .ax-btn img.ax-at-left, .ax-btn.ax-line *[class*="font"].ax-at-left, .ax-btn.ax-line .ax-svg.ax-at-right, .ax-btn.ax-line img.ax-at-left, .ax-btn.ax-text *[class*="font"].ax-at-left, .ax-btn.ax-text .ax-svg.ax-at-left, .ax-btn.ax-text img.ax-at-left { margin-left: 0; margin-right: 4px; } .ax-btn.ax-xxs { font-size: 12px; height: 18px; line-height: 18px; padding: 0 4px; } button.ax-btn.ax-xxs { font-size: 12px; height: 18px; line-height: calc(18px - 4px); padding: 0 4px; } input.ax-btn.ax-xxs { font-size: 12px; height: 18px; line-height: calc(18px - 4px); padding: 0 4px; } .ax-btn.ax-xs { font-size: 12px; height: 22px; line-height: 22px; padding: 0 6px; } button.ax-btn.ax-xs { font-size: 12px; height: 22px; line-height: 18px; padding: 0 6px; } input.ax-btn.ax-xs { font-size: 12px; height: 22px; line-height: 18px; padding: 0 6px; } .ax-btn.ax-sm { font-size: 12px; height: calc(38px - 10px); line-height: calc(38px - 10px); padding: 0 10px; } button.ax-btn.ax-sm { font-size: 12px; height: calc(38px - 10px); line-height: calc(38px - 14px); padding: 0 10px; } input.ax-btn.ax-sm { font-size: 12px; height: calc(38px - 10px); line-height: calc(38px - 14px); padding: 0 10px; } .ax-btn.ax-lg { font-size: 16px; height: calc(38px + 10px); line-height: calc(38px + 10px); padding: 0 30px; } button.ax-btn.ax-lg { font-size: 16px; height: calc(38px + 10px); line-height: calc(38px + 6px); padding: 0 30px; } input.ax-btn.ax-lg { font-size: 16px; height: calc(38px + 10px); line-height: calc(38px + 6px); padding: 0 30px; } .ax-btn.ax-round, .ax-btn.ax-round:after, .ax-btn.ax-line.ax-round, .ax-btn.ax-line.ax-round:after { border-radius: 38px; } .ax-btn.ax-xxs.ax-round, .ax-btn.ax-xxs.ax-round:after { border-radius: 18px; } .ax-btn.ax-xs.ax-round, .ax-btn.ax-xs.ax-round:after { border-radius: 22px; } .ax-btn.ax-sm.ax-round, .ax-btn.ax-sm.ax-round:after { border-radius: calc(38px - 10px); } .ax-btn.ax-lg.ax-round, .ax-btn.ax-lg.ax-round:after { border-radius: calc(38px + 10px); } .ax-btn.ax-circle, .ax-btn.ax-circle:after, .ax-btn.ax-line.ax-circle, .ax-btn.ax-line.ax-circle:after { padding: 0; border-radius: 38px; width: 38px; text-align: center; } .ax-btn.ax-xxs.ax-circle, .ax-btn.ax-xxs.ax-circle:after { padding: 0; border-radius: 18px; width: 18px; } .ax-btn.ax-xs.ax-circle, .ax-btn.ax-xs.ax-circle:after { padding: 0; border-radius: 22px; width: 22px; } .ax-btn.ax-sm.ax-circle, .ax-btn.ax-sm.ax-circle:after { padding: 0; border-radius: calc(38px - 10px); width: calc(38px - 10px); } .ax-btn.ax-lg.ax-circle, .ax-btn.ax-lg.ax-circle:after { padding: 0; border-radius: calc(38px + 10px); width: calc(38px + 10px); } .ax-btn.ax-circle *[class*='font'], .ax-btn.ax-line.ax-circle *[class*='font'], .ax-btn-text.ax-circle *[class*='font'], .ax-btn.ax-circle svg, .ax-btn.ax-line.ax-circle svg, .ax-btn-text.ax-circle svg, .ax-btn.ax-circle img, .ax-btn.ax-line.ax-circle img, .ax-btn-text.ax-circle img { margin: 0; } .ax-btn.ax-long, input.ax-btn.ax-long, button.ax-btn.ax-long { width: 120px; padding-left: 0; padding-right: 0; } .ax-btn.ax-longer, input.ax-btn.ax-longer, button.ax-btn.ax-longer { width: 200px; padding-left: 0; padding-right: 0; } .ax-btn.ax-longest, input.ax-btn.ax-longest, button.ax-btn.ax-longest { width: 240px; padding-left: 0; padding-right: 0; } .ax-btn.ax-long.ax-xs, input.ax-btn.ax-long.ax-xs, button.ax-btn.ax-long.ax-xs { width: 60px; } .ax-btn.ax-longer.ax-xs, input.ax-btn.ax-longer.ax-xs, button.ax-btn.ax-longer.ax-xs { width: 80px; } .ax-btn.ax-longest.ax-xs, input.ax-btn.ax-longest.ax-xs, button.ax-btn.ax-longest.ax-xs { width: 120px; } .ax-btn.ax-long.ax-sm, input.ax-btn.ax-long.ax-sm, button.ax-btn.ax-long.ax-sm { width: 80px; } .ax-btn.ax-longer.ax-sm, input.ax-btn.ax-longer.ax-sm, button.ax-btn.ax-longer.ax-sm { width: 120px; } .ax-btn.ax-longest.ax-sm, input.ax-btn.ax-longest.ax-sm, button.ax-btn.ax-longest.ax-sm { width: 180px; } .ax-btn.ax-long.ax-lg, input.ax-btn.ax-long.ax-lg, button.ax-btn.ax-long.ax-lg { width: 160px; padding-left: 0; padding-right: 0; } .ax-btn.ax-longer.ax-lg, input.ax-btn.ax-longer.ax-lg, button.ax-btn.ax-longer.ax-lg { width: 240px; padding-left: 0; padding-right: 0; } .ax-btn.ax-longest.ax-lg, input.ax-btn.ax-longest.ax-lg, button.ax-btn.ax-longest.ax-lg { width: 280px; padding-left: 0; padding-right: 0; } .ax-btn.ax-full { display: block; text-align: center; } input.ax-full, button.ax-full { width: 100%; } input.ax-margin-lr, button.ax-margin-lr { width: calc(100% - (14px * 2)); } input.ax-margin-left, button.ax-margin-right { width: calc(100% - 14px); } /*type icon*/ .ax-btn.ax-icon { color: rgba(0, 0, 0, 0.5); width: 38px; text-align: center; } .ax-btn.ax-icon [class*="font"] { margin: 0; } .ax-btn.ax-icon .ax-svg { fill: #333333; width: 18px; height: 18px; margin: 0; } .ax-btn.ax-icon img { margin: 0; width: 18px; height: 18px; } .ax-btn.ax-icon:not(.ax-xs):not(.ax-sm):not(.ax-lg) [class*="font"] { font-size: 18px; } .ax-btn.ax-icon.ax-xs [class*="font"] { font-size: 12px; } .ax-btn.ax-icon.ax-xs .ax-svg, .ax-btn.ax-icon.ax-xs img { width: 12px; height: 12px; } .ax-btn.ax-icon.ax-sm [class*="font"] { font-size: 12px; } .ax-btn.ax-icon.ax-sm .ax-svg, .ax-btn.ax-icon.ax-sm img { width: 12px; height: 12px; } .ax-btn.ax-icon.ax-lg [class*="font"] { font-size: 22px; } .ax-btn.ax-icon.ax-lg .ax-svg, .ax-btn.ax-icon.ax-lg img { width: 22px; height: 22px; } .ax-btn.ax-icon, button.ax-btn.ax-icon { padding: 0; } .ax-btn.ax-icon.ax-xxs { width: 18px; } .ax-btn.ax-icon.ax-xs { width: 22px; } .ax-btn.ax-icon.ax-sm { width: calc(38px - 10px); } .ax-btn.ax-icon.ax-lg { width: calc(38px + 10px); } /*btn active hover*/ .ax-btn:hover { color: #198cff; box-shadow: 2px 2px 10px 0 rgba(25, 140, 255, 0.2); background-color: #ffffff; } .ax-btn:hover:after { border-color: #198cff; } input.ax-btn:hover, button.ax-btn:hover { border-color: #198cff; } .ax-btn:active { color: rgba(25, 140, 255, 0.6); background-color: #fafcff; } .ax-btn:hover .ax-svg { fill: #198cff; } .ax-btn:active .ax-svg use { opacity: 0.6; } .ax-btn.ax-line:hover { color: #198cff; box-shadow: 2px 2px 10px 0 rgba(25, 140, 255, 0.2); background-color: #ffffff; } .ax-btn.ax-line:hover:after { border-color: #198cff; } input.ax-btn.ax-line:hover, button.ax-btn.ax-line:hover { border-color: #198cff; } .ax-btn.ax-line:active { color: rgba(25, 140, 255, 0.6); } .ax-btn.ax-line:hover .ax-svg { fill: #198cff; } .ax-btn.ax-text:hover { color: #198cff; text-decoration: underline; } .ax-btn.ax-text:active { color: rgba(25, 140, 255, 0.6); } .ax-btn.ax-text:hover .ax-svg { fill: #198cff; } /*btn color*/ .ax-btn.ax-primary, .ax-btn.ax-reverse.ax-primary { color: #fff; background-color: #198cff; } .ax-btn.ax-primary *[class*="font"], .ax-btn.ax-reverse.ax-primary *[class*="font"] { color: #fff; } .ax-btn.ax-primary:hover, .ax-btn.ax-reverse.ax-primary:hover { color: #fff; background-color: #2d96ff; box-shadow: 2px 2px 10px 0 rgba(25, 140, 255, 0.5); } .ax-btn.ax-primary:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-primary:hover, button.ax-btn.ax-primary:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-primary:active, .ax-btn.ax-reverse.ax-primary:active { color: rgba(255, 255, 255, 0.6); background-color: #0072e5; } .ax-btn.ax-primary:active *[class*="font"], .ax-btn.ax-primary:active img, .ax-btn.ax-reverse.ax-primary:active *[class*="font"], .ax-btn.ax-reverse.ax-primary:active img { opacity: 0.6; } .ax-btn.ax-primary .ax-svg, .ax-btn.ax-primary:hover .ax-svg, .ax-btn.ax-reverse.ax-primary .ax-svg, .ax-btn.ax-reverse.ax-primary:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-primary, .ax-btn.ax-line.ax-primary *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-primary, .ax-btn.ax-reverse.ax-line.ax-primary *[class*="font"] { color: #198cff; background: transparent; } .ax-btn.ax-line.ax-primary:hover, .ax-btn.ax-reverse.ax-line.ax-primary:hover { color: #198cff; background-color: rgba(25, 140, 255, 0.1); box-shadow: 2px 2px 10px 0 rgba(25, 140, 255, 0.2); } .ax-btn.ax-line.ax-primary:after, .ax-btn.ax-reverse.ax-line.ax-primary:after { border-color: #198cff; } input.ax-btn.ax-line.ax-primary:hover, button.ax-btn.ax-line.ax-primary:hover { border-color: #198cff; } .ax-btn.ax-line.ax-primary:active, .ax-btn.ax-reverse.ax-line.ax-primary:active { opacity: 0.6; } .ax-btn.ax-line.ax-primary *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-primary *[class*="font"] { color: #198cff; } input.ax-btn.ax-line.ax-primary, button.ax-btn.ax-line.ax-primary, input.ax-btn.ax-reverse.ax-line.ax-primary, button.ax-btn.ax-reverse.ax-line.ax-primary { border-color: #198cff; } .ax-btn.ax-line.ax-primary .ax-svg, .ax-btn.ax-line.ax-primary:hover .ax-svg, .ax-btn.ax-line.ax-reverse.ax-primary .ax-svg, .ax-btn.ax-line.ax-reverse.ax-primary:hover .ax-svg { fill: #198cff; } .ax-btn.ax-text.ax-primary, .ax-btn.ax-text.ax-primary:hover, .ax-btn.ax-text.ax-reverse.ax-primary, .ax-btn.ax-text.ax-reverse.ax-primary:hover { color: #198cff; } .ax-btn.ax-text.ax-primary:active, .ax-btn.ax-text.ax-reverse.ax-primary:active { opacity: 0.6; } .ax-btn.ax-text.ax-primary *[class*="font"], .ax-btn.ax-text.ax-reverse.ax-primary *[class*="font"] { color: #198cff; } .ax-btn.ax-text.ax-primary .ax-svg, .ax-btn.ax-text.ax-primary:hover .ax-svg, .ax-btn.ax-text.ax-reverse.ax-primary .ax-svg, .ax-btn.ax-text.ax-reverse.ax-primary:hover .ax-svg { fill: #198cff; } /**/ .ax-btn.ax-secondary, .ax-btn.ax-reverse.ax-secondary { color: #fff; background-color: #475b66; } .ax-btn.ax-secondary *[class*="font"], .ax-btn.ax-reverse.ax-secondary *[class*="font"] { color: #fff; } .ax-btn.ax-secondary:hover, .ax-btn.ax-reverse.ax-secondary:hover { color: #fff; background-color: #4f6672; box-shadow: 2px 2px 10px 0 rgba(71, 91, 102, 0.5); } .ax-btn.ax-secondary:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-secondary:hover, button.ax-btn.ax-secondary:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-secondary:active, .ax-btn.ax-reverse.ax-secondary:active { color: rgba(255, 255, 255, 0.6); background-color: #324048; } .ax-btn.ax-secondary:active *[class*="font"], .ax-btn.ax-secondary:active img, .ax-btn.ax-reverse.ax-secondary:active *[class*="font"], .ax-btn.ax-reverse.ax-secondary:active img { opacity: 0.6; } .ax-btn.ax-secondary .ax-svg, .ax-btn.ax-secondary:hover .ax-svg, .ax-btn.ax-reverse.ax-secondary .ax-svg, .ax-btn.ax-reverse.ax-secondary:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-secondary, .ax-btn.ax-reverse.ax-line.ax-secondary { color: #475b66; background: transparent; } .ax-btn.ax-line.ax-secondary *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-secondary *[class*="font"] { color: #475b66; } .ax-btn.ax-line.ax-secondary:hover, .ax-btn.ax-reverse.ax-line.ax-secondary:hover { color: #475b66; background-color: rgba(71, 91, 102, 0.1); box-shadow: 2px 2px 10px 0 rgba(71, 91, 102, 0.2); } input.ax-btn.ax-line.ax-secondary:hover, button.ax-btn.ax-line.ax-secondary:hover { border-color: #475b66; } .ax-btn.ax-line.ax-secondary:after, .ax-btn.ax-reverse.ax-line.ax-secondary:after { border-color: #475b66; } .ax-btn.ax-line.ax-secondary:active, .ax-btn.ax-reverse.ax-line.ax-secondary:active { opacity: 0.6; } input.ax-btn.ax-line.ax-secondary, button.ax-btn.ax-line.ax-secondary, input.ax-btn.ax-reverse.ax-line.ax-secondary, button.ax-btn.ax-reverse.ax-line.ax-secondary { border-color: #475b66; } .ax-btn.ax-line.ax-secondary .ax-svg, .ax-btn.ax-line.ax-secondary:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-secondary .ax-svg, .ax-btn.ax-reverse.ax-line.ax-secondary:hover .ax-svg { fill: #475b66; } .ax-btn.ax-text.ax-secondary, .ax-btn.ax-text.ax-secondary:hover, .ax-btn.ax-reverse.ax-text.ax-secondary, .ax-btn.ax-reverse.ax-text.ax-secondary:hover { color: #475b66; } .ax-btn.ax-text.ax-secondary:active, .ax-btn.ax-reverse.ax-text.ax-secondary:active { opacity: 0.6; } .ax-btn.ax-text.ax-secondary *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-secondary *[class*="font"] { color: #475b66; } .ax-btn.ax-text.ax-secondary .ax-svg, .ax-btn.ax-text.ax-secondary:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-secondary .ax-svg, .ax-btn.ax-reverse.ax-text.ax-secondary:hover .ax-svg { fill: #475b66; } /**/ .ax-btn.ax-success, .ax-btn.ax-reverse.ax-success { color: #fff; background-color: #41a358; } .ax-btn.ax-success *[class*="font"], .ax-btn.ax-reverse.ax-success *[class*="font"] { color: #fff; } .ax-btn.ax-success:hover, .ax-btn.ax-reverse.ax-success:hover { color: #fff; background-color: #47b260; box-shadow: 2px 2px 10px 0 rgba(65, 163, 88, 0.5); } .ax-btn.ax-success:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-success:hover, button.ax-btn.ax-success:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-success:active, .ax-btn.ax-reverse.ax-success:active { background-color: #327f44; color: rgba(255, 255, 255, 0.6); } .ax-btn.ax-success:active *[class*="font"], .ax-btn.ax-success:active img, .ax-btn.ax-reverse.ax-success:active *[class*="font"], .ax-btn.ax-reverse.ax-success:active img { opacity: 0.6; } .ax-btn.ax-success .ax-svg, .ax-btn.ax-success:hover .ax-svg, .ax-btn.ax-reverse.ax-success .ax-svg, .ax-btn.ax-reverse.ax-success:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-success, .ax-btn.ax-reverse.ax-line.ax-success { color: #41a358; background: transparent; } .ax-btn.ax-line.ax-success *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-success *[class*="font"] { color: #41a358; } .ax-btn.ax-line.ax-success:hover, .ax-btn.ax-reverse.ax-line.ax-success:hover { color: #41a358; background-color: rgba(65, 163, 88, 0.1); box-shadow: 2px 2px 10px 0 rgba(65, 163, 88, 0.2); } .ax-btn.ax-line.ax-success:after, .ax-btn.ax-reverse.ax-line.ax-success:after { border-color: #41a358; } input.ax-btn.ax-line.ax-success:hover, button.ax-btn.ax-line.ax-success:hover { border-color: #41a358; } .ax-btn.ax-line.ax-success:active, .ax-btn.ax-reverse.ax-line.ax-success:active { opacity: 0.6; } input.ax-btn.ax-line.ax-success, button.ax-btn.ax-line.ax-success, input.ax-btn.ax-reverse.ax-line.ax-success, button.ax-btn.ax-reverse.ax-line.ax-success { border-color: #41a358; } .ax-btn.ax-line.ax-success .ax-svg, .ax-btn.ax-line.ax-success:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-success .ax-svg, .ax-btn.ax-reverse.ax-line.ax-success:hover .ax-svg { fill: #41a358; } .ax-btn.ax-text.ax-success, .ax-btn.ax-text.ax-success:hover, .ax-btn.ax-reverse.ax-text.ax-success, .ax-btn.ax-reverse.ax-text.ax-success:hover { color: #41a358; } .ax-btn.ax-text.ax-success:active, .ax-btn.ax-reverse.ax-text.ax-success:active { opacity: 0.6; } .ax-btn.ax-text.ax-success *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-success *[class*="font"] { color: #41a358; } .ax-btn.ax-text.ax-success .ax-svg, .ax-btn.ax-text.ax-success:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-success .ax-svg, .ax-btn.ax-reverse.ax-text.ax-success:hover .ax-svg { fill: #41a358; } /**/ .ax-btn.ax-danger, .ax-btn.ax-reverse.ax-danger { background-color: #dc3545; color: #fff; } .ax-btn.ax-danger *[class*="font"], .ax-btn.ax-reverse.ax-danger *[class*="font"] { color: #fff; } .ax-btn.ax-danger:hover, .ax-btn.ax-reverse.ax-danger:hover { color: #fff; background-color: #df4655; box-shadow: 2px 2px 10px 0 rgba(220, 53, 69, 0.5); } .ax-btn.ax-danger:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-success:hover, button.ax-btn.ax-success:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-danger:active, .ax-btn.ax-reverse.ax-danger:active { color: rgba(255, 255, 255, 0.6); background-color: #bd2130; } .ax-btn.ax-danger:active *[class*="font"], .ax-btn.ax-danger:active img, .ax-btn.ax-reverse.ax-danger:active *[class*="font"], .ax-btn.ax-reverse.ax-danger:active img { opacity: 0.6; } .ax-btn.ax-danger .ax-svg, .ax-btn.ax-danger:hover .ax-svg, .ax-btn.ax-reverse.ax-danger .ax-svg, .ax-btn.ax-reverse.ax-danger:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-danger, .ax-btn.ax-line.ax-danger *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-danger, .ax-btn.ax-reverse.ax-line.ax-danger *[class*="font"] { color: #dc3545; background: transparent; } .ax-btn.ax-line.ax-danger:hover, .ax-btn.ax-reverse.ax-line.ax-danger:hover { color: #dc3545; background-color: rgba(220, 53, 69, 0.1); box-shadow: 2px 2px 10px 0 rgba(220, 53, 69, 0.2); } .ax-btn.ax-line.ax-danger:after, .ax-btn.ax-reverse.ax-line.ax-danger:after { border-color: #dc3545; } input.ax-btn.ax-line.ax-line.ax-success:hover, button.ax-btn.ax-line.ax-line.ax-success:hover { border-color: #dc3545; } .ax-btn.ax-line.ax-danger:active, .ax-btn.ax-reverse.ax-line.ax-danger:active { opacity: 0.6; } input.ax-btn.ax-line.ax-danger, button.ax-btn.ax-line.ax-danger, input.ax-btn.ax-reverse.ax-line.ax-danger, button.ax-btn.ax-reverse.ax-line.ax-danger { border-color: #dc3545; } .ax-btn.ax-line.ax-danger .ax-svg, .ax-btn.ax-line.ax-danger:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-danger .ax-svg, .ax-btn.ax-reverse.ax-line.ax-danger:hover .ax-svg { fill: #dc3545; } .ax-btn.ax-text.ax-danger, .ax-btn.ax-text.ax-danger:hover, .ax-btn.ax-reverse.ax-text.ax-danger, .ax-btn.ax-reverse.ax-text.ax-danger:hover { color: #dc3545; } .ax-btn.ax-text.ax-danger:active, .ax-btn.ax-reverse.ax-text.ax-danger:active { opacity: 0.6; } .ax-btn.ax-text.ax-danger *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-danger *[class*="font"] { color: #dc3545; } .ax-btn.ax-text.ax-danger .ax-svg, .ax-btn.ax-text.ax-danger:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-danger .ax-svg, .ax-btn.ax-reverse.ax-text.ax-danger:hover .ax-svg { fill: #dc3545; } /**/ .ax-btn.ax-warning, .ax-btn.ax-reverse.ax-warning { color: #333333; background-color: #ffc107; } .ax-btn.ax-warning *[class*="font"], .ax-btn.ax-reverse.ax-warning *[class*="font"] { color: #333333; } .ax-btn.ax-warning:hover, .ax-btn.ax-reverse.ax-warning:hover { color: #333333; background-color: #ffc61b; box-shadow: 2px 2px 10px 0 rgba(255, 193, 7, 0.5); } .ax-btn.ax-warning:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-warning:hover, button.ax-btn.ax-warning:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-warning:active, .ax-btn.ax-reverse.ax-warning:active { color: rgba(0, 0, 0, 0.5); background-color: #d39e00; } .ax-btn.ax-warning:active *[class*="font"], .ax-btn.ax-warning:active img, .ax-btn.ax-reverse.ax-warning:active *[class*="font"], .ax-btn.ax-reverse.ax-warning:active img { opacity: 0.6; } .ax-btn.ax-warning .ax-svg, .ax-btn.ax-warning:hover .ax-svg, .ax-btn.ax-reverse.ax-warning .ax-svg, .ax-btn.ax-reverse.ax-warning:hover .ax-svg { fill: #333333; } .ax-btn.ax-line.ax-warning, .ax-btn.ax-reverse.ax-line.ax-warning { color: #ffc107; background: transparent; } .ax-btn.ax-line.ax-warning *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-warning *[class*="font"] { color: #ffc107; } .ax-btn.ax-line.ax-warning:hover, .ax-btn.ax-reverse.ax-line.ax-warning:hover { color: #ffc107; background-color: rgba(255, 193, 7, 0.1); box-shadow: 2px 2px 10px 0 rgba(255, 193, 7, 0.2); } .ax-btn.ax-line.ax-warning:after, .ax-btn.ax-reverse.ax-line.ax-warning:after { border-color: #ffc107; } input.ax-btn.ax-line.ax-warning:hover, button.ax-btn.ax-line.ax-warning:hover { border-color: #ffc107; } .ax-btn.ax-line.ax-warning:active, .ax-btn.ax-reverse.ax-line.ax-warning:active { opacity: 0.6; } input.ax-btn.ax-line.ax-warning, button.ax-btn.ax-line.ax-warning, input.ax-btn.ax-reverse.ax-line.ax-warning, button.ax-btn.ax-reverse.ax-line.ax-warning { border-color: #ffc107; } .ax-btn.ax-line.ax-warning .ax-svg, .ax-btn.ax-line.ax-warning:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-warning .ax-svg, .ax-btn.ax-reverse.ax-line.ax-warning:hover .ax-svg { fill: #ffc107; } .ax-btn.ax-text.ax-warning, .ax-btn.ax-text.ax-warning:hover, .ax-btn.ax-reverse.ax-text.ax-warning, .ax-btn.ax-reverse.ax-text.ax-warning:hover { color: #ffc107; } .ax-btn.ax-text.ax-warning:active, .ax-btn.ax-reverse.ax-text.ax-warning:active { opacity: 0.6; } .ax-btn.ax-text.ax-warning *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-warning *[class*="font"] { color: #ffc107; } .ax-btn.ax-text.ax-warning .ax-svg, .ax-btn.ax-text.ax-warning:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-warning .ax-svg, .ax-btn.ax-reverse.ax-text.ax-warning:hover .ax-svg { fill: #ffc107; } /**/ .ax-btn.ax-info, .ax-btn.ax-reverse.ax-info { background-color: #14ccc9; color: #fff; } .ax-btn.ax-info *[class*="font"], .ax-btn.ax-reverse.ax-info *[class*="font"] { color: #fff; } .ax-btn.ax-info:hover, .ax-btn.ax-reverse.ax-info:hover { color: #fff; background-color: #16dfdb; box-shadow: 2px 2px 10px 0 rgba(20, 204, 201, 0.5); } .ax-btn.ax-info:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-info:hover, button.ax-btn.ax-info:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-info:active, .ax-btn.ax-reverse.ax-info:active { color: rgba(255, 255, 255, 0.6); background-color: #0f9e9b; } .ax-btn.ax-info:active *[class*="font"], .ax-btn.ax-info:active img, .ax-btn.ax-reverse.ax-info:active *[class*="font"], .ax-btn.ax-reverse.ax-info:active img { opacity: 0.6; } .ax-btn.ax-info .ax-svg, .ax-btn.ax-info:hover .ax-svg, .ax-btn.ax-reverse.ax-info .ax-svg, .ax-btn.ax-reverse.ax-info:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-info, .ax-btn.ax-reverse.ax-line.ax-info { color: #14ccc9; background: transparent; } .ax-btn.ax-line.ax-info *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-info *[class*="font"] { color: #14ccc9; } .ax-btn.ax-line.ax-info:hover, .ax-btn.ax-reverse.ax-line.ax-info:hover { color: #14ccc9; background-color: rgba(20, 204, 201, 0.1); box-shadow: 2px 2px 10px 0 rgba(20, 204, 201, 0.2); } .ax-btn.ax-line.ax-info:after, .ax-btn.ax-reverse.ax-line.ax-info:after { border-color: #14ccc9; } input.ax-btn.ax-line.ax-info:hover, button.ax-btn.ax-line.ax-info:hover { border-color: #14ccc9; } .ax-btn.ax-line.ax-info:active, .ax-btn.ax-reverse.ax-line.ax-info:active { opacity: 0.6; } input.ax-btn.ax-line.ax-info, button.ax-btn.ax-line.ax-info, input.ax-btn.ax-reverse.ax-line.ax-info, button.ax-btn.ax-reverse.ax-line.ax-info { border-color: #14ccc9; } .ax-btn.ax-line.ax-info .ax-svg, .ax-btn.ax-line.ax-info:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-info .ax-svg, .ax-btn.ax-reverse.ax-line.ax-info:hover .ax-svg { fill: #14ccc9; } .ax-btn.ax-text.ax-info, .ax-btn.ax-text.ax-info:hover, .ax-btn.ax-reverse.ax-text.ax-info, .ax-btn.ax-reverse.ax-text.ax-info:hover { color: #14ccc9; } .ax-btn.ax-text.ax-info:active, .ax-btn.ax-reverse.ax-text.ax-info:active { opacity: 0.6; } .ax-btn.ax-text.ax-info *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-info *[class*="font"] { color: #14ccc9; } .ax-btn.ax-text.ax-info .ax-svg, .ax-btn.ax-text.ax-info:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-info .ax-svg, .ax-btn.ax-reverse.ax-text.ax-info:hover .ax-svg { fill: #14ccc9; } /**/ .ax-btn.ax-ad, .ax-btn.ax-reverse.ax-ad { background-color: #ff8400; color: #fff; } .ax-btn.ax-ad *[class*="font"], .ax-btn.ax-reverse.ax-ad *[class*="font"] { color: #fff; } .ax-btn.ax-ad:hover, .ax-btn.ax-reverse.ax-ad:hover { background-color: #ff8e14; box-shadow: 2px 2px 10px 0 rgba(255, 132, 0, 0.5); color: #fff; } .ax-btn.ax-ad:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-ad:hover, button.ax-btn.ax-ad:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-ad:active, .ax-btn.ax-reverse.ax-ad:active { color: rgba(255, 255, 255, 0.6); background-color: #cc6a00; } .ax-btn.ax-ad:active *[class*="font"], .ax-btn.ax-ad:active img, .ax-btn.ax-reverse.ax-ad:active *[class*="font"], .ax-btn.ax-reverse.ax-ad:active img { opacity: 0.6; } .ax-btn.ax-ad .ax-svg, .ax-btn.ax-ad:hover .ax-svg, .ax-btn.ax-reverse.ax-ad .ax-svg, .ax-btn.ax-reverse.ax-ad:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-ad, .ax-btn.ax-reverse.ax-line.ax-ad { color: #ff8400; background: transparent; } .ax-btn.ax-line.ax-ad *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-ad *[class*="font"] { color: #ff8400; } .ax-btn.ax-line.ax-ad:hover, .ax-btn.ax-reverse.ax-line.ax-ad:hover { color: #ff8400; background-color: rgba(255, 132, 0, 0.1); box-shadow: 2px 2px 10px 0 rgba(255, 132, 0, 0.2); } .ax-btn.ax-line.ax-ad:after, .ax-btn.ax-reverse.ax-line.ax-ad:after { border-color: #ff8400; } input.ax-btn.ax-line.ax-ad:hover, button.ax-btn.ax-line.ax-ad:hover { border-color: #ff8400; } .ax-btn.ax-line.ax-ad:active, .ax-btn.ax-reverse.ax-line.ax-ad:active { opacity: 0.6; } input.ax-btn.ax-line.ax-ad, button.ax-btn.ax-line.ax-ad, input.ax-btn.ax-reverse.ax-line.ax-ad, button.ax-btn.ax-reverse.ax-line.ax-ad { border-color: #ff8400; } .ax-btn.ax-line.ax-ad .ax-svg, .ax-btn.ax-line.ax-ad:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-ad .ax-svg, .ax-btn.ax-reverse.ax-line.ax-ad:hover .ax-svg { fill: #ff8400; } .ax-btn.ax-text.ax-ad, .ax-btn.ax-text.ax-ad:hover, .ax-btn.ax-reverse.ax-text.ax-ad, .ax-btn.ax-reverse.ax-text.ax-ad:hover { color: #ff8400; } .ax-btn.ax-text.ax-ad:active, .ax-btn.ax-reverse.ax-text.ax-ad:active { opacity: 0.6; } .ax-btn.ax-text.ax-ad *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-ad *[class*="font"] { color: #ff8400; } .ax-btn.ax-text.ax-ad .ax-svg, .ax-btn.ax-text.ax-ad:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-ad .ax-svg, .ax-btn.ax-reverse.ax-text.ax-ad:hover .ax-svg { fill: #ff8400; } /**/ .ax-btn.ax-ignore { color: #999999; background-color: #f0f0f0; } .ax-btn.ax-ignore *[class*="font"] { color: #999999; } .ax-btn.ax-ignore:hover { background-color: #fafafa; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); } .ax-btn.ax-ignore:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-ignore:hover, button.ax-btn.ax-ignore:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-ignore:active { background-color: #e6e6e6; } .ax-btn.ax-ignore .ax-svg, .ax-btn.ax-ignore:hover .ax-svg { fill: #999999; } .ax-btn.ax-ignore:active .ax-svg, .ax-btn.ax-ignore:active use { opacity: 1; } .ax-btn.ax-line.ax-ignore { color: #999999; background: transparent; } .ax-btn.ax-line.ax-ignore *[class*="font"] { color: #999999; } .ax-btn.ax-line.ax-ignore:hover { box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); background-color: rgba(179, 179, 179, 0.1); } .ax-btn.ax-line.ax-ignore:after { border-color: #ccc; } input.ax-btn.ax-line.ax-ignore:hover, button.ax-btn.ax-line.ax-ignore:hover { border-color: #ccc; } .ax-btn.ax-line.ax-ignore:active { opacity: 0.6; } input.ax-btn.ax-line.ax-info, button.ax-btn.ax-line.ax-info { border-color: #ccc; } .ax-btn.ax-line.ax-ignore .ax-svg, .ax-btn.ax-line.ax-ignore:hover .ax-svg { fill: #999999; } .ax-btn.ax-text.ax-ignore, .ax-btn.ax-text.ax-ignore:hover { color: #ccc; } .ax-btn.ax-text.ax-ignore:active { opacity: 0.6; } .ax-btn.ax-text.ax-ignore *[class*="font"] { color: #ccc; } .ax-btn.ax-text.ax-ignore .ax-svg, .ax-btn.ax-text.ax-ignore:hover .ax-svg { fill: #ccc; } /**/ .ax-btn.ax-black, .ax-btn.ax-reverse.ax-black { background-color: #333333; color: #fff; } .ax-btn.ax-black *[class*="font"], .ax-btn.ax-reverse.ax-black *[class*="font"] { color: #fff; } .ax-btn.ax-black:hover, .ax-btn.ax-reverse.ax-black:hover { background-color: #666666; box-shadow: 2px 2px 10px 0 rgba(51, 51, 51, 0.5); } .ax-btn.ax-black:hover:after { border-color: rgba(0, 0, 0, 0.12); } input.ax-btn.ax-black:hover, button.ax-btn.ax-black:hover { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-black:active, .ax-btn.ax-reverse.ax-black:active { color: rgba(255, 255, 255, 0.6); background-color: #262626; } .ax-btn.ax-black:active *[class*="font"], .ax-btn.ax-black:active img, .ax-btn.ax-reverse.ax-black:active *[class*="font"], .ax-btn.ax-reverse.ax-black:active img { opacity: 0.6; } .ax-btn.ax-black .ax-svg, .ax-btn.ax-black:hover .ax-svg, .ax-btn.ax-reverse.ax-black .ax-svg, .ax-btn.ax-reverse.ax-black:hover .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-black, .ax-btn.ax-reverse.ax-line.ax-black { color: #333333; background: transparent; border-color: #333333; } .ax-btn.ax-line.ax-black *[class*="font"], .ax-btn.ax-reverse.ax-line.ax-black *[class*="font"] { color: #333333; } .ax-btn.ax-line.ax-black:hover, .ax-btn.ax-reverse.ax-line.ax-black:hover { background-color: rgba(179, 179, 179, 0.2); box-shadow: 2px 2px 10px 0 rgba(51, 51, 51, 0.2); } .ax-btn.ax-line.ax-black:after, .ax-btn.ax-reverse.ax-line.ax-black:after { border-color: #333333; } input.ax-btn.ax-line.ax-black:hover, button.ax-btn.ax-line.ax-black:hover { border-color: #333333; } .ax-btn.ax-line.ax-black:active, .ax-btn.ax-reverse.ax-line.ax-black:active { opacity: 0.6; } input.ax-btn.ax-line.ax-black, button.ax-btn.ax-line.ax-black, input.ax-btn.ax-reverse.ax-line.ax-black, button.ax-btn.ax-reverse.ax-line.ax-black { border-color: #333333; } .ax-btn.ax-line.ax-black .ax-svg, .ax-btn.ax-line.ax-black:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-black .ax-svg, .ax-btn.ax-reverse.ax-line.ax-black:hover .ax-svg { fill: #333333; } .ax-btn.ax-text.ax-black, .ax-btn.ax-text.ax-black:hover, .ax-btn.ax-reverse.ax-text.ax-black, .ax-btn.ax-reverse.ax-text.ax-black:hover { color: #333333; } .ax-btn.ax-text.ax-black:active, .ax-btn.ax-reverse.ax-text.ax-black:active { opacity: 0.6; } .ax-btn.ax-text.ax-black *[class*="font"], .ax-btn.ax-reverse.ax-text.ax-black *[class*="font"] { color: #333333; } .ax-btn.ax-text.ax-black .ax-svg, .ax-btn.ax-text.ax-black:hover .ax-svg, .ax-btn.ax-reverse.ax-text.ax-black .ax-svg, .ax-btn.ax-reverse.ax-text.ax-black:hover .ax-svg { fill: #333333; } /**/ .ax-btn.ax-reverse, .ax-btn.ax-line.ax-reverse { background: transparent; color: #fff; } input.ax-reverse.ax-btn, button.ax-reverse.ax-btn, input.ax-reverse.ax-btn.ax-line, button.ax-reverse.ax-btn.ax-line { border-color: #fff; } .ax-btn.ax-reverse:after, .ax-btn.ax-reverse.ax-line:after { border-color: #fff; } .ax-btn.ax-reverse:hover { color: #fff; background-color: rgba(255, 255, 255, 0.1); } .ax-btn.ax-reverse:active { opacity: 0.6; } .ax-btn.ax-reverse .ax-svg, .ax-btn.ax-reverse:hover .ax-svg { fill: #fff; } input.ax-reverse.ax-btn.ax-ignore, button.ax-reverse.ax-btn.ax-ignore, input.ax-reverse.ax-btn.ax-ignore.ax-line, button.ax-reverse.ax-btn.ax-ignore.ax-line { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-ignore { color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-ignore *[class*="font"] { color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-ignore:after { border-color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-primary:not(.ax-line):after, .ax-btn.ax-reverse.ax-secondary:not(.ax-line):after, .ax-btn.ax-reverse.ax-success:not(.ax-line):after, .ax-btn.ax-reverse.ax-danger:not(.ax-line):after, .ax-btn.ax-reverse.ax-warning:not(.ax-line):after, .ax-btn.ax-reverse.ax-info:not(.ax-line):after, .ax-btn.ax-reverse.ax-ad:not(.ax-line):after, .ax-btn.ax-reverse.ax-black:not(.ax-line):after { display: none; } button.ax-btn.ax-reverse.ax-primary:not(.ax-line), button.ax-btn.ax-reverse.ax-secondary:not(.ax-line), button.ax-btn.ax-reverse.ax-success:not(.ax-line), button.ax-btn.ax-reverse.ax-danger:not(.ax-line), button.ax-btn.ax-reverse.ax-warning:not(.ax-line), button.ax-btn.ax-reverse.ax-info:not(.ax-line), button.ax-btn.ax-reverse.ax-ad:not(.ax-line), button.ax-btn.ax-reverse.ax-black:not(.ax-line) { border-color: transparent; } input.ax-btn.ax-reverse.ax-primary:not(.ax-line), input.ax-btn.ax-reverse.ax-secondary:not(.ax-line), input.ax-btn.ax-reverse.ax-success:not(.ax-line), input.ax-btn.ax-reverse.ax-danger:not(.ax-line), input.ax-btn.ax-reverse.ax-warning:not(.ax-line), input.ax-btn.ax-reverse.ax-info:not(.ax-line), input.ax-btn.ax-reverse.ax-ad:not(.ax-line), input.ax-btn.ax-reverse.ax-black:not(.ax-line) { border-color: transparent; } /*btn disable*/ .ax-btn.ax-disabled, .ax-btn.ax-disabled:hover, .ax-btn.ax-line.ax-disabled, .ax-btn.ax-line.ax-disabled:hover { color: #333333; cursor: not-allowed; box-shadow: none; opacity: 0.3; text-decoration: none; } .ax-btn.ax-disabled .ax-svg, .ax-btn.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-disabled .ax-svg, .ax-btn.ax-line.ax-disabled:hover .ax-svg { fill: #333333; } .ax-btn.ax-disabled:after, .ax-btn.ax-line.ax-disabled:after, .ax-btn.ax-disabled:hover:after, .ax-btn.ax-line.ax-disabled:hover:after { border-color: #ccc; } .ax-btn.ax-disabled:hover *, .ax-btn.ax-disabled:active *, .ax-btn.ax-line.ax-disabled:hover *, .ax-btn.ax-line.ax-disabled:active *, .ax-btn.ax-text.ax-disabled:hover *, .ax-btn.ax-text.ax-disabled:active * { opacity: 1; box-shadow: none; cursor: not-allowed; } .ax-btn.ax-disabled:active .ax-svg use { opacity: 1; } .ax-btn.ax-reverse.ax-disabled, .ax-btn.ax-reverse.ax-line.ax-disabled { background: transparent; color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-disabled .ax-svg, .ax-btn.ax-reverse.ax-line.ax-disabled .ax-svg { fill: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-disabled:after, .ax-btn.ax-reverse.ax-line.ax-disabled:after { color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-primary.ax-disabled:after, .ax-btn.ax-secondary.ax-disabled:after, .ax-btn.ax-success.ax-disabled:after, .ax-btn.ax-danger.ax-disabled:after, .ax-btn.ax-warning.ax-disabled:after, .ax-btn.ax-info.ax-disabled:after, .ax-btn.ax-ad.ax-disabled:after, .ax-btn.ax-black.ax-disabled:after, .ax-btn.ax-primary.ax-disabled:hover:after, .ax-btn.ax-secondary.ax-disabled:hover:after, .ax-btn.ax-success.ax-disabled:hover:after, .ax-btn.ax-danger.ax-disabled:hover:after, .ax-btn.ax-warning.ax-disabled:hover:after, .ax-btn.ax-info.ax-disabled:hover:after, .ax-btn.ax-ad.ax-disabled:hover:after, .ax-btn.ax-black.ax-disabled:hover:after { border-color: rgba(0, 0, 0, 0.12); } .ax-btn.ax-primary.ax-disabled, .ax-btn.ax-primary.ax-disabled:hover, .ax-btn.ax-primary.ax-disabled:active { color: #fff; background-color: #198cff; } .ax-btn.ax-primary.ax-disabled .ax-svg, .ax-btn.ax-primary.ax-disabled:hover .ax-svg, .ax-btn.ax-primary.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-secondary.ax-disabled, .ax-btn.ax-secondary.ax-disabled:hover, .ax-btn.ax-secondary.ax-disabled:active { color: #fff; background-color: #475b66; } .ax-btn.ax-secondary.ax-disabled .ax-svg, .ax-btn.ax-secondary.ax-disabled:hover .ax-svg, .ax-btn.ax-secondary.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-success.ax-disabled, .ax-btn.ax-success.ax-disabled:hover, .ax-btn.ax-success.ax-disabled:active { color: #fff; background-color: #41a358; } .ax-btn.ax-success.ax-disabled .ax-svg, .ax-btn.ax-success.ax-disabled:hover .ax-svg, .ax-btn.ax-success.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-danger.ax-disabled, .ax-btn.ax-danger.ax-disabled:hover, .ax-btn.ax-danger.ax-disabled:active { color: #fff; background-color: #dc3545; } .ax-btn.ax-danger.ax-disabled .ax-svg, .ax-btn.ax-danger.ax-disabled:hover .ax-svg, .ax-btn.ax-danger.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-warning.ax-disabled, .ax-btn.ax-warning.ax-disabled:hover, .ax-btn.ax-warning.ax-disabled:active { color: #333333; background-color: #ffc107; } .ax-btn.ax-warning.ax-disabled .ax-svg, .ax-btn.ax-warning.ax-disabled:hover .ax-svg, .ax-btn.ax-warning.ax-disabled:active .ax-svg { fill: #333333; } .ax-btn.ax-info.ax-disabled, .ax-btn.ax-info.ax-disabled:hover, .ax-btn.ax-info.ax-disabled:active { color: #fff; background-color: #14ccc9; } .ax-btn.ax-info.ax-disabled .ax-svg, .ax-btn.ax-info.ax-disabled:hover .ax-svg, .ax-btn.ax-info.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-ad.ax-disabled, .ax-btn.ax-ad.ax-disabled:hover, .ax-btn.ax-ad.ax-disabled:active { color: #fff; background-color: #ff8400; } .ax-btn.ax-ad.ax-disabled .ax-svg, .ax-btn.ax-ad.ax-disabled:hover .ax-svg, .ax-btn.ax-ad.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-ignore.ax-disabled, .ax-btn.ax-ignore.ax-disabled:hover, .ax-btn.ax-ignore.ax-disabled:active { color: rgba(102, 102, 102, 0.8); background-color: #f0f0f0; } .ax-btn.ax-ignore.ax-disabled .ax-svg, .ax-btn.ax-ignore.ax-disabled:hover .ax-svg, .ax-btn.ax-ignore.ax-disabled:active .ax-svg { fill: rgba(102, 102, 102, 0.8); } .ax-btn.ax-black.ax-disabled, .ax-btn.ax-black.ax-disabled:hover, .ax-btn.ax-black.ax-disabled:active { color: #fff; background-color: #333333; } .ax-btn.ax-black.ax-disabled .ax-svg, .ax-btn.ax-black.ax-disabled:hover .ax-svg, .ax-btn.ax-black.ax-disabled:active .ax-svg { fill: #fff; } .ax-btn.ax-line.ax-primary.ax-disabled, .ax-btn.ax-line.ax-primary.ax-disabled:hover, .ax-btn.ax-line.ax-primary.ax-disabled:active { color: #198cff; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-primary.ax-disabled .ax-svg, .ax-btn.ax-line.ax-primary.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-primary.ax-disabled:active .ax-svg { fill: #198cff; } .ax-btn.ax-line.ax-primary.ax-disabled:after, .ax-btn.ax-line.ax-primary.ax-disabled:hover:after { border-color: #198cff; } .ax-btn.ax-line.ax-secondary.ax-disabled, .ax-btn.ax-line.ax-secondary.ax-disabled:hover, .ax-btn.ax-line.ax-secondary.ax-disabled:active { color: #475b66; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-secondary.ax-disabled .ax-svg, .ax-btn.ax-line.ax-secondary.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-secondary.ax-disabled:active .ax-svg { fill: #475b66; } .ax-btn.ax-line.ax-secondary.ax-disabled:after, .ax-btn.ax-line.ax-secondary.ax-disabled:hover:after { border-color: #475b66; } .ax-btn.ax-line.ax-success.ax-disabled, .ax-btn.ax-line.ax-success.ax-disabled:hover, .ax-btn.ax-line.ax-success.ax-disabled:active { color: #41a358; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-success.ax-disabled .ax-svg, .ax-btn.ax-line.ax-success.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-success.ax-disabled:active .ax-svg { fill: #41a358; } .ax-btn.ax-line.ax-success.ax-disabled:after, .ax-btn.ax-line.ax-success.ax-disabled:hover:after { border-color: #41a358; } .ax-btn.ax-line.ax-danger.ax-disabled, .ax-btn.ax-line.ax-danger.ax-disabled:hover, .ax-btn.ax-line.ax-danger.ax-disabled:active { color: #dc3545; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-danger.ax-disabled .ax-svg, .ax-btn.ax-line.ax-danger.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-danger.ax-disabled:active .ax-svg { fill: #dc3545; } .ax-btn.ax-line.ax-danger.ax-disabled:after, .ax-btn.ax-line.ax-danger.ax-disabled:hover:after { border-color: #dc3545; } .ax-btn.ax-line.ax-warning.ax-disabled, .ax-btn.ax-line.ax-warning.ax-disabled:hover, .ax-btn.ax-line.ax-warning.ax-disabled:active { color: #ffc107; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-warning.ax-disabled .ax-svg, .ax-btn.ax-line.ax-warning.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-warning.ax-disabled:active .ax-svg { fill: #ffc107; } .ax-btn.ax-line.ax-warning.ax-disabled:after, .ax-btn.ax-line.ax-warning.ax-disabled:hover:after { border-color: #ffc107; } .ax-btn.ax-line.ax-info.ax-disabled, .ax-btn.ax-line.ax-info.ax-disabled:hover, .ax-btn.ax-line.ax-info.ax-disabled:active { color: #14ccc9; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-info.ax-disabled .ax-svg, .ax-btn.ax-line.ax-info.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-info.ax-disabled:active .ax-svg { fill: #14ccc9; } .ax-btn.ax-line.ax-info.ax-disabled:after, .ax-btn.ax-line.ax-info.ax-disabled:hover:after { border-color: #14ccc9; } .ax-btn.ax-line.ax-ad.ax-disabled, .ax-btn.ax-line.ax-ad.ax-disabled:hover, .ax-btn.ax-line.ax-ad.ax-disabled:active { color: #ff8400; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-ad.ax-disabled .ax-svg, .ax-btn.ax-line.ax-ad.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-ad.ax-disabled:active .ax-svg { fill: #ff8400; } .ax-btn.ax-line.ax-ad.ax-disabled:after, .ax-btn.ax-line.ax-ad.ax-disabled:hover:after { border-color: #ff8400; } .ax-btn.ax-line.ax-ignore.ax-disabled, .ax-btn.ax-line.ax-ignore.ax-disabled:hover, .ax-btn.ax-line.ax-ignore.ax-disabled:active { color: rgba(102, 102, 102, 0.8); background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-ignore.ax-disabled .ax-svg, .ax-btn.ax-line.ax-ignore.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-ignore.ax-disabled:active .ax-svg { fill: rgba(102, 102, 102, 0.8); } .ax-btn.ax-line.ax-ignore.ax-disabled:after, .ax-btn.ax-line.ax-ignore.ax-disabled:hover:after { border-color: #ccc; } .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled, .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:hover, .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:active { color: rgba(255, 255, 255, 0.5); background: transparent; } .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled .ax-svg, .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:hover .ax-svg, .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:active .ax-svg { fill: rgba(255, 255, 255, 0.5); } .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:after, .ax-btn.ax-reverse.ax-line.ax-ignore.ax-disabled:hover:after { border-color: rgba(255, 255, 255, 0.5); } .ax-btn.ax-line.ax-black.ax-disabled, .ax-btn.ax-line.ax-black.ax-disabled:hover, .ax-btn.ax-line.ax-black.ax-disabled:active { color: #333333; background: transparent; opacity: 0.3; } .ax-btn.ax-line.ax-black.ax-disabled .ax-svg, .ax-btn.ax-line.ax-black.ax-disabled:hover .ax-svg, .ax-btn.ax-line.ax-black.ax-disabled:active .ax-svg { fill: #333333; } .ax-btn.ax-line.ax-black.ax-disabled:after, .ax-btn.ax-line.ax-black.ax-disabled:hover:after { border-color: #333333; } .ax-btn.ax-text.ax-primary.ax-disabled, .ax-btn.ax-text.ax-primary.ax-disabled:hover, .ax-btn.ax-text.ax-primary.ax-disabled:active { color: #198cff; opacity: 0.3; } .ax-btn.ax-text.ax-primary.ax-disabled .ax-svg, .ax-btn.ax-text.ax-primary.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-primary.ax-disabled:active .ax-svg { fill: #198cff; } .ax-btn.ax-text.ax-secondary.ax-disabled, .ax-btn.ax-text.ax-secondary.ax-disabled:hover, .ax-btn.ax-text.ax-secondary.ax-disabled:active { color: #475b66; opacity: 0.3; } .ax-btn.ax-text.ax-secondary.ax-disabled .ax-svg, .ax-btn.ax-text.ax-secondary.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-secondary.ax-disabled:active .ax-svg { fill: #475b66; } .ax-btn.ax-text.ax-success.ax-disabled, .ax-btn.ax-text.ax-success.ax-disabled:hover, .ax-btn.ax-text.ax-success.ax-disabled:active { color: #41a358; opacity: 0.3; } .ax-btn.ax-text.ax-success.ax-disabled .ax-svg, .ax-btn.ax-text.ax-success.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-success.ax-disabled:active .ax-svg { fill: #41a358; } .ax-btn.ax-text.ax-danger.ax-disabled, .ax-btn.ax-text.ax-danger.ax-disabled:hover, .ax-btn.ax-text.ax-danger.ax-disabled:active { color: #dc3545; opacity: 0.3; } .ax-btn.ax-text.ax-danger.ax-disabled .ax-svg, .ax-btn.ax-text.ax-danger.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-danger.ax-disabled:active .ax-svg { fill: #dc3545; } .ax-btn.ax-text.ax-warning.ax-disabled, .ax-btn.ax-text.ax-warning.ax-disabled:hover, .ax-btn.ax-text.ax-warning.ax-disabled:active { color: #ffc107; opacity: 0.3; } .ax-btn.ax-text.ax-warning.ax-disabled .ax-svg, .ax-btn.ax-text.ax-warning.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-warning.ax-disabled:active .ax-svg { fill: #ffc107; } .ax-btn.ax-text.ax-info.ax-disabled, .ax-btn.ax-text.ax-info.ax-disabled:hover, .ax-btn.ax-text.ax-info.ax-disabled:active { color: #14ccc9; opacity: 0.3; } .ax-btn.ax-text.ax-info.ax-disabled .ax-svg, .ax-btn.ax-text.ax-info.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-info.ax-disabled:active .ax-svg { fill: #14ccc9; } .ax-btn.ax-text.ax-ad.ax-disabled, .ax-btn.ax-text.ax-ad.ax-disabled:hover, .ax-btn.ax-text.ax-ad.ax-disabled:active { color: #ff8400; opacity: 0.3; } .ax-btn.ax-text.ax-ad.ax-disabled .ax-svg, .ax-btn.ax-text.ax-ad.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-ad.ax-disabled:active .ax-svg { fill: #ff8400; } .ax-btn.ax-text.ax-ignore.ax-disabled, .ax-btn.ax-text.ax-ignore.ax-disabled:hover, .ax-btn.ax-text.ax-ignore.ax-disabled:active { color: rgba(102, 102, 102, 0.8); opacity: 0.3; } .ax-btn.ax-text.ax-ignore.ax-disabled .ax-svg, .ax-btn.ax-text.ax-ignore.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-ignore.ax-disabled:active .ax-svg { fill: rgba(102, 102, 102, 0.8); } .ax-btn.ax-text.ax-black.ax-disabled, .ax-btn.ax-text.ax-black.ax-disabled:hover, .ax-btn.ax-text.ax-black.ax-disabled:active { color: #333333; opacity: 0.3; } .ax-btn.ax-text.ax-black.ax-disabled .ax-svg, .ax-btn.ax-text.ax-black.ax-disabled:hover .ax-svg, .ax-btn.ax-text.ax-black.ax-disabled:active .ax-svg { fill: #333333; } /*btn shadow*/ .ax-btn.ax-text.ax-shadow { box-shadow: none; } .ax-btn.ax-primary.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(25, 140, 255, 0.4); } .ax-btn.ax-secondary.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(71, 91, 102, 0.4); } .ax-btn.ax-success.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(65, 163, 88, 0.4); } .ax-btn.ax-danger.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(220, 53, 69, 0.4); } .ax-btn.ax-warning.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(255, 193, 7, 0.4); } .ax-btn.ax-ad.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(255, 132, 0, 0.4); } .ax-btn.ax-info.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 5px 5px 20px rgba(20, 204, 201, 0.4); } .ax-btn.ax-black.ax-shadow:not(.ax-line):not(.ax-text):not(.ax-disabled) { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); box-shadow: 5px 5px 20px rgba(51, 51, 51, 0.4); } /*btn borderless*/ .ax-btn.ax-borderless { border: none; } .ax-btn.ax-borderless:after { display: none; } /*btn txt*/ .ax-txt-btn { font-size: 14px; } .ax-txt-btn *[class*="font"] { font-size: 14px; } /*btn group*/ .ax-btn-group .ax-btn, .ax-btn-group .ax-btn:after { border-radius: 0; } .ax-btn-group > .ax-btn:first-child, .ax-btn-group > .ax-btn:first-child:after { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .ax-btn-group > .ax-btn:last-child, .ax-btn-group > .ax-btn:last-child:after { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .ax-btn-group > .ax-btn:not(:first-of-type) { margin-left: -1px; } .ax-btn-group .ax-btn:hover { z-index: 2; } .ax-btn-group .ax-btn.ax-active { z-index: 3; background-color: #198cff; color: #fff; } .ax-btn-group .ax-btn.ax-active svg { fill: #fff; } /*gradient btn*/ .ax-primary.ax-gradient-0 { background: linear-gradient(0deg, #198cff, #6619ff); } .ax-primary.ax-gradient, .ax-primary.ax-gradient-45 { background: linear-gradient(45deg, #198cff, #6619ff); } .ax-primary.ax-gradient-90 { background: linear-gradient(90deg, #198cff, #6619ff); } .ax-primary.ax-gradient-135 { background: linear-gradient(135deg, #198cff, #6619ff); } .ax-primary.ax-gradient-180 { background: linear-gradient(180deg, #198cff, #6619ff); } .ax-primary.ax-gradient-225 { background: linear-gradient(225deg, #198cff, #6619ff); } .ax-primary.ax-gradient-270 { background: linear-gradient(270deg, #198cff, #6619ff); } .ax-primary.ax-gradient-315 { background: linear-gradient(315deg, #198cff, #6619ff); } .ax-primary.ax-gradient-360 { background: linear-gradient(360deg, #198cff, #6619ff); } .ax-secondary.ax-gradient-0 { background: linear-gradient(0deg, #475b66, #474b66); } .ax-secondary.ax-gradient, .ax-secondary.ax-gradient-45 { background: linear-gradient(45deg, #475b66, #474b66); } .ax-secondary.ax-gradient-90 { background: linear-gradient(90deg, #475b66, #474b66); } .ax-secondary.ax-gradient-135 { background: linear-gradient(135deg, #475b66, #474b66); } .ax-secondary.ax-gradient-180 { background: linear-gradient(180deg, #475b66, #474b66); } .ax-secondary.ax-gradient-225 { background: linear-gradient(225deg, #475b66, #474b66); } .ax-secondary.ax-gradient-270 { background: linear-gradient(270deg, #475b66, #474b66); } .ax-secondary.ax-gradient-315 { background: linear-gradient(315deg, #475b66, #474b66); } .ax-secondary.ax-gradient-360 { background: linear-gradient(360deg, #475b66, #474b66); } .ax-success.ax-gradient-0 { background: linear-gradient(0deg, #41a358, #41a379); } .ax-success.ax-gradient, .ax-success.ax-gradient-45 { background: linear-gradient(45deg, #41a358, #41a379); } .ax-success.ax-gradient-90 { background: linear-gradient(90deg, #41a358, #41a379); } .ax-success.ax-gradient-135 { background: linear-gradient(135deg, #41a358, #41a379); } .ax-success.ax-gradient-180 { background: linear-gradient(180deg, #41a358, #41a379); } .ax-success.ax-gradient-225 { background: linear-gradient(225deg, #41a358, #41a379); } .ax-success.ax-gradient-270 { background: linear-gradient(270deg, #41a358, #41a379); } .ax-success.ax-gradient-315 { background: linear-gradient(315deg, #41a358, #41a379); } .ax-success.ax-gradient-360 { background: linear-gradient(360deg, #41a358, #41a379); } .ax-danger.ax-gradient-0 { background: linear-gradient(0deg, #dc3545, #dc7935); } .ax-danger.ax-gradient, .ax-danger.ax-gradient-45 { background: linear-gradient(45deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-90 { background: linear-gradient(90deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-135 { background: linear-gradient(135deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-180 { background: linear-gradient(180deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-225 { background: linear-gradient(225deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-270 { background: linear-gradient(270deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-315 { background: linear-gradient(315deg, #dc3545, #dc7935); } .ax-danger.ax-gradient-360 { background: linear-gradient(360deg, #dc3545, #dc7935); } .ax-warning.ax-gradient-0 { background: linear-gradient(0deg, #ffc107, #eaff07); } .ax-warning.ax-gradient, .ax-warning.ax-gradient-45 { background: linear-gradient(45deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-90 { background: linear-gradient(90deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-135 { background: linear-gradient(135deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-180 { background: linear-gradient(180deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-225 { background: linear-gradient(225deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-270 { background: linear-gradient(270deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-315 { background: linear-gradient(315deg, #ffc107, #eaff07); } .ax-warning.ax-gradient-360 { background: linear-gradient(360deg, #ffc107, #eaff07); } .ax-info.ax-gradient-0 { background: linear-gradient(0deg, #14ccc9, #1492cc); } .ax-info.ax-gradient, .ax-info.ax-gradient-45 { background: linear-gradient(45deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-90 { background: linear-gradient(90deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-135 { background: linear-gradient(135deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-180 { background: linear-gradient(180deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-225 { background: linear-gradient(225deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-270 { background: linear-gradient(270deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-315 { background: linear-gradient(315deg, #14ccc9, #1492cc); } .ax-info.ax-gradient-360 { background: linear-gradient(360deg, #14ccc9, #1492cc); } .ax-ad.ax-gradient-0 { background: linear-gradient(0deg, #ff8400, #ffd900); } .ax-ad.ax-gradient, .ax-ad.ax-gradient-45 { background: linear-gradient(45deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-90 { background: linear-gradient(90deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-135 { background: linear-gradient(135deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-180 { background: linear-gradient(180deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-225 { background: linear-gradient(225deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-270 { background: linear-gradient(270deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-315 { background: linear-gradient(315deg, #ff8400, #ffd900); } .ax-ad.ax-gradient-360 { background: linear-gradient(360deg, #ff8400, #ffd900); } /*ripple*/ .ax-ripple { position: relative; overflow: hidden; } .ax-ripple > u { width: 100px; height: 100px; opacity: 0; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.7) 10%, #000000 30%, rgba(0, 0, 0, 0.7) 60%, #000000 80%, rgba(0, 0, 0, 0.7) 100%); transform: translate(-50%, -50%) scale(0.2); animation: ripple 0.6s ease-out; pointer-events: none; position: absolute; z-index: 4; } @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /*form*/ .ax-form-origin { font-size: 14px; margin: 8px 0; } .ax-form-origin .ax-icon { color: #adc1cc; font-size: 14px; width: 18px; } .ax-form-label { width: 160px; height: 38px; line-height: calc(38px/2); text-align: right; margin-right: 14px; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; } .ax-form-label:empty { height: 0px; } .ax-form-input { width: 360px; position: relative; } input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="file"] { background-color: #fff; border: 0; position: relative; z-index: 1; } input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="file"], select { width: 100%; height: 38px; line-height: 38px; padding: 0 10px; border: 1px solid #e0e0e0; box-sizing: border-box; border-radius: 3px; position: relative; } input[type="range"] { height: 3px; width: 100%; background-color: #f0f0f0; border-radius: 3px; margin: calc((38px - 3px)/2) 0; outline: none; -webkit-appearance: none; } _:-ms-lang(x), input[type="range"] { height: 22px; border-radius: 0; margin: calc((38px - 22px)/2) 0; background: transparent; } input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid #198cff; border-radius: 50%; background-color: #fff; cursor: pointer; -webkit-appearance: none; transition: all 0.1s linear; } input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #198cff; border-radius: 50%; background-color: #fff; cursor: pointer; transition: all 0.1s linear; } input[type="range"]::-moz-range-progress { background-color: #198cff; border-radius: 3px; } input[type="range"]::-ms-thumb { width: 12px; height: 12px; border: 2px solid #198cff; border-radius: 50%; background-color: #fff; cursor: pointer; transition: all 0.1s linear; } input[type="range"]::-ms-track { color: transparent; border-color: transparent; height: 1px; border-radius: 3px; background-color: #f0f0f0; transition: all 0.1s linear; } input[type="range"]::-ms-fill-lower { height: 3px; border-radius: 3px; background: #198cff; transition: all 0.1s linear; } input[type="range"]::-ms-fill-upper { height: 3px; border-radius: 3px; background: transparent; } input[type="range"]:not([disabled]):hover { background-color: #d7e7f5; } _:-ms-lang(x), input[type="range"]:not([disabled]):hover { background: transparent; } _:-ms-lang(x), input[type="range"]::-ms-track:hover { background-color: #d7e7f5; } input[type="range"]:not([disabled])::-webkit-slider-thumb:hover { box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); } input[type="range"]:not([disabled])::-moz-range-thumb:hover { box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); } _:-ms-lang(x), input[type="range"]:not([disabled])::-ms-thumb:hover { box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); } input[type="range"][disabled] { opacity: 0.4; } input[type="range"]:focus { outline: none; } .ax-form-group.ax-xs input[type="range"], input[type="range"].ax-xs { margin: calc((22px - 3px) / 2) 0; } _:-ms-lang(x), .ax-form-group.ax-xs input[type="range"] { margin: 0; } _:-ms-lang(x), input[type="range"].ax-xs { margin: 0; } .ax-form-group.ax-sm input[type="range"], input[type="range"].ax-sm { margin: calc((28px - 3px) / 2) 0; } _:-ms-lang(x), .ax-form-group.ax-sm input[type="range"] { margin: calc((28px - 22px) / 2) 0; } _:-ms-lang(x), input[type="range"].ax-sm { margin: calc((28px - 22px) / 2) 0; } .ax-form-group.ax-lg input[type="range"], input[type="range"].ax-lg { margin: calc((38px + 10px - 3px) / 2) 0; } _:-ms-lang(x), .ax-form-group.ax-lg input[type="range"] { margin: calc((38px + 10px - 22px) / 2) 0; } _:-ms-lang(x), input[type="range"].ax-lg { margin: calc((38px + 10px - 22px) / 2) 0; } select { background-color: transparent; z-index: 3; } textarea { width: 100%; height: calc(22px*5 + 18px); line-height: 22px; border: 1px solid #e0e0e0; box-sizing: border-box; padding: 8px 10px; border-radius: 3px; overflow: auto; display: block; position: relative; z-index: 1; } input[type="file"]::file-selector-button { height: calc(38px + 2px); line-height: calc(38px + 2px); border: none; border-right: 1px solid #ebebeb; padding: 0 10px 0 0; background: transparent; pointer-events: none; } input[type="file"]::-webkit-file-upload-button { height: calc(38px + 2px); line-height: calc(38px + 2px); border: none; border-right: 1px solid #ebebeb; padding: 0 10px 0 0; background: transparent; pointer-events: none; } input:not([readonly]):not([disabled]):not([class*="ax-check"]):not([class*="ax-btn"]):hover, textarea:not([readonly]):not([disabled]):not([class*="ax-check"]):hover { border-color: rgba(25, 140, 255, 0.5); } input[readonly=""]:not([class*="mbsc"]):not([id*="_dummy"]), textarea[readonly=""]:not([class*="mbsc"]):not([id*="_dummy"]), input[disabled=""]:not([class*="mbsc"]):not([id*="_dummy"]), textarea[disabled=""]:not([class*="mbsc"]):not([id*="_dummy"]), input.ax-forbid, textarea.ax-forbid { color: #b3b3b3; cursor: not-allowed; background-color: #f0f0f0; box-shadow: none; } input[readonly=""]:not([class*="mbsc"]):not([id*="_dummy"]):focus, textarea[readonly=""]:not([class*="mbsc"]):not([id*="_dummy"]):focus, input[type="text"].ax-forbid:focus, input[type="search"].ax-forbid:focus, input[type="url"].ax-forbid:focus, input[type="email"].ax-forbid:focus, input[type="number"].ax-forbid:focus, input[type="password"].ax-forbid:focus, input[type="file"].ax-forbid:focus, textarea.ax-forbid:focus { color: #b3b3b3; background-color: #f0f0f0; border-color: #e0e0e0 !important; box-shadow: none; } input[type="text"]:focus, input[type="text"].ax-focus, input[type="search"]:focus, input[type="search"].ax-focus, input[type="url"]:focus, input[type="url"].ax-focus, input[type="email"]:focus, input[type="email"].ax-focus, input[type="number"]:focus, input[type="number"].ax-focus, input[type="password"]:focus, input[type="password"].ax-focus, input[type="file"]:focus, input[type="file"].ax-focus, textarea:focus, textarea.ax-focus { color: #198cff; box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); border-color: rgba(25, 140, 255, 0.5) !important; } /*input size*/ input[type="text"].ax-xs, input[type="search"].ax-xs, input[type="url"].ax-xs, input[type="email"].ax-xs, input[type="number"].ax-xs, input[type="password"].ax-xs, input[type="file"].ax-xs, select.ax-xs { font-size: 12px; height: 22px; line-height: 22px; padding: 0 4px; } .ax-file.ax-xs { font-size: 12px; } .ax-file.ax-xs input[type="file"] { height: 22px; } .ax-file.ax-xs:before, .ax-file.ax-xs:after { height: 22px; line-height: 22px; } textarea.ax-xs { font-size: 12px; line-height: 22px; height: calc(22px*3 + 2px); padding: 0px 4px; } input[type="file"].ax-xs::file-selector-button { height: calc(22px + 2px); line-height: calc(22px + 2px); padding-right: 4px; } input[type="file"].ax-xs::-webkit-file-upload-button { height: calc(22px + 2px); line-height: calc(22px + 2px); padding-right: 4px; } .ax-form-group.ax-xs { font-size: 12px; } .ax-form-group.ax-xs .ax-form-label { height: 22px; line-height: 22px; margin-right: 4px; } .ax-form-group.ax-xs .ax-form-con { line-height: 22px; } .ax-form-group.ax-xs .ax-form-txt { line-height: 22px; margin-left: 4px; } .ax-form-group.ax-xs .ax-pos-right { line-height: 22px; padding-right: 4px; } .ax-form-group.ax-xs .ax-pos-right [class*="font"] { height: 22px; line-height: 24px; margin-left: 4px; } .ax-form-group.ax-xs .ax-form-head { height: 22px; width: 22px; background-size: cover,14px 14px; margin-left: 4px; } .ax-form-group.ax-xs .ax-form-img { height: 22px; line-height: 22px; margin-left: 4px; } .ax-form-group.ax-xs .ax-form-img a, .ax-form-group.ax-xs .ax-form-img span, .ax-form-group.ax-xs .ax-form-img i { margin: 0 4px; } .ax-form-group.ax-xs .ax-file:before { height: 22px; line-height: 20px; padding: 0 4px; } .ax-form-group.ax-xs .ax-file:after { height: 22px; line-height: 22px; padding: 0 4px; } input[type="text"].ax-sm, input[type="search"].ax-sm, input[type="url"].ax-sm, input[type="email"].ax-sm, input[type="number"].ax-sm, input[type="password"].ax-sm, input[type="file"].ax-sm, select.ax-sm { font-size: 14px; height: calc(38px - 10px); line-height: calc(38px - 10px); padding: 0 6px; } .ax-file.ax-sm input[type="file"] { height: calc(38px - 10px); } .ax-file.ax-sm:before, .ax-file.ax-sm:after { height: calc(38px - 10px); line-height: calc(38px - 10px); } textarea.ax-sm { font-size: 14px; height: calc(22px*3 + 8px); padding: 3px 6px; } input[type="file"].ax-sm::file-selector-button { height: calc(38px - 10px + 2px); line-height: calc(38px - 10px + 2px); padding-right: 6px; } input[type="file"].ax-sm::-webkit-file-upload-button { height: calc(38px - 10px + 2px); line-height: calc(38px - 10px + 2px); padding-right: 6px; } .ax-form-group.ax-sm .ax-form-label { height: calc(38px - 10px); line-height: calc((38px - 10px)/2); margin-right: 8px; } .ax-form-group.ax-sm .ax-form-txt { line-height: calc(38px - 10px); margin-left: 8px; } .ax-form-group.ax-sm .ax-pos-right { line-height: calc(38px - 10px); padding-right: 8px; } .ax-form-group.ax-sm .ax-pos-right [class*="font"] { margin-left: 8px; } .ax-form-group.ax-sm .ax-form-head { height: calc(38px - 10px); width: calc(38px - 10px); background-size: cover,18px 18px; margin-left: 8px; } .ax-form-group.ax-sm .ax-form-img { height: calc(38px - 10px); line-height: calc(38px - 10px); margin-left: 8px; } .ax-form-group.ax-sm .ax-form-img a, .ax-form-group.ax-sm .ax-form-img span, .ax-form-group.ax-sm .ax-form-img i { margin: 0 6px; } .ax-form-group.ax-sm .ax-file:before { height: calc(38px - 10px); line-height: calc(38px - 12px); padding: 0 6px; } .ax-form-group.ax-sm .ax-file:after { height: calc(38px - 10px); line-height: calc(38px - 10px); padding: 0 8px; } input[type="text"].ax-lg, input[type="search"].ax-lg, input[type="url"].ax-lg, input[type="email"].ax-lg, input[type="number"].ax-lg, input[type="password"].ax-lg, input[type="file"].ax-lg, select.ax-lg { height: calc(38px + 10px); line-height: calc(38px + 10px); padding: 0 14px; } .ax-file.ax-lg input[type="file"] { height: calc(38px + 10px); } .ax-file.ax-lg:before, .ax-file.ax-lg:after { height: calc(38px + 10px); line-height: calc(38px + 10px); } textarea.ax-lg { height: calc(22px*5 + 23px); padding: 8px 14px; } input[type="file"].ax-lg::file-selector-button { height: calc(38px + 10px + 2px); line-height: calc(38px + 10px + 2px); padding-right: 14px; } input[type="file"].ax-lg::-webkit-file-upload-button { height: calc(38px + 10px + 2px); line-height: calc(38px + 10px + 2px); padding-right: 14px; } .ax-form-group.ax-lg .ax-form-label { height: calc(38px + 10px); line-height: calc((38px + 10px)/2); } .ax-form-group.ax-lg .ax-form-txt { line-height: calc(38px + 10px); } .ax-form-group.ax-lg .ax-pos-right { line-height: calc(38px + 10px); } .ax-form-group.ax-lg .ax-form-head { height: calc(38px + 10px); width: calc(38px + 10px); margin-left: 14px; } .ax-form-group.ax-lg .ax-form-img { height: calc(38px + 10px); line-height: calc(38px + 10px); margin-left: 14px; } .ax-form-group.ax-lg .ax-form-img a, .ax-form-group.ax-lg .ax-form-img span, .ax-form-group.ax-lg .ax-form-img i { margin: 0 18px; } .ax-form-group.ax-lg .ax-file:before { height: calc(38px + 10px); line-height: calc(38px + 8px); padding: 0 14px; } .ax-form-group.ax-lg .ax-file:after { height: calc(38px + 10px); line-height: calc(38px + 10px); padding: 0 18px; } input[type="text"].ax-square, input[type="search"].ax-square, input[type="url"].ax-square, input[type="email"].ax-square, input[type="number"].ax-square, input[type="password"].ax-square, input[type="file"].ax-square, select.ax-square, textarea.ax-square, .ax-file.ax-square:after { border-radius: 0; } .ax-file.ax-square:before, .ax-file.ax-square:after { border-radius: 0; } input[type="text"].ax-round, input[type="search"].ax-round, input[type="url"].ax-round, input[type="email"].ax-round, input[type="number"].ax-round, input[type="password"].ax-round, input[type="file"].ax-round, select.ax-round, textarea.ax-round { border-radius: calc(38px/2); padding-left: 16px; padding-right: 16px; } .ax-file.ax-round:after { border-radius: calc(38px/2); padding-left: 16px; padding-right: 16px; } .ax-file.ax-round:after { border-radius: 0 calc(38px/2) calc(38px/2) 0; padding: 0 16px; } input.ax-round + .ax-pos-right, textarea.ax-round + .ax-pos-right { padding-right: 16px; } input[type="text"].ax-round.ax-xs, input[type="search"].ax-round.ax-xs, input[type="url"].ax-round.ax-xs, input[type="email"].ax-round.ax-xs, input[type="number"].ax-round.ax-xs, input[type="password"].ax-round.ax-xs, input[type="file"].ax-round.ax-xs, select.ax-round.ax-xs, textarea.ax-round.ax-xs { border-radius: 11px; padding-left: 8px; padding-right: 8px; } .ax-file.ax-round.ax-xs:before { padding: 0 8px; } .ax-file.ax-round.ax-xs:after { border-radius: 11px; padding-left: 8px; padding-right: 8px; } .ax-file.ax-round.ax-xs:after { border-radius: 0 11px 11px 0; padding: 0 8px; } input.ax-round.ax-xs + .ax-pos-right { padding-right: 8px; } input[type="text"].ax-round.ax-sm, input[type="search"].ax-round.ax-sm, input[type="url"].ax-round.ax-sm, input[type="email"].ax-round.ax-sm, input[type="number"].ax-round.ax-sm, input[type="password"].ax-round.ax-sm, input[type="file"].ax-round.ax-sm, select.ax-round.ax-sm, textarea.ax-round.ax-sm { border-radius: calc((38px - 10px) / 2); padding-left: 10px; padding-right: 10px; } .ax-file.ax-round.ax-sm:before { padding-left: 10px; padding-right: 10px; } .ax-file.ax-round.ax-sm:after { border-radius: calc((38px - 10px) / 2); padding-left: 10px; padding-right: 10px; } .ax-file.ax-round.ax-sm:after { border-radius: 0 calc((38px - 10px)/2) calc((38px - 10px)/2) 0; padding: 0 10px; } input.ax-round.ax-sm + .ax-pos-right { padding-right: 10px; } input[type="text"].ax-round.ax-lg, input[type="search"].ax-round.ax-lg, input[type="url"].ax-round.ax-lg, input[type="email"].ax-round.ax-lg, input[type="number"].ax-round.ax-lg, input[type="password"].ax-round.ax-lg, input[type="file"].ax-round.ax-lg, select.ax-round.ax-lg, textarea.ax-round.ax-lg { border-radius: calc((38px + 10px) / 2); padding-left: 20px; padding-right: 20px; } .ax-file.ax-round.ax-lg:before { padding-left: 20px; padding-right: 20px; } .ax-file.ax-round.ax-lg:before { border-radius: calc((38px + 10px) / 2); padding-left: 20px; padding-right: 20px; } .ax-file.ax-round.ax-lg:after { border-radius: 0 calc((38px + 10px) / 2) calc((38px + 10px) / 2) 0; padding: 0 20px; } input.ax-round.ax-lg + .ax-pos-right { padding-right: 20px; } /*input dodge*/ .ax-dodge { position: relative; } .ax-dodge label { color: rgba(0, 0, 0, 0.3); padding: 0 10px; border-radius: 3px; height: 38px; line-height: 38px; cursor: text; position: absolute; left: 0; top: 0; z-index: 2; transition: all 0.1s linear; } .ax-dodge.ax-active label { font-size: 10px; line-height: 12px; height: 12px; padding: 0 4px; background-color: #fff; transform: translate(0, -50%); left: 6px; } .ax-dodge.ax-active:after { content: ''; height: 12px; width: 180px; background: transparent; position: absolute; left: 0; top: -6px; z-index: 2; } .ax-dodge.ax-lg label { height: calc(38px + 10px); line-height: calc(38px + 10px); } .ax-dodge.ax-active.ax-lg label { line-height: 12px; height: 12px; left: 10px; } .ax-dodge input:-webkit-autofill, .ax-dodge textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } /* mobiscroll */ input[readonly=""][class*="mbsc"], textarea[readonly=""][class*="mbsc"], input[readonly=""][class*="mbsc"]:focus, textarea[readonly=""][class*="mbsc"]:focus, input[readonly=""][id*="_dummy"], textarea[readonly=""][id*="_dummy"], input[readonly=""][id*="_dummy"]:focus, textarea[readonly=""][id*="_dummy"]:focus { color: #333333; box-shadow: none; border-color: #e0e0e0 !important; } input[readonly=""][class*="mbsc"]:hover, textarea[readonly=""][class*="mbsc"]:hover, input[readonly=""][id*="_dummy"]:hover, textarea[readonly=""][id*="_dummy"]:hover { border-color: rgba(25, 140, 255, 0.5) !important; } input[readonly=""][class*="mbsc"].ax-focus, textarea[readonly=""][class*="mbsc"].ax-focus, input[readonly=""][id*="_dummy"].ax-focus, textarea[readonly=""][id*="_dummy"].ax-focus { color: #198cff; box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); border-color: rgba(25, 140, 255, 0.5) !important; } .ax-form-btn.ax-round:not(.ax-icon) { padding: 0 16px; } /* mobiscroll */ input.ax-check-danger, textarea.ax-check-danger { color: #dc3545; background-color: rgba(220, 53, 69, 0.06); border-color: rgba(220, 53, 69, 0.16); } input.ax-check-danger:focus, textarea.ax-check-danger:focus { color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14); background-color: rgba(220, 53, 69, 0.06); border-color: rgba(220, 53, 69, 0.3) !important; } input.ax-check-primary, textarea.ax-check-primary { color: #198cff; background-color: rgba(25, 140, 255, 0.06); border-color: rgba(25, 140, 255, 0.16); } input.ax-check-primary:focus, textarea.ax-check-primary:focus { color: #198cff; box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.14); background-color: rgba(25, 140, 255, 0.06); border-color: rgba(25, 140, 255, 0.3) !important; } input.ax-check-success, textarea.ax-check-success { color: #41a358; background-color: rgba(65, 163, 88, 0.06); border-color: rgba(65, 163, 88, 0.16); } input.ax-check-success:focus, textarea.ax-check-success:focus { color: #41a358; box-shadow: 0 0 0 3px rgba(65, 163, 88, 0.14); background-color: rgba(65, 163, 88, 0.06); border-color: rgba(65, 163, 88, 0.3) !important; } input.ax-check-success, textarea.ax-check-success { color: #41a358; background-color: rgba(65, 163, 88, 0.06); border-color: rgba(65, 163, 88, 0.16); } input.ax-check-success:focus, textarea.ax-check-success:focus { color: #41a358; box-shadow: 0 0 0 3px rgba(65, 163, 88, 0.14); background-color: rgba(65, 163, 88, 0.06); border-color: rgba(65, 163, 88, 0.3) !important; } input.ax-check-warning, textarea.ax-check-warning { color: #ffc107; background-color: rgba(255, 193, 7, 0.06); border-color: rgba(255, 193, 7, 0.16); } input.ax-check-warning:focus, textarea.ax-check-warning:focus { color: #ffc107; box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.14); background-color: rgba(255, 193, 7, 0.06); border-color: rgba(255, 193, 7, 0.3) !important; } input.ax-check-info, textarea.ax-check-info { color: #14ccc9; background-color: rgba(20, 204, 201, 0.06); border-color: rgba(20, 204, 201, 0.16); } input.ax-check-info:focus, textarea.ax-check-info:focus { color: #14ccc9; box-shadow: 0 0 0 3px rgba(20, 204, 201, 0.14); background-color: rgba(20, 204, 201, 0.06); border-color: rgba(20, 204, 201, 0.3) !important; } input.ax-check-ad, textarea.ax-check-ad { color: #ff8400; background-color: rgba(255, 132, 0, 0.06); border-color: rgba(255, 132, 0, 0.16); } input.ax-check-ad:focus, textarea.ax-check-ad:focus { color: #ff8400; box-shadow: 0 0 0 3px rgba(255, 132, 0, 0.14); background-color: rgba(255, 132, 0, 0.06); border-color: rgba(255, 132, 0, 0.3) !important; } .ax-file { position: relative; } .ax-file:after { content: attr(data-text); color: #fff; height: 38px; line-height: 38px; background-color: #198cff; border-radius: 0 3px 3px 0; padding: 0 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; cursor: pointer; position: absolute; right: 0; top: 0; z-index: 1; } .ax-file:before { content: attr(data-placeholder); color: rgba(0, 0, 0, 0.3); background-color: #fff; width: 100%; height: 38px; line-height: calc(38px - 2px); overflow: hidden; white-space: nowrap; padding: 0 10px; border: 1px solid #e0e0e0; box-sizing: border-box; border-radius: 3px; position: absolute; top: 0; left: 0; transition: all 0.1s linear; } .ax-file.ax-simple:after { display: none; } .ax-file.ax-active:before { color: #333333; } .ax-file.ax-focus:before { color: #198cff; box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); border-color: rgba(25, 140, 255, 0.5) !important; } .ax-file input[type="file"] { opacity: 0; cursor: pointer; z-index: 2; } .ax-file:hover:before { border-color: rgba(25, 140, 255, 0.5); } .ax-file.ax-square:before, .ax-file.ax-square:after { border-radius: 0; } .ax-file.ax-round:before { border-radius: calc(38px/2); padding-left: 16px; padding-right: 16px; } .ax-file.ax-round:after { border-top-right-radius: calc(38px/2); border-bottom-right-radius: calc(38px/2); padding: 0 16px; } .ax-radio { position: relative; } .ax-radio *[type="radio"] { display: none; } .ax-radio span { line-height: 38px; white-space: nowrap; margin-right: 22px; } .ax-radio span:before { content: ''; width: 18px; height: 18px; margin-right: 4px; display: inline-block; box-sizing: border-box; border-radius: 100%; cursor: pointer; border: 1px solid #e0e0e0; position: relative; top: 10px; transition: all 0.2s ease-out; float: left; } .ax-radio span:after { content: ''; width: 10px; height: 10px; border-radius: 100%; cursor: pointer; background-color: #198cff; display: inline-block; position: absolute; top: 14px; left: 4px; transform: scale(0); transition: all 0.2s ease-out; } .ax-radio:hover span:before { border-color: #198cff; } .ax-radio input[type="radio"]:focus { box-shadow: rgba(25, 140, 255, 0.2); } .ax-radio input[type="radio"]:checked + span:before { border-color: #198cff; animation: check 0.4s ease-out forwards; } .ax-radio input[type="radio"]:checked + span:after { border-color: #198cff; transform: scale(1); } .ax-radio input[type="radio"]:focus + span:before { outline: none; border-color: #198cff; } .ax-radio input[type="radio"]:disabled + span { color: #b3b3b3; } .ax-radio input[type="radio"]:disabled + span:before { border-color: #e0e0e0; } .ax-radio input[type="radio"]:disabled:checked + span:before { background-color: rgba(25, 140, 255, 0.1); } .ax-radio input[type="radio"]:disabled:checked + span:after { background-color: #b3b3b3; transform: scale(1); } .ax-radio input[type="radio"] + span:empty:before { margin-right: 0; } .ax-radio.ax-bone { height: 18px; width: 18px; } .ax-radio.ax-bone span { width: 100%; height: 100%; margin: 0; } .ax-radio.ax-bone span:before { left: 0; top: 0; } .ax-radio.ax-bone span:after { top: 4px; } @keyframes check { 0% { box-shadow: 0 0 0 0 rgba(25, 140, 255, 0.2); } 50% { box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); } 99% { box-shadow: 0 0 0 6px rgba(25, 140, 255, 0); } 100% { box-shadow: none; } } /*radio size*/ .ax-radio.ax-xs span { line-height: 22px; margin-right: 14px; } .ax-radio.ax-xs span:before { top: 2px; margin-right: 4px; } .ax-radio.ax-xs span:after { top: 6px; } .ax-radio.ax-sm span { line-height: calc(28px); margin-right: 14px; } .ax-radio.ax-sm span:before { top: 5px; margin-right: 8px; } .ax-radio.ax-sm span:after { top: 9px; } .ax-radio.ax-lg span { line-height: calc(28px + 20px); } .ax-radio.ax-lg span:before { top: 15px; } .ax-radio.ax-lg span:after { top: 19px; } .ax-checkbox { position: relative; } .ax-checkbox *[type="checkbox"] { display: none; } .ax-checkbox span { line-height: 38px; white-space: nowrap; margin-right: 22px; } .ax-checkbox span:before { content: ''; width: 16px; height: 16px; display: inline-block; box-sizing: border-box; border-radius: 3px; margin-right: 4px; cursor: pointer; border: 1px solid #e0e0e0; position: relative; top: 11px; transition: all 0.2s ease-out; float: left; } .ax-checkbox span:after { content: ''; width: 10px; height: 6px; border-radius: 0 6px 0 0; cursor: pointer; box-shadow: -2px 2px 0 0 #198cff; display: inline-block; position: absolute; top: 12px; left: 3px; transform: rotate(-45deg) scale(0); transition: all 0.2s ease-out; } .ax-checkbox:hover span:before { border-color: #198cff; } .ax-checkbox input[type="checkbox"]:focus { box-shadow: rgba(25, 140, 255, 0.2); } .ax-checkbox input[type="checkbox"]:checked + span:before { border-color: #198cff; background-color: #198cff; animation: check 0.4s ease-out forwards; } .ax-checkbox input[type="checkbox"]:checked + span:after { box-shadow: -2px 2px 0 0 #fff; transform: rotate(-45deg) scale(1); } .ax-checkbox input[type="checkbox"]:focus + span:before { outline: none; border-color: #198cff; } .ax-checkbox input[type="checkbox"]:focus + span:after { box-shadow: -2px 2px 0 0 #198cff; } .ax-checkbox input[type="checkbox"]:disabled + span { color: #b3b3b3; } .ax-checkbox input[type="checkbox"]:disabled + span:before { border-color: #e0e0e0; background-color: #f0f0f0; } .ax-checkbox input[type="checkbox"]:disabled:checked + span:before { background-color: rgba(25, 140, 255, 0.1); } .ax-checkbox input[type="checkbox"]:disabled:checked + span:after { box-shadow: -2px 2px 0 0 #b3b3b3; transform: rotate(-45deg) scale(1); } .ax-checkbox input[type="checkbox"] + span:empty:before { margin-right: 0; } .ax-checkbox.ax-bone { height: 18px; width: 18px; } .ax-checkbox.ax-bone span { width: 100%; height: 100%; margin: 0; } .ax-checkbox.ax-bone span:before { left: 1px; top: 1px; } .ax-checkbox.ax-bone span:after { left: 4px; top: 2px; } /*checkbox size*/ .ax-checkbox.ax-xs span { line-height: 22px; margin-right: 14px; } .ax-checkbox.ax-xs span:before { top: 3px; } .ax-checkbox.ax-xs span:after { top: 4px; } .ax-checkbox.ax-sm span { line-height: 28px; margin-right: 14px; } .ax-checkbox.ax-sm span:before { top: 6px; } .ax-checkbox.ax-sm span:after { top: 7px; } .ax-checkbox.ax-lg span { line-height: calc(28px + 20px); } .ax-checkbox.ax-lg span:before { top: 16px; } .ax-checkbox.ax-lg span:after { top: 17px; } .ax-chera { font-size: 14px; width: 100%; display: block; box-sizing: border-box; cursor: pointer; margin: 5px auto; position: relative; } .ax-chera input { display: none; } .ax-chera span { width: 100%; height: calc(38px - 10px); line-height: calc(38px - 10px); border-radius: 3px; white-space: nowrap; padding: 0 10px; margin: 5px auto; display: block; box-sizing: border-box; transition: all 0.2s ease-out; position: relative; } .ax-chera span:before { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: rgba(0, 0, 0, 0.12); } .ax-chera span:after { content: ''; width: 10px; height: 6px; cursor: pointer; box-shadow: -2px 2px 0 0 #b3b3b3; display: inline-block; position: absolute; top: 7px; right: 12px; opacity: 0.4; transform: rotate(-45deg); transition: all 0.2s ease-out; } .ax-chera:hover span { border-color: #198cff; } .ax-chera input:checked + span { color: #fff; border-color: #198cff; background-color: #198cff; } .ax-chera input:checked + span:after { opacity: 1; box-shadow: -2px 2px 0 0 #fff; transform: rotate(-45deg); } .ax-chera input:focus + span { outline: none; border-color: #198cff; } .ax-chera input:focus + span:after { box-shadow: -2px 2px 0 0 #198cff; } .ax-chera input:disabled + span { color: #b3b3b3; } .ax-chera input:disabled + span { border-color: #e0e0e0; background-color: #f0f0f0; } .ax-chera input:disabled:checked + span { background-color: rgba(25, 140, 255, 0.1); } .ax-chera input:disabled:checked + span:after { box-shadow: -2px 2px 0 0 #b3b3b3; } /*chera size*/ .ax-chera.ax-xs { font-size: 12px; margin: 1px auto; } .ax-chera.ax-xs span { height: 20px; line-height: 20px; padding-left: 4px; margin: 0 auto; } .ax-chera.ax-xs span:after { top: 3px; right: 6px; } .ax-chera.ax-sm { margin: 1px auto; } .ax-chera.ax-sm span { height: calc(28px - 2px); line-height: calc(28px - 2px); margin: 1px auto; } .ax-chera.ax-sm span:after { top: 6px; } .ax-chera.ax-lg span { height: calc(28px + 10px); line-height: calc(28px + 10px); } .ax-chera.ax-lg span:after { top: 12px; } .ax-switch { width: 40px; box-sizing: border-box; } .ax-switch input { display: none; } .ax-switch span { width: 100%; height: 22px; border: 1px solid #e0e0e0; border-radius: 22px; margin: calc((38px - 22px)/2) 0; display: block; box-sizing: border-box; transition: all 0.2s linear; position: relative; } .ax-switch span:before { content: ''; width: 20px; height: 20px; border-radius: 100%; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: all 0.2s linear; position: absolute; left: 0; } .ax-switch:hover span { border-color: #198cff; } .ax-switch input:checked + span { border-color: #198cff; background-color: #198cff; } .ax-switch input:checked + span:before { left: 18px; } .ax-switch input:disabled + span { border-color: #e0e0e0; background-color: #f0f0f0; } .ax-switch input:disabled:checked + span { background-color: rgba(25, 140, 255, 0.1); } .ax-switch.ax-bone span { margin: 0; } /*switch size*/ .ax-switch.ax-xs span { margin: 0; } .ax-switch.ax-sm span { margin: 3px 0; } .ax-switch.ax-lg span { margin: 13px 0; } /*increase number*/ .ax-increase { border-radius: 3px; width: calc(38px*4); height: 38px; box-sizing: border-box; position: relative; border: 1px solid #e0e0e0; } .ax-increase:hover { border-color: rgba(25, 140, 255, 0.5); } .ax-increase .ax-minus, .ax-increase .ax-plus { background-color: #fafafa; box-sizing: border-box; width: 38px; height: 100%; line-height: calc(38px - 2px); text-align: center; position: absolute; top: 0; z-index: 1; overflow: hidden; color: #666666; } .ax-increase .ax-minus { left: 0; border-radius: 3px 0 0 3px; border-right: 1px solid #e0e0e0; } .ax-increase .ax-plus { right: 0; border-radius: 0 3px 3px 0; border-left: 1px solid #e0e0e0; } .ax-increase [class*="font"] { font-size: 12px; } .ax-increase svg { width: 12px; height: 100%; } .ax-increase.ax-array-left input { padding-left: calc(10px + 38px); } .ax-increase.ax-array-right input { padding-right: calc(10px + 38px); } .ax-increase.ax-array-left .ax-minus, .ax-increase.ax-array-left .ax-plus, .ax-increase.ax-array-right .ax-minus, .ax-increase.ax-array-right .ax-plus { height: 50%; } .ax-increase.ax-array-left .ax-plus, .ax-increase.ax-array-right .ax-plus { line-height: calc((38px + 12px)/2); } .ax-increase.ax-array-left svg, .ax-increase.ax-array-right svg { height: calc((100% + 12px)/2); } .ax-increase.ax-array-left .ax-minus, .ax-increase.ax-array-right .ax-minus { line-height: calc((38px - 12px)/2); } .ax-increase.ax-array-left svg, .ax-increase.ax-array-right svg { height: calc((100% - 12px)/2); } .ax-increase.ax-array-left .ax-minus { border-radius: 0 0 0 3px; top: auto; bottom: 0; } .ax-increase.ax-array-left .ax-plus { border-radius: 3px 0 0 0; border-right: 1px solid #e0e0e0; border-left: 0; top: 0; right: auto; left: 0; } .ax-increase.ax-array-right .ax-minus { border-radius: 0 0 3px 0; border-left: 1px solid #e0e0e0; border-right: 0; left: auto; top: auto; right: 0; bottom: 0; } .ax-increase.ax-array-right .ax-plus { border-radius: 0 3px 0 0; top: 0; } .ax-increase input { height: 100%!important; text-align: center; border: 0; } .ax-increase input:not([readonly]):not([disabled]):focus { box-shadow: 0 0 0 4px rgba(25, 140, 255, 0.2); } .ax-increase input[readonly] ~ *, .ax-increase input[disabled] ~ * { color: #b3b3b3; cursor: not-allowed; background: transparent; } .ax-increase.ax-xs { width: calc(22px*4); height: 22px; } .ax-increase.ax-xs .ax-minus, .ax-increase.ax-xs .ax-plus { line-height: calc(22px - 2px); width: 22px; } .ax-increase.ax-xs input { font-size: 12px; line-height: calc(22px - 2px); } .ax-increase.ax-xs [class*="font"] { font-size: 10px; } .ax-increase.ax-array-right.ax-xs input { padding-right: calc(10px + 22px); } .ax-increase.ax-array-left.ax-xs .ax-plus, .ax-increase.ax-array-right.ax-xs .ax-plus { line-height: calc(22px/2); } .ax-increase.ax-array-left.ax-xs .ax-minus, .ax-increase.ax-array-right.ax-xs .ax-minus { line-height: calc(22px/2); } .ax-increase.ax-sm { width: calc((38px - 10px)*4); height: calc(38px - 10px); } .ax-increase.ax-sm input { line-height: calc(38px - 12px); } .ax-increase.ax-array-right.ax-sm input { padding-right: 38px; } .ax-increase.ax-sm .ax-minus, .ax-increase.ax-sm .ax-plus { line-height: calc(38px - 12px); width: calc(38px - 10px); } .ax-increase.ax-array-left.ax-sm .ax-plus, .ax-increase.ax-array-right.ax-sm .ax-plus { line-height: calc((38px - 10px + 8px)/2); } .ax-increase.ax-array-left.ax-sm .ax-minus, .ax-increase.ax-array-right.ax-sm .ax-minus { line-height: calc((38px - 10px - 6px)/2); } .ax-increase.ax-lg { width: calc((38px + 10px)*4); height: calc(38px + 10px); } .ax-increase.ax-lg input { line-height: calc(38px + 8px); } .ax-increase.ax-array-right.ax-lg input { padding-right: calc(38px + 20px); } .ax-increase.ax-lg .ax-minus, .ax-increase.ax-lg .ax-plus { line-height: calc(38px + 8px); width: calc(38px + 10px); } .ax-increase.ax-array-left.ax-lg .ax-plus, .ax-increase.ax-array-right.ax-lg .ax-plus { line-height: calc((38px + 10px + 12px)/2); } .ax-increase.ax-array-left.ax-lg .ax-minus, .ax-increase.ax-array-right.ax-lg .ax-minus { line-height: calc((38px + 10px - 12px)/2); } /*password strength*/ .ax-strength { color: #b3b3b3; font-size: 12px; text-align: center; line-height: 0; } .ax-form-con + .ax-strength { margin-left: 8px; } .ax-form-input + .ax-strength { padding-left: 3px; padding-right: 3px; margin-top: -5px; margin-bottom: 5px; position: relative; z-index: 1; } .ax-form-input + .ax-strength .ax-bar { height: 2px; } .ax-strength .ax-bar { width: 100%; height: 3px; background-color: rgba(0, 0, 0, 0.08); } .ax-strength .ax-lv1 .ax-bar { background-color: #dc3545; } .ax-strength .ax-lv2 .ax-bar { background-color: #ff8400; } .ax-strength .ax-lv3 .ax-bar { background-color: #41a358; } .ax-strength .ax-lv4 .ax-bar { background-color: #14ccc9; } .ax-strength .ax-lv5 .ax-bar { background-color: #198cff; } .ax-strength .ax-col:nth-of-type(1) .ax-title:before { content: '很弱'; } .ax-strength .ax-col:nth-of-type(2) .ax-title:before, .ax-strength .ax-col:nth-of-type(1).ax-lv2 .ax-title:before { content: '弱'; } .ax-strength .ax-col:nth-of-type(3) .ax-title:before, .ax-strength .ax-col:nth-of-type(1).ax-lv3 .ax-title:before { content: '中'; } .ax-strength .ax-col:nth-of-type(4) .ax-title:before, .ax-strength .ax-col:nth-of-type(1).ax-lv4 .ax-title:before { content: '强'; } .ax-strength .ax-col:nth-of-type(5) .ax-title:before, .ax-strength .ax-col:nth-of-type(1).ax-lv5 .ax-title:before { content: '很强'; } .ax-strength .ax-active.ax-lv1 { color: #dc3545; } .ax-strength .ax-active.ax-lv2 { color: #ff8400; } .ax-strength .ax-active.ax-lv3 { color: #41a358; } .ax-strength .ax-active.ax-lv4 { color: #14ccc9; } .ax-strength .ax-active.ax-lv5 { color: #198cff; } .ax-strength .ax-active ~ div .ax-bar { background-color: rgba(0, 0, 0, 0.08); } .ax-strength .ax-title { width: 28px; line-height: calc(38px - 3px); } .ax-strength-svg { height: 38px; width: 38px; text-align: center; line-height: 38px; position: relative; } @keyframes strength-weak { 100% { stroke-dashoffset: -76; } } @keyframes strength-medium { 100% { stroke-dashoffset: -152; } } @keyframes strength-strong { 100% { stroke-dashoffset: -228; } } .ax-strength-svg:before { content: '弱'; color: #b3b3b3; } .ax-strength-svg svg { position: absolute; left: 0; top: 0; height: 38px; width: 38px; } .ax-strength-svg svg path { fill: none; stroke-width: 3.7253; } .ax-strength-svg path.svg-bg { stroke: #dc3545; } .ax-strength-svg path.svg-out { stroke-dasharray: 227 229; stroke: #f0f0f0; stroke-width: 5.7253; transition: all 0.8s ease-out; } .ax-strength-svg.ax-weak path.svg-bg { stroke: #dc3545; } .ax-strength-svg.ax-weak path.svg-out { stroke-dashoffset: -76; } .ax-strength-svg:before { position: relative; z-index: 2; } .ax-strength-svg.ax-weak:before { content: '弱'; color: #dc3545; } .ax-strength-svg.ax-medium path.svg-bg { stroke: #ff8400; } .ax-strength-svg.ax-medium path.svg-out { stroke-dashoffset: -152; } .ax-strength-svg.ax-medium:before { content: '中'; color: #ff8400; } .ax-strength-svg.ax-strong path.svg-bg { stroke: #41a358; } .ax-strength-svg.ax-strong path.svg-out { stroke-dashoffset: -228; } .ax-strength-svg.ax-strong:before { content: '强'; color: #41a358; } .ax-strength.ax-xs .ax-title { line-height: 19px; } .ax-strength-svg.ax-xs { height: 22px; width: 22px; line-height: 22px; } .ax-strength-svg.ax-xs svg { height: 22px; width: 22px; } .ax-strength.ax-sm .ax-title { line-height: calc(38px - 10px - 3px); } .ax-strength-svg.ax-sm { height: calc(38px - 10px); width: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-strength-svg.ax-sm svg { height: calc(38px - 10px); width: calc(38px - 10px); } /*valid*/ .ax-valid { font-size: 14px; } .ax-valid *[class*="font"] { font-size: 14px; margin-right: 2px; } .ax-form-btn { margin-left: 8px; padding: 0 14px; height: 38px; line-height: 38px; } .ax-form-txt { font-size: 14px; line-height: 38px; margin-left: 8px; } .ax-form-txt.ax-disabled { opacity: 0.3; cursor: not-allowed; } .ax-form-head { height: 38px; width: 38px; border-radius: 100%; margin-left: 8px; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; } .ax-form-img { font-size: 14px; border-radius: 3px; height: 38px; line-height: 38px; margin-left: 8px; display: block; position: relative; } .ax-form-img:before { border-radius: 3px; content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-color: rgba(0, 0, 0, 0.12); } .ax-form-img img { height: 100%; border-radius: 3px; vertical-align: top; } .ax-form-img a, .ax-form-img span, .ax-form-img i { margin: 0 14px; } .ax-bunch-txt { line-height: 38px; margin: 0 8px; } .ax-pos-right { font-size: 14px; line-height: 38px; padding-right: 10px; position: absolute; right: 0; top: 0; z-index: 2; } .ax-pos-right *[class*="font"] { color: #ccc; margin-left: 14px; } .ax-pos-right .ax-val-none:hover { color: #666666; } .ax-pos-left { line-height: 38px; padding-left: 10px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 2; } .ax-pos-left *[class*='font'] { color: #adc1cc; width: 18px; } .ax-pos-left svg { fill: #adc1cc; height: 38px; margin-right: 4px; float: left; } /*form group*/ .ax-input-group .ax-title { z-index: 2; } .ax-input-group .ax-title, .ax-input-group .ax-title:hover, .ax-input-group .ax-title:active, .ax-input-group .ax-suffix, .ax-input-group .ax-suffix:hover, .ax-input-group .ax-suffix:active { color: #333333; background-color: #fafafa; box-shadow: none; opacity: 1; } .ax-input-group .ax-title, .ax-input-group .ax-title:after { border-radius: 3px 0 0 3px; } .ax-input-group .ax-title:after { border-right: none; } .ax-input-group .ax-suffix, .ax-input-group .ax-suffix:after { border-radius: 0 3px 3px 0; } .ax-input-group .ax-operate, .ax-input-group .ax-operate:after { border-radius: 0 3px 3px 0; } .ax-input-group .ax-btn { height: 38px; line-height: 38px; padding: 0 12px; } .ax-input-group .ax-btn:hover:after { border-color: rgba(0, 0, 0, 0.12); } .ax-input-group .ax-title + div input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-input-group input:focus { border-color: #198cff !important; box-shadow: 0 0 0 1px #198cff inset; } .ax-input-group .ax-title + div .ax-file:before { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-input-group .ax-title + div .ax-file.ax-focus:before { border-color: #198cff !important; box-shadow: 0 0 0 1px #198cff inset; } /*select2 optimize*/ .ax-input-group .ax-title + div .select-text, .ax-input-group .ax-title + div select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-input-group .ax-chera { margin: 0; } .ax-input-group .ax-chera span { height: 38px; line-height: 38px; margin: 0; } .ax-input-group .ax-chera span:after { top: 13px; } .ax-input-group .ax-title + div .ax-chera span, .ax-input-group .ax-title + div .ax-chera span:before { border-radius: 0; border-right-width: 0; } .ax-input-group .ax-title + div .ax-col:last-child .ax-chera span, .ax-input-group .ax-title + div .ax-col:last-child .ax-chera span:before { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-width: 1px; } /*select2 optimize*/ .ax-input-group .ax-title-select + .select-box .select-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-input-group .ax-select-next:after { content: ''; width: 1px; height: 100%; background-color: rgba(25, 140, 255, 0.5); opacity: 0; transition: all 0.1s linear; position: absolute; left: -1px; top: 0; z-index: 2; } .ax-input-group .ax-select-next.ax-hover:after { opacity: 1; } .ax-input-group .ax-select-next input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; } .ax-input-group .ax-suffix-select + .select-box .select-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-input-group .ax-suffix-prev:after { content: ''; width: 1px; height: 100%; background-color: rgba(25, 140, 255, 0.5); opacity: 0; transition: all 0.1s linear; position: absolute; right: -1px; top: 0; z-index: 2; } .ax-input-group .ax-suffix-prev.ax-hover:after { opacity: 1; } .ax-input-group .ax-suffix-prev input { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; z-index: 2; } /*list fast*/ .ax-fast-active { position: relative; z-index: 4; } .ax-fast-list { width: 100%; max-height: 176px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; box-sizing: border-box; border-radius: 0 0 3px 3px; background-color: #fff; position: absolute; left: 0; top: calc(100% - 1px); display: none; } .ax-fast-input[type="text"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } /*search*/ .ax-search { box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; zoom: 1; } .ax-search .ax-search-center { display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; min-width: 0; position: relative; } .ax-search .ax-search-center input[type="text"] { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-search .ax-search-center input[type="text"]:focus { border-color: #198cff !important; box-shadow: 0 0 0 1px #198cff inset; } .ax-search .ax-search-center:hover input[type="text"] { border-color: rgba(25, 140, 255, 0.5); } .ax-search > select + span + .ax-search-center input[type="text"] { border-left-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-search .ax-complete { display: block; } .ax-search .ax-operate { font-size: 14px; line-height: 22px; padding-right: 6px; text-align: center; position: absolute; right: 0; top: calc((38px - 22px)/2); z-index: 2; } .ax-search .ax-operate *[class*="font"] { color: #ccc; height: 22px; width: 22px; border-radius: 22px; margin-left: 4px; } .ax-search .ax-operate *[class*="font"]:hover { color: #198cff; background-color: #f0f7ff; } .ax-search .ax-operate *[class*="reset"] { display: none; } .ax-search .ax-operate *[class*="reset"]:hover { color: #333333; background-color: #f0f0f0; } .ax-search .ax-search-center .ax-adorn { color: #ccc; line-height: 38px; padding-left: 10px; position: absolute; left: 0; top: 0; z-index: 2; } .ax-search .ax-search-center .ax-adorn + input[type="text"], .ax-search .ax-search-center .ax-adorn + .ax-complete > input[type="text"] { padding-left: 34px; } .ax-search .ax-search-start { color: #b3b3b3; height: 38px; line-height: calc(38px - 2px); border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding-left: 10px; box-sizing: border-box; } .ax-search .ax-search-end { height: 38px; line-height: calc(38px - 2px); background-color: #fafafa; border: 1px solid #e0e0e0; border-left-width: 0; padding-left: calc(14px*2); padding-right: calc(14px*2); box-sizing: border-box; border-top-right-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer; transition: all 0.1s linear; } .ax-search .ax-search-end:hover { color: #198cff; border-color: #e0e0e0 !important; } .ax-search .select-box-ax .select-single, .ax-search .select-box-ax .select-multiple { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-search.ax-dark .ax-search-end, .ax-search.ax-dark .ax-search-end:hover { color: #fff; background-color: #198cff; border-color: #198cff !important; } .ax-search.ax-dark .ax-search-center input[type="text"] { border-color: #198cff; box-shadow: 0 0 0 1px #198cff inset; } .ax-search.ax-dark .ax-search-center:hover input[type="text"] { border-color: #198cff; } .ax-search.ax-dark > select + span + .ax-search-center input[type="text"] { border-left-width: 0; box-shadow: -1px 0 0 1px #198cff inset; } .ax-search.ax-dark .select-box-ax .select-single { border-color: #198cff; border-top-width: 2px; border-bottom-width: 2px; border-left-width: 2px; } .ax-search.ax-round .ax-search-end { border-top-right-radius: calc(38px/2); border-bottom-right-radius: calc(38px/2); } .ax-search.ax-round .select-box-ax .select-single { border-top-left-radius: calc(38px/2); border-bottom-left-radius: calc(38px/2); } .ax-search.ax-round .ax-search-center input[type="text"], .ax-search.ax-round .ax-search-center .ax-complete > input[type="text"] { border-top-left-radius: calc(38px/2); border-bottom-left-radius: calc(38px/2); padding-left: 16px; } .ax-search.ax-round > select + span + .ax-search-center input[type="text"], .ax-search.ax-round > select + span + .ax-search-center .ax-complete > input[type="text"] { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-search.ax-round > select + span + .ax-search-center input[type="text"], .ax-search.ax-round > select + span + .ax-search-center .ax-complete > input[type="text"] { padding-left: 10px; } .ax-search.ax-round .ax-search-center .ax-adorn + input[type="text"], .ax-search.ax-round .ax-search-center .ax-adorn + .ax-complete > input[type="text"] { padding-left: 34px; } .ax-search.ax-square .ax-search-end { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ax-search.ax-square .select-box-ax .select-single { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ax-search.ax-square .ax-search-center input[type="text"], .ax-search.ax-square .ax-search-center .ax-complete > input[type="text"] { border-top-left-radius: 0; border-bottom-left-radius: 0; } /*emulate tel*/ .ax-emulate .ax-form-group { padding: 0 14px; } .ax-emulate .ax-form-con { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; } .ax-emulate .ax-form-input { width: 100%; } .ax-emulate textarea { height: 88px; line-height: calc(38px - 10px); padding-top: 0; padding-bottom: 0; } .ax-emulate input[type="text"], .ax-emulate input[type="search"], .ax-emulate input[type="url"], .ax-emulate input[type="email"], .ax-emulate input[type="number"], .ax-emulate input[type="password"], .ax-emulate select, .ax-emulate textarea { border: 0px; } .ax-emulate input[type="text"], .ax-emulate input[type="search"], .ax-emulate input[type="url"], .ax-emulate input[type="email"], .ax-emulate input[type="number"], .ax-emulate input[type="password"], .ax-emulate select { height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-emulate input[type="text"]:not([readonly]):not([class*='ax-check']), .ax-emulate input[type="text"][readonly].mbsc-comp, .ax-emulate input[type="search"]:not([readonly]):not([class*='ax-check']), .ax-emulate input[type="url"]:not([readonly]):not([class*='ax-check']), .ax-emulate input[type="email"]:not([readonly]):not([class*='ax-check']), .ax-emulate input[type="number"]:not([readonly]):not([class*='ax-check']), .ax-emulate input[type="password"]:not([readonly]):not([class*='ax-check']), .ax-emulate textarea:not([readonly]):not([class*='ax-check']) { padding-left: 0; padding-right: 0; } .ax-emulate input[type="text"]:focus, .ax-emulate input[type="search"]:focus, .ax-emulate input[type="url"]:focus, .ax-emulate input[type="email"]:focus, .ax-emulate input[type="number"]:focus, .ax-emulate input[type="password"]:focus, .ax-emulate select:focus, .ax-emulate textarea:focus { border: 0px; box-shadow: none; } .ax-emulate .ax-form-btn { font-size: 12px; height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-emulate .ax-form-btn.ax-icon { font-size: 12px; width: calc(38px - 10px); } .ax-emulate .ax-form-btn.ax-icon .ax-iconfont { font-size: 12px!important; } .ax-emulate .ax-form-btn.ax-icon svg { width: 12px; height: 12px; } .ax-emulate .ax-form-label { height: calc(38px - 10px); line-height: calc((38px - 10px)/2); width: 70px; text-align: left; margin-right: 0; justify-content: flex-start; } .ax-emulate .ax-form-txt { line-height: calc(38px - 10px); margin-left: 8px; } .ax-emulate .ax-form-group { padding: 8px 14px; } .ax-emulate .ax-pos-right { right: -10px; line-height: calc(38px - 10px); } .ax-emulate .ax-form-head { height: calc(38px - 10px); width: calc(38px - 10px); } .ax-emulate .ax-file:before { height: calc(38px - 10px); line-height: calc(38px - 12px); border: none; padding-left: 0; } .ax-emulate .ax-file.ax-focus:before { box-shadow: none; } .ax-emulate .ax-file:after { font-size: 12px; border-radius: 3px; height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-emulate .ax-bunch-txt { line-height: calc(38px - 10px); } .ax-emulate .ax-bunch-txt:last-child { margin-right: 0; } .ax-emulate .ax-form-img { height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-emulate .ax-form-img:before { display: none; } .ax-emulate .ax-form-img a, .ax-emulate .ax-form-img span, .ax-emulate .ax-form-img i { margin: 0; } .ax-emulate .ax-pos-left { height: calc(38px - 10px); line-height: calc(38px - 10px); padding-left: 0; } .ax-emulate .ax-pos-left svg { height: calc(38px - 10px); } .ax-emulate .select-box { margin-top: calc((-38px + 28px)/2); margin-bottom: calc((-38px + 28px)/2); width: 100%!important; } .ax-emulate .select-box-ax:not(.select-box-open) .select-single, .ax-emulate .select-box-ax:not(.select-box-open) .select-multiple { border-color: rgba(255, 255, 255, 0); } .ax-emulate .ax-radio, .ax-emulate .ax-checkbox, .ax-emulate .ax-chera, .ax-emulate .ax-switch { margin-top: calc((-38px + 28px)/2); margin-bottom: calc((-38px + 28px)/2); } .ax-emulate .ax-chera span:before { border: none!important; } .ax-emulate .ax-increase { width: calc(28px*4); height: 28px; border: none; } .ax-emulate .ax-increase .ax-minus, .ax-emulate .ax-increase .ax-plus { width: 28px; line-height: calc(28px - 2px); border-radius: 28px; border: 1px solid #e0e0e0; } .ax-emulate .ax-increase input:not([readonly]):not([disabled]):focus { box-shadow: none; } .ax-emulate .ax-input-group .ax-btn { height: calc(38px - 10px); line-height: calc(38px - 10px); font-size: 12px; } .ax-emulate .ax-input-group .ax-operate, .ax-emulate .ax-input-group .ax-operate:after { border-radius: 3px; } .ax-emulate .irs--ax { margin-top: calc((-38px + 28px)/2); } .ax-emulate .mbsc-fr-inline { border-top: 1px solid #ebebeb; } .ax-emulate .ax-strength .ax-bar { height: 2px; } .ax-emulate .ax-strength .ax-title { line-height: calc(38px - 10px - 2px); } .ax-emulate .ax-strength-svg svg { width: calc(38px - 10px); height: calc(38px - 10px); } .ax-emulate .ax-strength-svg { width: calc(38px - 10px); height: calc(38px - 10px); line-height: calc(38px - 10px); } /*table*/ .ax-table { font-size: 14px; width: 100%; border-collapse: collapse; border-radius: 3px; border-top: 1px solid #ebebeb; background-color: #fff; border-spacing: 0; } .ax-table tr { border-bottom: 1px solid #ebebeb; padding: 5px; transition: all 0.1s linear; } /*list.js table sortable*/ .ax-table [data-sort] { cursor: pointer; } .ax-table [data-sort] span:after { content: '\2666'; color: transparent; font-weight: normal; font-size: 18px; line-height: 14px; margin-left: 4px; margin-top: -2px; background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; transition: all 0.1s linear; } .ax-table [data-sort][class*='asc'] span:after { background: linear-gradient(to bottom, #666666 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; } .ax-table [data-sort][class*='desc'] span:after { background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #666666 63%, #666666 100%); background-clip: text; -webkit-background-clip: text; } .ax-table th { font-size: 14px; line-height: 18px; text-align: center; text-transform: none; padding: 10px 0; } .ax-table td { line-height: 18px; text-align: center; padding: 10px 0; } .ax-table td .ax-align-left, .ax-table th .ax-align-left { margin: 0 14px; } .ax-table.ax-align-left td, .ax-table.ax-align-left th { text-align: left; padding-left: 14px; padding-right: 14px; } .ax-table .ax-avatar { margin-top: calc((-22px + 18px)/2); margin-bottom: calc((-22px + 18px)/2); } .ax-table.ax-stripe tbody tr:nth-child(odd), .ax-table.ax-stripe-odd tbody tr:nth-child(odd) { background-color: #fafafa; } .ax-table.ax-stripe-even tbody tr:nth-child(even) { background-color: #fafafa; } .ax-table.ax-stripe-none tbody tr { background: transparent; } .ax-table.ax-hover tbody tr:not(.ax-selected):hover { background-color: #f5f5f5; } .ax-table.ax-hover-none tbody tr:not(.ax-selected):hover { background: transparent; } .ax-table tbody tr.ax-selected, .ax-table tbody td.ax-selected { background-color: #f0f7ff; } .ax-table.ax-order *[class*="ax-sorting-"] { background-color: rgba(0, 0, 0, 0.02); } /*datatables sort*/ .ax-table thead *[class*='sorting'] { position: relative; cursor: pointer; } .ax-table thead *[class*='sorting']:after { content: '\2666'; color: transparent; font-weight: normal; font-size: 18px; line-height: 14px; margin-left: 4px; margin-top: -2px; transition: all 0.1s linear; } .ax-table thead .ax-sorting:after { background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead .ax-sorting-asc:after { background: linear-gradient(to bottom, #666666 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead .ax-sorting-desc:after { background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #666666 63%, #666666 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead[class*='-sorting'] .ax-align-left { float: left; width: calc(100% - 14px*4); } .ax-table thead[class*='-sorting'] .ax-align-right { float: right; width: calc(100% - 14px*4); } .ax-table thead .ax-sorting-disabled:before, .ax-table thead .ax-sorting-disabled:after { display: none; margin: 0!important; } .ax-table tfoot .left { text-align: left; margin-left: 14px; } .ax-table tfoot .right { text-align: right; margin-right: 14px; } .ax-table .ax-btn.ax-xs { margin-top: calc((-22px + 18px)/2); margin-bottom: calc((-22px + 18px)/2); } .ax-table .ax-btn.ax-icon.ax-xs { position: relative; } .ax-table .ax-operate { margin-top: calc((-22px + 18px)/2); margin-bottom: calc((-22px + 18px)/2); } .ax-table .ax-operate [class*="font"] { color: #b3b3b3; font-size: 14px; height: 22px; line-height: 22px; width: 22px; text-align: center; box-sizing: border-box; position: relative; } .ax-table .ax-operate [class*="font"].ax-color-forbid { color: rgba(179, 179, 179, 0.5); cursor: not-allowed; } .ax-table .ax-operate [class*="font"] .ax-dot { position: absolute; right: 0; top: 0; } .ax-table tbody tr:hover .ax-operate [class*="font"] { color: #666666; } .ax-table tbody tr:hover .ax-operate [class*="font"].ax-color-forbid { color: rgba(179, 179, 179, 0.5); } .ax-table .ax-operate [class*="font"]:hover { background-color: #fff; border: 1px solid #ebebeb; line-height: calc(22px - 2px); border-radius: 3px; } .ax-table .ax-operate [class*="font"]:hover .ax-dot { right: -1px; top: -1px; } .ax-table .ax-ell { max-width: 160px; } .ax-table .ax-form-input { width: 100%; } .ax-table .ax-radio.ax-xs, .ax-table .ax-checkbox.ax-xs, .ax-table select.ax-xs, .ax-table .ax-form-group.ax-xs, .ax-table td > input.ax-xs { margin-top: calc((-22px + 18px)/2); margin-bottom: calc((-22px + 18px)/2); } .ax-table .ax-select.ax-xs + span { margin-top: calc(((-22px + 18px)/2) - 4px); margin-bottom: calc((-22px + 18px)/2); } .ax-table .ax-select, .ax-table select { width: 120px; } .ax-table th > input[type='text'], .ax-table td > input[type='text'], .ax-table th > input[type='search'], .ax-table td > input[type='search'] { width: 120px; max-width: 100%; } .ax-table.ax-order *[class*="ax-sorting-"] { background-color: rgba(0, 0, 0, 0.02); } .ax-table thead *[class*='sorting'] { position: relative; cursor: pointer; } .ax-table thead *[class*='sorting']:after { content: '\2666'; color: transparent; font-weight: normal; font-size: 18px; line-height: 14px; margin-left: 4px; margin-top: -2px; transition: all 0.1s linear; } .ax-table thead .ax-sorting:after { background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead .ax-sorting-asc:after { background: linear-gradient(to bottom, #666666 54%, transparent 54%, transparent 63%, #ccc 63%, #ccc 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead .ax-sorting-desc:after { background: linear-gradient(to bottom, #ccc 54%, transparent 54%, transparent 63%, #666666 63%, #666666 100%); background-clip: text; -webkit-background-clip: text; } .ax-table thead[class*='-sorting'] .ax-align-left { float: left; width: calc(100% - 14px*4); } .ax-table thead[class*='-sorting'] .ax-align-right { float: right; width: calc(100% - 14px*4); } .ax-table-wrapper:after { content: '.'; visibility: hidden; clear: both; display: block; height: 0px; } .ax-table-wrapper div:first-child + .ax-break { height: 0; } .ax-table-wrapper .ax-table-info { color: #666666; margin-right: 14px; float: left; } .ax-table-wrapper .ax-table-info > span { margin-left: 14px; } .ax-table-wrapper .ax-table-processing { color: #666666; text-align: center; margin: 14px auto; } .ax-table-wrapper .ax-pagination { margin-top: 0; margin-bottom: 0; } .ax-table-wrapper .ax-table-length { color: #666666; float: left; } .ax-table-wrapper .ax-table-length .ax-col { margin: 0 4px; } .ax-table-wrapper .ax-table-filter { float: right; } .ax-table-wrapper .ax-table-filter .ax-btn { margin-left: 4px; } .ax-table-wrapper *[class*='-pagination'] { text-align: right; float: right; } .ax-table-wrapper .ax-overlay { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); cursor: pointer; position: absolute; top: 0; left: 0; z-index: 2; } .ax-table-wrapper .ax-table-button { position: relative; } .ax-table-wrapper .ax-table-button > .ax-btn.ax-last + .ax-overlay + .ax-collection { left: auto!important; right: 0; } .ax-table-wrapper .ax-table-button.ax-float-left { margin-right: 14px; } .ax-table-wrapper .ax-table-button.ax-float-right { margin-left: 14px; } .ax-table-wrapper .ax-table-button .ax-collection { width: 120px; text-align: center; background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; position: absolute; z-index: 2; } .ax-table-wrapper .ax-table-button .ax-collection .ax-btn { border-width: 0 0 1px 0; border-radius: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; width: 100%; } .ax-table-wrapper .ax-table-button .ax-collection button.ax-btn { border-width: 0 0 1px 0; } .ax-table-wrapper .ax-table-button .ax-collection a.ax-btn:after { border-width: 0 0 1px 0; border-radius: 0; } .ax-table-wrapper .ax-table-button .ax-collection .ax-btn.ax-active:not(.ax-disabled) { color: #198cff; background-color: #f0f7ff; } .ax-table-wrapper .ax-table-button .ax-collection .ax-btn:not(.ax-disabled):hover, .ax-table-wrapper .ax-table-button .ax-collection .ax-btn:not(.ax-disabled):hover:after { box-shadow: none; border-color: #e0e0e0; } .ax-table-wrapper .ax-table-button .ax-collection-list .ax-btn:first-child, .ax-table-wrapper .ax-table-button .ax-collection-list .ax-btn:first-child:after { border-top-left-radius: 3px; border-top-right-radius: 3px; } .ax-table-wrapper .ax-table-button .ax-collection-list .ax-btn:last-child, .ax-table-wrapper .ax-table-button .ax-collection-list .ax-btn:last-child:after { border-width: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .ax-table-wrapper .ax-table-button .ax-collection-title { color: #666666; line-height: 28px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ax-table-wrapper .ax-table-button .ax-collection-title:empty { display: none; } .ax-table-wrapper .ax-empty { color: #b3b3b3; } .ax-table.fixedHeader-floating { background-color: #fff; border-top-width: 0; position: fixed; z-index: 4; } .ax-table.fixedHeader-locked { position: absolute; } .ax-table-wrapper .DTFC_LeftHeadWrapper, .ax-table-wrapper .DTFC_LeftBodyWrapper, .ax-table-wrapper .DTFC_LeftFootWrapper { border-right: 1px solid #ebebeb; } .ax-table-wrapper .DTFC_RightHeadWrapper, .ax-table-wrapper .DTFC_RightBodyWrapper, .ax-table-wrapper .DTFC_RightFootWrapper { border-left: 1px solid #ebebeb; } .ax-table-wrapper .DTFC_Blocker { background-color: #fff; } .ax-table.DTFC_Cloned { background-color: #fafafa; } .ax-table tr[style*='height:0px'], .ax-table tr[style*='height: 0px'] { border-width: 0; border-color: transparent; opacity: 0; transition-property: none; overflow: hidden; } .ax-table tr[style*='height:0px'] th:after, .ax-table tr[style*='height: 0px'] th:after { display: none; } .DTFC_LeftBodyWrapper .ax-table, .DTFC_RightBodyWrapper .ax-table, .dataTables_scrollBody .ax-table { border-width: 0; } .ax-table-wrapper .dataTables_scrollBody .ax-table + .ax-break { display: none; } .ax-table-wrapper .dataTables_scroll { position: relative; } .ax-table-wrapper .dataTables_scroll:after { content: ''; height: 1px; width: 100%; background-color: #ebebeb; position: absolute; left: 0; bottom: 0; } .ax-table.ax-nowrap td, .ax-table.ax-nowrap th { white-space: nowrap; padding-left: 14px; padding-right: 14px; } .ax-table td.ax-select-checkbox, .ax-table th.ax-select-checkbox { position: relative; } .ax-table td.ax-select-checkbox:before, .ax-table th.ax-select-checkbox:before { content: ''; width: 16px; height: 16px; display: inline-block; box-sizing: border-box; border-radius: 3px; cursor: pointer; border: 1px solid #e0e0e0; transition: all 0.2s ease-out; position: relative; top: 1px; } .ax-table tr.ax-selected td.ax-select-checkbox:before { border-color: #198cff; background-color: #198cff; } .ax-table tr th.ax-select-checkbox.ax-selected:before { border-color: #198cff; background-color: #198cff; } .ax-table tr.ax-selected td.ax-select-checkbox:after { content: ''; width: 10px; height: 6px; border-radius: 0 6px 0 0; cursor: pointer; box-shadow: -2px 2px 0 0 #fff; display: inline-block; position: absolute; top: 12px; left: 8px; transform: rotate(-45deg) scale(1); } .ax-table tr th.ax-select-checkbox.ax-selected:after { content: ''; width: 10px; height: 6px; border-radius: 0 6px 0 0; cursor: pointer; box-shadow: -2px 2px 0 0 #fff; display: inline-block; position: absolute; top: 12px; left: 8px; transform: rotate(-45deg) scale(1); } .ax-table td.ax-focus { box-shadow: inset 0 0 0 2px #198cff; } .ax-table.ax-response td:not(.child), .ax-table.ax-response th:not(.child) { white-space: nowrap; padding-left: 14px; padding-right: 14px; } .ax-table.ax-response tr > td.dtr-control, .ax-table.ax-response tr > th.dtr-control { position: relative; } .ax-table.ax-response tr > td.dtr-control:before { content: ''; width: 8px; height: 2px; background-color: #198cff; position: absolute; left: 0; top: calc((38px - 2px)/2); } .ax-table.ax-response tr > td.dtr-control:after { content: ''; width: 2px; height: 8px; background-color: #198cff; position: absolute; left: calc((8px - 2px)/2); top: calc((38px - 8px)/2); } .ax-table.ax-response tr.parent > td.dtr-control:before { background-color: #666666; } .ax-table.ax-response tr.parent > td.dtr-control:after { display: none; } .ax-table.ax-response tr.child ul.dtr-details { line-height: 28px; text-align: left; } .ax-table.ax-response tr.child ul.dtr-details li { padding-left: 18px; transition: all 0.1s linear; } .ax-table.ax-response tr.child ul.dtr-details li:hover { background-color: #f5f5f5; } .ax-table.ax-response tr.child span.dtr-title { min-width: 96px; } .ax-table.ax-response tr.child span.dtr-title:after { content: ':'; } .ax-table .ax-parent span { float: left; font-weight: bold; } .ax-table .ax-parent i, .ax-table .ax-parent s { color: #b3b3b3; margin-left: 14px; cursor: pointer; float: right; } /* ax popup */ .ax-popup-content { display: none; } .ax-popup-rtl { direction: rtl; text-align: right; } .ax-popup { min-width: 100px; background-color: #fff; background-clip: padding-box; -webkit-background-clip: padding-box; border: 1px solid #ebebeb; border-radius: 3px; text-align: left; white-space: normal; padding: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; z-index: 9999; display: none; } .ax-popup.ax-top, .ax-popup.ax-top-left, .ax-popup.ax-top-right { margin-top: -8px; } .ax-popup.ax-right, .ax-popup.ax-right-top, .ax-popup.ax-right-bottom { margin-left: 8px; } .ax-popup.ax-bottom, .ax-popup.ax-bottom-left, .ax-popup.ax-bottom-right { margin-top: 8px; } .ax-popup.ax-left, .ax-popup.ax-left-top, .ax-popup.ax-left-bottom { margin-left: -8px; } .ax-popup.ax-pop { transform: scale(0.8); transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); opacity: 0; filter: alpha(opacity=0); } .ax-popup.ax-pop-out { transition: 0.15s linear; opacity: 0; } .ax-popup.ax-fade, .ax-popup.ax-fade-out { transition: opacity 0.15s linear; opacity: 0; } .ax-popup.ax-out { opacity: 0; filter: alpha(opacity=0); } .ax-popup.ax-in { transform: none; opacity: 1; } .ax-popup .ax-popup-content { max-width: 1000px; max-height: 600px; box-sizing: border-box; padding: 14px; display: block; } .ax-popup .ax-popup-content > div:first-child { width: 100%; } .ax-popup-inner > .ax-close { font-family: arial; font-size: 22px; color: #ccc; text-shadow: 0 1px 0 #fff; text-decoration: none; text-align: center; line-height: 38px; width: 38px; position: absolute; right: 0; top: 0; } .ax-popup-inner > .ax-close:hover, .ax-popup-inner > .ax-close:focus { color: #dc3545; } .ax-popup-inner > .ax-close:after { content: "\00D7"; width: 38px; height: 38px; } .ax-popup-title { font-size: 14px; font-weight: bold; line-height: 38px; background-color: #fff; padding: 0 14px; margin: 0; border-bottom: 1px solid #ebebeb; border-radius: 3px 3px 0 0; } .ax-popup-inverse { color: #fff; background-color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: none; box-shadow: none; border: none; } .ax-popup-inverse .ax-popup-inner .ax-close { color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .ax-popup-inverse .ax-popup-inner .ax-close:hover, .ax-popup-inverse .ax-popup-inner .ax-close:focus { color: #000; } .ax-popup-inverse .ax-popup-title { color: #fff; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ax-no-padding .ax-popup-content { padding: 0; } .ax-no-padding .list-group-item { border-right: none; border-left: none; } .ax-no-padding .list-group-item:first-child { border-top: 0; } .ax-no-padding .list-group-item:last-child { border-bottom: 0; } .ax-popup.ax-center { position: fixed; } .ax-popup > .ax-arrow, .ax-popup > .ax-arrow:after { width: 0; height: 0; border-color: transparent; border-style: solid; position: absolute; display: block; } .ax-popup > .ax-arrow { border-width: 8px; } .ax-popup > .ax-arrow:after { content: ""; border-width: 8px; } .ax-popup.ax-top > .ax-arrow, .ax-popup.ax-top-right > .ax-arrow, .ax-popup.ax-top-left > .ax-arrow { margin-left: -8px; border-top-color: #ebebeb; border-bottom-width: 0; bottom: -8px; left: 50%; } .ax-popup.ax-top > .ax-arrow:after, .ax-popup.ax-top-right > .ax-arrow:after, .ax-popup.ax-top-left > .ax-arrow:after { content: " "; margin-left: -8px; border-top-color: #fff; border-bottom-width: 0; bottom: 1px; } .ax-popup.ax-right > .ax-arrow, .ax-popup.ax-right-top > .ax-arrow, .ax-popup.ax-right-bottom > .ax-arrow { margin-top: -8px; border-left-width: 0; border-right-color: #ebebeb; top: 50%; left: -8px; } .ax-popup.ax-right > .ax-arrow:after, .ax-popup.ax-right-top > .ax-arrow:after, .ax-popup.ax-right-bottom > .ax-arrow:after { content: " "; border-left-width: 0; border-right-color: #fff; left: 1px; bottom: -8px; } .ax-popup.ax-bottom > .ax-arrow, .ax-popup.ax-bottom-right > .ax-arrow, .ax-popup.ax-bottom-left > .ax-arrow { margin-left: -8px; border-bottom-color: #ebebeb; border-top-width: 0; top: -8px; left: 50%; } .ax-popup.ax-bottom > .ax-arrow:after, .ax-popup.ax-bottom-right > .ax-arrow:after, .ax-popup.ax-bottom-left > .ax-arrow:after { content: " "; margin-left: -8px; border-bottom-color: #fff; border-top-width: 0; top: 1px; } .ax-popup.ax-left > .ax-arrow, .ax-popup.ax-left-top > .ax-arrow, .ax-popup.ax-left-bottom > .ax-arrow { margin-top: -8px; border-right-width: 0; border-left-color: #ebebeb; top: 50%; right: -8px; } .ax-popup.ax-left > .ax-arrow:after, .ax-popup.ax-left-top > .ax-arrow:after, .ax-popup.ax-left-bottom > .ax-arrow:after { content: " "; border-right-width: 0; border-left-color: #fff; bottom: -8px; right: 1px; } .ax-popup-inverse.ax-top > .ax-arrow, .ax-popup-inverse.ax-top-left > .ax-arrow, .ax-popup-inverse.ax-top-right > .ax-arrow, .ax-popup-inverse.ax-top > .ax-arrow:after, .ax-popup-inverse.ax-top-left > .ax-arrow:after, .ax-popup-inverse.ax-top-right > .ax-arrow:after { border-top-color: rgba(0, 0, 0, 0.5); } .ax-popup-inverse.ax-right > .ax-arrow, .ax-popup-inverse.ax-right-top > .ax-arrow, .ax-popup-inverse.ax-right-bottom > .ax-arrow, .ax-popup-inverse.ax-right > .ax-arrow:after, .ax-popup-inverse.ax-right-top > .ax-arrow:after, .ax-popup-inverse.ax-right-bottom > .ax-arrow:after { border-right-color: rgba(0, 0, 0, 0.5); } .ax-popup-inverse.ax-bottom > .ax-arrow, .ax-popup-inverse.ax-bottom-left > .ax-arrow, .ax-popup-inverse.ax-bottom-right > .ax-arrow, .ax-popup-inverse.ax-bottom > .ax-arrow:after, .ax-popup-inverse.ax-bottom-left > .ax-arrow:after, .ax-popup-inverse.ax-bottom-right > .ax-arrow:after { border-bottom-color: rgba(0, 0, 0, 0.5); } .ax-popup-inverse.ax-left > .ax-arrow, .ax-popup-inverse.ax-left-top > .ax-arrow, .ax-popup-inverse.ax-left-bottom > .ax-arrow, .ax-popup-inverse.ax-left > .ax-arrow:after, .ax-popup-inverse.ax-left-top > .ax-arrow:after, .ax-popup-inverse.ax-left-bottom > .ax-arrow:after { border-left-color: rgba(0, 0, 0, 0.5); } .ax-popup i.ax-refresh:before { content: ""; } .ax-popup i.ax-refresh { width: 30px; height: 30px; font-size: 20px; margin-left: -15px; margin-right: -15px; background: url(../images/loading.gif) no-repeat; display: block; position: absolute; top: 50%; left: 50%; } .ax-popup-backdrop { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); position: fixed; top: 0; left: 0; z-index: 9998; } .ax-popup .ax-dropdown-menu { border: none; box-shadow: none; float: none; display: block; position: relative; top: 0; } .ax-popup-hide { display: none; } .ax-popup .ax-operate { text-align: center; line-height: 38px; } .ax-popup .ax-operate .ax-gutter-line { height: 38px; } .pop_btns { overflow: hidden; } .pop_btns .app_list_block:hover { background-color: #f5f5f5; } .pop_btns .app_list_block:hover *[class*="font"] { color: #808080; } .pop_btns .app_list_block { font-size: 12px; padding: 0 8px; } .pop_btns .app_list_block *[class*="font"] { margin-right: 8px; color: #ccc; } /*axPopover end*/ /*grade menu*/ .ax-grade { position: relative; } .ax-grade .ax-outer { box-sizing: border-box; transform: translate(-50%, 0); background-color: #fff; display: none; position: absolute; top: calc(100%); left: 50%; z-index: 3; } .ax-grade:hover .ax-outer { display: block; } .ax-grade.ax-right .ax-outer { top: 0; left: auto; right: -148px; transform: none; } .ax-grade.ax-right .ax-outer:before { content: ''; width: 10px; height: 38px; position: absolute; left: -10px; top: 0; } .ax-grade .ax-outer, .ax-grade ul.ax-outer ul { width: 140px; box-sizing: border-box; border: 1px solid #ebebeb; border-radius: 3px; } .ax-grade ul.ax-outer li { text-align: left; line-height: 38px; width: 100%; box-sizing: border-box; position: relative; border-bottom: 1px solid #ebebeb; } .ax-grade ul.ax-outer li:last-child, .ax-grade ul.ax-outer ul li:last-child { border-width: 0; } .ax-grade ul.ax-outer li *[class*="-right"] { color: #ccc; position: absolute; right: 8px; top: 0; } .ax-grade ul.ax-outer li ul { box-sizing: border-box; background-color: #fff; -webkit-transform: translate(100%, 0%); transform: translate(100%, 0%); position: absolute; width: 100%; top: -1px; right: 0; display: none; } .ax-grade ul.ax-outer li:hover { color: #198cff; background-color: #f0f7ff; } .ax-grade ul.ax-outer li:hover svg { fill: #198cff; } .ax-grade ul.ax-outer li.ax-selected, .ax-grade ul.ax-outer li.ax-selected:hover { color: #fff; background-color: #198cff; } .ax-grade ul.ax-outer li.ax-selected *[class*="-right"] { color: rgba(255, 255, 255, 0.5); } .ax-grade ul.ax-outer li.ax-selected svg { fill: rgba(255, 255, 255, 0.5); } .ax-grade ul.ax-outer a { box-sizing: border-box; padding: 0 8px 0 8px; transition: all 0.1s linear; display: block; } .ax-grade ul.ax-outer li.ax-selected > a, .ax-grade ul.ax-outer li.ax-selected:hover > a { color: #fff; background-color: #198cff; } .ax-grade ul.ax-outer li:hover > a + ul, .ax-grade ul.ax-outer li:hover > *[class*="-right"] + ul { display: block; } .ax-grade ul.ax-outer li a *[class*="font"] { margin-right: 4px; } .ax-grade ul.ax-outer li a svg { margin-right: 4px; } /*header*/ .ax-space-header { height: calc(44px + 10px); overflow: hidden; } .ax-header.ax-inherit + .ax-space-header { display: none; } .ax-header { background-color: #fff; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); transition: all 0.1s linear; position: fixed; width: 100%; left: 0; top: 0; z-index: 5; } .ax-header.ax-inherit { position: inherit; left: auto; top: auto; } .ax-header .ax-logo { height: calc(44px + 10px); transition: all 0.2s linear; vertical-align: middle; position: relative; } .ax-header .ax-logo img, .ax-header .ax-logo svg { height: calc(44px + 10px); } .ax-header .ax-col { overflow: hidden; } .ax-header .ax-nav .ax-item { margin: 0 16px; display: inline-block; vertical-align: middle; position: relative; } .ax-header .ax-nav .ax-item a { transition: all 0.2s linear; } .ax-header .ax-nav .ax-item a.ax-text > i { font-size: 10px; line-height: 14px; vertical-align: middle; margin-left: 4px; } .ax-header .ax-nav .ax-item a.ax-text { line-height: calc(44px + 10px); width: 100%; text-align: center; } .ax-header .ax-nav .ax-item .ax-line { height: 2px; background-color: #198cff; width: 28px; -webkit-transform: translate(-50%, 0) scaleX(0); transform: translate(-50%, 0) scaleX(0); transition: all 0.2s linear; position: absolute; left: 50%; top: calc(44px + 10px - 2px); } .ax-header .ax-nav .ax-item.ax-selected > a { color: #198cff; } .ax-header .ax-nav .ax-item.ax-selected .ax-line { -webkit-transform: translate(-50%, 0) scaleX(1); transform: translate(-50%, 0) scaleX(1); } .ax-header .ax-nav .ax-item:hover .ax-line { -webkit-transform: translate(-50%, 0) scaleX(1); transform: translate(-50%, 0) scaleX(1); } .ax-header .ax-back { font-size: 18px; color: #666666; width: calc(44px + 10px); height: calc(44px + 10px); line-height: calc(44px + 10px); text-align: center; position: relative; } .ax-header .ax-back:after { content: ''; width: 1px; height: 24px; background-color: #ebebeb; position: absolute; right: -1px; top: calc((44px + 10px - 24px)/2); } .ax-header .ax-title { height: calc(44px + 10px); overflow: hidden; display: flex; align-items: center; padding: 0 14px; } .ax-header .ax-title .ax-outer { width: 100%; } .ax-header .ax-title .ax-row01 { font-size: 16px; width: 100%; line-height: 22px; } .ax-header .ax-title .ax-row02 { font-size: 12px; color: #ccc; width: 100%; line-height: 14px; } .ax-header .ax-search { width: 200px; height: 34px; margin: 0 14px; vertical-align: middle; position: relative; display: inline-block; } .ax-header .ax-search input { height: calc(44px - 10px); line-height: calc(44px - 10px); width: 100%; padding-right: 44px; position: absolute; top: 0; left: 0; } .ax-header .ax-search *[class*="search"] { color: #ccc; text-align: center; line-height: calc(44px - 10px); width: calc(44px - 10px); height: calc(44px - 10px); position: absolute; right: 0; top: 0; z-index: 2; } .ax-header .ax-search *[class*="search"]:after { content: ''; width: 1px; height: 16px; background-color: #f0f0f0; position: absolute; left: -1px; top: 9px; } .ax-header .ax-login { margin-left: 14px; margin-right: 14px; vertical-align: middle; position: relative; display: inline-block; } .ax-header .ax-login a { height: calc(44px - 10px); line-height: calc(44px - 10px - 2px); box-sizing: border-box; padding: 0 14px; text-align: center; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; transition: all 0.1s linear; position: relative; } .ax-header .ax-login a:not(:first-child):before { content: ''; height: 16px; width: 1px; background-color: #f0f0f0; position: absolute; left: -1px; top: 9px; } .ax-header .ax-login a:first-child { border-radius: 3px 0 0 3px; border-left: 1px solid #e0e0e0; } .ax-header .ax-login a:last-child { border-radius: 0 3px 3px 0; border-right: 1px solid #e0e0e0; } .ax-header .ax-login a:first-child:last-child { border-radius: 3px; } .ax-header .ax-login a:hover { color: #fff; border-color: #198cff; background-color: #198cff; z-index: 2; } .ax-header .ax-btns { padding: 0 14px; height: calc(44px + 10px); display: inline-flex; justify-content: center; align-items: center; } .ax-header .ax-btns > * { color: #475b66; font-size: 18px; width: 28px; height: 28px; line-height: 28px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 100%; text-align: center; margin-left: 10px; transition: all 0.1s linear; position: relative; z-index: 2; } .ax-header .ax-btns > * .ax-dot { position: absolute; top: 0px; right: 0px; } .ax-header .ax-btns > * .ax-badge { position: absolute; top: -3px; right: -5px; } .ax-header .ax-btns > *[style*="background-image"] { margin-right: 14px; } .ax-header .ax-btns > *[style*="background-image"]:before { font-size: 10px; position: absolute; right: -14px; } .ax-header *[class*="-open"] { color: #6619ff; font-size: 18px; width: calc(44px - 10px); line-height: 44px; text-align: center; transition: all 0.1s linear; vertical-align: middle; position: relative; display: none; } .ax-header .ax-image { display: none; vertical-align: middle; } .ax-header .ax-resemble { width: 200px; margin: 10px 3px; height: calc(44px - 10px); box-sizing: border-box; position: relative; display: block; } .ax-header .ax-resemble form { width: 100%; height: 100%; } .ax-header .ax-resemble input { width: 100%; height: 100%; padding-right: 44px; } .ax-header .ax-resemble *[class*="search"] { line-height: calc(44px - 10px); width: calc(44px - 10px); height: calc(44px - 10px); color: #ccc; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; } .ax-header .ax-resemble *[class*="search"]:after { content: ''; width: 1px; height: 16px; background-color: #f0f0f0; position: absolute; left: -1px; top: 9px; } .ax-header .ax-resemble .ax-mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; display: none; } /*footer*/ .ax-footer .ax-operate a { vertical-align: top; } .ax-footer .ax-operate a { margin-right: 14px; } .ax-footer .ax-copyright + .ax-operate a { margin-right: 0; margin-left: 14px; } .ax-footer .ax-operate a.ax-icon { margin-right: 4px; } .ax-footer .ax-copyright + .ax-operate a.ax-icon { margin-right: 0; margin-left: 4px; } .ax-footer .ax-operate a[class*="font"] { font-size: 18px; color: #666666; } .ax-footer .ax-copyright, .ax-footer .ax-copyright a { color: #666666; } .ax-footer .ax-copyright a:hover { color: #198cff; } .ax-footer .ax-copyright img { max-height: 28px; width: auto!important; } /*bottom button*/ .ax-space-btmbtn { height: 44px; overflow: hidden; } .ax-btmbtn { text-align: center; height: 44px; line-height: 44px; width: 100%; box-sizing: border-box; background-color: #fff; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); position: fixed; left: 0; bottom: 0; z-index: 2; } .ax-btmbtn .ax-head { width: 28px; height: 28px; margin: 8px 8px 8px 14px; border-radius: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; position: relative; } .ax-btmbtn .ax-resemble { font-size: 12px; color: #b3b3b3; text-align: left; height: 28px; line-height: 28px; border-radius: 28px; margin: 8px auto; padding: 0 14px; box-sizing: border-box; background-color: #f5f5f5; display: block; } .ax-btmbtn .ax-btns { padding-right: 8px; } .ax-btmbtn .ax-btns > a, .ax-btmbtn .ax-btns > span { color: #666666; margin-left: 8px; } .ax-btmbtn .ax-btns > a:hover, .ax-btmbtn .ax-btns > span:hover { color: #198cff; } .ax-btmbtn .ax-btns > a:hover svg, .ax-btmbtn .ax-btns > span:hover svg { fill: #198cff; } .ax-btmbtn *[class*="-bg-"] { color: #fff; } .ax-btmbtn *[class*="-bg-"] a { color: #fff; } .ax-btmbtn *[class*="-bg-"] svg { fill: #fff; } .ax-btmbtn .ax-gutter-line { height: calc(44px - 16px); margin-top: 8px; } /*bottom nav*/ .ax-space-btmnav { height: calc(38px + 20px); overflow: hidden; display: none; } .ax-btmnav { text-align: center; height: calc(38px + 20px); width: 100%; box-sizing: border-box; background-color: #fff; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); position: fixed; left: 0; bottom: 0; z-index: 2; display: none; } .ax-btmnav a { color: #666666; width: 100%; height: calc(38px + 20px); margin: auto; } .ax-btmnav a:not(.ax-single):active { background-color: #f0f0f0; } .ax-btmnav a.ax-selected { color: #198cff; } .ax-btmnav a svg { fill: #666666; } .ax-btmnav a.ax-selected svg { fill: #198cff; } .ax-btmnav .ax-figure { width: 28px; height: 28px; line-height: 28px; font-size: 22px; text-align: center; margin: 8px auto 0 auto; background-repeat: no-repeat; background-position: center; background-size: 28px; position: relative; display: block; } .ax-btmnav a.ax-single { width: 80px; } .ax-btmnav .ax-single *[class*="font"] { font-size: 42px; color: #198cff; width: calc(38px + 20px); height: calc(38px + 20px); line-height: calc(38px + 20px); } .ax-btmnav a.ax-img .ax-figure { width: 24px; height: 24px; margin: 10px auto 2px auto; border-radius: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; position: relative; } .ax-btmnav .ax-figure svg { width: 22px; height: 28px; } .ax-btmnav .ax-figure .ax-dot { position: absolute; right: -6px; top: 0px; } .ax-btmnav .ax-figure .ax-badge { position: absolute; right: -14px; top: -4px; } .ax-btmnav .ax-text { font-size: 10px; width: 60px; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: auto; display: block; } .ax-btmnav .ax-gutter-line { height: calc(38px + 20px); } /*bottom nav end*/ /*list start*/ .ax-info-block { line-height: 22px; padding: calc((38px - 22px)/2) 14px; display: block; transition: all 0.1s linear; position: relative; } .ax-info-block .ax-num { font-size: 12px; color: #666666; background-color: #fff; min-width: 18px; height: 18px; line-height: 18px; margin-right: calc((38px - 22px)/2); margin-top: calc((22px - 18px)/2); text-align: center; border-radius: 3px; box-sizing: border-box; position: relative; } .ax-info-block .ax-num:after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: rgba(0, 0, 0, 0.12); } .ax-info-block .ax-num.ax-num-1, .ax-info-block .ax-num.ax-num-2, .ax-info-block .ax-num.ax-num-3 { color: #fff; background-color: #198cff; border-color: #198cff; } .ax-info-block .ax-arrow { color: #b3b3b3; margin-left: calc((38px - 22px)/2); } .ax-info-block .ax-arrow[class*='font'] { color: #ccc; } .ax-info-block .ax-icon { margin-right: calc((38px - 22px)/2); } .ax-info-block .ax-icon:before { top: 1px; } .ax-info-block .ax-head { background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; width: 22px; height: 22px; border-radius: 100%; margin-right: calc((38px - 22px)/2); } .ax-info-block .ax-checkbox.ax-bone, .ax-info-block .ax-radio.ax-bone { margin-top: calc((22px - 18px)/2); margin-left: calc((38px - 22px)/2); } .ax-info-block.ax-hover:hover { background-color: #fafafa; } .ax-info-block.ax-hover:not(.ax-selected):not(.ax-active):not(.ax-disabled):active { background-color: #f5f5f5; } .ax-info-block.ax-selected, .ax-info-block.ax-active, .ax-info-block.ax-selected:hover, .ax-info-block.ax-active:hover { color: #198cff; background-color: rgba(25, 140, 255, 0.06); } .ax-info-block.ax-selected:hover, .ax-info-block.ax-selected { color: #fff; background-color: #198cff; } .ax-info-block.ax-selected .ax-arrow, .ax-info-block.ax-selected .ax-icon, .ax-info-block.ax-selected .ax-num { color: rgba(255, 255, 255, 0.5); background: transparent; } .ax-info-block.ax-selected .ax-num:after { border-color: rgba(255, 255, 255, 0.5); } .ax-info-block.ax-selected a, .ax-info-block.ax-selected a:hover { color: #fff; } .ax-info-block.ax-disabled:hover, .ax-info-block.ax-disabled { color: #b3b3b3; background: transparent; cursor: not-allowed; } /*select list*/ .ax-list-select .ax-info-block .ax-mask { width: 100%; height: 100%; background-color: transparent; cursor: pointer; position: absolute; left: 0; top: 0; z-index: 2; } /*article list*/ .ax-item-block { padding: 14px; box-sizing: border-box; transition: all 0.1s linear; position: relative; display: block; } .ax-item-block .ax-img { height: 96px; width: calc(96px + 28px); overflow: hidden; border-radius: 3px; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; position: relative; } .ax-item-block .ax-img:nth-child(1) { margin-right: 14px; } .ax-item-block .ax-img:nth-last-child(1) { margin-left: 14px; } .ax-item-block .ax-title { font-weight: bold; font-size: 16px; line-height: 22px; } .ax-item-block .ax-des { color: #666666; margin-top: 8px; } .ax-item-block .ax-from { font-size: 12px; line-height: 22px; margin-top: 8px; } .ax-item-block .ax-from *[class*='font'] { font-size: 12px; } .ax-item-block .ax-from svg { height: 12px; } .ax-item-block .ax-from *[class*='-color-'] { margin-right: 14px; } .ax-item-block .ax-keywords { color: #666666; font-size: 12px; line-height: 22px; margin-top: 8px; } .ax-item-block .ax-keywords *[class*='font'] { font-size: 12px; } .ax-item-block .ax-keywords svg { height: 12px; } .ax-item-block .ax-keywords .ax-child { margin-right: 14px; } .ax-item-block .ax-gallery { margin-top: 8px; position: relative; } .ax-item-block .ax-gallery > .ax-num { color: #fff; font-size: 10px; background-color: rgba(0, 0, 0, 0.5); line-height: 16px; padding: 0 4px; border-radius: 3px; position: absolute; left: 8px; bottom: 8px; } .ax-item-block .ax-gallery > span, .ax-item-block .ax-gallery > a { margin-right: 8px; height: 96px; line-height: 96px; width: calc(96px + 28px); border-radius: 3px; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; } .ax-item-block .ax-gallery > a.ax-more { position: relative; overflow: hidden; } .ax-item-block .ax-gallery > a.ax-more i { color: #fff; width: 100%; height: 100%; text-align: center; position: absolute; left: 0; top: 0; z-index: 2; } .ax-item-block .ax-gallery > a.ax-more:before { content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; } .ax-item-block.ax-ad:after { color: #ccc; font-size: 12px; margin-top: 8px; height: 14px; line-height: 14px; content: '广告'; display: block; visibility: visible; } .ax-item-block .ax-gallery > span:nth-child(5) ~ span, .ax-item-block .ax-gallery > a:nth-child(5) ~ a:not(.ax-more) { display: none; } .ax-item-block .ax-gallery > a.ax-more ~ .ax-num { display: none; } /*card list*/ .ax-card-block { background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-sizing: border-box; display: block; padding: 14px; position: relative; transition: all 0.2s linear; } .ax-card-block:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .ax-card-block .ax-img { height: 200px; margin-bottom: 14px; overflow: hidden; position: relative; display: block; } .ax-card-block .ax-img .ax-figure { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; transition: all 0.2s linear; display: block; } .ax-card-block:hover .ax-img .ax-figure { transform: scale(1.1); } .ax-card-block .ax-title { font-weight: bold; } .ax-card-block .ax-des { color: #666666; font-size: 14px; margin-top: 14px; height: calc(18px * 2); max-width: 100%; line-height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ax-card-block .ax-from { color: #ccc; line-height: 22px; margin-top: 14px; } .ax-card-block .ax-from > span, .ax-card-block .ax-from > a { color: #ccc; margin-right: 14px; } .ax-card-block .ax-keywords { line-height: 22px; color: #ccc; margin-top: 14px; } .ax-card-block .ax-keywords > span, .ax-card-block .ax-keywords > a { color: #ccc; margin-right: 14px; } .ax-card-block .ax-operate { margin-top: 14px; margin-bottom: -14px; line-height: 44px; text-align: center; border-top: 1px solid #ebebeb; } .ax-card-block .ax-operate .ax-gutter-line { height: 44px; } .ax-card-block .ax-view { color: #ccc; line-height: 38px; margin-top: 14px; } .ax-card-block .ax-view .ax-heads span { width: 28px; height: 28px; border-radius: 100%; border: 1px solid #fff; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; } .ax-card-block .ax-view .ax-heads span:not(:first-child) { margin-left: calc(-28px/2); } .ax-card-block .ax-view .ax-heads i { color: #666666; margin-left: 4px; } .ax-card-block .ax-gallery { margin-top: 14px; position: relative; } .ax-card-block .ax-gallery .ax-num { color: #fff; font-size: 10px; background-color: rgba(0, 0, 0, 0.5); line-height: 16px; padding: 0 4px; border-radius: 3px; position: absolute; left: 8px; bottom: 8px; } .ax-card-block .ax-gallery > span, .ax-card-block .ax-gallery > a { margin-right: 2px; width: calc((100% - 4px)/3); height: 96px; overflow: hidden; line-height: 96px; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; } _:-ms-lang(x), .ax-card-block .ax-gallery > span { width: calc((100% - 4.02px)/3); } _:-ms-lang(x), .ax-card-block .ax-gallery > a { width: calc((100% - 4.02px)/3); } .ax-card-block .ax-gallery > a.ax-more { position: relative; } .ax-card-block .ax-gallery > a.ax-more i { color: #fff; width: 100%; height: 100%; text-align: center; position: absolute; left: 0; top: 0; z-index: 2; } .ax-card-block .ax-gallery > a.ax-more:before { content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; } .ax-card-block .ax-gallery > span:nth-child(3), .ax-card-block .ax-gallery > a:nth-child(3) { margin-right: 0; } .ax-card-block .ax-gallery > span:nth-child(3) ~ span, .ax-card-block .ax-gallery > a:nth-child(3) ~ a:not(.ax-more) { display: none; } .ax-card-block .ax-img + .ax-gallery { margin-top: -12px; margin-bottom: 14px; } /*tab*/ .ax-tab .ax-tab-content { transition: all 0.2s linear; } .ax-tab .ax-tab-content > *:not(.ax-active) { display: none; } .ax-tab .ax-tab-content > .ax-active { display: block; } .ax-swiper-nav { text-align: center; } .ax-swiper-nav .swiper-slide { cursor: pointer; line-height: 38px; text-align: center; box-sizing: border-box; } .ax-swiper-nav .swiper-slide:after { content: ''; height: 2px; width: 28px; background-color: #198cff; -webkit-transform: translate(-50%, 0) scaleX(0); transform: translate(-50%, 0) scaleX(0); transition: all 0.2s linear; position: absolute; left: 50%; bottom: 0px; } .ax-swiper-nav .active-nav { color: #198cff; } .ax-swiper-nav .active-nav:after { -webkit-transform: translate(-50%, 0) scaleX(1); transform: translate(-50%, 0) scaleX(1); } .ax-menu-tab { text-align: center; } .ax-menu-tab .ax-item { cursor: pointer; line-height: 38px; text-align: center; padding: 0 14px; position: relative; } .ax-menu-tab .ax-item.ax-active { color: #198cff; } .ax-menu-tab .ax-item:after { content: ''; height: 2px; width: 28px; background-color: #198cff; -webkit-transform: translate(-50%, 0) scaleX(0); transform: translate(-50%, 0) scaleX(0); transition: all 0.2s linear; position: absolute; left: 50%; bottom: 0px; } .ax-menu-tab .ax-item.ax-active:after { -webkit-transform: translate(-50%, 0) scaleX(1); transform: translate(-50%, 0) scaleX(1); } .ax-menu-page { display: flex; justify-content: flex-start; align-items: flex-end; box-shadow: 0 -1px 0 0 #ebebeb inset; } .ax-menu-page .ax-item { display: inline-flex; justify-content: center; align-items: center; text-align: center; background-color: #fff; height: 38px; line-height: 38px; padding: 0 14px; position: relative; box-sizing: border-box; border-radius: 3px; transition: all 0.1s linear; } .ax-menu-page .ax-item:after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: #ebebeb; } .ax-menu-page .ax-item, .ax-menu-page .ax-item:after { border-radius: 0; } .ax-menu-page .ax-item:first-child, .ax-menu-page .ax-item:first-child:after { border-radius: 3px 0 0 0; } .ax-menu-page .ax-item:last-child, .ax-menu-page .ax-item:last-child:after { border-radius: 0 3px 0 0; } .ax-menu-page .ax-item:not(:first-of-type):after { border-left-width: 0; } .ax-menu-page .ax-item.ax-active { color: #198cff; } .ax-menu-page .ax-item.ax-active svg { fill: #198cff; } .ax-menu-page .ax-item.ax-active:after { border-bottom-width: 0; } .ax-menu-page .ax-item *[class*="iconfont"], .ax-menu-page .ax-item svg { margin-right: 4px; } .ax-tab.ax-border, .ax-tab.ax-shadow { background-color: #fff; } .ax-tab.ax-border .ax-menu-page, .ax-tab.ax-shadow .ax-menu-page { background-color: #fafafa; } .ax-tab.ax-border .ax-menu-page .ax-item:last-child, .ax-tab.ax-border .ax-menu-page .ax-item:last-child:after, .ax-tab.ax-shadow .ax-menu-page .ax-item:last-child, .ax-tab.ax-shadow .ax-menu-page .ax-item:last-child:after { border-radius: 0; } .ax-tab.ax-border .ax-menu-page .ax-item:after, .ax-tab.ax-shadow .ax-menu-page .ax-item:after { border-top-width: 0; border-left-width: 0; } .ax-tab.ax-border .ax-menu-page .ax-item:first-of-type:after, .ax-tab.ax-shadow .ax-menu-page .ax-item:first-of-type:after { border-left-width: 0; } /*container*/ .ax-panel { background-color: #fff; } .ax-panel-header { position: relative; padding: 5px 0 5px 14px; } .ax-panel-header .ax-adorn { margin-right: 4px; transition: all 0.2s linear; } .ax-panel-header .ax-title { position: relative; margin-right: 8px; } .ax-panel-header.ax-bar:before, .ax-panel-header.ax-bar-left:before { content: ''; width: 2px; height: 14px; background-color: #198cff; position: absolute; left: 0; top: calc((28px + 10px)/2 - 7px); } .ax-panel-header.ax-bar-top .ax-title:before { content: ''; width: 28px; height: 2px; background-color: #198cff; position: absolute; left: 0; top: -5px; } .ax-panel-header.ax-bar-bottom .ax-title:before { content: ''; width: 28px; height: 2px; background-color: #198cff; position: absolute; left: 0; bottom: -5px; } .ax-panel-header .ax-operate { margin-right: 8px; color: #b3b3b3; line-height: 28px; height: 28px; transition: all 0.2s linear; } .ax-panel-header .ax-operate:last-child { margin-right: 14px; } .ax-panel-header .ax-operate svg { fill: #b3b3b3; height: 28px; } .ax-panel-header .ax-operate:hover svg { fill: #198cff; } .ax-panel-header .ax-btn { margin-right: 5px; } .ax-panel-header .ax-btn-group .ax-btn { margin-right: 0; } .ax-panel-header .ax-btn.ax-xs { margin-top: calc((28px - 22px)/2); } .ax-panel-header .ax-btn.ax-xs:last-child { margin-right: calc((38px - 22px)/2); } .ax-panel-header .ax-badge { margin-right: 14px; margin-top: calc((28px - 16px)/2); } .ax-panel-header .ax-dot { margin-right: 14px; margin-top: calc((28px - 8px)/2); } .ax-panel-header .ax-menu-tab .ax-item { line-height: 28px; padding: 0; margin-right: 8px; } .ax-panel-header .ax-menu-tab .ax-item:last-child { margin-right: 14px; } /*box*/ .ax-box { background-color: #fff; } .ax-box-header { position: relative; padding: 14px 0 14px 22px; } .ax-box-header .ax-adorn { font-size: 36px; line-height: 46px; margin-right: 8px; transition: all 0.2s linear; } .ax-box-header.ax-simple .ax-adorn { font-size: 16px; line-height: 28px; margin-right: 4px; } .ax-box-header .ax-title { font-size: 16px; position: relative; margin-right: 8px; } .ax-box-header.ax-bar:before, .ax-box-header.ax-bar-left:before { content: ''; width: 2px; height: 16px; background-color: #198cff; position: absolute; left: 0; top: calc((28px + 14px*2)/2 - 7px); } .ax-box-header.ax-bar-top .ax-title:before { content: ''; width: 28px; height: 2px; background-color: #198cff; position: absolute; left: 0; top: -14px; } .ax-box-header.ax-bar-bottom .ax-title:before { content: ''; width: 28px; height: 2px; background-color: #198cff; position: absolute; left: 0; bottom: -28px; } .ax-box-header.ax-simple.ax-bar-bottom .ax-title:before { bottom: -14px; } .ax-box-header .ax-des { color: rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 18px; white-space: nowrap; } .ax-box-header .ax-operate { color: #b3b3b3; line-height: 28px; height: 28px; text-align: center; padding: 0 calc(14px/2); transition: all 0.2s linear; } .ax-box-header .ax-operate:last-child { margin-right: calc(22px - 14px/2); } .ax-box-header .ax-operate:hover { color: #198cff; } .ax-box-header .ax-operate svg { fill: #b3b3b3; height: 28px; } .ax-box-header .ax-operate:hover svg { fill: #198cff; } .ax-box-header .ax-btn { margin-right: 5px; } .ax-box-header .ax-btn-group .ax-btn { margin-right: 0; } .ax-box-header .ax-btn.ax-xs { margin-top: 3px; } .ax-box-header .ax-btn:last-child { margin-right: 22px; } .ax-box-header .ax-menu-tab .ax-item { line-height: 28px; padding: 0; margin-right: 8px; } .ax-box-header .ax-menu-tab .ax-item:last-child { margin-right: 22px; } .ax-box-header .ax-bullet-outer { padding: 0 22px; } .ax-box-header .ax-badge { margin-right: 22px; margin-top: calc((28px - 16px)/2); } .ax-box-header .ax-dot { margin-right: 22px; margin-top: calc((28px - 8px)/2); } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) { color: #fff; } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header .ax-des { color: rgba(255, 255, 255, 0.4); } .ax-box[class*='ax-bg-'] .ax-box-header .ax-operate:hover { opacity: 0.5; } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header .ax-operate { color: #fff; } .ax-box.ax-bg-warning .ax-box-header .ax-operate { color: #333333; } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header .ax-operate svg { fill: #fff; } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header .ax-operate:hover svg { fill: #fff; } .ax-box.ax-bg-warning .ax-box-header .ax-operate svg { fill: #333333; } .ax-box.ax-bg-warning .ax-box-header .ax-operate:hover svg { fill: #333333; } .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header[class*='ax-bar']:before, .ax-box[class*='ax-bg-']:not(.ax-bg-warning) .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #fff; } .ax-box.ax-bg-warning .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bg-warning .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #333333; } .ax-box.ax-bg-primary { background-color: #198cff; } .ax-box.ax-bg-secondary { background-color: #475b66; } .ax-box.ax-bg-success { background-color: #41a358; } .ax-box.ax-bg-danger { background-color: #dc3545; } .ax-box.ax-bg-info { background-color: #14ccc9; } .ax-box.ax-bg-warning { background-color: #ffc107; } .ax-box.ax-bg-ad { background-color: #ff8400; } .ax-box.ax-bg-title { background-color: #333333; } .ax-box.ax-bglit-primary { background-color: #f0f7ff; } .ax-box.ax-bglit-primary .ax-box-header .ax-des, .ax-box.ax-bglit-primary .ax-box-header .ax-operate { color: #6dacea; } .ax-box.ax-bglit-primary .ax-box-header .ax-operate:hover { color: #0b72da; } .ax-box.ax-bglit-primary .ax-box-header .ax-operate svg { fill: #6dacea; } .ax-box.ax-bglit-primary .ax-box-header .ax-operate:hover svg { fill: #0b72da; } .ax-box.ax-bglit-primary .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-primary .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #198cff; } .ax-box.ax-bglit-primary.ax-border { border-color: #d7e7f5; } .ax-box.ax-bglit-secondary { background-color: #f5f8fa; } .ax-box.ax-bglit-secondary .ax-box-header .ax-des, .ax-box.ax-bglit-secondary .ax-box-header .ax-operate { color: #adc1cc; } .ax-box.ax-bglit-secondary .ax-box-header .ax-operate:hover { color: #383e42; } .ax-box.ax-bglit-secondary .ax-box-header .ax-operate svg { fill: #adc1cc; } .ax-box.ax-bglit-secondary .ax-box-header .ax-operate:hover svg { fill: #383e42; } .ax-box.ax-bglit-secondary .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-secondary .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #475b66; } .ax-box.ax-bglit-secondary.ax-border { border-color: #dfe3e5; } .ax-box.ax-bglit-success { background-color: #edfaf0; } .ax-box.ax-bglit-success .ax-box-header .ax-des, .ax-box.ax-bglit-success .ax-box-header .ax-operate { color: #adccb5; } .ax-box.ax-bglit-success .ax-box-header .ax-operate:hover { color: #3b7649; } .ax-box.ax-bglit-success .ax-box-header .ax-operate svg { fill: #adccb5; } .ax-box.ax-bglit-success .ax-box-header .ax-operate:hover svg { fill: #3b7649; } .ax-box.ax-bglit-success .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-success .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #41a358; } .ax-box.ax-bglit-success.ax-border { border-color: #e1f0e5; } .ax-box.ax-bglit-danger { background-color: #fff0f1; } .ax-box.ax-bglit-danger .ax-box-header .ax-des, .ax-box.ax-bglit-danger .ax-box-header .ax-operate { color: #ccadb0; } .ax-box.ax-bglit-danger .ax-box-header .ax-operate:hover { color: #b22c39; } .ax-box.ax-bglit-danger .ax-box-header .ax-operate svg { fill: #ccadb0; } .ax-box.ax-bglit-danger .ax-box-header .ax-operate:hover svg { fill: #b22c39; } .ax-box.ax-bglit-danger .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-danger .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #dc3545; } .ax-box.ax-bglit-danger.ax-border { border-color: #f0dddf; } .ax-box.ax-bglit-info { background-color: #ebfaf9; } .ax-box.ax-bglit-info .ax-box-header .ax-des, .ax-box.ax-bglit-info .ax-box-header .ax-operate { color: #adcccb; } .ax-box.ax-bglit-info .ax-box-header .ax-operate:hover { color: #189593; } .ax-box.ax-bglit-info .ax-box-header .ax-operate svg { fill: #adcccb; } .ax-box.ax-bglit-info .ax-box-header .ax-operate:hover svg { fill: #189593; } .ax-box.ax-bglit-info .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-info .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #14ccc9; } .ax-box.ax-bglit-info.ax-border { border-color: #cef0f0; } .ax-box.ax-bglit-warning { color: #c8990b; background-color: #fffaeb; } .ax-box.ax-bglit-warning .ax-box-header .ax-des, .ax-box.ax-bglit-warning .ax-box-header .ax-operate { color: #ccc4ad; } .ax-box.ax-bglit-warning .ax-box-header .ax-operate:hover { color: #c8990b; } .ax-box.ax-bglit-warning .ax-box-header .ax-operate svg { fill: #ccc4ad; } .ax-box.ax-bglit-warning .ax-box-header .ax-operate:hover svg { fill: #c8990b; } .ax-box.ax-bglit-warning .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-warning .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #ffc107; } .ax-box.ax-bglit-warning.ax-border { border-color: #f5edd7; } .ax-box.ax-bglit-ad { background-color: #fff5eb; } .ax-box.ax-bglit-ad .ax-box-header .ax-des, .ax-box.ax-bglit-ad .ax-box-header .ax-operate { color: #ccbdad; } .ax-box.ax-bglit-ad .ax-box-header .ax-operate:hover { color: #c2690a; } .ax-box.ax-bglit-ad .ax-box-header .ax-operate svg { fill: #ccbdad; } .ax-box.ax-bglit-ad .ax-box-header .ax-operate:hover svg { fill: #c2690a; } .ax-box.ax-bglit-ad .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-ad .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #ff8400; } .ax-box.ax-bglit-ad.ax-border { border-color: #f5e7d7; } .ax-box.ax-bglit-title { background-color: #f5f5f5; } .ax-box.ax-bglit-title .ax-box-header .ax-des { color: #cccccc; } .ax-box.ax-bglit-title .ax-box-header[class*='ax-bar']:before, .ax-box.ax-bglit-title .ax-box-header[class*='ax-bar'] .ax-title:before { background-color: #333333; } .ax-box.ax-bglit-title.ax-border { border-color: #ebebeb; } /*cube*/ .ax-lump { text-align: center; padding: calc(14px*2) 14px; box-sizing: border-box; } .ax-lump .ax-bone .ax-img { width: calc(14px*4); height: calc(14px*4); background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; } .ax-lump .ax-title { margin-top: calc(14px*2); font-size: 16px; } .ax-lump .ax-des { color: #666666; line-height: 18px; margin: 0 auto calc(14px*2) auto; } /*accordion*/ .ax-accordion .ax-item:not(.ax-disabled) .ax-panel-header { cursor: pointer; } .ax-accordion .ax-item.ax-disabled > .ax-panel-header, .ax-accordion .ax-item.ax-disabled > .ax-panel-header a, .ax-accordion .ax-item.ax-disabled > .ax-panel-header .ax-more, .ax-accordion .ax-item.ax-disabled > .ax-panel-header .ax-adorn { color: #ccc; cursor: text; } .ax-accordion .ax-item .ax-panel-body { display: none; } .ax-accordion .ax-item.ax-show > .ax-panel-header .ax-panel-close { transform: rotate(-180deg); } .ax-accordion .ax-item.ax-show > .ax-panel-header .ax-more, .ax-accordion .ax-item.ax-show > .ax-panel-header .ax-adorn { transform: rotate(-90deg); } /*pagination*/ .ax-pagination { font-size: 12px; text-align: center; line-height: 28px; margin: 14px auto; } .ax-pagination.ax-align-left :first-child { margin-left: 0; } .ax-pagination.ax-align-right :last-child { margin-right: 0; } .ax-pagination *[class*="font"] { font-size: 10px; } .ax-pagination .ax-first i:not([class*="font"]), .ax-pagination .ax-prev i:not([class*="font"]) { margin-right: 4px; margin-left: -4px; } .ax-pagination .ax-last i:not([class*="font"]), .ax-pagination .ax-next i:not([class*="font"]) { margin-left: 4px; margin-right: -4px; } .ax-pagination a { height: auto; line-height: 14px; border: 1px solid #ebebeb; border-radius: 3px; background-image: none; padding: 6px 9px; margin: 0 2px; background-color: #fff; transition: all 0.1s linear; } .ax-pagination span.ax-active { color: #fff; height: auto; line-height: 14px; padding: 6px 9px; margin: 0 2px; border: 1px solid #198cff; border-radius: 3px; background-image: none; background-color: #198cff; } .ax-pagination a span[class*="font"] { font-size: 12px; margin: 0; } .ax-pagination span { margin: 0 2px; } .ax-pagination input { font-size: 12px; width: 40px; height: 28px; line-height: 28px; border: 1px solid #ebebeb; text-align: center; margin: 0 2px; padding-left: 4px; padding-right: 4px; background-color: #fff; position: relative; top: 0; } .ax-pagination input[type='button'], .ax-pagination input[type='submit'], .ax-pagination button[type='button'] { font-size: 12px; height: 28px; line-height: calc(28px - 6px); margin: 0 2px; padding: 0 10px; } .ax-pagination input[type='submit'] { width: auto; padding: 0 10px; text-align: center; position: relative; top: 0px; } .ax-pagination select { font-size: 12px; -webkit-appearance: menulist-button; width: auto; height: 28px; border: 1px solid #ebebeb; text-align: center; background-color: #fff; padding: 0 0 0 10px; margin: 0 2px; } .ax-pagination a:not(.ax-total):hover { color: #198cff; border-color: #198cff; text-decoration: none; background-color: rgba(25, 140, 255, 0.1); z-index: 2; } .ax-pagination a:not(.ax-total)[class*='active'], .ax-pagination [class*='selected'] a:not(.ax-total), .ax-pagination [class*='active'] a:not(.ax-total) { color: #fff; background-color: #198cff; border-color: #198cff; } .ax-pagination .ax-disabled { color: #b3b3b3 !important; } .ax-pagination .ax-disabled:hover { color: #b3b3b3 !important; background-color: #fff !important; border-color: #ebebeb !important; cursor: not-allowed; } .ax-pagination .ax-group { display: inline-block; } .ax-pagination .ax-group > span { border: 1px solid #ebebeb; background-color: #fff; height: auto; line-height: 14px; margin: 0; padding: 6px 9px; } .ax-pagination .ax-group > * { border-radius: 0; margin-left: 0; margin-right: 0; } .ax-pagination .ax-group > *:not(.ax-active):hover { position: relative; z-index: 1; } .ax-pagination .ax-group > *:not(:last-child) { margin-right: -1px; } .ax-pagination .ax-group :first-child { border-radius: 3px 0 0 3px; } .ax-pagination .ax-group :last-child { border-radius: 0 3px 3px 0; } .ax-pagination.ax-light a:not(.ax-active), .ax-pagination.ax-light span:not(.ax-active), .ax-pagination.ax-light a:not(.ax-active):hover, .ax-pagination.ax-light span:not(.ax-active):hover { background: transparent!important; border: none!important; } .ax-pagination.ax-light a:not(.ax-total).ax-selected, .ax-pagination.ax-light a:not(.ax-total).ax-active { height: 28px; min-width: 28px; text-align: center; line-height: 28px; border-radius: 28px; border-width: 0; padding: 0; } .ax-pagination li { display: inline-block; } .ax-pagination .pagination { text-align: center; } /*statistics*/ .ax-statistics .ax-item { text-align: center; margin: 14px auto; display: block; } .ax-statistics.ax-row .ax-item { width: 120px; } .ax-statistics .ax-item .ax-text { font-size: 30px; line-height: 38px; position: relative; } .ax-statistics .ax-item .ax-dot { position: absolute; right: -6px; top: 2px; } .ax-statistics .ax-item .ax-badge { position: absolute; top: 0px; right: -16px; } .ax-statistics .ax-item .ax-image .ax-badge, .ax-statistics .ax-item .ax-icon .ax-badge, .ax-statistics .ax-item .ax-font01 .ax-badge { right: -12px; } .ax-statistics .ax-item .ax-text .ax-arrow { font-size: 12px; color: #dc3545; border: 1px solid #dc3545; background-color: #fff; line-height: 14px; padding: 0 2px; border-radius: 3px; position: absolute; top: 0px; right: -40px; } .ax-statistics .ax-item .ax-title { color: #666666; display: block; } .ax-statistics .ax-text em { font-size: 12px; line-height: 12px; vertical-align: bottom; } /**/ .ax-statistics .ax-item .ax-image { float: left; height: 56px; width: 56px; border-radius: 100%; margin: 0px 10px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; } .ax-statistics .ax-item .ax-icon { font-size: 22px; color: #198cff; width: 56px; height: 56px; text-align: center; line-height: 56px; border-radius: 100%; background-color: #f0f0f0; margin: 0px 8px; position: relative; float: left; } .ax-statistics .ax-item .ax-font01 { font-size: 56px; line-height: 56px; margin: 0px 8px; position: relative; float: left; } .ax-statistics .ax-item .ax-font03 { color: #666666; text-align: left; margin: 0px 8px; position: relative; float: left; } .ax-statistics .ax-item .ax-font02 { text-align: left; margin: 0px 8px; position: relative; line-height: 0; float: left; } .ax-statistics .ax-item .ax-font02 .ax-row01 { font-size: 38px; line-height: 38px; } .ax-statistics .ax-item .ax-font02 .ax-row02 { font-size: 12px; color: #666666; line-height: 18px; } /*cubes*/ .cubes { background-color: #fff; } .cubes .block { float: left; margin: 14px 0 14px 14px; width: calc((100% - 14px*3)/2); height: calc(160px + 138px); position: relative; } .cubes .block .img { display: block; height: 160px; background-repeat: no-repeat; background-position: center; background-size: cover,32px 32px; overflow: hidden; position: relative; } .cubes .block .title { font-weight: bold; line-height: 22px; margin: 8px 0; box-sizing: border-box; } .cubes .block .des { font-size: 12px; line-height: 22px; color: #808080; margin-bottom: 14px; box-sizing: border-box; } .cubes .block .time { color: #ccc; font-size: 10px; position: absolute; left: 0; bottom: 0; } .cubes .block .time .tmpfont { font-size: 12px; margin-right: 4px; } .fullcube .block { float: none; margin: calc(14px*2); width: calc(100% - 14px*4); height: auto; } .fullcube .block .img { height: 120px; } .fullcube .block .time { position: inherit; left: auto; bottom: auto; } /**/ .fullwide .block { display: block; padding: 14px; box-sizing: border-box; background-color: #fff; } .fullwide .block .img { display: block; height: 160px; background-repeat: no-repeat; background-position: center; background-size: cover,32px 32px; overflow: hidden; position: relative; } .fullwide .block .title { font-weight: bold; line-height: 22px; margin: 8px 0; box-sizing: border-box; } .fullwide .block .des { font-size: 12px; line-height: 22px; color: #808080; margin-bottom: 14px; box-sizing: border-box; } .fullwide .block .time { color: #ccc; font-size: 10px; } .fullwide .block .time .tmpfont { font-size: 12px; margin-right: 4px; } /**/ .cubes_flop { background-color: #fff; padding: calc(14px/2) 0; } .cubes_flop .block { float: left; margin: calc(14px/2) 0 calc(14px/2) 14px; width: calc((100% - 14px*3)/2); height: 180px; overflow: hidden; position: relative; text-align: center; color: #fff; } .cubes_flop .layer01 { background-position: center; background-repeat: no-repeat; background-size: cover,32px 32px; position: absolute; left: 0; top: 0; height: 100%; width: 100%; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .cubes_flop .title { position: absolute; left: 0; bottom: 0; line-height: 44px; width: 100%; color: #fff; } .cubes_flop .layer02 { background-color: #198cff; position: absolute; left: 0; top: 100%; height: calc(100% - 44px); width: 100%; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; z-index: 2; } .cubes_flop .in { position: absolute; width: 100%; padding: 0 16px; box-sizing: border-box; top: 50%; transform: translate(0, -50%); } .cubes_flop .des { font-size: 12px; line-height: 22px; margin-bottom: 10px; color: #fff; } .cubes_flop .layer03 { width: 100%; height: 100%; position: relative; background-color: #198cff; color: #fff; } .cubes_flop .layer03 *[class*="font"] { color: #fff; font-size: 36px; line-height: 36px; } .cubes_flop .layer03 img { width: 54px; height: 54px; } .cubes_flop .layer03 .name { font-size: 14px; } .cubes_flop .layer03 .txt { font-size: 10px; line-height: 18px; } .floped .layer01 { top: calc(-100% + 44px); } .floped .layer02 { top: 44px; } /**/ .cubes_logos { background-color: #fff; } .cubes_logos .block { position: relative; float: left; width: 50%; height: 160px; text-align: center; transition: all 0.1s linear; -webkit-transition: all 0.1s linear; } .cubes_logos .block:active { background-color: #f5f5f5; } .cubes_logos .icon { margin: 26px 0 16px 0; } .cubes_logos .icon span { font-size: 36px; line-height: 36px; } .cubes_logos .pic { margin-top: 36px; } .cubes_logos .pic img { height: 44px; } .cubes_logos .person { margin-top: 16px; } .cubes_logos .person span { width: 54px; height: 54px; border-radius: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .cubes_logos .title { font-size: 14px; } .cubes_logos .des { color: #808080; line-height: 18px; font-size: 12px; } .cubes_logos_x3 .block { width: 33.33%; } .cubes_logos_break .block:before { content: ''; position: absolute; right: -1px; top: 0; width: 1px; height: 100%; background-color: #ebebeb; transform: scaleX(0.5); } .cubes_logos_break .block:after { content: ''; position: absolute; right: 0; top: 0; height: 1px; width: 100%; background-color: #ebebeb; transform: scaleY(0.5); } /*breadcrumb*/ .ax-breadcrumb { font-size: 14px; } .ax-breadcrumb *[class*='font'] { font-size: 14px; } .ax-breadcrumb .ax-title { color: #666666; } .ax-breadcrumb .ax-title[class*='font'] { font-size: 14px; margin-right: 8px; } .ax-breadcrumb a { color: #666666; } .ax-breadcrumb a [class*='font'] { color: #666666; font-size: 14px; width: auto; margin-right: 4px; } .ax-breadcrumb a:hover, .ax-breadcrumb a:hover i { color: #198cff; } .ax-breadcrumb a[class*='font'] { font-size: 14px; } .ax-breadcrumb .ax-gutter { color: #ccc; font-size: 12px; text-align: center; margin: auto 8px; display: inline; } .ax-breadcrumb .ax-gutter[class*='font'] { font-size: 10px; } .ax-breadcrumb .ax-gutter[class*='code'] { font-size: 18px; } /*empty*/ .ax-empty { font-size: 14px; text-align: center; padding: calc(14px*2) 0; margin: auto; } .ax-empty .ax-icon { line-height: 44px; } .ax-empty .ax-icon [class*='font'] { font-size: 44px; color: #ccc; } .ax-empty .ax-icon img { max-height: 54px; } .ax-empty .ax-title { color: #ccc; } .ax-empty .ax-operate { margin-top: 14px; } .ax-empty .ax-operate a { color: #666666; margin: 0 8px; text-decoration: underline; } .ax-empty .ax-operate a:hover { color: #198cff; } /*scrollnav*/ .ax-scrollnav-v { font-size: 12px; background-color: rgba(255, 255, 255, 0.1); padding: 14px; line-height: 28px; max-height: calc(100vh - 120px); overflow: inherit; position: fixed; top: 60px; right: 14px; z-index: 4; } .ax-scrollnav-v .ax-close { color: #198cff; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 38px; border: 1px solid #ebebeb; box-sizing: border-box; position: absolute; right: 0; bottom: calc(-38px - 14px); } .ax-scrollnav-v.ax-hide { right: -100%; } .ax-scrollnav-v.ax-hide .ax-close { color: #fff; text-align: right; width: 44px; height: 44px; border-radius: 44px; line-height: 44px; border-width: 0; background-color: #198cff; padding: 0 4px; transform: translate(50%, -50%) rotate(180deg); position: fixed; right: 0; top: 50%; } .ax-scrollnav-v li { position: relative; padding-left: 14px; white-space: nowrap; border-left: 1px solid #f0f0f0; } .ax-scrollnav-v li.ax-active > a { color: #198cff; } .ax-scrollnav-v li:before { content: ''; height: 28px; width: 1px; position: absolute; left: -1px; top: 0; } .ax-scrollnav-v li.ax-active:before { background-color: #198cff; } .ax-scrollnav-h { background-color: #fff; line-height: 38px; text-align: center; position: relative; z-index: 4; } .ax-scrollnav-h li { margin: 0 14px; white-space: nowrap; display: inline-block; position: relative; } .ax-scrollnav-h li.ax-active > a { color: #198cff; } .ax-scrollnav-h li:before { content: ''; height: 2px; width: 100%; transition: all 0.2s linear; position: absolute; bottom: 0; } .ax-scrollnav-h li.ax-active:before { background-color: #198cff; } /*complete*/ .ax-complete [hidden] { display: none; } .ax-form-input .ax-complete { display: block; } .ax-complete .ax-text { color: #b3b3b3; } .ax-complete { display: inline-block; position: relative; } .ax-complete > input { display: block; } .ax-complete > ul { min-width: 100%; box-sizing: border-box; list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.3s ease; transform-origin: calc(14px*2) -28px; position: absolute; left: 0; top: calc(100% + 7px); z-index: 3; } .ax-complete > ul:empty { display: none; } .ax-complete > ul[hidden], .ax-complete > ul:empty { opacity: 0; transform: scale(0); display: block; } .ax-complete > ul:before { content: ""; width: 0; height: 0; padding: 5px; background: #fff; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); position: absolute; top: -6px; left: calc(14px*2); } .ax-complete > ul > li { width: 100%; padding: 5px 14px; cursor: pointer; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; position: relative; zoom: 1; } .ax-complete > ul > li:hover { background-color: #fafafa; color: #198cff; } .ax-complete > ul > li[aria-selected="true"] { background-color: #fafafa; color: #198cff; } .ax-complete mark { color: #dc3545; font-weight: bold; background: transparent; text-decoration: underline; } /*rate*/ .ax-rate { display: flex; justify-content: flex-start; align-items: center; } .ax-rate .ax-inner { display: inline-block; } .ax-rate i { font-size: 18px; transition: all 0.2s linear; } .ax-rate .ax-break { width: 4px; } .ax-rate i.ax-rate-cancel { color: #b3b3b3; font-size: 14px; } .ax-rate i.ax-rate-cancel:hover { color: #dc3545; } .ax-rate .ax-on { color: #ff8400; } .ax-rate .ax-off { color: #f5e7d7; } .ax-rate .ax-half { color: #ff8400; } .ax-rate .ax-score { margin: 0 8px; color: #666666; } .ax-rate img { height: 18px; } .ax-rate.ax-md, .ax-form-group .ax-rate { padding: calc((38px - 28px)/2) 0; } .ax-rate.ax-md i { font-size: 28px; } .ax-rate.ax-md img { height: 28px; } .ax-rate.ax-lg { line-height: 38px; padding: calc(38px - 28px) 0; } .ax-rate.ax-lg i { font-size: 38px; } .ax-rate.ax-lg img { height: 38px; } /*step*/ .ax-step { text-align: center; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; } .ax-step .ax-item { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; width: calc((100%/24)*2); } .ax-step .ax-item .ax-head { font-size: 12px; line-height: 18px; padding: 2px 6px; border-radius: 3px; position: relative; margin-bottom: 8px; } .ax-step .ax-item .ax-mark { width: 100%; line-height: 6px; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; } .ax-step .ax-item .ax-node { color: #198cff; width: 6px; height: 6px; border-radius: 100%; border: 2px solid #198cff; background-color: #fff; display: inline-block; position: relative; } .ax-step .ax-item .ax-mark div { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; height: 2px; background-color: #198cff; margin-top: 4px; } .ax-step .ax-item .ax-title { color: #333333; font-size: 16px; line-height: 18px; margin: 8px auto; } .ax-step .ax-item .ax-des { font-size: 12px; color: #666666; line-height: 18px; margin: 0 14px; } .ax-step .ax-item.ax-active .ax-node { border-color: #198cff; color: #198cff; } .ax-step .ax-item.ax-active ~ .ax-item .ax-mark div { background-color: #ccc; } .ax-step .ax-item.ax-active ~ .ax-item .ax-mark .ax-node { border-color: #ccc; color: #ccc; } .ax-step .ax-item.ax-active ~ .ax-item .ax-title, .ax-step .ax-item.ax-active ~ .ax-item .ax-head, .ax-step .ax-item.ax-active ~ .ax-item .ax-des { color: #ccc; } .ax-step .ax-item.ax-active .ax-head { color: #fff; background-color: #198cff; } .ax-step .ax-item.ax-active .ax-head:before { content: ''; width: 0; height: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #198cff; margin-left: -5px; position: absolute; left: 50%; bottom: -4px; } /**/ .ax-step.ax-ends-none:not(.ax-vertical) .ax-item:first-child .ax-mark div:first-child, .ax-step.ax-ends-none:not(.ax-vertical) .ax-item:last-child .ax-mark div:last-child, .ax-step.ax-ends-none:not(.ax-vertical) .ax-item.ax-active ~ .ax-item:last-child .ax-mark div:last-child { background: transparent; } .ax-step.ax-ends-none:not(.ax-vertical) .ax-item.ax-active .ax-mark div:last-child { background-color: #ccc; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child { text-align: left; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child .ax-des { margin-left: 0; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child { text-align: right; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child .ax-des { margin-right: 0; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child .ax-mark div:first-child, .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child .ax-mark div:last-child { display: none; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child .ax-mark div:last-child, .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child .ax-mark div:first-child { width: 100%; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item.ax-active .ax-mark div:last-child { background-color: #ccc; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child:not(.ax-active) .ax-head { padding-left: 0; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child:not(.ax-active) .ax-head { padding-right: 0; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:first-child.ax-active .ax-head:before { left: 5px; } .ax-step.ax-ends-scatter:not(.ax-vertical) .ax-item:last-child.ax-active .ax-head:before { left: auto; right: 0; } /**/ .ax-step.ax-style-dot .ax-item .ax-node { width: 10px; height: 10px; border-radius: 100%; border: none; background-color: #198cff; } .ax-step.ax-style-dot .ax-item.ax-active ~ .ax-item .ax-node { background-color: #ccc; } .ax-step.ax-style-circle .ax-item .ax-node { font-size: 12px; width: 18px; height: 18px; line-height: 18px; text-align: center; background: transparent; } .ax-step.ax-ends-scatter.ax-style-circle .ax-item:first-child.ax-active .ax-head:before { left: 11px; } .ax-step.ax-ends-scatter.ax-style-circle .ax-item:last-child.ax-active .ax-head:before { left: auto; right: 6px; } .ax-step.ax-style-circle .ax-item .ax-node *[class*="font"] { font-size: 12px; } .ax-step.ax-style-circle .ax-item .ax-mark div { margin-top: 10px; } .ax-step.ax-style-img .ax-item .ax-node { font-size: 22px; width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 0; border: none; background: transparent; } .ax-step.ax-style-img .ax-item .ax-node img { max-width: 44px; } .ax-step.ax-style-img .ax-item .ax-node *[class*="font"] { font-size: 22px; } .ax-step.ax-ends-scatter.ax-style-img .ax-item:first-child.ax-active .ax-head:before { left: 22px; } .ax-step.ax-ends-scatter.ax-style-img .ax-item:last-child.ax-active .ax-head:before { left: auto; right: 17px; } .ax-step.ax-style-img .ax-item .ax-mark div { margin-top: 21px; } /**/ .ax-step.ax-vertical { display: block; } .ax-step.ax-vertical .ax-item { width: 100%; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: 0; box-flex: 0; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; } .ax-step.ax-vertical .ax-item .ax-mark { height: 100%; width: 10px; display: -moz-box; display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; box-sizing: border-box; } .ax-step.ax-vertical .ax-item .ax-mark div { width: 2px; height: 60px; margin-top: 0; margin-left: 4px; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; } .ax-step.ax-vertical .ax-item .ax-mark div:first-child { height: 7px; } .ax-step.ax-vertical .ax-item:first-child .ax-mark div:first-child { background: transparent; } .ax-step.ax-vertical .ax-item:last-child .ax-mark div:last-child { display: none; } .ax-step.ax-vertical .ax-item.ax-active .ax-mark div:last-child { background-color: #ccc; } .ax-step.ax-vertical .ax-text { text-align: left; margin-left: 14px; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; } .ax-step.ax-vertical .ax-text .ax-title { line-height: 22px; margin: 0; } .ax-step.ax-vertical .ax-text .ax-des { margin: 4px 0 0 0; } .ax-step.ax-vertical .ax-head { width: 60px; margin-bottom: 0; margin-right: 8px; padding: 2px; color: #666666; vertical-align: top; } .ax-step.ax-vertical .ax-item.ax-active .ax-head:before { width: 0; height: 0; margin-left: 0; bordr-right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #198cff; left: auto; bottom: auto; top: 6px; right: -9px; } .ax-step.ax-vertical.ax-style-circle .ax-item .ax-mark { width: 22px; } .ax-step.ax-vertical.ax-style-circle .ax-item .ax-mark div { margin-left: 10px; } .ax-step.ax-vertical.ax-style-circle .ax-item .ax-mark div:first-child { display: none; } .ax-step.ax-vertical.ax-style-img .ax-item .ax-mark { width: 44px; } .ax-step.ax-vertical.ax-style-img .ax-item .ax-mark div { margin-left: 21px; } .ax-step.ax-vertical.ax-style-img .ax-item .ax-head, .ax-step.ax-vertical.ax-style-img .ax-item .ax-title { margin-top: 10px; } .ax-step.ax-vertical.ax-style-img .ax-item .ax-mark div:first-child { display: none; } .ax-step.ax-vertical.ax-reverse .ax-item.ax-active ~ .ax-item .ax-head, .ax-step.ax-vertical.ax-reverse .ax-item.ax-active ~ .ax-item .ax-des, .ax-step.ax-vertical.ax-reverse .ax-item.ax-active .ax-des { color: #333333; } .ax-step.ax-vertical.ax-reverse .ax-item .ax-mark div { background-color: #ccc; } .ax-step.ax-vertical.ax-reverse .ax-item .ax-title, .ax-step.ax-vertical.ax-reverse .ax-item:not(.ax-active) .ax-head, .ax-step.ax-vertical.ax-reverse .ax-item .ax-des { color: #ccc; } .ax-step.ax-vertical.ax-reverse .ax-item.ax-active .ax-title, .ax-step.ax-vertical.ax-reverse .ax-item.ax-active ~ .ax-item .ax-title { color: #333333; } .ax-step.ax-vertical.ax-reverse .ax-item:not(.ax-active) .ax-node { color: #ccc; border-color: #ccc; } .ax-step.ax-vertical.ax-reverse .ax-item.ax-active ~ .ax-item .ax-node { color: #198cff; border-color: #198cff; } .ax-step.ax-vertical.ax-reverse .ax-item.ax-active .ax-mark div:last-child, .ax-step.ax-vertical.ax-reverse .ax-item.ax-active ~ .ax-item .ax-mark div { background-color: #198cff; } .ax-step.ax-vertical.ax-reverse.ax-style-dot .ax-item:not(.ax-active) .ax-node { background-color: #ccc; } .ax-step.ax-vertical.ax-reverse.ax-style-dot .ax-item.ax-active ~ .ax-item .ax-node { background-color: #198cff; } /*backtop*/ .ax-backtop { display: inline-block; position: fixed; right: 14px; bottom: 14px; z-index: 5; } .ax-space-backtop { height: 54px; } .ax-backtop .ax-item { margin-top: 10px; position: relative; } .ax-backtop .ax-item > a { font-size: 18px; color: rgba(0, 0, 0, 0.2); border-radius: 3px; box-sizing: border-box; width: 38px; height: 38px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; background-color: rgba(255, 255, 255, 0.2); transition: all 0.2s linear; display: flex; justify-content: center; align-items: center; } .ax-backtop .ax-item > a:hover, .ax-backtop .ax-item.ax-active > a { color: #198cff; box-shadow: 0 0 0 1px #198cff inset; } .ax-backtop .ax-text { font-size: 12px; line-height: 18px; width: 120px; padding: 9px; background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); position: absolute; right: 46px; bottom: 0; z-index: 5; display: none; } .ax-backtop .ax-text img { width: 100%; } .ax-backtop .ax-text:before { content: ""; width: 10px; height: 10px; background-color: #fff; box-shadow: 1px 1px 0 0 #ebebeb; transform: rotate(-45deg); position: absolute; right: -4px; bottom: 15px; } .ax-backtop .ax-text:after { content: ''; width: 8px; height: 100%; background: transparent; position: absolute; right: -9px; top: 0; } .ax-backtop .ax-item .ax-dot { position: absolute; top: -2px; right: -2px; z-index: 2; } .ax-backtop .ax-item .ax-badge { position: absolute; top: -4px; right: -4px; z-index: 2; } .ax-backtop .ax-item.ax-social .ax-text { text-align: center; padding-left: 0; padding-right: 0; } .ax-backtop .ax-item.ax-social .ax-text a { font-size: 18px; color: #666666; text-align: center; width: 18px; margin: 0 4px; } .ax-backtop .ax-item.ax-image > a { background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; } .ax-backtop .ax-item.ax-load > a { background-position: center; background-size: 18px; background-repeat: no-repeat; background-image: url(../images/loading.svg); } .ax-backtop .ax-item.ax-totop { overflow: hidden; } .ax-backtop .ax-item.ax-totop > a { margin-bottom: -80px; } .ax-backtop .ax-item.ax-totop .ax-show { margin-bottom: 0; } .ax-backtop .ax-item.ax-focus > a { box-shadow: 0 0 0 1px #198cff inset; } .ax-backtop .ax-item.ax-focus:before { content: ''; width: 100%; height: 100%; border-radius: 3px; background-color: rgba(25, 140, 255, 0.2); transform: scale(1.3); position: absolute; } .ax-backtop.ax-lg .ax-item > a { font-size: 28px; width: calc(28px*2); height: calc(28px*2); } .ax-backtop.ax-radius .ax-item a, .ax-backtop.ax-radius .ax-item.ax-online:before { border-radius: 3px; } .ax-backtop.ax-square .ax-item a, .ax-backtop.ax-square .ax-item.ax-focus:before { border-radius: 0; } .ax-backtop.ax-round .ax-item a, .ax-backtop.ax-round .ax-item.ax-focus:before { border-radius: 100%; } .ax-backtop.ax-round .ax-item .ax-dot { top: 0; right: 0; } .ax-backtop.ax-lg .ax-text { line-height: 28px; padding: 14px; right: 64px; width: 180px; } .ax-backtop.ax-lg .ax-text:before { bottom: 23px; } .ax-backtop.ax-lg .ax-item.ax-social .ax-text a { font-size: 22px; width: 28px; } /*progress*/ .ax-progress { width: 100%; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; justify-content: center; align-items: center; zoom: 1; } .ax-progress .ax-progress-body { height: 6px; border-radius: 6px; margin-top: calc((28px - 6px)/2); -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; background-color: #f0f0f0; position: relative; display: block; } .ax-progress .ax-progress-bar { color: #fff; height: 100%; width: 100%; background-color: #198cff; border-radius: 8px; text-align: right; } .ax-progress .ax-progress-percent { color: #666666; font-size: 12px; width: 40px; text-align: right; } .ax-progress .ax-progress-result { color: #b3b3b3; margin-left: 8px; } .ax-progress.ax-progress-primary .ax-progress-bar { background-color: #198cff; } .ax-progress.ax-progress-secondary .ax-progress-bar { background-color: #475b66; } .ax-progress.ax-progress-danger .ax-progress-bar { background-color: #dc3545; } .ax-progress.ax-progress-success .ax-progress-bar { background-color: #41a358; } .ax-progress.ax-progress-warning .ax-progress-bar { background-color: #ffc107; } .ax-progress.ax-progress-info .ax-progress-bar { background-color: #14ccc9; } .ax-progress.ax-progress-ad .ax-progress-bar { background-color: #ff8400; } .ax-progress.ax-progress-primary .ax-progress-result { color: #198cff; } .ax-progress.ax-progress-secondary .ax-progress-result { color: #475b66; } .ax-progress.ax-progress-danger .ax-progress-result { color: #dc3545; } .ax-progress.ax-progress-success .ax-progress-result { color: #41a358; } .ax-progress.ax-progress-warning .ax-progress-result { color: #ffc107; } .ax-progress.ax-progress-info .ax-progress-result { color: #14ccc9; } .ax-progress.ax-progress-ad .ax-progress-result { color: #ff8400; } .ax-progress.ax-lg .ax-progress-body { height: 28px; border-radius: 28px; margin-top: 0; } .ax-progress.ax-lg .ax-progress-bar { border-radius: 28px; } .ax-progress.ax-lg .ax-progress-bar i { padding: 0 14px; } .ax-progress.ax-sm .ax-progress-body { height: 2px; border-radius: 2px; margin-top: calc((28px - 2px)/2); } .ax-progress.ax-sm .ax-progress-bar { border-radius: 2px; } .ax-progress-circle { width: 120px; text-align: center; margin: auto; } .ax-form-con + .ax-progress-circle { width: 38px; height: 38px; margin-left: 8px; margin-top: 0; } .ax-form-con + .ax-progress-circle .ax-progress-text { color: #b3b3b3; } .ax-progress-circle.ax-half { width: 160px; } .ax-progress-line { text-align: center; margin: auto; } .ax-progress-circle > svg { height: 100%; display: block; transition: all 0.2s linear; } .ax-progress-line > svg { height: 6px; border-radius: 6px; margin-top: calc((28px - 6px)/2); } .ax-progress-circle .ax-progress-text, .ax-progress-line .ax-progress-text { color: #666666; transition: all 0.2s linear; } .ax-progress-line .ax-progress-text { font-size: 12px; text-align: right; width: 40px; display: inline-block; } .ax-progress-circle .ax-progress-text .ax-row01, .ax-progress-line .ax-progress-text .ax-row01 { color: #b3b3b3; font-size: 12px; line-height: 18px; transition: all 0.2s linear; } .ax-progress-circle .ax-progress-text .ax-row02, .ax-progress-line .ax-progress-text .ax-row02 { font-size: 18px; } .ax-progress-circle .ax-progress-text svg { width: 28px; height: 28px; transition: all 0.2s linear; } .ax-progress-line .ax-progress-text svg { height: 28px; transition: all 0.2s linear; } .ax-progress-circle.ax-success .ax-progress-text, .ax-progress-circle.ax-success .ax-progress-text .ax-row02, .ax-progress-line.ax-success .ax-progress-text, .ax-progress-line.ax-success .ax-progress-text .ax-row02 { color: #198cff; } .ax-progress-circle.ax-success .ax-progress-text svg, .ax-progress-line.ax-success .ax-progress-text svg { fill: #198cff; } .ax-progress-circle.ax-danger .ax-progress-text, .ax-progress-circle.ax-danger .ax-progress-text .ax-row02, .ax-progress-line.ax-danger .ax-progress-text, .ax-progress-line.ax-danger .ax-progress-text .ax-row02 { color: #dc3545; } .ax-progress-circle.ax-danger .ax-progress-text svg, .ax-progress-line.ax-danger .ax-progress-text svg { fill: #dc3545; } /*filter*/ .ax-filter { font-size: 14px; background-color: #fff; box-sizing: border-box; position: relative; z-index: 3; } .ax-filter .ax-toggle { color: #ccc; } .ax-filter .ax-other { display: none; } .ax-filter .ax-item { position: relative; padding: 6px 14px; box-sizing: border-box; } .ax-filter.ax-padding .ax-item { padding-left: 0; padding-right: 0; } .ax-filter .ax-item .ax-head { color: #b3b3b3; margin-right: 10px; padding-right: 10px; position: relative; } .ax-filter .ax-item .ax-head:before { content: ''; width: 1px; height: 12px; background-color: #f0f0f0; position: absolute; right: 0px; top: 8px; } .ax-filter .ax-item .ax-text a { padding: 0 10px; border-radius: 14px; } .ax-filter .ax-item .ax-text a:hover { background-color: #f0f0f0; } .ax-filter .ax-item .ax-text a.ax-active { color: #fff; background-color: #198cff; } .ax-filter .ax-search-box .ax-head { line-height: 38px; } .ax-filter .ax-search-box .ax-head:before { top: 13px; } .ax-filter .ax-search { width: 300px; height: 38px; margin-right: 24px; position: relative; float: left; } .ax-filter .ax-search input { font-size: 14px; width: 100%; position: absolute; top: 0; left: 0; } .ax-filter .ax-flex-block .ax-search a { color: #b3b3b3; width: 44px; height: 38px; line-height: 38px; text-align: center; padding: 0; position: absolute; right: 0; top: 0; z-index: 1; } .ax-filter .ax-flex-block .ax-search a:hover { background: transparent; color: #198cff; } .ax-filter .ax-search a:after { content: ''; width: 1px; height: 16px; background-color: #f0f0f0; position: absolute; left: 0; top: 11px; } .ax-filter .ax-hot { font-size: 12px; color: #666666; margin-top: 5px; } .ax-filter .ax-toggle *[class*='font'] { transition: transform 0.2s linear, box-shadow 0.2s linear; -webkit-transition: transform 0.2s linear, box-shadow 0.2s linear; } .ax-filter .ax-ad { width: 100%; } .ax-filter .ax-ad a { display: block; } .ax-filter .ax-ad img { display: block; width: 100%; } /*btn deform*/ .ax-deform { width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 3px; transition: all 0.2s linear; position: relative; } .ax-deform:before { border-radius: 3px; } .ax-deform i { height: 2px; width: 16px; background-color: #666666; border-radius: 2px; transition: all 0.2s linear; position: absolute; left: calc((100% - 16px)/2); top: calc(50% - 1px); } .ax-deform.ax-i .ax-1 { width: 2px; top: calc((100% - 16px)/2); left: calc(50% - 1px); } .ax-deform.ax-i .ax-2 { width: 14px; transform: rotate(90deg); top: calc(50% + 2px); left: calc((100% - 14px)/2); } .ax-deform.ax-e .ax-1 { top: calc(50% - 6px); } .ax-deform.ax-e .ax-3 { top: calc(50% + 4px); } .ax-deform.ax-t .ax-2 { transform: rotate(90deg); } .ax-deform.ax-x .ax-1 { transform: rotate(-45deg); } .ax-deform.ax-x .ax-2 { transform: rotate(45deg); } .ax-deform.ax-x .ax-3 { opacity: 0; } .ax-deform.ax-border { border: none; } .ax-deform.ax-border:before { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-color: rgba(0, 0, 0, 0.12); } .ax-deform.ax-square { border-radius: 0; } .ax-deform.ax-square:before { border-radius: 0; } .ax-deform.ax-radius { border-radius: 3px; } .ax-deform.ax-radius:before { border-radius: 3px; } .ax-deform.ax-circle { border-radius: 100%; } .ax-deform.ax-circle:before { border-radius: 100%; } .ax-deform.ax-disabled i { background-color: #ccc; } .ax-deform.ax-lg { width: calc(44px + 10px); height: calc(44px + 10px); } .ax-deform.ax-lg i { width: 24px; left: calc((100% - 24px)/2); } .ax-deform.ax-lg.ax-i .ax-1 { top: calc((100% - 24px)/2); } .ax-deform.ax-lg.ax-i .ax-2 { width: 20px; left: calc((100% - 20px)/2); transform: rotate(90deg); } .ax-deform.ax-lg.ax-e .ax-1 { top: calc(50% - 8px); } .ax-deform.ax-lg.ax-e .ax-3 { top: calc(50% + 6px); } .ax-deform.ax-md { width: 38px; height: 38px; } .ax-deform.ax-sm { width: 28px; height: 28px; } .ax-deform.ax-sm i { width: 12px; left: calc((100% - 12px)/2); } .ax-deform.ax-sm.ax-i .ax-1 { top: calc((100% - 12px)/2); } .ax-deform.ax-sm.ax-i .ax-2 { width: 8px; transform: rotate(90deg); left: calc((100% - 8px)/2); } .ax-deform.ax-e.ax-sm .ax-1 { top: calc(50% - 5px); } .ax-deform.ax-e.ax-sm .ax-3 { top: calc(50% + 3px); } .ax-deform.ax-primary i { background-color: #198cff; } .ax-deform.ax-primary:before { border-color: #198cff; } .ax-deform.ax-secondary i { background-color: #475b66; } .ax-deform.ax-secondary:before { border-color: #475b66; } .ax-deform.ax-success i { background-color: #41a358; } .ax-deform.ax-success:before { border-color: #41a358; } .ax-deform.ax-danger i { background-color: #dc3545; } .ax-deform.ax-danger:before { border-color: #dc3545; } .ax-deform.ax-warning i { background-color: #ffc107; } .ax-deform.ax-warning:before { border-color: #ffc107; } .ax-deform.ax-info i { background-color: #14ccc9; } .ax-deform.ax-info:before { border-color: #14ccc9; } .ax-deform.ax-ad i { background-color: #ff8400; } .ax-deform.ax-ad:before { border-color: #ff8400; } .ax-deform.ax-ignore i { background-color: #b3b3b3; } .ax-deform.ax-ignore:before { border-color: #b3b3b3; } .ax-deform.ax-reverse { background-color: #333333; } .ax-deform.ax-reverse:before { display: none; } .ax-deform.ax-reverse i { background-color: #fff; } .ax-deform.ax-reverse.ax-primary { background-color: #198cff; } .ax-deform.ax-reverse.ax-secondary { background-color: #475b66; } .ax-deform.ax-reverse.ax-success { background-color: #41a358; } .ax-deform.ax-reverse.ax-danger { background-color: #dc3545; } .ax-deform.ax-reverse.ax-warning { background-color: #ffc107; } .ax-deform.ax-reverse.ax-info { background-color: #14ccc9; } .ax-deform.ax-reverse.ax-ad { background-color: #ff8400; } .ax-deform.ax-reverse.ax-ignore { background-color: #f0f0f0; } .ax-deform.ax-reverse.ax-ignore i { background-color: #b3b3b3; } .ax-deform.ax-disabled { cursor: not-allowed; } .ax-deform.ax-disabled:not(.ax-reverse) i { background-color: #ccc !important; } .ax-deform.ax-disabled:not(.ax-reverse):before { border-color: #ebebeb !important; } .ax-deform.ax-reverse.ax-disabled { opacity: 0.3; } /*window*/ .ax-window { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; position: fixed; left: -10000px; top: 0; z-index: 8; } .ax-window .ax-window-overlay { width: 100%; height: 100%; background-color: transparent; opacity: 0; transition: all 0.2s linear; position: absolute; left: 0; top: 0; z-index: 4; } .ax-window.ax-window-show { left: 0; top: 0; } .ax-window[data-mask="true"] .ax-window-overlay { background-color: rgba(0, 0, 0, 0.4); } .ax-window.ax-window-show .ax-window-overlay { opacity: 1; } .ax-window .ax-window-contain { width: 500px; background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); opacity: 1; transition: all 0.2s linear; animation-duration: 0.3s; animation-fill-mode: both; position: relative; z-index: 9; } .ax-window[data-size="small"] .ax-window-contain { width: calc(500px/2); } .ax-window[data-size="middle"] .ax-window-contain { width: 500px; } .ax-window[data-size="large"] .ax-window-contain { width: calc(100% - 14px*2); } .ax-window[data-size="full"] .ax-window-contain { width: calc(100% - 14px*2); height: calc(100% - 14px*2); } .ax-window[data-size="full"] .ax-flex-block { overflow: hidden; } .ax-window[data-size="full"] .ax-window-content { max-height: 100%; } .ax-window[data-mask="true"] .ax-window-contain { border: none; box-shadow: none; } .ax-window.ax-window-show .ax-window-contain { animation-name: springIn; } .ax-window.ax-window-show[data-in="fadeIn"] .ax-window-contain { animation-name: fadeIn; } .ax-window.ax-window-show[data-in="fadeInUp"] .ax-window-contain { animation-name: fadeInUp; } .ax-window.ax-window-show[data-in="fadeInDown"] .ax-window-contain { animation-name: fadeInDown; } .ax-window-title { text-align: left; line-height: 38px; border-radius: 3px 3px 0 0; border-sizing: border-box; padding-left: 14px; background-color: #fff; position: relative; } .ax-window .ax-window-contain > .ax-window-close { width: 38px; height: 38px; text-align: center; line-height: 38px; transition: all 0.2s linear; color: #b3b3b3; position: absolute; right: 0; top: 0; z-index: 1; } .ax-window .ax-window-contain > .ax-window-close [class*='font'], .ax-window .ax-window-contain > .ax-window-close svg { color: #b3b3b3; fill: #b3b3b3; transition: all 0.2s linear; } .ax-window .ax-window-contain > .ax-window-close:hover [class*='font'], .ax-window .ax-window-contain > .ax-window-close:hover svg { color: #dc3545; fill: #dc3545; } .ax-window-content, .fancybox-content .content { position: relative; max-height: 600px; overflow-x: hidden; overflow-y: auto; } .ax-window-operate { border-radius: 0 0 3px 3px; overflow-y: hidden; } .ax-window-operate .ax-explain { font-size: 14px; line-height: 18px; height: 38px; display: flex; justify-content: flex-start; align-items: center; } .ax-window-operate.ax-row { line-height: 44px; text-align: center; } .ax-window-operate.ax-row .ax-gutter-line { height: 44px; } .ax-window-operate.ax-row a:hover { background-color: #fff; } .ax-window-operate.ax-row .ax-gutter-line:last-child { display: none; } .ax-window-tips { text-align: center; padding: calc(14px*3) 14px; } .ax-window-tips .ax-tips-icon { width: 100%; } .ax-window-tips .ax-tips-title { font-size: 18px; line-height: 38px; } .ax-window-tips .ax-tips-des { font-size: 14px; color: #666666; } .ax-window-tips .ax-tips-btn { margin-top: calc(14px*2); } .ax-window video { width: 100%; height: auto; display: block; } /*drawer*/ .ax-drawer { height: 100vh; width: 100%; position: fixed; left: -10000px; top: 0; z-index: 8; } .ax-drawer .ax-drawer-overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: all 0.2s linear; position: absolute; left: 0; top: 0; z-index: 4; } .ax-drawer.ax-drawer-show { left: 0; top: 0; } .ax-drawer.ax-drawer-show .ax-drawer-overlay { opacity: 1; } .ax-drawer .ax-drawer-contain { height: 100%; width: 400px; background-color: #fff; opacity: 1; transition: all 0.2s linear; box-sizing: border-box; animation-duration: 0.3s; animation-fill-mode: both; display: -moz-box; display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; position: absolute; right: -400px; top: 0; z-index: 9; } .ax-drawer[data-size="small"] .ax-drawer-contain { right: -400px; width: 400px; } .ax-drawer[data-size="middle"] .ax-drawer-contain { right: -600px; width: 600px; } .ax-drawer[data-size="large"] .ax-drawer-contain { right: -70%; width: 70%; } .ax-drawer.ax-drawer-show .ax-drawer-contain { right: 0; } .ax-drawer[data-position="right"] .ax-drawer-contain { right: -400px; } .ax-drawer[data-position="right"][data-size="small"] .ax-drawer-contain { right: -400px; } .ax-drawer[data-position="right"][data-size="middle"] .ax-drawer-contain { right: -600px; } .ax-drawer[data-position="right"][data-size="large"] .ax-drawer-contain { right: -70%; } .ax-drawer[data-position="right"].ax-drawer-show .ax-drawer-contain { right: 0; } .ax-drawer[data-position="left"] .ax-drawer-contain { left: -400px; } .ax-drawer[data-position="left"][data-size="small"] .ax-drawer-contain { left: -400px; } .ax-drawer[data-position="left"][data-size="middle"] .ax-drawer-contain { left: -600px; } .ax-drawer[data-position="left"][data-size="large"] .ax-drawer-contain { left: -70%; } .ax-drawer[data-position="left"].ax-drawer-show .ax-drawer-contain { left: 0; } .ax-drawer[data-position="top"] .ax-drawer-contain { width: 100%; max-height: 200px; left: auto; right: auto; bottom: auto; top: -200px; } .ax-drawer[data-position="top"][data-size="small"] .ax-drawer-contain { top: -200px; max-height: 200px; } .ax-drawer[data-position="top"][data-size="middle"] .ax-drawer-contain { top: -400px; max-height: 400px; } .ax-drawer[data-position="top"][data-size="large"] .ax-drawer-contain { top: -70%; max-height: 70%; } .ax-drawer[data-position="top"].ax-drawer-show .ax-drawer-contain { top: 0; } .ax-drawer[data-position="bottom"] .ax-drawer-contain { width: 100%; max-height: 200px; left: auto; right: auto; top: auto; bottom: -200px; } .ax-drawer[data-position="bottom"][data-size="small"] .ax-drawer-contain { bottom: -200px; max-height: 200px; } .ax-drawer[data-position="bottom"][data-size="middle"] .ax-drawer-contain { bottom: -400px; max-height: 400px; } .ax-drawer[data-position="bottom"][data-size="large"] .ax-drawer-contain { bottom: -70%; max-height: 70%; } .ax-drawer[data-position="bottom"].ax-drawer-show .ax-drawer-contain { bottom: 0; } .ax-drawer .ax-drawer-title { line-height: 38px; box-sizing: border-box; padding: 0 14px; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; position: relative; } .ax-drawer .ax-drawer-contain > .ax-drawer-close { color: #fff; width: 38px; height: 38px; text-align: center; line-height: 38px; transition: all 0.2s linear; opacity: 0; position: absolute; left: calc(-38px); top: 0; z-index: 1; } .ax-drawer[data-position="right"] .ax-drawer-contain > .ax-drawer-close { left: calc(-38px); } .ax-drawer[data-position="left"] .ax-drawer-contain > .ax-drawer-close { left: auto; right: calc(-38px); } .ax-drawer[data-position="top"] .ax-drawer-contain > .ax-drawer-close { left: auto; right: 0; top: auto; bottom: calc(-38px); } .ax-drawer[data-position="bottom"] .ax-drawer-contain > .ax-drawer-close { left: auto; right: 0; top: calc(-38px); } .ax-drawer.ax-drawer-show .ax-drawer-contain > .ax-drawer-close { opacity: 1; } .ax-drawer .ax-drawer-contain > .ax-drawer-close [class*='font'], .ax-drawer .ax-drawer-contain > .ax-drawer-close svg { color: #fff; fill: #fff; transition: all 0.2s linear; } .ax-drawer .ax-drawer-contain > .ax-drawer-close:hover [class*='font'], .ax-drawer .ax-drawer-contain > .ax-drawer-close:hover svg { color: #fff; fill: #fff; } .ax-drawer .ax-drawer-content { max-height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-drawer .ax-drawer-operate { border-radius: 0 0 3px 3px; overflow-y: hidden; } .ax-drawer .ax-drawer-operate .ax-explain { line-height: 18px; height: 38px; display: flex; justify-content: flex-start; align-items: center; } .ax-drawer .ax-drawer-operate.ax-row { line-height: 44px; text-align: center; } .ax-drawer .ax-drawer-operate.ax-row .ax-gutter-line { height: 44px; } .ax-drawer .ax-drawer-operate.ax-row a:hover { background-color: #fff; } .ax-drawer .ax-drawer-operate.ax-row .ax-gutter-line:last-child { display: none; } .ax-drawer video, .ax-drawer audio { width: 100%; max-width: 100%; height: auto; display: block; } .ax-drawer[data-position="left"][data-size="middle"] video, .ax-drawer[data-position="left"][data-size="large"] video, .ax-drawer[data-position="right"][data-size="middle"] video, .ax-drawer[data-position="right"][data-size="large"] video, .ax-drawer[data-position="left"][data-size="middle"] audio, .ax-drawer[data-position="left"][data-size="large"] audio, .ax-drawer[data-position="right"][data-size="middle"] audio, .ax-drawer[data-position="right"][data-size="large"] audio, .ax-drawer[data-position="top"] audio, .ax-drawer[data-position="bottom"] audio { width: auto; } .ax-drawer .ax-menu { width: 100%; } /**/ .ax-glitter { width: 14px; height: 14px; border-radius: 100%; background-color: #dc3545; display: inline-flex; justify-content: center; align-items: center; position: relative; } .ax-glitter * { color: #fff; position: relative; z-index: 2; } .ax-glitter:before, .ax-glitter:after { content: ''; width: 100%; height: 100%; border-radius: 100%; background-color: #dc3545; transform: scale(3); opacity: 0.5; position: absolute; left: 0; top: 0; } .ax-glitter:before { animation: ax-wave-3 1s infinite; } .ax-glitter:after { animation: ax-wave-5 1s infinite; } .ax-glitter.ax-sm:before { animation-name: ax-wave-2; } .ax-glitter.ax-sm:after { animation-name: ax-wave-3; } .ax-glitter.ax-md:before { animation-name: ax-wave-3; } .ax-glitter.ax-md:after { animation-name: ax-wave-5; } .ax-glitter.ax-lg:before { animation-name: ax-wave-4; } .ax-glitter.ax-lg:after { animation-name: ax-wave-7; } @keyframes ax-wave-2 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2); opacity: 0; } } @keyframes ax-wave-3 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3); opacity: 0; } } @keyframes ax-wave-4 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4); opacity: 0; } } @keyframes ax-wave-5 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(5); opacity: 0; } } @keyframes ax-wave-6 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(6); opacity: 0; } } @keyframes ax-wave-7 { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(7); opacity: 0; } } .ax-glitter.ax-primary, .ax-glitter.ax-primary:before, .ax-glitter.ax-primary:after { background-color: #198cff; } .ax-glitter.ax-danger, .ax-glitter.ax-danger:before, .ax-glitter.ax-danger:after { background-color: #dc3545; } .ax-glitter.ax-success, .ax-glitter.ax-success:before, .ax-glitter.ax-success:after { background-color: #41a358; } .ax-glitter.ax-secondary, .ax-glitter.ax-secondary:before, .ax-glitter.ax-secondary:after { background-color: #475b66; } .ax-glitter.ax-warning, .ax-glitter.ax-warning:before, .ax-glitter.ax-warning:after { background-color: #ffc107; } .ax-glitter.ax-info, .ax-glitter.ax-info:before, .ax-glitter.ax-info:after { background-color: #14ccc9; } .ax-glitter.ax-ad, .ax-glitter.ax-ad:before, .ax-glitter.ax-ad:after { background-color: #ff8400; } /*lazyshow*/ .ax-lazy { transition: all 0.2s linear; } .ax-lazy.ax-hide { opacity: 0; } .ax-lazy.ax-show { opacity: 1; } .ax-lazy.ax-hide.ax-scale { transform: scale(0); } .ax-lazy.ax-show.ax-scale { transform: scale(1); } .ax-lazy.ax-hide.ax-fly { transform: translate(0, 50%); } .ax-lazy.ax-show.ax-fly { transform: translate(0, 0); } /*plugins start*/ .ax-videojs .video-js { max-width: 100%; } .ax-videojs.ax-playlist-side { background: #1a1a1a; } .ax-videojs.ax-playlist-bottom { background: #1a1a1a; } .ax-videojs.ax-playlist-pages { background: #1a1a1a; } .ax-videojs.ax-playlist-pages .video-js { width: 100% !important; height: 400px; } .ax-videojs.ax-playlist-side .video-js { width: 100% !important; height: 400px; } .ax-videojs.ax-playlist-side .swiper-container { width: 200px; height: 400px; box-sizing: border-box; overflow: hidden; } .ax-videojs.ax-playlist-bottom .video-js { width: 100% !important; height: 400px; } .ax-videojs.ax-playlist-bottom .swiper-container { height: 140px; box-sizing: border-box; overflow: hidden; } .ax-videojs[class*='ax-playlist-'] .swiper-container { margin: 14px; } .ax-videojs[class*='ax-playlist-'] .swiper-slide { overflow: hidden; } .ax-videojs[class*='ax-playlist-'] .swiper-slide figure { color: #fff; height: 100%; box-sizing: border-box; padding: 8px; cursor: pointer; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover,20px 20px; background-color: #f5f5f5; position: relative; display: block; } .ax-videojs[class*='ax-playlist-'] .swiper-slide-active:before { content: ''; width: 100%; height: 100%; border: 2px solid #198cff; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2; } .ax-videojs[class*='ax-playlist-'] .swiper-slide i { display: none; } .ax-videojs[class*='ax-playlist-'] .swiper-slide-active i { color: #fff; font-size: 14px; line-height: 28px; padding: 0 8px; background-color: #198cff; border-radius: 0 0 6px 0; position: absolute; top: 0; left: 0; z-index: 2; display: block; } .ax-videojs[class*='ax-playlist-'] .swiper-slide em { color: #fff; font-size: 12px; line-height: 28px; padding: 0 8px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); position: absolute; top: 0; right: 0; z-index: 2; } .ax-videojs[class*='ax-playlist-'] .swiper-slide figcaption { font-size: 14px; font-style: normal; overflow: hidden; max-height: 36px; line-height: 18px; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-right: 8px; position: absolute; bottom: 8px; left: 8px; z-index: 2; } .ax-videojs[class*='ax-playlist-'] .swiper-slide .ax-mask { width: 100%; height: 100%; background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)); opacity: 0; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; position: absolute; left: 0; top: 100%; } .ax-videojs[class*='ax-playlist-'] .swiper-slide:hover .ax-mask { opacity: 1; top: 0; } /*plugins aplayer*/ .ax-aplayer { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); box-shadow: 5px 5px 20px rgba(51, 51, 51, 0.4); border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; position: relative; } .ax-aplayer:not(.aplayer-bottom) { overflow: hidden; } .ax-aplayer * { box-sizing: content-box; } .ax-aplayer svg { fill: #666666; width: 100%; height: 100%; transition: all 0.1s linear; } .ax-aplayer.aplayer-withlist .aplayer-list { border-top: 1px solid #ebebeb; display: block; } .ax-aplayer.aplayer-withlist .aplayer-icon-order, .ax-aplayer.aplayer-withlist .aplayer-time .aplayer-icon.aplayer-icon-menu { display: inline; } .ax-aplayer.aplayer-withlrc .aplayer-pic { height: 96px; width: 96px; } .ax-aplayer.aplayer-withlrc .aplayer-info { height: 96px; padding: 10px 7px 0; } .ax-aplayer.aplayer-withlrc .aplayer-lrc { display: block; } .ax-aplayer.aplayer-narrow { width: 66px; } .ax-aplayer.aplayer-narrow .aplayer-info, .ax-aplayer.aplayer-narrow .aplayer-list { display: none!important; } .ax-aplayer.aplayer-narrow .aplayer-body, .ax-aplayer.aplayer-narrow .aplayer-pic { height: 66px; width: 66px; } .ax-aplayer.aplayer-fixed { margin: 0; overflow: visible; max-width: 500px; box-shadow: none; position: fixed; bottom: calc(50vh - 33px); left: 0; right: 0; z-index: 99; } .ax-aplayer.aplayer-fixed .aplayer-list { border: 1px solid #eee; border-bottom: none; margin-bottom: 65px; } .ax-aplayer.aplayer-fixed .aplayer-body { margin: 0; background: #fff; transition: all 0.3s ease; max-width: 500px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; } .ax-aplayer.aplayer-fixed .aplayer-lrc { width: 500px; text-align: left; margin: 0; padding: 14px; pointer-events: none; text-shadow: -1px -1px 0 #fff; position: absolute; left: 0; right: 0; z-index: 98; display: block; } .ax-aplayer.aplayer-fixed .aplayer-lrc:after, .ax-aplayer.aplayer-fixed .aplayer-lrc:before { display: none; } .ax-aplayer.aplayer-fixed .aplayer-info { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0 0; transform-origin: 0 0; transition: all 0.3s ease; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .ax-aplayer.aplayer-fixed .aplayer-info .aplayer-music { width: calc(100% - 105px); } .ax-aplayer.aplayer-fixed .aplayer-miniswitcher { display: block; } .ax-aplayer.aplayer-fixed.aplayer-narrow .aplayer-info { display: block; -webkit-transform: scaleX(0); transform: scaleX(0); } .ax-aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { width: 66px !important; } .ax-aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon { -webkit-transform: rotateY(0); transform: rotateY(0); } .ax-aplayer.aplayer-fixed .aplayer-icon-back, .ax-aplayer.aplayer-fixed .aplayer-icon-forward, .ax-aplayer.aplayer-fixed .aplayer-icon-lrc, .ax-aplayer.aplayer-fixed .aplayer-icon-play { display: inline-block; } .ax-aplayer.aplayer-fixed .aplayer-icon-back, .ax-aplayer.aplayer-fixed .aplayer-icon-forward, .ax-aplayer.aplayer-fixed .aplayer-icon-menu, .ax-aplayer.aplayer-fixed .aplayer-icon-play { position: absolute; bottom: 26px; width: 22px; height: 22px; } .ax-aplayer.aplayer-fixed .aplayer-icon-back { right: 75px; } .ax-aplayer.aplayer-fixed .aplayer-icon-play { right: 50px; } .ax-aplayer.aplayer-fixed .aplayer-icon-forward { right: 25px; } .ax-aplayer.aplayer-fixed .aplayer-icon-menu { right: 0; } .ax-aplayer.aplayer-bottom { width: 100%; border-radius: 0; border-top: 1px solid #ebebeb; box-sizing: border-box; position: fixed; left: 0; bottom: 0; z-index: 99; } .ax-aplayer.aplayer-bottom .aplayer-body { width: 1000px; margin: auto; } .ax-aplayer.aplayer-bottom .aplayer-list { width: 500px; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; position: fixed; left: auto; bottom: 49px; right: calc((100% - 1000px)/2); } .ax-aplayer.aplayer-bottom .aplayer-lrc { width: 100%; position: fixed; left: 0; bottom: 49px; } .ax-aplayer.aplayer-bottom .aplayer-lrc:after, .ax-aplayer.aplayer-bottom .aplayer-lrc:before { display: none; } .ax-aplayer.aplayer-bottom .aplayer-info { height: 48px; padding: 8px; } .ax-aplayer.aplayer-bottom .aplayer-info .aplayer-music { line-height: 18px; height: 18px; margin-bottom: 0; } .ax-aplayer.aplayer-bottom .aplayer-pic { width: 32px; height: 32px; margin: 8px 0; border-radius: 3px; } .ax-aplayer.aplayer-bottom .aplayer-pic a { border-radius: 3px; } .ax-aplayer.aplayer-bottom .aplayer-pic .aplayer-button { display: none; } .ax-aplayer.aplayer-bottom.aplayer-withlist .aplayer-list { border-top: none; } .ax-aplayer.aplayer-bottom .aplayer-list ol li:first-child { border-top: 1px solid #ebebeb; } .ax-aplayer.aplayer-bottom .aplayer-operate { display: flex; justify-content: flex-start; align-items: center; margin-right: 14px; } .ax-aplayer.aplayer-bottom .aplayer-icon-back, .ax-aplayer.aplayer-bottom .aplayer-icon-forward, .ax-aplayer.aplayer-bottom .aplayer-icon-lrc, .ax-aplayer.aplayer-bottom .aplayer-icon-play { display: inline-block; } .ax-aplayer.aplayer-bottom .aplayer-icon-back, .ax-aplayer.aplayer-bottom .aplayer-icon-forward { width: 22px; height: 22px; } .ax-aplayer.aplayer-bottom .aplayer-icon-play { width: 26px; height: 26px; border: 2px solid #666666; position: relative; border-radius: 100%; margin: 0 8px; } .ax-aplayer.aplayer-bottom .aplayer-icon-play svg { height: 20px; width: 20px; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } .ax-aplayer.aplayer-bottom .aplayer-icon-back:hover, .ax-aplayer.aplayer-bottom .aplayer-icon-forward:hover, .ax-aplayer.aplayer-bottom .aplayer-icon-play:hover { border-color: #198cff; } .ax-aplayer.aplayer-bottom .aplayer-icon-back:hover svg, .ax-aplayer.aplayer-bottom .aplayer-icon-forward:hover svg, .ax-aplayer.aplayer-bottom .aplayer-icon-play:hover svg { fill: #198cff; } .ax-aplayer.aplayer-bottom .aplayer-time { height: auto; margin: 0; display: flex; justify-content: flex-end; align-items: center; } .ax-aplayer.aplayer-bottom .aplayer-volume-wrap .aplayer-volume-bar-wrap { bottom: 22px; } .ax-aplayer.aplayer-bottom .aplayer-time button { width: 22px; height: 22px; } .ax-aplayer.aplayer-bottom .aplayer-time-inner { color: #666666; font-size: 12px; } .ax-aplayer.aplayer-arrow .aplayer-icon-loop, .ax-aplayer.aplayer-arrow .aplayer-icon-order, .ax-aplayer.aplayer-mobile .aplayer-icon-volume-down { display: none; } .ax-aplayer.aplayer-loading .aplayer-info .aplayer-loading-icon { display: block; } .ax-aplayer.aplayer-loading .aplayer-info .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { -webkit-transform: scale(1); transform: scale(1); } .ax-aplayer .aplayer-body { width: 100%; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; position: relative; } .ax-aplayer .aplayer-icon { font-size: 18px; width: 18px; height: 18px; vertical-align: middle; background-color: transparent; border: none; outline: none; cursor: pointer; padding: 0; margin: 0; display: inline-block; } .ax-aplayer .aplayer-icon svg { float: left; transition: all 0.1s linear; } .ax-aplayer .aplayer-icon-back, .ax-aplayer .aplayer-icon-forward, .ax-aplayer .aplayer-icon-lrc, .ax-aplayer .aplayer-icon-order, .ax-aplayer .aplayer-icon-play { display: none; } .ax-aplayer .aplayer-icon-lrc-inactivity svg { opacity: 0.4; } .ax-aplayer .aplayer-icon-forward { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .ax-aplayer .aplayer-lrc-content { display: none; } .ax-aplayer .aplayer-pic { float: left; height: 66px; width: 66px; position: relative; z-index: 2; } .ax-aplayer .aplayer-pic a { width: 100%; height: 100%; background-size: cover; background-position: 50%; transition: all 0.3s ease; } .ax-aplayer .aplayer-pic:hover .aplayer-button { opacity: 1; } .ax-aplayer .aplayer-pic .aplayer-button { border-radius: 50%; opacity: 0.8; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); transition: all 0.1s ease; cursor: pointer; position: absolute; } .ax-aplayer .aplayer-pic .aplayer-button path { fill: #fff; } .ax-aplayer .aplayer-pic .aplayer-hide { display: none; } .ax-aplayer .aplayer-pic .aplayer-play { width: 26px; height: 26px; border: 2px solid #fff; margin: 0 -15px -15px 0; bottom: 50%; right: 50%; } .ax-aplayer .aplayer-pic .aplayer-play svg { height: 20px; width: 20px; position: absolute; top: 3px; left: 4px; } .ax-aplayer .aplayer-pic .aplayer-pause { width: 16px; height: 16px; border: 2px solid #fff; bottom: 4px; right: 4px; } .ax-aplayer .aplayer-pic .aplayer-pause svg { height: 12px; width: 12px; position: absolute; top: 2px; left: 2px; } .ax-aplayer .aplayer-info { padding: 8px; height: 66px; box-sizing: border-box; display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-aplayer .aplayer-info .aplayer-music { width: 100%; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; zoom: 1; } .ax-aplayer .aplayer-info .aplayer-text { display: block; line-height: 22px; height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; margin: 0 0 8px 5px; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: default; } .ax-aplayer .aplayer-info .aplayer-music .aplayer-title { font-size: 14px; font-weight: bold; } .ax-aplayer .aplayer-info .aplayer-music .aplayer-author { color: #b3b3b3; } .ax-aplayer .aplayer-info .aplayer-music .ax-aplayer.author { font-size: 12px; color: #b3b3b3; } .ax-aplayer .aplayer-info .aplayer-controller { position: relative; display: flex; } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { margin: 0 0 0 5px; padding-top: 8px; cursor: pointer !important; flex: 1; } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb { -webkit-transform: scale(1); transform: scale(1); } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { height: 4px; width: 100%; border-radius: 4px; background: #f0f0f0; position: relative; } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { height: 4px; background: #ccc; border-radius: 4px; transition: all 0.1s linear; position: absolute; left: 0; top: 0; bottom: 0; } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { height: 4px; border-radius: 4px; position: absolute; left: 0; top: 0; bottom: 0; } .ax-aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { height: 10px; width: 10px; border-radius: 50%; cursor: pointer; margin-top: -4px; margin-right: -10px; transition: all 0.1s linear; -webkit-transform: scale(0); transform: scale(0); position: absolute; top: 0; right: 5px; } .ax-aplayer .aplayer-time { color: #666666; font-size: 12px; height: 18px; padding-left: 8px; position: relative; } .ax-aplayer .aplayer-time .aplayer-time-inner { vertical-align: middle; } .ax-aplayer .aplayer-time .aplayer-icon { cursor: pointer; transition: all 0.1s linear; } .ax-aplayer .aplayer-time .aplayer-icon svg { fill: #666666; } .ax-aplayer .aplayer-time .aplayer-icon.aplayer-icon-loop { margin-right: 2px; } .ax-aplayer .aplayer-time .aplayer-icon:hover svg { fill: #198cff; } .ax-aplayer .aplayer-time .aplayer-icon.aplayer-icon-menu, .ax-aplayer .aplayer-time.aplayer-time-narrow .aplayer-icon-menu, .ax-aplayer .aplayer-time.aplayer-time-narrow .aplayer-icon-mode { display: none; } .ax-aplayer .aplayer-volume-wrap { display: inline-block; margin-left: 3px; cursor: pointer !important; position: relative; } .ax-aplayer .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { height: 40px; } .ax-aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap { width: 25px; height: 0; overflow: hidden; transition: all 0.2s ease-in-out; position: absolute; bottom: 15px; right: -3px; z-index: 99; } .ax-aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active { height: 40px; } .ax-aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar { width: 5px; height: 35px; background: #aaa; border-radius: 2.5px; overflow: hidden; position: absolute; bottom: 0; right: 10px; } .ax-aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume { width: 5px; transition: all 0.1s ease; position: absolute; bottom: 0; right: 0; } .ax-aplayer .aplayer-info .aplayer-loading-icon { display: none; } .ax-aplayer .aplayer-info .aplayer-loading-icon svg { position: absolute; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } .ax-aplayer .aplayer-lrc { height: 30px; text-align: center; overflow: hidden; margin: -10px 0 7px; display: none; position: relative; } .ax-aplayer .aplayer-lrc:before { top: 0; height: 10%; background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff", endColorstr="#00ffffff", GradientType=0); } .ax-aplayer .aplayer-lrc:after, .ax-aplayer .aplayer-lrc:before { content: ''; display: block; overflow: hidden; width: 100%; position: absolute; z-index: 1; } .ax-aplayer .aplayer-lrc:after { bottom: 0; height: 33%; background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.8)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0); } .ax-aplayer .aplayer-lrc p { font-size: 12px; color: #666; line-height: 16px !important; height: 16px !important; padding: 0 !important; margin: 0 !important; transition: all 0.5s ease-out; opacity: 0.4; overflow: hidden; } .ax-aplayer .aplayer-lrc p.aplayer-lrc-current { opacity: 1; overflow: visible; height: auto !important; min-height: 16px; } .ax-aplayer .aplayer-lrc.aplayer-lrc-hide { display: none; } .ax-aplayer .aplayer-lrc .aplayer-lrc-contents { width: 100%; transition: all 0.5s ease-out; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: default; } .ax-aplayer .aplayer-list { background-color: #fff; transition: all 0.5s ease; will-change: height; display: none; overflow: hidden; } .ax-aplayer .aplayer-list.aplayer-list-hide { max-height: 0 !important; } .ax-aplayer .aplayer-list ol { list-style-type: none; margin: 0; padding: 0; overflow-y: auto; } .ax-aplayer .aplayer-list ol::-webkit-scrollbar { width: 5px; } .ax-aplayer .aplayer-list ol::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #eee; } .ax-aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover { background-color: #ccc; } .ax-aplayer .aplayer-list ol::-webkit-scrollbar-corner { background-color: #eee; } .ax-aplayer .aplayer-list ol li { font-size: 14px; height: 38px; line-height: 38px; border-top: 1px solid #ebebeb; cursor: pointer; transition: all 0.1s linear; overflow: hidden; padding: 0 14px; margin: 0; justify-content: flex-start; align-items: center; position: relative; } .ax-aplayer .aplayer-list ol li:first-child { border-top: none; } .ax-aplayer .aplayer-list ol li:hover { background-color: #f5f5f5; } .ax-aplayer .aplayer-list ol li.aplayer-list-light { background-color: #f0f7ff; } .ax-aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-title { color: #198cff; } .ax-aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur { display: inline-block; } .ax-aplayer .aplayer-list ol li .aplayer-list-cur { display: none; width: 6px; height: 6px; border-radius: 100%; cursor: pointer; position: absolute; left: 5px; top: calc(50% - 2px); } .ax-aplayer .aplayer-list ol li .aplayer-list-index { color: #b3b3b3; margin-right: 14px; cursor: pointer; } .ax-aplayer .aplayer-list ol li .aplayer-list-author { color: #b3b3b3; float: right; cursor: pointer; } .ax-aplayer .aplayer-notice { font-size: 12px; color: #666666; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 4px; padding: 5px 10px; transition: all 0.1s linear; overflow: hidden; pointer-events: none; background-color: #f0f0f0; opacity: 0; position: absolute; top: 50%; left: 50%; } .ax-aplayer .aplayer-miniswitcher { display: none; height: 100%; width: 18px; background: #f0f0f0; border-radius: 0 3px 3px 0; position: absolute; top: 0; right: -18px; bottom: 0; } .ax-aplayer .aplayer-miniswitcher .aplayer-icon { height: 100%; width: 100%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); transition: all 0.1s linear; } .ax-aplayer .aplayer-miniswitcher .aplayer-icon svg { fill: #666666; } .ax-aplayer .aplayer-miniswitcher .aplayer-icon:hover svg { fill: #198cff; } @-webkit-keyframes aplayer-roll { 0% { left: 0; } to { left: -100%; } } @keyframes aplayer-roll { 0% { left: 0; } to { left: -100%; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } /*plugins swiper*/ /*common*/ .ax-btn-prev, .ax-btn-next { font-size: 18px; color: rgba(255, 255, 255, 0.5); width: 54px; height: 54px; line-height: 54px; text-align: center; margin-top: -27px; cursor: pointer; background-color: rgba(25, 140, 255, 0.8); transition: all 0.1s linear; position: absolute; top: 50%; z-index: 10; } .ax-btn-prev { left: 0px; } .ax-btn-next { right: 0; left: auto; } /*size*/ .ax-btn-prev.ax-sm, .ax-btn-next.ax-sm { font-size: 14px; width: 28px; height: 28px; line-height: 28px; margin-top: calc(-28px/2); } .ax-btn-next.ax-sm.ax-icon, .ax-btn-prev.ax-sm.ax-icon { font-size: 14px; } /*shape*/ .ax-btn-prev.ax-round, .ax-btn-next.ax-round { border-radius: 100%; } .ax-btn-prev.ax-round { left: 14px; } .ax-btn-next.ax-round { right: 14px; } .ax-btn-prev.ax-line { color: rgba(25, 140, 255, 0.8); height: 50px; width: 50px; line-height: 50px; border: 2px solid rgba(25, 140, 255, 0.8); background: transparent; } .ax-btn-next.ax-line { color: rgba(25, 140, 255, 0.8); height: 50px; width: 50px; line-height: 50px; border: 2px solid rgba(25, 140, 255, 0.8); background: transparent; } .ax-btn-prev.ax-icon { font-size: 28px; color: rgba(25, 140, 255, 0.8); background: transparent; left: 0; } .ax-btn-next.ax-icon { font-size: 28px; color: rgba(25, 140, 255, 0.8); background: transparent; right: 0; } /*disabled*/ .ax-btn-prev.swiper-button-disabled, .ax-btn-next.swiper-button-disabled { background-color: rgba(0, 0, 0, 0.5); opacity: 0.35; cursor: auto; pointer-events: none; } .ax-btn-prev.ax-square.ax-line.swiper-button-disabled, .ax-btn-next.ax-square.ax-line.swiper-button-disabled, .ax-btn-prev.ax-round.ax-line.swiper-button-disabled, .ax-btn-next.ax-round.ax-line.swiper-button-disabled { color: rgba(0, 0, 0, 0.4); border-color: rgba(0, 0, 0, 0.4); background: transparent; } .ax-btn-prev.ax-icon.swiper-button-disabled, .ax-btn-next.ax-icon.swiper-button-disabled { color: rgba(0, 0, 0, 0.4); background: transparent; } .ax-btn-prev.ax-light.swiper-button-disabled, .ax-btn-next.ax-light.swiper-button-disabled { background-color: rgba(255, 255, 255, 0.4); } .ax-btn-prev.ax-square.ax-line.ax-light.swiper-button-disabled, .ax-btn-next.ax-square.ax-line.ax-light.swiper-button-disabled, .ax-btn-prev.ax-round.ax-line.ax-light.swiper-button-disabled, .ax-btn-next.ax-round.ax-line.ax-light.swiper-button-disabled { color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.4); background: transparent; } .ax-btn-prev.ax-icon.ax-light.swiper-button-disabled, .ax-btn-next.ax-icon.ax-light.swiper-button-disabled { color: rgba(255, 255, 255, 0.4); background: transparent; } /*color*/ /*pagination*/ .ax-pagination-line { text-align: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; z-index: 10; } .ax-pagination-line .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 0.2; border: 2px solid #fff; background: transparent; transition: all 0.1s linear; } .ax-pagination-line .swiper-pagination-bullet-active { opacity: 1; border-color: #198cff; } .swiper-container-horizontal > .ax-pagination-line.swiper-pagination-bullets { bottom: 20px; } .ax-pagination-dot { text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); position: absolute; z-index: 10; } .swiper-container-horizontal > .ax-pagination-dot.swiper-pagination-bullets { bottom: 20px; } .ax-pagination-dot .swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; border-radius: 100%; background: #fff; opacity: 0.2; transition: all 0.1s linear; } .ax-pagination-dot .swiper-pagination-bullet-active { opacity: 1; background: #198cff; } /*outer*/ .ax-swiper-outer { position: relative; } .ax-swiper-outer .ax-btn-prev { left: -54px; } .ax-swiper-outer .ax-btn-next { right: -54px; left: auto; } .ax-swiper-outer .ax-btn-prev.ax-icon.ax-sm { left: -28px; } .ax-swiper-outer .ax-btn-next.ax-icon.ax-sm { right: -28px; } .ax-swiper-outer .ax-btn-prev.ax-round { left: -68px; } .ax-swiper-outer .ax-btn-next.ax-round { right: -68px; left: auto; } .ax-pagination-outer { position: inherit; } .ax-pagination-outer { width: 100%; position: inherit; padding: 14px 0; text-align: center; } .ax-pagination-outer div { position: inherit; } .ax-pagination-outer .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0 4px; box-sizing: border-box; } .ax-pagination-outer .ax-pagination-dot .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.4); } .ax-pagination-outer .ax-pagination-dot .swiper-pagination-bullet-active { background: #198cff; } .ax-pagination-outer .ax-pagination-line .swiper-pagination-bullet { border: 2px solid rgba(0, 0, 0, 0.4); } .ax-pagination-outer .ax-pagination-line .swiper-pagination-bullet-active { border-color: #198cff; } .ax-bullet-outer { display: flex; justify-content: center; align-items: center; padding: 0 14px; } .ax-bullet-outer .ax-pagination-dot, .ax-bullet-outer .ax-pagination-line { position: inherit; } .ax-bullet-outer .swiper-pagination-bullets { display: flex; justify-content: center; align-items: center; } .ax-bullet-outer .swiper-pagination-bullet { margin: 0 2px; width: 8px; height: 8px; box-sizing: border-box; transition: all 0.1s linear; } .ax-bullet-outer .ax-pagination-dot .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.4); } .ax-bullet-outer .ax-pagination-dot .swiper-pagination-bullet-active { background: #198cff; } .ax-bullet-outer .ax-pagination-line .swiper-pagination-bullet { border: 2px solid rgba(0, 0, 0, 0.4); } .ax-bullet-outer .ax-pagination-line .swiper-pagination-bullet-active { border-color: #198cff; } .ax-bullet-outer .ax-btn-prev, .ax-bullet-outer .ax-btn-next { width: 14px; position: inherit; margin-top: 0; } /*style light grey dark*/ .ax-btn-next.ax-light, .ax-btn-prev.ax-light { color: rgba(255, 255, 255, 0.8); } .ax-btn-next.ax-round.ax-light, .ax-btn-prev.ax-round.ax-light, .ax-btn-next.ax-square.ax-light, .ax-btn-prev.ax-square.ax-light { color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 255, 0.8); } .ax-btn-next.ax-line.ax-light, .ax-btn-prev.ax-line.ax-light { border-color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8); background: transparent; } .ax-btn-next.ax-grey, .ax-btn-prev.ax-grey { color: rgba(0, 0, 0, 0.4); } .ax-btn-next.ax-round.ax-grey, .ax-btn-prev.ax-round.ax-grey, .ax-btn-next.ax-square.ax-grey, .ax-btn-prev.ax-square.ax-grey { background-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.8); } .ax-btn-next.ax-line.ax-grey, .ax-btn-prev.ax-line.ax-grey { border-color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4); background: transparent; } .ax-btn-next.ax-dark, .ax-btn-prev.ax-dark { color: #198cff; } .ax-btn-next.ax-round.ax-dark, .ax-btn-prev.ax-round.ax-dark, .ax-btn-next.ax-square.ax-dark, .ax-btn-prev.ax-square.ax-dark { background-color: rgba(25, 140, 255, 0.8); color: #fff; } .ax-btn-next.ax-round.ax-line.ax-dark, .ax-btn-prev.ax-round.ax-line.ax-dark, .ax-btn-next.ax-square.ax-line.ax-dark, .ax-btn-prev.ax-square.ax-line.ax-dark { border-color: rgba(25, 140, 255, 0.8); color: rgba(25, 140, 255, 0.8); background: transparent; } .ax-btn-next.ax-icon.ax-dark, .ax-btn-prev.ax-icon.ax-dark { color: rgba(25, 140, 255, 0.8); } /*vertical*/ .ax-btn-prev.ax-vertical, .ax-btn-next.ax-vertical { left: 50%; margin-top: 0; margin-left: -27px; } .ax-btn-prev.ax-vertical { top: 0; } .ax-btn-next.ax-vertical { top: auto; right: auto; bottom: 0; } .ax-pagination-dot.ax-light .swiper-pagination-bullet { background: #fff; } .ax-pagination-line.ax-light .swiper-pagination-bullet { border-color: #fff; } .ax-pagination-outer .ax-pagination-dot.ax-light .swiper-pagination-bullet { background: #fff; } .ax-pagination-outer .ax-pagination-line.ax-light .swiper-pagination-bullet { border-color: #fff; } .ax-bullet-outer .ax-pagination-dot.ax-light .swiper-pagination-bullet { background: #fff; } .ax-bullet-outer .ax-pagination-line.ax-light .swiper-pagination-bullet { border-color: #fff; } .ax-pagination-dot.ax-grey .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.6); } .ax-pagination-line.ax-grey .swiper-pagination-bullet { border-color: rgba(0, 0, 0, 0.6); } .ax-pagination-outer .ax-pagination-dot.ax-grey .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.6); } .ax-pagination-outer .ax-pagination-line.ax-grey .swiper-pagination-bullet { border-color: rgba(0, 0, 0, 0.6); } .ax-bullet-outer .ax-pagination-dot.ax-grey .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.6); } .ax-bullet-outer .ax-pagination-line.ax-grey .swiper-pagination-bullet { border-color: rgba(0, 0, 0, 0.6); } .ax-pagination-dot.ax-dark .swiper-pagination-bullet { background: #fff; } .ax-pagination-line.ax-dark .swiper-pagination-bullet { border-color: #fff; } .ax-pagination-dot.ax-dark .swiper-pagination-bullet-active { background: #198cff; } .ax-pagination-line.ax-dark .swiper-pagination-bullet-active { border-color: #198cff; } .ax-pagination-outer .ax-pagination-dot.ax-dark .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.4); } .ax-pagination-outer .ax-pagination-line.ax-dark .swiper-pagination-bullet { border-color: rgba(0, 0, 0, 0.4); } .ax-pagination-outer .ax-pagination-dot.ax-dark .swiper-pagination-bullet-active { background: #198cff; } .ax-pagination-outer .ax-pagination-line.ax-dark .swiper-pagination-bullet-active { border-color: #198cff; } .ax-bullet-outer .ax-pagination-dot.ax-dark .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.6); } .ax-bullet-outer .ax-pagination-line.ax-dark .swiper-pagination-bullet { border-color: rgba(0, 0, 0, 0.6); } .ax-bullet-outer .ax-pagination-dot.ax-dark .swiper-pagination-bullet-active { background: #198cff; } .ax-bullet-outer .ax-pagination-line.ax-dark .swiper-pagination-bullet-active { border-color: #198cff; } /*plugins slider*/ .irs--ax { height: 38px; } .irs--ax:not(.irs-disabled):hover .irs-line { background-color: #d7e7f5; } .irs--ax.irs-with-grid { height: 38px; } .irs--ax .irs-line { height: 3px; background-color: #f0f0f0; transition: background-color 0.1s ease-out; border-radius: 3px; top: 18px; } .irs--ax .irs-bar { height: 3px; transition: background-color 0.1s ease-out; background-color: #198cff; top: 18px; } .irs--ax .irs-bar--single { border-radius: 3px 0 0 3px; } .irs--ax .irs-shadow { height: 2px; background-color: #dedede; bottom: auto; top: 24px; } .irs--ax .irs-handle { width: 16px; height: 16px; border: 2px solid #198cff; background-color: #fff; border-radius: 16px; box-shadow: none; transition: box-shadow 0.1s linear, background-color 0.1s linear, border-color 0.1s linear; cursor: pointer; top: 11px; } .irs--ax .irs-handle.state_hover, .irs--ax .irs-handle:hover { background-color: #fff; box-shadow: 0 0 0 3px rgba(25, 140, 255, 0.2); } .irs--ax .irs-min, .irs--ax .irs-max { color: #666666; font-size: 12px; line-height: 12px; padding: 3px 5px; background-color: #f0f0f0; border-radius: 3px; top: -13px; } .irs--ax .irs-from, .irs--ax .irs-to, .irs--ax .irs-single { font-size: 12px; color: #fff; line-height: 12px; text-shadow: none; padding: 3px 5px; background-color: #198cff; border-radius: 3px; top: -13px; } .irs--ax .irs-from:before, .irs--ax .irs-to:before, .irs--ax .irs-single:before { content: ""; display: block; width: 0; height: 0; margin-left: -3px; overflow: hidden; border: 3px solid transparent; border-top-color: #198cff; position: absolute; bottom: -6px; left: 50%; } .irs--ax .irs-grid { height: 22px; bottom: auto; top: 21px; } .irs--ax .irs-grid-pol { background-color: #dedede; } .irs--ax .irs-grid-text { color: #b3b3b3; font-size: 12px; } /*plugins infinite scroll*/ .ax-infinite-status { text-align: center; } .ax-infinite-status .infinite-scroll-last, .ax-infinite-status .infinite-scroll-error { color: #b3b3b3; } .ax-infinite-status > * { display: none; } /*plugins select2*/ .select-box { box-sizing: border-box; display: inline-block; margin: 0; vertical-align: middle; position: relative; } .select-box .selection, .select-box .dropdown-wrapper { display: block; } .select-box .select-single { display: block; height: 28px; box-sizing: border-box; cursor: pointer; user-select: none; -webkit-user-select: none; } .select-box .select-single .select-rendered { display: block; padding-left: 8px; padding-right: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-box .select-text-clear { color: #ccc; transition: all 0.1s linear; } .select-box .select-text-clear:hover { color: #666666; } .select-box .select-single .select-text-clear { position: relative; } .select-box[dir="rtl"] .select-single .select-rendered { padding-right: 8px; padding-left: 20px; } .select-box .select-multiple { display: block; box-sizing: border-box; cursor: pointer; min-height: 32px; user-select: none; -webkit-user-select: none; } .select-box .select-multiple .select-rendered { display: inline-block; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .select-box .select2-search-inline { float: left; } .select-box .select2-search-inline .select2-search-field { font-size: 100%; margin-top: 4px; padding: 0; box-sizing: border-box; border: none; } .select-box .select2-search-inline .select2-search-field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { display: block; width: 100%; background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; position: absolute; left: -100000px; z-index: 1051; } .select2-results { display: block; } .select2-results-options { list-style: none; margin: 0; padding: 0; } .select2-results-option { padding: 6px; user-select: none; -webkit-user-select: none; } .select2-results-option[aria-selected] { cursor: pointer; } .select-box-open .select2-dropdown { left: 0; } .select2-search-dropdown { display: block; padding: 4px; } .select2-search-dropdown .select2-search-field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search-dropdown .select2-search-field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search-dropdown.select2-search-hide { display: none; } .select2-close-mask { display: block; height: auto; width: auto; min-height: 100%; min-width: 100%; background-color: #fff; opacity: 0; border: 0; margin: 0; padding: 0; position: fixed; left: 0; top: 0; z-index: 99; } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; } .select-box-ax .select2-dropdown { border-color: #198cff; border-radius: 0 0 3px 3px; } .select-box-ax .select2-dropdown-above { border-bottom: none; border-radius: 3px 3px 0 0; } .select-box-ax .select2-dropdown-below { border-top: none; border-radius: 0 0 3px 3px; } .select-box-ax .select-single { background-color: #fff; border-width: 1px; border-style: solid; border-color: #e0e0e0; border-radius: 3px; height: 38px; line-height: 38px; } .select-box-ax .select-single .select-rendered { color: #333333; line-height: calc(38px - 2px); padding-left: 10px; } .select-box-ax.select-box-open .select-single .select-rendered { color: #198cff; } .select-box-ax .select-single .select-text-clear { font-weight: bold; width: 14px; text-align: center; cursor: pointer; float: right; } .select-box-ax .select-single .select-text-placeholder { color: #999; } .select-box-ax .select-single .select-arrow { height: calc(38px - 2px); width: calc(38px - 12px); cursor: pointer; text-align: center; transition: all 0.2s linear; position: absolute; right: 0; top: 1px; z-index: 2; } .select-box-ax .select-single .select-arrow b { height: 0; width: 0; margin: auto 0; border-color: #ccc transparent transparent transparent; border-style: solid; border-width: 4px 4px 0 4px; transition: all 0.2s linear; position: absolute; top: 0; bottom: 0; right: 9px; } .select-box-ax[dir="rtl"] .select-single .select-text-clear { float: left; } .select-box-ax[dir="rtl"] .select-single .select-arrow { left: 1px; right: auto; } .select-box-ax.select-box-disabled .select-single { background-color: #f0f0f0; cursor: default; } .select-box-ax.select-box-disabled .select-single .select-text-clear { display: none; } .select-box-ax.select-box-open .select-single .select-arrow b { border-color: #198cff transparent transparent transparent; border-width: 4px 4px 0 4px; transform: rotate(180deg); } .select-box-ax.select-box-open .select-single { border-color: #198cff; } .select-box-ax .select-multiple { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 3px; cursor: text; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; zoom: 1; } .select-box-ax.select-box-open .select-multiple, .select-box-ax.select-box-open.select-box-focus .select-multiple { border-color: #198cff; } .select-box-ax .select-multiple .select-rendered { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0 0 4px 0; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .select-box-ax .select-multiple .select-rendered li { list-style: none; } .select-box-ax .select-multiple .select-text-clear { width: 26px; height: 28px; line-height: 28px; text-align: center; margin-top: 4px; margin-right: 0; padding: 0; cursor: pointer; float: right; } .select-box-ax .select-multiple .select-text-choice { font-size: 12px; line-height: 26px; height: 26px; background-color: #f0f0f0; border: 1px solid #e0e0e0; margin-left: 4px; margin-right: 0; margin-top: 4px; padding: 0 4px; cursor: default; float: left; } .select-box-ax .select-multiple .select-text-choice-remove { display: inline-block; font-weight: bold; color: #ccc; margin-right: 2px; cursor: pointer; transition: all 0.1s linear; } .select-box-ax .select-multiple .select-text-choice-remove:hover { color: #333333; } .select-box-ax[dir="rtl"] .select-multiple .select-text-choice, .select-box-ax[dir="rtl"] .select-multiple .select2-search-inline { float: right; } .select-box-ax[dir="rtl"] .select-multiple .select-text-choice { margin-left: 5px; margin-right: auto; } .select-box-ax[dir="rtl"] .select-multiple .select-text-choice-remove { margin-left: 2px; margin-right: auto; } .select-box-ax.select-box-focus .select-multiple { border: 1px solid #e0e0e0; border-radius: 3px; outline: 0; } .select-box-ax.select-box-disabled .select-multiple { background-color: #eee; cursor: default; } .select-box-ax.select-box-disabled .select-text-choice-remove { display: none; } .select-box-ax.select-box-open.select-box-above .select-single, .select-box-ax.select-box-open.select-box-above .select-multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select-box-ax.select-box-open.select-box-below .select-single, .select-box-ax.select-box-open.select-box-below .select-multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select-box-ax .select2-search-dropdown { padding: 10px; border-bottom: 1px solid #ebebeb; } .select-box-ax .select2-search-dropdown .select2-search-field { border: 1px solid #e0e0e0; padding: 0 10px; } .select-box-ax .select2-search-inline .select2-search-field { height: 28px; line-height: 28px; margin-left: 0; padding: 0 10px; background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; } .select-box-ax .select2-results > .select2-results-options { max-height: calc((38px + 1px)*8 - 1px); overflow-y: auto; } .select-box-ax .select2-results-option { padding: 0 10px; margin: 0; line-height: 38px; cursor: pointer; border-bottom: 1px #ebebeb solid; transition: all 0.1s linear; position: relative; } .select-box-ax .select2-results-option:last-child { border-bottom: none; } .select-box-ax .select2-results-option[role="option"]:not([aria-disabled="true"]):hover { color: #198cff; background-color: #f0f7ff; } .select-box-ax .select2-results-option[aria-selected="true"] { color: #198cff; background-color: #f0f7ff; } .select-box-ax .select2-results-option[aria-selected="true"]:after { content: '\e616'; font-family: "ax-iconfont" !important; color: #198cff; font-size: 14px; width: calc(38px - 10px); height: 38px; line-height: 38px; text-align: center; position: absolute; right: 0; top: 0; } .select-box-ax .select2-results-option-highlighted.select2-results-option[aria-selected="true"]:after { color: #fff; } .select-box-ax .select2-results-option[role=group] { padding: 0; } .select-box-ax .select2-results-option[aria-disabled=true] { color: #b3b3b3; } .select-box-ax .select2-results-option[aria-selected=true] { background-color: #f0f7ff; } .select-box-ax .select2-results-option .select2-results-option { padding-left: 10px; } .select-box-ax .select2-results-option .select2-results-option .select2-results-group { padding-left: 0; } .select-box-ax .select2-results-option .select2-results-option .select2-results-option { margin-left: -1em; padding-left: 2em; } .select-box-ax .select2-results-option .select2-results-option .select2-results-option .select2-results-option { margin-left: -2em; padding-left: 3em; } .select-box-ax .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option { margin-left: -3em; padding-left: 4em; } .select-box-ax .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option { margin-left: -4em; padding-left: 5em; } .select-box-ax .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option .select2-results-option { margin-left: -5em; padding-left: 6em; } .select-box-ax .select2-results-option-highlighted[role="option"][aria-selected]:not([aria-disabled="true"]) { background-color: #198cff; color: #fff; } .select-box-ax .select2-results-group { display: block; cursor: default; padding: 0 10px; border-bottom: 1px solid #ebebeb; background-color: #f0f0f0; } .select-box-ax .select2-results-option.select2-results-message { color: #b3b3b3; cursor: default; } .ax-select.ax-xs + .select-box-ax .select-single { height: 22px; line-height: 22px; } .ax-select.ax-xs + .select-box-ax .select-single .select-rendered { font-size: 12px; line-height: 20px; padding-left: 4px; } .ax-select.ax-xs + .select-box-ax .select-single .select-arrow { height: 20px; } .ax-select.ax-xs + .select-box .select-multiple { min-height: 0; line-height: 16px; } .ax-select.ax-xs + .select-box-ax .select-multiple .select-rendered { padding: 0 0 2px 0; } .ax-select.ax-xs + .select-box-ax .select-multiple .select-text-choice { line-height: 14px; height: 14px; margin-left: 2px; margin-top: 2px; } .ax-select.ax-xs + .select-box-ax .select-multiple .select-text-clear { width: 16px; height: 16px; line-height: 16px; margin-top: 2px; } .ax-select.ax-xs + .select-box-ax .select2-search-inline .select2-search-field { height: 16px; line-height: 16px; margin-top: 2px; } .select-box-ax .ax-xs .select2-results-option { font-size: 12px; line-height: 22px; padding: 0 4px; } .select-box-ax .ax-xs .select2-search-dropdown { padding: 4px; } .select-box-ax .ax-xs .select2-search-dropdown .select2-search-field { font-size: 12px; line-height: 22px; padding: 0 4px; height: 22px; } .select-box-ax .ax-xs .select-multiple .select-text-choice { line-height: 14px; height: 12px; margin-left: 2px; margin-top: 2px; } .select-box-ax .ax-xs .select2-results-option[aria-selected="true"]:after { width: 22px; height: 22px; line-height: 22px; } .select-box-ax .ax-sm .select-multiple .select-text-clear { height: 12px; line-height: 12px; margin-top: 2px; } .select-box-ax .ax-sm .select2-results-option { font-size: 14px; } .ax-select.ax-sm + .select-box-ax .select-single { height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-select.ax-sm + .select-box-ax .select-single .select-rendered { padding-left: 6px; line-height: calc(38px - 12px); } .ax-select.ax-sm + .select-box-ax .select-single .select-arrow { height: calc(38px - 12px); } .ax-select.ax-sm + .select-box .select-multiple { min-height: 0; line-height: 22px; } .ax-select.ax-sm + .select-box-ax .select-multiple .select-rendered { padding: 0 0 2px 0; } .ax-select.ax-sm + .select-box-ax .select-multiple .select-text-choice { line-height: 20px; height: 20px; margin-left: 2px; margin-top: 2px; } .ax-select.ax-sm + .select-box-ax .select-multiple .select-text-clear { width: 22px; height: 22px; line-height: 22px; margin-top: 2px; } .ax-select.ax-sm + .select-box-ax .select2-search-inline .select2-search-field { font-size: 14px; height: 22px; line-height: 22px; margin-top: 2px; } .select-box-ax .ax-sm .select2-results-option { line-height: calc(38px - 10px); padding: 0 6px; } .select-box-ax .ax-sm .select2-search-dropdown { padding: 6px; } .select-box-ax .ax-sm .select2-search-dropdown .select2-search-field { padding: 0 6px; height: calc(38px - 10px); line-height: calc(38px - 10px); } .select-box-ax .ax-sm .select-multiple .select-text-choice { line-height: 16px; height: 16px; } .select-box-ax .ax-sm .select-multiple .select-text-clear { height: 18px; line-height: 18px; } .select-box-ax .ax-sm .select2-results-option[aria-selected="true"]:after { width: calc(38px - 10px); height: calc(38px - 10px); line-height: calc(38px - 10px); } .ax-select.ax-lg + .select-box-ax .select-single { height: calc(38px + 10px); line-height: calc(38px + 10px); } .ax-select.ax-lg + .select-box-ax .select-single .select-rendered { padding-left: 14px; line-height: calc(38px + 8px); } .ax-select.ax-lg + .select-box-ax .select-single .select-arrow { height: calc(38px + 8px); } .ax-select.ax-lg + .select-box .select-multiple { min-height: 0; line-height: 38px; } .ax-select.ax-lg + .select-box-ax .select-multiple .select-rendered { padding: 0 0 4px 0; } .ax-select.ax-lg + .select-box-ax .select-multiple .select-text-choice { line-height: 36px; height: 36px; margin-left: 4px; margin-top: 4px; } .ax-select.ax-lg + .select-box-ax .select-multiple .select-text-clear { width: 38px; height: 38px; line-height: 38px; margin-top: 4px; } .ax-select.ax-lg + .select-box-ax .select2-search-inline .select2-search-field { height: 38px; line-height: 38px; margin-top: 4px; } .select-box-ax .ax-lg .select2-results-option { line-height: calc(38px + 10px); padding: 0 14px; } .select-box-ax .ax-lg .select2-search-dropdown { padding: 14px; } .select-box-ax .ax-lg .select2-search-dropdown .select2-search-field { padding: 0 14px; height: calc(38px + 10px); line-height: calc(38px + 10px); } .select-box-ax .ax-lg .select-multiple .select-text-choice { line-height: 36px; height: 36px; padding: 0 8px; } .select-box-ax .ax-lg .select-multiple .select-text-clear { height: 38px; line-height: 38px; } .select-box-ax .ax-lg .select2-results-option[aria-selected="true"]:after { width: calc(38px + 10px); height: calc(38px + 10px); line-height: calc(38px + 10px); } /*plugins dropzone*/ .ax-dropzone-outer { border: 2px dashed #ebebeb; border-radius: 3px; background-color: #fff; box-sizing: border-box; padding: 14px; } .ax-dropzone { cursor: pointer; } .ax-dropzone .ax-preview { position: relative; } .ax-dropzone .ax-ready { text-align: center; padding: 22px 0; } .ax-dropzone .ax-ready .ax-icon [class*="font"] { color: #b3b3b3; font-size: 44px; line-height: 64px; } .ax-dropzone .ax-ready .ax-text { color: #b3b3b3; } .ax-dropzone .ax-image { width: 100%; height: 160px; overflow: hidden; border-radius: 3px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .ax-dropzone .ax-image:before { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-radius: 3px; border-color: rgba(0, 0, 0, 0.12); z-index: 2; } .ax-dropzone .ax-image img { width: 100%; border-radius: 3px; } .ax-dropzone .ax-item { position: relative; } .ax-dropzone .ax-operate { text-align: right; position: absolute; right: 8px; top: 8px; z-index: 4; } .ax-dropzone .ax-operate a { color: #fff; text-align: center; width: 24px; height: 24px; line-height: 24px; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); border-radius: 100%; margin-left: 8px; transition: all 0.1s linear; } .ax-dropzone .ax-operate a [class*="font"] { font-size: 12px; } .ax-dropzone .ax-operate a svg { width: 12px; height: 24px; } .ax-dropzone .ax-operate a:hover { transform: scale(1.2); } .ax-dropzone .ax-progress { width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; transition: all 0.2s linear; position: absolute; right: 0; top: 0; } .ax-dropzone .ax-percent { color: rgba(255, 255, 255, 0.8); text-align: center; line-height: 160px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear; position: absolute; right: 0; top: 0; } .ax-dropzone .ax-percent i { font-size: 22px; } .ax-dropzone .ax-details { font-size: 12px; line-height: 18px; } .ax-dropzone .ax-size, .ax-dropzone .ax-filename { white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .ax-dropzone .ax-success-mark { color: #198cff; width: 100%; height: 100%; opacity: 0; transition-property: all; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; } .ax-dropzone .ax-success-mark [class*="font"] { font-size: 28px; } .ax-dropzone .ax-error-mark { color: #dc3545; width: 100%; height: 100%; opacity: 0; transition-property: all; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; } .ax-dropzone .ax-error-mark [class*="font"] { font-size: 28px; } .ax-dropzone .ax-error-message { color: #fff; font-size: 12px; text-align: center; text-overflow: ellipsis; width: 100%; max-height: calc(28px * 2); max-width: 100%; line-height: 28px; overflow: hidden; background-color: #dc3545; border-radius: 0 0 3px 3px; transition: all 0.2s linear; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: absolute; left: 0; bottom: calc(-28px*2); } .ax-dropzone.ax-started .ax-ready .ax-icon { display: none; } .ax-dropzone.ax-started .ax-ready { padding: 0; } .ax-dropzone.ax-started .ax-ready .ax-text { margin-bottom: 8px; } .ax-dropzone .ax-success .ax-success-mark { animation-duration: 1s; animation-fill-mode: both; animation-name: bounceIn; } .ax-dropzone .ax-error .ax-error-mark { animation-duration: 1s; animation-fill-mode: both; animation-name: bounceIn; } .ax-dropzone .ax-error:hover .ax-error-message { bottom: 0; } .ax-dropzone .ax-final .ax-percent { opacity: 0; } /*plugins sweetalert2*/ .ax-dialog .swal2-title { margin: 14px 0 8px 0; } .ax-dialog.swal2-container { padding: 14px; } body.swal2-no-backdrop .ax-dialog.swal2-container { max-width: calc(100% - 14px * 2); } .ax-dialog.swal2-container.swal2-backdrop-show { background-color: rgba(0, 0, 0, 0.4); } .ax-dialog .swal2-popup { font-size: 14px; width: 600px; border-radius: 3px; padding: 0; } .ax-dialog .swal2-popup[class*="swal2-icon-"] .swal2-main { padding: calc(14px*3) 14px 14px 14px; } .ax-dialog .swal2-popup.swal2-toast .swal2-main { padding: 14px; } .ax-dialog .swal2-popup[class*="swal2-icon-"] .swal2-operate[data-style="center"] { padding-bottom: calc(14px*3); } .ax-dialog .swal2-popup[class*="swal2-icon-"] .swal2-operate:not([data-style="line"]):not([data-style="center"]) .swal2-alt:empty + .swal2-actions { padding-bottom: calc(14px*3); text-align: center; } body.swal2-no-backdrop .ax-dialog.swal2-container > .swal2-modal { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ebebeb; } body.swal2-no-backdrop .swal2-popup.swal2-toast { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ebebeb; } .ax-dialog .swal2-timer-progress-bar-container { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .ax-dialog .swal2-window { text-align: left; line-height: 38px; background-color: #fff; border-radius: 3px 3px 0 0; padding-left: 14px; box-sizing: border-box; position: relative; } .ax-dialog .swal2-title { font-size: 18px; line-height: 38px; } .ax-dialog .swal2-close { font-family: arial; font-size: 22px; color: rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); text-decoration: none; line-height: 38px; text-align: center; width: 38px; height: 38px; } .ax-dialog .swal2-close:after { content: "\00D7"; width: 38px; height: 38px; } .ax-dialog .swal2-close:hover, .ax-dialog .swal2-close:focus { color: #dc3545; outline: none; } .ax-dialog.swal2-container[data-close="out"] { padding: 38px; } .ax-dialog.swal2-container[data-close="out"] .swal2-close { right: calc(-38px); } .ax-dialog.swal2-container[data-close="center"] { padding: calc(38px*2); } .ax-dialog.swal2-container[data-close="center"] .swal2-close { margin-right: calc(-38px/2); border-radius: 38px; background-color: #fff; top: auto; bottom: calc(-38px*2); right: 50%; } .ax-dialog.swal2-container.swal2-backdrop-show[data-close="out"] .swal2-close { color: #fff; } body.swal2-no-backdrop .ax-dialog.swal2-container[data-close="out"] .swal2-close { color: rgba(0, 0, 0, 0.3); } body.swal2-no-backdrop .swal2-container[data-close="center"] .swal2-close { border: 1px solid #ebebeb; bottom: calc(-38px*2); } .ax-dialog .swal2-image { margin: 0; padding: 14px; box-sizing: border-box; } .ax-dialog .swal2-video, .ax-dialog .swal2-audio { padding: 14px; box-sizing: border-box; max-width: 100%; margin-bottom: 0; } .ax-dialog .swal2-html-container video, .ax-dialog .swal2-html-container audio { width: 100%; padding: 0; } .ax-dialog .swal2-content { color: #666666; font-size: 14px; max-height: 600px; overflow-y: auto; } .ax-dialog .swal2-actions [class*="swal2-"] { margin: 0 calc(8px/2); } .ax-dialog .ax-type-tips { text-align: center; padding: calc(14px*3) 14px; } .ax-dialog .ax-type-tips .swal2-operate { margin-top: calc(14px*2); } .ax-dialog .ax-type-tips .swal2-actions [class*="swal2-"] { margin: 0 calc(8px/2); } .ax-dialog .swal2-icon { width: 90px; height: 90px; margin: 0; border: 0; background-repeat: no-repeat; background-position: center; background-size: 54px; display: flex; justify-content: center; align-items: center; } .ax-dialog .swal2-icon.swal2-error.swal2-icon-show { animation: none; } .ax-dialog .swal2-actions { margin: auto; text-align: center; } .ax-dialog .swal2-operate { padding: 14px; } .ax-dialog .swal2-operate[data-style="center"] { padding: 14px; } .ax-dialog .swal2-operate[data-style="right"] { padding: 14px; } .ax-dialog .swal2-operate[data-style="right"] .swal2-actions { text-align: right; } .ax-dialog .swal2-operate[data-style="right"] a[class*="swal2-"] { margin-left: 14px; margin-right: 0; } .ax-dialog .swal2-operate[data-style="line"] { padding: 0; } .ax-dialog .swal2-operate[data-style="line"] .swal2-actions { line-height: 44px; text-align: center; border-radius: 0 0 3px 3px; border-top: 1px solid #ebebeb; box-sizing: border-box; height: 44px; width: 100%; overflow-y: hidden; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; flex-wrap: nowrap; zoom: 1; } .ax-dialog .swal2-operate[data-style="line"] .swal2-actions [class*="swal2-"] { margin: 0; } .ax-dialog .swal2-operate[data-style="line"] .swal2-actions [class*="swal2-"]:hover { background-color: #fff; } .ax-dialog .swal2-operate[data-style="line"] .swal2-actions [class*="swal2-"][style*="none"] + .ax-gutter-line { display: none; } .ax-dialog .swal2-footer { color: #333333; font-size: 12px; line-height: 18px; border-top: 1px solid #ebebeb; padding: 14px 14px; margin: 0; } .ax-dialog .swal2-alt { display: block; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-dialog .swal2-alt + .swal2-actions { display: block; width: auto; } .ax-dialog .swal2-alt:empty + .swal2-actions { width: 100%; } .ax-dialog .swal2-alt:not(:empty) + .swal2-actions a { margin: 0 0 0 8px; } .ax-dialog .swal2-alt .ax-text { font-size: 12px; line-height: 18px; height: 38px; display: flex; justify-content: flex-start; align-items: center; } .ax-dialog .ax-article { font-size: 14px; color: #333333; line-height: 28px; } .ax-dialog .swal2-validation-message { color: #666666; font-size: auto; font-weight: normal; line-height: 18px; padding: 10px; } .ax-dialog .swal2-validation-message::before { background-color: #ffc107; width: 18px; min-width: 18px; height: 18px; line-height: 18px; margin: 10px; } .ax-dialog .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::before { content: ''; width: 14px; height: 14px; margin-right: 4px; background-repeat: no-repeat; background-position: center; background-size: 14px auto; background-image: url(../images/loading-white.svg); } .ax-dialog .swal2-popup.swal2-toast .swal2-title { font-size: 18px; margin: 0 14px; } .ax-dialog .swal2-popup.swal2-toast .swal2-operate { display: none; } .ax-dialog .swal2-timer-progress-bar { height: 4px; } .ax-fancy-nav a { display: inline-block; font-weight: normal; font-size: 20px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-decoration: none; border-radius: 50%; width: 22px; height: 22px; line-height: 17px; text-align: center; -moz-user-select: none; user-select: none; cursor: pointer; outline: none; transition: all 0.2s linear; } .ax-fancy-nav a:hover { color: #fff; text-decoration: none; background-color: #198cff; } .ax-info-tip .fancybox-content { padding: 0; width: 800px; border-radius: 3px; } .ax-info-tip .fancybox-bg { background-color: #000; } .ax-info-tip.fancybox-is-open .fancybox-bg { opacity: 0.2; } div.fancybox-thumbs__list a:before { border: 4px solid #198cff; } div.fancybox-slide.watermark .fancybox-spaceball { background-image: url('../images/crpic.png'); background-size: cover; background-repeat: no-repeat; } div.btmthumbs .fancybox-thumbs { height: 95px; width: auto; padding: 10px 10px 5px 10px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); top: auto; bottom: 0; left: 0; right: 0; } div.btmthumbs.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 95px; } div.btmthumbs .fancybox-caption { text-align: center; } div.btmthumbs .fancybox-thumbs > ul { margin: 0 auto; } div.fancybox-thumbs-x .fancybox-thumbs__list { margin: auto; } /*plugins qtip2*/ div.qtip { font-size: 14px; line-height: 28px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); max-width: 600px; border-radius: 3px; position: absolute; } div.qtip-default { color: #333333; border: 1px solid #ebebeb; background-color: #fff; } div.qtip-modal { border: none; } div.qtip-titlebar { font-size: 14px; font-weight: bold; line-height: 38px; padding: 0 14px; margin: 0; background-color: #fff; border-bottom: 1px solid #ebebeb; position: relative; } div.qtip-default .qtip-titlebar .qtip-close { font-family: arial; font-size: 22px; color: #ccc; line-height: 38px; width: 38px; text-align: center; text-shadow: 0 1px 0 #fff; text-decoration: none; background: transparent; border: none; position: absolute; right: 0; top: 0; } a.qtip-icon .ui-icon { font: 22px/38px Arial; font-family: arial; width: 38px; height: 38px; line-height: 38px; background: transparent; } div.qtip-default .qtip-titlebar { background: transparent; } div.qtip-titlebar .qtip-close { margin-top: 0; right: 0; top: 0; } div.qtip-content { padding: 5px 14px; } div.qtip-pos-tl, div.qtip-pos-lt { border-top-left-radius: 0; } div.qtip-pos-tr, div.qtip-pos-rt { border-top-right-radius: 0; } div.qtip-pos-bl, div.qtip-pos-lb { border-bottom-left-radius: 0; } div.qtip-pos-br, div.qtip-pos-rb { border-bottom-right-radius: 0; } div#qtip-overlay div { opacity: 1; background-color: rgba(0, 0, 0, 0.4); } .qtip-modal { transform: translate(-50%, -50%); border-radius: 3px !important; position: fixed!important; left: 50%!important; top: 50%!important; } .qtip-modal .qtip-tip { display: none!important; } /*plugins infoBox*/ .ax-infoBox .ax-panel { position: relative; } .ax-infoBox .ax-panel:before, .ax-infoBox .ax-tab:before { content: ''; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: #fff transparent transparent transparent; position: absolute; bottom: -16px; left: calc(50% - 8px); } .ax-infoBox .ax-tab .ax-grid { margin: 0 auto; } .ax-infoBox .ax-menu-tab .ax-item { padding-top: 5px; padding-bottom: 5px; } .ax-infoBox .ax-close { font-family: arial; font-size: 22px; color: #ccc; line-height: 38px; width: 38px; text-align: center; text-shadow: 0 1px 0 #fff; text-decoration: none; cursor: pointer; position: absolute; right: 0; top: 0; z-index: 2; } /*plugins ztree*/ .ax-tree { margin: 0; padding: 0; font-size: 14px; line-height: 28px; } .ax-tree li { white-space: nowrap; outline: 0; } .ax-tree li ul { padding-left: 22px; } .ax-tree li .ax-badge, .ax-tree li .ax-dot { vertical-align: middle; position: relative; top: -2px; } .ax-tree li a { color: #333333; white-space: nowrap; cursor: pointer; position: relative; } .ax-tree li a:hover { color: #333333; text-decoration: none; } .ax-tree li a.ax-color-primary { color: #198cff; } .ax-tree li a.ax-color-ignore { color: #b3b3b3; } .ax-tree li a:not(.curSelectedNode):hover .node_name { color: #198cff; text-decoration: underline; transition: all 0.2s linear; } .ax-tree li a .node_name { padding: 0 4px; margin-right: 4px; position: relative; } .ax-tree li a.curSelectedNode .node_name { color: #fff; border-radius: 3px; background: #198cff; } .ax-tree li a.curSelectedNode_Edit .node_name { background: transparent; padding: 0; } .ax-tree li a input[type*='text'] { width: 92px; height: 28px; line-height: 28px; padding: 0 4px; } .ax-tree li select { width: 92px; height: 28px; line-height: 28px; padding: 0 0 0 4px; } .ax-tree li span { background-color: transparent; } .ax-tree li span.button { vertical-align: top; border-radius: 3px; color: #666666; width: 22px; text-align: center; cursor: pointer; } .ax-tree li span.button:not([class*='bottom_docu']):not([class*='center_docu']) { transition: all 0.2s linear; } .ax-tree li span.button:before { display: inline-block; transition: all 0.2s linear; } .ax-tree li span.button:hover { color: #198cff; } .ax-tree li span.button.switch { width: 22px; height: 28px; line-height: 28px; } .ax-tree li span.button.noline_open, .ax-tree li span.button.noline_open:hover, .ax-tree li span.button.roots_open, .ax-tree li span.button.center_open, .ax-tree li span.button.bottom_open, .ax-tree li span.button.roots_open:hover, .ax-tree li span.button.center_open:hover, .ax-tree li span.button.bottom_open:hover, .ax-tree li span.button.checkbox_true_full, .ax-tree li span.button.checkbox_true_full:hover, .ax-tree li span.button.checkbox_true_full_focus, .ax-tree li span.button.radio_true_full, .ax-tree li span.button.radio_true_full:hover, .ax-tree li span.button.radio_true_full_focus { color: #198cff; } .ax-tree li span.button.checkbox_true_part, .ax-tree li span.button.checkbox_true_part:hover, .ax-tree li span.button.checkbox_true_part_focus, .ax-tree li span.button.radio_true_part, .ax-tree li span.button.radio_true_part:hover, .ax-tree li span.button.radio_true_part_focus, .ax-tree li span.button.radio_false_part, .ax-tree li span.button.radio_false_part:hover { color: #198cff; opacity: 0.5; } .ax-tree li span.button.checkbox_true_disable, .ax-tree li span.button.checkbox_true_disable:hover, .ax-tree li span.button.checkbox_false_disable, .ax-tree li span.button.checkbox_false_disable:hover, .ax-tree li span.button.radio_true_disable, .ax-tree li span.button.radio_true_disable:hover, .ax-tree li span.button.radio_false_disable, .ax-tree li span.button.radio_false_disable:hover { color: #ccc; } .ax-tree li .node_name ~ span.button { color: #666666; font-size: 14px; width: 22px; text-align: center; } .ax-tree li .node_name ~ span.button:hover { color: #198cff; } .ax-tree li span.button:before { font-size: 14px; font-family: ax-iconfont; } .ax-tree li span.button.chk.checkbox_false_full:before { content: "\e705"; } .ax-tree li span.button.chk.checkbox_false_full_focus:before { content: "\e705"; } .ax-tree li span.button.chk.checkbox_false_part:before { content: "\e705"; } .ax-tree li span.button.chk.checkbox_false_part_focus:before { content: "\e705"; } .ax-tree li span.button.chk.checkbox_false_disable:before { content: "\e705"; } .ax-tree li span.button.chk.checkbox_true_full:before { content: "\e704"; } .ax-tree li span.button.chk.checkbox_true_full_focus:before { content: "\e704"; } .ax-tree li span.button.chk.checkbox_true_part:before { content: "\e617"; } .ax-tree li span.button.chk.checkbox_true_part_focus:before { content: "\e617"; } .ax-tree li span.button.chk.checkbox_true_full_focus:before { content: "\e704"; } .ax-tree li span.button.chk.checkbox_true_part:before { content: "\e617"; } .ax-tree li span.button.chk.checkbox_true_part_focus:before { content: "\e617"; } .ax-tree li span.button.chk.checkbox_true_disable:before { content: "\e704"; } .ax-tree li span.button.chk.radio_false_full:before { content: "\e61c"; } .ax-tree li span.button.chk.radio_false_full_focus:before { content: "\e61c"; } .ax-tree li span.button.chk.radio_false_part:before { content: "\e6b2"; } .ax-tree li span.button.chk.radio_false_part_focus:before { content: "\e6b2"; } .ax-tree li span.button.chk.radio_false_disable:before { content: "\e61c"; } .ax-tree li span.button.chk.radio_true_full:before { content: "\e6b3"; } .ax-tree li span.button.chk.radio_true_full_focus:before { content: "\e6b3"; } .ax-tree li span.button.chk.radio_true_part:before { content: "\e6b2"; } .ax-tree li span.button.chk.radio_true_part_focus:before { content: "\e6b2"; } .ax-tree li span.button.chk.radio_true_disable:before { content: "\e6b3"; } .ax-tree li span.button.root_open:before { transform: rotate(90deg); content: "\e60f"; } .ax-tree li span.button.root_close:before { content: "\e60f"; } .ax-tree li span.button.roots_open:before, .ax-tree li span.button.noline_open:before { transform: rotate(90deg); content: "\e60f"; } .ax-tree li span.button.roots_close:before, .ax-tree li span.button.noline_close:before { content: "\e60f"; } .ax-tree li span.button.center_open:before { transform: rotate(90deg); content: "\e60f"; } .ax-tree li span.button.center_close:before { content: "\e60f"; } .ax-tree li span.button.bottom_open:before { transform: rotate(90deg); content: "\e60f"; } .ax-tree li span.button.bottom_close:before { content: "\e60f"; } .ax-tree li span.button.root_docu { background: none; } .ax-tree li span.button.roots_docu:before { content: "\f022"; } .ax-tree li span.button.noline_docu { background: none; } .ax-tree li span.button.ico_open:before { content: "\e778"; } .ax-tree li span.button.ico_close:before { content: "\e64f"; } .ax-tree li span.button.ico_docu:before { content: "\e647"; } .ax-tree li span.button.edit:before { content: "\e682"; } .ax-tree li span.button.remove:before { content: "\e68d"; } .ax-tree li span.button.add:before { content: "\e627"; } .ax-tree li span.button.ico_loading { background-image: url(../images/loading.svg); background-repeat: no-repeat; background-position: center; background-size: 14px; } .ax-tree-menu { display: none; text-align: left; background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; min-width: 100px; padding: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; z-index: 9999; } .ax-tree-menu a { display: block; line-height: 28px; padding: 0 8px; transition: all 0.1s linear; border-bottom: 1px solid #ebebeb; position: relative; } .ax-tree-menu a:last-child { border: none; } ul.tmpTargetzTree { opacity: 0.8; color: red; } .ax-tree li a.tmpTargetNode_inner .node_name { background-color: #f0f7ff; border-radius: 3px; } .ax-tree li a.tmpTargetNode_inner .node_name:hover { text-decoration: none; } .ax-tree li a.tmpTargetNode_inner .node_name:after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; left: 0; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; border-width: 1px; border-style: solid; width: 100%; height: 100%; border-color: #d7e7f5; border-radius: 3px; } span.tmpzTreeMove_arrow { color: #198cff; width: 22px; height: 28px; border: 0 none; background-color: transparent; position: absolute; z-index: 4; } span.tmpzTreeMove_arrow:before { content: "\e60a"; font-family: ax-iconfont; } .ax-tree.zTreeDragUL { padding-left: 4px; padding-right: 4px; border: 1px #198cff dotted; background-color: #f0f7ff; border-radius: 3px; opacity: 0.8; position: absolute; z-index: 4; } .ax-tree.zTreeDragUL li a { color: #198cff; } .ax-tree.zTreeDragUL .button { display: none; } .ax-treeMask { opacity: 0; position: absolute; z-index: 10000; } .ax-tree li ul.line { background-image: url(../plugins/ztree/images/tree-line.png); background-position: -22px top; background-repeat: repeat-y; } .ax-tree li span.button.roots_docu { background-image: url(../plugins/ztree/images/tree-line.png); background-position: left top; background-repeat: no-repeat; } .ax-tree li span.button.center_docu { background-image: url(../plugins/ztree/images/tree-line.png); background-position: left -28px; background-repeat: no-repeat; } .ax-tree li span.button.bottom_docu { background-image: url(../plugins/ztree/images/tree-line.png); background-position: left bottom; background-repeat: no-repeat; } .ax-tree li span.button.noline_docu { background: none; } .ax-tree.ax-tree-collapse .indent { height: 28px; float: left; } .ax-tree.ax-tree-collapse li ul { padding: 0; } .ax-tree.ax-tree-collapse li { padding: 0; } .ax-tree.ax-tree-collapse li a { display: block; } .ax-tree.ax-tree-collapse li a:hover { background-color: #f0f0f0; } .ax-tree.ax-tree-collapse li a.curSelectedNode { background-color: #198cff; } .ax-tree.ax-tree-collapse li a.curSelectedNode .node_name { background: transparent; } .ax-tree.ax-tree-collapse li a .node_name { padding: 0; } .ax-tree.ax-tree-collapse li a.curSelectedNode span.button { color: #fff; } .ax-tree.ax-tree-table { border-top: 1px solid #ebebeb; line-height: 38px; } .ax-tree.ax-tree-table .tree-head { font-weight: bold; } .ax-tree.ax-tree-table li ul { padding-left: 0; } .ax-tree.ax-tree-table li a { justify-content: flex-start; align-items: center; border-bottom: 1px solid #ebebeb; box-sizing: border-box; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; zoom: 1; } .ax-tree.ax-tree-table li:not(.tree-head) a:hover { background-color: #f0f0f0; } .ax-tree.ax-tree-table li:not(.tree-head) a.curSelectedNode { background-color: #f0f7ff; } .ax-tree.ax-tree-table li a.curSelectedNode .node_name { background: transparent; color: #198cff; } .ax-tree.ax-tree-table li a .node_name { padding: 0; } .ax-tree.ax-tree-table .tree-switch { display: flex; justify-content: flex-start; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .ax-tree.ax-tree-table .tree-head .tree-switch { padding-left: 22px; } .ax-tree.ax-tree-table .tree-td { width: 160px; text-align: center; position: relative; } .ax-tree.ax-tree-table .tree-opt { position: relative; width: 120px; text-align: center; } .ax-tree.ax-tree-grid { border-left: 1px solid #ebebeb; } .ax-tree.ax-tree-grid .tree-switch:after, .ax-tree.ax-tree-grid .tree-td:after, .ax-tree.ax-tree-grid .tree-opt:after { content: ''; width: 1px; height: 100%; background-color: #ebebeb; position: absolute; right: 0; top: 0; } .ax-tree.ax-reverse li a { color: #fff; } .ax-tree.ax-reverse li a:hover { color: #fff; } .ax-tree.ax-reverse li span.button:not([class*='_open']) { color: rgba(255, 255, 255, 0.5); } .ax-tree.ax-reverse li span.button:hover { color: #fff; } .ax-tree.ax-reverse li .node_name ~ span.button { color: rgba(255, 255, 255, 0.5); } .ax-tree.ax-reverse li .node_name ~ span.button:hover { color: #198cff; } .ax-tree.ax-reverse li a input.rename { color: #fff; border: none; box-shadow: none; background-color: rgba(255, 255, 255, 0.1); } .ax-tree.ax-reverse li a input.rename:focus { color: #fff; } .ax-tree.ax-reverse li a.tmpTargetNode_inner .node_name { background: transparent; } .ax-tree.ax-reverse li a.tmpTargetNode_inner .node_name:after { border-color: #198cff; } .ax-tree.ax-reverse.zTreeDragUL { border-color: #fff; background-color: rgba(0, 0, 0, 0.8); } .ax-tree.ax-reverse.zTreeDragUL li a { color: #fff; } /*plugins cytoscape */ .cy-container { display: block; width: 100%; height: 100%; position: relative; z-index: 1; } .cy-tips { max-width: 200px; white-space: normal; word-break: break-all; overflow: hidden; } .cy-operate { display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box; padding: 0 14px; background-color: rgba(255, 255, 255, 0.9); width: 100%; box-sizing: border-box; zoom: 1; position: fixed; left: 0; top: 0; z-index: 3; } .cy-operate .logo { display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; box-flex: 1; position: relative; } .cy-operate img { height: 38px; display: block; } .cy-operate .btn { justify-content: flex-end; align-items: center; } .cy-operate .btn .select { width: 120px; margin-top: 5px; } .cy-operate .btn select { width: 120px; padding: 0 0 0 4px; height: 28px; line-height: 28px; appearance: normal; -moz-appearance: normal; -webkit-appearance: normal; } .cy-edit { width: calc(240px + 14px); background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 38px; left: auto; right: 0px; z-index: 3; } .cy-edit textarea { height: 84px; } .cy-edit .isnode, .cy-edit .isedge { padding: 14px; display: none; } .cy-savedData, .cy-savedStyle, .cy-savedImage { display: none; } .node.branch { width: 8px; height: 8px; } /*right menu*/ .cy-context-menus-cxt-menu { display: none; border: 1px solid #ebebeb; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); padding: 0; margin: 0; width: 120px; background-color: #fff; border-radius: 3px; position: absolute; z-index: 1000; } .cy-context-menus-cxt-menuitem { display: block; font-weight: normal; font-size: 14px; white-space: nowrap; width: 100%; line-height: 28px; text-align: left; padding: 0 8px; margin: 0; background: transparent; border: 0; position: relative; z-index: 1000; } .cy-context-menus-cxt-menuitem:enabled { color: #333333; } .cy-context-menus-ctx-operation:focus { outline: none; } .cy-context-menus-cxt-menuitem:hover { color: #198cff; text-decoration: none; background-color: #f0f0f0; background-image: none; cursor: pointer; } .cy-context-menus-cxt-menuitem[content]:before { content: attr(content); } .cy-context-menus-divider { border-bottom: 1px solid #ebebeb; } /*scale window*/ .cytoscape-navigator { background-color: rgba(255, 255, 255, 0.9); border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); width: 240px; height: 240px; overflow: hidden; position: fixed; bottom: 0; right: 0; z-index: 99999; } .cytoscape-navigator > img { max-width: 100%; max-height: 100%; } .cytoscape-navigator > canvas { position: absolute; top: 0; left: 0; z-index: 101; } .cytoscape-navigatorView { cursor: move; background: #198cff; opacity: 0.5; position: absolute; top: 0; left: 0; z-index: 102; } .cytoscape-navigatorOverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; } /*zoom*/ .cy-panzoom { color: #b3b3b3; text-align: center; height: 220px; box-sizing: content-box; position: absolute; left: 14px; bottom: 14px; z-index: 3; } .cy-panzoom-zoom-button { color: #b3b3b3; width: 18px; height: 18px; line-height: 18px; border-radius: 3px; background-color: #fff; border: 1px solid #ebebeb; margin-left: -1px; margin-top: -1px; box-sizing: content-box; transition: all 0.2s linear; cursor: pointer; position: absolute; left: 16px; z-index: 1; } .cy-panzoom-zoom-button:active, .cy-panzoom-slider-handle:active, .cy-panzoom-slider-handle.active { background-color: #ebebeb; box-sizing: content-box; } .cy-panzoom-pan-button { position: absolute; z-index: 1; box-sizing: content-box; } .cy-panzoom-reset { top: 55px; box-sizing: content-box; } .cy-panzoom-zoom-in { top: 80px; box-sizing: content-box; } .cy-panzoom-zoom-out { top: 197px; box-sizing: content-box; } .cy-panzoom-pan-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #b3b3b3; margin-left: -5px; box-sizing: content-box; top: 2px; left: 50%; } .cy-panzoom-pan-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #b3b3b3; margin-left: -5px; box-sizing: content-box; bottom: 2px; left: 50%; } .cy-panzoom-pan-left { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #b3b3b3; margin-top: -5px; box-sizing: content-box; top: 50%; left: 2px; } .cy-panzoom-pan-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #b3b3b3; margin-top: -5px; box-sizing: content-box; top: 50%; right: 2px; } .cy-panzoom-pan-indicator { display: none; width: 8px; height: 8px; background: #666666; border-radius: 8px; margin-left: -5px; margin-top: -5px; opacity: 0.6; box-sizing: content-box; position: absolute; left: 0; top: 0; z-index: 999; } .cy-panzoom-slider { height: 100px; width: 15px; box-sizing: content-box; position: absolute; top: 97px; left: 17px; } .cy-panzoom-slider-background { width: 4px; height: 100px; background: #fff; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; box-sizing: content-box; position: absolute; left: 5px; top: 0; } .cy-panzoom-slider-handle { font-size: 10px; width: 18px; height: 8px; line-height: 8px; background: #fff; border: 1px solid #ebebeb; border-radius: 3px; margin-left: -2px; box-sizing: content-box; cursor: default; transition: all 0.2s linear; position: absolute; z-index: 999; } .cy-panzoom-slider-handle .icon { box-sizing: content-box; } .cy-panzoom-no-zoom-tick { background: #ccc; border: 1px solid #fff; border-radius: 2px; margin-left: -1px; width: 10px; height: 2px; margin-top: 3px; box-sizing: content-box; position: absolute; left: 3px; z-index: 1; } .cy-panzoom-panner { background: #fff; border: 1px solid #ebebeb; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border-radius: 40px; margin-left: -1px; height: 40px; width: 40px; box-sizing: content-box; transition: all 0.2s linear; position: absolute; left: 5px; top: 5px; } .cy-panzoom-panner-handle { height: 40px; width: 40px; outline: none; box-sizing: content-box; position: absolute; left: 0; top: 0; z-index: 999; } .cy-panzoom-zoom-only .cy-panzoom-slider, .cy-panzoom-zoom-only .cy-panzoom-panner { display: none; } .cy-panzoom-zoom-only .cy-panzoom-reset { top: 20px; } .cy-panzoom-zoom-only .cy-panzoom-zoom-in { top: 45px; } .cy-panzoom-zoom-only .cy-panzoom-zoom-out { top: 70px; } .cy-panzoom:hover .cy-panzoom-zoom-button, .cy-panzoom:hover .cy-panzoom-panner { border-color: #b3b3b3; } /*plugins mobiscroll*/ .mbsc-ax-arrow { position: absolute; right: 0; top: 0; height: 38px; width: calc(38px - 10px); cursor: pointer; text-align: center; z-index: 2; transition: all 0.2s linear; } .mbsc-ax-arrow:before { content: " "; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ccc; display: block; width: 0; height: 0; top: 0; right: 10px; bottom: 0; position: absolute; margin: auto 0; } .mbsc-popup { display: none; min-width: 300px; } .ax-focus + .mbsc-ax-arrow { transform: rotate(180deg); } .ax-focus + .mbsc-ax-arrow:before { border-top-color: #198cff; } .mbsc-ax.mbsc-sel .mbsc-ltr .mbsc-sel-filter-cont .mbsc-sel-filter-input { padding: 0 10px; } .mbsc-ax .mbsc-input input, .mbsc-input select, .mbsc-input textarea { font-size: 14px; border-radius: 3px; border: 1px solid #e0e0e0; } .mbsc-ax .mbsc-ltr .mbsc-sel-filter-clear { font-size: 14px; top: 14px; right: 14px; width: 38px; height: 38px; z-index: 2; } .mbsc-ax .mbsc-ltr .mbsc-img-w { height: 100%; } .mbsc-ltr .mbsc-img-txt { padding: 0; } .mbsc-ax .mbsc-sel-empty { font-size: 18px; } .mbsc-ax .mbsc-cal { font-size: 14px; } .mbsc-ax .mbsc-cal-days { line-height: 28px; } .mbsc-ax .mbsc-cal-hdr { padding-top: 0; } .mbsc-ax .mbsc-ic-arrow-left6:before { content: "\ea08"; } .mbsc-ax .mbsc-ic-arrow-right6:before { content: "\ea0c"; } .mbsc-ax .mbsc-sc-bar-c { z-index: 3; } .mbsc-ax .mbsc-sc-bar-c { width: 6px; border-radius: 3px; } .mbsc-ax .mbsc-sc-bar { width: 6px; border-radius: 3px; } .mbsc-ax .mbsc-sc-bar:after { border-radius: 3px; background-color: #b3b3b3; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s linear; } .mbsc-ax .mbsc-sc-bar-c:hover .mbsc-sc-bar:after { background-color: #808080; } .mbsc-ax .mbsc-cal .mbsc-cal-btn { width: 38px; height: calc(38px + 10px); padding: 0; line-height: calc(38px + 10px); font-size: 12px; margin: 0; border-radius: 3px; } .mbsc-ax .mbsc-cal-year, .mbsc-ax .mbsc-cal-month { font-size: 14px; line-height: calc(38px + 10px); } .mbsc-ax .mbsc-cal-picker { padding: 0; } .mbsc-ax .mbsc-cal-picker { background: #fff; } .mbsc-ax .mbsc-anim-slideright, .mbsc-ax .mbsc-anim-slideleft { -webkit-backface-visibility: hidden; -webkit-transform: translateY(0); backface-visibility: hidden; transform: translateY(0); } .mbsc-ax .mbsc-anim-slideright, .mbsc-ax .mbsc-anim-slideleft { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .mbsc-ax .mbsc-anim-in .mbsc-anim-slideright, .mbsc-ax .mbsc-anim-in .mbsc-anim-slideleft { -webkit-animation-name: mbsc-anim-su-in; -webkit-transform: scale(1); transform: scale(1); animation-name: mbsc-anim-su-in; } .mbsc-ax .mbsc-anim-out .mbsc-anim-slideright, .mbsc-ax .mbsc-anim-out .mbsc-anim-slideleft { -webkit-animation-name: mbsc-anim-su-out; -webkit-transform: translateX(70%); animation-name: mbsc-anim-su-out; } .mbsc-ax .mbsc-fr-pointer.mbsc-anim-in .mbsc-anim-slideright, .mbsc-ax .mbsc-fr-pointer.mbsc-anim-in .mbsc-anim-slideleft { -webkit-animation-name: mbsc-anim-su-in, mbsc-anim-f-in; animation-name: mbsc-anim-su-in, mbsc-anim-f-in; } .mbsc-ax .mbsc-fr-pointer.mbsc-anim-out .mbsc-anim-slideright, .mbsc-ax .mbsc-fr-pointer.mbsc-anim-out .mbsc-anim-slideleft { -webkit-animation-name: mbsc-anim-su-out, mbsc-anim-f-out; animation-name: mbsc-anim-su-out, mbsc-anim-f-out; } .mbsc-ax.ax-side-left .mbsc-fr-popup { width: 70% !important; height: 100%; background-color: #fff; left: -70%; overflow: hidden; } .mbsc-ax.ax-side-right .mbsc-fr-popup { width: 70% !important; height: 100%; background-color: #fff; left: auto!important; right: 0; overflow: hidden; } @keyframes mbsc-anim-sh-out-left { from { opacity: 1; left: 0; } to { opacity: 0; left: -70%; } } @keyframes mbsc-anim-sh-in-left { from { opacity: 0; left: -70%; } to { opacity: 1; left: 0; } } @keyframes mbsc-anim-sh-out-right { from { opacity: 1; right: 0; } to { opacity: 0; right: -70%; } } @keyframes mbsc-anim-sh-in-right { from { opacity: 0; right: -70%; } to { opacity: 1; right: 0; } } .mbsc-anim-toright { -webkit-backface-visibility: hidden; backface-visibility: hidden; left: 0; } .mbsc-anim-toright { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .mbsc-anim-in .mbsc-anim-toright { opacity: 1; animation-name: mbsc-anim-sh-in-left; } .mbsc-anim-out .mbsc-anim-toright { opacity: 0; animation-name: mbsc-anim-sh-out-left; } .mbsc-anim-toleft { -webkit-backface-visibility: hidden; backface-visibility: hidden; right: 0; } .mbsc-anim-toleft { transform-origin: 0 0; } .mbsc-anim-in .mbsc-anim-toleft { opacity: 1; animation-name: mbsc-anim-sh-in-right; } .mbsc-anim-out .mbsc-anim-toleft { opacity: 0; animation-name: mbsc-anim-sh-out-right; } .mbsc-ax .mbsc-cal-picker .mbsc-cal-cell-i { display: inline-block; height: 2em; padding: 0 1em; line-height: 2em; border-radius: 2em; white-space: nowrap; } .mbsc-ax .mbsc-cal-days > div { font-size: 14px; } .mbsc-ax .mbsc-cal-c { width: auto; box-sizing: border-box; } .mbsc-ax .mbsc-cal-day-scroll-c .mbsc-cal-slide { padding-bottom: 0.5em; } .mbsc-ax .mbsc-cal-cell { border-top: 1px solid #ebebeb; } .mbsc-ax .mbsc-cal-hide-diff .mbsc-cal-row:not(:first-child) .mbsc-cal-day-diff { border-top-color: transparent; } .mbsc-ax .mbsc-cal-day-date { display: inline-block; width: 28px; height: 28px; margin: 5px 0; line-height: calc(28px - 4px); border: 2px solid transparent; border-radius: 28px; box-sizing: border-box !important; } .mbsc-ax .mbsc-cal-today { color: #198cff; } .mbsc-ax .mbsc-cal-cell:focus .mbsc-cal-cell-txt, .mbsc-ax.mbsc-no-touch .mbsc-cal-cell:not(.mbsc-disabled):hover .mbsc-cal-cell-txt { background: rgba(25, 140, 255, 0.3); } .mbsc-ax .mbsc-cal-c .mbsc-cal .mbsc-cal-body .mbsc-selected .mbsc-cal-cell-txt { border-color: #198cff; background: #198cff; color: #fff; } .mbsc-ax .mbsc-cal-week-nr { width: 2.363636em; font-size: 0.6875em; } .mbsc-ax .mbsc-cal-tabs-c { padding: 0.666667em 0.666667em 0 0.666667em; } .mbsc-ax .mbsc-cal-tab { border: 1px solid #198cff; line-height: 1.928571em; font-size: 1.166667em; padding: 0 0.714285em; color: #198cff; } .mbsc-ax .mbsc-fr-popup .mbsc-fr-w .mbsc-cal-tabs-c .mbsc-cal-tabs .mbsc-cal-tab.mbsc-selected { background: #198cff; color: #fff; } .mbsc-ax .mbsc-ltr .mbsc-cal-tab:first-child { border-right: 0; border-radius: 0.285714em 0 0 0.285714em; } .mbsc-ax .mbsc-ltr .mbsc-cal-tab:last-child { border-left: 0; border-radius: 0 0.285714em 0.285714em 0; } .mbsc-ax .mbsc-rtl .mbsc-cal-tab:last-child { border-right: 0; border-radius: 0.285714em 0 0 0.285714em; } .mbsc-ax .mbsc-rtl .mbsc-cal-tab:first-child { border-left: 0; border-radius: 0 0.285714em 0.285714em 0; } .mbsc-ax .mbsc-cal-has-marks .mbsc-cal-day { padding-bottom: 0.4375em; } .mbsc-ax .mbsc-cal-has-marks .mbsc-cal-day-date { margin: 0.1875em 0; } .mbsc-ax .mbsc-cal-marks { margin-top: -0.0625em; } .mbsc-ax .mbsc-cal-mark { width: 0.375em; height: 0.375em; border-radius: 0.375em; background: #ccc; margin: 0 0.0625em; } .mbsc-ax .mbsc-cal-has-txt .mbsc-cal-day { padding-bottom: 1em; } .mbsc-ax .mbsc-cal-txt { height: 1.5em; line-height: 1.5em; margin-top: -0.1em; background: #d7eafe; color: #333333; } .mbsc-ax.mbsc-fr-inline .mbsc-cal-picker { background: #fff; } .mbsc-ax.mbsc-fr-center .mbsc-cal-c, .mbsc-ax.mbsc-fr-bubble .mbsc-cal-c { padding: 0 0.666667em; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-w { padding-bottom: 0; padding-top: 3.75em; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-cal-c { padding: 0; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-cal-day-scroll-c { padding: 0; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-btn-cont { top: 0; bottom: auto; border-bottom: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-btn-w { float: right; border: 0; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-w .mbsc-fr-btn-cont .mbsc-fr-btn-w .mbsc-fr-btn { background: none; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-btn-c { float: left; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-btn-s .mbsc-fr-btn { font-weight: bold; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-center .mbsc-fr-btn.mbsc-active { background: transparent; opacity: 0.5; } .mbsc-ax.mbsc-fr-liq.mbsc-fr-nobtn .mbsc-fr-w { padding: 0; } .mbsc-ax.mbsc-card.mbsc-form { margin: 1.8em 1em; background: #fff; border-radius: 0.5em; box-shadow: 0 0 1px 1px rgba(204, 204, 204, 0.2); } .mbsc-ax.mbsc-card .mbsc-btn-flat { padding: 0.625em; } .mbsc-ax .mbsc-card-footer .mbsc-btn { margin-top: -0.625em; margin-bottom: -0.625em; } .mbsc-ax .mbsc-card-footer { border-color: #ebebeb; } .mbsc-ax .mbsc-card h3.mbsc-card-subtitle, .mbsc-ax .mbsc-card-subtitle { color: #7c7c7c; } .mbsc-ax.mbsc-card .mbsc-btn-group-block { background: transparent; } .mbsc-ax.mbsc-card .mbsc-lv-ios .mbsc-lv-item:first-child:before { border: 0; } .mbsc-ax.mbsc-card .mbsc-lv-ios .mbsc-lv-item:last-child:after { border: 0; } .mbsc-ax.mbsc-card .mbsc-control-w:last-child:after { border: 0; } .mbsc-lv-ios .mbsc-card-list .mbsc-lv-item:before, .mbsc-lv-ios .mbsc-card-list .mbsc-lv-item:after { border: 0; } .mbsc-card-list .mbsc-lv-ios .mbsc-lv-item:before, .mbsc-card-list .mbsc-lv-ios .mbsc-lv-item:after { border: 0; } .mbsc-ax.mbsc-fr-top .mbsc-fr-btn-cont, .mbsc-ax.mbsc-fr-bottom .mbsc-fr-btn-cont { background: #fff; padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); } .mbsc-ax .mbsc-fr-overlay { background: transparent; } .mbsc-ax.ax-mask .mbsc-fr-overlay, .mbsc-ax.ax-mask .mbsc-fr-overlay, .mbsc-ax.ax-mask .mbsc-fr-overlay { background-color: rgba(0, 0, 0, 0.4); } .mbsc-ax .mbsc-fr-w { position: relative; padding-top: 38px; color: #333333; font-size: 14px; font-family: "微软雅黑", "microsoft yahei", "Arial", "Helvetica Neue", "sans-serif", "宋体", "simsun"; background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .mbsc-ax.ax-mask div.mbsc-fr-persp .mbsc-fr-w, .mbsc-ax.ax-mask div.mbsc-fr-popup { border: 0; } .mbsc-ax.ax-mask div .mbsc-fr-arr { border-color: #fff; } .mbsc-ax .mbsc-fr-has-hdr .mbsc-fr-w { min-width: 25em; } .mbsc-ax.mbsc-fr-nobtn .mbsc-fr-w, .mbsc-ax.mbsc-fr-center .mbsc-fr-w { min-width: 16.666667em; } .mbsc-ax.mbsc-fr-inline .mbsc-fr-w { box-shadow: none; } .mbsc-ax .mbsc-fr-hdr { position: absolute; z-index: 1; top: 0; right: 0; left: 0; line-height: 38px; padding: 0 calc(38px*3); color: #333333; font-size: 14px; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; } .mbsc-ax.mbsc-fr-bubble.mbsc-fr-btn-block .mbsc-fr-hdr { display: none; } .mbsc-ax .mbsc-sc-itm-ml { height: 100%; display: inline-flex; align-items: center; } .mbsc-ax.mbsc-fr-nobtn .mbsc-fr-hdr, .mbsc-ax.mbsc-fr-center:not(.mbsc-cal-liq) .mbsc-fr-hdr { position: relative; line-height: 38px; padding: 0 ; margin-bottom: -1px; border-bottom: 1px solid #ebebeb; white-space: normal; } .mbsc-ax .mbsc-fr-btn-cont { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; border-bottom: 1px solid #ebebeb; } .mbsc-ax .mbsc-ltr .mbsc-fr-btn-cont { text-align: right; } .mbsc-ax .mbsc-rtl .mbsc-fr-btn-cont { text-align: left; } .mbsc-ax .mbsc-fr-btn { height: 38px; line-height: 38px; padding: 0 14px; text-align: center; color: #333333; font-size: 14px; } .mbsc-ax .mbsc-fr-btn.mbsc-active { opacity: 0.5; } .mbsc-ax.mbsc-fr-center.mbsc-no-touch .mbsc-fr-btn-e:not(.mbsc-disabled):hover { background: #fff; } .mbsc-ax .mbsc-fr-btn-w { display: inline-block; width: auto!important; } .mbsc-ax .mbsc-fr-btn-w.mbsc-fr-btn-s { float: right; width: auto!important; } .mbsc-ax .mbsc-fr-btn-w.mbsc-fr-btn-c { float: left; width: auto!important; } .mbsc-ax .mbsc-ltr .mbsc-fr-btn-c { float: left; } .mbsc-ax .mbsc-rtl .mbsc-fr-btn-c { float: right; } .mbsc-ax .mbsc-rtl .mbsc-fr-btn-s { float: left; } .mbsc-ax .mbsc-fr-btn-s .mbsc-fr-btn { font-weight: normal; } .mbsc-ax.mbsc-fr-bubble .mbsc-fr-w, .mbsc-ax.mbsc-fr-center .mbsc-fr-w { border-radius: 3px; } .mbsc-ax .mbsc-fr-arr-w { z-index: 0; } .mbsc-ax .mbsc-fr-arr { position: relative; width: 10px; height: 10px; background: #fff; border: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -5px; } .mbsc-ax.mbsc-fr-bubble .mbsc-fr-arr-i { height: 20px; } .mbsc-ax .mbsc-fr-bubble-top .mbsc-fr-arr { top: -5px; border-left: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .mbsc-ax .mbsc-fr-bubble-bottom .mbsc-fr-arr { top: 14px; border-right: 1px solid #ebebeb; border-top: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-bottom .mbsc-fr-popup { border-top: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-top .mbsc-fr-popup { border-bottom: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-center .mbsc-fr-w { padding-top: 0; padding-bottom: 38px; } .mbsc-ax.mbsc-wdg .mbsc-wdg-c.mbsc-w-p { padding: 0; } .mbsc-ax.mbsc-fr-center .mbsc-fr-btn-cont { display: table; top: auto; bottom: 0; border: 0; table-layout: fixed; } .mbsc-ax .mbsc-fr-btn-e { transition: all 0.2s linear; } .mbsc-ax.mbsc-fr-center .mbsc-fr-btn-w { display: table-cell; float: none; border-top: 1px solid #ebebeb; border-left: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-center .mbsc-fr-btn-w:first-child { border-left: 0; } .mbsc-ax.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w { border-left: 0; border-right: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child { border-right: 0; } .mbsc-ax.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:first-child .mbsc-fr-btn, .mbsc-ax.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:last-child .mbsc-fr-btn { border-radius: 0 0 0 3px; } .mbsc-ax.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:last-child .mbsc-fr-btn, .mbsc-ax.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child .mbsc-fr-btn { border-radius: 0 0 3px 0; } .mbsc-ax.mbsc-fr-center .mbsc-fr-btn.mbsc-active { background: #fff; opacity: 1; } .mbsc-ax.mbsc-fr-inline .mbsc-fr-w { margin-top: -1px; background: #fff; border-top: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-inline .mbsc-fr-c { border-bottom: 0; } .mbsc-ax.mbsc-fr-nobtn .mbsc-fr-w { padding: 0; } .mbsc-ax.mbsc-fr-pointer .mbsc-fr-persp .mbsc-fr-popup .mbsc-fr-w, .mbsc-ax.mbsc-fr-pointer .mbsc-fr-persp .mbsc-cal-picker { background: #f7f7f7; } .mbsc-ax.mbsc-fr-pointer .mbsc-fr-persp .mbsc-fr-w { box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.3); border-radius: 8px; } .mbsc-ax.mbsc-fr-pointer .mbsc-fr-popup { border: 0; } .mbsc-ax.mbsc-fr-pointer .mbsc-fr-hdr { border-color: #ebebeb; font-size: 1.166667em; line-height: 1.5em; } .mbsc-ax.mbsc-progress { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 4em; margin-top: -1px; padding: 0.625em 1em; background: #fff; align-items: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mbsc-ax.mbsc-progress.mbsc-progress-w.mbsc-control-w .mbsc-label { padding: 0; } .mbsc-ax.mbsc-progress .mbsc-input-ic { top: 0.0625em; margin: 0; } .mbsc-ax.mbsc-progress.mbsc-ic-left .mbsc-left-ic, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-right .mbsc-right-ic { right: auto; left: -0.375em; } .mbsc-ax.mbsc-progress.mbsc-ic-right .mbsc-right-ic, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-left .mbsc-left-ic { left: auto; right: -0.375em; } .mbsc-ax.mbsc-progress .mbsc-input-wrap { position: relative; padding: 0 0.75em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap { padding-left: 2.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap { padding-right: 2.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap { padding-left: 3.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap { padding-right: 3.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap { padding-left: 5.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap { padding-right: 5.5em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value { left: 2.2857em; } .mbsc-ltr.mbsc-ax.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value, .mbsc-rtl.mbsc-ax.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value { right: 2.2857em; } .mbsc-ax .mbsc-progress-cont { padding: 1em 0; } .mbsc-ax .mbsc-progress-track { background: #dedede; border-radius: 1em; height: 0.0625em; } .mbsc-ax .mbsc-progress-bar { background: #1272dc; z-index: 1; } .mbsc-ax .mbsc-progress-value { width: 3.715em; font-size: 0.875em; color: #b6b6b6; } .mbsc-ax .mbsc-progress-step-label { top: 1.333334em; color: #b6b6b6; } .mbsc-ax.mbsc-progress.mbsc-ic-left:before, .mbsc-ax.mbsc-progress.mbsc-ic-left:after { left: 1em; } .mbsc-ax .mbsc-progress-primary .mbsc-progress-bar { background: #3f97f6; } .mbsc-ax .mbsc-progress-secondary .mbsc-progress-bar { background: #90979E; } .mbsc-ax .mbsc-progress-success .mbsc-progress-bar { background: #43BE5F; } .mbsc-ax .mbsc-progress-danger .mbsc-progress-bar { background: #f5504e; } .mbsc-ax .mbsc-progress-warning .mbsc-progress-bar { background: #f8b042; } .mbsc-ax .mbsc-progress-info .mbsc-progress-bar { background: #5BB7C5; } .mbsc-ax .mbsc-slider-handle-cont { top: 0; } .mbsc-ax .mbsc-slider-handle { top: 50%; width: 1.75em; height: 1.75em; margin: -0.875em -0.875em 0 0; background: #fff; border-radius: 1.25em; box-shadow: 0 0 1em rgba(0, 0, 0, 0.1), 0 0 0.0625em rgba(0, 0, 0, 0.15), 0 0.125em 0.125em rgba(0, 0, 0, 0.15); } .mbsc-ax .mbsc-slider-tooltip { font-size: 0.875em; width: 3em; margin-right: -1.5em; top: -1em; text-align: center; color: #b6b6b6; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .mbsc-ax .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip, .mbsc-ax .mbsc-active .mbsc-slider-tooltip { opacity: 1; } .mbsc-ax .mbsc-slider-step { height: 0.5em; width: 0.0625em; margin-top: -0.1875em; margin-left: -0.0625em; background: #dedede; } .mbsc-ax.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { opacity: 0.4; } .mbsc-ax .mbsc-slider-primary .mbsc-progress-bar { background: #3f97f6; } .mbsc-ax .mbsc-slider-secondary .mbsc-progress-bar { background: #90979E; } .mbsc-ax .mbsc-slider-success .mbsc-progress-bar { background: #43BE5F; } .mbsc-ax .mbsc-slider-danger .mbsc-progress-bar { background: #f5504e; } .mbsc-ax .mbsc-slider-warning .mbsc-progress-bar { background: #f8b042; } .mbsc-ax .mbsc-slider-info .mbsc-progress-bar { background: #5BB7C5; } .mbsc-ax.mbsc-color.mbsc-fr-bubble .mbsc-fr-w, .mbsc-ax.mbsc-color.mbsc-fr-center .mbsc-fr-w { max-width: 286px; min-width: 280px; } .mbsc-ax.mbsc-color .mbsc-fr-c { padding: 0.25em 0; } .mbsc-ax .mbsc-color-active, .mbsc-ax.mbsc-no-touch .mbsc-color-item-c:hover { border-radius: 3em; box-shadow: inset 0 0 0 0.1875em #198cff; } .mbsc-ax .mbsc-color-clear-item, .mbsc-ax .mbsc-color-item { border-radius: 1.75em; } .mbsc-ax.mbsc-color .mbsc-fr-c { font-size: 16px; } .mbsc-ax .mbsc-fr-center .mbsc-color-preview-cont { position: absolute; bottom: 0; left: 0; width: 100%; } .mbsc-ax .mbsc-color-preview-cont { bottom: 2.8125em; } .mbsc-ax.mbsc-color .mbsc-slider-step { height: 0.25em; margin: 0; } .mbsc-ax .mbsc-color-slider-cont.mbsc-progress { border: 0; padding: 0 0.5em; } .mbsc-ax .mbsc-color-slider-cont.mbsc-slider { background: transparent; } .mbsc-ax .mbsc-color-slider-cont.mbsc-slider:before, .mbsc-ax .mbsc-color-slider-cont.mbsc-slider:after { display: none; } .mbsc-ax .mbsc-color-slider-cont .mbsc-progress-cont { padding: 1.5em 0; } .mbsc-ax .mbsc-color-preview-item { border-radius: 1em; margin: 0.25em; } .mbsc-ax .mbsc-color-refine-preview { padding: 0.25em; } .mbsc-ax.mbsc-form .mbsc-color-input { height: auto; min-height: 2.75em; padding: 0.1875em; background: transparent; } .mbsc-ax.mbsc-form .mbsc-color-input-item { height: 2em; margin: 0.1875em; border-radius: 0.125em; } .mbsc-ax.mbsc-form .mbsc-color-input-item-close { line-height: 1.625em; } .mbsc-ax .mbsc-dt-whl-y .mbsc-sc-itm { min-width: 3.8em; } .mbsc-ax .mbsc-dt-whl-m .mbsc-sc-itm { text-align: center; } .mbsc-ax .mbsc-dt-whl-d .mbsc-sc-itm, .mbsc-ax .mbsc-dt-whl-h .mbsc-sc-itm, .mbsc-ax .mbsc-dt-whl-date .mbsc-sc-itm { text-align: center; } .mbsc-lv-ios { font-family: arial, verdana, sans-serif; margin-top: -1px; padding-top: 1px; } .mbsc-lv-ios .mbsc-lv { background: #ccc; } .mbsc-lv-ios .mbsc-lv-item { margin-top: -1px; padding: 1em; background: #fff; color: #333333; font-weight: normal; text-shadow: none; } .mbsc-lv-ios .mbsc-lv-item:before, .mbsc-lv-ios .mbsc-lv-item:after { border-top: 1px solid #ebebeb; content: ""; position: absolute; right: 0; left: 1em; } .mbsc-lv-ios .mbsc-lv-item:before { top: 0; } .mbsc-lv-ios .mbsc-lv-item:after { bottom: 0; } .mbsc-lv-ios .mbsc-lv-item:first-child:before, .mbsc-lv-ios .mbsc-lv-item:last-child:after, .mbsc-lv-ios .mbsc-lv-back:after { left: 0; } .mbsc-lv-ios .mbsc-lv-gr-title { margin-top: -1px; padding: 2.333334em 1.333334em 0.5em 1.333334em; background: #efeff4; color: #6d6d72; font-size: 0.75em; line-height: 1.5em; text-transform: uppercase; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .mbsc-lv-ios .mbsc-lv-gr-title:first-child { margin-top: 0; border-top: 0; } .mbsc-ax.mbsc-ev-cal .mbsc-fr-w { background: #f7f7f7; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-inline .mbsc-cal-hdr { padding: 0.5em 0; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-inline .mbsc-cal-picker { padding-top: 1.875em; padding-bottom: 0; background: #f7f7f7; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-inline .mbsc-cal-scroll-c { background: #fff; } .mbsc-ax .mbsc-cal-events { max-width: 38em; margin: 0.5em 0 1.083333em 0; } .mbsc-ax .mbsc-cal-events-b { margin: 1.166666em 0 0.5em 0; } .mbsc-ax .mbsc-cal-events-i { margin: 0 0.5em; border-radius: 0.5em; border: 1px solid #ebebeb; box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.3); background: #fff; } .mbsc-ax .mbsc-cal-events-sc { z-index: 1; } .mbsc-ax .mbsc-cal-event { margin: 0; font-weight: bold; line-height: 1.833334em; } .mbsc-ax .mbsc-ltr .mbsc-cal-event { padding: 1.166667em 5em 1.166667em 1.916667em; } .mbsc-ax .mbsc-rtl .mbsc-cal-event { padding: 1.166667em 1.916667em 1.166667em 5em; } .mbsc-ax .mbsc-cal-event:first-child { border: 0; } .mbsc-ax .mbsc-cal-event-color { top: 50%; margin-top: -0.25em; width: 0.5em; height: 0.5em; background: #94b8dd; border-radius: 0.5em; } .mbsc-ax .mbsc-ltr .mbsc-cal-event-color { left: 6.75em; } .mbsc-ax .mbsc-rtl .mbsc-cal-event-color { right: 6.75em; } .mbsc-ax .mbsc-cal-events-arr { width: 1.666667em; height: 1.666667em; background: #fff; border: 0; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -0.833333em; bottom: -0.833333em; border-bottom-left-radius: 0.5em; z-index: 1; } .mbsc-ax .mbsc-cal-events-b .mbsc-cal-events-arr { border: 0; border-top: 1px solid #ebebeb; border-right: 1px solid #ebebeb; border-top-right-radius: 0.5em; top: -0.833333em; } .mbsc-ax .mbsc-cal-event-dur, .mbsc-ax .mbsc-cal-event-time { font-weight: normal; color: #8e8e8e; } .mbsc-ax .mbsc-cal-event-time { width: 4.166667em; } .mbsc-ax .mbsc-ltr .mbsc-cal-event-time { margin-right: 1.916667em; } .mbsc-ax .mbsc-rtl .mbsc-cal-event-time { margin-left: 1.916667em; } .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event { margin-top: -1px; } .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event:before, .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event:after { border-top: 1px solid #ebebeb; content: ''; position: absolute; } .mbsc-ax .mbsc-ltr .mbsc-cal-event-list .mbsc-cal-event:before, .mbsc-ax .mbsc-ltr .mbsc-cal-event-list .mbsc-cal-event:after { right: 0; left: 1.916667em; } .mbsc-ax .mbsc-rtl .mbsc-cal-event-list .mbsc-cal-event:before, .mbsc-ax .mbsc-rtl .mbsc-cal-event-list .mbsc-cal-event:after { left: 0; right: 1.916667em; } .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event:before { top: 0; } .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event:after { bottom: 0; } .mbsc-ax .mbsc-ltr .mbsc-cal-event-list .mbsc-cal-event:first-child:before, .mbsc-ax .mbsc-ltr .mbsc-cal-event-list .mbsc-cal-event:last-child:after { left: 0; } .mbsc-ax .mbsc-rtl .mbsc-cal-event-list .mbsc-cal-event:first-child:before, .mbsc-ax .mbsc-rtl .mbsc-cal-event-list .mbsc-cal-event:last-child:after { right: 0; } .mbsc-ax .mbsc-cal-event-list .mbsc-cal-event:last-child:after { border: 0; } .mbsc-ax .mbsc-event-list .mbsc-event-day { color: #333333; font-weight: bold; } .mbsc-ax .mbsc-event-color { background: #ccc; } .mbsc-ax .mbsc-event-empty { border-bottom: 0; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-days > div { padding: 0 0.571428em; font-size: 14px; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-slide { padding: 0; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-cell { border-left: 1px solid #ebebeb; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-day-date { margin: 0.1875em; margin-bottom: 0.375em; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-has-txt .mbsc-cal-day { padding-bottom: 1.125em; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-marks { margin: -0.5em 0.875em 0 0.875em; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-txt { left: 0.3em; right: 0.3em; margin: 0; padding: 0 0.5em; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-ltr .mbsc-cal-days, .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-ltr .mbsc-cal-day { text-align: right; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-ltr .mbsc-cal-txt { text-align: left; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-rtl .mbsc-cal-days, .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-rtl .mbsc-cal-day { text-align: left; } .mbsc-ax.mbsc-ev-cal.mbsc-fr-md .mbsc-rtl .mbsc-cal-txt { text-align: right; } .mbsc-lv-ios.mbsc-lv-alt-row .mbsc-lv-item:nth-child(even) { background: #FAFAFA; } .mbsc-lv-ios .mbsc-lv-item-hl, .mbsc-lv-ios .mbsc-lv .mbsc-lv-item.mbsc-lv-item-active { background: #d9d9d9; border-color: #d9d9d9; } .mbsc-lv-ios .mbsc-lv-item.mbsc-lv-item-dragging { margin: 0; } .mbsc-lv-ios .mbsc-lv-handle-c { width: 4em; } .mbsc-lv-ios .mbsc-lv-handle-bar { margin: 0.125em 1em; background: #ccc; } .mbsc-lv-ios.mbsc-lv-handle-left .mbsc-lv .mbsc-lv-item { padding-left: 4em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv .mbsc-lv-item { padding-right: 4em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv-parent .mbsc-lv-arr { right: 3.125em; } .mbsc-lv-ios.mbsc-lv-has-fixed-header .mbsc-lv-gr-title, .mbsc-lv-ios.mbsc-lv-fixed-header .mbsc-lv-gr-title { line-height: 1.125em; font-size: 1em; padding: 0.4em 1em; border: 0; color: #333333; font-weight: bold; } .mbsc-lv-ios .mbsc-lv-ic-m { color: #777; } .mbsc-lv-ios .mbsc-lv-arr { color: #ccc; } .mbsc-lv-ios .mbsc-lv-item.mbsc-lv-img-left { padding-left: 4.5em; } .mbsc-lv-ios .mbsc-lv-item.mbsc-lv-img-right { padding-right: 4.5em; } .mbsc-lv-ios .mbsc-lv-img-left .mbsc-lv-img { left: 2.25em; } .mbsc-lv-ios .mbsc-lv-img-right .mbsc-lv-img { right: -0.25em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv-img-right .mbsc-lv-img { right: 2.75em; } .mbsc-lv-ios.mbsc-lv-handle-left .mbsc-lv-img-left .mbsc-lv-img { left: 5.25em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv-item-ic-right .mbsc-lv-item-ic { right: 4em; } .mbsc-lv-ios.mbsc-lv-handle-left .mbsc-lv-item-ic-left .mbsc-lv-item-ic { left: 4em; } .mbsc-lv-ios.mbsc-lv-handle-left .mbsc-lv .mbsc-lv-item.mbsc-lv-img-left { padding-left: 7.5em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv .mbsc-lv-item.mbsc-lv-img-right { padding-right: 7.5em; } .mbsc-lv-ios.mbsc-lv-handle-left .mbsc-lv-item-ic-left { padding-left: 7em; } .mbsc-lv-ios.mbsc-lv-handle-right .mbsc-lv-item-ic-right { padding-right: 7em; } .mbsc-lv-ios .mbsc-lv-arr { font-size: 1.3125em; } .mbsc-lv-ios .mbsc-lv-item-ic-left:before, .mbsc-lv-ios .mbsc-lv-item-ic-left:after { left: 4em; } .mbsc-lv-ios .mbsc-lv-img-left:before, .mbsc-lv-ios .mbsc-lv-img-left:after { left: 4.5em; } .mbsc-ax .mbsc-empty { color: #6e6e6e; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .mbsc-fr-hb.mbsc-ax.mbsc-fr-inline .mbsc-fr-w, .mbsc-fr-hb.mbsc-ax.mbsc-fr-inline .mbsc-fr-c, .mbsc-fr-hb.mbsc-ax .mbsc-fr-hdr, .mbsc-fr-hb.mbsc-ax .mbsc-fr-btn-cont, .mbsc-fr-hb.mbsc-ax.mbsc-fr-center .mbsc-fr-btn-w, .mbsc-fr-hb.mbsc-ax.mbsc-fr-bottom .mbsc-fr-popup, .mbsc-fr-hb.mbsc-ax.mbsc-cal-liq.mbsc-fr-center .mbsc-fr-btn-cont, .mbsc-fr-hb.mbsc-ax.mbsc-calendar .mbsc-fr-popup .mbsc-fr-btn-cont, .mbsc-fr-hb.mbsc-ax .mbsc-cal-day, .mbsc-fr-hb.mbsc-ax .mbsc-cal-sc-m-cell, .mbsc-cal-event-list .mbsc-cal-event:before, .mbsc-cal-event-list .mbsc-cal-event:after, .mbsc-fr-hb.mbsc-ax .mbsc-range-btn-end, .mbsc-fr-hb.mbsc-ax .mbsc-range-btn-end .mbsc-range-btn:before, .mbsc-fr-hb.mbsc-ax .mbsc-np-btn, .mbsc-fr-hb.mbsc-ax.mbsc-ms-more .mbsc-ms-item:after, .mbsc-lv-hb.mbsc-lv-ios .mbsc-lv-item:before, .mbsc-lv-hb.mbsc-lv-ios .mbsc-lv-item:after, .mbsc-lv-hb.mbsc-lv-ios .mbsc-lv-gr-title, .mbsc-lv-hb.mbsc-lv-ios, .mbsc-form-hb.mbsc-ax .mbsc-control-w:before, .mbsc-form-hb.mbsc-ax .mbsc-control-w:after, .mbsc-form-hb.mbsc-ax .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:before, .mbsc-form-hb.mbsc-ax .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:after, .mbsc-form-hb.mbsc-ax .mbsc-divider, .mbsc-form-hb.mbsc-ax .mbsc-btn-group { border-width: 0.5px; } } .mbsc-ax .mbsc-input { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; background: #fff; } .mbsc-ax .mbsc-input input::-webkit-input-placeholder { color: #ccc; } .mbsc-ax .mbsc-input input::-ms-input-placeholder { color: #ccc; } .mbsc-ax .mbsc-input input::-moz-placeholder { color: #ccc; } .mbsc-ax .mbsc-input-wrap { position: static; -webkit-box-flex: 1; -webkit-flex: 1 auto; -moz-box-flex: 1; -moz-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; } .mbsc-ax .mbsc-input.mbsc-textarea .mbsc-label { margin-bottom: -0.625em; } .mbsc-ax .mbsc-input.mbsc-textarea { flex-direction: column; } .mbsc-ax .mbsc-input.mbsc-textarea.mbsc-ic-left .mbsc-label ~ .mbsc-input-wrap { padding-left: 2.25em; } .mbsc-ax .mbsc-textarea textarea { height: 2.75em; padding: 0 1em; background: transparent; } .mbsc-ax .mbsc-textarea textarea::-webkit-input-placeholder { color: #ccc; } .mbsc-ax .mbsc-textarea textarea::-ms-input-placeholder { color: #ccc; } .mbsc-ax .mbsc-textarea textarea::-moz-placeholder { color: #ccc; } .mbsc-ax .mbsc-input .mbsc-label, .mbsc-ax .mbsc-progress .mbsc-label { -webkit-box-flex: 0; -webkit-flex: 0 auto; -moz-box-flex: 0; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 30%; max-width: 12.5em; overflow: hidden; font-size: 1em; line-height: 2.75em; color: #020202; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mbsc-ax.mbsc-ltr .mbsc-input .mbsc-label { padding-left: 1em; } .mbsc-ax.mbsc-rtl .mbsc-input .mbsc-label { padding-right: 1em; } .mbsc-ax .mbsc-input select:disabled ~ input, .mbsc-ax .mbsc-input select:disabled ~ .mbsc-ic, .mbsc-ax .mbsc-input input:disabled { opacity: 0.5; } .mbsc-ax .mbsc-err-msg { padding: 0.5em 1.3333em; color: #d8332a; } .mbsc-ax .mbsc-input-ic { top: 0.375em; margin-top: -1px; } .mbsc-ax .mbsc-ic-left { z-index: 1; } .mbsc-ax.mbsc-ltr .mbsc-ic-left .mbsc-input-wrap, .mbsc-ax.mbsc-rtl .mbsc-ic-right .mbsc-input-wrap { padding-left: 2.25em; } .mbsc-ax.mbsc-ltr .mbsc-ic-right .mbsc-input-wrap, .mbsc-ax.mbsc-rtl .mbsc-ic-left .mbsc-input-wrap { padding-right: 2.25em; } .mbsc-ax.mbsc-ltr .mbsc-ic-left .mbsc-label { padding-left: 3.25em; } .mbsc-ax.mbsc-rtl .mbsc-ic-left .mbsc-label { padding-right: 3.25em; } .mbsc-ax.mbsc-ltr .mbsc-ic-left .mbsc-label ~ .mbsc-input-wrap { padding-left: 0; } .mbsc-ax.mbsc-rtl .mbsc-ic-left .mbsc-label ~ .mbsc-input-wrap { padding-right: 0; } .mbsc-ax .mbsc-ic-left .mbsc-left-ic, .mbsc-ax.mbsc-rtl .mbsc-ic-right .mbsc-right-ic { right: auto; left: 0.625em; } .mbsc-ax .mbsc-ic-right .mbsc-right-ic, .mbsc-ax.mbsc-rtl .mbsc-ic-left .mbsc-left-ic { left: auto; right: 0.625em; } .mbsc-ax .mbsc-control-w { margin-top: -1px; } .mbsc-ax .mbsc-control-w:before, .mbsc-ax .mbsc-control-w:after { border-top: 1px solid #ebebeb; content: ""; position: absolute; right: 0; left: 1em; } .mbsc-ax .mbsc-control-w:before { top: 0; } .mbsc-ax .mbsc-control-w:after { bottom: 0; } .mbsc-ax .mbsc-form-group-title + .mbsc-control-w:before, .mbsc-ax .mbsc-control-w:first-child:before, .mbsc-ax .mbsc-control-w:last-child:after { left: 0; } .mbsc-ax .mbsc-control-ng .mbsc-control-w:before, .mbsc-ax .mbsc-control-ng .mbsc-control-w:after { left: 1em; } .mbsc-ax .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w:before, .mbsc-ax .mbsc-control-ng:first-child .mbsc-control-w:before, .mbsc-ax .mbsc-control-ng:last-child .mbsc-control-w:after { left: 0; } .mbsc-ax .mbsc-ic-left:before, .mbsc-ax .mbsc-ic-left:after { left: 3.25em; } .mbsc-ax .mbsc-err { z-index: 2; } .mbsc-ax .mbsc-control-w.mbsc-err:after, .mbsc-ax .mbsc-control-w.mbsc-err + .mbsc-err:before, .mbsc-ax .mbsc-control-w.mbsc-err + .mbsc-divider { border-top-color: #ec2a32; } .mbsc-ax .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-w, .mbsc-ax .mbsc-form-group-inset .mbsc-control-w:first-child { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } .mbsc-ax .mbsc-form-group-inset .mbsc-control-w:last-child { border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; } .mbsc-ax .mbsc-form-group-inset .mbsc-form-group-title, .mbsc-ax .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-w:before, .mbsc-ax .mbsc-form-group-inset .mbsc-control-w:first-child:before, .mbsc-ax .mbsc-form-group-inset .mbsc-control-w:last-child:after { border-width: 0; } .mbsc-ax .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w { border-radius: 0; } .mbsc-ax .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:before, .mbsc-ax .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:after { border-width: 1px; } .mbsc-ax.mbsc-form .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w:before, .mbsc-ax.mbsc-form .mbsc-form-group-inset .mbsc-control-ng:first-child .mbsc-control-w:before, .mbsc-ax.mbsc-form .mbsc-form-group-inset .mbsc-control-ng:last-child .mbsc-control-w:after { border-width: 0; } .mbsc-ax .mbsc-form-group-inset .mbsc-form-group-title + .mbsc-control-ng .mbsc-control-w, .mbsc-ax .mbsc-form-group-inset .mbsc-control-ng:first-child .mbsc-control-w { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } .mbsc-ax .mbsc-form-group-inset .mbsc-control-ng:last-child .mbsc-control-w { border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; } .mbsc-ax.mbsc-rating .mbsc-progress-track { color: #198cff; } .mbsc-ax.mbsc-rating.mbsc-progress .mbsc-input-wrap { padding: 0; } .mbsc-ax.mbsc-rating input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { opacity: 0.4; } .mbsc-ax.mbsc-rating.mbsc-rating-primary .mbsc-progress-track { color: #3f97f6; } .mbsc-ax.mbsc-rating.mbsc-rating-secondary .mbsc-progress-track { color: #90979E; } .mbsc-ax.mbsc-rating.mbsc-rating-success .mbsc-progress-track { color: #43BE5F; } .mbsc-ax.mbsc-rating.mbsc-rating-danger .mbsc-progress-track { color: #f5504e; } .mbsc-ax.mbsc-rating.mbsc-rating-warning .mbsc-progress-track { color: #f8b042; } .mbsc-ax.mbsc-rating.mbsc-rating-info .mbsc-progress-track { color: #5BB7C5; } .mbsc-ax.mbsc-alert .mbsc-fr-c.mbsc-wdg-c { padding: 1.142857em; line-height: 1.285714; text-align: center; } .mbsc-ax.mbsc-alert h2 { margin: 0.277778em 0; font-size: 1.285715em; } .mbsc-ax.mbsc-alert p { margin: 0.357143em 0; } .mbsc-ax.mbsc-alert .mbsc-input { margin-top: 1.142857em; border: 1px solid #ebebeb; border-radius: 0; } .mbsc-ax.mbsc-alert .mbsc-input input { height: 1.714286em; padding: 0 0.357143em; } .mbsc-ax.mbsc-snackbar .mbsc-fr-w { background: #646464; color: #fff; } .mbsc-ax.mbsc-snackbar .mbsc-snackbar-btn { color: #a0cbf8; } .mbsc-ax.mbsc-toast .mbsc-toast-msg { background: #646464; border-radius: 0.5em; color: #fff; opacity: 0.9; } .mbsc-ax.mbsc-snackbar.mbsc-primary .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-primary .mbsc-toast-msg { background: #3f97f6; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-secondary .mbsc-toast-msg { background: #90979E; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-success .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-success .mbsc-toast-msg { background: #43BE5F; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-danger .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-danger .mbsc-toast-msg { background: #f5504e; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-warning .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-warning .mbsc-toast-msg { background: #f8b042; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-info .mbsc-fr-w, .mbsc-ax.mbsc-toast.mbsc-info .mbsc-toast-msg { background: #5BB7C5; color: #eee; } .mbsc-ax.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn, .mbsc-ax.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn, .mbsc-ax.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn, .mbsc-ax.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn, .mbsc-ax.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn, .mbsc-ax.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn { color: #eee; } .mbsc-ax .mbsc-collapsible .mbsc-collapsible-header { padding-right: 3em; } .mbsc-ax .mbsc-collapsible .mbsc-form-group-title { padding-top: 2.5em; margin: 0; } .mbsc-ax .mbsc-collapsible .mbsc-form-group-title .mbsc-collapsible-icon { margin-top: 0.5em; } .mbsc-ax.mbsc-form { background: #efeff4; color: #333333; } .mbsc-ax.mbsc-form *::-moz-selection { color: #fff; background: #1272dc; } .mbsc-ax.mbsc-form *::selection { color: #fff; background: #1272dc; } .mbsc-ax .mbsc-input-ic { color: #7f8797; } .mbsc-ax .mbsc-desc { opacity: 0.5; } .mbsc-ax .mbsc-divider, .mbsc-ax .mbsc-form-group-title { position: relative; z-index: 2; background: #efeff4; margin-top: -1px; border-bottom: 1px solid #ebebeb; color: #6d6d72; font-size: 0.75em; line-height: 1.5em; text-transform: uppercase; } .mbsc-ax .mbsc-divider { padding: 2.333334em 1.333334em 0.5em 1.333334em; border-top: 1px solid #ebebeb; } .mbsc-ax .mbsc-form-group-title { padding: 0.5em 1.333334em; } .mbsc-ax.mbsc-ltr .mbsc-select input { padding-right: 2.25em; } .mbsc-ax.mbsc-rtl .mbsc-select input { padding-left: 2.25em; } .mbsc-ax .mbsc-select-ic { position: absolute; display: block; height: 1.25em; width: 1.25em; top: 0.875em; right: 1em; text-align: center; } .mbsc-ax.mbsc-rtl .mbsc-select-ic { right: auto; left: 1em; } .mbsc-ax .mbsc-ic-right .mbsc-select-ic { right: 3.4em; } .mbsc-ax.mbsc-rtl .mbsc-ic-right .mbsc-select-ic { right: auto; left: 3.4em; } .mbsc-ax .mbsc-select-inline .mbsc-select-ic { display: none; } .mbsc-ax .mbsc-textarea .mbsc-input-wrap { padding: 0.625em 0; } .mbsc-ax .mbsc-textarea textarea { height: 3em; } .mbsc-ax .mbsc-textarea .mbsc-label { width: auto; max-width: none; } .mbsc-ax.mbsc-form .mbsc-checkbox, .mbsc-ax.mbsc-form .mbsc-radio { padding: 0.875em 3.75em 0.875em 1em; background: #fff; } .mbsc-ax.mbsc-rtl .mbsc-checkbox, .mbsc-ax.mbsc-rtl .mbsc-radio { padding: 0.875em 1em 0.875em 3.75em; } .mbsc-ax .mbsc-checkbox input:disabled + .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox input:disabled ~ .mbsc-label, .mbsc-ax .mbsc-checkbox input:disabled ~ .mbsc-desc, .mbsc-ax .mbsc-radio input:disabled + .mbsc-radio-box, .mbsc-ax .mbsc-radio input:disabled ~ .mbsc-label, .mbsc-ax .mbsc-radio input:disabled ~ .mbsc-desc, .mbsc-ax .mbsc-switch input:disabled + .mbsc-switch-track, .mbsc-ax .mbsc-switch input:disabled ~ .mbsc-label, .mbsc-ax .mbsc-switch input:disabled ~ .mbsc-desc { opacity: 0.3; } .mbsc-ax .mbsc-checkbox-box:after, .mbsc-ax .mbsc-radio-box:after { -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .mbsc-ax .mbsc-checkbox-box { right: 1em; width: 1.75em; height: 1.75em; margin-top: -0.875em; background: transparent; border: 0.125em solid #1272dc; border-radius: 2em; } .mbsc-ax.mbsc-rtl .mbsc-checkbox-box { right: auto; left: 1em; } .mbsc-ax .mbsc-checkbox-box:after { top: 32%; left: 26%; width: 0.75em; height: 0.375em; border: 0.125em solid #1272dc; border-top: 0; border-right: 0; } .mbsc-ax .mbsc-checkbox-primary .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-primary .mbsc-checkbox-box:after { border-color: #3f97f6; } .mbsc-ax .mbsc-checkbox-secondary .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-secondary .mbsc-checkbox-box:after { border-color: #90979E; } .mbsc-ax .mbsc-checkbox-success .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-success .mbsc-checkbox-box:after { border-color: #43BE5F; } .mbsc-ax .mbsc-checkbox-danger .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-danger .mbsc-checkbox-box:after { border-color: #f5504e; } .mbsc-ax .mbsc-checkbox-warning .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-warning .mbsc-checkbox-box:after { border-color: #f8b042; } .mbsc-ax .mbsc-checkbox-info .mbsc-checkbox-box, .mbsc-ax .mbsc-checkbox-info .mbsc-checkbox-box:after { border-color: #5BB7C5; } .mbsc-ax .mbsc-radio-box { right: 1.125em; margin-top: -0.625em; background: transparent; } .mbsc-ax.mbsc-rtl .mbsc-radio-box { right: auto; left: 1.125em; } .mbsc-ax .mbsc-radio-box:after { position: absolute; top: 44%; left: 23%; width: 1em; height: 0.5em; border: 0.125em solid #1272dc; border-top: 0; border-right: 0; border-radius: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mbsc-ax .mbsc-radio input:disabled ~ .mbsc-radio-label { color: #a6a7a6; } .mbsc-ax .mbsc-radio-primary .mbsc-radio-box:after { border-color: #3f97f6; } .mbsc-ax .mbsc-radio-secondary .mbsc-radio-box:after { border-color: #90979E; } .mbsc-ax .mbsc-radio-success .mbsc-radio-box:after { border-color: #43BE5F; } .mbsc-ax .mbsc-radio-danger .mbsc-radio-box:after { border-color: #f5504e; } .mbsc-ax .mbsc-radio-warning .mbsc-radio-box:after { border-color: #f8b042; } .mbsc-ax .mbsc-radio-info .mbsc-radio-box:after { border-color: #5BB7C5; } .mbsc-ax .mbsc-btn { margin: 0.5em 0.25em; padding: 0.625em 1.375em; background: #fff; border: 0; border-radius: 0.25em; color: #1272dc; } .mbsc-ax .mbsc-btn-ic { padding-right: 0.625em; } .mbsc-ax .mbsc-btn-icon-only .mbsc-btn-ic { padding: 0; } .mbsc-ax.mbsc-no-touch .mbsc-btn:not(:disabled):not(.mbsc-active):hover { opacity: 0.8; } .mbsc-ax .mbsc-btn.mbsc-active { opacity: 0.6; } .mbsc-ax .mbsc-btn:disabled { background: #dfdfdf; color: #c4c4c4; } .mbsc-ax .mbsc-btn.mbsc-btn-outline:disabled { color: #c4c4c4; border-color: #c4c4c4; } .mbsc-ax .mbsc-btn.mbsc-btn-flat { background: transparent; border-color: transparent; } .mbsc-ax .mbsc-btn-flat.mbsc-active { opacity: 0.6; } .mbsc-ax .mbsc-btn-flat:disabled { background: transparent; opacity: 0.8; color: #c4c4c4; } .mbsc-ax .mbsc-btn-group, .mbsc-ax .mbsc-btn-group-justified, .mbsc-ax .mbsc-btn-group-block { padding: 0.5em 0.75em; background: #efeff4; } .mbsc-ax .mbsc-btn-group-block { padding: 0.5em 1em; } .mbsc-ax .mbsc-btn-primary.mbsc-btn { background: #3f97f6; color: #eee; } .mbsc-ax .mbsc-btn-primary.mbsc-btn.mbsc-btn-flat { color: #3f97f6; } .mbsc-ax .mbsc-btn-secondary.mbsc-btn { background: #90979E; color: #eee; } .mbsc-ax .mbsc-btn-secondary.mbsc-btn.mbsc-btn-flat { color: #90979E; } .mbsc-ax .mbsc-btn-success.mbsc-btn { background: #43BE5F; color: #eee; } .mbsc-ax .mbsc-btn-success.mbsc-btn.mbsc-btn-flat { color: #43BE5F; } .mbsc-ax .mbsc-btn-danger.mbsc-btn { background: #f5504e; color: #eee; } .mbsc-ax .mbsc-btn-danger.mbsc-btn.mbsc-btn-flat { color: #f5504e; } .mbsc-ax .mbsc-btn-warning.mbsc-btn { background: #f8b042; color: #eee; } .mbsc-ax .mbsc-btn-warning.mbsc-btn.mbsc-btn-flat { color: #f8b042; } .mbsc-ax .mbsc-btn-info.mbsc-btn { background: #5BB7C5; color: #eee; } .mbsc-ax .mbsc-btn-info.mbsc-btn.mbsc-btn-flat { color: #5BB7C5; } .mbsc-ax .mbsc-btn-light.mbsc-btn { background: #fff; color: #333333; } .mbsc-ax .mbsc-btn-light.mbsc-btn.mbsc-btn-flat { color: #ccc; } .mbsc-ax .mbsc-btn-dark.mbsc-btn { background: #47494A; color: #eee; } .mbsc-ax .mbsc-btn-dark.mbsc-btn.mbsc-btn-flat { color: #47494A; } .mbsc-ax .mbsc-btn-flat.mbsc-btn { background: transparent; } .mbsc-ax .mbsc-btn-outline.mbsc-btn { background: transparent; border: 1px solid #1272dc; color: #1272dc; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-active { background: #1272dc; color: #efeff4; opacity: 1; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-primary { border-color: #3f97f6; color: #3f97f6; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-primary.mbsc-active { background: #3f97f6; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-secondary { border-color: #90979E; color: #90979E; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-secondary.mbsc-active { background: #90979E; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-success { border-color: #43BE5F; color: #43BE5F; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-success.mbsc-active { background: #43BE5F; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-danger { border-color: #f5504e; color: #f5504e; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-danger.mbsc-active { background: #f5504e; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-warning { border-color: #f8b042; color: #f8b042; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-warning.mbsc-active { background: #f8b042; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-info { border-color: #5BB7C5; color: #5BB7C5; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-info.mbsc-active { background: #5BB7C5; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-light { border-color: #bfbfbf; color: #bfbfbf; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-light.mbsc-active { background: #bfbfbf; color: #fff; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-dark { border-color: #47494A; color: #47494A; } .mbsc-ax .mbsc-btn-outline.mbsc-btn.mbsc-btn-dark.mbsc-active { background: #47494A; color: #fff; } .mbsc-ax.mbsc-form .mbsc-switch { padding: 0.875em 5em 0.875em 1em; background: #fff; } .mbsc-ax.mbsc-rtl .mbsc-switch { padding: 0.875em 1em 0.875em 5em; } .mbsc-ax .mbsc-switch-track { right: 1em; width: 3em; height: 1.75em; padding: 0; margin-top: -0.96875em; background: #e5e5e5; border: 0.09375em solid #e5e5e5; border-radius: 1.25em; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mbsc-ax.mbsc-rtl .mbsc-switch-track { right: auto; left: 1em; } .mbsc-ax .mbsc-switch-track:after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: #fff; border-radius: 1.25em; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; } .mbsc-ax .mbsc-switch-track .mbsc-progress-track { margin: 0 0.875em; } .mbsc-ax .mbsc-switch-handle { z-index: 2; top: 50%; left: 50%; width: 1.75em; height: 1.75em; margin: -0.875em 0 0 -0.875em; background: #fff; border-radius: 1.75em; box-shadow: 0 0 1em rgba(0, 0, 0, 0.1), 0 0 0.0625em rgba(0, 0, 0, 0.15), 0 0.125em 0.125em rgba(0, 0, 0, 0.15); -webkit-transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; } .mbsc-ax.mbsc-rtl .mbsc-switch-handle { margin: -0.875em -0.875em 0 0; } .mbsc-ax .mbsc-switch input:checked + .mbsc-switch-track { background: #4cd764; border-color: #4cd764; } .mbsc-ax .mbsc-switch input:checked + .mbsc-switch-track:after { -webkit-transform: scale(0); transform: scale(0); } .mbsc-ax .mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track { border-color: #3f97f6; background: #3f97f6; } .mbsc-ax .mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track { border-color: #90979E; background: #90979E; } .mbsc-ax .mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track { border-color: #43BE5F; background: #43BE5F; } .mbsc-ax .mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track { border-color: #f5504e; background: #f5504e; } .mbsc-ax .mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track { border-color: #f8b042; background: #f8b042; } .mbsc-ax .mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track { border-color: #5BB7C5; background: #5BB7C5; } .mbsc-ax .mbsc-segmented { padding: 0.75em; background-color: #fff; } .mbsc-ax .mbsc-stepper { display: block; } .mbsc-ax .mbsc-segmented-content { height: 2.14285714em; margin-left: -0.07142857em; line-height: 2.14285714em; padding: 0 0.42857em; color: #1272dc; text-transform: capitalize; border: 0.07142857em solid #1272dc; background: #fff; } .mbsc-ax.mbsc-ltr .mbsc-stepper-minus .mbsc-segmented-content, .mbsc-ax.mbsc-ltr .mbsc-segmented-item:first-child .mbsc-segmented-content, .mbsc-ax.mbsc-rtl .mbsc-stepper-plus .mbsc-segmented-content, .mbsc-ax.mbsc-rtl .mbsc-segmented-item:last-child .mbsc-segmented-content { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } .mbsc-ax .mbsc-segmented.mbsc-stepper.mbsc-control-w:before, .mbsc-ax .mbsc-segmented.mbsc-stepper.mbsc-control-w:after { border: 0; } .mbsc-ax.mbsc-ltr .mbsc-stepper-plus .mbsc-segmented-content, .mbsc-ax.mbsc-ltr .mbsc-segmented-item:last-child .mbsc-segmented-content, .mbsc-ax.mbsc-rtl .mbsc-stepper-minus .mbsc-segmented-content, .mbsc-ax.mbsc-rtl .mbsc-segmented-item:first-child .mbsc-segmented-content { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } .mbsc-ax .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content, .mbsc-ax .mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content { background: #1272dc; color: #fff; } .mbsc-ax .mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { background: rgba(18, 114, 220, 0.3); color: #1272dc; } .mbsc-ax .mbsc-stepper-cont { padding: 1.5em 11.75em 1.5em 1em; background: #fff; } .mbsc-ax.mbsc-rtl .mbsc-stepper-cont { padding: 1.5em 1em 1.5em 11.75em; } .mbsc-ax .mbsc-stepper { right: 1em; margin-top: -1em; } .mbsc-ax.mbsc-rtl .mbsc-stepper { right: auto; left: 1em; } .mbsc-ax .mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content, .mbsc-ax .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content, .mbsc-ax .mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content { background: none; color: #c4c4c4; border-color: #c4c4c4; } .mbsc-ax .mbsc-stepper input:disabled { color: #c4c4c4; -webkit-text-fill-color: #c4c4c4; } .mbsc-ax .mbsc-stepper .mbsc-segmented-item { width: 3.25em; } .mbsc-ax .mbsc-segmented input:disabled:checked + .mbsc-segmented-content { background: #dfdfdf; } .mbsc-ax .mbsc-stepper input { color: #333333; width: 3.714286em; left: 3.714286em; z-index: 3; } .mbsc-ax.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(18, 114, 220, 0.15); } .mbsc-ax .mbsc-segmented .mbsc-segmented-primary .mbsc-segmented-content { border-color: #3f97f6; color: #3f97f6; } .mbsc-ax .mbsc-segmented .mbsc-segmented-primary.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #3f97f6; background: rgba(63, 151, 246, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-primary.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #3f97f6; } .mbsc-ax .mbsc-segmented .mbsc-segmented-secondary .mbsc-segmented-content { border-color: #90979E; color: #90979E; } .mbsc-ax .mbsc-segmented .mbsc-segmented-secondary.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #90979E; background: rgba(144, 151, 158, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-secondary.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #90979E; } .mbsc-ax .mbsc-segmented .mbsc-segmented-success .mbsc-segmented-content { border-color: #43BE5F; color: #43BE5F; } .mbsc-ax .mbsc-segmented .mbsc-segmented-success.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #43BE5F; background: rgba(67, 190, 95, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-success.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #43BE5F; } .mbsc-ax .mbsc-segmented .mbsc-segmented-danger .mbsc-segmented-content { border-color: #f5504e; color: #f5504e; } .mbsc-ax .mbsc-segmented .mbsc-segmented-danger.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #f5504e; background: rgba(245, 80, 78, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-danger.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #f5504e; } .mbsc-ax .mbsc-segmented .mbsc-segmented-warning .mbsc-segmented-content { border-color: #f8b042; color: #f8b042; } .mbsc-ax .mbsc-segmented .mbsc-segmented-warning.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #f8b042; background: rgba(248, 176, 66, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-warning.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #f8b042; } .mbsc-ax .mbsc-segmented .mbsc-segmented-info .mbsc-segmented-content { border-color: #5BB7C5; color: #5BB7C5; } .mbsc-ax .mbsc-segmented .mbsc-segmented-info.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: #5BB7C5; background: rgba(91, 183, 197, 0.45); } .mbsc-ax .mbsc-segmented .mbsc-segmented-info.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: #5BB7C5; } .mbsc-ax.mbsc-no-touch .mbsc-segmented-primary.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(63, 151, 246, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-segmented-secondary.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(144, 151, 158, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-segmented-success.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(67, 190, 95, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-segmented-danger.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(245, 80, 78, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-segmented-warning.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(248, 176, 66, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-segmented-info.mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(91, 183, 197, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-primary .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(63, 151, 246, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-secondary .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(144, 151, 158, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-success .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(67, 190, 95, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-danger .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(245, 80, 78, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-warning .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(248, 176, 66, 0.15); } .mbsc-ax.mbsc-no-touch .mbsc-stepper-info .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content { background: rgba(91, 183, 197, 0.15); } .mbsc-ax .mbsc-stepper-primary .mbsc-segmented-content { border-color: #3f97f6; color: #3f97f6; } .mbsc-ax .mbsc-stepper-primary .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #3f97f6; } .mbsc-ax .mbsc-stepper-secondary .mbsc-segmented-content { border-color: #90979E; color: #90979E; } .mbsc-ax .mbsc-stepper-secondary .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #90979E; } .mbsc-ax .mbsc-stepper-success .mbsc-segmented-content { border-color: #43BE5F; color: #43BE5F; } .mbsc-ax .mbsc-stepper-success .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #43BE5F; } .mbsc-ax .mbsc-stepper-danger .mbsc-segmented-content { border-color: #f5504e; color: #f5504e; } .mbsc-ax .mbsc-stepper-danger .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #f5504e; } .mbsc-ax .mbsc-stepper-warning .mbsc-segmented-content { border-color: #f8b042; color: #f8b042; } .mbsc-ax .mbsc-stepper-warning .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #f8b042; } .mbsc-ax .mbsc-stepper-info .mbsc-segmented-content { border-color: #5BB7C5; color: #5BB7C5; } .mbsc-ax .mbsc-stepper-info .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content { background: #5BB7C5; } .mbsc-ax.mbsc-ms-c { background: #f7f7f7; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .mbsc-ax .mbsc-form-group-title + .mbsc-ms-c { margin-top: -1px; } .mbsc-ax .mbsc-ms .mbsc-ms-item { color: #878787; } .mbsc-ax.mbsc-ms-top { border-top: 0; } .mbsc-ax.mbsc-ms-bottom { border-bottom: 0; } .mbsc-ax.mbsc-ms-nosel .mbsc-ms-item, .mbsc-ax .mbsc-ms .mbsc-ms-item-sel { color: #198cff; } .mbsc-ax.mbsc-ms-nosel .mbsc-ms-item.mbsc-active { opacity: 0.5; } .mbsc-ax.mbsc-no-touch .mbsc-ms-item:not(.mbsc-disabled):hover { background: rgba(25, 140, 255, 0.15); } .mbsc-ax.mbsc-ms-more .mbsc-wdg-c.mbsc-w-p { padding: 0; } .mbsc-ax.mbsc-ms-more .mbsc-ms-item { padding: 1em; } .mbsc-ax.mbsc-ms-more .mbsc-ms-item:after { content: ""; border-top: 1px solid #ebebeb; position: absolute; right: 0; left: 1em; bottom: 0; } .mbsc-ax.mbsc-ms-more .mbsc-ms-item:last-child:after { display: none; } .mbsc-ax.mbsc-ms-more .mbsc-ms-ic:after { left: 4em; } .mbsc-ax.mbsc-ms-more-icons .mbsc-ms-ic:after { left: 0; } .mbsc-ax.mbsc-np .mbsc-fr-c { font-size: 1.333334em; } .mbsc-ax .mbsc-np-btn { border-top: 1px solid #ebebeb; border-left: 1px solid #ebebeb; font-size: 1.363637em; height: 2.2em; } .mbsc-ax .mbsc-np-btn:first-child { border-left: 0; } .mbsc-ax .mbsc-np-btn.mbsc-active, .mbsc-ax .mbsc-np-btn-empty { background: #fff; } .mbsc-ax .mbsc-np-btn.mbsc-disabled { color: #ddd; } .mbsc-ax .mbsc-np-ts-h, .mbsc-ax .mbsc-np-ts-m { font-weight: normal; } .mbsc-ax .mbsc-np-del:before { font-size: 1.125em; } .mbsc-ax.mbsc-page { background: #efeff4; color: #333333; } .mbsc-ax a { color: #1272dc; } .mbsc-ax .mbsc-note { border-radius: 0.25em; } .mbsc-ax .mbsc-note, .mbsc-ax .mbsc-note-primary { color: #074b95; background-color: #a0ccfb; } .mbsc-ax .mbsc-note-secondary { color: #454b50; background-color: #c6cace; } .mbsc-ax .mbsc-note-success { color: #1b4d26; background-color: #8fd8a0; } .mbsc-ax .mbsc-note-danger { color: #a10b09; background-color: #faafaf; } .mbsc-ax .mbsc-note-warning { color: #9b6006; background-color: #fcd9a4; } .mbsc-ax .mbsc-note-info { color: #235b64; background-color: #a6d8e0; } .mbsc-ax .mbsc-note-light { color: #4d4d4d; background-color: #fff; } .mbsc-ax .mbsc-note-dark { color: #333333; background-color: #797c7e; } .mbsc-ax .mbsc-range-btn-t, .mbsc-ax .mbsc-range-btn-c { width: auto; display: block; } .mbsc-ax .mbsc-range-btn { position: relative; min-height: 38px; line-height: 38px; padding: 0 14px; font-size: 14px; } .mbsc-ax .mbsc-range-btn-v { position: inherit; top: 0; font-weight: normal; float: right; } .mbsc-ax .mbsc-ltr .mbsc-range-btn { text-align: left; } .mbsc-ax .mbsc-ltr .mbsc-range-btn-v { right: 0; } .mbsc-ax .mbsc-rtl .mbsc-range-btn { text-align: right; } .mbsc-ax .mbsc-rtl .mbsc-range-btn-v { left: 0; } .mbsc-ax .mbsc-range-btn-end { border-bottom: 1px solid #ebebeb; } .mbsc-ax .mbsc-range-btn-end .mbsc-range-btn:before { content: ''; position: absolute; right: 0; left: 1em; top: 0; border-top: 1px solid #ebebeb; } .mbsc-ax .mbsc-range-btn.mbsc-selected .mbsc-range-btn-v { color: #198cff; } .mbsc-ax.mbsc-range .mbsc-cal .mbsc-cal-day.mbsc-selected .mbsc-cal-day-date { background: none; } .mbsc-ax.mbsc-range .mbsc-cal .mbsc-cal-day.mbsc-cal-day-hl .mbsc-cal-day-date { background: #198cff; } .mbsc-ax.mbsc-range .mbsc-cal-day.mbsc-selected:after { content: ''; position: absolute; z-index: -1; top: 5px; left: 0; right: 0; height: 28px; background: #198cff; } .mbsc-ax.mbsc-range .mbsc-cal-has-marks .mbsc-cal-day.mbsc-selected:after { top: 0.1875em; } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day:first-child:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day:last-child:after { left: calc((100% - 28px)/2); } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day:last-child:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day:first-child:after { right: calc((100% - 28px)/2); } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day.mbsc-cal-sel-start:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day.mbsc-cal-sel-end:after { left: calc((100% - 28px)/2); margin-left: 0; } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day.mbsc-cal-sel-end:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day.mbsc-cal-sel-start:after { right: 50%; margin-right: -0.9375em; } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-sel-start:after, .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day:first-child:after, .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-hide-diff .mbsc-cal-day-first:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-sel-end:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day:last-child:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-hide-diff .mbsc-cal-day-last:after { border-top-left-radius: 28px; border-bottom-left-radius: 28px; } .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-sel-end:after, .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-day:last-child:after, .mbsc-ax.mbsc-range .mbsc-ltr .mbsc-cal-hide-diff .mbsc-cal-day-last:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-sel-start:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-day:first-child:after, .mbsc-ax.mbsc-range .mbsc-rtl .mbsc-cal-hide-diff .mbsc-cal-day-first:after { border-top-right-radius: 28px; border-bottom-right-radius: 28px; } .mbsc-ax.mbsc-sc.mbsc-fr-top .mbsc-fr-w, .mbsc-ax.mbsc-sc.mbsc-fr-bottom .mbsc-fr-w { background: #fff; } .mbsc-ax.mbsc-calendar .mbsc-fr-persp .mbsc-fr-w { background-color: #fff; border: 1px solid #ebebeb; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .mbsc-ax.mbsc-fr-top .mbsc-fr-persp .mbsc-fr-w, .mbsc-ax.mbsc-fr-bottom .mbsc-fr-persp .mbsc-fr-w, .mbsc-ax.mbsc-fr-left .mbsc-fr-persp .mbsc-fr-w, .mbsc-ax.mbsc-fr-right .mbsc-fr-persp .mbsc-fr-w { box-shadow: none; border-radius: 0; border: 0; } .mbsc-ax.mbsc-sc.mbsc-fr-top .mbsc-fr-btn-cont, .mbsc-ax.mbsc-sc.mbsc-fr-bottom .mbsc-fr-btn-cont { border-bottom: 1px solid #ebebeb; } .mbsc-ax.mbsc-calendar.mbsc-fr-top .mbsc-fr-btn-cont, .mbsc-ax.mbsc-calendar.mbsc-fr-bottom .mbsc-fr-btn-cont { border-bottom: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-top .mbsc-sc-whl-l, .mbsc-ax.mbsc-fr-bottom .mbsc-sc-whl-l { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-top .mbsc-sc-whl-o, .mbsc-ax.mbsc-fr-bottom .mbsc-sc-whl-o { background: -webkit-linear-gradient(#fff, rgba(209, 213, 219, 0) 52%, rgba(209, 213, 219, 0) 48%, #fff); background: linear-gradient(#fff, rgba(209, 213, 219, 0) 52%, rgba(209, 213, 219, 0) 48%, #fff); } .mbsc-ax.mbsc-fr-top .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c, .mbsc-ax.mbsc-fr-bottom .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c { background: #fff; } .mbsc-ax.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-o { background: -webkit-linear-gradient(#fff, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 48%, #fff); background: linear-gradient(#fff, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 48%, #fff); } .mbsc-ax.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c { background: #fff; } .mbsc-ax .mbsc-sc-lbl { color: #ababab; line-height: 2.5em; } .mbsc-ax .mbsc-sc-whl-gr-c { padding: 0 3%; } .mbsc-ax .mbsc-sc-whl-gr { padding: 0.833333em; } .mbsc-ax .mbsc-sc-lbl-v { margin-bottom: -1.666667em; } .mbsc-ax .mbsc-sc-lbl-v .mbsc-sc-whl-gr { padding-top: 2.5em; padding-bottom: 2.5em; } .mbsc-ax .mbsc-sc-whl-l, .mbsc-ax.mbsc-calendar .mbsc-sc-whl-l { display: block; margin: 0 -0.833333em; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; z-index: 3; } .mbsc-ax .mbsc-sc-whl-w .mbsc-sc-whl-l { display: none; } .mbsc-ax .mbsc-sc-whl-o, .mbsc-ax.mbsc-calendar .mbsc-sc-whl-o { display: block; background: -webkit-linear-gradient(#fff, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #fff); background: linear-gradient(#fff, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #fff); } .mbsc-ax .mbsc-sc-itm { padding: 0 0.5em; color: #333333; font-size: 14px; } .mbsc-ax.mbsc-left-center .mbsc-sc-itm { display: flex; justify-content: flex-start; align-items: center; } .mbsc-ax.mbsc-center-center .mbsc-sc-itm { display: flex; justify-content: center; align-items: center; } .mbsc-ax .mbsc-sc-itm.mbsc-active { background: rgba(25, 140, 255, 0.2); } .mbsc-ax .mbsc-sc-itm-sel { color: #198cff; } .mbsc-ax .mbsc-sc-whl-gr-3d-c .mbsc-sc-whl-l { z-index: 3; } .mbsc-ax .mbsc-sc-whl-gr-3d .mbsc-sc-itm { color: #333333; } .mbsc-ax .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c { margin: 0 -0.166667em; } .mbsc-ax .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c, .mbsc-ax.mbsc-calendar .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c { background: #f7f7f7; } .mbsc-ax .mbsc-sc-whl-gr-3d .mbsc-sc-itm-3d { font-size: 1.666666em; color: #666; } .mbsc-ax .mbsc-sc-cp .mbsc-sc-whl .mbsc-sc-itm { text-align: center; } .mbsc-ax .mbsc-sc-cp .mbsc-sc-whl-w { padding: 2.666667em 0; } .mbsc-ax .mbsc-sc-btn { color: #198cff; height: 2.666667em !important; line-height: 2.666667em !important; opacity: 1; } .mbsc-ax .mbsc-sc-btn:before { font-size: 2em; } .mbsc-ax .mbsc-sc-btn.mbsc-active:before { opacity: 0.5; } .mbsc-ax.mbsc-sel-multi .mbsc-sc-whl-l { display: none; } .mbsc-ax .mbsc-sc-whl-multi .mbsc-sc-whl-o { display: none; } .mbsc-ax .mbsc-sc-whl-multi .mbsc-sc-itm { padding: 0 1.818181em; } .mbsc-ax.mbsc-sel-multi .mbsc-sc-itm { color: #333333; } .mbsc-ax .mbsc-sc-whl-multi .mbsc-sc-itm-sel { color: #198cff; } .mbsc-ax .mbsc-sc-whl-multi .mbsc-sc-itm-sel:before { font-size: 12px; } .mbsc-ax .mbsc-sc-whl-gr-3d .mbsc-sc-whl-multi .mbsc-sc-whl-o { display: block; } .mbsc-ax.mbsc-sel-multi .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c { visibility: hidden; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-whl-o { display: none; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-whl-l { border-color: #ccc; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-lbl-v { margin-bottom: -2.5em; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-lbl { padding: 0 1.666667em; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-itm { font-size: 1.333334em; padding: 0 1.25em; color: #333333; } .mbsc-ax.mbsc-fr-pointer.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover { background: rgba(25, 140, 255, 0.2); } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-whl-multi .mbsc-sc-itm { padding: 0 2.5em; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-itm-sel { color: #198cff; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-itm-sel:before { font-size: 2em; } .mbsc-ax.mbsc-fr-pointer .mbsc-ltr .mbsc-sc-itm-sel:before { left: 0.125em; } .mbsc-ax.mbsc-fr-pointer .mbsc-rtl .mbsc-sc-itm-sel:before { right: 0.125em; } .mbsc-ax .mbsc-sc-whl .mbsc-sel-gr { padding: 0; color: #b3b3b3; font-weight: normal; font-size: 18px; text-align: center; } .mbsc-ax .mbsc-sel-filter-cont.mbsc-input { font-size: 14px; padding: 14px; background: #fff; } .mbsc-ax.mbsc-fr-center .mbsc-sel-filter-cont { background: #fff; } .mbsc-ax .mbsc-sel-filter-clear { width: 1.75em; right: 0.5em; color: #8c8c8c; font-size: 1em; } .mbsc-ax.mbsc-sel .mbsc-rtl .mbsc-sel-filter-clear { left: 0.5em; } .mbsc-ax .mbsc-sel-filter-cont.mbsc-control-w:before, .mbsc-ax .mbsc-sel-filter-cont.mbsc-control-w:after { border: none; } .mbsc-ax .mbsc-sel-gr-whl .mbsc-sc-itm { padding: 0 0.5em; } .mbsc-ax .mbsc-sel-gr-whl .mbsc-sc-itm::before { display: none; } .mbsc-ax.mbsc-fr-pointer .mbsc-sc-whl .mbsc-sel-gr { color: #333333; font-weight: 700; font-size: 1em; padding: 0 1.666667em; } .mbsc-ax.mbsc-fr-pointer .mbsc-sel-gr-whl .mbsc-sc-itm { padding: 0 1.25em; } .mbsc-ax.mbsc-fr-pointer.mbsc-sel .mbsc-ltr .mbsc-sc-whl-w + .mbsc-sc-whl-w { border-left: 1px solid #ebebeb; } .mbsc-ax.mbsc-fr-pointer.mbsc-sel .mbsc-rtl .mbsc-sc-whl-w + .mbsc-sc-whl-w { border-right: 1px solid #ebebeb; } .mbsc-ax.mbsc-timer .mbsc-sc-whl-gr { padding: 0.833333em; } .mbsc-ax.mbsc-timer .mbsc-sc-lbl { z-index: 3; top: 50%; bottom: auto; right: 0; left: auto; width: auto; margin-top: -0.75em; padding: 0 0.55em; color: #198cff; font-size: 1.666667em; line-height: 1.5em; text-transform: lowercase; } .mbsc-ax.mbsc-timer .mbsc-rtl .mbsc-sc-lbl { left: 0; right: auto; } .mbsc-ax.mbsc-timer .mbsc-sc-whl-gr-3d .mbsc-sc-lbl { -webkit-transform: translateZ(88px); transform: translateZ(88px); } .mbsc-ax.mbsc-timer .mbsc-sc-itm { text-overflow: clip; } .mbsc-ax.mbsc-timer .mbsc-sc-lbl-v { margin: 0; } .mbsc-ax .mbsc-sc-lbl-v .mbsc-timer-lbl { display: inline; visibility: hidden; padding-left: 0.5em; font-size: 0.90909em; text-transform: lowercase; } .mbsc-ax.mbsc-ts .mbsc-sc-lbl-v { margin: 0; } .mbsc-ax.mbsc-ts .mbsc-sc-lbl-v .mbsc-ts-lbl { display: inline; visibility: hidden; padding-left: 0.5em; font-size: 0.90909em; text-transform: lowercase; } .mbsc-ax.mbsc-ts .mbsc-sc-whl-gr { padding: 0.833333em; } .mbsc-ax.mbsc-ts .mbsc-sc-lbl { padding: 0 0.55em; margin-top: -0.75em; left: auto; top: 50%; right: 0; width: auto; z-index: 3; color: #198cff; font-size: 1.666667em; line-height: 1.5em; text-transform: lowercase; } .mbsc-ax.mbsc-ts .mbsc-rtl .mbsc-sc-lbl { left: 0; right: auto; } .mbsc-ax.mbsc-ts .mbsc-sc-whl-gr-3d .mbsc-sc-lbl { -webkit-transform: translateZ(88px); transform: translateZ(88px); } /*plugins end*/