@charset "UTF-8"; /** * * PlaneUI * * A HTML5 Web Application UI Kit. * * @fileName planeui.css * @version 0.1.0 * @auther Pandao * @license MIT license * @link https://github.com/pandao/planeui * @copyright 2014 All rights reserved. */ /*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ================ Basic ================ */ @font-face { font-family: 'planeui-logo'; src: url("../fonts/planeui-logo.eot?-rfliw7"); src: url("../fonts/planeui-logo.eot?#iefix-rfliw7") format("embedded-opentype"), url("../fonts/planeui-logo.ttf?-rfliw7") format("truetype"), url("../fonts/planeui-logo.woff?-rfliw7") format("woff"), url("../fonts/planeui-logo.svg?-rfliw7#planeui-logo") format("svg"); font-weight: normal; font-style: normal; } [class*=pui-logo], [class*=planeui-logo] { font-family: 'planeui-logo'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: inherit; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pui-logo:before, .pui-logo-1x:before, .pui-logo-2x:before, .pui-logo-3x:before, .pui-logo-4x:before, .pui-logo-5x:before, .pui-logo-6x:before, .pui-logo-7x:before, .pui-logo-8x:before, .planeui-logo:before, .planeui-logo-1x:before, .planeui-logo-2x:before, .planeui-logo-3x:before, .planeui-logo-4x:before, .planeui-logo-5x:before, .planeui-logo-6x:before, .planeui-logo-7x:before, .planeui-logo-8x:before { content: "\e600"; } .pui-logo-lg, .planeui-logo-lg { font-size: 1.4em; } .pui-logo-lg:before, .planeui-logo-lg:before { content: "\e600"; } .pui-logo-1x, .planeui-logo-1x { font-size: 1em; } .pui-logo-2x, .planeui-logo-2x { font-size: 2em; } .pui-logo-3x, .planeui-logo-3x { font-size: 3em; } .pui-logo-4x, .planeui-logo-4x { font-size: 4em; } .pui-logo-5x, .planeui-logo-5x { font-size: 5em; } .pui-logo-6x, .planeui-logo-6x { font-size: 6em; } .pui-logo-7x, .planeui-logo-7x { font-size: 7em; } .pui-logo-8x, .planeui-logo-8x { font-size: 8em; } /* font-face: OpenSans-Regular-webfont */ @font-face { font-style: normal; font-weight: normal; font-family: 'OpenSansRegular'; src: url("../fonts/OpenSans-Regular-webfont.eot"); src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#entypo") format("svg"); } /* viewport settings */ @-webkit-viewport { width: device-width; user-zoom: fixed; } @-moz-viewport { width: device-width; user-zoom: fixed; } @media (max-width: 1024px) { @-ms-viewport { width: device-width; user-zoom: fixed; } } @-o-viewport { width: device-width; user-zoom: fixed; } @viewport { width: device-width; user-zoom: fixed; } /* reset */ * { margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::selection { background: #39f; color: #fff; text-shadow: none; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } audio, canvas, video { display: inline-block; } html { font-size: 62.5%; -webkit-text-size-adjust: 100%; /* Chrome 27+ */ -moz-text-size-adjust: 100%; /* Firefox */ text-size-adjust: 100%; /* None yet */ -webkit-tap-highlight-color: transparent; } body { color: #444; font-size: 12px; font-size: 1.2rem; /* 1.2rem=12px, 1rem=10px */ line-height: 1.9; text-align: center; position: relative; background: #ffffff; } div { text-align: left; } body, button, input, select, textarea, strong, p, span, small { font-family: "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", STXihei, "华文细黑", STHeiti, "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif; } input, button, select, textarea { margin: 0; vertical-align: middle; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], select, textarea { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } button, input[type="button"], input[type="reset"], input[type="submit"], select { cursor: pointer; } button, input { line-height: normal; } input, textarea, button { outline: none; } input:focus, input:active, textarea:focus, textarea:active, button:focus, button:active { outline: none; } input, textarea { text-align: left; } textarea { resize: none; } input[type="range"] { background: #ddd; height: 3px; } a, a:link, a:visited { color: #555; text-decoration: none; } html.no-touch a:hover, a.hover { color: #1C71FE; text-decoration: none; } img { border: none; vertical-align: middle; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } ul, ol { margin-top: 0; padding-left: 18px; padding-left: 1.8rem; } ul > li > ul, ol > li > ol { margin-bottom: 0; } ul, ol, dl { margin-bottom: 15px; margin-bottom: 1.5rem; } ol { *margin-left: 5px; /* 解决IE7下数字序号被盖住的问题 */ } dt { font-weight: bold; } p { margin-bottom: 0.6rem; } kbd { padding: 1px 3px; font-size: 90%; color: #fff; background-color: #333; -webkit-border-radius: 3px; border-radius: 3px; } code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Microsoft YaHei", "Hiragino Sans GB", "Courier New", monospace; } pre { color: #444; line-height: 1.5; display: block; padding: 6px; padding: 0.6rem; margin: 15px auto; margin: 1.5rem auto; word-break: break-all; word-wrap: break-word; border: 1px solid #ccc; -webkit-border-radius: 4px; border-radius: 4px; background-color: #f6f6f6; } p code { margin: 0 5px; margin: 0 0.5rem; text-align: center; } abbr[title], dfn[title] { color: #3BA03B; cursor: help; border-bottom: 1px dotted #777; } address { line-height: 1.5; font-style: normal; } small, .small { font-size: 12px; font-size: 1rem; font-size: 1.2rem\9; color: #999; font-weight: normal; } h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small { font-size: 70%; margin-left: 10ox; margin-left: 1rem; } mark, .mark, .highlight { padding: 2px 3px; background: #ffffcc; -webkit-border-radius: 4px; border-radius: 4px; } p mark, p .mark { margin: 0 5px; margin: 0 0.5rem; } q, blockquote { font-style: italic; } blockquote { font-size: 14px; font-size: 1.4rem; padding: 10px 12px; padding: 1rem 1.2rem; margin: 15px 0; margin: 1.5rem 0; border-left: 5px solid #eee; } blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; } blockquote footer, blockquote small, blockquote .small { color: #999; display: block; font-size: 80%; line-height: 1.5; } table { display: table; table-layout: fixed; border-spacing: 0; border-collapse: collapse; } thead { display: table-header-group; vertical-align: middle; } tfoot { vertical-align: middle; } tbody { display: table-row-group; } tr { display: table-row; } td, th { text-align: left; display: table-cell; } th { font-weight: bold; } hr { height: 0px; margin: 15px auto; margin: 1.5rem auto; border: none; border-bottom: 1px solid #ddd; _display: block; _overflow: hidden; } iframe { border: none; } form { margin: 15px 0; margin: 1.5rem 0; } fieldset { margin: 15px auto; margin: 1.5rem auto; padding: 6px 10px 10px; padding: 0.6rem 1rem 1rem; border: 1px solid #eee; } legend { border: 0; font-size: 15px; font-size: 1.5rem; padding: 0 0.5rem; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; margin-bottom: 0.5rem; } /* scrollbar style for webkit */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-button { height: 0; width: 0; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; } ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } ::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal, ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal, ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { border-style: solid; border-color: transparent; border-radius: 2px; } ::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal { background-clip: padding-box; background-color: transparent; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); background-clip: padding-box; background-color: rgba(0, 0, 0, 0.2); min-height: 28px; padding-top: 100px; } ::-webkit-scrollbar-thumb:hover { -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb:active { -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.5); } ::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal, ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { border-width: 0; } ::-webkit-scrollbar-track:hover { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-track:active { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.05); } /* ================ Basic & Classes ================ */ /* basic & classes */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clear, .pui-clear { *zoom: 1; /* for IE 6/7 */ } .clear:before, .clear:after, .pui-clear:before, .pui-clear:after { height: 0; font-size: 0; visibility: hidden; display: table; content: " "; line-height: 0; /* for Opera */ } .clear:after, .pui-clear:after { clear: both; } .pui-cursor-default { cursor: default !important; } .pui-cursor-pointer { cursor: pointer !important; } .pui-cursor-undrop { cursor: no-drop !important; } .pui-cursor-disabled { cursor: not-allowed !important; } .pui-cursor-wait { cursor: wait !important; } .pui-cursor-text { cursor: text !important; } .pui-cursor-move { cursor: move !important; } .pui-cursor-help { cursor: help !important; } .pui-cursor-progress { cursor: progress !important; } .pui-cursor-auto { cursor: auto !important; } .pui-cursor-crosshair { cursor: crosshair !important; } .pui-cursor-e-resize { cursor: e-resize !important; } .pui-cursor-ne-resize { cursor: ne-resize !important; } .pui-cursor-nw-resize { cursor: nw-resize !important; } .pui-cursor-n-resize { cursor: n-resize !important; } .pui-cursor-se-resize { cursor: se-resize !important; } .pui-cursor-sw-resize { cursor: sw-resize !important; } .pui-cursor-s-resize { cursor: s-resize !important; } .pui-cursor-w-resize { cursor: w-resize !important; } .pui-link { color: #0093F2 !important; } .pui-underline, html.no-touch .pui-hover-underline:hover, .pui-hover-underline.hover { text-decoration: underline !important; } .pui-unlink { color: #444 !important; } html.no-touch .pui-unlink:hover, .pui-unlink.hover { color: red !important; cursor: not-allowed !important; text-decoration: line-through !important; } .pui-resize-none { resize: none !important; } .pui-resize-both { resize: both !important; } .pui-resize-x { resize: horizontal !important; } .pui-resize-y { resize: vertical !important; } .pui-hr-dashed { border-bottom: 1px dashed #ddd !important; } .pui-margin-none { margin: 0 !important; } .pui-margin-top-none { margin-top: 0 !important; } .pui-margin-right-none { margin-right: 0 !important; } .pui-margin-bottom-none { margin-bottom: 0 !important; } .pui-margin-left-none { margin-left: 0 !important; } .pui-padding-none { padding: 0 !important; } .pui-padding-top-none { padding-top: 0 !important; } .pui-padding-right-none { padding-right: 0 !important; } .pui-padding-bottom-none { padding-bottom: 0 !important; } .pui-padding-left-none { padding-left: 0 !important; } /* Positions */ .pui-pos-relative, .pui-position-relative { position: relative !important; } .pui-pos-absolute, .pui-position-absolute { position: absolute !important; } .pui-pos-fixed, .pui-position-fixed { position: fixed !important; } .pui-pos-static, .pui-position-static { position: static !important; } .pui-pos-tl, .pui-position-tl { top: 0 !important; left: 0 !important; bottom: auto !important; right: auto !important; } .pui-pos-tr, .pui-position-tr { top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; } .pui-pos-bl, .pui-position-bl { bottom: 0 !important; left: 0 !important; top: auto !important; right: auto !important; } .pui-pos-br, .pui-position-br { bottom: 0 !important; right: 0 !important; top: auto !important; left: auto !important; } /* code pre */ code, .pui-code, .pui-command, .pui-command-line { color: #fff; padding: 2px 4px; padding: 0.2rem 0.4rem; font-size: 12px; font-size: 1.2rem; -webkit-border-radius: 4px; border-radius: 4px; background-color: #7CD179; } .pui-pre-scrollable { height: 240px; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .pui-scrollable-vertical { height: 240px; overflow: auto; overflow-y: scroll; resize: vertical; -webkit-overflow-scrolling: touch; } .pui-scrollable-horizontal { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } /* float & align */ .pui-left { float: left !important; } .pui-right { float: right !important; } .pui-float-none { float: none !important; } .pui-center, .pui-block-center, .pui-center-all > *, .pui-block-center-all > * { clear: both !important; display: inherit !important; margin-right: auto !important; margin-left: auto !important; } .pui-block-center, .pui-block-center-all > * { display: block !important; } /* display */ .pui-show, .pui-show-all > * { display: block !important; } .pui-hide, .pui-hide-all > * { display: none !important; visibility: hidden !important; } .pui-visible, .pui-visible-all > * { visibility: visible !important; } .pui-invisible { visibility: hidden !important; } .pui-block, .pui-block-all > * { display: block !important; } .pui-inline, .pui-inline-all > * { display: inline !important; } .pui-inline-block, .pui-inline-block-all > * { display: inline-block !important; } .pui-hover-display:hover { display: block !important; } .pui-hover-display-inline:hover { display: inline-block !important; } .pui-hover-display-none:hover { display: none !important; } /* opacity */ .pui-transparent { opacity: 0 !important; filter: alpha(opacity=0) !important; } /* overflow */ .pui-overflow-auto { overflow: auto !important; } .pui-overflow-inherit { overflow: inherit !important; } .pui-overflow-hidden { overflow: hidden !important; } .pui-overflow-scroll { overflow: scroll !important; } .pui-overflow-visible { overflow: visible !important; } .pui-overflow-x-auto { overflow-x: auto !important; } .pui-overflow-x-inherit { overflow-x: inherit !important; } .pui-overflow-x-hidden { overflow-x: hidden !important; } .pui-overflow-x-scroll { overflow-x: scroll !important; } .pui-overflow-x-visible { overflow-x: visible !important; } .pui-overflow-y-auto { overflow-y: auto !important; } .pui-overflow-y-inherit { overflow-y: inherit !important; } .pui-overflow-y-hidden { overflow-y: hidden !important; } .pui-overflow-y-scroll { overflow-y: scroll !important; } .pui-overflow-y-visible { overflow-y: visible !important; } /* box-shadow */ .pui-box-shadow { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.18) !important; /* Webkit browsers */ box-shadow: 0 0 2px rgba(0, 0, 0, 0.18) !important; /* IE9+, News */ } .pui-box-shadow-plus { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.18) !important; /* Webkit browsers */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.18) !important; /* IE9+, News */ } .pui-box-shadow-large { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.18) !important; /* Webkit browsers */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.18) !important; /* IE9+, News */ } .pui-box-shadow-none { -webkit-box-shadow: none !important; /* Webkit browsers */ box-shadow: none !important; /* IE9+, News */ } .pui-box-shadow-top { -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.18) !important; /* Webkit browsers */ box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.18) !important; /* IE9+, News */ } .pui-box-shadow-bottom { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important; /* Webkit browsers */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important; /* IE9+, News */ } /* box shadow colors */ .pui-box-shadow-gary { -webkit-box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-gary-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(170, 170, 170, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(170, 170, 170, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-primary { -webkit-box-shadow: 1px 1px 1px rgba(0, 142, 229, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(0, 142, 229, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-primary-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(0, 79, 127, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(0, 79, 127, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-secondary { -webkit-box-shadow: 1px 1px 1px rgba(59, 180, 242, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(59, 180, 242, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-secondary-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(12, 128, 187, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(12, 128, 187, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-info { -webkit-box-shadow: 1px 1px 1px rgba(46, 170, 198, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(46, 170, 198, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-info-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(27, 99, 115, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(27, 99, 115, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-success { -webkit-box-shadow: 1px 1px 1px rgba(113, 180, 114, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(113, 180, 114, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-success-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(66, 125, 67, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(66, 125, 67, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-warning { -webkit-box-shadow: 1px 1px 1px rgba(255, 183, 77, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(255, 183, 77, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-warning-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(230, 137, 0, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(230, 137, 0, 0.8) !important; /* IE9+, News */ } .pui-box-shadow-error { -webkit-box-shadow: 1px 1px 1px rgba(232, 116, 103, 0.5) !important; /* Webkit browsers */ box-shadow: 1px 1px 1px rgba(232, 116, 103, 0.5) !important; /* IE9+, News */ } .pui-box-shadow-error-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(202, 48, 31, 0.8) !important; /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(202, 48, 31, 0.8) !important; /* IE9+, News */ } /* blockquote */ .pui-blockquote-right { padding-right: 15px; padding-right: 1.5rem; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0; } /* status */ .pui-gary { background-color: #DDDDDD !important; } .pui-primary { background-color: #008EE5 !important; } .pui-secondary { background-color: #3BB4F2 !important; } .pui-info { background-color: #2EAAC6 !important; } .pui-success { background-color: #71B472 !important; } .pui-warning { background-color: #FFB74D !important; } .pui-error { background-color: #E87467 !important; } /* background */ .pui-bg-color-none, *.pui-bg-color-none { background-color: none !important; } .pui-bg-color-white, *.pui-bg-color-white { background-color: white !important; } .pui-bg-color-red, *.pui-bg-color-red { background-color: red !important; } .pui-bg-color-green, *.pui-bg-color-green { background-color: green !important; } .pui-bg-color-orange, *.pui-bg-color-orange { background-color: orange !important; } .pui-bg-color-gray, *.pui-bg-color-gray { background-color: gray !important; } .pui-bg-color-black, *.pui-bg-color-black { background-color: black !important; } .pui-bg-color-yellow, *.pui-bg-color-yellow { background-color: yellow !important; } .pui-bg-color-purple, *.pui-bg-color-purple { background-color: purple !important; } .pui-bg-color-brown, *.pui-bg-color-brown { background-color: brown !important; } .pui-bg-color-beige, *.pui-bg-color-beige { background-color: beige !important; } .pui-bg-color-khaki, *.pui-bg-color-khaki { background-color: khaki !important; } .pui-bg-color-navy, *.pui-bg-color-navy { background-color: navy !important; } .pui-bg-color-pink, *.pui-bg-color-pink { background-color: pink !important; } .pui-bg-color-plum, *.pui-bg-color-plum { background-color: plum !important; } .pui-bg-color-teal, *.pui-bg-color-teal { background-color: teal !important; } .pui-bg-color-aqua, *.pui-bg-color-aqua { background-color: aqua !important; } .pui-bg-color-silver, *.pui-bg-color-silver { background-color: silver !important; } .pui-bg-color-fuchsia, *.pui-bg-color-fuchsia { background-color: fuchsia !important; } .pui-bg-color-maroon, *.pui-bg-color-maroon { background-color: maroon !important; } .pui-bg-color-olive, *.pui-bg-color-olive { background-color: olive !important; } .pui-bg-color-lime, *.pui-bg-color-lime { background-color: lime !important; } .pui-bg-none { background: none !important; } .pui-bg-transparent { background: transparent !important; } .pui-bg-scroll { background-attachment: scroll !important; } .pui-bg-fixed { background-attachment: fixed !important; } .pui-bg-pos-center { background-position: center center !important; } .pui-bg-pos-cl { background-position: center left !important; } .pui-bg-pos-cr { background-position: center right !important; } .pui-bg-pos-tl { background-position: top left !important; } .pui-bg-pos-tr { background-position: top right !important; } .pui-bg-pos-tc { background-position: top center !important; } .pui-bg-pos-bl { background-position: bottom left !important; } .pui-bg-pos-br { background-position: bottom right !important; } .pui-bg-pos-bc { background-position: bottom center !important; } .pui-bg-repeat { background-repeat: repeat !important; } .pui-bg-repeat-x { background-repeat: repeat-x !important; } .pui-bg-repeat-y { background-repeat: repeat-y !important; } .pui-bg-no-repeat { background-repeat: no-repeat !important; } .pui-bg-cover { background-size: cover !important; } .pui-blur, .pui-bg-blur, .pui-blur-all > * { filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=12, MakeShadow=false); /* IE6~IE9 */ -webkit-filter: blur(12px); /* Chrome, Opera, iOS, Safari */ -moz-filter: blur(12px); /* Firefox(Old) */ -ms-filter: blur(12px); filter: blur(12px); } /* REM width */ .pui-width-1rem { width: 1rem; } .pui-width-2rem { width: 2rem; } .pui-width-3rem { width: 3rem; } .pui-width-4rem { width: 4rem; } .pui-width-5rem { width: 5rem; } .pui-width-6rem { width: 6rem; } .pui-width-7rem { width: 7rem; } .pui-width-8rem { width: 8rem; } .pui-width-9rem { width: 9rem; } .pui-width-10rem { width: 10rem; } .pui-width-11rem { width: 11rem; } .pui-width-12rem { width: 12rem; } .pui-width-13rem { width: 13rem; } .pui-width-14rem { width: 14rem; } .pui-width-15rem { width: 15rem; } .pui-width-16rem { width: 16rem; } .pui-width-17rem { width: 17rem; } .pui-width-18rem { width: 18rem; } .pui-width-19rem { width: 19rem; } .pui-width-20rem { width: 20rem; } .pui-width-21rem { width: 21rem; } .pui-width-22rem { width: 22rem; } .pui-width-23rem { width: 23rem; } .pui-width-24rem { width: 24rem; } .pui-width-25rem { width: 25rem; } .pui-width-26rem { width: 26rem; } .pui-width-27rem { width: 27rem; } .pui-width-28rem { width: 28rem; } .pui-width-29rem { width: 29rem; } .pui-width-30rem { width: 30rem; } .pui-width-31rem { width: 31rem; } .pui-width-32rem { width: 32rem; } .pui-width-33rem { width: 33rem; } .pui-width-34rem { width: 34rem; } .pui-width-35rem { width: 35rem; } .pui-width-36rem { width: 36rem; } .pui-width-37rem { width: 37rem; } .pui-width-38rem { width: 38rem; } .pui-width-39rem { width: 39rem; } .pui-width-40rem { width: 40rem; } .pui-width-41rem { width: 41rem; } .pui-width-42rem { width: 42rem; } .pui-width-43rem { width: 43rem; } .pui-width-44rem { width: 44rem; } .pui-width-45rem { width: 45rem; } .pui-width-46rem { width: 46rem; } .pui-width-47rem { width: 47rem; } .pui-width-48rem { width: 48rem; } .pui-width-49rem { width: 49rem; } .pui-width-50rem { width: 50rem; } .pui-width-51rem { width: 51rem; } .pui-width-52rem { width: 52rem; } .pui-width-53rem { width: 53rem; } .pui-width-54rem { width: 54rem; } .pui-width-55rem { width: 55rem; } .pui-width-56rem { width: 56rem; } .pui-width-57rem { width: 57rem; } .pui-width-58rem { width: 58rem; } .pui-width-59rem { width: 59rem; } .pui-width-60rem { width: 60rem; } .pui-width-61rem { width: 61rem; } .pui-width-62rem { width: 62rem; } .pui-width-63rem { width: 63rem; } .pui-width-64rem { width: 64rem; } /* REM height */ .pui-height-1rem { height: 1rem; } .pui-height-2rem { height: 2rem; } .pui-height-3rem { height: 3rem; } .pui-height-4rem { height: 4rem; } .pui-height-5rem { height: 5rem; } .pui-height-6rem { height: 6rem; } .pui-height-7rem { height: 7rem; } .pui-height-8rem { height: 8rem; } .pui-height-9rem { height: 9rem; } .pui-height-10rem { height: 10rem; } .pui-height-11rem { height: 11rem; } .pui-height-12rem { height: 12rem; } .pui-height-13rem { height: 13rem; } .pui-height-14rem { height: 14rem; } .pui-height-15rem { height: 15rem; } .pui-height-16rem { height: 16rem; } .pui-height-17rem { height: 17rem; } .pui-height-18rem { height: 18rem; } .pui-height-19rem { height: 19rem; } .pui-height-20rem { height: 20rem; } .pui-height-21rem { height: 21rem; } .pui-height-22rem { height: 22rem; } .pui-height-23rem { height: 23rem; } .pui-height-24rem { height: 24rem; } .pui-height-25rem { height: 25rem; } .pui-height-26rem { height: 26rem; } .pui-height-27rem { height: 27rem; } .pui-height-28rem { height: 28rem; } .pui-height-29rem { height: 29rem; } .pui-height-30rem { height: 30rem; } .pui-height-31rem { height: 31rem; } .pui-height-32rem { height: 32rem; } .pui-height-33rem { height: 33rem; } .pui-height-34rem { height: 34rem; } .pui-height-35rem { height: 35rem; } .pui-height-36rem { height: 36rem; } .pui-height-37rem { height: 37rem; } .pui-height-38rem { height: 38rem; } .pui-height-39rem { height: 39rem; } .pui-height-40rem { height: 40rem; } .pui-height-41rem { height: 41rem; } .pui-height-42rem { height: 42rem; } .pui-height-43rem { height: 43rem; } .pui-height-44rem { height: 44rem; } .pui-height-45rem { height: 45rem; } .pui-height-46rem { height: 46rem; } .pui-height-47rem { height: 47rem; } .pui-height-48rem { height: 48rem; } .pui-height-49rem { height: 49rem; } .pui-height-50rem { height: 50rem; } .pui-height-51rem { height: 51rem; } .pui-height-52rem { height: 52rem; } .pui-height-53rem { height: 53rem; } .pui-height-54rem { height: 54rem; } .pui-height-55rem { height: 55rem; } .pui-height-56rem { height: 56rem; } .pui-height-57rem { height: 57rem; } .pui-height-58rem { height: 58rem; } .pui-height-59rem { height: 59rem; } .pui-height-60rem { height: 60rem; } .pui-height-61rem { height: 61rem; } .pui-height-62rem { height: 62rem; } .pui-height-63rem { height: 63rem; } .pui-height-64rem { height: 64rem; } /* Material Design Z-Depth */ .pui-z-depth-1 { -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important; /* Webkit browsers */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important; /* IE9+, News */ } .pui-z-depth-2 { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24) !important; /* Webkit browsers */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24) !important; /* IE9+, News */ } .pui-z-depth-3 { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) !important; /* Webkit browsers */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) !important; /* IE9+, News */ } .pui-z-depth-4 { -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important; /* Webkit browsers */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important; /* IE9+, News */ } .pui-z-depth-5 { -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important; /* Webkit browsers */ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important; /* IE9+, News */ } .pui-z-depth-6 { -webkit-box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important; /* Webkit browsers */ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important; /* IE9+, News */ } /* Material Design colors */ .pui-bg-red-50 { color: #fff !important; border-color: #FFEBEE !important; background-color: #FFEBEE !important; } .pui-text-red-50 { color: #FFEBEE !important; } .pui-border-red-50 { border-color: #FFEBEE !important; } .pui-bg-red-100 { color: #fff !important; border-color: #FFCDD2 !important; background-color: #FFCDD2 !important; } .pui-text-red-100 { color: #FFCDD2 !important; } .pui-border-red-100 { border-color: #FFCDD2 !important; } .pui-bg-red-200 { color: #fff !important; border-color: #EF9A9A !important; background-color: #EF9A9A !important; } .pui-text-red-200 { color: #EF9A9A !important; } .pui-border-red-200 { border-color: #EF9A9A !important; } .pui-bg-red-300 { color: #fff !important; border-color: #E57373 !important; background-color: #E57373 !important; } .pui-text-red-300 { color: #E57373 !important; } .pui-border-red-300 { border-color: #E57373 !important; } .pui-bg-red-400 { color: #fff !important; border-color: #EF5350 !important; background-color: #EF5350 !important; } .pui-text-red-400 { color: #EF5350 !important; } .pui-border-red-400 { border-color: #EF5350 !important; } .pui-bg-red, .pui-bg-red-500 { color: #fff !important; border-color: #F44336 !important; background-color: #F44336 !important; } .pui-text-red, .pui-text-red-500 { color: #F44336 !important; } .pui-border-red, .pui-border-red-500 { border-color: #F44336 !important; } .pui-bg-red-600 { color: #fff !important; border-color: #E53935 !important; background-color: #E53935 !important; } .pui-text-red-600 { color: #E53935 !important; } .pui-border-red-600 { border-color: #E53935 !important; } .pui-bg-red-700 { color: #fff !important; border-color: #D32F2F !important; background-color: #D32F2F !important; } .pui-text-red-700 { color: #D32F2F !important; } .pui-border-red-700 { border-color: #D32F2F !important; } .pui-bg-red-800 { color: #fff !important; border-color: #C62828 !important; background-color: #C62828 !important; } .pui-text-red-800 { color: #C62828 !important; } .pui-border-red-800 { border-color: #C62828 !important; } .pui-bg-red-900 { color: #fff !important; border-color: #B71C1C !important; background-color: #B71C1C !important; } .pui-text-red-900 { color: #B71C1C !important; } .pui-border-red-900 { border-color: #B71C1C !important; } .pui-bg-red-A100 { color: #fff !important; border-color: #FF8A80 !important; background-color: #FF8A80 !important; } .pui-text-red-A100 { color: #FF8A80 !important; } .pui-border-red-A100 { border-color: #FF8A80 !important; } .pui-bg-red-A200 { color: #fff !important; border-color: #FF5252 !important; background-color: #FF5252 !important; } .pui-text-red-A200 { color: #FF5252 !important; } .pui-border-red-A200 { border-color: #FF5252 !important; } .pui-bg-red-A400 { color: #fff !important; border-color: #FF1744 !important; background-color: #FF1744 !important; } .pui-text-red-A400 { color: #FF1744 !important; } .pui-border-red-A400 { border-color: #FF1744 !important; } .pui-bg-red-A700 { color: #fff !important; border-color: #D50000 !important; background-color: #D50000 !important; } .pui-text-red-A700 { color: #D50000 !important; } .pui-border-red-A700 { border-color: #D50000 !important; } .pui-bg-pink-50 { color: #fff !important; border-color: #FCE4EC !important; background-color: #FCE4EC !important; } .pui-text-pink-50 { color: #FCE4EC !important; } .pui-border-pink-50 { border-color: #FCE4EC !important; } .pui-bg-pink-100 { color: #fff !important; border-color: #F8BBD0 !important; background-color: #F8BBD0 !important; } .pui-text-pink-100 { color: #F8BBD0 !important; } .pui-border-pink-100 { border-color: #F8BBD0 !important; } .pui-bg-pink-200 { color: #fff !important; border-color: #F48FB1 !important; background-color: #F48FB1 !important; } .pui-text-pink-200 { color: #F48FB1 !important; } .pui-border-pink-200 { border-color: #F48FB1 !important; } .pui-bg-pink-300 { color: #fff !important; border-color: #F06292 !important; background-color: #F06292 !important; } .pui-text-pink-300 { color: #F06292 !important; } .pui-border-pink-300 { border-color: #F06292 !important; } .pui-bg-pink-400 { color: #fff !important; border-color: #EC407A !important; background-color: #EC407A !important; } .pui-text-pink-400 { color: #EC407A !important; } .pui-border-pink-400 { border-color: #EC407A !important; } .pui-bg-pink, .pui-bg-pink-500 { color: #fff !important; border-color: #E91E63 !important; background-color: #E91E63 !important; } .pui-text-pink, .pui-text-pink-500 { color: #E91E63 !important; } .pui-border-pink, .pui-border-pink-500 { border-color: #E91E63 !important; } .pui-bg-pink-600 { color: #fff !important; border-color: #D81B60 !important; background-color: #D81B60 !important; } .pui-text-pink-600 { color: #D81B60 !important; } .pui-border-pink-600 { border-color: #D81B60 !important; } .pui-bg-pink-700 { color: #fff !important; border-color: #C2185B !important; background-color: #C2185B !important; } .pui-text-pink-700 { color: #C2185B !important; } .pui-border-pink-700 { border-color: #C2185B !important; } .pui-bg-pink-800 { color: #fff !important; border-color: #AD1457 !important; background-color: #AD1457 !important; } .pui-text-pink-800 { color: #AD1457 !important; } .pui-border-pink-800 { border-color: #AD1457 !important; } .pui-bg-pink-900 { color: #fff !important; border-color: #880E4F !important; background-color: #880E4F !important; } .pui-text-pink-900 { color: #880E4F !important; } .pui-border-pink-900 { border-color: #880E4F !important; } .pui-bg-pink-A100 { color: #fff !important; border-color: #FF80AB !important; background-color: #FF80AB !important; } .pui-text-pink-A100 { color: #FF80AB !important; } .pui-border-pink-A100 { border-color: #FF80AB !important; } .pui-bg-pink-A200 { color: #fff !important; border-color: #FF4081 !important; background-color: #FF4081 !important; } .pui-text-pink-A200 { color: #FF4081 !important; } .pui-border-pink-A200 { border-color: #FF4081 !important; } .pui-bg-pink-A400 { color: #fff !important; border-color: #F50057 !important; background-color: #F50057 !important; } .pui-text-pink-A400 { color: #F50057 !important; } .pui-border-pink-A400 { border-color: #F50057 !important; } .pui-bg-pink-A700 { color: #fff !important; border-color: #C51162 !important; background-color: #C51162 !important; } .pui-text-pink-A700 { color: #C51162 !important; } .pui-border-pink-A700 { border-color: #C51162 !important; } .pui-bg-purple-50 { color: #fff !important; border-color: #F3E5F5 !important; background-color: #F3E5F5 !important; } .pui-text-purple-50 { color: #F3E5F5 !important; } .pui-border-purple-50 { border-color: #F3E5F5 !important; } .pui-bg-purple-100 { color: #fff !important; border-color: #E1BEE7 !important; background-color: #E1BEE7 !important; } .pui-text-purple-100 { color: #E1BEE7 !important; } .pui-border-purple-100 { border-color: #E1BEE7 !important; } .pui-bg-purple-200 { color: #fff !important; border-color: #CE93D8 !important; background-color: #CE93D8 !important; } .pui-text-purple-200 { color: #CE93D8 !important; } .pui-border-purple-200 { border-color: #CE93D8 !important; } .pui-bg-purple-300 { color: #fff !important; border-color: #BA68C8 !important; background-color: #BA68C8 !important; } .pui-text-purple-300 { color: #BA68C8 !important; } .pui-border-purple-300 { border-color: #BA68C8 !important; } .pui-bg-purple-400 { color: #fff !important; border-color: #AB47BC !important; background-color: #AB47BC !important; } .pui-text-purple-400 { color: #AB47BC !important; } .pui-border-purple-400 { border-color: #AB47BC !important; } .pui-bg-purple, .pui-bg-purple-500 { color: #fff !important; border-color: #9C27B0 !important; background-color: #9C27B0 !important; } .pui-text-purple, .pui-text-purple-500 { color: #9C27B0 !important; } .pui-border-purple, .pui-border-purple-500 { border-color: #9C27B0 !important; } .pui-bg-purple-600 { color: #fff !important; border-color: #8E24AA !important; background-color: #8E24AA !important; } .pui-text-purple-600 { color: #8E24AA !important; } .pui-border-purple-600 { border-color: #8E24AA !important; } .pui-bg-purple-700 { color: #fff !important; border-color: #7B1FA2 !important; background-color: #7B1FA2 !important; } .pui-text-purple-700 { color: #7B1FA2 !important; } .pui-border-purple-700 { border-color: #7B1FA2 !important; } .pui-bg-purple-800 { color: #fff !important; border-color: #6A1B9A !important; background-color: #6A1B9A !important; } .pui-text-purple-800 { color: #6A1B9A !important; } .pui-border-purple-800 { border-color: #6A1B9A !important; } .pui-bg-purple-900 { color: #fff !important; border-color: #4A148C !important; background-color: #4A148C !important; } .pui-text-purple-900 { color: #4A148C !important; } .pui-border-purple-900 { border-color: #4A148C !important; } .pui-bg-purple-A100 { color: #fff !important; border-color: #EA80FC !important; background-color: #EA80FC !important; } .pui-text-purple-A100 { color: #EA80FC !important; } .pui-border-purple-A100 { border-color: #EA80FC !important; } .pui-bg-purple-A200 { color: #fff !important; border-color: #E040FB !important; background-color: #E040FB !important; } .pui-text-purple-A200 { color: #E040FB !important; } .pui-border-purple-A200 { border-color: #E040FB !important; } .pui-bg-purple-A400 { color: #fff !important; border-color: #D500F9 !important; background-color: #D500F9 !important; } .pui-text-purple-A400 { color: #D500F9 !important; } .pui-border-purple-A400 { border-color: #D500F9 !important; } .pui-bg-purple-A700 { color: #fff !important; border-color: #AA00FF !important; background-color: #AA00FF !important; } .pui-text-purple-A700 { color: #AA00FF !important; } .pui-border-purple-A700 { border-color: #AA00FF !important; } .pui-bg-deep-purple-50 { color: #fff !important; border-color: #EDE7F6 !important; background-color: #EDE7F6 !important; } .pui-text-deep-purple-50 { color: #EDE7F6 !important; } .pui-border-deep-purple-50 { border-color: #EDE7F6 !important; } .pui-bg-deep-purple-100 { color: #fff !important; border-color: #D1C4E9 !important; background-color: #D1C4E9 !important; } .pui-text-deep-purple-100 { color: #D1C4E9 !important; } .pui-border-deep-purple-100 { border-color: #D1C4E9 !important; } .pui-bg-deep-purple-200 { color: #fff !important; border-color: #B39DDB !important; background-color: #B39DDB !important; } .pui-text-deep-purple-200 { color: #B39DDB !important; } .pui-border-deep-purple-200 { border-color: #B39DDB !important; } .pui-bg-deep-purple-300 { color: #fff !important; border-color: #9575CD !important; background-color: #9575CD !important; } .pui-text-deep-purple-300 { color: #9575CD !important; } .pui-border-deep-purple-300 { border-color: #9575CD !important; } .pui-bg-deep-purple-400 { color: #fff !important; border-color: #7E57C2 !important; background-color: #7E57C2 !important; } .pui-text-deep-purple-400 { color: #7E57C2 !important; } .pui-border-deep-purple-400 { border-color: #7E57C2 !important; } .pui-bg-deep-purple, .pui-bg-deep-purple-500 { color: #fff !important; border-color: #673AB7 !important; background-color: #673AB7 !important; } .pui-text-deep-purple, .pui-text-deep-purple-500 { color: #673AB7 !important; } .pui-border-deep-purple, .pui-border-deep-purple-500 { border-color: #673AB7 !important; } .pui-bg-deep-purple-600 { color: #fff !important; border-color: #5E35B1 !important; background-color: #5E35B1 !important; } .pui-text-deep-purple-600 { color: #5E35B1 !important; } .pui-border-deep-purple-600 { border-color: #5E35B1 !important; } .pui-bg-deep-purple-700 { color: #fff !important; border-color: #512DA8 !important; background-color: #512DA8 !important; } .pui-text-deep-purple-700 { color: #512DA8 !important; } .pui-border-deep-purple-700 { border-color: #512DA8 !important; } .pui-bg-deep-purple-800 { color: #fff !important; border-color: #4527A0 !important; background-color: #4527A0 !important; } .pui-text-deep-purple-800 { color: #4527A0 !important; } .pui-border-deep-purple-800 { border-color: #4527A0 !important; } .pui-bg-deep-purple-900 { color: #fff !important; border-color: #311B92 !important; background-color: #311B92 !important; } .pui-text-deep-purple-900 { color: #311B92 !important; } .pui-border-deep-purple-900 { border-color: #311B92 !important; } .pui-bg-deep-purple-A100 { color: #fff !important; border-color: #B388FF !important; background-color: #B388FF !important; } .pui-text-deep-purple-A100 { color: #B388FF !important; } .pui-border-deep-purple-A100 { border-color: #B388FF !important; } .pui-bg-deep-purple-A200 { color: #fff !important; border-color: #7C4DFF !important; background-color: #7C4DFF !important; } .pui-text-deep-purple-A200 { color: #7C4DFF !important; } .pui-border-deep-purple-A200 { border-color: #7C4DFF !important; } .pui-bg-deep-purple-A400 { color: #fff !important; border-color: #651FFF !important; background-color: #651FFF !important; } .pui-text-deep-purple-A400 { color: #651FFF !important; } .pui-border-deep-purple-A400 { border-color: #651FFF !important; } .pui-bg-deep-purple-A700 { color: #fff !important; border-color: #6200EA !important; background-color: #6200EA !important; } .pui-text-deep-purple-A700 { color: #6200EA !important; } .pui-border-deep-purple-A700 { border-color: #6200EA !important; } .pui-bg-indigo-50 { color: #fff !important; border-color: #E8EAF6 !important; background-color: #E8EAF6 !important; } .pui-text-indigo-50 { color: #E8EAF6 !important; } .pui-border-indigo-50 { border-color: #E8EAF6 !important; } .pui-bg-indigo-100 { color: #fff !important; border-color: #C5CAE9 !important; background-color: #C5CAE9 !important; } .pui-text-indigo-100 { color: #C5CAE9 !important; } .pui-border-indigo-100 { border-color: #C5CAE9 !important; } .pui-bg-indigo-200 { color: #fff !important; border-color: #9FA8DA !important; background-color: #9FA8DA !important; } .pui-text-indigo-200 { color: #9FA8DA !important; } .pui-border-indigo-200 { border-color: #9FA8DA !important; } .pui-bg-indigo-300 { color: #fff !important; border-color: #7986CB !important; background-color: #7986CB !important; } .pui-text-indigo-300 { color: #7986CB !important; } .pui-border-indigo-300 { border-color: #7986CB !important; } .pui-bg-indigo-400 { color: #fff !important; border-color: #5C6BC0 !important; background-color: #5C6BC0 !important; } .pui-text-indigo-400 { color: #5C6BC0 !important; } .pui-border-indigo-400 { border-color: #5C6BC0 !important; } .pui-bg-indigo, .pui-bg-indigo-500 { color: #fff !important; border-color: #3F51B5 !important; background-color: #3F51B5 !important; } .pui-text-indigo, .pui-text-indigo-500 { color: #3F51B5 !important; } .pui-border-indigo, .pui-border-indigo-500 { border-color: #3F51B5 !important; } .pui-bg-indigo-600 { color: #fff !important; border-color: #3949AB !important; background-color: #3949AB !important; } .pui-text-indigo-600 { color: #3949AB !important; } .pui-border-indigo-600 { border-color: #3949AB !important; } .pui-bg-indigo-700 { color: #fff !important; border-color: #303F9F !important; background-color: #303F9F !important; } .pui-text-indigo-700 { color: #303F9F !important; } .pui-border-indigo-700 { border-color: #303F9F !important; } .pui-bg-indigo-800 { color: #fff !important; border-color: #283593 !important; background-color: #283593 !important; } .pui-text-indigo-800 { color: #283593 !important; } .pui-border-indigo-800 { border-color: #283593 !important; } .pui-bg-indigo-900 { color: #fff !important; border-color: #1A237E !important; background-color: #1A237E !important; } .pui-text-indigo-900 { color: #1A237E !important; } .pui-border-indigo-900 { border-color: #1A237E !important; } .pui-bg-indigo-A100 { color: #fff !important; border-color: #8C9EFF !important; background-color: #8C9EFF !important; } .pui-text-indigo-A100 { color: #8C9EFF !important; } .pui-border-indigo-A100 { border-color: #8C9EFF !important; } .pui-bg-indigo-A200 { color: #fff !important; border-color: #536DFE !important; background-color: #536DFE !important; } .pui-text-indigo-A200 { color: #536DFE !important; } .pui-border-indigo-A200 { border-color: #536DFE !important; } .pui-bg-indigo-A400 { color: #fff !important; border-color: #3D5AFE !important; background-color: #3D5AFE !important; } .pui-text-indigo-A400 { color: #3D5AFE !important; } .pui-border-indigo-A400 { border-color: #3D5AFE !important; } .pui-bg-indigo-A700 { color: #fff !important; border-color: #304FFE !important; background-color: #304FFE !important; } .pui-text-indigo-A700 { color: #304FFE !important; } .pui-border-indigo-A700 { border-color: #304FFE !important; } .pui-bg-blue-50 { color: #fff !important; border-color: #E3F2FD !important; background-color: #E3F2FD !important; } .pui-text-blue-50 { color: #E3F2FD !important; } .pui-border-blue-50 { border-color: #E3F2FD !important; } .pui-bg-blue-100 { color: #fff !important; border-color: #BBDEFB !important; background-color: #BBDEFB !important; } .pui-text-blue-100 { color: #BBDEFB !important; } .pui-border-blue-100 { border-color: #BBDEFB !important; } .pui-bg-blue-200 { color: #fff !important; border-color: #90CAF9 !important; background-color: #90CAF9 !important; } .pui-text-blue-200 { color: #90CAF9 !important; } .pui-border-blue-200 { border-color: #90CAF9 !important; } .pui-bg-blue-300 { color: #fff !important; border-color: #C54B3B !important; background-color: #C54B3B !important; } .pui-text-blue-300 { color: #64B5F6 !important; } .pui-border-blue-300 { border-color: #64B5F6 !important; } .pui-bg-blue-400 { color: #fff !important; border-color: #42A5F5 !important; background-color: #42A5F5 !important; } .pui-text-blue-400 { color: #42A5F5 !important; } .pui-border-blue-400 { border-color: #42A5F5 !important; } .pui-bg-blue, .pui-bg-blue-500 { color: #fff !important; border-color: #2196F3 !important; background-color: #2196F3 !important; } .pui-text-blue, .pui-text-blue-500 { color: #2196F3 !important; } .pui-border-blue, .pui-border-blue-500 { border-color: #2196F3 !important; } .pui-bg-blue-600 { color: #fff !important; border-color: #1E88E5 !important; background-color: #1E88E5 !important; } .pui-text-blue-600 { color: #1E88E5 !important; } .pui-border-blue-600 { border-color: #1E88E5 !important; } .pui-bg-blue-700 { color: #fff !important; border-color: #1976D2 !important; background-color: #1976D2 !important; } .pui-text-blue-700 { color: #1976D2 !important; } .pui-border-blue-700 { border-color: #1976D2 !important; } .pui-bg-blue-800 { color: #fff !important; border-color: #1565C0 !important; background-color: #1565C0 !important; } .pui-text-blue-800 { color: #1565C0 !important; } .pui-border-blue-800 { border-color: #1565C0 !important; } .pui-bg-blue-900 { color: #fff !important; border-color: #0D47A1 !important; background-color: #0D47A1 !important; } .pui-text-blue-900 { color: #0D47A1 !important; } .pui-border-blue-900 { border-color: #0D47A1 !important; } .pui-bg-blue-A100 { color: #fff !important; border-color: #82B1FF !important; background-color: #82B1FF !important; } .pui-text-blue-A100 { color: #82B1FF !important; } .pui-border-blue-A100 { border-color: #82B1FF !important; } .pui-bg-blue-A200 { color: #fff !important; border-color: #448AFF !important; background-color: #448AFF !important; } .pui-text-blue-A200 { color: #448AFF !important; } .pui-border-blue-A200 { border-color: #448AFF !important; } .pui-bg-blue-A400 { color: #fff !important; border-color: #2979FF !important; background-color: #2979FF !important; } .pui-text-blue-A400 { color: #2979FF !important; } .pui-border-blue-A400 { border-color: #2979FF !important; } .pui-bg-blue-A700 { color: #fff !important; border-color: #2962FF !important; background-color: #2962FF !important; } .pui-text-blue-A700 { color: #2962FF !important; } .pui-border-blue-A700 { border-color: #2962FF !important; } .pui-bg-light-blue-50 { color: #fff !important; border-color: #E1F5FE !important; background-color: #E1F5FE !important; } .pui-text-light-blue-50 { color: #E1F5FE !important; } .pui-border-light-blue-50 { border-color: #E1F5FE !important; } .pui-bg-light-blue-100 { color: #fff !important; border-color: #B3E5FC !important; background-color: #B3E5FC !important; } .pui-text-light-blue-100 { color: #B3E5FC !important; } .pui-border-light-blue-100 { border-color: #B3E5FC !important; } .pui-bg-light-blue-200 { color: #fff !important; border-color: #81D4FA !important; background-color: #81D4FA !important; } .pui-text-light-blue-200 { color: #81D4FA !important; } .pui-border-light-blue-200 { border-color: #81D4FA !important; } .pui-bg-light-blue-300 { color: #fff !important; border-color: #4FC3F7 !important; background-color: #4FC3F7 !important; } .pui-text-light-blue-300 { color: #4FC3F7 !important; } .pui-border-light-blue-300 { border-color: #4FC3F7 !important; } .pui-bg-light-blue-400 { color: #fff !important; border-color: #29B6F6 !important; background-color: #29B6F6 !important; } .pui-text-light-blue-400 { color: #29B6F6 !important; } .pui-border-light-blue-400 { border-color: #29B6F6 !important; } .pui-bg-light-blue, .pui-bg-light-blue-500 { color: #fff !important; border-color: #03A9F4 !important; background-color: #03A9F4 !important; } .pui-text-light-blue, .pui-text-light-blue-500 { color: #03A9F4 !important; } .pui-border-light-blue, .pui-border-light-blue-500 { border-color: #03A9F4 !important; } .pui-bg-light-blue-600 { color: #fff !important; border-color: #039BE5 !important; background-color: #039BE5 !important; } .pui-text-light-blue-600 { color: #039BE5 !important; } .pui-border-light-blue-600 { border-color: #039BE5 !important; } .pui-bg-light-blue-700 { color: #fff !important; border-color: #0288D1 !important; background-color: #0288D1 !important; } .pui-text-light-blue-700 { color: #0288D1 !important; } .pui-border-light-blue-700 { border-color: #0288D1 !important; } .pui-bg-light-blue-800 { color: #fff !important; border-color: #0277BD !important; background-color: #0277BD !important; } .pui-text-light-blue-800 { color: #0277BD !important; } .pui-border-light-blue-800 { border-color: #0277BD !important; } .pui-bg-light-blue-900 { color: #fff !important; border-color: #01579B !important; background-color: #01579B !important; } .pui-text-light-blue-900 { color: #01579B !important; } .pui-border-light-blue-900 { border-color: #01579B !important; } .pui-bg-light-blue-A100 { color: #fff !important; border-color: #80D8FF !important; background-color: #80D8FF !important; } .pui-text-light-blue-A100 { color: #80D8FF !important; } .pui-border-light-blue-A100 { border-color: #80D8FF !important; } .pui-bg-light-blue-A200 { color: #fff !important; border-color: #40C4FF !important; background-color: #40C4FF !important; } .pui-text-light-blue-A200 { color: #40C4FF !important; } .pui-border-light-blue-A200 { border-color: #40C4FF !important; } .pui-bg-light-blue-A400 { color: #fff !important; border-color: #00B0FF !important; background-color: #00B0FF !important; } .pui-text-light-blue-A400 { color: #00B0FF !important; } .pui-border-light-blue-A400 { border-color: #00B0FF !important; } .pui-bg-light-blue-A700 { color: #fff !important; border-color: #0091EA !important; background-color: #0091EA !important; } .pui-text-light-blue-A700 { color: #0091EA !important; } .pui-border-light-blue-A700 { border-color: #0091EA !important; } .pui-bg-cyan-50 { color: #fff !important; border-color: #E0F7FA !important; background-color: #E0F7FA !important; } .pui-text-cyan-50 { color: #E0F7FA !important; } .pui-border-cyan-50 { border-color: #E0F7FA !important; } .pui-bg-cyan-100 { color: #fff !important; border-color: #B2EBF2 !important; background-color: #B2EBF2 !important; } .pui-text-cyan-100 { color: #B2EBF2 !important; } .pui-border-cyan-100 { border-color: #B2EBF2 !important; } .pui-bg-cyan-200 { color: #fff !important; border-color: #80DEEA !important; background-color: #80DEEA !important; } .pui-text-cyan-200 { color: #80DEEA !important; } .pui-border-cyan-200 { border-color: #80DEEA !important; } .pui-bg-cyan-300 { color: #fff !important; border-color: #4DD0E1 !important; background-color: #4DD0E1 !important; } .pui-text-cyan-300 { color: #4DD0E1 !important; } .pui-border-cyan-300 { border-color: #4DD0E1 !important; } .pui-bg-cyan-400 { color: #fff !important; border-color: #26C6DA !important; background-color: #26C6DA !important; } .pui-text-cyan-400 { color: #26C6DA !important; } .pui-border-cyan-400 { border-color: #26C6DA !important; } .pui-bg-cyan, .pui-bg-cyan-500 { color: #fff !important; border-color: #00BCD4 !important; background-color: #00BCD4 !important; } .pui-text-cyan, .pui-text-cyan-500 { color: #00BCD4 !important; } .pui-border-cyan, .pui-border-cyan-500 { border-color: #00BCD4 !important; } .pui-bg-cyan-600 { color: #fff !important; border-color: #00ACC1 !important; background-color: #00ACC1 !important; } .pui-text-cyan-600 { color: #00ACC1 !important; } .pui-border-cyan-600 { border-color: #00ACC1 !important; } .pui-bg-cyan-700 { color: #fff !important; border-color: #0097A7 !important; background-color: #0097A7 !important; } .pui-text-cyan-700 { color: #0097A7 !important; } .pui-border-cyan-700 { border-color: #0097A7 !important; } .pui-bg-cyan-800 { color: #fff !important; border-color: #00838F !important; background-color: #00838F !important; } .pui-text-cyan-800 { color: #00838F !important; } .pui-border-cyan-800 { border-color: #00838F !important; } .pui-bg-cyan-900 { color: #fff !important; border-color: #006064 !important; background-color: #006064 !important; } .pui-text-cyan-900 { color: #006064 !important; } .pui-border-cyan-900 { border-color: #006064 !important; } .pui-bg-cyan-A100 { color: #fff !important; border-color: #84FFFF !important; background-color: #84FFFF !important; } .pui-text-cyan-A100 { color: #84FFFF !important; } .pui-border-cyan-A100 { border-color: #84FFFF !important; } .pui-bg-cyan-A200 { color: #fff !important; border-color: #18FFFF !important; background-color: #18FFFF !important; } .pui-text-cyan-A200 { color: #18FFFF !important; } .pui-border-cyan-A200 { border-color: #18FFFF !important; } .pui-bg-cyan-A400 { color: #fff !important; border-color: #00E5FF !important; background-color: #00E5FF !important; } .pui-text-cyan-A400 { color: #00E5FF !important; } .pui-border-cyan-A400 { border-color: #00E5FF !important; } .pui-bg-cyan-A700 { color: #fff !important; border-color: #00B8D4 !important; background-color: #00B8D4 !important; } .pui-text-cyan-A700 { color: #00B8D4 !important; } .pui-border-cyan-A700 { border-color: #00B8D4 !important; } .pui-bg-teal-50 { color: #fff !important; border-color: #E0F2F1 !important; background-color: #E0F2F1 !important; } .pui-text-teal-50 { color: #E0F2F1 !important; } .pui-border-teal-50 { border-color: #E0F2F1 !important; } .pui-bg-teal-100 { color: #fff !important; border-color: #B2DFDB !important; background-color: #B2DFDB !important; } .pui-text-teal-100 { color: #B2DFDB !important; } .pui-border-teal-100 { border-color: #B2DFDB !important; } .pui-bg-teal-200 { color: #fff !important; border-color: #80CBC4 !important; background-color: #80CBC4 !important; } .pui-text-teal-200 { color: #80CBC4 !important; } .pui-border-teal-200 { border-color: #80CBC4 !important; } .pui-bg-teal-300 { color: #fff !important; border-color: #4DB6AC !important; background-color: #4DB6AC !important; } .pui-text-teal-300 { color: #4DB6AC !important; } .pui-border-teal-300 { border-color: #4DB6AC !important; } .pui-bg-teal-400 { color: #fff !important; border-color: #26A69A !important; background-color: #26A69A !important; } .pui-text-teal-400 { color: #26A69A !important; } .pui-border-teal-400 { border-color: #26A69A !important; } .pui-bg-teal, .pui-bg-teal-500 { color: #fff !important; border-color: #009688 !important; background-color: #009688 !important; } .pui-text-teal, .pui-text-teal-500 { color: #009688 !important; } .pui-border-teal, .pui-border-teal-500 { border-color: #009688 !important; } .pui-bg-teal-600 { color: #fff !important; border-color: #00897B !important; background-color: #00897B !important; } .pui-text-teal-600 { color: #00897B !important; } .pui-border-teal-600 { border-color: #00897B !important; } .pui-bg-teal-700 { color: #fff !important; border-color: #00796B !important; background-color: #00796B !important; } .pui-text-teal-700 { color: #00796B !important; } .pui-border-teal-700 { border-color: #00796B !important; } .pui-bg-teal-800 { color: #fff !important; border-color: #00695C !important; background-color: #00695C !important; } .pui-text-teal-800 { color: #00695C !important; } .pui-border-teal-800 { border-color: #00695C !important; } .pui-bg-teal-900 { color: #fff !important; border-color: #004D40 !important; background-color: #004D40 !important; } .pui-text-teal-900 { color: #004D40 !important; } .pui-border-teal-900 { border-color: #004D40 !important; } .pui-bg-teal-A100 { color: #fff !important; border-color: #A7FFEB !important; background-color: #A7FFEB !important; } .pui-text-teal-A100 { color: #A7FFEB !important; } .pui-border-teal-A100 { border-color: #A7FFEB !important; } .pui-bg-teal-A200 { color: #fff !important; border-color: #64FFDA !important; background-color: #64FFDA !important; } .pui-text-teal-A200 { color: #64FFDA !important; } .pui-border-teal-A200 { border-color: #64FFDA !important; } .pui-bg-teal-A400 { color: #fff !important; border-color: #1DE9B6 !important; background-color: #1DE9B6 !important; } .pui-text-teal-A400 { color: #1DE9B6 !important; } .pui-border-teal-A400 { border-color: #1DE9B6 !important; } .pui-bg-teal-A700 { color: #fff !important; border-color: #00BFA5 !important; background-color: #00BFA5 !important; } .pui-text-teal-A700 { color: #00BFA5 !important; } .pui-border-teal-A700 { border-color: #00BFA5 !important; } .pui-bg-green-50 { color: #fff !important; border-color: #E8F5E9 !important; background-color: #E8F5E9 !important; } .pui-text-green-50 { color: #E8F5E9 !important; } .pui-border-green-50 { border-color: #E8F5E9 !important; } .pui-bg-green-100 { color: #fff !important; border-color: #C8E6C9 !important; background-color: #C8E6C9 !important; } .pui-text-green-100 { color: #C8E6C9 !important; } .pui-border-green-100 { border-color: #C8E6C9 !important; } .pui-bg-green-200 { color: #fff !important; border-color: #A5D6A7 !important; background-color: #A5D6A7 !important; } .pui-text-green-200 { color: #A5D6A7 !important; } .pui-border-green-200 { border-color: #A5D6A7 !important; } .pui-bg-green-300 { color: #fff !important; border-color: #81C784 !important; background-color: #81C784 !important; } .pui-text-green-300 { color: #81C784 !important; } .pui-border-green-300 { border-color: #81C784 !important; } .pui-bg-green-400 { color: #fff !important; border-color: #66BB6A !important; background-color: #66BB6A !important; } .pui-text-green-400 { color: #66BB6A !important; } .pui-border-green-400 { border-color: #66BB6A !important; } .pui-bg-green, .pui-bg-green-500 { color: #fff !important; border-color: #4CAF50 !important; background-color: #4CAF50 !important; } .pui-text-green, .pui-text-green-500 { color: #4CAF50 !important; } .pui-border-green, .pui-border-green-500 { border-color: #4CAF50 !important; } .pui-bg-green-600 { color: #fff !important; border-color: #43A047 !important; background-color: #43A047 !important; } .pui-text-green-600 { color: #43A047 !important; } .pui-border-green-600 { border-color: #43A047 !important; } .pui-bg-green-700 { color: #fff !important; border-color: #388E3C !important; background-color: #388E3C !important; } .pui-text-green-700 { color: #388E3C !important; } .pui-border-green-700 { border-color: #388E3C !important; } .pui-bg-green-800 { color: #fff !important; border-color: #2E7D32 !important; background-color: #2E7D32 !important; } .pui-text-green-800 { color: #2E7D32 !important; } .pui-border-green-800 { border-color: #2E7D32 !important; } .pui-bg-green-900 { color: #fff !important; border-color: #1B5E20 !important; background-color: #1B5E20 !important; } .pui-text-green-900 { color: #1B5E20 !important; } .pui-border-green-900 { border-color: #1B5E20 !important; } .pui-bg-green-A100 { color: #fff !important; border-color: #B9F6CA !important; background-color: #B9F6CA !important; } .pui-text-green-A100 { color: #B9F6CA !important; } .pui-border-green-A100 { border-color: #B9F6CA !important; } .pui-bg-green-A200 { color: #fff !important; border-color: #69F0AE !important; background-color: #69F0AE !important; } .pui-text-green-A200 { color: #69F0AE !important; } .pui-border-green-A200 { border-color: #69F0AE !important; } .pui-bg-green-A400 { color: #fff !important; border-color: #00E676 !important; background-color: #00E676 !important; } .pui-text-green-A400 { color: #00E676 !important; } .pui-border-green-A400 { border-color: #00E676 !important; } .pui-bg-green-A700 { color: #fff !important; border-color: #00C853 !important; background-color: #00C853 !important; } .pui-text-green-A700 { color: #00C853 !important; } .pui-border-green-A700 { border-color: #00C853 !important; } .pui-bg-light-green-50 { color: #fff !important; border-color: #F1F8E9 !important; background-color: #F1F8E9 !important; } .pui-text-light-green-50 { color: #F1F8E9 !important; } .pui-border-light-green-50 { border-color: #F1F8E9 !important; } .pui-bg-light-green-100 { color: #fff !important; border-color: #DCEDC8 !important; background-color: #DCEDC8 !important; } .pui-text-light-green-100 { color: #DCEDC8 !important; } .pui-border-light-green-100 { border-color: #DCEDC8 !important; } .pui-bg-light-green-200 { color: #fff !important; border-color: #C5E1A5 !important; background-color: #C5E1A5 !important; } .pui-text-light-green-200 { color: #C5E1A5 !important; } .pui-border-light-green-200 { border-color: #C5E1A5 !important; } .pui-bg-light-green-300 { color: #fff !important; border-color: #AED581 !important; background-color: #AED581 !important; } .pui-text-light-green-300 { color: #AED581 !important; } .pui-border-light-green-300 { border-color: #AED581 !important; } .pui-bg-light-green-400 { color: #fff !important; border-color: #9CCC65 !important; background-color: #9CCC65 !important; } .pui-text-light-green-400 { color: #9CCC65 !important; } .pui-border-light-green-400 { border-color: #9CCC65 !important; } .pui-bg-light-green, .pui-bg-light-green-500 { color: #fff !important; border-color: #8BC34A !important; background-color: #8BC34A !important; } .pui-text-light-green, .pui-text-light-green-500 { color: #8BC34A !important; } .pui-border-light-green, .pui-border-light-green-500 { border-color: #8BC34A !important; } .pui-bg-light-green-600 { color: #fff !important; border-color: #7CB342 !important; background-color: #7CB342 !important; } .pui-text-light-green-600 { color: #7CB342 !important; } .pui-border-light-green-600 { border-color: #7CB342 !important; } .pui-bg-light-green-700 { color: #fff !important; border-color: #689F38 !important; background-color: #689F38 !important; } .pui-text-light-green-700 { color: #689F38 !important; } .pui-border-light-green-700 { border-color: #689F38 !important; } .pui-bg-light-green-800 { color: #fff !important; border-color: #558B2F !important; background-color: #558B2F !important; } .pui-text-light-green-800 { color: #558B2F !important; } .pui-border-light-green-800 { border-color: #558B2F !important; } .pui-bg-light-green-900 { color: #fff !important; border-color: #33691E !important; background-color: #33691E !important; } .pui-text-light-green-900 { color: #33691E !important; } .pui-border-light-green-900 { border-color: #33691E !important; } .pui-bg-light-green-A100 { color: #fff !important; border-color: #CCFF90 !important; background-color: #CCFF90 !important; } .pui-text-light-green-A100 { color: #CCFF90 !important; } .pui-border-light-green-A100 { border-color: #CCFF90 !important; } .pui-bg-light-green-A200 { color: #fff !important; border-color: #B2FF59 !important; background-color: #B2FF59 !important; } .pui-text-light-green-A200 { color: #B2FF59 !important; } .pui-border-light-green-A200 { border-color: #B2FF59 !important; } .pui-bg-light-green-A400 { color: #fff !important; border-color: #76FF03 !important; background-color: #76FF03 !important; } .pui-text-light-green-A400 { color: #76FF03 !important; } .pui-border-light-green-A400 { border-color: #76FF03 !important; } .pui-bg-light-green-A700 { color: #fff !important; border-color: #64DD17 !important; background-color: #64DD17 !important; } .pui-text-light-green-A700 { color: #64DD17 !important; } .pui-border-light-green-A700 { border-color: #64DD17 !important; } .pui-bg-lime-50 { color: #fff !important; border-color: #F9FBE7 !important; background-color: #F9FBE7 !important; } .pui-text-lime-50 { color: #F9FBE7 !important; } .pui-border-lime-50 { border-color: #F9FBE7 !important; } .pui-bg-lime-100 { color: #fff !important; border-color: #F0F4C3 !important; background-color: #F0F4C3 !important; } .pui-text-lime-100 { color: #F0F4C3 !important; } .pui-border-lime-100 { border-color: #F0F4C3 !important; } .pui-bg-lime-200 { color: #fff !important; border-color: #E6EE9C !important; background-color: #E6EE9C !important; } .pui-text-lime-200 { color: #E6EE9C !important; } .pui-border-lime-200 { border-color: #E6EE9C !important; } .pui-bg-lime-300 { color: #fff !important; border-color: #DCE775 !important; background-color: #DCE775 !important; } .pui-text-lime-300 { color: #DCE775 !important; } .pui-border-lime-300 { border-color: #DCE775 !important; } .pui-bg-lime-400 { color: #fff !important; border-color: #D4E157 !important; background-color: #D4E157 !important; } .pui-text-lime-400 { color: #D4E157 !important; } .pui-border-lime-400 { border-color: #D4E157 !important; } .pui-bg-lime, .pui-bg-lime-500 { color: #fff !important; border-color: #CDDC39 !important; background-color: #CDDC39 !important; } .pui-text-lime, .pui-text-lime-500 { color: #CDDC39 !important; } .pui-border-lime, .pui-border-lime-500 { border-color: #CDDC39 !important; } .pui-bg-lime-600 { color: #fff !important; border-color: #C0CA33 !important; background-color: #C0CA33 !important; } .pui-text-lime-600 { color: #C0CA33 !important; } .pui-border-lime-600 { border-color: #C0CA33 !important; } .pui-bg-lime-700 { color: #fff !important; border-color: #AFB42B !important; background-color: #AFB42B !important; } .pui-text-lime-700 { color: #AFB42B !important; } .pui-border-lime-700 { border-color: #AFB42B !important; } .pui-bg-lime-800 { color: #fff !important; border-color: #9E9D24 !important; background-color: #9E9D24 !important; } .pui-text-lime-800 { color: #9E9D24 !important; } .pui-border-lime-800 { border-color: #9E9D24 !important; } .pui-bg-lime-900 { color: #fff !important; border-color: #827717 !important; background-color: #827717 !important; } .pui-text-lime-900 { color: #827717 !important; } .pui-border-lime-900 { border-color: #827717 !important; } .pui-bg-lime-A100 { color: #fff !important; border-color: #F4FF81 !important; background-color: #F4FF81 !important; } .pui-text-lime-A100 { color: #F4FF81 !important; } .pui-border-lime-A100 { border-color: #F4FF81 !important; } .pui-bg-lime-A200 { color: #fff !important; border-color: #EEFF41 !important; background-color: #EEFF41 !important; } .pui-text-lime-A200 { color: #EEFF41 !important; } .pui-border-lime-A200 { border-color: #EEFF41 !important; } .pui-bg-lime-A400 { color: #fff !important; border-color: #C6FF00 !important; background-color: #C6FF00 !important; } .pui-text-lime-A400 { color: #C6FF00 !important; } .pui-border-lime-A400 { border-color: #C6FF00 !important; } .pui-bg-lime-A700 { color: #fff !important; border-color: #AEEA00 !important; background-color: #AEEA00 !important; } .pui-text-lime-A700 { color: #AEEA00 !important; } .pui-border-lime-A700 { border-color: #AEEA00 !important; } .pui-bg-yellow-50 { color: #fff !important; border-color: #FFFDE7 !important; background-color: #FFFDE7 !important; } .pui-text-yellow-50 { color: #FFFDE7 !important; } .pui-border-yellow-50 { border-color: #FFFDE7 !important; } .pui-bg-yellow-100 { color: #fff !important; border-color: #FFF9C4 !important; background-color: #FFF9C4 !important; } .pui-text-yellow-100 { color: #FFF9C4 !important; } .pui-border-yellow-100 { border-color: #FFF9C4 !important; } .pui-bg-yellow-200 { color: #fff !important; border-color: #FFF59D !important; background-color: #FFF59D !important; } .pui-text-yellow-200 { color: #FFF59D !important; } .pui-border-yellow-200 { border-color: #FFF59D !important; } .pui-bg-yellow-300 { color: #fff !important; border-color: #FFF176 !important; background-color: #FFF176 !important; } .pui-text-yellow-300 { color: #FFF176 !important; } .pui-border-yellow-300 { border-color: #FFF176 !important; } .pui-bg-yellow-400 { color: #fff !important; border-color: #FFEE58 !important; background-color: #FFEE58 !important; } .pui-text-yellow-400 { color: #FFEE58 !important; } .pui-border-yellow-400 { border-color: #FFEE58 !important; } .pui-bg-yellow, .pui-bg-yellow-500 { color: #fff !important; border-color: #FFEB3B !important; background-color: #FFEB3B !important; } .pui-text-yellow, .pui-text-yellow-500 { color: #FFEB3B !important; } .pui-border-yellow, .pui-border-yellow-500 { border-color: #FFEB3B !important; } .pui-bg-yellow-600 { color: #fff !important; border-color: #FDD835 !important; background-color: #FDD835 !important; } .pui-text-yellow-600 { color: #FDD835 !important; } .pui-border-yellow-600 { border-color: #FDD835 !important; } .pui-bg-yellow-700 { color: #fff !important; border-color: #FBC02D !important; background-color: #FBC02D !important; } .pui-text-yellow-700 { color: #FBC02D !important; } .pui-border-yellow-700 { border-color: #FBC02D !important; } .pui-bg-yellow-800 { color: #fff !important; border-color: #F9A825 !important; background-color: #F9A825 !important; } .pui-text-yellow-800 { color: #F9A825 !important; } .pui-border-yellow-800 { border-color: #F9A825 !important; } .pui-bg-yellow-900 { color: #fff !important; border-color: #F57F17 !important; background-color: #F57F17 !important; } .pui-text-yellow-900 { color: #F57F17 !important; } .pui-border-yellow-900 { border-color: #F57F17 !important; } .pui-bg-yellow-A100 { color: #fff !important; border-color: #FFFF8D !important; background-color: #FFFF8D !important; } .pui-text-yellow-A100 { color: #FFFF8D !important; } .pui-border-yellow-A100 { border-color: #FFFF8D !important; } .pui-bg-yellow-A200 { color: #fff !important; border-color: #FFFF00 !important; background-color: #FFFF00 !important; } .pui-text-yellow-A200 { color: #FFFF00 !important; } .pui-border-yellow-A200 { border-color: #FFFF00 !important; } .pui-bg-yellow-A400 { color: #fff !important; border-color: #FFEA00 !important; background-color: #FFEA00 !important; } .pui-text-yellow-A400 { color: #FFEA00 !important; } .pui-border-yellow-A400 { border-color: #FFEA00 !important; } .pui-bg-yellow-A700 { color: #fff !important; border-color: #FFD600 !important; background-color: #FFD600 !important; } .pui-text-yellow-A700 { color: #FFD600 !important; } .pui-border-yellow-A700 { border-color: #FFD600 !important; } .pui-bg-amber-50 { color: #fff !important; border-color: #FFF8E1 !important; background-color: #FFF8E1 !important; } .pui-text-amber-50 { color: #FFF8E1 !important; } .pui-border-amber-50 { border-color: #FFF8E1 !important; } .pui-bg-amber-100 { color: #fff !important; border-color: #FFECB3 !important; background-color: #FFECB3 !important; } .pui-text-amber-100 { color: #FFECB3 !important; } .pui-border-amber-100 { border-color: #FFECB3 !important; } .pui-bg-amber-200 { color: #fff !important; border-color: #FFE082 !important; background-color: #FFE082 !important; } .pui-text-amber-200 { color: #FFE082 !important; } .pui-border-amber-200 { border-color: #FFE082 !important; } .pui-bg-amber-300 { color: #fff !important; border-color: #FFD54F !important; background-color: #FFD54F !important; } .pui-text-amber-300 { color: #FFD54F !important; } .pui-border-amber-300 { border-color: #FFD54F !important; } .pui-bg-amber-400 { color: #fff !important; border-color: #FFCA28 !important; background-color: #FFCA28 !important; } .pui-text-amber-400 { color: #FFCA28 !important; } .pui-border-amber-400 { border-color: #FFCA28 !important; } .pui-bg-amber, .pui-bg-amber-500 { color: #fff !important; border-color: #FFC107 !important; background-color: #FFC107 !important; } .pui-text-amber, .pui-text-amber-500 { color: #FFC107 !important; } .pui-border-amber, .pui-border-amber-500 { border-color: #FFC107 !important; } .pui-bg-amber-600 { color: #fff !important; border-color: #FFB300 !important; background-color: #FFB300 !important; } .pui-text-amber-600 { color: #FFB300 !important; } .pui-border-amber-600 { border-color: #FFB300 !important; } .pui-bg-amber-700 { color: #fff !important; border-color: #FFA000 !important; background-color: #FFA000 !important; } .pui-text-amber-700 { color: #FFA000 !important; } .pui-border-amber-700 { border-color: #FFA000 !important; } .pui-bg-amber-800 { color: #fff !important; border-color: #FF8F00 !important; background-color: #FF8F00 !important; } .pui-text-amber-800 { color: #FF8F00 !important; } .pui-border-amber-800 { border-color: #FF8F00 !important; } .pui-bg-amber-900 { color: #fff !important; border-color: #FF6F00 !important; background-color: #FF6F00 !important; } .pui-text-amber-900 { color: #FF6F00 !important; } .pui-border-amber-900 { border-color: #FF6F00 !important; } .pui-bg-amber-A100 { color: #fff !important; border-color: #FFE57F !important; background-color: #FFE57F !important; } .pui-text-amber-A100 { color: #FFE57F !important; } .pui-border-amber-A100 { border-color: #FFE57F !important; } .pui-bg-amber-A200 { color: #fff !important; border-color: #FFD740 !important; background-color: #FFD740 !important; } .pui-text-amber-A200 { color: #FFD740 !important; } .pui-border-amber-A200 { border-color: #FFD740 !important; } .pui-bg-amber-A400 { color: #fff !important; border-color: #FFC400 !important; background-color: #FFC400 !important; } .pui-text-amber-A400 { color: #FFC400 !important; } .pui-border-amber-A400 { border-color: #FFC400 !important; } .pui-bg-amber-A700 { color: #fff !important; border-color: #FFAB00 !important; background-color: #FFAB00 !important; } .pui-text-amber-A700 { color: #FFAB00 !important; } .pui-border-amber-A700 { border-color: #FFAB00 !important; } .pui-bg-orange-50 { color: #fff !important; border-color: #FFF3E0 !important; background-color: #FFF3E0 !important; } .pui-text-orange-50 { color: #FFF3E0 !important; } .pui-border-orange-50 { border-color: #FFF3E0 !important; } .pui-bg-orange-100 { color: #fff !important; border-color: #FFE0B2 !important; background-color: #FFE0B2 !important; } .pui-text-orange-100 { color: #FFE0B2 !important; } .pui-border-orange-100 { border-color: #FFE0B2 !important; } .pui-bg-orange-200 { color: #fff !important; border-color: #FFCC80 !important; background-color: #FFCC80 !important; } .pui-text-orange-200 { color: #FFCC80 !important; } .pui-border-orange-200 { border-color: #FFCC80 !important; } .pui-bg-orange-300 { color: #fff !important; border-color: #FFB74D !important; background-color: #FFB74D !important; } .pui-text-orange-300 { color: #FFB74D !important; } .pui-border-orange-300 { border-color: #FFB74D !important; } .pui-bg-orange-400 { color: #fff !important; border-color: #FFA726 !important; background-color: #FFA726 !important; } .pui-text-orange-400 { color: #FFA726 !important; } .pui-border-orange-400 { border-color: #FFA726 !important; } .pui-bg-orange, .pui-bg-orange-500 { color: #fff !important; border-color: #FF9800 !important; background-color: #FF9800 !important; } .pui-text-orange, .pui-text-orange-500 { color: #FF9800 !important; } .pui-border-orange, .pui-border-orange-500 { border-color: #FF9800 !important; } .pui-bg-orange-600 { color: #fff !important; border-color: #FB8C00 !important; background-color: #FB8C00 !important; } .pui-text-orange-600 { color: #FB8C00 !important; } .pui-border-orange-600 { border-color: #FB8C00 !important; } .pui-bg-orange-700 { color: #fff !important; border-color: #F57C00 !important; background-color: #F57C00 !important; } .pui-text-orange-700 { color: #F57C00 !important; } .pui-border-orange-700 { border-color: #F57C00 !important; } .pui-bg-orange-800 { color: #fff !important; border-color: #EF6C00 !important; background-color: #EF6C00 !important; } .pui-text-orange-800 { color: #EF6C00 !important; } .pui-border-orange-800 { border-color: #EF6C00 !important; } .pui-bg-orange-900 { color: #fff !important; border-color: #E65100 !important; background-color: #E65100 !important; } .pui-text-orange-900 { color: #E65100 !important; } .pui-border-orange-900 { border-color: #E65100 !important; } .pui-bg-orange-A100 { color: #fff !important; border-color: #FFD180 !important; background-color: #FFD180 !important; } .pui-text-orange-A100 { color: #FFD180 !important; } .pui-border-orange-A100 { border-color: #FFD180 !important; } .pui-bg-orange-A200 { color: #fff !important; border-color: #FFAB40 !important; background-color: #FFAB40 !important; } .pui-text-orange-A200 { color: #FFAB40 !important; } .pui-border-orange-A200 { border-color: #FFAB40 !important; } .pui-bg-orange-A400 { color: #fff !important; border-color: #FF9100 !important; background-color: #FF9100 !important; } .pui-text-orange-A400 { color: #FF9100 !important; } .pui-border-orange-A400 { border-color: #FF9100 !important; } .pui-bg-orange-A700 { color: #fff !important; border-color: #FF6D00 !important; background-color: #FF6D00 !important; } .pui-text-orange-A700 { color: #FF6D00 !important; } .pui-border-orange-A700 { border-color: #FF6D00 !important; } .pui-bg-deep-orange-50 { color: #fff !important; border-color: #FBE9E7 !important; background-color: #FBE9E7 !important; } .pui-text-deep-orange-50 { color: #FBE9E7 !important; } .pui-border-deep-orange-50 { border-color: #FBE9E7 !important; } .pui-bg-deep-orange-100 { color: #fff !important; border-color: #FFCCBC !important; background-color: #FFCCBC !important; } .pui-text-deep-orange-100 { color: #FFCCBC !important; } .pui-border-deep-orange-100 { border-color: #FFCCBC !important; } .pui-bg-deep-orange-200 { color: #fff !important; border-color: #FFAB91 !important; background-color: #FFAB91 !important; } .pui-text-deep-orange-200 { color: #FFAB91 !important; } .pui-border-deep-orange-200 { border-color: #FFAB91 !important; } .pui-bg-deep-orange-300 { color: #fff !important; border-color: #FF8A65 !important; background-color: #FF8A65 !important; } .pui-text-deep-orange-300 { color: #FF8A65 !important; } .pui-border-deep-orange-300 { border-color: #FF8A65 !important; } .pui-bg-deep-orange-400 { color: #fff !important; border-color: #FF7043 !important; background-color: #FF7043 !important; } .pui-text-deep-orange-400 { color: #FF7043 !important; } .pui-border-deep-orange-400 { border-color: #FF7043 !important; } .pui-bg-deep-orange, .pui-bg-deep-orange-500 { color: #fff !important; border-color: #FF5722 !important; background-color: #FF5722 !important; } .pui-text-deep-orange, .pui-text-deep-orange-500 { color: #FF5722 !important; } .pui-border-deep-orange, .pui-border-deep-orange-500 { border-color: #FF5722 !important; } .pui-bg-deep-orange-600 { color: #fff !important; border-color: #F4511E !important; background-color: #F4511E !important; } .pui-text-deep-orange-600 { color: #F4511E !important; } .pui-border-deep-orange-600 { border-color: #F4511E !important; } .pui-bg-deep-orange-700 { color: #fff !important; border-color: #E64A19 !important; background-color: #E64A19 !important; } .pui-text-deep-orange-700 { color: #E64A19 !important; } .pui-border-deep-orange-700 { border-color: #E64A19 !important; } .pui-bg-deep-orange-800 { color: #fff !important; border-color: #D84315 !important; background-color: #D84315 !important; } .pui-text-deep-orange-800 { color: #D84315 !important; } .pui-border-deep-orange-800 { border-color: #D84315 !important; } .pui-bg-deep-orange-900 { color: #fff !important; border-color: #BF360C !important; background-color: #BF360C !important; } .pui-text-deep-orange-900 { color: #BF360C !important; } .pui-border-deep-orange-900 { border-color: #BF360C !important; } .pui-bg-deep-orange-A100 { color: #fff !important; border-color: #FF9E80 !important; background-color: #FF9E80 !important; } .pui-text-deep-orange-A100 { color: #FF9E80 !important; } .pui-border-deep-orange-A100 { border-color: #FF9E80 !important; } .pui-bg-deep-orange-A200 { color: #fff !important; border-color: #FF6E40 !important; background-color: #FF6E40 !important; } .pui-text-deep-orange-A200 { color: #FF6E40 !important; } .pui-border-deep-orange-A200 { border-color: #FF6E40 !important; } .pui-bg-deep-orange-A400 { color: #fff !important; border-color: #FF3D00 !important; background-color: #FF3D00 !important; } .pui-text-deep-orange-A400 { color: #FF3D00 !important; } .pui-border-deep-orange-A400 { border-color: #FF3D00 !important; } .pui-bg-deep-orange-A700 { color: #fff !important; border-color: #DD2C00 !important; background-color: #DD2C00 !important; } .pui-text-deep-orange-A700 { color: #DD2C00 !important; } .pui-border-deep-orange-A700 { border-color: #DD2C00 !important; } .pui-bg-brown-50 { color: #fff !important; border-color: #EFEBE9 !important; background-color: #EFEBE9 !important; } .pui-text-brown-50 { color: #EFEBE9 !important; } .pui-border-brown-50 { border-color: #EFEBE9 !important; } .pui-bg-brown-100 { color: #fff !important; border-color: #D7CCC8 !important; background-color: #D7CCC8 !important; } .pui-text-brown-100 { color: #D7CCC8 !important; } .pui-border-brown-100 { border-color: #D7CCC8 !important; } .pui-bg-brown-200 { color: #fff !important; border-color: #BCAAA4 !important; background-color: #BCAAA4 !important; } .pui-text-brown-200 { color: #BCAAA4 !important; } .pui-border-brown-200 { border-color: #BCAAA4 !important; } .pui-bg-brown-300 { color: #fff !important; border-color: #A1887F !important; background-color: #A1887F !important; } .pui-text-brown-300 { color: #A1887F !important; } .pui-border-brown-300 { border-color: #A1887F !important; } .pui-bg-brown-400 { color: #fff !important; border-color: #8D6E63 !important; background-color: #8D6E63 !important; } .pui-text-brown-400 { color: #8D6E63 !important; } .pui-border-brown-400 { border-color: #8D6E63 !important; } .pui-bg-brown, .pui-bg-brown-500 { color: #fff !important; border-color: #795548 !important; background-color: #795548 !important; } .pui-text-brown, .pui-text-brown-500 { color: #795548 !important; } .pui-border-brown, .pui-border-brown-500 { border-color: #795548 !important; } .pui-bg-brown-600 { color: #fff !important; border-color: #6D4C41 !important; background-color: #6D4C41 !important; } .pui-text-brown-600 { color: #6D4C41 !important; } .pui-border-brown-600 { border-color: #6D4C41 !important; } .pui-bg-brown-700 { color: #fff !important; border-color: #5D4037 !important; background-color: #5D4037 !important; } .pui-text-brown-700 { color: #5D4037 !important; } .pui-border-brown-700 { border-color: #5D4037 !important; } .pui-bg-brown-800 { color: #fff !important; border-color: #4E342E !important; background-color: #4E342E !important; } .pui-text-brown-800 { color: #4E342E !important; } .pui-border-brown-800 { border-color: #4E342E !important; } .pui-bg-brown-900 { color: #fff !important; border-color: #3E2723 !important; background-color: #3E2723 !important; } .pui-text-brown-900 { color: #3E2723 !important; } .pui-border-brown-900 { border-color: #3E2723 !important; } .pui-bg-grey-50 { color: #fff !important; border-color: #FAFAFA !important; background-color: #FAFAFA !important; } .pui-text-grey-50 { color: #FAFAFA !important; } .pui-border-grey-50 { border-color: #FAFAFA !important; } .pui-bg-grey-100 { color: #fff !important; border-color: #F5F5F5 !important; background-color: #F5F5F5 !important; } .pui-text-grey-100 { color: #F5F5F5 !important; } .pui-border-grey-100 { border-color: #F5F5F5 !important; } .pui-bg-grey-200 { color: #fff !important; border-color: #EEEEEE !important; background-color: #EEEEEE !important; } .pui-text-grey-200 { color: #EEEEEE !important; } .pui-border-grey-200 { border-color: #EEEEEE !important; } .pui-bg-grey-300 { color: #fff !important; border-color: #E0E0E0 !important; background-color: #E0E0E0 !important; } .pui-text-grey-300 { color: #E0E0E0 !important; } .pui-border-grey-300 { border-color: #E0E0E0 !important; } .pui-bg-grey-400 { color: #fff !important; border-color: #BDBDBD !important; background-color: #BDBDBD !important; } .pui-text-grey-400 { color: #BDBDBD !important; } .pui-border-grey-400 { border-color: #BDBDBD !important; } .pui-bg-grey, .pui-bg-grey-500 { color: #fff !important; border-color: #9E9E9E !important; background-color: #9E9E9E !important; } .pui-text-grey, .pui-text-grey-500 { color: #9E9E9E !important; } .pui-border-grey, .pui-border-grey-500 { border-color: #9E9E9E !important; } .pui-bg-grey-600 { color: #fff !important; border-color: #757575 !important; background-color: #757575 !important; } .pui-text-grey-600 { color: #757575 !important; } .pui-border-grey-600 { border-color: #757575 !important; } .pui-bg-grey-700 { color: #fff !important; border-color: #616161 !important; background-color: #616161 !important; } .pui-text-grey-700 { color: #616161 !important; } .pui-border-grey-700 { border-color: #616161 !important; } .pui-bg-grey-800 { color: #fff !important; border-color: #424242 !important; background-color: #424242 !important; } .pui-text-grey-800 { color: #424242 !important; } .pui-border-grey-800 { border-color: #424242 !important; } .pui-bg-grey-900 { color: #fff !important; border-color: #212121 !important; background-color: #212121 !important; } .pui-text-grey-900 { color: #212121 !important; } .pui-border-grey-900 { border-color: #212121 !important; } .pui-bg-blue-grey-50 { color: #fff !important; border-color: #ECEFF1 !important; background-color: #ECEFF1 !important; } .pui-text-blue-grey-50 { color: #ECEFF1 !important; } .pui-border-blue-grey-50 { border-color: #ECEFF1 !important; } .pui-bg-blue-grey-100 { color: #fff !important; border-color: #CFD8DC !important; background-color: #CFD8DC !important; } .pui-text-blue-grey-100 { color: #CFD8DC !important; } .pui-border-blue-grey-100 { border-color: #CFD8DC !important; } .pui-bg-blue-grey-200 { color: #fff !important; border-color: #B0BEC5 !important; background-color: #B0BEC5 !important; } .pui-text-blue-grey-200 { color: #B0BEC5 !important; } .pui-border-blue-grey-200 { border-color: #B0BEC5 !important; } .pui-bg-blue-grey-300 { color: #fff !important; border-color: #90A4AE !important; background-color: #90A4AE !important; } .pui-text-blue-grey-300 { color: #90A4AE !important; } .pui-border-blue-grey-300 { border-color: #90A4AE !important; } .pui-bg-blue-grey-400 { color: #fff !important; border-color: #78909C !important; background-color: #78909C !important; } .pui-text-blue-grey-400 { color: #78909C !important; } .pui-border-blue-grey-400 { border-color: #78909C !important; } .pui-bg-blue-grey, .pui-bg-blue-grey-500 { color: #fff !important; border-color: #607D8B !important; background-color: #607D8B !important; } .pui-text-blue-grey, .pui-text-blue-grey-500 { color: #607D8B !important; } .pui-border-blue-grey, .pui-border-blue-grey-500 { border-color: #607D8B !important; } .pui-bg-blue-grey-600 { color: #fff !important; border-color: #546E7A !important; background-color: #546E7A !important; } .pui-text-blue-grey-600 { color: #546E7A !important; } .pui-border-blue-grey-600 { border-color: #546E7A !important; } .pui-bg-blue-grey-700 { color: #fff !important; border-color: #455A64 !important; background-color: #455A64 !important; } .pui-text-blue-grey-700 { color: #455A64 !important; } .pui-border-blue-grey-700 { border-color: #455A64 !important; } .pui-bg-blue-grey-800 { color: #fff !important; border-color: #37474F !important; background-color: #37474F !important; } .pui-text-blue-grey-800 { color: #37474F !important; } .pui-border-blue-grey-800 { border-color: #37474F !important; } .pui-bg-blue-grey-900 { color: #fff !important; border-color: #263238 !important; background-color: #263238 !important; } .pui-text-blue-grey-900 { color: #263238 !important; } .pui-border-blue-grey-900 { border-color: #263238 !important; } .pui-bg-black, .pui-bg-black-500 { color: #fff !important; border-color: #000000 !important; background-color: #000000 !important; } .pui-text-black, .pui-text-black-500 { color: #000000 !important; } .pui-border-black, .pui-border-black-500 { border-color: #000000 !important; } .pui-bg-white, .pui-bg-white-500 { color: #fff !important; border-color: #FFFFFF !important; background-color: #FFFFFF !important; } .pui-text-white, .pui-text-white-500 { color: #FFFFFF !important; } .pui-border-white, .pui-border-white-500 { border-color: #FFFFFF !important; } .pui-white, .pui-white-500 { color: #666 !important; } .pui-user-unselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* headers */ h1, h2, h3, h4, h5, h6, .pui-h1, .pui-h2, .pui-h3, .pui-h4, .pui-h5, .pui-h6 { margin-bottom: 10px; margin-bottom: 1rem; font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", Heiti, "黑体"; } .pui-h1, h1 { font-size: 30px; font-size: 3rem; } .pui-h2, h2 { font-size: 24px; font-size: 2.4rem; } .pui-h3, h3 { font-size: 18px; font-size: 1.8rem; } .pui-h4, h4 { font-size: 18px; font-size: 1.8rem; } .pui-h5, h5 { font-size: 16px; font-size: 1.6rem; } .pui-h6, h6 { font-size: 14px; font-size: 1.4rem; } /* font-size */ .pui-f12 { font-size: 1.2 rem !important; } .pui-f13 { font-size: 1.3 rem !important; } .pui-f14 { font-size: 1.4 rem !important; } .pui-f15 { font-size: 1.5 rem !important; } .pui-f16 { font-size: 1.6 rem !important; } .pui-f17 { font-size: 1.7 rem !important; } .pui-f18 { font-size: 1.8 rem !important; } .pui-f19 { font-size: 1.9 rem !important; } .pui-f20 { font-size: 2 rem !important; } .pui-f21 { font-size: 2.1 rem !important; } .pui-f22 { font-size: 2.2 rem !important; } .pui-f23 { font-size: 2.3 rem !important; } .pui-f24 { font-size: 2.4 rem !important; } .pui-f25 { font-size: 2.5 rem !important; } .pui-f26 { font-size: 2.6 rem !important; } .pui-f27 { font-size: 2.7 rem !important; } .pui-f28 { font-size: 2.8 rem !important; } .pui-f29 { font-size: 2.9 rem !important; } .pui-f30 { font-size: 3 rem !important; } .pui-f31 { font-size: 3.1 rem !important; } .pui-f32 { font-size: 3.2 rem !important; } .pui-f33 { font-size: 3.3 rem !important; } .pui-f34 { font-size: 3.4 rem !important; } .pui-f35 { font-size: 3.5 rem !important; } .pui-f36 { font-size: 3.6 rem !important; } .pui-f37 { font-size: 3.7 rem !important; } .pui-f38 { font-size: 3.8 rem !important; } .pui-f39 { font-size: 3.9 rem !important; } .pui-f40 { font-size: 4 rem !important; } .pui-f41 { font-size: 4.1 rem !important; } .pui-f42 { font-size: 4.2 rem !important; } .pui-f43 { font-size: 4.3 rem !important; } .pui-f44 { font-size: 4.4 rem !important; } .pui-f45 { font-size: 4.5 rem !important; } .pui-f46 { font-size: 4.6 rem !important; } .pui-f47 { font-size: 4.7 rem !important; } .pui-f48 { font-size: 4.8 rem !important; } /* font family */ .pui-font-serif { font-fmaily: serif, "宋体" !important; } .pui-font-arial { font-fmaily: Arial, sans-serif, "宋体" !important; } .pui-font-shongti { font-fmaily: SimSun, "宋体" !important; } .pui-font-sans-serif { font-fmaily: sans-serif, "宋体" !important; } .pui-font-monospace { font-fmaily: monospace !important; } .pui-font-consolas { font-fmaily: consolas !important; } .pui-font-yahei { font-fmaily: Microsoft YaHei, "微软雅黑" !important; } .pui-font-kaiti { font-family: Kai, "Kaiti SC", "楷体", KaiTi,serif !important; } .pui-font-tahoma { font-family: Tahoma, Helvetica, Arial, "Helvetica Neue", sans-serif !important; } .pui-font-helvetica { font-family: Helvetica, "Helvetica Neue", Arial, Tahoma, sans-serif !important; } .pui-font-en { font-family: "OpenSansRegular", Helvetica, Tahoma, "Microsoft YaHei", Arial, SimSun, Heiti, sans-serif !important; font-weight: normal !important; } .pui-font-zh-cn { font-family: "Hiragino Sans GB", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", "Droid Sans", "wenquanyi micro hei", Helvetica, Tahoma, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif !important; font-weight: normal !important; } *.pui-font-open-sans-regular, .pui-font-open-sans-regular { font-family: 'OpenSansRegular' !important; font-weight: normal !important; } /* font weight */ .pui-font-normal, .pui-text-normal { font-weight: normal !important; } .pui-font-bold, .pui-text-bold { font-weight: bold !important; } .pui-font-bolder, .pui-text-bolder { font-weight: bolder !important; } .pui-font-lighter, .pui-text-lighter { font-weight: lighter !important; } /* text align */ .pui-text-left, .pui-text-left-all > * { text-align: left !important; } .pui-text-right, .pui-text-right-all > * { text-align: right !important; } .pui-text-center, .pui-text-center-all > * { text-align: center !important; } .pui-text-justify, .pui-text-justify-all > * { text-align: justify !important; } .pui-text-top, .pui-vertical-top { vertical-align: top !important; } .pui-text-middle, .pui-vertical-middle { vertical-align: middle !important; } .pui-text-bottom, .pui-vertical-bottom { vertical-align: bottom !important; } /* text colors */ .pui-text-none { color: none !important; } .pui-text-white { color: white !important; } .pui-text-red { color: red !important; } .pui-text-green { color: green !important; } .pui-text-orange { color: orange !important; } .pui-text-gray { color: gray !important; } .pui-text-black { color: black !important; } .pui-text-yellow { color: yellow !important; } .pui-text-purple { color: purple !important; } .pui-text-brown { color: brown !important; } .pui-text-beige { color: beige !important; } .pui-text-khaki { color: khaki !important; } .pui-text-navy { color: navy !important; } .pui-text-pink { color: pink !important; } .pui-text-plum { color: plum !important; } .pui-text-teal { color: teal !important; } .pui-text-aqua { color: aqua !important; } .pui-text-silver { color: silver !important; } .pui-text-fuchsia { color: fuchsia !important; } .pui-text-maroon { color: maroon !important; } .pui-text-olive { color: olive !important; } .pui-text-lime { color: lime !important; } .pui-text-gary { color: #DDDDDD !important; } .pui-text-primary { color: #008EE5 !important; } .pui-text-secondary { color: #3BB4F2 !important; } .pui-text-info { color: #2EAAC6 !important; } .pui-text-success { color: #71B472 !important; } .pui-text-warning { color: #FFB74D !important; } .pui-text-error { color: #E87467 !important; } .pui-text-indent { text-indent: 21pt; } /* text/font size */ .pui-text-xxs { font-size: 10px !important; font-size: 1rem !important; } .pui-text-xs { font-size: 12px !important; font-size: 1.2rem !important; } .pui-text-sm { font-size: 14px !important; font-size: 1.4rem !important; } .pui-text-md { font-size: 16px !important; font-size: 1.6rem !important; } .pui-text-lg { font-size: 18px !important; font-size: 1.8rem !important; } .pui-text-xl { font-size: 20px !important; font-size: 2rem !important; } .pui-text-xxl { font-size: 24px !important; font-size: 2.4rem !important; } .pui-text-xxxl { font-size: 32px !important; font-size: 3.2rem !important; } .pui-text-xxxxl { font-size: 40px !important; font-size: 4rem !important; } .pui-text-xxxxxl { font-size: 48px !important; font-size: 4.8rem !important; } /* text other */ .pui-text-shadow { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important; } .pui-text-shadow-white { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) !important; } .pui-text-shadow-none { text-shadow: none !important; } .pui-text-shadow-gary { text-shadow: 0 1px 1px rgba(221, 221, 221, 0.4) !important; } .pui-text-shadow-primary { text-shadow: 0 1px 1px rgba(0, 142, 229, 0.4) !important; } .pui-text-shadow-secondary { text-shadow: 0 1px 1px rgba(59, 180, 242, 0.4) !important; } .pui-text-shadow-info { text-shadow: 0 1px 1px rgba(46, 170, 198, 0.4) !important; } .pui-text-shadow-success { text-shadow: 0 1px 1px rgba(113, 180, 114, 0.4) !important; } .pui-text-shadow-warning { text-shadow: 0 1px 1px rgba(255, 183, 77, 0.4) !important; } .pui-text-shadow-error { text-shadow: 0 1px 1px rgba(232, 116, 103, 0.4) !important; } .pui-text-nowrap { white-space: nowrap !important; } .pui-word-break { -ms-word-break: break-all !important; word-break: break-all !important; word-wrap: break-word !important; } .pui-text-lowercase { text-transform: lowercase !important; } .pui-text-uppercase { text-transform: uppercase !important; } .pui-text-capitalize { text-transform: capitalize !important; } .pui-text-none { text-transform: none !important; } .pui-text-ellipsis { overflow: hidden !important; word-wrap: normal !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* border colors */ .pui-border-gary { border-color: #DDDDDD !important; } .pui-border-primary { border-color: #008EE5 !important; } .pui-border-secondary { border-color: #3BB4F2 !important; } .pui-border-info { border-color: #2EAAC6 !important; } .pui-border-success { border-color: #71B472 !important; } .pui-border-warning { border-color: #FFB74D !important; } .pui-border-error { border-color: #E87467 !important; } .pui-border-none { border-color: none !important; } .pui-border-white { border-color: white !important; } .pui-border-red { border-color: red !important; } .pui-border-green { border-color: green !important; } .pui-border-orange { border-color: orange !important; } .pui-border-gray { border-color: gray !important; } .pui-border-black { border-color: black !important; } .pui-border-yellow { border-color: yellow !important; } .pui-border-purple { border-color: purple !important; } .pui-border-brown { border-color: brown !important; } .pui-border-beige { border-color: beige !important; } .pui-border-khaki { border-color: khaki !important; } .pui-border-navy { border-color: navy !important; } .pui-border-pink { border-color: pink !important; } .pui-border-plum { border-color: plum !important; } .pui-border-teal { border-color: teal !important; } .pui-border-aqua { border-color: aqua !important; } .pui-border-silver { border-color: silver !important; } .pui-border-fuchsia { border-color: fuchsia !important; } .pui-border-maroon { border-color: maroon !important; } .pui-border-olive { border-color: olive !important; } .pui-border-lime { border-color: lime !important; } /* border none */ .pui-border-none, .pui-unbordered, .pui-unbordered-all > * { border: none !important; } .pui-border-top-none { border-top: none !important; } .pui-border-right-none { border-right: none !important; } .pui-border-bottom-none { border-bottom: none !important; } .pui-border-left-none { border-left: none !important; } /* border 1px */ .pui-border-1px { border: 1px solid #ddd !important; } .pui-border-dashed-1px { border: 1px dashed #ddd !important; } .pui-border-left-1px { border-left: 1px solid #ddd !important; } .pui-border-left-dashed-1px { border-left: 1px dashed #ddd !important; } .pui-border-right-1px { border-right: 1px solid #ddd !important; } .pui-border-right-dashed-1px { border-right: 1px dashed #ddd !important; } .pui-border-top-1px { border-top: 1px solid #ddd !important; } .pui-border-top-dashed-1px { border-top: 1px dashed #ddd !important; } .pui-border-bottom-1px { border-bottom: 1px solid #ddd !important; } .pui-border-bottom-dashed-1px { border-bottom: 1px dashed #ddd !important; } /* border styles */ .pui-border-dotted { border-style: dotted !important; } .pui-border-top-dotted { border-top-style: dotted !important; } .pui-border-right-dotted { border-right-style: dotted !important; } .pui-border-bottom-dotted { border-bottom-style: dotted !important; } .pui-border-left-dotted { border-left-style: dotted !important; } .pui-border-dashed { border-style: dashed !important; } .pui-border-top-dashed { border-top-style: dashed !important; } .pui-border-right-dashed { border-right-style: dashed !important; } .pui-border-bottom-dashed { border-bottom-style: dashed !important; } .pui-border-left-dashed { border-left-style: dashed !important; } .pui-border-solid { border-style: solid !important; } .pui-border-top-solid { border-top-style: solid !important; } .pui-border-right-solid { border-right-style: solid !important; } .pui-border-bottom-solid { border-bottom-style: solid !important; } .pui-border-left-solid { border-left-style: solid !important; } .pui-border-double { border-style: double !important; } .pui-border-top-double { border-top-style: double !important; } .pui-border-right-double { border-right-style: double !important; } .pui-border-bottom-double { border-bottom-style: double !important; } .pui-border-left-double { border-left-style: double !important; } /* border transparent */ .pui-border-transparent { border-color: transparent !important; } .pui-border-left-transparent { border-left-color: transparent !important; } .pui-border-right-transparent { border-right-color: transparent !important; } .pui-border-top-transparent { border-top-color: transparent !important; } .pui-border-bottom-transparent { border-bottom-color: transparent !important; } /* border-radius */ .pui-circle, .pui-circle-all > *, .pui-round, .pui-round-all > * { text-align: center; -webkit-border-radius: 500px !important; border-radius: 500px !important; } .pui-square, .pui-square-all > * { -webkit-border-radius: 0 !important; border-radius: 0 !important; } .pui-ellipse { text-align: center !important; -webkit-border-radius: 100% !important; border-radius: 100% !important; } .pui-radius-none, .pui-square, .pui-square-all > * { -webkit-border-radius: 0 !important; border-radius: 0 !important; } .pui-radius, .pui-radius-all > * { -webkit-border-radius: 4px !important; border-radius: 4px !important; } .pui-radius-tr-none { -webkit-border-top-right-radius: 0 !important; border-top-right-radius: 0 !important; } .pui-radius-tl-none { -webkit-border-top-left-radius: 0 !important; border-top-left-radius: 0 !important; } .pui-radius-br-none { -webkit-border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .pui-radius-bl-none { -webkit-border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .pui-browsehappy { color: #fff; background: #FFA726; position: fixed; *position: absolute; text-align: center; padding: 4px 0 5px; } .pui-browsehappy .pui-close { color: #fff; float: right; padding: 10px; } /* ================ Layouts ================ */ /* Layout */ .pui-layout, .pui-full-width { width: 100%; } .pui-grid, .pui-row, .pui-container, .pui-layout, .pui-full-width { margin: 0 auto; } .pui-grid:before, .pui-grid:after, .pui-row:before, .pui-row:after, .pui-container:before, .pui-container:after, .pui-layout:before, .pui-layout:after, .pui-full-width:before, .pui-full-width:after { content: " "; display: table; } .pui-grid:after, .pui-row:after, .pui-container:after, .pui-layout:after, .pui-full-width:after { clear: both; } .pui-container { padding: 0; } .pui-grid { position: relative; list-style: none; background: transparent; } .pui-grid > * > :last-child, .pui-grid > .pui-row:last-child { margin-bottom: 0; } .pui-row { position: relative; margin: 0 -10px 20px -10px; margin: 0 -1rem 2rem -1rem; } .pui-row:before, .pui-row:after { display: table; content: " "; } .pui-row:after { clear: both; } .pui-row:last-child { margin-bottom: 0; } [class*=pui-grid-] { float: left; padding: 0 10px; padding: 0 1rem; position: relative; min-height: 1px; } /* grids */ .pui-grid-xs-1 { width: 8.33333%; } .pui-grid-xs-2 { width: 16.66667%; } .pui-grid-xs-3 { width: 25%; } .pui-grid-xs-4 { width: 33.33333%; } .pui-grid-xs-5 { width: 41.66667%; } .pui-grid-xs-6 { width: 50%; } .pui-grid-xs-7 { width: 58.33333%; } .pui-grid-xs-8 { width: 66.66667%; } .pui-grid-xs-9 { width: 75%; } .pui-grid-xs-10 { width: 83.33333%; } .pui-grid-xs-11 { width: 91.66667%; } .pui-grid-xs-12 { width: 100%; } .pui-grid-xs-offset-0 { margin-left: 0%; } .pui-grid-xs-push-0 { left: 0%; } .pui-grid-xs-pull-0 { right: 0%; } .pui-grid-xs-offset-1 { margin-left: 8.33333%; } .pui-grid-xs-push-1 { left: 8.33333%; } .pui-grid-xs-pull-1 { right: 8.33333%; } .pui-grid-xs-offset-2 { margin-left: 16.66667%; } .pui-grid-xs-push-2 { left: 16.66667%; } .pui-grid-xs-pull-2 { right: 16.66667%; } .pui-grid-xs-offset-3 { margin-left: 25%; } .pui-grid-xs-push-3 { left: 25%; } .pui-grid-xs-pull-3 { right: 25%; } .pui-grid-xs-offset-4 { margin-left: 33.33333%; } .pui-grid-xs-push-4 { left: 33.33333%; } .pui-grid-xs-pull-4 { right: 33.33333%; } .pui-grid-xs-offset-5 { margin-left: 41.66667%; } .pui-grid-xs-push-5 { left: 41.66667%; } .pui-grid-xs-pull-5 { right: 41.66667%; } .pui-grid-xs-offset-6 { margin-left: 50%; } .pui-grid-xs-push-6 { left: 50%; } .pui-grid-xs-pull-6 { right: 50%; } .pui-grid-xs-offset-7 { margin-left: 58.33333%; } .pui-grid-xs-push-7 { left: 58.33333%; } .pui-grid-xs-pull-7 { right: 58.33333%; } .pui-grid-xs-offset-8 { margin-left: 66.66667%; } .pui-grid-xs-push-8 { left: 66.66667%; } .pui-grid-xs-pull-8 { right: 66.66667%; } .pui-grid-xs-offset-9 { margin-left: 75%; } .pui-grid-xs-push-9 { left: 75%; } .pui-grid-xs-pull-9 { right: 75%; } .pui-grid-xs-offset-10 { margin-left: 83.33333%; } .pui-grid-xs-push-10 { left: 83.33333%; } .pui-grid-xs-pull-10 { right: 83.33333%; } .pui-grid-xs-offset-11 { margin-left: 91.66667%; } .pui-grid-xs-push-11 { left: 91.66667%; } .pui-grid-xs-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-xs-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-xs-center { padding: 0; float: none; clear: both; margin: 0 auto; } @media (min-width: 640px) { .pui-grid-sm-1 { width: 8.33333%; } .pui-grid-sm-2 { width: 16.66667%; } .pui-grid-sm-3 { width: 25%; } .pui-grid-sm-4 { width: 33.33333%; } .pui-grid-sm-5 { width: 41.66667%; } .pui-grid-sm-6 { width: 50%; } .pui-grid-sm-7 { width: 58.33333%; } .pui-grid-sm-8 { width: 66.66667%; } .pui-grid-sm-9 { width: 75%; } .pui-grid-sm-10 { width: 83.33333%; } .pui-grid-sm-11 { width: 91.66667%; } .pui-grid-sm-12 { width: 100%; } .pui-grid-sm-offset-0 { margin-left: 0%; } .pui-grid-sm-push-0 { left: 0%; } .pui-grid-sm-pull-0 { right: 0%; } .pui-grid-sm-offset-1 { margin-left: 8.33333%; } .pui-grid-sm-push-1 { left: 8.33333%; } .pui-grid-sm-pull-1 { right: 8.33333%; } .pui-grid-sm-offset-2 { margin-left: 16.66667%; } .pui-grid-sm-push-2 { left: 16.66667%; } .pui-grid-sm-pull-2 { right: 16.66667%; } .pui-grid-sm-offset-3 { margin-left: 25%; } .pui-grid-sm-push-3 { left: 25%; } .pui-grid-sm-pull-3 { right: 25%; } .pui-grid-sm-offset-4 { margin-left: 33.33333%; } .pui-grid-sm-push-4 { left: 33.33333%; } .pui-grid-sm-pull-4 { right: 33.33333%; } .pui-grid-sm-offset-5 { margin-left: 41.66667%; } .pui-grid-sm-push-5 { left: 41.66667%; } .pui-grid-sm-pull-5 { right: 41.66667%; } .pui-grid-sm-offset-6 { margin-left: 50%; } .pui-grid-sm-push-6 { left: 50%; } .pui-grid-sm-pull-6 { right: 50%; } .pui-grid-sm-offset-7 { margin-left: 58.33333%; } .pui-grid-sm-push-7 { left: 58.33333%; } .pui-grid-sm-pull-7 { right: 58.33333%; } .pui-grid-sm-offset-8 { margin-left: 66.66667%; } .pui-grid-sm-push-8 { left: 66.66667%; } .pui-grid-sm-pull-8 { right: 66.66667%; } .pui-grid-sm-offset-9 { margin-left: 75%; } .pui-grid-sm-push-9 { left: 75%; } .pui-grid-sm-pull-9 { right: 75%; } .pui-grid-sm-offset-10 { margin-left: 83.33333%; } .pui-grid-sm-push-10 { left: 83.33333%; } .pui-grid-sm-pull-10 { right: 83.33333%; } .pui-grid-sm-offset-11 { margin-left: 91.66667%; } .pui-grid-sm-push-11 { left: 91.66667%; } .pui-grid-sm-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-sm-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-sm-center { padding: 0; float: none; clear: both; margin: 0 auto; } } @media (min-width: 768px) { .pui-grid-md-1 { width: 8.33333%; } .pui-grid-md-2 { width: 16.66667%; } .pui-grid-md-3 { width: 25%; } .pui-grid-md-4 { width: 33.33333%; } .pui-grid-md-5 { width: 41.66667%; } .pui-grid-md-6 { width: 50%; } .pui-grid-md-7 { width: 58.33333%; } .pui-grid-md-8 { width: 66.66667%; } .pui-grid-md-9 { width: 75%; } .pui-grid-md-10 { width: 83.33333%; } .pui-grid-md-11 { width: 91.66667%; } .pui-grid-md-12 { width: 100%; } .pui-grid-md-offset-0 { margin-left: 0%; } .pui-grid-md-push-0 { left: 0%; } .pui-grid-md-pull-0 { right: 0%; } .pui-grid-md-offset-1 { margin-left: 8.33333%; } .pui-grid-md-push-1 { left: 8.33333%; } .pui-grid-md-pull-1 { right: 8.33333%; } .pui-grid-md-offset-2 { margin-left: 16.66667%; } .pui-grid-md-push-2 { left: 16.66667%; } .pui-grid-md-pull-2 { right: 16.66667%; } .pui-grid-md-offset-3 { margin-left: 25%; } .pui-grid-md-push-3 { left: 25%; } .pui-grid-md-pull-3 { right: 25%; } .pui-grid-md-offset-4 { margin-left: 33.33333%; } .pui-grid-md-push-4 { left: 33.33333%; } .pui-grid-md-pull-4 { right: 33.33333%; } .pui-grid-md-offset-5 { margin-left: 41.66667%; } .pui-grid-md-push-5 { left: 41.66667%; } .pui-grid-md-pull-5 { right: 41.66667%; } .pui-grid-md-offset-6 { margin-left: 50%; } .pui-grid-md-push-6 { left: 50%; } .pui-grid-md-pull-6 { right: 50%; } .pui-grid-md-offset-7 { margin-left: 58.33333%; } .pui-grid-md-push-7 { left: 58.33333%; } .pui-grid-md-pull-7 { right: 58.33333%; } .pui-grid-md-offset-8 { margin-left: 66.66667%; } .pui-grid-md-push-8 { left: 66.66667%; } .pui-grid-md-pull-8 { right: 66.66667%; } .pui-grid-md-offset-9 { margin-left: 75%; } .pui-grid-md-push-9 { left: 75%; } .pui-grid-md-pull-9 { right: 75%; } .pui-grid-md-offset-10 { margin-left: 83.33333%; } .pui-grid-md-push-10 { left: 83.33333%; } .pui-grid-md-pull-10 { right: 83.33333%; } .pui-grid-md-offset-11 { margin-left: 91.66667%; } .pui-grid-md-push-11 { left: 91.66667%; } .pui-grid-md-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-md-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-md-center { padding: 0; float: none; clear: both; margin: 0 auto; } } @media (min-width: 992px) { .pui-grid-lg-1 { width: 8.33333%; } .pui-grid-lg-2 { width: 16.66667%; } .pui-grid-lg-3 { width: 25%; } .pui-grid-lg-4 { width: 33.33333%; } .pui-grid-lg-5 { width: 41.66667%; } .pui-grid-lg-6 { width: 50%; } .pui-grid-lg-7 { width: 58.33333%; } .pui-grid-lg-8 { width: 66.66667%; } .pui-grid-lg-9 { width: 75%; } .pui-grid-lg-10 { width: 83.33333%; } .pui-grid-lg-11 { width: 91.66667%; } .pui-grid-lg-12 { width: 100%; } .pui-grid-lg-offset-0 { margin-left: 0%; } .pui-grid-lg-push-0 { left: 0%; } .pui-grid-lg-pull-0 { right: 0%; } .pui-grid-lg-offset-1 { margin-left: 8.33333%; } .pui-grid-lg-push-1 { left: 8.33333%; } .pui-grid-lg-pull-1 { right: 8.33333%; } .pui-grid-lg-offset-2 { margin-left: 16.66667%; } .pui-grid-lg-push-2 { left: 16.66667%; } .pui-grid-lg-pull-2 { right: 16.66667%; } .pui-grid-lg-offset-3 { margin-left: 25%; } .pui-grid-lg-push-3 { left: 25%; } .pui-grid-lg-pull-3 { right: 25%; } .pui-grid-lg-offset-4 { margin-left: 33.33333%; } .pui-grid-lg-push-4 { left: 33.33333%; } .pui-grid-lg-pull-4 { right: 33.33333%; } .pui-grid-lg-offset-5 { margin-left: 41.66667%; } .pui-grid-lg-push-5 { left: 41.66667%; } .pui-grid-lg-pull-5 { right: 41.66667%; } .pui-grid-lg-offset-6 { margin-left: 50%; } .pui-grid-lg-push-6 { left: 50%; } .pui-grid-lg-pull-6 { right: 50%; } .pui-grid-lg-offset-7 { margin-left: 58.33333%; } .pui-grid-lg-push-7 { left: 58.33333%; } .pui-grid-lg-pull-7 { right: 58.33333%; } .pui-grid-lg-offset-8 { margin-left: 66.66667%; } .pui-grid-lg-push-8 { left: 66.66667%; } .pui-grid-lg-pull-8 { right: 66.66667%; } .pui-grid-lg-offset-9 { margin-left: 75%; } .pui-grid-lg-push-9 { left: 75%; } .pui-grid-lg-pull-9 { right: 75%; } .pui-grid-lg-offset-10 { margin-left: 83.33333%; } .pui-grid-lg-push-10 { left: 83.33333%; } .pui-grid-lg-pull-10 { right: 83.33333%; } .pui-grid-lg-offset-11 { margin-left: 91.66667%; } .pui-grid-lg-push-11 { left: 91.66667%; } .pui-grid-lg-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-lg-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-lg-center { padding: 0; float: none; clear: both; margin: 0 auto; } } @media (min-width: 1200px) { .pui-grid-xl-1 { width: 8.33333%; } .pui-grid-xl-2 { width: 16.66667%; } .pui-grid-xl-3 { width: 25%; } .pui-grid-xl-4 { width: 33.33333%; } .pui-grid-xl-5 { width: 41.66667%; } .pui-grid-xl-6 { width: 50%; } .pui-grid-xl-7 { width: 58.33333%; } .pui-grid-xl-8 { width: 66.66667%; } .pui-grid-xl-9 { width: 75%; } .pui-grid-xl-10 { width: 83.33333%; } .pui-grid-xl-11 { width: 91.66667%; } .pui-grid-xl-12 { width: 100%; } .pui-grid-xl-offset-0 { margin-left: 0%; } .pui-grid-xl-push-0 { left: 0%; } .pui-grid-xl-pull-0 { right: 0%; } .pui-grid-xl-offset-1 { margin-left: 8.33333%; } .pui-grid-xl-push-1 { left: 8.33333%; } .pui-grid-xl-pull-1 { right: 8.33333%; } .pui-grid-xl-offset-2 { margin-left: 16.66667%; } .pui-grid-xl-push-2 { left: 16.66667%; } .pui-grid-xl-pull-2 { right: 16.66667%; } .pui-grid-xl-offset-3 { margin-left: 25%; } .pui-grid-xl-push-3 { left: 25%; } .pui-grid-xl-pull-3 { right: 25%; } .pui-grid-xl-offset-4 { margin-left: 33.33333%; } .pui-grid-xl-push-4 { left: 33.33333%; } .pui-grid-xl-pull-4 { right: 33.33333%; } .pui-grid-xl-offset-5 { margin-left: 41.66667%; } .pui-grid-xl-push-5 { left: 41.66667%; } .pui-grid-xl-pull-5 { right: 41.66667%; } .pui-grid-xl-offset-6 { margin-left: 50%; } .pui-grid-xl-push-6 { left: 50%; } .pui-grid-xl-pull-6 { right: 50%; } .pui-grid-xl-offset-7 { margin-left: 58.33333%; } .pui-grid-xl-push-7 { left: 58.33333%; } .pui-grid-xl-pull-7 { right: 58.33333%; } .pui-grid-xl-offset-8 { margin-left: 66.66667%; } .pui-grid-xl-push-8 { left: 66.66667%; } .pui-grid-xl-pull-8 { right: 66.66667%; } .pui-grid-xl-offset-9 { margin-left: 75%; } .pui-grid-xl-push-9 { left: 75%; } .pui-grid-xl-pull-9 { right: 75%; } .pui-grid-xl-offset-10 { margin-left: 83.33333%; } .pui-grid-xl-push-10 { left: 83.33333%; } .pui-grid-xl-pull-10 { right: 83.33333%; } .pui-grid-xl-offset-11 { margin-left: 91.66667%; } .pui-grid-xl-push-11 { left: 91.66667%; } .pui-grid-xl-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-xl-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-xl-center { padding: 0; float: none; clear: both; margin: 0 auto; } } @media (min-width: 1400px) { .pui-grid-xxl-1 { width: 8.33333%; } .pui-grid-xxl-2 { width: 16.66667%; } .pui-grid-xxl-3 { width: 25%; } .pui-grid-xxl-4 { width: 33.33333%; } .pui-grid-xxl-5 { width: 41.66667%; } .pui-grid-xxl-6 { width: 50%; } .pui-grid-xxl-7 { width: 58.33333%; } .pui-grid-xxl-8 { width: 66.66667%; } .pui-grid-xxl-9 { width: 75%; } .pui-grid-xxl-10 { width: 83.33333%; } .pui-grid-xxl-11 { width: 91.66667%; } .pui-grid-xxl-12 { width: 100%; } .pui-grid-xxl-offset-0 { margin-left: 0%; } .pui-grid-xxl-push-0 { left: 0%; } .pui-grid-xxl-pull-0 { right: 0%; } .pui-grid-xxl-offset-1 { margin-left: 8.33333%; } .pui-grid-xxl-push-1 { left: 8.33333%; } .pui-grid-xxl-pull-1 { right: 8.33333%; } .pui-grid-xxl-offset-2 { margin-left: 16.66667%; } .pui-grid-xxl-push-2 { left: 16.66667%; } .pui-grid-xxl-pull-2 { right: 16.66667%; } .pui-grid-xxl-offset-3 { margin-left: 25%; } .pui-grid-xxl-push-3 { left: 25%; } .pui-grid-xxl-pull-3 { right: 25%; } .pui-grid-xxl-offset-4 { margin-left: 33.33333%; } .pui-grid-xxl-push-4 { left: 33.33333%; } .pui-grid-xxl-pull-4 { right: 33.33333%; } .pui-grid-xxl-offset-5 { margin-left: 41.66667%; } .pui-grid-xxl-push-5 { left: 41.66667%; } .pui-grid-xxl-pull-5 { right: 41.66667%; } .pui-grid-xxl-offset-6 { margin-left: 50%; } .pui-grid-xxl-push-6 { left: 50%; } .pui-grid-xxl-pull-6 { right: 50%; } .pui-grid-xxl-offset-7 { margin-left: 58.33333%; } .pui-grid-xxl-push-7 { left: 58.33333%; } .pui-grid-xxl-pull-7 { right: 58.33333%; } .pui-grid-xxl-offset-8 { margin-left: 66.66667%; } .pui-grid-xxl-push-8 { left: 66.66667%; } .pui-grid-xxl-pull-8 { right: 66.66667%; } .pui-grid-xxl-offset-9 { margin-left: 75%; } .pui-grid-xxl-push-9 { left: 75%; } .pui-grid-xxl-pull-9 { right: 75%; } .pui-grid-xxl-offset-10 { margin-left: 83.33333%; } .pui-grid-xxl-push-10 { left: 83.33333%; } .pui-grid-xxl-pull-10 { right: 83.33333%; } .pui-grid-xxl-offset-11 { margin-left: 91.66667%; } .pui-grid-xxl-push-11 { left: 91.66667%; } .pui-grid-xxl-pull-11 { right: 91.66667%; } .pui-row > [class*="pui-grid-"].pui-grid-xxl-uncentered { float: left; clear: none; margin: 0; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-xxl-center { padding: 0; float: none; clear: both; margin: 0 auto; } } .pui-row > [class*="pui-grid-"].pui-grid-uncentered { float: left; clear: none; margin: 0; padding: 0 10px; padding: 0 1rem; } .pui-row > [class*="pui-grid-"].pui-grid-center { padding: 0; float: none; clear: both; margin: 0 auto; } /* grid margin */ .pui-grid.pui-grid-margin-none { width: 100%; padding: 0; } .pui-grid.pui-grid-margin-none .pui-row { margin: 0; padding: 0; } .pui-grid.pui-grid-margin-none .pui-row > [class*=pui-grid-] { padding: 0; } .pui-grid.pui-grid-margin-lg { width: 100%; padding: 0; } .pui-grid.pui-grid-margin-lg .pui-row { padding: 0; margin: 0 -15px 30px -15px; margin: 0 -1.5rem 3rem -1.5rem; } .pui-grid.pui-grid-margin-lg .pui-row > [class*=pui-grid-] { padding: 0 15px; padding: 0 1.5rem; } .pui-grid.pui-grid-margin-lg .pui-row:last-child { margin-bottom: 0; } .pui-grid > .pui-row > [class*=pui-grid-] > .pui-row:last-child, .pui-grid > .pui-row:last-child { margin-bottom: 0; } /* Layout Responsives */ @media (max-width: 240px) { .pui-row > [class*=pui-grid-] { width: 100%; } } /* Responsives Display */ .pui-xs-show, .pui-sm-show, .pui-md-show, .pui-lg-show, .pui-xl-show, .pui-xxl-show, .pui-xs-block, .pui-sm-block, .pui-md-block, .pui-lg-block, .pui-xl-block, .pui-xxl-block, .pui-xs-inline, .pui-sm-inline, .pui-md-inline, .pui-lg-inline, .pui-xl-inline, .pui-xxl-inline, .pui-xs-inline-block, .pui-sm-inline-block, .pui-md-inline-block, .pui-lg-inline-block, .pui-xl-inline-block, .pui-xxl-inline-block { display: none !important; } @media (max-width: 639px) { .pui-xs-show { display: block !important; } .pui-xs-hide { display: none !important; } .pui-xs-block { display: block !important; } .pui-xs-inline { display: inline !important; } .pui-xs-inline-block { display: inline-block !important; } table.pui-xs-show { display: table !important; } tr.pui-xs-show { display: table-row !important; } th.pui-xs-show, td.pui-xs-show { display: table-cell !important; } .pui-xs-float-left { float: left !important; } .pui-xs-float-right { float: right !important; } .pui-xs-float-none { float: none !important; } } @media (min-width: 640px) and (max-width: 767px) { .pui-sm-show { display: block !important; } .pui-sm-hide { display: none !important; } .pui-sm-block { display: block !important; } .pui-sm-inline { display: inline !important; } .pui-sm-inline-block { display: inline-block !important; } table.pui-sm-show { display: table !important; } tr.pui-sm-show { display: table-row !important; } th.pui-sm-show, td.pui-sm-show { display: table-cell !important; } .pui-sm-float-left { float: left !important; } .pui-sm-float-right { float: right !important; } .pui-sm-float-none { float: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui-md-show { display: block !important; } .pui-md-hide { display: none !important; } .pui-md-block { display: block !important; } .pui-md-inline { display: inline !important; } .pui-md-inline-block { display: inline-block !important; } table.pui-md-show { display: table !important; } tr.pui-md-show { display: table-row !important; } th.pui-md-show, td.pui-md-show { display: table-cell !important; } .pui-md-float-left { float: left !important; } .pui-md-float-right { float: right !important; } .pui-md-float-none { float: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui-lg-show { display: block !important; } .pui-lg-hide { display: none !important; } .pui-lg-block { display: block !important; } .pui-lg-inline { display: inline !important; } .pui-lg-inline-block { display: inline-block !important; } table.pui-lg-show { display: table !important; } tr.pui-lg-show { display: table-row !important; } th.pui-lg-show, td.pui-lg-show { display: table-cell !important; } .pui-lg-float-left { float: left !important; } .pui-lg-float-right { float: right !important; } .pui-lg-float-none { float: none !important; } } @media (min-width: 1200px) and (max-width: 1399px) { .pui-xl-show { display: block !important; } .pui-xl-hide { display: none !important; } .pui-xl-block { display: block !important; } .pui-xl-inline { display: inline !important; } .pui-xl-inline-block { display: inline-block !important; } table.pui-xl-show { display: table !important; } tr.pui-xl-show { display: table-row !important; } th.pui-xl-show, td.pui-xl-show { display: table-cell !important; } .pui-xl-float-left { float: left !important; } .pui-xl-float-right { float: right !important; } .pui-xl-float-none { float: none !important; } } @media (min-width: 1400px) { .pui-xxl-show { display: block !important; } .pui-xxl-hide { display: none !important; } .pui-xxl-block { display: block !important; } .pui-xxl-inline { display: inline !important; } .pui-xxl-inline-block { display: inline-block !important; } table.pui-xxl-show { display: table !important; } tr.pui-xxl-show { display: table-row !important; } th.pui-xxl-show, td.pui-xxl-show { display: table-cell !important; } .pui-xxl-float-left { float: left !important; } .pui-xxl-float-right { float: right !important; } .pui-xxl-float-none { float: none !important; } } /* Layout fixed width */ @media (min-width: 992px) { .pui-layout-fixed, .pui-layout-fixed-960 { max-width: 960px; } .pui-layout-fixed-980 { max-width: 980px; } } @media (min-width: 1001px) { .pui-layout-fixed { max-width: 1000px; } } @media (min-width: 1200px) { .pui-layout-fixed-1200 { max-width: 1200px; } } @media (min-width: 1400px) { .pui-layout-fixed-1360 { max-width: 1360px; } .pui-layout-fixed-1400 { max-width: 1400px; } } @media (min-width: 1600px) { .pui-layout-fixed-1500 { max-width: 1500px; } } @media (min-width: 1900px) { .pui-layout-fixed-1600 { max-width: 1600px; } .pui-layout-fixed-1700 { max-width: 1700px; } .pui-layout-fixed-1800 { max-width: 1800px; } } .pui-flexbox { display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ } .pui-flex { -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-flex-inline { -webkit-inline-flex: 1; /* Chrome 21.0+ */ -moz-inline-flex: 1; -ms-inline-flex: 1; inline-flex: 1; /* Firefox 20+, Opera 12.5 */ } .pui-inline-flexbox { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: -moz-inline-flex; display: inline-flex; } .pui-flex-row { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-flex-row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-flex-column { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-flex-column-reverse { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-flex-wrap { -webkit-flex-wrap: wrap; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-flex-nowrap { -webkit-flex-wrap: nowrap; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; /* Firefox 28+, IE11, Opera 12.10 */ } /* ================ Other ================ */ /* Article */ .pui-article > header, .pui-article-head { margin-bottom: 15px; margin-bottom: 1.5rem; } .pui-article-title { font-size: 16px; font-size: 1.6rem; margin-bottom: 8px; margin-bottom: 0.8rem; } .pui-article-subtitle { font-size: 12px; font-size: 1.2rem; color: #999; } .pui-article-content { padding: 1.5rem 0; } .pui-article > section { margin: 15px 0; margin: 1.5rem 0; } .pui-article footer, .pui-article-foot { margin-top: 15px; margin-top: 1.5rem; } .pui-article:before, .pui-article:after, .pui-article-content:before, .pui-article-content:after, .pui-article-head:before, .pui-article-head:after, .pui-article-foot:before, .pui-article-foot:after { content: " "; display: table; } .pui-article:after, .pui-article-content:after, .pui-article-head:after, .pui-article-foot:after { clear: both; } /* Animations & Transform */ [class*=pui-animation-] { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; /* Firefox 5.0~16.0 */ animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; /* Firefox 5.0~16.0 */ animation-timing-function: ease-out; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .pui-animation-fade-in { -webkit-animation-name: fade-in; -moz-animation-name: fade-in; /* Firefox 5.0~16.0 */ animation-name: fade-in; } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .pui-animation-fade-out { -webkit-animation-name: fade-out; -moz-animation-name: fade-out; /* Firefox 5.0~16.0 */ animation-name: fade-out; } @-webkit-keyframes scale-x { 0% { opacity: 0; -webkit-transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); } } @keyframes scale-x { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } .pui-animation-scale-x { -webkit-animation-name: scale-x; -moz-animation-name: scale-x; /* Firefox 5.0~16.0 */ animation-name: scale-x; } @-webkit-keyframes scale-y { 0% { opacity: 1; -webkit-transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); } } @keyframes scale-y { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } } .pui-animation-scale-y { -webkit-animation-name: scale-y; -moz-animation-name: scale-y; /* Firefox 5.0~16.0 */ animation-name: scale-y; } @-webkit-keyframes zoom-in { 0% { opacity: 0; -webkit-transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes zoom-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } .pui-animation-zoom-in { -webkit-animation-name: zoom-in; -moz-animation-name: zoom-in; /* Firefox 5.0~16.0 */ animation-name: zoom-in; } @-webkit-keyframes zoom-out { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); } } @keyframes zoom-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } .pui-animation-zoom-out { -webkit-animation-name: zoom-out; -moz-animation-name: zoom-out; /* Firefox 5.0~16.0 */ animation-name: zoom-out; } @-webkit-keyframes slide-up { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes slide-up { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .pui-animation-slide-up { -webkit-animation-name: slide-up; -moz-animation-name: slide-up; /* Firefox 5.0~16.0 */ animation-name: slide-up; } @-webkit-keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes slide-down { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } .pui-animation-slide-down { -webkit-animation-name: slide-down; -moz-animation-name: slide-down; /* Firefox 5.0~16.0 */ animation-name: slide-down; } @-webkit-keyframes slide-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes slide-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } .pui-animation-slide-left { -webkit-animation-name: slide-left; -moz-animation-name: slide-left; /* Firefox 5.0~16.0 */ animation-name: slide-left; } @-webkit-keyframes slide-right { 0% { opacity: 0; -webkit-transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes slide-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } .pui-animation-slide-right { -webkit-animation-name: slide-right; -moz-animation-name: slide-right; /* Firefox 5.0~16.0 */ animation-name: slide-right; } @-webkit-keyframes shaking { 0%, 100% { -webkit-transform: translateX(0); } 10% { -webkit-transform: translateX(-9%); } 20% { -webkit-transform: translateX(8%); } 30% { -webkit-transform: translateX(-7%); } 40% { -webkit-transform: translateX(6%); } 50% { -webkit-transform: translateX(-5%); } 60% { -webkit-transform: translateX(4%); } 70% { -webkit-transform: translateX(-3%); } 80% { -webkit-transform: translateX(2%); } 90% { -webkit-transform: translateX(-1%); } } @keyframes shaking { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-9%); } 20% { transform: translateX(8%); } 30% { transform: translateX(-7%); } 40% { transform: translateX(6%); } 50% { transform: translateX(-5%); } 60% { transform: translateX(4%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(2%); } 90% { transform: translateX(-1%); } } .pui-animation-shaking { -webkit-animation-name: shaking; -moz-animation-name: shaking; /* Firefox 5.0~16.0 */ animation-name: shaking; } .pui-animation-shaking-x { -webkit-animation-name: shaking; -moz-animation-name: shaking; /* Firefox 5.0~16.0 */ animation-name: shaking; } @-webkit-keyframes shaking-y { 0%, 100% { -webkit-transform: translateY(0); } 10% { -webkit-transform: translateY(-9%); } 20% { -webkit-transform: translateY(8%); } 30% { -webkit-transform: translateY(-7%); } 40% { -webkit-transform: translateY(6%); } 50% { -webkit-transform: translateY(-5%); } 60% { -webkit-transform: translateY(4%); } 70% { -webkit-transform: translateY(-3%); } 80% { -webkit-transform: translateY(2%); } 90% { -webkit-transform: translateY(-1%); } } @keyframes shaking-y { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-9%); } 20% { transform: translateY(8%); } 30% { transform: translateY(-7%); } 40% { transform: translateY(6%); } 50% { transform: translateY(-5%); } 60% { transform: translateY(4%); } 70% { transform: translateY(-3%); } 80% { transform: translateY(2%); } 90% { transform: translateY(-1%); } } .pui-animation-shaking-y { -webkit-animation-name: shaking-y; -moz-animation-name: shaking-y; /* Firefox 5.0~16.0 */ animation-name: shaking-y; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); } } @keyframes rotate { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } } .pui-animation-rotate { -webkit-animation-name: rotate; -moz-animation-name: rotate; /* Firefox 5.0~16.0 */ animation-name: rotate; } @-webkit-keyframes rotate-x { 0% { -webkit-transform: rotateX(360deg); } 100% { -webkit-transform: rotateX(0); } } @keyframes rotate-x { 0% { transform: rotateX(360deg); } 100% { transform: rotateX(0); } } .pui-animation-rotate-x { -webkit-animation-name: rotate-x; -moz-animation-name: rotate-x; /* Firefox 5.0~16.0 */ animation-name: rotate-x; } @-webkit-keyframes rotate-y { 0% { -webkit-transform: rotateY(360deg); } 100% { -webkit-transform: rotateY(0); } } @keyframes rotate-y { 0% { transform: rotateY(360deg); } 100% { transform: rotateY(0); } } .pui-animation-rotate-y { -webkit-animation-name: rotate-y; -moz-animation-name: rotate-y; /* Firefox 5.0~16.0 */ animation-name: rotate-y; } @-webkit-keyframes stretch-left { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @keyframes stretch-left { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } .pui-animation-stretch-left { -webkit-animation-name: stretch-left; -moz-animation-name: stretch-left; /* Firefox 5.0~16.0 */ animation-name: stretch-left; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; /* Firefox 5.0~16.0 */ animation-duration: 1s; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 100% 0%; /* IE9~10 */ -o-transform-origin: 100% 0%; /* Opera 10.5~12.10 */ transform-origin: 100% 0%; } @-webkit-keyframes stretch-right { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @keyframes stretch-right { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } .pui-animation-stretch-right { -webkit-animation-name: stretch-right; -moz-animation-name: stretch-right; /* Firefox 5.0~16.0 */ animation-name: stretch-right; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; /* Firefox 5.0~16.0 */ animation-duration: 1s; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 0% 0%; /* IE9~10 */ -o-transform-origin: 0% 0%; /* Opera 10.5~12.10 */ transform-origin: 0% 0%; } @-webkit-keyframes stretch-up { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } @keyframes stretch-up { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } .pui-animation-stretch-up { -webkit-animation-name: stretch-up; -moz-animation-name: stretch-up; /* Firefox 5.0~16.0 */ animation-name: stretch-up; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; /* Firefox 5.0~16.0 */ animation-duration: 1s; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 0% 100%; /* IE9~10 */ -o-transform-origin: 0% 100%; /* Opera 10.5~12.10 */ transform-origin: 0% 100%; } @-webkit-keyframes stretch-down { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(0.98); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(0.98); } 100% { -webkit-transform: scaleY(1); } } @keyframes stretch-down { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(0.98); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(0.98); } 100% { transform: scaleY(1); } } .pui-animation-stretch-down { -webkit-animation-name: stretch-down; -moz-animation-name: stretch-down; /* Firefox 5.0~16.0 */ animation-name: stretch-down; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; /* Firefox 5.0~16.0 */ animation-duration: 1s; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 100% 0%; /* IE9~10 */ -o-transform-origin: 100% 0%; /* Opera 10.5~12.10 */ transform-origin: 100% 0%; } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-5deg); } 50% { -webkit-transform: rotate(5deg); } 100% { -webkit-transform: rotate(-5deg); } } @keyframes tossing { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } } .pui-animation-tossing { -webkit-animation-name: tossing; -moz-animation-name: tossing; /* Firefox 5.0~16.0 */ animation-name: tossing; -webkit-animation-duration: 2.5s; -moz-animation-duration: 2.5s; /* Firefox 5.0~16.0 */ animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite; } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } .pui-animation-floating { -webkit-animation-name: floating; -moz-animation-name: floating; /* Firefox 5.0~16.0 */ animation-name: floating; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; /* Firefox 5.0~16.0 */ animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.9); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.9); opacity: 0.7; } } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } .pui-animation-pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; /* Firefox 5.0~16.0 */ animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; /* Firefox 5.0~16.0 */ animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite; } @-webkit-keyframes pulse-plus { 0% { -webkit-transform: scale(0.8); opacity: 0.6; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.8); opacity: 0.6; } } @keyframes pulse-plus { 0% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.6; } } .pui-animation-pulse-plus { -webkit-animation-name: pulse-plus; -moz-animation-name: pulse-plus; /* Firefox 5.0~16.0 */ animation-name: pulse-plus; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; /* Firefox 5.0~16.0 */ animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite; } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60% { transform: translateY(-100%) scaleY(1.1); } 70% { transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { transform: translateY(0%) scaleY(1) scaleX(1); } } .pui-animation-bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; /* Firefox 5.0~16.0 */ animation-name: bounce; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; /* Firefox 5.0~16.0 */ animation-duration: 1.5s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; /* Firefox 5.0~16.0 */ animation-timing-function: ease; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; /* Firefox 3.5~16.0 */ -ms-transform-origin: 50% 100%; /* IE9~10 */ -o-transform-origin: 50% 100%; /* Opera 10.5~12.10 */ transform-origin: 50% 100%; } @-webkit-keyframes expand-in { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } @keyframes expand-in { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } .pui-animation-expand-in { -webkit-animation-name: expand-in; -moz-animation-name: expand-in; /* Firefox 5.0~16.0 */ animation-name: expand-in; -webkit-animation-duration: 1.2s; -moz-animation-duration: 1.2s; /* Firefox 5.0~16.0 */ animation-duration: 1.2s; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; /* Firefox 5.0~16.0 */ animation-timing-function: ease-out; visibility: visible !important; } @-webkit-keyframes expand-out { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.8); } 90% { -webkit-transform: scale(1.68); } 100% { -webkit-transform: scale(1.8); } } @keyframes expand-out { 0% { transform: scale(1); } 20% { transform: scale(0.95); } 80% { transform: scale(1.8); } 90% { transform: scale(1.68); } 100% { transform: scale(1.8); } } .pui-animation-expand-out { -webkit-animation-name: expand-out; -moz-animation-name: expand-out; /* Firefox 5.0~16.0 */ animation-name: expand-out; -webkit-animation-duration: 1.2s; -moz-animation-duration: 1.2s; /* Firefox 5.0~16.0 */ animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; /* Firefox 5.0~16.0 */ animation-timing-function: ease-in-out; visibility: visible !important; } .pui-animation-reverse { -webkit-animation-direction: reverse !important; -moz-animation-direction: reverse !important; /* Firefox 5.0~16.0 */ animation-direction: reverse !important; } .pui-animation-stop, .pui-animation-paused { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; /* Firefox 5.0~16.0 */ animation-play-state: paused !important; } .pui-animation-repeat { -webkit-animation-iteration-count: infinite !important; -moz-animation-iteration-count: infinite !important; /* Firefox 5.0~16.0 */ animation-iteration-count: infinite !important; } /* forms */ .pui-form { padding: 15px; padding: 1.5rem; font-size: 14px; font-size: 1.4rem; } .pui-form:before, .pui-form:after, .pui-form-group:before, .pui-form-group:after { content: " "; display: table; } .pui-form:after, .pui-form-group:after { clear: both; } .pui-form-group { position: relative; padding-top: 12px; padding-top: 1.2rem; } .pui-form-group.pui-form-group-underline, .pui-form-group.pui-form-group-underline-dashed { padding: 12px 0; padding: 1.2rem 0; border-bottom: 1px solid #eee; } .pui-form-group.pui-form-group-underline:last-child, .pui-form-group.pui-form-group-underline-dashed:last-child { border: none; } .pui-form-group.pui-form-group-underline-dashed { border-bottom-style: dashed; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime"], input[type="time"] { width: 99.9%; padding: 10px; height: 36px; margin: 0 10px 7px 0; font-size: 14px; border: 1px solid #ddd; } input[type="text"].pui-input-underline, input[type="password"].pui-input-underline, input[type="email"].pui-input-underline, input[type="url"].pui-input-underline, input[type="number"].pui-input-underline, input[type="search"].pui-input-underline, input[type="date"].pui-input-underline, input[type="datetime"].pui-input-underline, input[type="time"].pui-input-underline { border: none; border-bottom: 1px solid #ddd; padding-left: 0; } input[type="text"].pui-input-underline-dashed, input[type="password"].pui-input-underline-dashed, input[type="email"].pui-input-underline-dashed, input[type="url"].pui-input-underline-dashed, input[type="number"].pui-input-underline-dashed, input[type="search"].pui-input-underline-dashed, input[type="date"].pui-input-underline-dashed, input[type="datetime"].pui-input-underline-dashed, input[type="time"].pui-input-underline-dashed { border: none; border-bottom: 1px dashed #ddd; padding-left: 0; } .pui-form-group > input[type="text"]:last-child, fieldset > input[type="text"]:last-child, .pui-form-group > input[type="password"]:last-child, fieldset > input[type="password"]:last-child, .pui-form-group > input[type="email"]:last-child, fieldset > input[type="email"]:last-child, .pui-form-group > input[type="url"]:last-child, fieldset > input[type="url"]:last-child, .pui-form-group > input[type="number"]:last-child, fieldset > input[type="number"]:last-child, .pui-form-group > input[type="search"]:last-child, fieldset > input[type="search"]:last-child, .pui-form-group > input[type="date"]:last-child, fieldset > input[type="date"]:last-child, .pui-form-group > input[type="datetime"]:last-child, fieldset > input[type="datetime"]:last-child, .pui-form-group > input[type="time"]:last-child, fieldset > input[type="time"]:last-child { margin-bottom: 0; } input[type="range"] { width: 100%; width: 99.7%\9; margin: 0 10px 10px 0; margin: 0 1rem 1rem 0; padding-left: 0; padding-right: 0; } .pui-form-group > input[type="range"]:last-child, fieldset > input[type="range"]:last-child { margin-bottom: 0; } input[type="submit"], input[type="reset"], input[type="button"] { text-align: center; } .pui-input-xs { width: 50px; width: 5rem; } .pui-input-sm { width: 100px; width: 10rem; } .pui-input-md { width: 200px; width: 20rem; } .pui-input-lg { width: 300px; width: 30rem; } .pui-input-xl { width: 400px; width: 40rem; } .pui-input-xxl { width: 500px; width: 50rem; } .pui-input-xxxl { width: 600px; width: 60rem; } .pui-form label { cursor: pointer; padding-right: 8px; } .pui-form-title { padding-bottom: 10px; padding-bottom: 1rem; margin-bottom: 10px; margin-bottom: 1rem; border-bottom: 1px solid #ddd; } .pui-form-title h1 { font-size: 18px; font-size: 1.8rem; } textarea, .pui-form textarea { width: 99.9%; height: 240px; padding: 6px; padding: 0.6rem; border: 1px solid #ddd; } fieldset.pui-fieldset-border-top, fieldset.pui-fieldset-border-top-dashed { padding-top: 10px; padding-top: 1rem; padding-bottom: 0; padding-bottom: 0; border: none; border-top: 1px solid #eee; } fieldset.pui-fieldset-border-top-dashed { border-top: 1px dashed #eee; } fieldset.pui-fieldset-border-dashed { border: 1px dashed #eee; } fieldset.pui-fieldset-unbordered { border: none; } fieldset.pui-fieldset-unbordered legend { padding: 0; } select { font-size: 14px; padding: 4px 6px; width: 99.9%; height: 35px; height: 34px\0; background: none; border: 1px solid #ddd; outline: none; position: relative; -webkit-border-radius: 4px; border-radius: 4px; background: #fff url(../images/select.png) no-repeat right center; } select[multiple] { background: none; min-height: 100px; } select::-ms-expand { display: none; } html.touch select { height: 33px; line-height: 31px; padding: 0 6px; } .pui-select { vertical-align: middle; display: inline-block; position: relative; } .pui-select:after { color: #999; position: absolute; top: 0.2rem; right: 1.5rem; font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 1.6rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f107"; } html.no-touch .pui-select:hover:after, .pui-select.hover:after { color: #666; } .pui-select select { background: none; padding-right: 2rem; } input[type="file"] { padding: 4px; padding: 0.4rem; border: 1px solid #ddd; background: none; } input[type="radio"], input[type="checkbox"] { margin-top: -2px; margin-top: -0.2rem; } .pui-form .pui-input-tips-text { font-size: 12px; font-size: 1.2rem; color: #ccc; } input[type="text"], input[type="password"], input[type="file"], textarea, .pui-form textarea, input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime"], input[type="time"] { -webkit-border-radius: 4px; border-radius: 4px; } input[type="text"], input[type="password"], input[type="file"], select, input[type="email"], input[type="url"], input[type="number"], input[type="range"], input[type="search"], input[type="date"], input[type="datetime"], input[type="time"] { margin-right: 5px; margin-right: 0.5rem; } form.pui-form-label-left label { float: left; width: 100px; display: block; padding: 5px 10px 15px; padding: 0.5rem 1rem 1.5rem; } form.pui-form-label-left br { clear: both; } [fv-role] > [type=normal], [fv-role] > [type=success], [fv-role] > [type=error], [fv-role] > [type=empty] { font-size: 12px; vertical-align: middle; } [fv-role] > [type=normal] { font-size: 12px; color: #ccc; } [fv-role] > [type=success], [fv-role] > [type=error], [fv-role] > [type=empty] { display: none; } [fv-role] > [type=success] { color: #15B952; } [fv-role] > [type=empty], [fv-role] > [type=error] { color: red; } [fv-role] > [type=normal] > .fa, [fv-role] > [type=success] > .fa, [fv-role] > [type=empty] > .fa, [fv-role] > [type=error] > .fa { font-size: 16px; } input.fv-error, select.fv-error, textarea.fv-error { color: red; border-color: red; } input.fv-success, select.fv-success, textarea.fv-success { color: #15B952; border-color: #15B952; } .pui-input-group { height: 36px; } .pui-input-group:before, .pui-input-group:after { content: " "; display: table; } .pui-input-group:after { clear: both; } .pui-input-group .pui-input-group-addon { float: left; font-size: 14px; line-height: 34px; padding: 0 8px; margin: 0; border: 1px solid #ddd; background: #f6f6f6; } .pui-input-group .pui-input-group-addon label { margin-bottom: 0; } .pui-input-group .pui-input-group-text-input { float: left; margin: 0; height: 100%; height: 36px; margin-left: -1px; -webkit-border-radius: 0; border-radius: 0; } .pui-input-group .pui-input-group-text-input + .pui-input-group-text-input { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-input-group select { margin: 0; float: left; } .pui-input-group .pui-input-group-addon:not(:first-child) { margin-left: -1px; } .pui-input-group select + select { margin-left: -2px; -webkit-border-radius: 0; border-radius: 0; } .pui-input-group .pui-input-group-addon:first-child, .pui-input-group .pui-input-group-text-input:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-input-group .pui-input-group-addon:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-input-group .pui-input-group-btn .pui-btn { font-size: 14px; } .pui-input-group .pui-input-group-text-input + .pui-input-group-btn > .pui-btn { margin-left: -1px; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-input-group select + .pui-input-group-btn > .pui-btn { margin-left: -2px; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-input-group > select:first-child { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-input-group .pui-input-group-addon + select { margin-left: -1px; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-input-list { margin-bottom: 15px; } .pui-input-list input { margin-bottom: 0; } .pui-input-list input:not(first-child) { margin-top: -1px; } .pui-input-list input:not(:first-child), .pui-input-list input:not(:last-child) { -webkit-border-radius: 0; border-radius: 0; } .pui-input-list input:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .pui-input-list input:last-child { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-input-list .pui-btn { width: 99.9%; height: 36px; } input.pui-input-round, textarea.pui-input-round, select.pui-input-round { -webkit-border-radius: 4px; border-radius: 4px; } input.pui-input-square, textarea.pui-input-square, select.pui-input-square { border-radius: 0; } input.pui-input-unbordered, textarea.pui-input-unbordered, select.pui-input-unbordered { border: none; padding-left: 0; padding-right: 0; } input.pui-box-shadow, textarea.pui-box-shadow, select.pui-box-shadow { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); /* IE9+, News */ } input.pui-box-shadow-inset, textarea.pui-box-shadow-inset, select.pui-box-shadow-inset { -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15); /* IE9+, News */ } input.pui-input-gary, textarea.pui-input-gary, select.pui-input-gary { color: #fff; border-color: #DDDDDD; background-color: #DDDDDD; } input.pui-input-border-gary, textarea.pui-input-border-gary, select.pui-input-border-gary { color: #DDDDDD; border-color: #DDDDDD; } input.pui-input-primary, textarea.pui-input-primary, select.pui-input-primary { color: #fff; border-color: #008EE5; background-color: #008EE5; } input.pui-input-border-primary, textarea.pui-input-border-primary, select.pui-input-border-primary { color: #008EE5; border-color: #008EE5; } input.pui-input-secondary, textarea.pui-input-secondary, select.pui-input-secondary { color: #fff; border-color: #3BB4F2; background-color: #3BB4F2; } input.pui-input-border-secondary, textarea.pui-input-border-secondary, select.pui-input-border-secondary { color: #3BB4F2; border-color: #3BB4F2; } input.pui-input-info, textarea.pui-input-info, select.pui-input-info { color: #fff; border-color: #2EAAC6; background-color: #2EAAC6; } input.pui-input-border-info, textarea.pui-input-border-info, select.pui-input-border-info { color: #2EAAC6; border-color: #2EAAC6; } input.pui-input-success, textarea.pui-input-success, select.pui-input-success { color: #fff; border-color: #71B472; background-color: #71B472; } input.pui-input-border-success, textarea.pui-input-border-success, select.pui-input-border-success { color: #71B472; border-color: #71B472; } input.pui-input-warning, textarea.pui-input-warning, select.pui-input-warning { color: #fff; border-color: #FFB74D; background-color: #FFB74D; } input.pui-input-border-warning, textarea.pui-input-border-warning, select.pui-input-border-warning { color: #FFB74D; border-color: #FFB74D; } input.pui-input-error, textarea.pui-input-error, select.pui-input-error { color: #fff; border-color: #E87467; background-color: #E87467; } input.pui-input-border-error, textarea.pui-input-border-error, select.pui-input-border-error { color: #E87467; border-color: #E87467; } .pui-form .pui-row { margin: 0; } .pui-form .pui-row.pui-form-group { padding-left: 0; padding-right: 0; padding-bottom: 8px; padding-bottom: 0.8rem; } .pui-form .pui-row.pui-form-group:last-child { margin-bottom: 2rem; } .pui-form .pui-row [class*="pui-grid-"] { padding: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { select { background-image: url(../images/select@2x.png); background-size: 10%; } select[disabled] { background-image: none; } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { select { background-image: url(../images/select@3x.png); background-size: 10%; } select[disabled] { background-image: none; } } @media only screen and (min-width: 1025px) { input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"] { font-size: 12px; } .pui-input-list input { font-size: 12px; } select, .pui-form label { font-size: 12px; } } .pui-file-input { display: inline-block; position: relative; overflow: hidden; overflow-y: visible; padding-bottom: 2px; vertical-align: middle; } .pui-file-input > input[type="file"] { display: inline-block; position: absolute; top: 0; right: 0; opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ cursor: pointer; } .pui-file-input > input[type="file"]::-webkit-file-upload-button { visibility: hidden; } [class*="pui-icon"], [class*="icon-"], [class*="fa-"] { vertical-align: middle; } /* images */ .pui-img-responsive, .pui-img-size-auto { height: auto; max-width: 100%; } .pui-img-full-width { width: 100%; height: auto; } .pui-img-radius { -webkit-border-radius: 6px; border-radius: 6px; } .pui-img-radius-plus { -webkit-border-radius: 12px; border-radius: 12px; } .pui-img-radius-plus-2 { -webkit-border-radius: 16px; border-radius: 16px; } .pui-img-radius-plus-3 { -webkit-border-radius: 24px; border-radius: 24px; } .pui-img-circle { -webkit-border-radius: 50%; border-radius: 50%; } .pui-img-thumbnail { padding: 4px; height: auto; max-width: 100%; display: inline-block; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 4px; border-radius: 4px; } .pui-img-thumbnail.pui-img-thumbnail-rect { -webkit-border-radius: 0; border-radius: 0; } .pui-img-thumbnail.plus { padding: 5px; -webkit-border-radius: 8px; border-radius: 8px; } .pui-img-xxxs { width: 16px; width: 1.6rem; } .pui-img-xxs { width: 24px; width: 2.4rem; } .pui-img-xs { width: 32px; width: 3.2rem; padding: 3px; } .pui-img-sm { width: 48px; width: 4.8rem; padding: 3px; } .pui-img-md { width: 64px; width: 6.4rem; } .pui-img-lg { width: 96px; width: 9.6rem; } .pui-img-xl { width: 128px; width: 12.8rem; } .pui-img-xxl { width: 192px; width: 19.2rem; } .pui-img-xxxl { width: 256px; width: 25.6rem; } .pui-img-align-left { float: left; margin-right: 1rem; margin-bottom: 1rem; } .pui-img-align-right { float: right; margin-left: 1rem; margin-bottom: 1rem; } /* image grid list */ .pui-img-grid { margin-left: -5px; margin-right: -5px; } [class*=pui-img-grid-] { margin: 0; padding: 0; display: block; list-style: none; } /* List */ .pui-list { list-style: none; padding-left: 0; } .pui-list:before, .pui-list:after { content: " "; display: table; } .pui-list:after { clear: both; } .pui-list.pui-list-margin-bottom li { margin-bottom: 10px; margin-bottom: 1rem; } .pui-list.pui-list-bordered { border: 1px solid #ddd; } .pui-list.pui-list-bordered li { padding-left: 10px; padding-left: 1rem; } .pui-list-line > li, .pui-list-dashed-line > li { padding: 5px 0; padding: 0.5rem 0; display: block\0; margin-top: 0\0; padding: 5px 0 7px 0 \0; border-top: 1px solid #ddd \0; } .pui-list-line > li > h1, .pui-list-line > li > h2, .pui-list-line > li > h3, .pui-list-line > li > h4, .pui-list-line > li > h5, .pui-list-line > li > h6, .pui-list-dashed-line > li > h1, .pui-list-dashed-line > li > h2, .pui-list-dashed-line > li > h3, .pui-list-dashed-line > li > h4, .pui-list-dashed-line > li > h5, .pui-list-dashed-line > li > h6 { margin-bottom: 2px; } .pui-list-line > li:nth-child(n+2), .pui-list-dashed-line > li:nth-child(n+2) { border-top: 1px solid #ddd; } .pui-list-dashed-line > li:nth-child(n+2) { border-top: 1px dashed #ddd; } /* for IE9+ */ @media all and (min-width: 0) { .pui-list-line li { margin-top: 0\9; padding: 0.5rem 0 \9; } } .pui-list-line li:first-child { border-top: none\0; *border-top: none; } .pui-list-line-img > li { padding: 12px 0; padding: 1.2rem 0; } .pui-list-style-none { list-style: none; } .pui-list-inline { padding-left: 0; list-style: none; } .pui-list-inline > li { padding: 5px 0; padding: 0.5rem 0; display: inline-block; } .pui-list.pui-list-stripe > li { -webkit-transition: background-color 300ms ease-out; /* Safari, Chrome */ -moz-transition: background-color 300ms ease-out; /* Firefox 4.0~16.0 */ transition: background-color 300ms ease-out; /* IE >9, FF >15, Opera >12.0 */ -webkit-user-select: none; -webkit-touch-callout: none; } .pui-list.pui-list-stripe > li:nth-child(even) { background-color: #fafafa; } html.no-touch .pui-list.pui-list-stripe > li:hover, .pui-list.pui-list-stripe > li.hover { background-color: #ffffcc; } .pui-list-group { margin-bottom: 15px; margin-bottom: 1.5rem; } .pui-list-group .pui-list { margin-bottom: 7px; margin-bottom: 0.7rem; } .pui-dl-horizontal dt { width: 24%; float: left; clear: both; overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; } .pui-dl-horizontal dd { margin-left: 26%; } .pui-dl-img-list > dl:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid #ddd; } .pui-dl-img-list.pui-underline-dashed > dl:not(:last-child) { padding-bottom: 10px; border-bottom: 1px dashed #ddd; } .pui-dl-img-list > dl { overflow: auto; } .pui-dl-img-list > dl > dt { width: 24%; float: left; clear: both; overflow: hidden; text-align: left; } .pui-dl-img-list > dl > dt > img, .pui-dl-img-list > dl > dt > a > img { margin-top: 6px; } .pui-dl-img-list > dl > dd { margin-left: 26%; } .pui-dl-list-line > dt:nth-child(n+2) { margin-top: 10px; margin-top: 1rem; padding-top: 10px; padding-top: 1rem; border-top: 1px solid #ddd; } .pui-dl-list-line > dt { font-size: 14px; font-size: 1.4rem; margin-top: 10px\0; padding-top: 10px\0; border-top: 1px solid #ddd \0; } .pui-dl-list-line > dt > img { margin-bottom: 10px; } .pui-dl-list-line > dt:first-child { border-top: 0\0; } .pui-dl-list-line > dd { color: #777; } .pui-list-column-2 { padding: 0; } .pui-list-column-2 > li { width: 49%; display: inline-block; } .pui-list-column-3 { padding: 0; } .pui-list-column-3 > li { width: 32%; display: inline-block; } .pui-list-column-4 { padding: 0; } .pui-list-column-4 > li { width: 24%; display: inline-block; } .pui-list-angle-right-type > li:before { font-family: "FontAwesome"; font-weight: normal; font-style: normal; padding-right: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f105"; } @media (max-width: 640px) { .pui-dl-img-list > dl dd { margin-left: 28%; } .pui-dl-horizontal > dt { width: 28%; } .pui-dl-horizontal > dd { margin-left: 34%; } } @media (min-width: 768px) { .pui-dl-img-list > dl > dt { width: 18%; } .pui-dl-img-list > dl > dd { margin-left: 21%; } } /* Tables */ .pui-table { width: 100%; max-width: 100%; margin: 20px auto; margin: 2rem auto; background: #fff; table-layout: fixed; position: relative; } .pui-table th, .pui-table td { padding: 6px; padding: 0.6rem; vertical-align: top; border-bottom: 1px solid #ddd; } .pui-table tr.gary > td, .pui-table tr.gary > th, .pui-table th.gary, .pui-table td.gary { color: #fff; background-color: #DDDDDD; border-color: #DDDDDD; } .pui-table tr.primary > td, .pui-table tr.primary > th, .pui-table th.primary, .pui-table td.primary { color: #fff; background-color: #008EE5; border-color: #008EE5; } .pui-table tr.secondary > td, .pui-table tr.secondary > th, .pui-table th.secondary, .pui-table td.secondary { color: #fff; background-color: #3BB4F2; border-color: #3BB4F2; } .pui-table tr.info > td, .pui-table tr.info > th, .pui-table th.info, .pui-table td.info { color: #fff; background-color: #2EAAC6; border-color: #2EAAC6; } .pui-table tr.success > td, .pui-table tr.success > th, .pui-table th.success, .pui-table td.success { color: #fff; background-color: #71B472; border-color: #71B472; } .pui-table tr.warning > td, .pui-table tr.warning > th, .pui-table th.warning, .pui-table td.warning { color: #fff; background-color: #FFB74D; border-color: #FFB74D; } .pui-table tr.error > td, .pui-table tr.error > th, .pui-table th.error, .pui-table td.error { color: #fff; background-color: #E87467; border-color: #E87467; } .pui-table.pui-table-body-scroll > tbody { height: 100px; overflow: auto; } .pui-table.margin-none, .pui-table.pui-margin-none { margin: 0 auto; } .pui-table-bordered, .pui-table-bordered td, .pui-table-bordered th { border: 1px solid #ddd; } .pui-table-unbordered, .pui-table-unbordered td, .pui-table-unbordered th { border: none; } .pui-table.pui-table-border-vertical { border: none; border-left: 1px solid #ddd; } .pui-table.pui-table-border-vertical td, .pui-table.pui-table-border-vertical th { border: none; border-right: 1px solid #ddd; } .pui-table.pui-table-text-center td, .pui-table.pui-table-text-center th { text-align: center; } .pui-table.pui-table-text-left td, .pui-table.pui-table-text-left th { text-align: left; } .pui-table.pui-table-text-right td, .pui-table.pui-table-text-right th { text-align: right; } .pui-table.pui-table-thead-bg thead { background: #f6f6f6; } .pui-table.pui-table-interlaced-color tr:nth-child(even) { background: #fafafa; } .pui-table.pui-table-interlaced-color html.no-touch tr:hover, .pui-table.pui-table-interlaced-color tr.hover { background: #ffffcc; } .pui-table.pui-table-interlaced-color html.no-touch thead tr:hover, .pui-table.pui-table-interlaced-color thead tr.hover { background: #f6f6f6; } .pui-table.pui-table-uninterlaced-color tr { background: #fff; } .pui-table.pui-table-uninterlaced-color tr:nth-child(even), .pui-table.pui-table-uninterlaced-color tr:nth-child(odd), .pui-table.pui-table-uninterlaced-color tr:hover { background: #fff; } .pui-table.pui-table-compact td, .pui-table.pui-table-compact th { padding: 3px; padding: 0.3rem; } /* ================ Third party Components ================ */ /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.3.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: 0.2em 0.25em 0.15em; border: solid 0.08em #eeeeee; border-radius: .1em; } .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-genderless:before, .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } /*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ /* ================ Components ================ */ /* arrow */ .pui-arrow-up, .pui-arrow-down, .pui-arrow-left, .pui-arrow-right { margin-top: -1px; margin-left: 2px; display: inline-block; vertical-align: middle; width: 0; height: 0; font-size: 0; line-height: 0; } .pui-arrow-up, .pui-arrow-down { border-left: 4px solid transparent; border-right: 4px solid transparent; } .pui-arrow-up { border-bottom: 4px solid; } .pui-arrow-down { border-top: 4px solid; } .pui-arrow-left, .pui-arrow-right { border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .pui-arrow-left { border-right: 4px solid; } .pui-arrow-right { border-left: 4px solid; } .pui-arrow-small { border-width: 4px; } .pui-arrow-medium { border-width: 5px; } .pui-arrow-large { border-width: 6px; } .pui-arrow-xlarge { border-width: 7px; } .pui-arrow-xxlarge { border-width: 8px; } .pui-symbol-gt:after, .pui-symbol-lt:after, .pui-symbol-gt-up:after, .pui-symbol-gt-down:after { font-family: "FontAwesome"; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pui-symbol-gt:after { content: "\f105"; } .pui-symbol-gt-up:after { content: "\f106"; } .pui-symbol-gt-down:after { content: "\f107"; } .pui-symbol-lt:after { content: "\f104"; } html.pui-app { -ms-touch-action: none; } html.pui-app, html.pui-app > body { height: 100%; overflow: hidden; } .pui-app-layout { height: 100%; background: #333; position: relative; } .pui-app-layout > .pui-app-main, .pui-app-layout > .pui-side-slide-left, .pui-app-layout > .pui-side-slide-right, .pui-app-layout > .pui-side-slide-top, .pui-app-layout > .pui-side-slide-bottom { position: relative; display: block; overflow: auto; } .pui-app-layout > .pui-side-slide-left, .pui-app-layout > .pui-side-slide-right, .pui-app-layout > .pui-side-slide-top, .pui-app-layout > .pui-side-slide-bottom { display: none; } .pui-app-layout > .pui-side-slide-left { width: 240px; height: 100%; background: #333; position: absolute; top: 0; left: 0; -webkit-box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-app-layout > .pui-app-main { overflow: hidden; max-width: 100%; min-width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; z-index: 1; display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-app-layout > .pui-app-main > .pui-app-header { width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0; border: none; vertical-align: middle; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* IE9+, News */ position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* Firefox 28+, IE11, Opera 12.10 */ -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; /* Safari 7.0+, Chrome 21.0+ */ -moz-align-items: center; align-items: center; /* Firefox 20.0+, IE11+, Opera 12.10 */ position: relative; z-index: 1000; } .pui-app-layout > .pui-app-main > .pui-app-main-container { width: 100%; overflow: auto; -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ padding: 0; -webkit-overflow-scrolling: touch; z-index: 1; } .pui-app-layout > .pui-app-main > .pui-side-position-mask { z-index: 79; } .pui-app-layout > .pui-app-main > .pui-app-footer { width: 100%; height: 48px; height: 4.8rem; vertical-align: middle; -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15); /* IE9+, News */ z-index: 1000; position: relative; } .pui-app-layout > .pui-app-main > .pui-app-footer > .pui-button-sheet { border: none; vertical-align: middle; } .pui-app-layout > .pui-app-main > .pui-mask { display: none; z-index: 101; } .pui-app-layout > .pui-app-main-next { left: 100%; display: none; } .pui-app-layout > .pui-side-slide-right { width: 240px; height: 100%; background: #333; position: absolute; top: 0; right: 0; -webkit-box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-app-layout > .pui-side-slide-top { max-width: 100%; min-width: 100%; height: 180px; background: #333; position: absolute; top: 0; left: 0; -webkit-box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-app-layout > .pui-side-slide-bottom { max-width: 100%; min-width: 100%; height: 180px; background: #333; position: absolute; bottom: 0; left: 0; -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } [pui-side-slide] { cursor: pointer; } .pui-side-position-left, .pui-side-position-right, .pui-side-position-top, .pui-side-position-bottom { display: none; overflow: auto; width: 240px; margin: 48px 0; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; z-index: 80; -webkit-overflow-scrolling: touch; } .pui-side-position-left { left: 0; } .pui-side-position-right { right: 0; } .pui-side-position-top, .pui-side-position-bottom { width: 100%; height: 240px; margin: 0; top: auto; left: 0; color: #666; background: #fff; } .pui-side-position-top { top: 0; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-side-position-bottom { bottom: 0; -webkit-box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-side-position-zindex-top { z-index: 101; } .pui-app-header-middle { text-align: center; -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-app-header-aside > a, .pui-app-header-offside > a { text-align: center; display: inline-block; padding: 12px; min-width: 48px; } html.no-touch .pui-app-header-aside > a:hover, .pui-app-header-aside > a.hover, html.no-touch .pui-app-header-offside > a:hover, .pui-app-header-offside > a.hover { background-color: rgba(0, 0, 0, 0.1); } .pui-app-scroller { width: 100%; z-index: 1; position: absolute; -webkit-tap-highlight-color: transparent; -webkit-transform: translateZ(0); /* Safari, Chrome */ -moz-transform: translateZ(0); /* Firefox 3.5~16.0 */ -ms-transform: translateZ(0); /* IE9~10 */ -o-transform: translateZ(0); /* Opera 10.5~12.10 */ transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-text-size-adjust: none; /* Chrome 27+ */ -moz-text-size-adjust: none; /* Firefox */ text-size-adjust: none; /* None yet */ } /* badge */ .pui-badge { cursor: pointer; min-width: 24px; padding: 0 2px 1px; padding: 0 0.2rem 1px; font-size: 10px; font-size: 1rem; text-align: center; border: 1px solid transparent; white-space: nowrap; -webkit-border-radius: 3px; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* Safari, Chrome */ -moz-transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* Firefox 4.0~16.0 */ transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* IE >9, FF >15, Opera >12.0 */ } .pui-badge.pui-badge-default { color: #ccc; background: #fff; border: 1px solid #ddd; } .pui-badge.pui-badge-default a { color: #999; } html.no-touch .pui-badge.pui-badge-default:hover, .pui-badge.pui-badge-default.hover { color: #999; background-color: #f6f6f6; } .pui-badge.pui-badge-grey { color: #ccc; background: #f6f6f6; border: 1px solid #ddd; } .pui-badge.pui-badge-grey a { color: #ccc; } html.no-touch .pui-badge.pui-badge-grey:hover, .pui-badge.pui-badge-grey.hover { color: #ccc; background-color: #eee; } .pui-badge.pui-badge-gary { color: #fff; border-color: #DDDDDD; background-color: #DDDDDD; } .pui-badge.pui-badge-gary a { color: #fff; } html.no-touch .pui-badge.pui-badge-gary:hover, .pui-badge.pui-badge-gary.hover { color: #fff; background-color: #c4c4c4; } .pui-badge.pui-badge-border-gary { color: #DDDDDD; border-color: #DDDDDD; } html.no-touch .pui-badge.pui-badge-border-gary:hover, .pui-badge.pui-badge-border-gary.hover { color: #fff; background-color: #c4c4c4; } .pui-badge.pui-badge-primary { color: #fff; border-color: #008EE5; background-color: #008EE5; } .pui-badge.pui-badge-primary a { color: #fff; } html.no-touch .pui-badge.pui-badge-primary:hover, .pui-badge.pui-badge-primary.hover { color: #fff; background-color: #006eb2; } .pui-badge.pui-badge-border-primary { color: #008EE5; border-color: #008EE5; } html.no-touch .pui-badge.pui-badge-border-primary:hover, .pui-badge.pui-badge-border-primary.hover { color: #fff; background-color: #006eb2; } .pui-badge.pui-badge-secondary { color: #fff; border-color: #3BB4F2; background-color: #3BB4F2; } .pui-badge.pui-badge-secondary a { color: #fff; } html.no-touch .pui-badge.pui-badge-secondary:hover, .pui-badge.pui-badge-secondary.hover { color: #fff; background-color: #10a0ea; } .pui-badge.pui-badge-border-secondary { color: #3BB4F2; border-color: #3BB4F2; } html.no-touch .pui-badge.pui-badge-border-secondary:hover, .pui-badge.pui-badge-border-secondary.hover { color: #fff; background-color: #10a0ea; } .pui-badge.pui-badge-info { color: #fff; border-color: #C54B3B; background-color: #C54B3B; } .pui-badge.pui-badge-info a { color: #fff; } html.no-touch .pui-badge.pui-badge-info:hover, .pui-badge.pui-badge-info.hover { color: #fff; background-color: #24869d; } .pui-badge.pui-badge-border-info { color: #2EAAC6; border-color: #2EAAC6; } html.no-touch .pui-badge.pui-badge-border-info:hover, .pui-badge.pui-badge-border-info.hover { color: #fff; background-color: #24869d; } .pui-badge.pui-badge-success { color: #fff; border-color: #71B472; background-color: #71B472; } .pui-badge.pui-badge-success a { color: #fff; } html.no-touch .pui-badge.pui-badge-success:hover, .pui-badge.pui-badge-success.hover { color: #fff; background-color: #549e55; } .pui-badge.pui-badge-border-success { color: #71B472; border-color: #71B472; } html.no-touch .pui-badge.pui-badge-border-success:hover, .pui-badge.pui-badge-border-success.hover { color: #fff; background-color: #549e55; } .pui-badge.pui-badge-warning { color: #fff; border-color: #FFB74D; background-color: #FFB74D; } .pui-badge.pui-badge-warning a { color: #fff; } html.no-touch .pui-badge.pui-badge-warning:hover, .pui-badge.pui-badge-warning.hover { color: #fff; background-color: #ffa21a; } .pui-badge.pui-badge-border-warning { color: #FFB74D; border-color: #FFB74D; } html.no-touch .pui-badge.pui-badge-border-warning:hover, .pui-badge.pui-badge-border-warning.hover { color: #fff; background-color: #ffa21a; } .pui-badge.pui-badge-error { color: #fff; border-color: #E87467; background-color: #E87467; } .pui-badge.pui-badge-error a { color: #fff; } html.no-touch .pui-badge.pui-badge-error:hover, .pui-badge.pui-badge-error.hover { color: #fff; background-color: #e14b3b; } .pui-badge.pui-badge-border-error { color: #E87467; border-color: #E87467; } html.no-touch .pui-badge.pui-badge-border-error:hover, .pui-badge.pui-badge-border-error.hover { color: #fff; background-color: #e14b3b; } .pui-badge.pui-badge-unbordered { border: none; } .pui-badge.pui-badge-circle { -webkit-border-radius: 400px; border-radius: 400px; } .pui-badge.pui-badge-square { -webkit-border-radius: 0; border-radius: 0; } .pui-badge.pui-badge-dot { display: inline-block; width: 10px; min-width: 10px; height: 10px; padding: 0; line-height: 14px; text-indent: -9999em; border-radius: 5px; } /* Buttons */ .pui-btn { cursor: pointer; position: relative; margin: 0; padding: 6px 12px; padding: 0.6rem 1.2rem; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.428; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; display: inline-block; background: none; border: 1px solid transparent; -webkit-border-radius: 4px; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* Safari, Chrome */ -moz-transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* Firefox 4.0~16.0 */ transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out; /* IE >9, FF >15, Opera >12.0 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } html.no-touch .pui-btn:hover, .pui-btn:focus, .pui-btn.hover, .pui-btn.focus, .pui-btn.pui-hover, .pui-btn.pui-focus { text-decoration: none; } .pui-btn:active, .pui-btn.active, .pui-btn.pui-active { outline: 0; color: #fff; background-image: none; -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.15); /* IE9+, News */ } .pui-btn .fa { margin-top: -3px; margin-top: -0.3rem; } *.disabled, *.pui-disabled, *[disabled], .pui-btn.disabled, .pui-btn.pui-disabled, .pui-btn[disabled], fieldset[disabled] .pui-btn, input[type="text"].disabled, input[type="text"].pui-disabled, input[type="text"][disabled], input[type="password"].disabled, input[type="password"].pui-disabled, input[type="password"][disabled], input[type="email"].disabled, input[type="email"].pui-disabled, input[type="email"][disabled], input[type="url"].disabled, input[type="url"].pui-disabled, input[type="url"][disabled], input[type="number"].disabled, input[type="number"].pui-disabled, input[type="number"][disabled], input[type="range"].disabled, input[type="range"].pui-disabled, input[type="range"][disabled], input[type="date"].disabled, input[type="date"].pui-disabled, input[type="date"][disabled], input[type="color"].disabled, input[type="color"].pui-disabled, input[type="color"][disabled], input[type="search"].disabled, input[type="search"].pui-disabled, input[type="search"][disabled], select.disabled, select.pui-disabled, select[disabled] { cursor: not-allowed; opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ -webkit-box-shadow: none; /* Webkit browsers */ box-shadow: none; /* IE9+, News */ } .pui-btn-large, .pui-btn-group.pui-btn-large > .pui-btn { padding: 6px 16px; padding: 0.6rem 1.6rem; font-size: 16px; font-size: 1.6rem; } .pui-btn-medium, .pui-btn-group.pui-btn-medium > .pui-btn { padding: 6px 12px; padding: 0.6rem 1.2rem; font-size: 14px; font-size: 1.4rem; } .pui-btn-small, .pui-btn-xsmall, .pui-btn-group.pui-btn-small > .pui-btn, .pui-btn-group.pui-btn-xsmall > .pui-btn { padding: 5px 10px; padding: 0.5rem 1rem; font-size: 12px; font-size: 1.2rem; line-height: 1.5; -webkit-border-radius: 3px; border-radius: 3px; } .pui-btn-xsmall, .pui-btn-group.pui-btn-xsmall > .pui-btn { padding: 1px 5px; padding: 0.1rem 0.5rem; line-height: 1.5; } .pui-btn-default { color: #666; border-color: #ddd; background-color: #fff; } html.no-touch .pui-btn-default:hover, .pui-btn-default.hover, .pui-btn-default.pui-hover { color: #333; border-color: #ccc; background-color: #eee; } .pui-btn-default:active, .pui-btn-default.active, .pui-btn-default.pui-active { color: #666; } .pui-btn-primary, .pui-btn-secondary, .pui-btn-info, .pui-btn-success, .pui-btn-warning, .pui-btn-error { color: #fff; } html.no-touch .pui-btn-primary:hover, .pui-btn-primary.hover, .pui-btn-primary.pui-hover, html.no-touch .pui-btn-secondary:hover, .pui-btn-secondary.hover, .pui-btn-secondary.pui-hover, html.no-touch .pui-btn-info:hover, .pui-btn-info.hover, .pui-btn-info.pui-hover, html.no-touch .pui-btn-success:hover, .pui-btn-success.hover, .pui-btn-success.pui-hover, html.no-touch .pui-btn-warning:hover, .pui-btn-warning.hover, .pui-btn-warning.pui-hover, html.no-touch .pui-btn-error:hover, .pui-btn-error.hover, .pui-btn-error.pui-hover { color: #fff; } .pui-btn-gary { border-color: #DDDDDD; background-color: #DDDDDD; } html.no-touch .pui-btn-gary:hover, .pui-btn-gary.hover, .pui-btn-gary.pui-hover { border-color: #c4c4c4; background-color: #c4c4c4; } .pui-btn-primary { color: #fff; border-color: #C54B3B; background-color: #C54B3B; } html.no-touch .pui-btn-primary:hover, .pui-btn-primary.hover, .pui-btn-primary.pui-hover { border-color: #006eb2; background-color: #006eb2; } .pui-btn-secondary { color: #fff; border-color: #3BB4F2; background-color: #3BB4F2; } html.no-touch .pui-btn-secondary:hover, .pui-btn-secondary.hover, .pui-btn-secondary.pui-hover { border-color: #10a0ea; background-color: #10a0ea; } .pui-btn-info { color: #fff; border-color: #2EAAC6; background-color: #2EAAC6; } html.no-touch .pui-btn-info:hover, .pui-btn-info.hover, .pui-btn-info.pui-hover { border-color: #24869d; background-color: #24869d; } .pui-btn-success { color: #fff; border-color: #71B472; background-color: #71B472; } html.no-touch .pui-btn-success:hover, .pui-btn-success.hover, .pui-btn-success.pui-hover { border-color: #549e55; background-color: #549e55; } .pui-btn-warning { color: #fff; border-color: #FFB74D; background-color: #FFB74D; } html.no-touch .pui-btn-warning:hover, .pui-btn-warning.hover, .pui-btn-warning.pui-hover { border-color: #ffa21a; background-color: #ffa21a; } .pui-btn-error { color: #fff; border-color: #E87467; background-color: #E87467; } html.no-touch .pui-btn-error:hover, .pui-btn-error.hover, .pui-btn-error.pui-hover { border-color: #e14b3b; background-color: #e14b3b; } a.pui-btn-primary { color: #fff; } a.pui-btn-secondary { color: #fff; } a.pui-btn-info { color: #fff; } a.pui-btn-success { color: #fff; } a.pui-btn-warning { color: #fff; } a.pui-btn-error { color: #fff; } .pui-btn-link { background: none; border-color: #fff; } html.no-touch .pui-btn-link:hover, .pui-btn-link.hover, .pui-btn-link.pui-hover { color: #0093F2; text-decoration: underline; } .pui-btn-link.active, .pui-btn-link.pui-active { color: #666; } /* button group */ .pui-btn-group { position: relative; display: inline-block; vertical-align: middle; background: transparent; } .pui-btn-group > .pui-btn { float: left; } .pui-btn-group > .pui-btn-default + .pui-btn-default { border-left: none; } .pui-btn-group > .pui-btn:not(:first-child) { -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-btn-group > .pui-btn:not(:last-child) { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-btn-group-vertical .pui-btn { display: block; float: none; width: 100%; max-width: 100%; -webkit-border-radius: 0; border-radius: 0; } .pui-btn-group-vertical .pui-btn-default + .pui-btn-default { border-top: none; border-left: 1px solid #ddd; } .pui-btn-group-vertical .pui-btn-group { margin-bottom: 1rem; } .pui-btn-group-vertical .pui-btn:first-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-btn-group-vertical .pui-btn:last-child { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-btn-group-justify { width: 100%; background: transparent; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ } .pui-btn-group-justify > .pui-btn { float: none; width: 100%; display: block; -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-btn-toolbar { background: transparent; margin-bottom: 15px; margin-bottom: 1.5rem; } .pui-btn-toolbar .pui-btn-group { float: left; } .pui-btn-toolbar > .pui-btn + .pui-btn, .pui-btn-toolbar > .pui-btn-group + .pui-btn, .pui-btn-toolbar > .pui-btn + .pui-btn-group, .pui-btn-toolbar > .pui-btn-group + .pui-btn-group { margin-left: 5px; margin-left: 0.5rem; } .pui-btn.round, .pui-btn-group.round > .pui-btn, .pui-btn-round { -webkit-border-radius: 500px; border-radius: 500px; } .pui-btn.square, .pui-btn-group.square > .pui-btn, .pui-btn-square { -webkit-border-radius: 0; border-radius: 0; } /* button box-shadow */ .pui-btn-default.pui-btn-shadow, .pui-btn-shadow .pui-btn-default { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* IE9+, News */ } html.no-touch .pui-btn-default.pui-btn-shadow:hover, .pui-btn-default.pui-btn-shadow.hover, .pui-btn-default.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-default:hover, .pui-btn-shadow .pui-btn-default.hover, .pui-btn-shadow .pui-btn-default.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-btn-gary.pui-btn-shadow, .pui-btn-shadow .pui-btn-gary { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-gary.pui-btn-shadow:hover, .pui-btn-gary.pui-btn-shadow.hover, .pui-btn-gary.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-gary:hover, .pui-btn-shadow .pui-btn-gary.hover, .pui-btn-shadow .pui-btn-gary.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-primary.pui-btn-shadow, .pui-btn-shadow .pui-btn-primary { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-primary.pui-btn-shadow:hover, .pui-btn-primary.pui-btn-shadow.hover, .pui-btn-primary.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-primary:hover, .pui-btn-shadow .pui-btn-primary.hover, .pui-btn-shadow .pui-btn-primary.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-secondary.pui-btn-shadow, .pui-btn-shadow .pui-btn-secondary { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-secondary.pui-btn-shadow:hover, .pui-btn-secondary.pui-btn-shadow.hover, .pui-btn-secondary.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-secondary:hover, .pui-btn-shadow .pui-btn-secondary.hover, .pui-btn-shadow .pui-btn-secondary.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-info.pui-btn-shadow, .pui-btn-shadow .pui-btn-info { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-info.pui-btn-shadow:hover, .pui-btn-info.pui-btn-shadow.hover, .pui-btn-info.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-info:hover, .pui-btn-shadow .pui-btn-info.hover, .pui-btn-shadow .pui-btn-info.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-success.pui-btn-shadow, .pui-btn-shadow .pui-btn-success { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-success.pui-btn-shadow:hover, .pui-btn-success.pui-btn-shadow.hover, .pui-btn-success.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-success:hover, .pui-btn-shadow .pui-btn-success.hover, .pui-btn-shadow .pui-btn-success.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-warning.pui-btn-shadow, .pui-btn-shadow .pui-btn-warning { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-warning.pui-btn-shadow:hover, .pui-btn-warning.pui-btn-shadow.hover, .pui-btn-warning.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-warning:hover, .pui-btn-shadow .pui-btn-warning.hover, .pui-btn-shadow .pui-btn-warning.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-error.pui-btn-shadow, .pui-btn-shadow .pui-btn-error { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* IE9+, News */ } html.no-touch .pui-btn-error.pui-btn-shadow:hover, .pui-btn-error.pui-btn-shadow.hover, .pui-btn-error.pui-btn-shadow.pui-hover, html.no-touch .pui-btn-shadow .pui-btn-error:hover, .pui-btn-shadow .pui-btn-error.hover, .pui-btn-shadow .pui-btn-error.pui-hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-btn-toolbar.pui-btn-shadow .pui-btn-group, .pui-btn-group-justify.pui-btn-shadow .pui-btn-group, .pui-btn-group.pui-btn-default > .pui-btn-default { -webkit-box-shadow: none; /* Webkit browsers */ box-shadow: none; /* IE9+, News */ } .pui-btn.pui-btn-block { width: 100%; display: block; text-align: center; margin-bottom: 15px; margin-bottom: 1.5rem; } .pui-btn.pui-btn-block:last-child { margin-bottom: 0; } .pui-btn .pui-badge-dot { margin-bottom: 0; } /* button dropdown menu */ .pui-btn-dropdown { display: inline-block; position: relative; } .pui-btn-dropdown .pui-btn { float: left; } .pui-btn-dropdown .pui-btn:first-child { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-btn-dropdown .pui-btn + .pui-btn { padding-left: 0.8rem; padding-right: 0.8rem; margin-left: -1px; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-btn-dropdown .pui-btn-gary + .pui-btn-gary { border-left: 1px solid #c4c4c4; } .pui-btn-dropdown .pui-btn-primary + .pui-btn-primary { border-left: 1px solid #006eb2; } .pui-btn-dropdown .pui-btn-secondary + .pui-btn-secondary { border-left: 1px solid #10a0ea; } .pui-btn-dropdown .pui-btn-info + .pui-btn-info { border-left: 1px solid #24869d; } .pui-btn-dropdown .pui-btn-success + .pui-btn-success { border-left: 1px solid #549e55; } .pui-btn-dropdown .pui-btn-warning + .pui-btn-warning { border-left: 1px solid #ffa21a; } .pui-btn-dropdown .pui-btn-error + .pui-btn-error { border-left: 1px solid #e14b3b; } /* Button : close button */ .pui-close { padding: 3px 5px; cursor: pointer; font-family: "FontAwesome"; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; color: #333; font-size: 16px; font-size: 1.6rem; text-rendering: auto; text-align: center; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-transition: opacity 300ms ease-out; /* Safari, Chrome */ -moz-transition: opacity 300ms ease-out; /* Firefox 4.0~16.0 */ transition: opacity 300ms ease-out; /* IE >9, FF >15, Opera >12.0 */ } .pui-close:after { opacity: 0.3; /* W3C */ filter: alpha(opacity=30); /* IE */ content: "\f00d"; } html.no-touch .pui-close:hover, .pui-close.hover { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } .pui-close.disabled, .pui-close.pui-disabled { cursor: not-allowed; } .pui-close-bordered { border: 1px solid #ddd; background: #fff; } html.no-touch .pui-close-bordered:hover, .pui-close-bordered.hover { border-color: #ccc; } .pui-close-border-circle { border: 1px solid #ddd; -webkit-border-radius: 500px; border-radius: 500px; } .pui-close-circle { opacity: 0.4; /* W3C */ filter: alpha(opacity=40); /* IE */ font-size: 21px; font-size: 2.1rem; background: transparent; } html.no-touch .pui-close-circle:hover, .pui-close-circle.hover { opacity: 0.7; /* W3C */ filter: alpha(opacity=70); /* IE */ } .pui-close-circle:after { content: "\F057"; } .pui-close-gary { color: #DDDDDD; } .pui-close-gary:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-gary:hover, .pui-close-gary.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-primary { color: #008EE5; } .pui-close-primary:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-primary:hover, .pui-close-primary.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-secondary { color: #3BB4F2; } .pui-close-secondary:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-secondary:hover, .pui-close-secondary.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-info { color: #2EAAC6; } .pui-close-info:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-info:hover, .pui-close-info.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-success { color: #71B472; } .pui-close-success:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-success:hover, .pui-close-success.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-warning { color: #FFB74D; } .pui-close-warning:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-warning:hover, .pui-close-warning.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-error { color: #E87467; } .pui-close-error:after { opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ } html.no-touch .pui-close-error:hover, .pui-close-error.hover { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-close-sm { padding: 3px 4px; font-size: 12px; } .pui-close-md { font-size: 14px; } .pui-close-lg { padding: 3px 4.8px; font-size: 16px; } .pui-close-xl { padding: 3px 5px; font-size: 18px; } /* Button Sheets */ .pui-button-sheet { background: #fff; width: 100%; border-collapse: collapse; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-button-sheet-table { line-height: 1; display: table; border-collapse: collapse; border: 1px solid #ddd; } .pui-button-sheet-table-unbordered { border: none; } .pui-button-sheet-row { display: table-row; width: 100%; } .pui-button-sheet-row > a { color: #999; text-align: center; display: table-cell; vertical-align: middle; -webkit-transition: all 0.05s ease-in; /* Safari, Chrome */ -moz-transition: all 0.05s ease-in; /* Firefox 4.0~16.0 */ transition: all 0.05s ease-in; /* IE >9, FF >15, Opera >12.0 */ } html.no-touch .pui-button-sheet-row > a:hover, .pui-button-sheet-row > a.hover { color: #157EE0; background: #f6f6f6; } .pui-button-sheet-row > a > [class*=pui-icon], .pui-button-sheet-row > a > [class*=icon-], .pui-button-sheet-row > a > [class*=fa-] { display: block; } .pui-button-sheet-hover-bg-none > .pui-button-sheet-row > a:hover { background: none; } .pui-button-sheet-bordered > .pui-button-sheet-row > a { border: 1px solid #ddd; } .pui-button-sheet-bordered-dashed > .pui-button-sheet-row > a { border: 1px dashed #ddd; } .pui-button-sheet-position-wrapper { padding: 20px 10px 0 10px; padding: 2rem 1rem 0 1rem; background: #fff; } .pui-button-sheet-position-bottom { width: 100%; -webkit-box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); /* IE9+, News */ position: fixed; bottom: 0; left: 0; z-index: 100; } .pui-button-sheet-wrapper { padding: 10px 5px; padding: 1rem 0.5rem; border: 1px solid #ddd; display: inline-block; background: #fff; } .pui-button-sheet-wrapper > .pui-button-sheet-table, .pui-button-sheet-position-wrapper > .pui-button-sheet-table { border: none; } .pui-button-sheet-list { line-height: 0.91; } .pui-button-sheet-list > a { margin: 0; line-height: 1; display: inline-block; overflow: visible; } html.no-touch .pui-button-sheet-list > a:hover { outline: 3px solid #111; position: relative; } /* Breadcrumb */ .pui-breadcrumb { padding: 0.5rem; margin-bottom: 2rem; list-style: none; font-size: 12px; font-size: 1.2rem; background: transparent; -webkit-border-radius: 2px; border-radius: 2px; } .pui-breadcrumb li { display: inline-block; } .pui-breadcrumb li + li:before { color: #ddd; content: "/\00a0"; padding: 0 6px; padding: 0 0.6rem; } .pui-breadcrumb li a { color: #0093F2; } html.no-touch .pui-breadcrumb li a:hover, .pui-breadcrumb li a.hover { text-decoration: underline; } .pui-breadcrumb-right .pui-breadcrumb { float: right; } .pui-breadcrumb-right:before, .pui-breadcrumb-right:after { content: " "; display: table; } .pui-breadcrumb-right:after { clear: both; } .pui-breadcrumb-arrow li + li:before { font-family: "FontAwesome"; font-size: 16px; padding: 0 8px 0 7px; content: "\F105"; } /* Card */ .pui-card { color: #666; display: block; position: relative; text-align: left; margin-bottom: 15px; margin-bottom: 1.5rem; } .pui-card p:last-child { margin-bottom: 0; } .pui-card-head, .pui-card-title, .pui-card-foot { position: relative; padding: 6px 15px; padding: 0.6rem 1.5rem; } .pui-card-head > h1, .pui-card-head > strong, .pui-card-title > h1, .pui-card-title > strong, .pui-card-foot > h1, .pui-card-foot > strong { margin: 0; font-size: 16px; font-size: 1.6rem; } .pui-card-head > h1 small, .pui-card-head > strong small, .pui-card-title > h1 small, .pui-card-title > strong small, .pui-card-foot > h1 small, .pui-card-foot > strong small { padding-left: 4px; padding-left: 0.4rem; } .pui-card-box { padding: 15px; padding: 1.5rem; overflow: auto; position: relative; color: #666; } .pui-card-box > h1 { font-size: 22px; font-size: 2.2rem; } .pui-card-head + .pui-card-box { padding-top: 5px; } .pui-card-default { background: #fff; border: 1px solid #ddd; } .pui-card-simple .pui-card-box { padding: 5px 15px; padding: 0.5rem 1.5rem; } .pui-card-unbordered { border: none; } .pui-card-unbordered .pui-card-title, .pui-card-unbordered .pui-card-head { padding-top: 0; } .pui-card-unbordered .pui-card-foot { padding-bottom: 0; } .pui-card-unbordered .pui-card-head, .pui-card-unbordered .pui-card-title, .pui-card-unbordered .pui-card-foot, .pui-card-unbordered .pui-card-box { padding-left: 0; padding-right: 0; } .pui-card-badge { display: inline-block; padding: 0 5px; background: #fff; font-size: 10px; font-size: 1rem; font-weight: 700; line-height: 14px; color: #fff; text-align: center; vertical-align: middle; text-transform: none; border: 1px solid #ddd; -webkit-border-radius: 2px; border-radius: 2px; } .pui-card-head-bg, .pui-card-title-bg, .pui-card-foot-bg { background: #fafafa; } .pui-card-title-left-border { margin-left: -16px; margin-left: -1.6rem; } .pui-card-title-left-border > h1, .pui-card-title-left-border > strong { padding: 0; border-left: 4px solid #008EE5; padding-left: 12px; padding-left: 1.2rem; } .pui-card-title-underline { padding-top: 4px; padding-top: 0.4rem; padding-bottom: 5px; padding-bottom: 0.5rem; border-bottom: 1px solid #ddd; } .pui-card-foot-topline { border-top: 1px solid #ddd; } .pui-card-title-right { float: right; color: #ccc; padding-top: 4px; padding-top: 0.4rem; } .pui-card-title-right a { color: #ccc; } html.no-touch .pui-card-title-right a:hover, .pui-card-title-right a.hover { color: #007CFF; } .pui-card-title-right html.no-touch .pui-badge:hover, .pui-card-title-right .pui-badge.hover { color: #fff; } .pui-card-title-right html.no-touch .pui-badge-default:hover, .pui-card-title-right .pui-badge-default.hover { color: #ccc; } .pui-card-gary { border-color: white; } .pui-card-gary .pui-card-head, .pui-card-gary .pui-card-title, .pui-card-gary .pui-card-foot { color: #DDDDDD; border-color: white; background-color: white; } .pui-card-gary .pui-card-head small, .pui-card-gary .pui-card-head span, .pui-card-gary .pui-card-head a, .pui-card-gary .pui-card-title small, .pui-card-gary .pui-card-title span, .pui-card-gary .pui-card-title a, .pui-card-gary .pui-card-foot small, .pui-card-gary .pui-card-foot span, .pui-card-gary .pui-card-foot a { color: #DDDDDD; } .pui-card-primary { border-color: #75caff; } .pui-card-primary .pui-card-head, .pui-card-primary .pui-card-title, .pui-card-primary .pui-card-foot { color: #008EE5; border-color: #75caff; background-color: #a8deff; } .pui-card-primary .pui-card-head small, .pui-card-primary .pui-card-head span, .pui-card-primary .pui-card-head a, .pui-card-primary .pui-card-title small, .pui-card-primary .pui-card-title span, .pui-card-primary .pui-card-title a, .pui-card-primary .pui-card-foot small, .pui-card-primary .pui-card-foot span, .pui-card-primary .pui-card-foot a { color: #008EE5; } .pui-card-secondary { border-color: #c1e7fb; } .pui-card-secondary .pui-card-head, .pui-card-secondary .pui-card-title, .pui-card-secondary .pui-card-foot { color: #3BB4F2; border-color: #c1e7fb; background-color: #f1fafe; } .pui-card-secondary .pui-card-head small, .pui-card-secondary .pui-card-head span, .pui-card-secondary .pui-card-head a, .pui-card-secondary .pui-card-title small, .pui-card-secondary .pui-card-title span, .pui-card-secondary .pui-card-title a, .pui-card-secondary .pui-card-foot small, .pui-card-secondary .pui-card-foot span, .pui-card-secondary .pui-card-foot a { color: #3BB4F2; } .pui-card-info { border-color: #9bdae8; } .pui-card-info .pui-card-head, .pui-card-info .pui-card-title, .pui-card-info .pui-card-foot { color: #2EAAC6; border-color: #9bdae8; background-color: #c4e9f1; } .pui-card-info .pui-card-head small, .pui-card-info .pui-card-head span, .pui-card-info .pui-card-head a, .pui-card-info .pui-card-title small, .pui-card-info .pui-card-title span, .pui-card-info .pui-card-title a, .pui-card-info .pui-card-foot small, .pui-card-info .pui-card-foot span, .pui-card-info .pui-card-foot a { color: #2EAAC6; } .pui-card-success { border-color: #cee5cf; } .pui-card-success .pui-card-head, .pui-card-success .pui-card-title, .pui-card-success .pui-card-foot { color: #71B472; border-color: #cee5cf; background-color: #f0f7f0; } .pui-card-success .pui-card-head small, .pui-card-success .pui-card-head span, .pui-card-success .pui-card-head a, .pui-card-success .pui-card-title small, .pui-card-success .pui-card-title span, .pui-card-success .pui-card-title a, .pui-card-success .pui-card-foot small, .pui-card-success .pui-card-foot span, .pui-card-success .pui-card-foot a { color: #71B472; } .pui-card-warning { border-color: #FAE5C4; } .pui-card-warning .pui-card-head, .pui-card-warning .pui-card-title, .pui-card-warning .pui-card-foot { color: #FFB74D; border-color: #FAE5C4; background-color: #FCF5E8; } .pui-card-warning .pui-card-head small, .pui-card-warning .pui-card-head span, .pui-card-warning .pui-card-head a, .pui-card-warning .pui-card-title small, .pui-card-warning .pui-card-title span, .pui-card-warning .pui-card-title a, .pui-card-warning .pui-card-foot small, .pui-card-warning .pui-card-foot span, .pui-card-warning .pui-card-foot a { color: #FFB74D; } .pui-card-error { border-color: #F7D1CB; } .pui-card-error .pui-card-head, .pui-card-error .pui-card-title, .pui-card-error .pui-card-foot { color: #E87467; border-color: #F7D1CB; background-color: #FFE8E3; } .pui-card-error .pui-card-head small, .pui-card-error .pui-card-head span, .pui-card-error .pui-card-head a, .pui-card-error .pui-card-title small, .pui-card-error .pui-card-title span, .pui-card-error .pui-card-title a, .pui-card-error .pui-card-foot small, .pui-card-error .pui-card-foot span, .pui-card-error .pui-card-foot a { color: #E87467; } .pui-card-radius { -webkit-border-radius: 4px; border-radius: 4px; } .pui-card-square { -webkit-border-radius: none; border-radius: none; } .pui-card-group .pui-card { margin-bottom: 8px; margin-bottom: 0.8rem; } .pui-card-group .pui-card-head, .pui-card-group .pui-card-title, .pui-card-group .pui-card-foot { background: #fafafa; } .pui-card-padding-none .pui-card-head, .pui-card-padding-none .pui-card-title, .pui-card-padding-none .pui-card-box, .pui-card-padding-none .pui-card-foot { padding-left: 0; padding-right: 0; } .pui-card-box.pui-card-box-underline { border: none; border-bottom: 1px solid #ddd; margin-bottom: -5px; margin-bottom: -0.5rem; } .pui-card-shadow { -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* IE9+, News */ } html.no-touch .pui-card-shadow:hover, .pui-card-shadow.hover, .pui-card-shadow.pui-hover { -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); /* Webkit browsers */ box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); /* IE9+, News */ } .pui-row .pui-card:last-child { margin-bottom: 0; } .pui-card-image { overflow: auto; border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .pui-card-head-bg { position: relative; padding: 0; } .pui-card-head-bg > h1 { color: #fff; position: absolute; left: 1.5rem; bottom: 1.5rem; margin: 0; font-size: 2.2rem; } .pui-card-head-bg > h1 > small { color: #fff; } .pui-card-head-img { width: 100%; height: auto; margin: 0 0 -0.6rem; } .pui-card-radius .pui-card-head-img { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .pui-card-column { display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-card-column > .pui-card-box { -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-card-left, .pui-card-right { position: relative; } .pui-card-left > p, .pui-card-right > p { margin-bottom: 0; } .pui-card-left > h1, .pui-card-right > h1 { color: #fff; position: absolute; left: 1.5rem; bottom: 1.5rem; margin: 0; font-size: 2.2rem; line-height: 1.4; text-align: left; -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .pui-card-left > h1 > small, .pui-card-right > h1 > small { color: #fff; display: block; margin: 0; } .pui-card-right > h1 { text-align: right; } .pui-card-box-left { float: left; margin-right: 2rem; } .pui-card-box-right { float: right; margin-left: 2rem; } @media (max-width: 360px) { .pui-card-column { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* Firefox 28+, IE11, Opera 12.10 */ } .pui-card-column > .pui-card-left { height: auto; } } /* Comment */ .pui-comment { width: 100%; padding: 1.5rem 0; position: relative; background: #fff; border-bottom: 1px solid #ddd; } .pui-comment:before, .pui-comment:after { content: " "; display: table; } .pui-comment:after { clear: both; } .pui-comment:last-child { border-bottom: none; } .pui-comment a { color: #999; padding: 0 0.5rem; display: inline-block; } .pui-comment a.pui-link, html.no-touch .pui-comment a:hover, .pui-comment a.hover { color: #296AEA; } .pui-comment-arrow, .pui-comment-arrow span { width: 0; height: 0; border: 8px solid transparent; border-top: 0; border-bottom: 8px solid #eee; position: absolute; top: -8px; left: 2.4rem; } .pui-comment-arrow span { border-bottom-color: #fff; display: block; top: 2px; left: -8px; } .pui-comment-avatar { text-align: center; padding-right: 2rem; float: left; } .pui-comment-container { width: 100%; float: left; position: relative; } .pui-comment-header { position: relative; display: block; } .pui-comment-title { width: 100%; font-size: 1.4rem; margin-bottom: 0; position: relative; } .pui-comment-title-right { float: right; color: #999; } .pui-comment-subtitle, .pui-comment-foot { color: #ccc; font-size: 1.2rem; } .pui-comment-foot { text-align: left; } .pui-comment-content { padding: 1rem 0; } .pui-comment-content blockquote { color: #ccc; font-size: 1.2rem; margin-top: 0.5rem; padding: 0.8rem 1.5rem; } .pui-comment-avatar-left .pui-comment-avatar { position: absolute; top: 1.6rem; left: 0; } .pui-comment-avatar-left .pui-comment-container { padding-left: 58px; } .pui-comment-main { border: 1px solid #eee; border-radius: 5px; padding: 15px; } [class*=pui-comment-arrow-]:before, [class*=pui-comment-arrow-]:after { width: 0; height: 0; display: block; content: ""; border: 8px solid transparent; pointer-events: pointer-events; position: absolute; } .pui-comment-arrow-lt:before, .pui-comment-arrow-lt:after { border-right-color: #ddd; top: 15px; left: 43px; } .pui-comment-arrow-lt:after { border-right-color: #fff; left: 44px; } .pui-comment-arrow-rt:before, .pui-comment-arrow-rt:after { border-left-color: #ddd; top: 15px; right: 43px; } .pui-comment-arrow-rt:after { border-left-color: #fff; right: 44px; } .pui-comment-avatar-right > .pui-comment-avatar { position: absolute; top: 1.6rem; right: 0; padding-right: 0; } .pui-comment-avatar-right > .pui-comment-container { padding-right: 58px; } .pui-comment-reply .pui-comment { margin: 15px auto; padding: 10px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #eee; background: #fff; } .pui-comment-reply .pui-comment-avatar-left .pui-comment-avatar { top: 1.4rem; left: 1.4rem; } .pui-comment-reply .pui-comment:last-child { margin-bottom: 0; } @media (max-width: 640px) { .pui-comment-reply .pui-comment-reply-time { display: block; } } .pui-color-picker { position: relative; } .pui-color-picker:after { color: #000; font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 1.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f200"; opacity: 0.2; /* W3C */ filter: alpha(opacity=20); /* IE */ position: absolute; top: 0.2rem; right: 1rem; } .pui-color-picker > .pui-button-sheet-list { padding: 1rem; background: #fff; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* Webkit browsers */ box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* IE9+, News */ position: absolute; top: 100%; left: 0; } .pui-color-picker > .pui-button-sheet-list > a { width: 2rem; height: 2rem; } /* WebComponents : Custom Checkbox & Radio */ pui-checkbox, pui-radio { font-size: 14px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } pui-checkbox:before, pui-radio:before { font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 18px; font-size: 1.8rem; padding-right: 5px; padding-right: 0.5rem; line-height: 1; vertical-align: middle; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ddd; content: "\F096"; } pui-checkbox > input, pui-radio > input { width: 0; height: 0; visibility: hidden; } pui-checkbox + pui-checkbox, pui-radio + pui-radio { margin-left: 10px; margin-left: 1rem; } pui-checkbox.checked:before { color: #71B472; content: "\F046"; } pui-radio:before { content: "\F10C"; } pui-radio.checked:before { color: #71B472; content: "\f192"; } .pui-dialog { min-width: 120px; min-height: 120px; position: fixed; top: 10%; left: 25%; z-index: 1000; -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); /* IE9+, News */ background: #fff; display: box; display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* Firefox 28+, IE11, Opera 12.10 */ -webkit-flex-flow: column; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-flow: column; -ms-flex-flow: column; flex-flow: column; /* Firefox 28+, IE11, Opera 12.10 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-dialog > header { text-align: center; width: 100%; height: 38px; line-height: 38px; border-bottom: 1px solid #ddd; background: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-dialog > header > strong { font-size: 16px; padding: 0 10px; } .pui-dialog > header > strong > small { padding-left: 10px; } .pui-dialog.pui-radius > header { border-top-left-radius: 4px; border-top-right-radius: 4px; } .pui-dialog > .pui-close { margin: 0; padding: 0; position: absolute; top: 11px; right: 11px; } .pui-dialog > .pui-close.pui-circle { padding: 2px 4px; border-radius: 50% !important; top: -10px; right: -10px; border: none; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } html.no-touch .pui-dialog > .pui-close.pui-circle:hover, .pui-dialog > .pui-close.pui-circle.hover { opacity: 1; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); } .pui-dialog > .pui-close-circle { top: -10px; right: -10px; opacity: 1; } .pui-dialog > section { overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px; box-flex: 1; -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-dialog > section.has-iframe { overflow: hidden; -webkit-overflow-scrolling: touch; padding: 0; } .pui-dialog > section.has-iframe > iframe { width: 99.99%; height: 100%; } .pui-dialog.pui-radius > section, .pui-dialog.pui-radius > section.has-iframe > iframe { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-dialog > footer { width: 100%; height: 38px; line-height: 38px; border-top: 1px solid #ddd; } .pui-dialog > footer > small { padding: 0 10px; } .pui-dialog[type="window"], .pui-dialog[type="iframe"] { min-width: 50%; min-height: 30%; left: 25%; top: 40%; } .pui-dialog[type="window"] > header, .pui-dialog[type="iframe"] > header { text-align: left; } .pui-dialog[type="window"] > header > strong > .fa, .pui-dialog[type="iframe"] > header > strong > .fa { margin-right: 7px; vertical-align: middle; } .pui-dialog[type="window"] > .pui-dialog-toolbar, .pui-dialog[type="iframe"] > .pui-dialog-toolbar { position: absolute; top: 7px; right: 9px; } .pui-dialog[type="window"] > .pui-dialog-toolbar > .fa, .pui-dialog[type="iframe"] > .pui-dialog-toolbar > .fa { font-size: 16px; opacity: 0.3; color: #000; cursor: pointer; vertical-align: middle; } html.no-touch .pui-dialog[type="window"] > .pui-dialog-toolbar > .fa:hover, .pui-dialog[type="window"] > .pui-dialog-toolbar > .fa.hover, html.no-touch .pui-dialog[type="iframe"] > .pui-dialog-toolbar > .fa:hover, .pui-dialog[type="iframe"] > .pui-dialog-toolbar > .fa.hover { opacity: 0.5; } .pui-dialog[type="window"] > .pui-dialog-toolbar > a + a, .pui-dialog[type="iframe"] > .pui-dialog-toolbar > a + a { display: inline-block; margin-left: 1rem; } .pui-dialog[type="window"] > .pui-dialog-toolbar .pui-dialog-blank, .pui-dialog[type="iframe"] > .pui-dialog-toolbar .pui-dialog-blank { margin-top: 2px; } .pui-dialog[type*="alert"], .pui-dialog[type*="confirm"], .pui-dialog[type*="prompt"] { width: 80%; left: 10%; top: 40%; overflow: hidden; } .pui-dialog > .pui-btn-center { border-radius: 0; text-align: center; padding: 12px 0; } .pui-dialog > .pui-btn-center > .pui-btn + .pui-btn { margin-left: 8px; } .pui-dialog > .pui-btn-group-justify { width: 100%; padding: 0; margin: 0; } .pui-dialog > .pui-btn-group-justify > .pui-btn { float: none; -webkit-border-radius: 0; border-radius: 0; border: none; border-top: 1px solid #eee; padding-left: 0; padding-right: 0; margin: 0; } .pui-dialog.pui-radius > .pui-btn-group-justify > .pui-btn { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-dialog[type*="confirm"] > .pui-btn-group > .pui-btn, .pui-dialog[type*="prompt"] > .pui-btn-group > .pui-btn { border-bottom: 0; border-color: #eee; margin: 0; } .pui-dialog[type*="confirm"] > .pui-btn-group > .pui-btn:first-child, .pui-dialog[type*="prompt"] > .pui-btn-group > .pui-btn:first-child { border-left: none; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; } .pui-dialog[type*="confirm"] > .pui-btn-group > .pui-btn:last-child, .pui-dialog[type*="prompt"] > .pui-btn-group > .pui-btn:last-child { border-right: none; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; } .pui-dialog[type*="confirm"] > .pui-btn-group > .pui-btn + .pui-btn, .pui-dialog[type*="prompt"] > .pui-btn-group > .pui-btn + .pui-btn { margin-left: -1px; border-left: 1px solid #eee; } .pui-dialog[type*="prompt"] > section > input[type="text"] { -webkit-border-radius: 0; border-radius: 0; } .pui-dialog[type*="prompt"].pui-radius > section > input[type="text"] { border-radius: 4px; } .pui-dialog[type="loading"], .pui-dialog[type="table"] { padding: 0; display: table; } .pui-dialog[type="loading"] > section, .pui-dialog[type="table"] > section { display: table-cell; text-align: center; vertical-align: middle; } .pui-dialog > .pui-dialog-nav { width: 100%; display: table; padding: 0 1rem 1rem 1rem; } .pui-dialog > .pui-dialog-nav > a { display: table-cell; text-align: center; } .pui-dialog-dock { position: fixed; bottom: 0; left: 0; padding: 10px 10px 5px; width: 100%; background: #000 rgba(0, 0, 0, 0.5); background: #fff; z-index: 10001; overflow: hidden; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2); } .pui-dialog-dock > a { display: inline-block; padding: 5px 12px; border: 1px solid #ddd; margin-bottom: 4px; background: #fff; } @media (min-width: 301px) and (max-width: 640px) { .pui-dialog[type*="alert"], .pui-dialog[type*="prompt"], .pui-dialog[type*="confirm"] { width: 60%; left: 20%; } } @media (min-width: 641px) and (max-width: 768px) { .pui-dialog[type*="alert"], .pui-dialog[type*="prompt"], .pui-dialog[type*="confirm"] { width: 48%; left: 26%; } } @media (min-width: 769px) and (max-width: 1024px) { .pui-dialog[type*="alert"], .pui-dialog[type*="prompt"], .pui-dialog[type*="confirm"] { width: 32%; left: 34%; } } @media (min-width: 1025px) and (max-width: 1440px) { .pui-dialog[type*="alert"], .pui-dialog[type*="prompt"], .pui-dialog[type*="confirm"] { width: 20%; left: 40%; } } @media (min-width: 1441px) { .pui-dialog[type*="alert"], .pui-dialog[type*="prompt"], .pui-dialog[type*="confirm"] { width: 16%; left: 42%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .pui-dialog .pui-btn-group-justify > .pui-btn { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 1.6rem; font-weight: normal; } } .pui-font-sizer { display: inline-block; margin-left: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-font-sizer > span { padding: 2px 3px; border-radius: 3px; border: 1px solid #fff; line-height: 1; cursor: pointer; display: inline-block; -webkit-transition: all 300ms ease-out; /* Safari, Chrome */ -moz-transition: all 300ms ease-out; /* Firefox 4.0~16.0 */ transition: all 300ms ease-out; /* IE >9, FF >15, Opera >12.0 */ } html.no-touch .pui-font-sizer > span:hover, .pui-font-sizer > span.hover { background: #fafafa; border: 1px solid #ddd; } /* TOP 10 List */ .pui-top10-list > li > a { display: block; padding: 3px; } .pui-top10-list > li > a:before { text-align: center; margin-right: 8px; padding: 0 5px; line-height: 1; -webkit-border-radius: 3px; border-radius: 3px; color: #999; background: #eee; } .pui-top10-list > li > a.pui-top-1:before { color: #fff; background: red; content: "1"; } .pui-top10-list > li > a.pui-top-2:before { color: #fff; background: #ff6600; content: "2"; } .pui-top10-list > li > a.pui-top-3:before { color: #fff; background: orange; content: "3"; } .pui-top10-list > li > a.pui-top-4:before { content: "4"; } .pui-top10-list > li > a.pui-top-5:before { content: "5"; } .pui-top10-list > li > a.pui-top-6:before { content: "6"; } .pui-top10-list > li > a.pui-top-7:before { content: "7"; } .pui-top10-list > li > a.pui-top-8:before { content: "8"; } .pui-top10-list > li > a.pui-top-9:before { content: "9"; } .pui-top10-list > li > a.pui-top-10:before { padding: 0 2px; content: "10"; } .pui-top10-list > li > a > .pui-top-count { color: #ccc; float: right; } .pui-top10-list-box { margin-left: 32px; margin-bottom: 5px; } .pui-top10-list-box > small { display: block; padding: 5px 10px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #f6f6f6; background: #fafafa; } .pui-top10-list-square > li > a:before { -webkit-border-radius: 0; border-radius: 0; } .pui-top10-list-circle > li > a:before { padding: 1px 6px; -webkit-border-radius: 500px; border-radius: 500px; } /* ListView */ .pui-list-view { margin: 0; } .pui-list-view > li { width: 100%; clear: both; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ } .pui-list-view > li > div { -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ } .pui-list-view > li > a { -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* Firefox 28+, IE11, Opera 12.10 */ position: relative; padding: 10px; padding: 1rem; color: #666; -webkit-transition: background-color 0.1s ease-in; /* Safari, Chrome */ -moz-transition: background-color 0.1s ease-in; /* Firefox 4.0~16.0 */ transition: background-color 0.1s ease-in; /* IE >9, FF >15, Opera >12.0 */ -webkit-user-select: none; -webkit-touch-callout: none; } .pui-list-view > li > a:before, .pui-list-view > li > a:after { content: " "; display: table; } .pui-list-view > li > a:after { clear: both; } html.no-touch .pui-list-view > li > a:hover, .pui-list-view > li > a.hover { background-color: #f6f6f6; } .pui-list-view > li > a > img { width: 48px; height: 48px; position: relative; } .pui-list-view > li > a > .icon, .pui-list-view > li > a > .tb-icon, .pui-list-view > li > a > .fa { font-size: 48px; float: left; position: relative; } .pui-list-view > li > a > .pui-badge { position: absolute; top: 5px; left: 48px; padding: 2px 1px; min-width: 10px; min-height: 10px; line-height: 1; } .pui-list-view > li > a > .pui-badge-dot { top: 6px; left: 52px; } .pui-list-view > li > a > .pui-badge-right { top: 38%; left: auto; right: 10px; min-width: auto; min-height: auto; } .pui-list-view > li > a > .pui-badge-right:not(.pui-circle) { padding: 3px 3px 2px; } .pui-list-view > li > a > summary { -webkit-box-flex: 1; /* Old - iOS 6-, Safari 3.1~6 */ -moz-box-flex: 1; -webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ -moz-flex: 1; -ms-flex: 1; /* IE 10 */ flex: 1; /* New, Spec - Firefox, Chrome, Opera */ height: 100%; padding: 3px 50px 0 0; margin-left: 1.2rem; vertical-align: middle; } html.no-touch .pui-list-view > li > a > summary { padding-top: 0; } .pui-list-view > li > a > summary > h6 { margin-top: -2px; margin-bottom: 0; } .pui-list-view > li > a > summary > h6 > small { margin-right: -50px; float: right; color: #ddd; } .pui-list-view > li > a > summary > small, .pui-list-view > li > a > summary > strong { display: block; } .pui-list-view > li:not(:last-child) > a { border-bottom: 1px solid #eee; } .pui-list-view > li.pui-list-view-header { color: #999; font-size: 12px; font-size: 1.2rem; margin: 0; padding: 0.5rem 0; } .pui-list-view-group > .pui-list-view:not(:last-child) { margin-bottom: 10px; } .pui-list-view-angle-right > li > a:after { width: 0; height: 40%; color: #ccc; line-height: 1; font-size: 24px; font-weight: normal; font-family: "FontAwesome"; content: "\f105"; position: absolute; top: 32%; right: 20px; } .pui-list-view-angle-right > li > a.no-angle-right:after, .pui-list-view-angle-right > li > a.pui-no-angle-right:after { content: ""; } .pui-list-view-small > li > a { padding: 5px 10px; } .pui-list-view-small > li > a > img { width: 24px; } .pui-list-view-small > li > a > .icon, .pui-list-view-small > li > a > .pui-icon, .pui-list-view-small > li > a > .fa { font-size: 24px; } .pui-list-view-small > li > a > .pui-badge { top: 3px; left: 24px; } .pui-list-view-small > li > a > .pui-badge-dot { top: 3px; left: 28px; } html.no-touch .pui-list-view-small > li > a > .pui-badge-right { top: 8px; left: auto; } .pui-list-view-small > li > a > .pui-badge-right { top: 9px; left: auto; } .pui-list-view-small > li > a > summary { padding-top: 0; margin-left: 20px; } .pui-list-view-small > li > a > summary > h6 { margin-top: -1px; } .pui-list-view-small.pui-list-view-angle-right > li > a:after { top: 5px; } .pui-list-view-round > li > a > img, .pui-list-view-circle > li > a > img { -webkit-border-radius: 500px; border-radius: 500px; } .pui-list-view-radius > li > a > img { -webkit-border-radius: 4px; border-radius: 4px; } .pui-list-view-square > li > a > img { -webkit-border-radius: 0; border-radius: 0; } /* Loading */ .pui-loading { margin: 0 auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-loading > span, .pui-loading-flashing { background-color: #67CF22; } .pui-loading-stop { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; /* Firefox 5.0~16.0 */ animation-play-state: paused !important; } /* loading scale vertical bar */ .pui-loading-scale-vbar { height: 32px; list-style: none; } @-webkit-keyframes loading-scale-vbar { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-moz-keyframes loading-scale-vbar { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes loading-scale-vbar { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } .pui-loading-scale-vbar > span { width: 3px; height: 100%; display: inline-block; -webkit-animation: loading-scale-vbar 1.2s infinite ease-in-out; -moz-animation: loading-scale-vbar 1.2s infinite ease-in-out; /* Firefox 5.0~16.0 */ animation: loading-scale-vbar 1.2s infinite ease-in-out; /* IE10+ */ } .pui-loading-scale-vbar > span:last-child { margin-right: 0px; } .pui-loading-scale-vbar > span:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; /* Firefox 5.0~16.0 */ animation-delay: 0.1s; } .pui-loading-scale-vbar > span:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; /* Firefox 5.0~16.0 */ animation-delay: 0.2s; } .pui-loading-scale-vbar > span:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; /* Firefox 5.0~16.0 */ animation-delay: 0.3s; } .pui-loading-scale-vbar > span:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; /* Firefox 5.0~16.0 */ animation-delay: 0.4s; } .pui-loading-scale-vbar[small] { height: 24px; } .pui-loading-scale-vbar[small] > span { width: 2px; } /* loading circle inline */ @-webkit-keyframes loading-circle-inline { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes loading-circle-inline { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loading-circle-inline { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } .pui-loading-circle-inline > span { display: inline-block; -webkit-border-radius: 100%; border-radius: 100%; width: 12px; height: 12px; -webkit-animation: loading-circle-inline 1.4s infinite ease-in-out; -moz-animation: loading-circle-inline 1.4s infinite ease-in-out; /* Firefox 5.0~16.0 */ animation: loading-circle-inline 1.4s infinite ease-in-out; /* IE10+ */ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .pui-loading-circle-inline > span:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; /* Firefox 5.0~16.0 */ animation-delay: 0.1s; } .pui-loading-circle-inline > span:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; /* Firefox 5.0~16.0 */ animation-delay: 0.2s; } .pui-loading-circle-inline > span:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; /* Firefox 5.0~16.0 */ animation-delay: 0.3s; } .pui-loading-circle-inline > span:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; /* Firefox 5.0~16.0 */ animation-delay: 0.4s; } .pui-loading-circle-inline[small] > span { width: 8px; height: 8px; } /* Loading flashing */ @-webkit-keyframes loading-flashing { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes loading-flashing { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes loading-flashing { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } .pui-loading-flashing { width: 40px; height: 40px; -webkit-border-radius: 100%; border-radius: 100%; -webkit-animation: loading-flashing 1s infinite ease-in-out; -moz-animation: loading-flashing 1s infinite ease-in-out; /* Firefox 5.0~16.0 */ animation: loading-flashing 1s infinite ease-in-out; /* IE10+ */ } /* Loading flashing double */ @-webkit-keyframes loading-flashing-double { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes loading-flashing-double { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loading-flashing-double { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .pui-loading-flashing-double { position: relative; width: 32px; height: 32px; } .pui-loading-flashing-double > span { display: block; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: loading-flashing-double 2s infinite ease-in-out; -moz-animation: loading-flashing-double 2s infinite ease-in-out; /* Firefox 5.0~16.0 */ animation: loading-flashing-double 2s infinite ease-in-out; /* IE10+ */ } .pui-loading-flashing-double > span:nth-child(2) { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; /* Firefox 5.0~16.0 */ animation-delay: -1s; } /* loading full width bar */ .pui-loading-full-width { margin: 0; padding: 0; } .pui-loading-full-width.fixed-top, .pui-loading-full-width.fixed-bottom { width: 100%; position: fixed; left: 0; } .pui-loading-full-width.fixed-top { top: 0; } .pui-loading-full-width.fixed-bottom { bottom: 0; } .pui-loading-full-width > span { width: 100%; height: 3px; margin: 0; position: absolute; -webkit-animation: loading-full-width-bar 10s infinite ease-out; -moz-animation: loading-full-width-bar 10s infinite ease-out; /* Firefox 5.0~16.0 */ animation: loading-full-width-bar 10s infinite ease-out; /* IE10+ */ } @-webkit-keyframes loading-full-width-bar { 0% { width: 0px; } 10% { width: 10%; } } @-moz-keyframes loading-full-width-bar { 0% { width: 0px; } 10% { width: 10%; } } @keyframes loading-full-width-bar { 0% { width: 0px; } 10% { width: 10%; } } /* loading double circle rotation */ .pui-loading-double-circle-rotation { margin: 10px auto; width: 48px; height: 48px; position: relative; text-align: center; -webkit-animation: loading-double-circle-rotate 2s infinite linear; -moz-animation: loading-double-circle-rotate 2s infinite linear; /* Firefox 5.0~16.0 */ animation: loading-double-circle-rotate 2s infinite linear; /* IE10+ */ } .pui-loading-double-circle-rotation > span { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; -webkit-border-radius: 100%; border-radius: 100%; -webkit-animation: loading-double-circle-scale 2s infinite ease-in-out; -moz-animation: loading-double-circle-scale 2s infinite ease-in-out; /* Firefox 5.0~16.0 */ animation: loading-double-circle-scale 2s infinite ease-in-out; /* IE10+ */ } .pui-loading-double-circle-rotation > span:nth-child(2) { top: auto; bottom: 0; -webkit-animation-delay: -1s; -moz-animation-delay: -1s; /* Firefox 5.0~16.0 */ animation-delay: -1s; } @-webkit-keyframes loading-double-circle-rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes loading-double-circle-rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-double-circle-rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading-double-circle-scale { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes loading-double-circle-scale { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loading-double-circle-scale { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* Loading Ring Circle Rotate */ .pui-loading-ring, .pui-loading-ring-xxs, .pui-loading-ring-xsmall, .pui-loading-ring-small, .pui-loading-ring-large { display: block; background-color: transparent; border: 2px solid #67CF22; border-top-color: transparent; border-left-color: transparent; -webkit-border-radius: 500px; border-radius: 500px; margin: 0 auto; -webkit-animation: loading-ring-rotate 0.5s infinite linear; -moz-animation: loading-ring-rotate 0.5s infinite linear; /* Firefox 5.0~16.0 */ animation: loading-ring-rotate 0.5s infinite linear; /* IE10+ */ } .pui-loading-ring { width: 30px; height: 30px; } .pui-loading-ring-xxs { width: 12px; height: 12px; } .pui-loading-ring-xsmall { width: 16px; height: 16px; } .pui-loading-ring-small { width: 24px; height: 24px; } .pui-loading-ring-large { width: 40px; height: 40px; } @-webkit-keyframes loading-ring-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes loading-ring-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-ring-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading-ring-rotate-reverse { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes loading-ring-rotate-reverse { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes loading-ring-rotate-reverse { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } .pui-loading-ring-group > .pui-loading-ring-small, .pui-loading-ring-group-large > .pui-loading-ring, .pui-loading-ring-group-small > .pui-loading-ring-xsmall { position: relative; -webkit-animation: loading-ring-rotate-reverse 0.5s infinite linear; -moz-animation: loading-ring-rotate-reverse 0.5s infinite linear; /* Firefox 5.0~16.0 */ animation: loading-ring-rotate-reverse 0.5s infinite linear; /* IE10+ */ } .pui-loading-ring-group-large > .pui-loading-ring { top: -32px; width: 24px; height: 24px; } .pui-loading-ring-group > .pui-loading-ring-small { top: -24px; width: 18px; height: 18px; } .pui-loading-ring-group-small > .pui-loading-ring-xsmall { top: -19px; width: 14px; height: 14px; } .pui-loading-spinner { display: inline-block; } .pui-loading-spinner > span { color: #67CF22; background: none; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; } /* Menus */ .pui-menu { margin: 0 0 1.5rem 0; padding: 0; list-style: none; position: relative; -webkit-user-select: none; -webkit-touch-callout: none; } .pui-menu > li { position: relative; } .pui-menu > li > a { display: block; padding: 7px 15px; margin-bottom: 0.2rem; -webkit-transition: all 0.2s ease-out; /* Safari, Chrome */ -moz-transition: all 0.2s ease-out; /* Firefox 4.0~16.0 */ transition: all 0.2s ease-out; /* IE >9, FF >15, Opera >12.0 */ } .pui-menu > li > a.active, .pui-menu > li > a.pui-active { background: #008EE5; color: #fff; } html.no-touch .pui-menu > li > a.active:hover, .pui-menu > li > a.active.hover, html.no-touch .pui-menu > li > a.pui-active:hover, .pui-menu > li > a.pui-active.hover { background: #007ecc; } html.no-touch .pui-menu > li > a:hover, .pui-menu > li > a.hover { background: #f6f6f6; } .pui-menu > li > a > [class*=icon-], .pui-menu > li > a > [class*=fa-], .pui-menu > li > a > [class*=pui-icon-] { font-size: 1.6rem; margin-right: 0.5rem; } .pui-menu > li > a > .pui-badge { padding-top: 0; padding-bottom: 0; margin-left: 0.5rem; margin-top: 0; min-width: 1.6rem; line-height: 1.6rem; font-size: 1rem; float: right; } .pui-menu > li.pui-menu-header-small, .pui-menu > li.pui-menu-header { padding: 0; font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem; } .pui-menu > li.pui-menu-header-small { font-weight: normal; color: #ccc; } .pui-menu > li.pui-menu-header-frame { padding-left: 1.2rem; border-left: 3px solid #008EE5; } .pui-menu > li.pui-menu-divider { margin: 1.2rem 0; border-bottom: 1px solid #ddd; } .pui-menu > li.pui-menu-foot { margin: 1.2rem 0; } .pui-menu > li > .pui-badge-dot { position: absolute; top: 35%; right: 1.5rem; } .pui-menu .disabled, .pui-menu .pui-disabled { color: #ccc; } .pui-menu-small > li > a { padding: 5px 12px; } .pui-menu-radius > li > a { border-radius: 4px; } .pui-menu-round > li > a { border-radius: 500px; } .pui-menu-radius-top > li > a { border-radius: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; } .pui-menu-radius-bottom > li > a { border-radius: 0; border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-menu-radius-left > li > a { border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-menu-radius-right > li > a { border-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-menu-link-color > li > a { color: #008EE5; } .pui-menu-active-underline { border-bottom: 2px solid #ddd; } .pui-menu-active-underline > li { margin-bottom: -4px; } .pui-menu-active-underline > li > a { padding-bottom: 7px; } .pui-menu-active-underline > li > a.active { color: #008EE5; background: none; border-bottom: 2px solid #008EE5; } html.no-touch .pui-menu-active-underline > li > a.active:hover, .pui-menu-active-underline > li > a.active.hover { background: #f6f6f6; } .pui-menu-inline > li { display: inline-block; } .pui-menu-inline > li.pui-menu-header { margin-right: 1.5rem; } .pui-menu-inline > li.pui-menu-divider { text-indent: -9999px; text-indent: -9999rem; margin: 0 1.2rem; border: none; border-left: 1px solid #ddd; } .pui-menu-inline > li > .pui-badge-dot + a { padding-right: 30px; } .pui-menu-simple > li > a { padding: 1px 0; } html.no-touch .pui-menu-simple > li > a:hover, .pui-menu-simple > li > a.hover { background: #fff; } .pui-menu-simple.pui-menu-inline { margin-left: -5px; } .pui-menu-simple.pui-menu-inline > li > a { padding: 0 5px; } .pui-menu-tab-style { border-right: 1px solid #ddd; } .pui-menu-tab-style > li > a { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-menu-tab-style > li > a.active, .pui-menu-tab-style > li > a.pui-active { margin-right: -1px; background: none; color: inherit; border: 1px solid #ddd; border-right: 1px solid #fff; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } html.no-touch .pui-menu-tab-style > li > a.active:hover, .pui-menu-tab-style > li > a.active.hover, html.no-touch .pui-menu-tab-style > li > a.pui-active:hover, .pui-menu-tab-style > li > a.pui-active.hover { color: #008EE5; background: none; } .pui-menu-tab-style.pui-menu-inline { border: none; border-bottom: 1px solid #ddd; } .pui-menu-tab-style.pui-menu-inline > li { margin-bottom: -3px; } .pui-menu-tab-style.pui-menu-inline > li + li { margin-right: 4px; } .pui-menu-tab-style.pui-menu-inline > li > a { padding-bottom: 7px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-menu-tab-style.pui-menu-inline > li > a.active { border-right: 1px solid #ddd; border-bottom: 1px solid #fff; } .pui-menu-justify { width: 100%; display: table; } .pui-menu-justify > li { text-align: center; display: table-cell; } .pui-menu-justify.pui-menu-tab-style { border: none; border-bottom: 1px solid #ddd; } .pui-menu-justify.pui-menu-tab-style > li > a { margin-bottom: -1px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-menu-justify.pui-menu-tab-style > li > a.active, .pui-menu-justify.pui-menu-tab-style > li > a.pui-active { border-right: 1px solid #ddd; border-bottom: 1px solid #fff; } .pui-menu-justify.pui-menu-tab-style > li + li > a { margin-left: 2px; } @media only screen and (max-width: 640px) { .pui-menu-justify > li { display: block; } } /* Menu dropdown */ .pui-menu-dropdown { position: absolute; top: 37px; left: 0; z-index: 999; border: 1px solid #ddd; -webkit-border-radius: 4px; border-radius: 4px; background: #fff; display: none; -webkit-animation: menu-dropdown-slide-down 0.3s ease-in; -moz-animation: menu-dropdown-slide-down 0.3s ease-in; /* Firefox 5.0~16.0 */ animation: menu-dropdown-slide-down 0.3s ease-in; /* IE10+ */ -webkit-animation-direction: reverse; -moz-animation-direction: reverse; /* Firefox 5.0~16.0 */ animation-direction: reverse; } .pui-menu-dropdown > li { text-align: left; } .pui-menu-dropdown > li.pui-menu-header { padding: 5px 15px 0 15px; font-weight: normal; font-size: 12px; color: #ccc; } .pui-menu-dropdown > li:last-child { margin-bottom: 10px; } .pui-menu-dropdown > li > .pui-menu-dropdown { top: -4px; left: 92%; } .pui-menu-dropdown:before, .pui-menu-dropdown:after { pointer-events: pointer-events; position: absolute; left: 15px; top: -8px; display: block; content: ""; width: 0; height: 0; border: 8px solid transparent; border-width: 0 8px 8px; z-index: 10; } .pui-menu-dropdown:before { border-bottom-color: #ccc; } .pui-menu-dropdown:after { border-bottom-color: #ffffff; top: -7px; } .pui-menu-dropdown > li > .pui-menu-dropdown:before, .pui-menu-dropdown > li > .pui-menu-dropdown:after { border: 8px solid transparent; border-right: 8px solid #ccc; border-left: 0; left: -8px; top: 10px; } .pui-menu-dropdown > li > .pui-menu-dropdown:after { border-right-color: #fff; left: -7px; } @-webkit-keyframes menu-dropdown-slide-down { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @-moz-keyframes menu-dropdown-slide-down { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @keyframes menu-dropdown-slide-down { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } } .pui-menu > li > .pui-menu-dropdown { display: none; } html.no-touch .pui-menu > li:hover > .pui-menu-dropdown { display: block; } .has-submenu:after { position: absolute; right: 10px; top: -1px; font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 1.8rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f105"; color: #cccccc; } .pui-menu-bordered-radius > li:first-child a { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .pui-menu-bordered-radius > li:last-child a { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-menu-bordered > li > a { border: 1px solid #ddd; margin: 0; margin-bottom: -1px; } .pui-menu-bordered > li > a.active, .pui-menu-bordered > li > a.pui-active { border-color: #008EE5; } .pui-menu-bordered.pui-menu-inline > li { float: left; } .pui-menu-bordered.pui-menu-inline > li > a { margin: 0; -webkit-border-radius: 0; border-radius: 0; } .pui-menu-bordered.pui-menu-inline > li + li { margin-left: -1px; } .pui-menu-bordered.pui-menu-inline.pui-menu-bordered-radius > li:first-child a { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-menu-bordered.pui-menu-inline.pui-menu-bordered-radius > li:last-child a { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-menu-justify.pui-menu-bordered > li > a { -webkit-border-radius: 0; border-radius: 0; } .pui-menu-justify.pui-menu-bordered > li + li > a { border-left: none; } .pui-menubar { width: 100%; display: table; padding: 2px 10px; margin-bottom: 15px; position: relative; background: #fff; border: 1px solid #ddd; vertical-align: middle; -webkit-border-radius: 4px; border-radius: 4px; } .pui-menubar:before, .pui-menubar:after { content: " "; display: table; } .pui-menubar:after { clear: both; } .pui-menubar .pui-menu { padding: 2px 0 0; margin: 0; display: table-cell; vertical-align: middle; } .pui-menubar input { margin: 1px 0 0 0; } .pui-menubar .pui-btn-dropdown { margin: 0; padding-top: -5px; } .pui-menubar-header-style { padding: 6px 10px; padding: 0.5rem 1rem; } .pui-menubar-square { -webkit-border-radius: 0; border-radius: 0; } .pui-menubar-aside { text-align: left; vertical-align: middle; display: table-cell; } .pui-menubar-middle { display: table-cell; text-align: center; vertical-align: middle; } .pui-menubar-offside { display: table-cell; text-align: right; vertical-align: middle; } .pui-menubar-top-fixed, .pui-menubar-bottom-fixed { position: fixed; left: 0; z-index: 1000; margin: 0; border: 0; } .pui-menubar-top-fixed { top: 0; border-bottom: 1px solid #ddd; } .pui-menubar-bottom-fixed { bottom: 0; border-top: 1px solid #ddd; } .pui-menu-dropdown-unarrow:before, .pui-menu-dropdown-unarrow:after { border: none; } .pui-menu-dropdown.pui-menu-dropdown-unarrow .pui-menu-dropdown { top: 0; left: 100%; } .pui-menu-dropdown.pui-menu-dropdown-unarrow > li .pui-menu-dropdown:before, .pui-menu-dropdown.pui-menu-dropdown-unarrow > li .pui-menu-dropdown:after { border: none; } .pui-menu-dropdown-left-top { top: 0; left: auto; right: 100%; } .pui-menu-dropdown-left-bottom { top: auto; left: auto; right: 100%; bottom: -19px; } .pui-menu-dropdown-right-top { top: 0; left: 100%; right: auto; } .pui-menu-dropdown-right-bottom { top: auto; left: 100%; right: auto; bottom: -19px; } .pui-menu-dropdown-bottom-right { top: 35px; left: auto; right: 0; } .pui-menu-dropdown-top-left { top: auto; left: 0; right: auto; bottom: 20px; } .pui-menu-dropdown-top-right { top: auto; left: auto; right: 0; bottom: 20px; } .pui-menu-column { width: 100%; display: table; } .pui-menu-column:before, .pui-menu-column:after { content: " "; display: table; } .pui-menu-column:after { clear: both; } .pui-menu-column > .pui-menu { display: table-cell; } .pui-menubar[class*=pui-bg-] > .pui-menu > li, .pui-menubar[class*=pui-bg-] > .pui-menu > li > a { color: #fff; } .pui-menubar[class*=pui-bg-] > .pui-menu > li > a { margin: 0; padding: 10px 16px; border-radius: 0; } .pui-menubar[class*=pui-bg-] > .pui-menu > li > a.active, .pui-menubar[class*=pui-bg-] > .pui-menu > li > a.pui-active { background-color: rgba(0, 0, 0, 0.2); } html.no-touch .pui-menubar[class*=pui-bg-] > .pui-menu > li > a:hover, .pui-menubar[class*=pui-bg-] > .pui-menu > li > a.hover { background-color: rgba(0, 0, 0, 0.1); } .pui-menubar[class*=pui-bg-] > .pui-menu > li + li { margin-left: -3px; } .pui-menubar-bg-color { padding: 0 10px 0 0; border: none; } .pui-menubar-bg-color > .pui-menu { padding: 0; } @media only screen and (max-width: 480px) { .pui-menu-inline > li { display: block; } .pui-menu > li > .pui-menu-dropdown { width: 100%; } } .pui-menu-accordion > li > a .fa-angle-right { padding-bottom: 1px; } .pui-menu-accordion > li > a .fa-angle-down { display: none; } html.no-touch .pui-menu-accordion > li:hover > a .fa-angle-right, .pui-menu-accordion > li.hover > a .fa-angle-right { display: none; } html.no-touch .pui-menu-accordion > li:hover > a .fa-angle-down, .pui-menu-accordion > li.hover > a .fa-angle-down, .pui-menu-accordion > li.submenu-open > a .fa-angle-down, html.no-touch .pui-menu-accordion > li.submenu-open:hover > a .fa-angle-down, .pui-menu-accordion > li.submenu-open.hover > a .fa-angle-down { padding-top: 3px; display: block; } .pui-menu-accordion > li.submenu-open > a .fa-angle-right, html.no-touch .pui-menu-accordion > li.submenu-open:hover > a .fa-angle-right, .pui-menu-accordion > li.submenu-open.hover > a .fa-angle-right { display: none; } .pui-menu-accordion .pui-sub-menu { display: none; margin-bottom: 0; } .pui-menu-accordion .pui-sub-menu > li + li > a { margin-bottom: -1px; } .pui-menu-accordion .pui-sub-menu > li > a { padding-left: 36px; } .pui-menu-accordion .pui-sub-menu > li > .pui-sub-menu { border: 1px solid #ddd; border-bottom: none; margin-bottom: 0; } .pui-menu-accordion .pui-sub-menu > li.pui-menu-header { padding-left: 15px; } html.no-touch .pui-menu-accordion .pui-sub-menu > li:hover > .pui-sub-menu, .pui-menu-accordion .pui-sub-menu > li.hover > .pui-sub-menu { display: block; } /* Mask layer */ .pui-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .pui-mask-bg { background-color: #000; opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ z-index: 99; } .pui-mask-fixed { position: fixed; } .pui-mask-top { top: 0; left: 0; bottom: auto; right: auto; } .pui-mask-bottom { top: auto; left: 0; bottom: 0; right: auto; } .pui-mask-left { left: 0; right: auto; top: 0; bottom: auto; } .pui-mask-right { left: auto; right: 0; top: 0; bottom: auto; } .pui-mask-bg-white { background-color: #fff; } .pui-mask-opacity-zero { opacity: 0; /* W3C */ filter: alpha(opacity=0); /* IE */ } .pui-mask-opacity-full { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } .pui-mask-container { display: table; } .pui-mask-row { display: table-row; } .pui-mask-content { display: table-cell; text-align: center; vertical-align: middle; } /* Notices */ .pui-notice { min-width: 240px; min-width: 24rem; padding: 12px; padding: 1.2rem; margin-bottom: 10px; margin-bottom: 1rem; border: 1px solid #ddd; -webkit-border-radius: 4px; border-radius: 4px; position: relative; background: #fff; } .pui-notice-head { margin-top: -6px; } .pui-notice-head-underline > .pui-notice-head { padding: 0 0 6px 0; padding: 0 0 0.6rem 0; margin-bottom: 10px; margin-bottom: 1rem; border-bottom: 1px solid #ddd; } .pui-notice-head > strong { font-size: 16px; font-size: 1.6ren; } .pui-notice-head > small { margin-left: 8px; margin-left: 0.8rem; } .pui-notice-content { padding: 0; } .pui-notice-content a { color: #0D79DE; } html.no-touch .pui-notice-content a:hover, .pui-notice-content a.hover { text-decoration: underline; } .pui-notice > p:last-child, .pui-notice-content > p:last-child { margin: 0; } .pui-notice-foot { text-align: right; color: #ccc; } .pui-notice:not(.pui-notice-head-underline) { padding-right: 36px; padding-right: 3.6rem; } .pui-notice > .pui-close { position: absolute; top: 6px; right: 6px; } .pui-notice > .pui-close-bordered { top: -1px; right: -1px; } .pui-notice > .pui-close-border-circle { top: -10px; right: -10px; background: #fff; } .pui-notice-not-foot, .pui-notice:not(.pui-notice-foot) .pui-notice-content { padding-bottom: 0; } .pui-notice-icon { min-height: 60px; min-height: 6rem; } .pui-notice-icon:before { min-width: 54px; min-width: 5.4rem; padding-left: 5px; padding-left: 0.5rem; display: block; float: left; font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 36px; font-size: 3.6rem; line-height: 1; opacity: 0.5; /* W3C */ filter: alpha(opacity=50); /* IE */ text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pui-notice-icon > .pui-notice-content { margin-left: 54px; margin-left: 5.4rem; } .pui-notice-icon.pui-shadow { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-notice-icon.pui-square { -webkit-border-radius: 0; border-radius: 0; } .pui-notice-icon.pui-inline-block { display: inline-block; } .pui-notice-icon-gary, .pui-notice-icon-bg-gary { color: #DDDDDD; border-color: white; background-color: white; } .pui-notice-icon-gary > .pui-close:after { color: #DDDDDD; opacity: 0.8; } html.no-touch .pui-notice-icon-gary > .pui-close:hover, .pui-notice-icon-gary > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-gary > .pui-notice-head > small { color: white; } .pui-notice-icon-primary, .pui-notice-icon-bg-primary { color: #008EE5; border-color: #75caff; background-color: #a8deff; } .pui-notice-icon-primary > .pui-close:after { color: #008EE5; opacity: 0.8; } html.no-touch .pui-notice-icon-primary > .pui-close:hover, .pui-notice-icon-primary > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-primary > .pui-notice-head > small { color: #33b1ff; } .pui-notice-icon-secondary, .pui-notice-icon-bg-secondary { color: #3BB4F2; border-color: #c1e7fb; background-color: #f1fafe; } .pui-notice-icon-secondary > .pui-close:after { color: #3BB4F2; opacity: 0.8; } html.no-touch .pui-notice-icon-secondary > .pui-close:hover, .pui-notice-icon-secondary > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-secondary > .pui-notice-head > small { color: #83cff7; } .pui-notice-icon-info, .pui-notice-icon-bg-info { color: #2EAAC6; border-color: #9bdae8; background-color: #c4e9f1; } .pui-notice-icon-info > .pui-close:after { color: #2EAAC6; opacity: 0.8; } html.no-touch .pui-notice-icon-info > .pui-close:hover, .pui-notice-icon-info > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-info > .pui-notice-head > small { color: #65c6db; } .pui-notice-icon-success, .pui-notice-icon-bg-success { color: #71B472; border-color: #cee5cf; background-color: #f0f7f0; } .pui-notice-icon-success > .pui-close:after { color: #71B472; opacity: 0.8; } html.no-touch .pui-notice-icon-success > .pui-close:hover, .pui-notice-icon-success > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-success > .pui-notice-head > small { color: #a3cea4; } .pui-notice-icon-warning, .pui-notice-icon-bg-warning { color: #FFB74D; border-color: #FAE5C4; background-color: #FCF5E8; } .pui-notice-icon-warning > .pui-close:after { color: #FFB74D; opacity: 0.8; } html.no-touch .pui-notice-icon-warning > .pui-close:hover, .pui-notice-icon-warning > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-warning > .pui-notice-head > small { color: #ffd69a; } .pui-notice-icon-error, .pui-notice-icon-bg-error { color: #E87467; border-color: #F7D1CB; background-color: #FFE8E3; } .pui-notice-icon-error > .pui-close:after { color: #E87467; opacity: 0.8; } html.no-touch .pui-notice-icon-error > .pui-close:hover, .pui-notice-icon-error > .pui-close.hover { opacity: 1; } .pui-notice-icon-bg-error > .pui-notice-head > small { color: #f2b1a9; } .pui-notice-icon-success:before { color: #71B472; content: "\f058"; } .pui-notice-icon-info:before { color: #2EAAC6; content: "\f05a"; } .pui-notice-icon-warning:before { color: #FFB74D; font-size: 32px; font-size: 3.2rem; content: "\f071"; } .pui-notice-icon-error:before { color: #E87467; content: "\f00d"; } .pui-notice-icon-question { color: #5AA5EA; border-color: #92C9FB; background: #C9E5FF; } .pui-notice-icon-question:before { color: #2493F7; content: "\f059"; } .pui-notice-icon-question > .pui-close:after { color: #5AA5EA; opacity: 0.8; } .pui-notice-icon-update:before, .pui-notice-icon-upload:before { font-size: 33px; font-size: 3.3rem; color: #2EAAC6; content: "\f0ee"; } .pui-notice-icon-download:before { font-size: 33px; font-size: 3.3rem; color: #2EAAC6; content: "\f0ed"; } .pui-notice-icon-unlink:before { font-size: 34px; font-size: 3.4rem; color: #2EAAC6; content: "\f127"; } .pui-notice-icon-loading:before, .pui-notice-icon-waiting:before { color: #2EAAC6; content: "\f017"; } .pui-notice-icon-email:before, .pui-notice-icon-message:before { font-size: 32px; font-size: 3.2rem; color: #2EAAC6; content: "\f003"; } .pui-notice-icon-comment:before { font-size: 35px; font-size: 3.5rem; color: #2EAAC6; content: "\f0e6"; } .pui-notice-icon-tips:before { font-size: 38px; font-size: 3.8rem; color: #2EAAC6; content: "\f0eb"; } .pui-notice-popup { width: 320px; width: 32rem; position: fixed; top: 10px; right: 10px; z-index: 1000; } .pui-notice-popup > .pui-notice { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-notice > .pui-badge { float: left; margin-top: 5px; } .pui-notice > .pui-badge + .pui-notice-content { margin-left: 48px; margin-left: 4.8rem; } .pui-notice > .pui-badge-dot + .pui-notice-content { margin-left: 24px; margin-left: 2.4rem; } .pui-notice-position-tl, .pui-notice-position-tr, .pui-notice-position-tc, .pui-notice-position-bl, .pui-notice-position-br, .pui-notice-position-bc { position: fixed; z-index: 10001; } .pui-notice-position-tl { top: 10px; bottom: auto; left: 10px; right: auto; } .pui-notice-position-tr { top: 10px; right: 10px; left: auto; bottom: auto; } .pui-notice-position-tc { width: 40%; top: 10px; left: 30%; right: auto; bottom: auto; } .pui-notice-position-bl { top: auto; bottom: 10px; left: 10px; right: auto; } .pui-notice-position-br { top: auto; bottom: 10px; right: 10px; left: auto; } .pui-notice-position-bc { top: auto; width: 40%; bottom: 10px; left: 30%; } .pui-notice-content-scrollable { height: 160px; height: 16rem; margin-bottom: 5px; overflow-y: scroll; } .pui-notice-content-scrollable-x { margin-bottom: 5px; overflow-y: hidden; overflow-x: auto; } .pui-notice-content-scrollable-auto { height: 160px; height: 16rem; margin-bottom: 5px; overflow: auto; } /* Progress */ .pui-progress { font-size: 12px; font-size: 1.2rem; background: #f6f6f6; margin-bottom: 10px; margin-bottom: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); /* IE9+, News */ } .pui-progress.pui-progress-unshadow { -webkit-box-shadow: none; /* Webkit browsers */ box-shadow: none; /* IE9+, News */ } html.no-touch .pui-progress:hover, .pui-progress.hover { background: #eee; } .pui-progress-bar { color: #fff; position: relative; text-align: center; padding: 0 5px; padding: 0 0.5rem; background: #008EE5; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-progress-bar.pui-progress-shadow { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); /* Webkit browsers */ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); /* IE9+, News */ } .pui-progress-bar.pui-progress-mini-text, .pui-progress-bar.pui-progress-small-text { margin-top: 24px; margin-top: 2.4rem; } .pui-progress-bar.pui-progress-mini { height: 5px; height: 0.5rem; } .pui-progress-bar.pui-progress-small { height: 10px; height: 1rem; } .pui-progress-bar span { color: #666; display: block; width: 100%; position: absolute; top: -20px; top: -2rem; left: 0; } .pui-progress-bar.pui-progress-text-left { text-align: left; } .pui-progress-bar.pui-progress-text-right { text-align: right; } .pui-progress-bar.pui-progress-text-center { text-align: center; } .pui-progress-bar .pui-progress-gary, .pui-progress-bar.pui-progress-gary { background-color: #DDDDDD; } html.no-touch .pui-progress-bar .pui-progress-gary:hover, .pui-progress-bar .pui-progress-gary.hover, html.no-touch .pui-progress-bar.pui-progress-gary:hover, .pui-progress-bar.pui-progress-gary.hover { background-color: #c4c4c4; } .pui-progress-bar .pui-progress-primary, .pui-progress-bar.pui-progress-primary { background-color: #008EE5; } html.no-touch .pui-progress-bar .pui-progress-primary:hover, .pui-progress-bar .pui-progress-primary.hover, html.no-touch .pui-progress-bar.pui-progress-primary:hover, .pui-progress-bar.pui-progress-primary.hover { background-color: #006eb2; } .pui-progress-bar .pui-progress-secondary, .pui-progress-bar.pui-progress-secondary { background-color: #3BB4F2; } html.no-touch .pui-progress-bar .pui-progress-secondary:hover, .pui-progress-bar .pui-progress-secondary.hover, html.no-touch .pui-progress-bar.pui-progress-secondary:hover, .pui-progress-bar.pui-progress-secondary.hover { background-color: #10a0ea; } .pui-progress-bar .pui-progress-info, .pui-progress-bar.pui-progress-info { background-color: #2EAAC6; } html.no-touch .pui-progress-bar .pui-progress-info:hover, .pui-progress-bar .pui-progress-info.hover, html.no-touch .pui-progress-bar.pui-progress-info:hover, .pui-progress-bar.pui-progress-info.hover { background-color: #24869d; } .pui-progress-bar .pui-progress-success, .pui-progress-bar.pui-progress-success { background-color: #71B472; } html.no-touch .pui-progress-bar .pui-progress-success:hover, .pui-progress-bar .pui-progress-success.hover, html.no-touch .pui-progress-bar.pui-progress-success:hover, .pui-progress-bar.pui-progress-success.hover { background-color: #549e55; } .pui-progress-bar .pui-progress-warning, .pui-progress-bar.pui-progress-warning { background-color: #FFB74D; } html.no-touch .pui-progress-bar .pui-progress-warning:hover, .pui-progress-bar .pui-progress-warning.hover, html.no-touch .pui-progress-bar.pui-progress-warning:hover, .pui-progress-bar.pui-progress-warning.hover { background-color: #ffa21a; } .pui-progress-bar .pui-progress-error, .pui-progress-bar.pui-progress-error { background-color: #E87467; } html.no-touch .pui-progress-bar .pui-progress-error:hover, .pui-progress-bar .pui-progress-error.hover, html.no-touch .pui-progress-bar.pui-progress-error:hover, .pui-progress-bar.pui-progress-error.hover { background-color: #e14b3b; } .pui-progress-striped .pui-progress-bar, .pui-progress-striped-reverse .pui-progress-bar { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 28px 28px; } .pui-progress-striped-reverse .pui-progress-bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } @-webkit-keyframes progress-bar-stripes { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } } @keyframes progress-bar-stripes { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } } .pui-progress-striped.pui-progress-active .pui-progress-bar, .pui-progress-striped-reverse.pui-progress-active .pui-progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .pui-progress-group { position: relative; display: block; overflow: hidden; } .pui-progress-group .pui-progress-bar { float: left; display: inline-block; } .pui-progress-group .pui-progress-bar:not(:first-child) { -webkit-border-radius: 0; border-radius: 0; } .pui-progress-small-group, .pui-progress-mini-group { overflow: visible; margin-top: 24px; margin-top: 2.4rem; } .pui-progress-small-group .pui-progress-bar.pui-progress-group-end, .pui-progress-mini-group .pui-progress-bar.pui-progress-group-end { padding: 0; background: #f6f6f6; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); /* IE9+, News */ } .pui-progress-small-group .pui-progress-bar.pui-progress-group-end.pui-progress-group-end-unshadow, .pui-progress-mini-group .pui-progress-bar.pui-progress-group-end.pui-progress-group-end-unshadow { -webkit-box-shadow: none; /* Webkit browsers */ box-shadow: none; /* IE9+, News */ } html.no-touch .pui-progress-small-group .pui-progress-bar.pui-progress-group-end:hover, .pui-progress-small-group .pui-progress-bar.pui-progress-group-end.hover, html.no-touch .pui-progress-mini-group .pui-progress-bar.pui-progress-group-end:hover, .pui-progress-mini-group .pui-progress-bar.pui-progress-group-end.hover { background: #eee; } .pui-progress-text-group { overflow: auto; width: 100%; position: absolute; top: -20px; top: -2rem; left: 0; } .pui-progress-text-group span { display: block; float: left; } /* Pagination */ .pui-pagination { color: #666; list-style: none; font-size: 14px; font-size: 1.4rem; margin: 0; padding: 0; position: relative; } .pui-pagination:before, .pui-pagination:after { content: " "; display: table; } .pui-pagination:after { clear: both; } .pui-pagination li { *float: left; *margin-right: 3px; display: inline-block; vertical-align: middle; } .pui-pagination li a, .pui-pagination li span, .pui-pagination li input[type="button"] { padding: 0 8px; padding: 0 0.76rem; padding: 0 0.9rem \9; margin-bottom: 5px; line-height: 1.8; color: #666; text-align: center; display: inline-block; } .pui-pagination li input[type="button"] { background: #fff; border: 1px solid #ddd; } html.no-touch .pui-pagination li input[type="button"]:hover, .pui-pagination li input[type="button"].hover { background-color: #fafafa; } html.no-touch .pui-pagination li a:hover, .pui-pagination li a.hover { background: #f6f6f6; } html.no-touch .pui-pagination li a.disabled:hover, .pui-pagination li a.disabled.hover, html.no-touch .pui-pagination li a.pui-disabled:hover, .pui-pagination li a.pui-disabled.hover { background: none; } .pui-pagination li a.active, .pui-pagination li a.pui-active { color: #fff; cursor: default; border-color: #008EE5; background: #008EE5; } .pui-pagination li select { *width: 80px; padding: 0 12px; padding: 0 1.2rem; margin-bottom: 5px; font-size: 13px; font-size: 1.3rem; background-size: 15px; background: none\9; } .pui-pagination li select.unbordered, .pui-pagination li select.pui-unbordered { border: none; } .pui-pagination li.pui-input { padding-left: 10px; padding-left: 1rem; padding-right: 10px; padding-right: 1rem; text-align: center; } .pui-pagination li input[type="text"], .pui-pagination li input[type="number"] { width: 40px; text-align: center; margin-right: 0; padding-top: 4px; padding-top: 0.4rem; padding-bottom: 4px; padding-bottom: 0.4rem; font-size: 12px; font-size: 1.2rem; margin-bottom: -1px; } .pui-pagination li input[type="number"] { width: 48px; } .pui-pagination.pui-pagination-bordered li a { border: 1px solid #ddd; -webkit-border-radius: 3px; border-radius: 3px; } .pui-pagination.pui-pagination-bordered li a.active, .pui-pagination.pui-pagination-bordered li a.pui-active { border-color: #008EE5; } .pui-pagination.pui-pagination-bordered li input[type="button"] { -webkit-border-radius: 3px; border-radius: 3px; } .pui-pagination.pui-pagination-border-square li a, .pui-pagination.pui-pagination-border-square li input[type="button"] { -webkit-border-radius: 0; border-radius: 0; } .pui-pagination.pui-pagination-left { float: left; } .pui-pagination.pui-pagination-right { float: right; } .pui-pagination.pui-pagination-circle li a { -webkit-border-radius: 500px; border-radius: 500px; } .pui-pagination.pui-pagination-prev-next li { margin: 0 auto; } .pui-pagination.pui-pagination-prev-next li span { text-align: center; margin: 0 auto; } .pui-pagination.pui-pagination-prev-next li:first-child { margin: 0; float: left; } .pui-pagination.pui-pagination-prev-next li:last-child { margin: 0; float: right; } .pui-pagination.pui-pagination-prev-next > .pui-pagination-nav { width: 50%; text-align: center; position: absolute; left: 25%; top: 0; } .pui-pagination.pui-pagination-center { margin: 0 auto; text-align: center; } .pui-pagination.pui-pagination-compact li { float: left; } .pui-pagination.pui-pagination-compact li a { border-radius: 0; } .pui-pagination.pui-pagination-compact li + li { margin-left: -1px; } @media (max-width: 768px) { .pui-pagination li a { padding: 0.2rem 1rem 0 1rem; } .pui-pagination li select { font-size: 1.4rem; } } /* Rating */ .pui-rating { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-rating > span { display: inline-block; padding: 0 1px; cursor: pointer; } .pui-rating > span:before { display: inline-block; font-family: "FontAwesome"; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ddd; text-align: center; vertical-align: middle; font-size: 21px; font-size: 2.1rem; content: "\F006"; } .pui-rating > span.half:before { color: #ff9900; content: "\F123"; } .pui-rating > span.full:before { color: #ff9900; content: "\F005"; } .pui-rating > small { vertical-align: middle; margin-left: 7px; margin-left: 0.7rem; } .pui-rating-xsmall > span:before { font-size: 12px; font-size: 1.2rem; } .pui-rating-small > span:before { font-size: 16px; font-size: 1.6rem; } .pui-rating-large > span:before { font-size: 25px; font-size: 2.5rem; } .pui-rating-xlarge > span:before { font-size: 30px; font-size: 3rem; } /* Search */ .pui-search { position: relative; margin: 0; padding: 0; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-search:before, .pui-search:after { content: " "; display: table; } .pui-search:after { clear: both; } .pui-search > .pui-search-keywords, .pui-search > .pui-search-submit { margin: 0; padding: 7px; } .pui-search > .pui-search-keywords { color: #666; background: #fff; padding-right: 34px; } .pui-search > .pui-search-submit { background: none; position: absolute; top: -1px; right: 0; width: 36px; border: none; } .pui-search > .pui-search-submit:before { display: inline-block; font-family: "FontAwesome"; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ddd; text-align: center; vertical-align: middle; font-size: 18px; content: "\f002"; } html.no-touch .pui-search > .pui-search-submit:hover:before, .pui-search > .pui-search-submit.hover:before { color: #008EE5; } .pui-search.square > .pui-search-keywords, .pui-search.pui-square > .pui-search-keywords { -webkit-border-radius: 0; border-radius: 0; } .pui-search.round, .pui-search.pui-round { -webkit-border-radius: 0; border-radius: 0; } .pui-search.round > .pui-search-keywords, .pui-search.pui-round > .pui-search-keywords { padding-left: 15px; -webkit-border-radius: 500px; border-radius: 500px; } .pui-search.round > .pui-search-submit, .pui-search.pui-round > .pui-search-submit { width: 40px; } .pui-search-simple > .pui-search-keywords { border: none; background: none; padding-left: 0; padding-right: 0; margin: 0 0 0 36px; } .pui-search-simple > .pui-search-submit { top: -2px; left: 0; } .pui-search-large > .pui-search-keywords { padding: 9px; } .pui-search-large > .pui-search-submit { width: 40px; padding: 9px 0; } .pui-search-large > .pui-search-keywords { padding-right: 34px; } .pui-search-unbordered > .pui-search-keywords { border: none; } .pui-search.pui-search-white > .pui-search-keywords, .pui-search.pui-search-white > .pui-search-keywords::-webkit-input-placeholder { color: #fff; } .pui-search.pui-search-white > .pui-search-keywords::-moz-input-placeholder, .pui-search.pui-search-white > .pui-search-keywords:-ms-input-placeholder { color: #fff; } .pui-search.pui-search-white > .pui-search-submit:before { color: #fff; } html.no-touch .pui-search.pui-search-white > .pui-search-submit:before:hover:before, .pui-search.pui-search-white > .pui-search-submit:before.hover:before { opacity: 0.8; /* W3C */ filter: alpha(opacity=80); /* IE */ } .pui-search-auto-complete { width: 100%; position: absolute; top: auto; left: 0; z-index: 100; background: #fff; border: 1px solid #ddd; border-top: none; } .pui-search-auto-complete > li > a { display: block; padding: 5px 15px 5px 0; } html.no-touch .pui-search-auto-complete > li > a:hover, .pui-search-auto-complete > li > a.hover { background-color: #fafafa; } .pui-search-auto-complete > li > a:before { display: inline-block; font-family: "FontAwesome"; font-weight: normal; font-style: normal; font-size: 14px; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ddd; content: "\f002"; padding: 0 10px; } .pui-search-auto-complete > li + li > a { border-top: 1px solid #eee; } .pui-search.round > .pui-search-auto-complete, .pui-search.pui-round > .pui-search-auto-complete { width: 90%; left: 5%; border-top: 1px solid #ddd; } .pui-search-auto-complete.shadow, .pui-search-auto-complete.pui-shadow { -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Webkit browsers */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* IE9+, News */ } @-webkit-keyframes search-keywords-slide { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes search-keywords-slide { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes search-keywords-slide { 0% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes search-keywords-slide-reverse { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes search-keywords-slide-reverse { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes search-keywords-slide-reverse { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } .pui-search-single-button > .pui-search-keywords { visibility: hidden; } .pui-search-single-button > .pui-search-keywords.pui-search-keywords-slide { visibility: visible; -webkit-animation: search-keywords-slide 0.5s; -moz-animation: search-keywords-slide 0.5s; /* Firefox 5.0~16.0 */ animation: search-keywords-slide 0.5s; /* IE10+ */ } .pui-search-single-button > .pui-search-keywords.pui-search-keywords-slide-reverse { -webkit-animation: search-keywords-slide-reverse 0.5s; -moz-animation: search-keywords-slide-reverse 0.5s; /* Firefox 5.0~16.0 */ animation: search-keywords-slide-reverse 0.5s; /* IE10+ */ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } /* Custom Switch Button */ pui-switch { cursor: pointer; font-size: 12px; font-size: 1.2rem; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } pui-switch + pui-switch { margin-left: 10px; margin-left: 1rem; } pui-switch > switches > span { min-width: 36px; min-width: 3.6rem; padding: 2px 6px; padding: 0.2rem 0.6rem; text-align: center; display: inline-block; background: #fff; border: 1px solid #ddd; -webkit-transition: all 100ms ease-in; /* Safari, Chrome */ -moz-transition: all 100ms ease-in; /* Firefox 4.0~16.0 */ transition: all 100ms ease-in; /* IE >9, FF >15, Opera >12.0 */ } html.no-touch pui-switch > switches > span:hover, pui-switch > switches > span.hover { background: #f6f6f6; } pui-switch > switches > span:first-child { -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } pui-switch > switches > span:last-child { -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } pui-switch > switches > span + span { margin-left: -1px; } pui-switch > switches > .switched, pui-switch > switches > .pui-switched { color: #fff; background: #2191F6; border-color: #2191F6; } html.no-touch pui-switch > switches > .switched:hover, pui-switch > switches > .switched.hover, html.no-touch pui-switch > switches > .pui-switched:hover, pui-switch > switches > .pui-switched.hover { background: #1279D8; border-color: #1279D8; } pui-switch > switches > .switched + span, pui-switch > switches > .pui-switched + span { border-left-color: #2191F6; } pui-switch[disabled] > switches > .pui-switched { color: #777; background: #ddd; border-color: #ddd; } pui-switch[disabled] > switches > .pui-switched + span { border-left-color: #ddd; } pui-switch > input[type="hidden"] { width: 0; height: 0; } pui-switch > small { margin-left: 15px; margin-left: 1.5rem; } pui-switch.pui-switch-sm > switches > span { min-width: 16px; min-width: 1.6rem; min-height: 16px; min-height: 1.6rem; padding: 0 3px; padding: 0 0.3rem; } pui-switch.pui-switch-lg > switches > span { padding: 2px 10px; padding: 0.2rem 1rem; } pui-switch.square > switches > span, pui-switch.pui-square > switches > span { -webkit-border-radius: 0; border-radius: 0; } pui-switch.round > switches > span:first-child, pui-switch.pui-round > switches > span:first-child { -webkit-border-top-left-radius: 500px; border-top-left-radius: 500px; -webkit-border-bottom-left-radius: 500px; border-bottom-left-radius: 500px; } pui-switch.round > switches > span:last-child, pui-switch.pui-round > switches > span:last-child { -webkit-border-top-right-radius: 500px; border-top-right-radius: 500px; -webkit-border-bottom-right-radius: 500px; border-bottom-right-radius: 500px; } /* Custom Switch Slide Button */ pui-switch-slide { width: 72px; padding: 2px; display: inline-block; color: #2191F6; background: #2191F6; overflow: hidden; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* IE9+, News */ -webkit-border-radius: 4px; border-radius: 4px; vertical-align: middle; cursor: pointer; } pui-switch-slide + pui-switch-slide { margin-left: 3px; } pui-switch-slide span { float: left; font-size: 12px; font-size: 1.2rem; padding: 1px 9px; padding: 0.1rem 0.9rem; background: #fff; -webkit-border-radius: 3px; border-radius: 3px; text-align: center; } pui-switch-slide span.off { float: right; } pui-switch-slide.square, pui-switch-slide.square span, pui-switch-slide.pui-square, pui-switch-slide.pui-square span { -webkit-border-radius: 0; border-radius: 0; } pui-switch-slide.round, pui-switch-slide.round span, pui-switch-slide.pui-round, pui-switch-slide.pui-round span { -webkit-border-radius: 100px; border-radius: 100px; } html.no-touch pui-switch-slide:hover span, pui-switch-slide.hover span { background: #f6f6f6; } pui-switch-slide[disabled] { color: #ccc; background: #ddd; } pui-switch-slide.animated span, pui-switch-slide.pui-switch-slide-animation span { -webkit-animation: switch-slide-right 0.5s; -moz-animation: switch-slide-right 0.5s; /* Firefox 5.0~16.0 */ animation: switch-slide-right 0.5s; /* IE10+ */ } pui-switch-slide.animated span.off, pui-switch-slide.pui-switch-slide-animation span.off { -webkit-animation: switch-slide-left 0.5s; -moz-animation: switch-slide-left 0.5s; /* Firefox 5.0~16.0 */ animation: switch-slide-left 0.5s; /* IE10+ */ } @-webkit-keyframes switch-slide-right { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @keyframes switch-slide-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @-webkit-keyframes switch-slide-left { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @keyframes switch-slide-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } /* Tabs */ .pui-tab, .pui-tab-head, .pui-tab-container, .pui-tab-box, .pui-tab-foot { position: relative; } .pui-tab { margin-bottom: 15px; margin-bottom: 1.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-tab:before, .pui-tab:after { display: table; content: " "; } .pui-tab:after { clear: both; } .pui-tab-head { margin: 0; padding: 0; list-style: none; } .pui-tab-head > li { cursor: pointer; padding: 6px 12px; padding: 0.6rem 1.2rem; -webkit-border-radius: 4px; border-radius: 4px; display: inline-block; -webkit-transition: background-color 300ms ease-out, border-color 300ms ease-out; /* Safari, Chrome */ -moz-transition: background-color 300ms ease-out, border-color 300ms ease-out; /* Firefox 4.0~16.0 */ transition: background-color 300ms ease-out, border-color 300ms ease-out; /* IE >9, FF >15, Opera >12.0 */ } html.no-touch .pui-tab-head > li:hover, .pui-tab-head > li.hover { background: #f6f6f6; } .pui-tab-head > li.active, .pui-tab-head > li.pui-active { color: #fff; background: #C54B3B; } .pui-tab-head > li.disabled, .pui-tab-head > li.pui-disabled { cursor: not-allowed; } .pui-tab-box { display: none; padding: 10px 0; padding: 1rem 0; } .pui-tab-foot { border-top: 1px solid #ddd; padding: 8px 0; padding: 0.8rem 0; color: #999; } .pui-tab-foot-bordered { padding: 8px 10px; padding: 0.8rem 1rem; border: 1px solid #ddd; border-top: none; } .pui-tab-foot-unbordered { border: none; } .pui-tab-square > li { -webkit-border-radius: 0; border-radius: 0; } .pui-tab-ellipse > li { -webkit-border-radius: 500px; border-radius: 500px; } .pui-tab-bordered > .pui-tab-head { border-bottom: 1px solid #ddd; } .pui-tab-bordered > .pui-tab-head > li { padding-left: 15px; padding-left: 1.5rem; padding-right: 15px; padding-right: 1.5rem; margin-bottom: -1px; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; transition: none; } .pui-tab-bordered > .pui-tab-head > li.active, .pui-tab-bordered > .pui-tab-head > li.pui-active { color: #666; background: #fff; border: 1px solid #ddd; border-bottom-color: #fff; } .pui-tab-box-bordered > .pui-tab-box { padding: 15px; border: 1px solid #ddd; border-top: 0; } .pui-tab-box-radius > .pui-tab-box { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-underline > .pui-tab-head { border-bottom: 2px solid #C54B3B; } .pui-tab-underline > .pui-tab-head > li { padding-left: 15px; padding-left: 1.5rem; padding-right: 15px; padding-right: 1.5rem; margin-bottom: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-tab-justify > .pui-tab-head { width: 100%; display: table; } .pui-tab-justify > .pui-tab-head > li { text-align: center; display: table-cell; } .pui-tab-bordered.pui-tab-justify > .pui-tab-head { border: none; } .pui-tab-bordered.pui-tab-justify > .pui-tab-head > li { border-bottom: 1px solid #ddd; } .pui-tab-bordered.pui-tab-justify > .pui-tab-head > li.active, .pui-tab-bordered.pui-tab-justify > .pui-tab-head > li.pui-active { border-bottom: none; } .pui-tab-left { width: 100%; display: table; } .pui-tab-left > .pui-tab-head { width: 20%; display: table-cell; } .pui-tab-left > .pui-tab-head > li { display: block; } .pui-tab-left > .pui-tab-container { width: 80%; display: table-cell; } .pui-tab-left > .pui-tab-container > .pui-tab-box { padding: 0 15px; padding: 0 1.5rem; } .pui-tab-right { width: 100%; display: table; } .pui-tab-right > .pui-tab-head { width: 20%; display: table-cell; } .pui-tab-right > .pui-tab-head > li { display: block; } .pui-tab-right > .pui-tab-container { width: 80%; display: table-cell; } .pui-tab-right > .pui-tab-container > .pui-tab-box { padding: 0 15px 0 0; padding: 0 1.5rem 0 0; } .pui-tab-bottom > .pui-tab-container > .pui-tab-box { padding: 15px 0; padding: 1.5rem 0; } .pui-tab-underline.pui-tab-left > .pui-tab-head { border: none; border-right: 2px solid #008EE5; } .pui-tab-underline.pui-tab-left > .pui-tab-head > li { -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-tab-underline.pui-tab-right > .pui-tab-head { border: none; border-left: 2px solid #008EE5; } .pui-tab-underline.pui-tab-right > .pui-tab-head > li { -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-underline.pui-tab-bottom > .pui-tab-head { border: none; border-top: 2px solid #008EE5; } .pui-tab-underline.pui-tab-bottom > .pui-tab-head > li { -webkit-border-radius: 0; border-radius: 0; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-bordered.pui-tab-left > .pui-tab-head { border: none; border-right: 1px solid #ddd; } .pui-tab-bordered.pui-tab-left > .pui-tab-head > li { margin: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-tab-bordered.pui-tab-left > .pui-tab-head > li.active, .pui-tab-bordered.pui-tab-left > .pui-tab-head > li.pui-active { margin-right: -2px; border-right-color: #fff; border-bottom-color: #ddd; } .pui-tab-left > .pui-tab-box-bordered > .pui-tab-box { padding: 15px; padding: 1.5rem; border-top: 1px solid #ddd; border-left: none; } .pui-tab-left > .pui-tab-box-radius > .pui-tab-box { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .pui-tab-bordered.pui-tab-right { width: 100%; } .pui-tab-bordered.pui-tab-right > .pui-tab-head { border: none; border-left: 1px solid #ddd; } .pui-tab-bordered.pui-tab-right > .pui-tab-head > li { margin: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-bordered.pui-tab-right > .pui-tab-head > li.active, .pui-tab-bordered.pui-tab-right > .pui-tab-head > li.pui-active { margin-left: -2px; border-left-color: #fff; border-bottom-color: #ddd; } .pui-tab-right > .pui-tab-box-bordered > .pui-tab-box { padding: 1.5rem; border-top: 1px solid #ddd; border-right: none; } .pui-tab-right > .pui-tab-box-radius > .pui-tab-box { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .pui-tab-bordered.pui-tab-bottom > .pui-tab-head { border: none; border-top: 1px solid #ddd; } .pui-tab-bordered.pui-tab-bottom > .pui-tab-head > li { -webkit-border-radius: 0; border-radius: 0; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-bordered.pui-tab-bottom > .pui-tab-head > li.active, .pui-tab-bordered.pui-tab-bottom > .pui-tab-head > li.pui-active { margin-top: -1px; border-top-color: #fff; border-bottom: 1px solid #ddd; } .pui-tab-bottom > .pui-tab-box-bordered > .pui-tab-box { padding: 15px; padding: 1.5rem; border-top: 1px solid #ddd; border-bottom: none; } .pui-tab-bottom > .pui-tab-box-radius > .pui-tab-box { -webkit-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head { border: none; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li { float: left; border: 1px solid #ddd; -webkit-border-radius: 0; border-radius: 0; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li.active, .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li.pui-active { color: #fff; background: #008EE5; border-color: #008EE5; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li + li { margin-left: -1px; } .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li.active + li, .pui-tab-bordered.pui-tab-group-style > .pui-tab-head > li.pui-active + li { border-left-color: #008EE5; } .pui-tab > .pui-tab-scroll-x, .pui-tab > .pui-tab-scroll-y { overflow: hidden; } .pui-tab > .pui-tab-scroll-x { width: 100%; height: auto; } .pui-tab > .pui-tab-scroll-x > .pui-tab-container { width: 40000px; height: auto; } .pui-tab > .pui-tab-scroll-x > .pui-tab-container > .pui-tab-box { width: 769px; height: auto; float: left; display: block; } .pui-tab > .pui-tab-scroll-y { width: 100%; height: 100px; min-height: 100px; } .pui-tab > .pui-tab-scroll-y > .pui-tab-container { width: 100%; min-height: 1000px; } .pui-tab > .pui-tab-scroll-y > .pui-tab-container > .pui-tab-box { width: 100%; min-height: 100px; display: block; } /* Tooltips */ .pui-tooltip { position: relative; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-touch-callout: none; } .pui-tooltip.square, .pui-tooltip.pui-square { -webkit-border-radius: 0; border-radius: 0; } .pui-tooltip.shadow, .pui-tooltip.pui-shadow { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Webkit browsers */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* IE9+, News */ } .pui-tooltip-bordered { padding: 8px 12px; padding: 0.8rem 1.2rem; background: #fff; border: 1px solid #ddd; -webkit-border-radius: 5px; border-radius: 5px; } .pui-tooltip-opacity { color: #fff; background: #000; border-color: #000; opacity: 0.7; /* W3C */ filter: alpha(opacity=70); /* IE */ } .pui-tooltip-opacity-1 { opacity: 1; /* W3C */ filter: alpha(opacity=100); /* IE */ } .pui-tooltip-viewer { display: inline-block; background: #fff; border: 1px solid #ddd; -webkit-border-radius: 5px; border-radius: 5px; } .pui-tooltip-context { position: relative; } .pui-tooltip-context > img + p { margin-top: 5px; } .pui-tooltip-context > p:last-child { margin-bottom: 0; } [class*=pui-tooltip-arrow-]:before, [class*=pui-tooltip-arrow-]:after { width: 0; height: 0; display: block; content: ""; border: 7px solid transparent; pointer-events: pointer-events; position: absolute; } /* Top */ [class*=pui-tooltip-arrow-t]:before, [class*=pui-tooltip-arrow-t]:after { border-bottom-color: #ccc; top: -14px; } [class*=pui-tooltip-arrow-t]:after { border-bottom-color: #fff; top: -13px; } .pui-tooltip-arrow-tl:before, .pui-tooltip-arrow-tl:after { left: 8%; } .pui-tooltip-arrow-tc:before, .pui-tooltip-arrow-tc:after { left: 49%; } .pui-tooltip-arrow-tr:before, .pui-tooltip-arrow-tr:after { right: 8%; } /* Bottom */ [class*=pui-tooltip-arrow-b]:before, [class*=pui-tooltip-arrow-b]:after { border-top-color: #ccc; bottom: -14px; } [class*=pui-tooltip-arrow-b]:after { border-top-color: #fff; bottom: -13px; } .pui-tooltip-arrow-bl:before, .pui-tooltip-arrow-bl:after { left: 8%; } .pui-tooltip-arrow-bc:before, .pui-tooltip-arrow-bc:after { left: 49%; } .pui-tooltip-arrow-br:before, .pui-tooltip-arrow-br:after { right: 8%; } /* left */ [class*=pui-tooltip-arrow-l]:before, [class*=pui-tooltip-arrow-l]:after { border-right-color: #ccc; left: -14px; } [class*=pui-tooltip-arrow-l]:after { border-right-color: #fff; left: -13px; } .pui-tooltip-arrow-lt:before, .pui-tooltip-arrow-lt:after { top: 12px; } .pui-tooltip-arrow-lc:before, .pui-tooltip-arrow-lc:after { top: 46%; } .pui-tooltip-arrow-lb:before, .pui-tooltip-arrow-lb:after { bottom: 12px; } /* right */ [class*=pui-tooltip-arrow-r]:before, [class*=pui-tooltip-arrow-r]:after { border-left-color: #ccc; right: -14px; } [class*=pui-tooltip-arrow-r]:after { border-left-color: #fff; right: -13px; } .pui-tooltip-arrow-rt:before, .pui-tooltip-arrow-rt:after { top: 12px; } .pui-tooltip-arrow-rc:before, .pui-tooltip-arrow-rc:after { top: 46%; } .pui-tooltip-arrow-rb:before, .pui-tooltip-arrow-rb:after { bottom: 12px; } /* tooltip colors */ .pui-tooltip-gary, .pui-tooltip-gary-light { background: #DDDDDD; border-color: #DDDDDD; } .pui-tooltip-gary[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-gary[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-gary[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-gary[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-gary[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-gary[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-gary[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-gary[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-gary-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-gary-light { color: #666; background: #eaeaea; border-color: #eaeaea; } .pui-tooltip-primary, .pui-tooltip-primary-light { background: #008EE5; border-color: #008EE5; } .pui-tooltip-primary[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-primary[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-primary[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-primary[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-primary[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-primary[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-primary[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-primary[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-primary-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-primary-light { color: #008EE5; background: #7fceff; border-color: #7fceff; } .pui-tooltip-secondary, .pui-tooltip-secondary-light { background: #3BB4F2; border-color: #3BB4F2; } .pui-tooltip-secondary[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-secondary[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-secondary[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-secondary[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-secondary[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-secondary[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-secondary[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-secondary[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-secondary-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-secondary-light { color: #3BB4F2; background: #caebfc; border-color: #caebfc; } .pui-tooltip-info, .pui-tooltip-info-light { background: #2EAAC6; border-color: #2EAAC6; } .pui-tooltip-info[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-info[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-info-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-info-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-info[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-info[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-info-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-info-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-info[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-info[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-info-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-info-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-info[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-info[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-info-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-info-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-info-light { color: #2EAAC6; background: #a3ddea; border-color: #a3ddea; } .pui-tooltip-success, .pui-tooltip-success-light { background: #71B472; border-color: #71B472; } .pui-tooltip-success[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-success[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-success-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-success-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-success[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-success[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-success-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-success-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-success[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-success[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-success-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-success-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-success[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-success[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-success-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-success-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-success-light { color: #71B472; background: #d5e9d5; border-color: #d5e9d5; } .pui-tooltip-warning, .pui-tooltip-warning-light { background: #FFB74D; border-color: #FFB74D; } .pui-tooltip-warning[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-warning[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-warning[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-warning[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-warning[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-warning[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-warning[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-warning[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-warning-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-warning-light { color: #FFB74D; background: #ffe0b3; border-color: #ffe0b3; } .pui-tooltip-error, .pui-tooltip-error-light { background: #E87467; border-color: #E87467; } .pui-tooltip-error[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-error[class*=pui-tooltip-arrow-t]:after, .pui-tooltip-error-light[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-error-light[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-error[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-error[class*=pui-tooltip-arrow-b]:after, .pui-tooltip-error-light[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-error-light[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-error[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-error[class*=pui-tooltip-arrow-l]:after, .pui-tooltip-error-light[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-error-light[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-error[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-error[class*=pui-tooltip-arrow-r]:after, .pui-tooltip-error-light[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-error-light[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } .pui-tooltip-error-light { color: #E87467; background: #f5c5c0; border-color: #f5c5c0; } /* tooltip opacity */ .pui-tooltip-opacity[class*=pui-tooltip-arrow-t]:before, .pui-tooltip-opacity[class*=pui-tooltip-arrow-t]:after { border-bottom-color: inherit; } .pui-tooltip-opacity[class*=pui-tooltip-arrow-b]:before, .pui-tooltip-opacity[class*=pui-tooltip-arrow-b]:after { border-top-color: inherit; } .pui-tooltip-opacity[class*=pui-tooltip-arrow-l]:before, .pui-tooltip-opacity[class*=pui-tooltip-arrow-l]:after { border-right-color: inherit; } .pui-tooltip-opacity[class*=pui-tooltip-arrow-r]:before, .pui-tooltip-opacity[class*=pui-tooltip-arrow-r]:after { border-left-color: inherit; } /* Simple Timeline */ .pui-timeline { position: relative; } .pui-timeline-list { margin-left: 15px; margin-left: 1.5rem; padding: 15px 0; padding: 1.5rem 0; border-left: 2px solid #ddd; } .pui-timeline-item { position: relative; padding-left: 48px; padding-left: 4.8rem; min-height: 60px; min-height: 6rem; } .pui-timeline-item > .pui-badge { position: absolute; top: 7px; left: -12px; } .pui-timeline-item > .pui-badge-dot { position: absolute; top: 15px; left: -6px; } .pui-timeline-badge-date > .pui-badge, .pui-timeline-badge-datetime > .pui-badge { padding: 0 5px; padding: 0 0.5rem; } .pui-timeline-badge-date, .pui-timeline-badge-datetime { padding-left: 130px; padding-left: 13rem; } .pui-timeline-item-context { padding: 8px 0 8px 10px; padding: 0.8rem 0 0.8rem 1rem; } .pui-timeline-divider { margin-left: 10px; margin-left: 1rem; padding: 5px 0 10px 0; padding: 0.5rem 0 1rem 0; font-size: 12px; font-size: 1.2rem; color: #404040; } .pui-timeline-divider-dashed-line, .pui-timeline-divider-line { padding-top: 10px; padding-top: 1rem; border-top: 1px solid #eee; } .pui-timeline-divider-dashed-line { border-top-style: dashed; } /* ================ Third party Components ================ */ @font-face { font-family: "iconfont"; src: url("../fonts/iconfont.eot"); /* IE9*/ src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */ } .iconfont, .tb-icon { line-height: 1; margin-top: -3px; margin-top: -0.3rem; font-style: normal; font-size: inherit; text-rendering: auto; display: inline-block; font-family: "iconfont" !important; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon-appreciate:before { content: "\e644"; } .icon-check:before { content: "\e645"; } .icon-close:before { content: "\e646"; } .icon-edit:before { content: "\e649"; } .icon-emoji:before { content: "\e64a"; } .icon-favorfill:before { content: "\e64b"; } .icon-favor:before { content: "\e64c"; } .icon-loading:before { content: "\e64f"; } .icon-locationfill:before { content: "\e650"; } .icon-search:before { content: "\e65c"; } .icon-roundright:before { content: "\e65b"; } .icon-roundrightfill:before { content: "\e65a"; } .icon-roundclose:before { content: "\e659"; } .icon-roundclosefill:before { content: "\e658"; } .icon-roundcheck:before { content: "\e657"; } .icon-roundcheckfill:before { content: "\e656"; } .icon-phone:before { content: "\e652"; } .icon-location:before { content: "\e651"; } .icon-taxi:before { content: "\e65d"; } .icon-timefill:before { content: "\e65e"; } .icon-time:before { content: "\e65f"; } .icon-unfold:before { content: "\e661"; } .icon-warnfill:before { content: "\e662"; } .icon-warn:before { content: "\e663"; } .icon-camerafill:before { content: "\e664"; } .icon-camera:before { content: "\e665"; } .icon-commentfill:before { content: "\e666"; } .icon-comment:before { content: "\e667"; } .icon-likefill:before { content: "\e668"; } .icon-like:before { content: "\e669"; } .icon-notificationfill:before { content: "\e66a"; } .icon-notification:before { content: "\e66b"; } .icon-order:before { content: "\e66c"; } .icon-samefill:before { content: "\e66d"; } .icon-same:before { content: "\e66e"; } .icon-tagfill:before { content: "\e66f"; } .icon-back:before { content: "\e679"; } .icon-wang:before { content: "\e678"; } .icon-ticket:before { content: "\e677"; } .icon-shop:before { content: "\e676"; } .icon-send:before { content: "\e675"; } .icon-pay:before { content: "\e673"; } .icon-evaluate:before { content: "\e672"; } .icon-deliver:before { content: "\e671"; } .icon-tag:before { content: "\e670"; } .icon-cascades:before { content: "\e67c"; } .icon-discover:before { content: "\e67e"; } .icon-list:before { content: "\e682"; } .icon-more:before { content: "\e684"; } .icon-myfill:before { content: "\e685"; } .icon-my:before { content: "\e686"; } .icon-scan:before { content: "\e689"; } .icon-settings:before { content: "\e68a"; } .icon-questionfill:before { content: "\e690"; } .icon-question:before { content: "\e691"; } .icon-shopfill:before { content: "\e697"; } .icon-form:before { content: "\e699"; } .icon-wangfill:before { content: "\e69a"; } .icon-pic:before { content: "\e69b"; } .icon-filter:before { content: "\e69c"; } .icon-footprint:before { content: "\e69d"; } .icon-top:before { content: "\e69e"; } .icon-pulldown:before { content: "\e69f"; } .icon-remind:before { content: "\e6b2"; } .icon-qrcode:before { content: "\e6b0"; } .icon-cart:before { content: "\e6af"; } .icon-refund:before { content: "\e6ac"; } .icon-deletefill:before { content: "\e6a6"; } .icon-moreandroid:before { content: "\e6a5"; } .icon-refresh:before { content: "\e6a4"; } .icon-right:before { content: "\e6a3"; } .icon-pullup:before { content: "\e6a0"; } .icon-delete:before { content: "\e6b4"; } .icon-profile:before { content: "\e6b7"; } .icon-home:before { content: "\e6b8"; } .icon-cartfill:before { content: "\e6b9"; } .icon-discoverfill:before { content: "\e6ba"; } .icon-homefill:before { content: "\e6bb"; } .icon-message:before { content: "\e6bc"; } .icon-addressbook:before { content: "\e6bd"; } .icon-link:before { content: "\e6bf"; } .icon-lock:before { content: "\e6c0"; } .icon-unlock:before { content: "\e6c2"; } .icon-vip:before { content: "\e6c3"; } .icon-weibo:before { content: "\e6c4"; } .icon-activity:before { content: "\e6c5"; } .icon-big:before { content: "\e6c7"; } .icon-friendaddfill:before { content: "\e6c9"; } .icon-friendadd:before { content: "\e6ca"; } .icon-friendfamous:before { content: "\e6cb"; } .icon-squarecheck:before { content: "\e6d6"; } .icon-square:before { content: "\e6d5"; } .icon-squarecheckfill:before { content: "\e6d4"; } .icon-present:before { content: "\e6d3"; } .icon-explore:before { content: "\e6d2"; } .icon-tmall:before { content: "\e6cf"; } .icon-selection:before { content: "\e6ce"; } .icon-goods:before { content: "\e6cd"; } .icon-friend:before { content: "\e6cc"; } .icon-round:before { content: "\e6d7"; } .icon-roundaddfill:before { content: "\e6d8"; } .icon-roundadd:before { content: "\e6d9"; } .icon-add:before { content: "\e6da"; } .icon-notificationforbidfill:before { content: "\e6db"; } .icon-explorefill:before { content: "\e6dd"; } .icon-fold:before { content: "\e6de"; } .icon-game:before { content: "\e6df"; } .icon-redpacket:before { content: "\e6e0"; } .icon-forward:before { content: "\e6eb"; } .icon-forwardfill:before { content: "\e6ea"; } .icon-mobiletao:before { content: "\e6e9"; } .icon-tao:before { content: "\e6e8"; } .icon-info:before { content: "\e6e5"; } .icon-infofill:before { content: "\e6e4"; } .icon-appreciatefill:before { content: "\e6e3"; } .icon-similar:before { content: "\e6e2"; } .icon-selectionfill:before { content: "\e6e1"; } .icon-rechargefill:before { content: "\e6ec"; } .icon-recharge:before { content: "\e6ed"; } .icon-vipcard:before { content: "\e6ee"; } .icon-voice:before { content: "\e6ef"; } .icon-voicefill:before { content: "\e6f0"; } .icon-friendfavor:before { content: "\e6f1"; } .icon-wifi:before { content: "\e6f2"; } .icon-share:before { content: "\e6f3"; } .icon-wefill:before { content: "\e6f4"; } .icon-flashlightopen:before { content: "\e6fd"; } .icon-flashlightclose:before { content: "\e6fc"; } .icon-barcode:before { content: "\e6fb"; } .icon-light:before { content: "\e6fa"; } .icon-camerarotate:before { content: "\e6f9"; } .icon-lightfill:before { content: "\e6f8"; } .icon-lightforbid:before { content: "\e6f7"; } .icon-lightauto:before { content: "\e6f6"; } .icon-we:before { content: "\e6f5"; } .icon-searchlist:before { content: "\e6fe"; } .icon-service:before { content: "\e6ff"; } .icon-sort:before { content: "\e700"; } .icon-1212:before { content: "\e702"; } .icon-down:before { content: "\e703"; } .icon-mobile:before { content: "\e704"; } .icon-mobilefill:before { content: "\e705"; } .icon-copy:before { content: "\e706"; } .icon-countdownfill:before { content: "\e707"; } .icon-brandfill:before { content: "\e712"; } .icon-baby:before { content: "\e711"; } .icon-babyfill:before { content: "\e710"; } .icon-upstage:before { content: "\e70f"; } .icon-upstagefill:before { content: "\e70e"; } .icon-qiang:before { content: "\e70b"; } .icon-notice:before { content: "\e70a"; } .icon-noticefill:before { content: "\e709"; } .icon-countdown:before { content: "\e708"; } .icon-brand:before { content: "\e713"; } .icon-choicenessfill:before { content: "\e714"; } .icon-choiceness:before { content: "\e715"; } .icon-clothesfill:before { content: "\e716"; } .icon-clothes:before { content: "\e717"; } .icon-creativefill:before { content: "\e718"; } .icon-creative:before { content: "\e719"; } .icon-female:before { content: "\e71a"; } .icon-keyboard:before { content: "\e71b"; } .icon-cameraadd:before { content: "\e724"; } .icon-bad:before { content: "\e723"; } .icon-rank:before { content: "\e722"; } .icon-rankfill:before { content: "\e721"; } .icon-pullright:before { content: "\e720"; } .icon-pullleft:before { content: "\e71f"; } .icon-new:before { content: "\e71e"; } .icon-newfill:before { content: "\e71d"; } .icon-male:before { content: "\e71c"; } .icon-focus:before { content: "\e725"; } .icon-friendfill:before { content: "\e726"; } .icon-cameraaddfill:before { content: "\e727"; } .icon-38:before { content: "\e728"; } .icon-apps:before { content: "\e729"; } .icon-paintfill:before { content: "\e72a"; } .icon-paint:before { content: "\e72b"; } .icon-picfill:before { content: "\e72c"; } .icon-refresharrow:before { content: "\e72d"; } .icon-people:before { content: "\e736"; } .icon-peoplefill:before { content: "\e735"; } .icon-album:before { content: "\e734"; } .icon-repeal:before { content: "\e733"; } .icon-presentfill:before { content: "\e732"; } .icon-mark:before { content: "\e731"; } .icon-markfill:before { content: "\e730"; } .icon-hot:before { content: "\e72f"; } .icon-hotfill:before { content: "\e72e"; } .icon-servicefill:before { content: "\e737"; } .icon-repair:before { content: "\e738"; } .icon-file:before { content: "\e739"; } .icon-repairfill:before { content: "\e73a"; } .icon-taoxiaopu:before { content: "\e73b"; } .icon-attentionfill:before { content: "\e73c"; } .icon-attention:before { content: "\e73d"; } .icon-commandfill:before { content: "\e73e"; } .icon-command:before { content: "\e73f"; } .icon-tian:before { content: "\e748"; } .icon-qi:before { content: "\e747"; } .icon-mao:before { content: "\e746"; } .icon-ju:before { content: "\e745"; } .icon-hua:before { content: "\e744"; } .icon-suan:before { content: "\e743"; } .icon-read:before { content: "\e742"; } .icon-community:before { content: "\e741"; } .icon-communityfill:before { content: "\e740"; } .icon-ye:before { content: "\e749"; } .icon-calendar:before { content: "\e74a"; } .icon-cut:before { content: "\e74b"; } .icon-magic:before { content: "\e74c"; } .icon-1x { font-size: 16px; } .icon-lg { font-size: 24px; } .icon-2x { font-size: 32px; } .icon-3x { font-size: 48px; } .icon-4x { font-size: 64px; }