@charset "UTF-8"; /** * Resets * -------------------------------------------------- * Adapted from normalize.css and some reset.css. We don't care even one * bit about old IE, so we don't need any hacks for that in here. * * There are probably other things we could remove here, as well. * * normalize.css v2.1.2 | MIT License | git.io/normalize * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, fieldset, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit; font-size: 100%; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Hide the `template` element in IE, Safari, and Firefox < 22. */ [hidden], template { display: none; } script { display: none !important; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; line-height: 1; } /* * * Remove tap highlight color on Safari */ a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-size: 1em; font-family: monospace, serif; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * 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 { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -0.5em; } sub { bottom: -0.25em; } /** * Define consistent border, margin, and padding. */ fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { padding: 0; /* 2 */ border: 0; /* 1 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. * 4. Remove any default :focus styles * 5. Make sure webkit font smoothing is being inherited */ button, input, select, textarea { margin: 0; /* 3 */ font-size: 100%; /* 2 */ font-family: inherit; /* 1 */ outline-offset: 0; /* 4 */ outline-style: none; /* 4 */ outline-width: 0; /* 4 */ -webkit-font-smoothing: inherit; /* 5 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * 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 Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ 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"] { cursor: pointer; /* 3 */ -webkit-appearance: button; /* 2 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-box-sizing: content-box; /* 2 */ -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; /* 1 */ } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-spacing: 0; border-collapse: collapse; } /** * Scaffolding * -------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } img { -webkit-user-drag: none; } a:focus, button:focus { outline: 0; } body, .ionic-body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; margin: 0; padding: 0; color: black; word-wrap: break-word; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: none; } .content:before, .content:after { display: block; overflow: hidden; height: 0; content: "\00a0"; /* No-break space character */ } /* Force all relatively and absolutely positioned elements still render while scrolling Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ .content > * { -webkit-transform: translateZ(0px); transform: translateZ(0px); } .content { position: absolute; width: 100%; height: 100%; } .scroll-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } /** * Scroll is the scroll view component available for complex and custom * scroll view functionality. */ .scroll { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } .scroll-refresher { display: none; overflow: hidden; height: 100px; margin-top: -100px; } .scroll-refresher-content { height: 100%; width: 100%; text-align: center; position: relative; } .ionic-refresher-content { height: 100%; width: 100%; text-align: center; position: relative; } .ionic-refresher { width: 10px; height: 10px; border-radius: 50%; background-color: #4a87ee; position: absolute; left: 50%; margin-left: -5px; bottom: 25px; } .scroll-refreshing { -webkit-transition: height 0.1s ease-in-out; } .scroll-refreshing .ionic-refresher { -webkit-animation: refresher-pulsate 1.5s linear; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes refresher-pulsate { 0% { -webkit-transform: scale(2, 2); } 50% { -webkit-transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(2, 2); } } .overflow-scroll { overflow: auto; -webkit-overflow-scrolling: touch; } .has-header { top: 44px; } .has-subheader { top: 88px; } .has-footer { bottom: 44px; } .has-tabs { bottom: 84px; } .pane { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; } /** * Typography * -------------------------------------------------- */ p { margin: 0 0 10px; } small { font-size: 85%; } cite { font-style: normal; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: black; font-weight: 500; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.1; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-weight: normal; line-height: 1; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; } h1:first-child, .h1:first-child, h2:first-child, .h2:first-child, h3:first-child, .h3:first-child { margin-top: 0; } h1 + h1, h1 + .h1, h1 + h2, h1 + .h2, h1 + h3, h1 + .h3, .h1 + h1, .h1 + .h1, .h1 + h2, .h1 + .h2, .h1 + h3, .h1 + .h3, h2 + h1, h2 + .h1, h2 + h2, h2 + .h2, h2 + h3, h2 + .h3, .h2 + h1, .h2 + .h1, .h2 + h2, .h2 + .h2, .h2 + h3, .h2 + .h3, h3 + h1, h3 + .h1, h3 + h2, h3 + .h2, h3 + h3, h3 + .h3, .h3 + h1, .h3 + .h1, .h3 + h2, .h3 + .h2, .h3 + h3, .h3 + .h3 { margin-top: 10px; } h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; } h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 12px; } h1 small, .h1 small { font-size: 24px; } h2 small, .h2 small { font-size: 18px; } h3 small, .h3 small, h4 small, .h4 small { font-size: 14px; } dl { margin-bottom: 20px; } dt, dd { line-height: 1.42857; } dt { font-weight: bold; } dd { margin-left: 0; } blockquote { margin: 0 0 20px; padding: 10px 20px; border-left: 5px solid gray; } blockquote p { font-weight: 300; font-size: 17.5px; line-height: 1.25; } blockquote p:last-child { margin-bottom: 0; } blockquote small { display: block; line-height: 1.42857; } blockquote small:before { content: '\2014 \00A0'; } blockquote.pull-right { padding-right: 15px; padding-left: 0; border-right: 5px solid gray; border-left: 0; } blockquote.pull-right p, blockquote.pull-right small { text-align: right; } blockquote.pull-right small:before { content: ''; } blockquote.pull-right small:after { content: '\00A0 \2014'; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } address { display: block; margin-bottom: 20px; font-style: normal; line-height: 1.42857; } a.subdued‎ { padding-right: 10px; color: #f8f8f8; text-decoration: none; } a.subdued‎:hover { text-decoration: none; } a.subdued‎:last-child { padding-right: 0; } /** * Action Sheets * -------------------------------------------------- */ @-webkit-keyframes fadeInHalf { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(0, 0, 0, 0.5); } } @keyframes fadeInHalf { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(0, 0, 0, 0.5); } } @-webkit-keyframes fadeOutHalf { from { background-color: rgba(0, 0, 0, 0.5); } to { background-color: rgba(0, 0, 0, 0); } } @keyframes fadeOutHalf { from { background-color: rgba(0, 0, 0, 0.5); } to { background-color: rgba(0, 0, 0, 0); } } .action-sheet-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); } .action-sheet-backdrop.active { -webkit-animation: fadeInHalf 0.3s; animation: fadeInHalf 0.3s; -webkit-animation-fill-mode: forwards; } .action-sheet-backdrop.active-remove { -webkit-animation: fadeOutHalf 0.3s; animation: fadeOutHalf 0.3s; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes actionSheetUp { 0% { -webkit-transform: translate3d(0, 100%, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes actionSheetOut { 0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(0, 100%, 0); opacity: 0; } } .action-sheet-up { opacity: 1; -webkit-transform: translate3d(0, 0%, 0); } .action-sheet-up.ng-enter, .action-sheet-up .ng-enter { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -webkit-animation-duration: 400ms; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active { -webkit-animation-name: actionSheetUp; } .action-sheet-up.ng-leave, .action-sheet-up .ng-leave { -webkit-animation-duration: 400ms; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave { -webkit-animation-name: actionSheetOut; } .action-sheet { position: fixed; bottom: 0; left: 15px; z-index: 10; overflow: hidden; width: calc(100% - 30px); } .action-sheet .button { display: block; padding: 1px; width: 100%; border-radius: 0; background-color: transparent; color: #4a87ee; font-size: 18px; } .action-sheet .button.destructive { color: #ef4e3a; } .action-sheet-title { padding: 10px; text-align: center; font-size: 12px; color: #666666; } .action-sheet-group { background-color: #fff; margin-bottom: 5px; border-radius: 3px 3px 3px 3px; } .action-sheet-group .button { border-radius: 0; border-width: 1px 0px 0px 0px; } .action-sheet-group .button.active, .action-sheet-group .button:active { background-color: transparent; color: inherit; } .action-sheet-group .button:first-child:last-child { border-width: 0; } /** * Bar (Headers and Footers) * -------------------------------------------------- */ .bar { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; position: absolute; right: 0; left: 0; z-index: 10; display: -webkit-box; display: box; box-sizing: border-box; padding: 5px; width: 100%; height: 44px; border-width: 0; border-style: solid; border-top: 1px solid transparent; border-bottom: 1px solid #dddddd; background-color: white; background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .bar { border-top: none !important; border-bottom: none !important; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-position: bottom; background-size: 100% 1px; background-repeat: no-repeat; } } .bar.bar-clear { border: none; background: none; color: #fff; } .bar.bar-clear .button { color: #fff; } .bar.bar-clear .title { color: #fff; } .bar.bar-light { background-color: white; border-color: #dddddd; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); color: #444444; } .bar.bar-light .title { color: #444444; } .bar.bar-stable { background-color: #f8f8f8; border-color: #b2b2b2; background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); color: #444444; } .bar.bar-stable .title { color: #444444; } .bar.bar-positive { background-color: #4a87ee; border-color: #145dd7; background-image: linear-gradient(0deg, #145dd7, #145dd7 50%, transparent 50%); color: white; } .bar.bar-positive .title { color: white; } .bar.bar-calm { background-color: #43cee6; border-color: #1aaac3; background-image: linear-gradient(0deg, #1aaac3, #1aaac3 50%, transparent 50%); color: white; } .bar.bar-calm .title { color: white; } .bar.bar-assertive { background-color: #ef4e3a; border-color: #cc2511; background-image: linear-gradient(0deg, #cc2511, #cc2511 50%, transparent 50%); color: white; } .bar.bar-assertive .title { color: white; } .bar.bar-balanced { background-color: #66cc33; border-color: #478f24; background-image: linear-gradient(0deg, #478f24, #478f24 50%, transparent 50%); color: white; } .bar.bar-balanced .title { color: white; } .bar.bar-energized { background-color: #f0b840; border-color: #d39511; background-image: linear-gradient(0deg, #d39511, #d39511 50%, transparent 50%); color: white; } .bar.bar-energized .title { color: white; } .bar.bar-royal { background-color: #8a6de9; border-color: #552bdf; background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%); color: white; } .bar.bar-royal .title { color: white; } .bar.bar-dark { background-color: #444444; border-color: #111111; background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); color: white; } .bar.bar-dark .title { color: white; } .bar .title { position: absolute; top: 0; right: 0; left: 0; z-index: 0; overflow: hidden; margin: 0; min-width: 30px; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 44px; } .bar .title.title-left { text-align: left; } .bar .title a { color: inherit; } .bar .button { z-index: 1; padding: 0 8px; min-width: initial; min-height: 31px; height: 32px; font-size: 12px; line-height: 30px; } .bar .button .icon { padding-left: 2px; padding-right: 2px; font-size: 24px; line-height: 30px; } .bar .button-bar > .button, .bar .buttons > .button { min-height: 31px; height: 32px; line-height: 30px; } .bar .button-bar + .button, .bar .button + .button-bar { margin-left: 5px; } .bar .title + .button:last-child, .bar > .button + .button:last-child, .bar > .button.pull-right, .bar .title + .buttons { position: absolute; top: 5px; right: 5px; bottom: 5px; } .bar-light .button { color: #444444; background-color: white; border-color: #dddddd; } .bar-light .button:hover { color: #444444; text-decoration: none; } .bar-light .button.active, .bar-light .button:active { background-color: #fafafa; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #cccccc; } .bar-light .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-stable .button { color: #444444; background-color: #f8f8f8; border-color: #b2b2b2; } .bar-stable .button:hover { color: #444444; text-decoration: none; } .bar-stable .button.active, .bar-stable .button:active { background-color: #e5e5e5; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #a2a2a2; } .bar-stable .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-positive .button { color: white; background-color: #4a87ee; border-color: #145dd7; } .bar-positive .button:hover { color: white; text-decoration: none; } .bar-positive .button.active, .bar-positive .button:active { background-color: #145dd7; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #145dd7; } .bar-positive .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-calm .button { color: white; background-color: #43cee6; border-color: #1aaac3; } .bar-calm .button:hover { color: white; text-decoration: none; } .bar-calm .button.active, .bar-calm .button:active { background-color: #1aaac3; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #1aaac3; } .bar-calm .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-assertive .button { color: white; background-color: #ef4e3a; border-color: #cc2511; } .bar-assertive .button:hover { color: white; text-decoration: none; } .bar-assertive .button.active, .bar-assertive .button:active { background-color: #cc2511; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #cc2511; } .bar-assertive .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-balanced .button { color: white; background-color: #66cc33; border-color: #478f24; } .bar-balanced .button:hover { color: white; text-decoration: none; } .bar-balanced .button.active, .bar-balanced .button:active { background-color: #478f24; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #478f24; } .bar-balanced .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-energized .button { color: white; background-color: #f0b840; border-color: #d39511; } .bar-energized .button:hover { color: white; text-decoration: none; } .bar-energized .button.active, .bar-energized .button:active { background-color: #d39511; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #d39511; } .bar-energized .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-royal .button { color: white; background-color: #8a6de9; border-color: #552bdf; } .bar-royal .button:hover { color: white; text-decoration: none; } .bar-royal .button.active, .bar-royal .button:active { background-color: #552bdf; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: #552bdf; } .bar-royal .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-dark .button { color: white; background-color: #444444; border-color: #111111; } .bar-dark .button:hover { color: white; text-decoration: none; } .bar-dark .button.active, .bar-dark .button:active { background-color: #262626; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); border-color: black; } .bar-dark .button.button-clear { color: white; background: none; box-shadow: none; font-size: 18px; } .bar-header { top: 0; border-top-width: 0; border-bottom-width: 1px; } .bar-footer { bottom: 0; border-top-width: 1px; border-bottom-width: 0; background-position: top; } .bar-tabs { padding: 0; } .bar-subheader { top: 44px; display: block; } .bar-subfooter { bottom: 44px; display: block; } /** * Tabs * -------------------------------------------------- * A navigation bar with any number of tab items supported. */ .tabs { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: horizontal; -moz-flex-direction: horizontal; -ms-flex-direction: horizontal; flex-direction: horizontal; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; background-color: #f8f8f8; background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); border-color: #b2b2b2; color: #444444; position: absolute; bottom: 0; z-index: 5; width: 100%; height: 49px; border-style: solid; border-top-width: 1px; background-size: 0; line-height: 49px; } .tabs.tabs-light { background-color: white; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); border-color: #dddddd; color: #444444; } .tabs.tabs-stable { background-color: #f8f8f8; background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); border-color: #b2b2b2; color: #444444; } .tabs.tabs-positive { background-color: #4a87ee; background-image: linear-gradient(0deg, #145dd7, #145dd7 50%, transparent 50%); border-color: #145dd7; color: white; } .tabs.tabs-calm { background-color: #43cee6; background-image: linear-gradient(0deg, #1aaac3, #1aaac3 50%, transparent 50%); border-color: #1aaac3; color: white; } .tabs.tabs-assertive { background-color: #ef4e3a; background-image: linear-gradient(0deg, #cc2511, #cc2511 50%, transparent 50%); border-color: #cc2511; color: white; } .tabs.tabs-balanced { background-color: #66cc33; background-image: linear-gradient(0deg, #478f24, #478f24 50%, transparent 50%); border-color: #478f24; color: white; } .tabs.tabs-energized { background-color: #f0b840; background-image: linear-gradient(0deg, #d39511, #d39511 50%, transparent 50%); border-color: #d39511; color: white; } .tabs.tabs-royal { background-color: #8a6de9; background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%); border-color: #552bdf; color: white; } .tabs.tabs-dark { background-color: #444444; background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); border-color: #111111; color: white; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .tabs { padding-top: 2px; border-top: none !important; border-bottom: none !important; background-position: top; background-size: 100% 1px; background-repeat: no-repeat; } } .tabs-top { top: 44px; } .tab-item { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; overflow: hidden; box-sizing: border-box; max-width: 150px; height: 100%; color: inherit; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 14px; font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0.7; } .tabs-icon-top .tab-item, .tabs-icon-bottom .tab-item { font-size: 12px; line-height: 14px; } .tab-item .icon { display: block; margin: 0 auto; height: 32px; font-size: 32px; } .tabs-icon-left .tab-item, .tabs-icon-right .tab-item { font-size: 12px; } .tabs-icon-left .tab-item .icon, .tabs-icon-right .tab-item .icon { display: inline-block; vertical-align: top; font-size: 24px; line-height: 49px; } .tabs-icon-only .icon { line-height: inherit; } /* Navigational tab */ /* Active state for tab */ .tab-item.active, .tab-item:active { opacity: 1; } .tab-item.active.tab-item-light, .tab-item:active.tab-item-light { color: white; } .tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable { color: #f8f8f8; } .tab-item.active.tab-item-positive, .tab-item:active.tab-item-positive { color: #4a87ee; } .tab-item.active.tab-item-calm, .tab-item:active.tab-item-calm { color: #43cee6; } .tab-item.active.tab-item-assertive, .tab-item:active.tab-item-assertive { color: #ef4e3a; } .tab-item.active.tab-item-balanced, .tab-item:active.tab-item-balanced { color: #66cc33; } .tab-item.active.tab-item-energized, .tab-item:active.tab-item-energized { color: #f0b840; } .tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal { color: #8a6de9; } .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { color: #444444; } .item.tabs { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; padding: 0; } .item.tabs .icon { position: relative; } /** * Menus * -------------------------------------------------- * Side panel structure */ .menu { position: absolute; top: 0; bottom: 0; z-index: 0; overflow: hidden; min-height: 100%; max-height: 100%; width: 270px; background-color: #fff; } .menu-content { box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); } .menu-left { left: 0; } .menu-right { right: 0; } .menu-animated { -webkit-transition: -webkit-transform 200ms ease; -moz-transition: -moz-transform 200ms ease; transition: transform 200ms ease; } /** * Modals * -------------------------------------------------- * Modals are independent windows that slide in from off-screen. */ .modal { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); position: fixed; top: 0; z-index: 10; overflow: hidden; min-height: 100%; width: 100%; background-color: white; opacity: 0; } .modal.active { height: 100%; } /** * Popups * -------------------------------------------------- */ .popup { position: fixed; } .popup-content { padding: 10px; } .loading-backdrop { position: fixed; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; -webkit-transition: visibility 0s linear 0.3s; } .loading-backdrop.enabled { background-color: rgba(0, 0, 0, 0.7); } .loading-backdrop.active { visibility: visible; -webkit-transition-delay: 0s; } .loading { position: fixed; top: 50%; left: 50%; padding: 20px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; text-overflow: ellipsis; font-size: 15px; } .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 { color: #fff; } /** * Items * -------------------------------------------------- */ .item { color: #444444; background-color: white; border-color: #dddddd; position: relative; z-index: 2; display: block; margin: -1px; padding: 15px; border-width: 1px; border-style: solid; font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .item.active, .ionic-pseudo .item:active { background-color: #d9d9d9; border-color: #cccccc; } .item h2 { margin: 0 0 4px 0; font-size: 16px; } .item h3 { margin: 0 0 4px 0; font-size: 14px; } .item h4 { margin: 0 0 4px 0; font-size: 12px; } .item h5, .item h6 { margin: 0 0 3px 0; font-size: 10px; } .item p { color: #666; font-size: 14px; } .item h1:last-child, .item h2:last-child, .item h3:last-child, .item h4:last-child, .item h5:last-child, .item h6:last-child, .item p:last-child { margin-bottom: 0; } .item .badge { float: right; } .item .badge + .badge { margin-right: 5px; } .item.item-light { color: #444444; background-color: white; border-color: #dddddd; } .item.item-light.active, .ionic-pseudo .item.item-light:active { background-color: #fafafa; border-color: #cccccc; } .item.item-stable { color: #444444; background-color: #f8f8f8; border-color: #b2b2b2; } .item.item-stable.active, .ionic-pseudo .item.item-stable:active { background-color: #e5e5e5; border-color: #a2a2a2; } .item.item-positive { color: white; background-color: #4a87ee; border-color: #145dd7; } .item.item-positive.active, .ionic-pseudo .item.item-positive:active { background-color: #145dd7; border-color: #145dd7; } .item.item-calm { color: white; background-color: #43cee6; border-color: #1aaac3; } .item.item-calm.active, .ionic-pseudo .item.item-calm:active { background-color: #1aaac3; border-color: #1aaac3; } .item.item-assertive { color: white; background-color: #ef4e3a; border-color: #cc2511; } .item.item-assertive.active, .ionic-pseudo .item.item-assertive:active { background-color: #cc2511; border-color: #cc2511; } .item.item-balanced { color: white; background-color: #66cc33; border-color: #478f24; } .item.item-balanced.active, .ionic-pseudo .item.item-balanced:active { background-color: #478f24; border-color: #478f24; } .item.item-energized { color: white; background-color: #f0b840; border-color: #d39511; } .item.item-energized.active, .ionic-pseudo .item.item-energized:active { background-color: #d39511; border-color: #d39511; } .item.item-royal { color: white; background-color: #8a6de9; border-color: #552bdf; } .item.item-royal.active, .ionic-pseudo .item.item-royal:active { background-color: #552bdf; border-color: #552bdf; } .item.item-dark { color: white; background-color: #444444; border-color: #111111; } .item.item-dark.active, .ionic-pseudo .item.item-dark:active { background-color: #262626; border-color: black; } .item, .item h1, .item h2, .item h3, .item h4, .item h5, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.item { color: inherit; text-decoration: none; } a.item:hover, a.item:focus { text-decoration: none; } /** * Complex Items * -------------------------------------------------- * Adding .item-complex allows the .item to be slidable and * have options underneath the button, but also requires an * additional .item-content element inside .item. * Basically .item-complex removes any default settings which * .item added, so that .item-content looks them as just .item. */ .item-complex, a.item.item-complex, button.item.item-complex { padding: 0; } .item-complex .item-content, .item-radio .item-content { /** * The content area of a complex list item. This area can * Slide left and right and be dragged to support different * UI interactions. */ position: relative; z-index: 2; padding: 15px 40px 15px 15px; border: none; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .item-text-wrap, .item-text-wrap h1, .item-text-wrap h2, .item-text-wrap h3, .item-text-wrap h4, .item-text-wrap h5, .item-text-wrap h6, .item-text-wrap p, .item-complex.item-text-wrap .item-content, .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p { overflow: hidden; white-space: normal; } .item-complex.item-text-wrap, .item-complex.item-text-wrap h1, .item-complex.item-text-wrap h2, .item-complex.item-text-wrap h3, .item-complex.item-text-wrap h4, .item-complex.item-text-wrap h5, .item-complex.item-text-wrap h6, .item-complex.item-text-wrap p { overflow: hidden; white-space: nowrap; } /** * Item Icons * -------------------------------------------------- */ .item-icon-left .icon, .item-icon-right .icon { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: absolute; top: 0; height: 100%; font-size: 32px; } .item-icon-left .icon:before, .item-icon-right .icon:before { display: block; width: 28px; text-align: center; } .item .fill-icon { min-width: 30px; min-height: 30px; font-size: 28px; } .item-icon-left { padding-left: 45px; } .item-icon-left .icon { left: 7.5px; } .item-complex.item-icon-left { padding-left: 0; } .item-complex.item-icon-left .item-content { padding-left: 45px; } .item-icon-right .icon { right: 7.5px; } .item-icon-left.item-icon-right .icon:first-child { right: auto; } .item-icon-left.item-icon-right .icon:last-child { left: auto; } /** * Item Button * -------------------------------------------------- * An item button is a child button inside an .item (not the entire .item) */ .item-button-left { padding-left: 67.5px; } .item-button-left > .button, .item-button-left .item-content > .button { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: absolute; top: 7.5px; left: 7.5px; min-width: initial; min-height: 32px; font-size: 32px; } .item-button-left > .button .icon, .item-button-left .item-content > .button .icon { position: relative; left: auto; width: auto; line-height: 31px; } .item-button-right, a.item.item-button-right, button.item.item-button-right { padding-right: 75px; } .item-button-right > .button, .item-button-right .item-content > .button { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: absolute; top: 7.5px; right: 15px; min-width: initial; min-height: 32px; font-size: 32px; } .item-button-right > .button .icon, .item-button-right .item-content > .button .icon { position: relative; left: auto; width: auto; line-height: 31px; } /** * Auto Right Arrow Icon * -------------------------------------------------- * By default, if an .item is created out of an or