*, *:before, *:after { -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); -moz-user-select: -moz-none; -webkit-touch-callout: none; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: pan-y; } body, html { -ms-overflow-style: none !important; width: 100%; height: 100%; overflow: hidden; } body { overflow-x: hidden; -webkit-text-size-adjust: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000000; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; background: #ffffff; } input, textarea { -webkit-user-select: text; -moz-user-select: -moz-text; -moz-user-select: text; } img { border: none; } p { display: block; margin: 6px 0; font-size: 14px; line-height: 20px; color: inherit; } .view { display: none; overflow: hidden; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .view header { position: relative; overflow: hidden; display: block; z-index: 250; -webkit-box-sizing: border-box; box-sizing: border-box; height: 44px; left: 0; right: 0; } .view header h1 { position: absolute; width: 45%; z-index: 1; height: 44px; font-size: 18px; font-weight: bold; left: 27.5%; color: #ffffff; padding: 10px 0; text-shadow: rgba(0, 0, 0, 0.8) 0 -1px 0; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .view footer { z-index: 180; height: 49px; display: block; left: 0; right: 0; position: relative; padding: 0 3px; display: -webkit-box; display: -moz-box; display: box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; } .view footer a { height: 100%; font-size: 12px; font-weight: normal; text-decoration: none; color: #ffffff; text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-top: 3px; } .view footer a.button { color: black; } .view footer .icon:not(.button):before { display: block; position: relative; top: 2px; left: 0; font-size: 25px; margin: auto; width: 100%; margin-bottom: 5px; } .view.active { display: -webkit-box; display: -moz-box; display: box; display: -ms-flexbox; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; } .pages { z-index: 180; position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background: #ffffff; color: #000000; overflow: hidden; } .panel { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; padding: 10px; padding-top: 0px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .panel.active { display: block; } .panel.x-scroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; } .panel.no-scroll { overflow: hidden; touch-action: none; } nav { height: 100%; width: 200px; position: absolute; top: 0px; left: 0px; background: #ccc; display: none; box-shadow: 0 0 8px 0 black; z-index: 30; } nav.right { height: 100%; width: 200px; position: absolute; top: 0px; left: auto; right: 0px; } nav.active { display: block; } .splashscreen { background: #1d1d1c !important; padding-left: 40px; padding-top: 30px !important; min-height: 100%; } h2 { display: block; height: 34px; font-weight: bold; font-size: 18px; color: #000; padding: 6px 0; margin-bottom: 8px; } .afui_mask { position: absolute; top: 45%; z-index: 999999; } .afui_panel_mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2000; background-color: rgba(0, 0, 0, 0.1); display: none; } /* Chevrons */ @font-face { font-family: 'chevron'; src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQAAA0AAAAABZgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAcZ/T02kdERUYAAAFMAAAAHwAAACAAMgAGT1MvMgAAAWwAAABHAAAAVj7i2r5jbWFwAAABtAAAAEMAAAFS8BX0J2dhc3AAAAH4AAAACAAAAAj//wADZ2x5ZgAAAgAAAABsAAAAbMHrMoZoZWFkAAACbAAAADAAAAA2/JaSB2hoZWEAAAKcAAAAHgAAACQDav/GaG10eAAAArwAAAATAAAAFAN1AB1sb2NhAAAC0AAAAAwAAAAMAA4ANm1heHAAAALcAAAAHQAAACAASAAbbmFtZQAAAvwAAADdAAABhigr581wb3N0AAAD3AAAACIAAAA8nFVDO3icY2BgYGQAgjO2i86D6LO3V7LCaABOtwcoAAB4nGNgZGBg4ANiCQYQYGJgZGBmYAGSLGAeAwAEkAA5AHicY2BkVGCcwMDKwMGozGjJwMBgB6WvM4gxFDMwMDGwMjPAgQCCyRCQ5prC4PCB4UMIY8P/AwwajA0MDg0MDIwgOQBg6QqyAHicY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiQ8MH0L+/0dmCTDzb4DqAgNGNgY4lxGkh4kBFTAyDHsAAFhbChsAAAAAAf//AAIAAQAA/8ABwAGAAAIAABEBIQHA/kABgP5AAAAAAAEAHf/tARMBcwAXAAAlFA8BBiIvASY1ND8BJyY1ND8BNjIfARYBEwmkCRoJFAkJenoJCRQIHAikCbANCqMJCRMKDQ0JenkKDQ0JEwoKowl4nGNgZGBgAOLcX7xy8fw2Xxm4GQ8ARRjO3l7JiqD/H2A8wNgA5HIwMIFEAUPwC7d4nGNgZGBgbPh/gEGD8QADwz8HIAkUQQGsAIQZBTAAAHicYzzAAAFTIRSjAoMsABVQAZUAAAAAAAAAAAAADgA2eJxjYGRgYGBlkGAA0QwMTEDMCGY7gPkMAAUvAGQAAAB4nHWOTWoCQRBG3+hoCIbgKmTZkE02M3RPwIUHmAO4cC/SjII40P7gSbLKEbL0GB4gR8gx/JzUJgsbin68rqqvgSc+ybidjAfGxj3xu3GfN07Gufy38YARF+Oh/K86s/xR5rmbunFP/Grcp8Yb5/JfxgNeOBsP5X9YsiJyJNGyheUqHlMrmMk2HNiw0Buz2Bw2C0Hd9e27O6kj4qgoleaYqv7v+3NBrwUTVSUKfGhNu93XbWqiq0rvps5yRcEXk6LyQU33/jaXTexYW0bo8pnHtFtrRyj93dkrAWI51wAAAHicY2BiwA9YgZiRgYmRiZGZvTQv083AwABCm5oAACfXBG0AAA==) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWf09NoAAAV8AAAAHEdERUYAMgAGAAAFXAAAACBPUy8yPuLavgAAAVgAAABWY21hcPAV9CcAAAHEAAABUmdhc3D//wADAAAFVAAAAAhnbHlmwesyhgAAAyQAAABsaGVhZPyWkgcAAADcAAAANmhoZWEDav/GAAABFAAAACRobXR4A3UAHQAAAbAAAAAUbG9jYQAOADYAAAMYAAAADG1heHAASAAbAAABOAAAACBuYW1lKCvnzQAAA5AAAAGGcG9zdJxVQzsAAAUYAAAAPAABAAAAAQAAbfoNHl8PPPUACwHAAAAAAM3bqQUAAAAAzdupBQAA/8ABwAGAAAAACAACAAAAAAAAAAEAAAGA/8AAKAHAAAD+QAHAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFABgAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQEgAZAABQAIASMBOQAAAD4BIwE5AAAA1wAWAHMAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA8ADwVAGA/8AAKAGAAECAAAABAAAAAAAAAcAAAAAAAAAAlQAAAAAAAAEgAB0AAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAPAA8FT//wAAAADwAPBU//8AABADD7AAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgA2AAEAAP/AAcABgAACAAARASEBwP5AAYD+QAAAAAABAB3/7QETAXMAFwAAJRQPAQYiLwEmNTQ/AScmNTQ/ATYyHwEWARMJpAkaCRQJCXp6CQkUCBwIpAmwDQqjCQkTCg0NCXp5Cg0NCRMKCqMJAAAADACWAAEAAAAAAAEABwAQAAEAAAAAAAIABwAoAAEAAAAAAAMAIwB4AAEAAAAAAAQABwCsAAEAAAAAAAUACwDMAAEAAAAAAAYABwDoAAMAAQQJAAEADgAAAAMAAQQJAAIADgAYAAMAAQQJAAMARgAwAAMAAQQJAAQADgCcAAMAAQQJAAUAFgC0AAMAAQQJAAYADgDYAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwBoAGUAdgByAG8AbgAgADoAIAAxADAALQA2AC0AMgAwADEAMwAARm9udEZvcmdlIDIuMCA6IGNoZXZyb24gOiAxMC02LTIwMTMAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIBAwd1bmlGMDAwB3VuaUYwNTQAAAAB//8AAgABAAAADgAAABgAAAAAAAIAAQADAAQAAQAEAAAAAgAAAAAAAQAAAADMPaLPAAAAAM3bqQUAAAAAzdupBQ==) format('truetype'); font-weight: normal; font-style: normal; } .chevron { font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .chevron:after { content: "\f054"; } .chevron.left { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card { padding: 1.5rem; box-shadow: 0 1px 4px #aaa; background: inherit; color: inherit; margin: 0 1rem 1rem; border-radius: 3px; -webkit-user-select: none; position: relative; } .card h1 { font-size: 2rem; font-weight: 200; } .card h1.info:after { position: absolute; right: 1.5rem; top: 1.5rem; content: 'i'; color: #ccc; border: thin solid #ccc; font-size: 10px; border-radius: 14px; width: 14px; height: 14px; text-align: center; } .card h2 { font-size: .9rem; line-height: 2.5; color: #ccc; font-weight: 400; } .card p { margin: 0px; padding: 10px; } #afui_mask { position: absolute; top: 45%; z-index: 999999; border-radius: 30px; } @media print { body { overflow: visible; } .panel { overflow-x: visible !important; overflow-y: visible !important; overflow: visible !important; } } .panel.active, .panel.animation-active { display: block !important; z-index: 100; -webkit-animation-timing-function: linear !important; animation-timing-function: linear !important; } .animation-active { -webkit-animation-timing-function: linear !important; animation-timing-function: linear !important; } .panel.animation-active { -webkit-transition-duration: 300ms; transition-duration: 300ms; } .fast { -webkit-transition-duration: 100ms !important; transition-duration: 100ms !important; } .none-in, .none-out { -webkit-animation: noTransition 1ms forwards; animation: noTransition 1ms forwards; } .blank-in, .blank-out, .blank { -webkit-animation: noTransition 300ms forwards; animation: noTransition 300ms forwards; } @-webkit-keyframes noTransition { from { opacity: 1.0; } to { opacity: 0.99; } } @keyframes noTransition { from { opacity: 1.0; } to { opacity: 0.99; } } .slide-in { -webkit-animation: slide-inAnimation 300ms forwards; animation: slide-inAnimation 300ms forwards; } @-webkit-keyframes slide-inAnimation { 0% { -webkit-transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-inAnimation { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .slide-in.animation-reverse { -webkit-animation: slide-inAnimationReverse 450ms forwards; animation: slide-inAnimationReverse 450ms forwards; } @-webkit-keyframes slide-inAnimationReverse { 100% { -webkit-transform: translate3d(100%, 0, 0); } 0% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-inAnimationReverse { 100% { transform: translate3d(100%, 0, 0); } 0% { transform: translate3d(0, 0, 0); } } .slide-out { -webkit-animation: slide-outAnimation 300ms forwards; animation: slide-outAnimation 300ms forwards; } @-webkit-keyframes slide-outAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(-200px, 0, 0); } } @keyframes slide-outAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-200px, 0, 0); } } .slide-out.animation-reverse { -webkit-animation: slide-outAnimationReverse 450ms forwards; animation: slide-outAnimationReverse 450ms forwards; } @-webkit-keyframes slide-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(-200px, 0, 0); } } @keyframes slide-outAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(-200px, 0, 0); } } .slide-full-in { -webkit-animation: slide-full-inAnimation 300ms forwards; animation: slide-full-inAnimation 300ms forwards; } @-webkit-keyframes slide-full-inAnimation { 0% { -webkit-transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-full-inAnimation { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .slide-full-in.animation-reverse { -webkit-animation: slide-full-inAnimationReverse 450ms forwards; animation: slide-full-inAnimationReverse 450ms forwards; } @-webkit-keyframes slide-full-inAnimationReverse { 100% { -webkit-transform: translate3d(100%, 0, 0); } 0% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-full-inAnimationReverse { 100% { transform: translate3d(100%, 0, 0); } 0% { transform: translate3d(0, 0, 0); } } .slide-full-out { -webkit-animation: slide-full-outAnimation 300ms forwards; animation: slide-full-outAnimation 300ms forwards; } @-webkit-keyframes slide-full-outAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes slide-full-outAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } .slide-full-out.animation-reverse { -webkit-animation: slide-full-outAnimationReverse 450ms forwards; animation: slide-full-outAnimationReverse 450ms forwards; } @-webkit-keyframes slide-full-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes slide-full-outAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(-100%, 0, 0); } } .pop-in { -webkit-animation: pop-inAnimation 300ms forwards; animation: pop-inAnimation 300ms forwards; } @-webkit-keyframes pop-inAnimation { 0% { opacity: 0; -webkit-transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes pop-inAnimation { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } .pop-in.animation-reverse { -webkit-animation: pop-inAnimationReverse 450ms forwards; animation: pop-inAnimationReverse 450ms forwards; } @-webkit-keyframes pop-inAnimationReverse { 100% { opacity: 0; -webkit-transform: scale(0.5); } 0% { opacity: 1; -webkit-transform: scale(1); } } @keyframes pop-inAnimationReverse { 100% { opacity: 0; transform: scale(0.5); } 0% { opacity: 1; transform: scale(1); } } .pop-out { -webkit-animation: noTransition 300ms forwards; animation: noTransition 300ms forwards; } .fade-in { -webkit-animation: fade-inAnimation 300ms forwards; animation: fade-inAnimation 300ms forwards; } @-webkit-keyframes fade-inAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-inAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in.animation-reverse { -webkit-animation: fade-inAnimationReverse 450ms forwards; animation: fade-inAnimationReverse 450ms forwards; } @-webkit-keyframes fade-inAnimationReverse { 100% { opacity: 0; } 0% { opacity: 1; } } @keyframes fade-inAnimationReverse { 100% { opacity: 0; } 0% { opacity: 1; } } .fade-out { -webkit-animation: noTransition 300ms forwards; animation: noTransition 300ms forwards; } .up-in { -webkit-animation: up-inAnimation 300ms forwards; animation: up-inAnimation 300ms forwards; } @-webkit-keyframes up-inAnimation { 0% { -webkit-transform: translate3d(0%, 100%, 0); } 100% { -webkit-transform: translate3d(0%, 0%, 0); } } @keyframes up-inAnimation { 0% { transform: translate3d(0%, 100%, 0); } 100% { transform: translate3d(0%, 0%, 0); } } .up-in.animation-reverse { -webkit-animation: up-inAnimationReverse 450ms forwards; animation: up-inAnimationReverse 450ms forwards; } @-webkit-keyframes up-inAnimationReverse { 100% { -webkit-transform: translate3d(0%, 100%, 0); } 0% { -webkit-transform: translate3d(0%, 0%, 0); } } @keyframes up-inAnimationReverse { 100% { transform: translate3d(0%, 100%, 0); } 0% { transform: translate3d(0%, 0%, 0); } } .up-out { -webkit-animation: up-outAnimation 300ms forwards; animation: up-outAnimation 300ms forwards; } @-webkit-keyframes up-outAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(0%, -200px, 0); } } @keyframes up-outAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(0%, -200px, 0); } } .up-out.animation-reverse { -webkit-animation: up-outAnimationReverse 450ms forwards; animation: up-outAnimationReverse 450ms forwards; } @-webkit-keyframes up-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(0%, -200px, 0); } } @keyframes up-outAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(0%, -200px, 0); } } .down-in { -webkit-animation: down-inAnimation 300ms forwards; animation: down-inAnimation 300ms forwards; } @-webkit-keyframes down-inAnimation { 0% { -webkit-transform: translate3d(0%, -100%, 0); } 100% { -webkit-transform: translate3d(0%, 0%, 0); } } @keyframes down-inAnimation { 0% { transform: translate3d(0%, -100%, 0); } 100% { transform: translate3d(0%, 0%, 0); } } .down-in.animation-reverse { -webkit-animation: down-inAnimationReverse 450ms forwards; animation: down-inAnimationReverse 450ms forwards; } @-webkit-keyframes down-inAnimationReverse { 100% { -webkit-transform: translate3d(0%, -100%, 0); } 0% { -webkit-transform: translate3d(0%, 0%, 0); } } @keyframes down-inAnimationReverse { 100% { transform: translate3d(0%, -100%, 0); } 0% { transform: translate3d(0%, 0%, 0); } } .down-out { -webkit-animation: down-outAnimation 300ms forwards; animation: down-outAnimation 300ms forwards; } @-webkit-keyframes down-outAnimation { 0% { -webkit-transform: translate3d(0%, 0%, 0); } 100% { -webkit-transform: translate3d(0%, 200px, 0); } } @keyframes down-outAnimation { 0% { transform: translate3d(0%, 0%, 0); } 100% { transform: translate3d(0%, 200px, 0); } } .down-out.animation-reverse { -webkit-animation: down-outAnimationReverse 450ms forwards; animation: down-outAnimationReverse 450ms forwards; } @-webkit-keyframes down-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0%, 0); } 0% { -webkit-transform: translate3d(0%, 200px, 0); } } @keyframes down-outAnimationReverse { 100% { transform: translate3d(0%, 0%, 0); } 0% { transform: translate3d(0%, 200px, 0); } } .flip-in { -webkit-animation: flip-inAnimation 300ms forwards; animation: flip-inAnimation 300ms forwards; z-index: 5; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @-webkit-keyframes flip-inAnimation { 0% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); } } @keyframes flip-inAnimation { 0% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } } .flip-in.animation-reverse { -webkit-animation: flip-inAnimationReverse 450ms forwards; animation: flip-inAnimationReverse 450ms forwards; } @-webkit-keyframes flip-inAnimationReverse { 100% { -webkit-transform: rotateY(180deg); } 0% { -webkit-transform: rotateY(0deg); } } @keyframes flip-inAnimationReverse { 100% { transform: rotateY(180deg); } 0% { transform: rotateY(0deg); } } .flip-out { -webkit-animation: flip-outAnimation 300ms forwards; animation: flip-outAnimation 300ms forwards; z-index: 4; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @-webkit-keyframes flip-outAnimation { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(180deg); } } @keyframes flip-outAnimation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } .flip-out.animation-reverse { -webkit-animation: flip-outAnimationReverse 450ms forwards; animation: flip-outAnimationReverse 450ms forwards; } @-webkit-keyframes flip-outAnimationReverse { 100% { -webkit-transform: rotateY(0deg); } 0% { -webkit-transform: rotateY(180deg); } } @keyframes flip-outAnimationReverse { 100% { transform: rotateY(0deg); } 0% { transform: rotateY(180deg); } } .slide-left-in { -webkit-animation: slide-left-inAnimation 300ms forwards; animation: slide-left-inAnimation 300ms forwards; } @-webkit-keyframes slide-left-inAnimation { 0% { -webkit-transform: translate3d(-100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-left-inAnimation { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .slide-left-in.animation-reverse { -webkit-animation: slide-left-inAnimationReverse 450ms forwards; animation: slide-left-inAnimationReverse 450ms forwards; } @-webkit-keyframes slide-left-inAnimationReverse { 100% { -webkit-transform: translate3d(-100%, 0, 0); } 0% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-left-inAnimationReverse { 100% { transform: translate3d(-100%, 0, 0); } 0% { transform: translate3d(0, 0, 0); } } .slide-left-out { -webkit-animation: slide-left-outAnimation 300ms forwards; animation: slide-left-outAnimation 300ms forwards; } @-webkit-keyframes slide-left-outAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(200px, 0, 0); } } @keyframes slide-left-outAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(200px, 0, 0); } } .slide-left-out.animation-reverse { -webkit-animation: slide-left-outAnimationReverse 450ms forwards; animation: slide-left-outAnimationReverse 450ms forwards; } @-webkit-keyframes slide-left-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(200px, 0, 0); } } @keyframes slide-left-outAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(200px, 0, 0); } } .slide-right-in { -webkit-animation: slide-right-inAnimation 300ms forwards; animation: slide-right-inAnimation 300ms forwards; } @-webkit-keyframes slide-right-inAnimation { 0% { -webkit-transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-right-inAnimation { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .slide-right-in.animation-reverse { -webkit-animation: slide-right-inAnimationReverse 450ms forwards; animation: slide-right-inAnimationReverse 450ms forwards; } @-webkit-keyframes slide-right-inAnimationReverse { 100% { -webkit-transform: translate3d(100%, 0, 0); } 0% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slide-right-inAnimationReverse { 100% { transform: translate3d(100%, 0, 0); } 0% { transform: translate3d(0, 0, 0); } } .slide-right-out { -webkit-animation: slide-right-outAnimation 300ms forwards; animation: slide-right-outAnimation 300ms forwards; } @-webkit-keyframes slide-right-outAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(-200px, 0, 0); } } @keyframes slide-right-outAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-200px, 0, 0); } } .slide-right-out.animation-reverse { -webkit-animation: slide-right-outAnimationReverse 450ms forwards; animation: slide-right-outAnimationReverse 450ms forwards; } @-webkit-keyframes slide-right-outAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(-200px, 0, 0); } } @keyframes slide-right-outAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(-200px, 0, 0); } } .invoke-out { -webkit-animation: invoke-outAnimation 500ms forwards; animation: invoke-outAnimation 500ms forwards; z-index: 11; } @-webkit-keyframes invoke-outAnimation { 0% { -webkit-transform: scale(1) translate3d(0%, 0, 0); } 50% { -webkit-transform: scale(0.8) translate3d(10%, 0, 0); } 100% { -webkit-transform: scale(0.8) translate3d(100%, 0, 0); } } @keyframes invoke-outAnimation { 0% { transform: scale(1) translate3d(0%, 0, 0); } 50% { transform: scale(0.8) translate3d(10%, 0, 0); } 100% { transform: scale(0.8) translate3d(100%, 0, 0); } } .invoke-out.animation-reverse { -webkit-animation: invoke-outAnimationReverse 750ms forwards; animation: invoke-outAnimationReverse 750ms forwards; } @-webkit-keyframes invoke-outAnimationReverse { 100% { -webkit-transform: scale(1) translate3d(0%, 0, 0); } 50% { -webkit-transform: scale(0.8) translate3d(10%, 0, 0); } 0% { -webkit-transform: scale(0.8) translate3d(100%, 0, 0); } } @keyframes invoke-outAnimationReverse { 100% { transform: scale(1) translate3d(0%, 0, 0); } 50% { transform: scale(0.8) translate3d(10%, 0, 0); } 0% { transform: scale(0.8) translate3d(100%, 0, 0); } } .invoke-in { -webkit-animation: invoke-inAnimation 500ms forwards; animation: invoke-inAnimation 500ms forwards; z-index: 10; } @-webkit-keyframes invoke-inAnimation { 0% { -webkit-transform: scale(0.6) translate3d(-130%, 0, 0); } 50% { -webkit-transform: scale(0.8) translate3d(-110%, 0, 0); } 100% { -webkit-transform: scale(1) translate3d(0, 0, 0); } } @keyframes invoke-inAnimation { 0% { transform: scale(0.6) translate3d(-130%, 0, 0); } 50% { transform: scale(0.8) translate3d(-110%, 0, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); } } .invoke-in.animation-reverse { -webkit-animation: invoke-inAnimationReverse 750ms forwards; animation: invoke-inAnimationReverse 750ms forwards; } @-webkit-keyframes invoke-inAnimationReverse { 100% { -webkit-transform: scale(0.6) translate3d(-130%, 0, 0); } 50% { -webkit-transform: scale(0.8) translate3d(-110%, 0, 0); } 0% { -webkit-transform: scale(1) translate3d(0, 0, 0); } } @keyframes invoke-inAnimationReverse { 100% { transform: scale(0.6) translate3d(-130%, 0, 0); } 50% { transform: scale(0.8) translate3d(-110%, 0, 0); } 0% { transform: scale(1) translate3d(0, 0, 0); } } .header-load { -webkit-animation: header-loadAnimation 300ms forwards; animation: header-loadAnimation 300ms forwards; } @-webkit-keyframes header-loadAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(-90px, 0, 0); opacity: 0.1; } } @keyframes header-loadAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-90px, 0, 0); opacity: 0.1; } } .header-load.animation-reverse { -webkit-animation: header-loadAnimationReverse 450ms forwards; animation: header-loadAnimationReverse 450ms forwards; } @-webkit-keyframes header-loadAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(-90px, 0, 0); opacity: 0.1; } } @keyframes header-loadAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(-90px, 0, 0); opacity: 0.1; } } .header-unload { -webkit-animation: header-unloadAnimation 300ms forwards; animation: header-unloadAnimation 300ms forwards; } @-webkit-keyframes header-unloadAnimation { 0% { -webkit-transform: translate3d(0%, 0, 0); } 100% { -webkit-transform: translate3d(90px, 0, 0); opacity: 0.1; } } @keyframes header-unloadAnimation { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(90px, 0, 0); opacity: 0.1; } } .header-unload.animation-reverse { -webkit-animation: header-unloadAnimationReverse 450ms forwards; animation: header-unloadAnimationReverse 450ms forwards; } @-webkit-keyframes header-unloadAnimationReverse { 100% { -webkit-transform: translate3d(0%, 0, 0); } 0% { -webkit-transform: translate3d(90px, 0, 0); opacity: 0.1; } } @keyframes header-unloadAnimationReverse { 100% { transform: translate3d(0%, 0, 0); } 0% { transform: translate3d(90px, 0, 0); opacity: 0.1; } } .header-load-to { -webkit-animation: header-load-toAnimation 500ms forwards; animation: header-load-toAnimation 500ms forwards; } @-webkit-keyframes header-load-toAnimation { 0% { -webkit-transform: translate3d(90px, 0, 0); opacity: 0.1; } 100% { -webkit-transform: translate3d(0%, 0, 0); opacity: 1; } } @keyframes header-load-toAnimation { 0% { transform: translate3d(90px, 0, 0); opacity: 0.1; } 100% { transform: translate3d(0%, 0, 0); opacity: 1; } } .header-load-to.animation-reverse { -webkit-animation: header-load-toAnimationReverse 750ms forwards; animation: header-load-toAnimationReverse 750ms forwards; } @-webkit-keyframes header-load-toAnimationReverse { 100% { -webkit-transform: translate3d(90px, 0, 0); opacity: 0.1; } 0% { -webkit-transform: translate3d(0%, 0, 0); opacity: 1; } } @keyframes header-load-toAnimationReverse { 100% { transform: translate3d(90px, 0, 0); opacity: 0.1; } 0% { transform: translate3d(0%, 0, 0); opacity: 1; } } .header-unload-to { -webkit-animation: header-unload-toAnimation 500ms forwards; animation: header-unload-toAnimation 500ms forwards; } @-webkit-keyframes header-unload-toAnimation { 0% { -webkit-transform: translate3d(-90px, 0, 0); opacity: 0.1; } 100% { -webkit-transform: translate3d(0%, 0, 0); opacity: 1; } } @keyframes header-unload-toAnimation { 0% { transform: translate3d(-90px, 0, 0); opacity: 0.1; } 100% { transform: translate3d(0%, 0, 0); opacity: 1; } } .header-unload-to.animation-reverse { -webkit-animation: header-unload-toAnimationReverse 750ms forwards; animation: header-unload-toAnimationReverse 750ms forwards; } @-webkit-keyframes header-unload-toAnimationReverse { 100% { -webkit-transform: translate3d(-90px, 0, 0); opacity: 0.1; } 0% { -webkit-transform: translate3d(0%, 0, 0); opacity: 1; } } @keyframes header-unload-toAnimationReverse { 100% { transform: translate3d(-90px, 0, 0); opacity: 0.1; } 0% { transform: translate3d(0%, 0, 0); opacity: 1; } } @-ms-viewport { width: device-width; } body .afPopup { border: solid 1px #33B5E5; border-radius: 5px; background: inherit; color: inherit; } body .afPopup > FOOTER > A { width: 120px; } body #af_actionsheet { background: #0190d6; color: inherit; } body #af_actionsheet a { border-radius: 0; color: black; background: white; border: none; text-shadow: none; } .view header { background: #0088d1; border: none; border-bottom: 1px solid #0088d1; color: #ffffff; } .view header h1 { text-shadow: none; width: 45%; } .view header .backButton { background: #f9f9f9; color: #fff; display: block; line-height: 44px; left: 25px; text-overflow: ellipsis; font-size: 14px; padding: 0; text-shadow: none; background-color: transparent; border: none; border-color: transparent; height: 44px; top: 0; border-radius: 0; box-shadow: none; margin: 0; padding-left: 0; text-align: center; width: 50px; padding: 0 !important; margin: 0 !important; position: absolute; } .view footer { background: #0088d1; border: none; border-top: 1px solid #0088d1; box-shadow: none; } .view footer > a { color: #ffffff; } .view footer > a.pressed:not(.button) { border-radius: 0; background-color: #00AEEF; } .view footer > a.icon.pressed:not(.button):before { color: inherit; } .backButton::before { z-index: -1; font-size: 22px; position: absolute; top: -2px; left: -30px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform: rotate(180deg); transform: rotate(180deg); background-color: transparent; padding: 12px; } .af-badge { border: none; box-shadow: none; } .list { background: inherit; color: inherit; border-color: #303030; font-weight: normal; } .list .divider { color: black; } .list > li > a:after { color: #0088D1; } .panel { color: inherit; background: inherit; } .panel h2 { color: #0088D1; } .collapsed:after { border-top: 6px solid; } .collapsed:before { border: 2px solid; } .expanded:after { border-bottom: 6px solid; } .expanded:before { border: 2px solid; } .collapsed:before, .expanded:before { border-color: inherit; } .collapsed:after, .expanded:after { border-top-color: inherit; } select, textarea, input[type="text"], input[type=search], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], .input-group { background: inherit; color: inherit; } input.toggle + label:after { color: inherit; } input.toggle + label { border-radius: 0; } input.toggle + label > span { border-radius: 0; top: 0; width: 27px; height: 23px; } label { color: inherit; } input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before { background: #33B5E5; } .button { border-radius: 0; text-shadow: none; } .button.previous { border: none; } .button.next { border: none; } .button.previous::after { color: black; z-index: -1; font-size: 22px; position: absolute; top: 2px; left: -25px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform: rotate(180deg); transform: rotate(180deg); background-color: transparent; } .button.next::after { color: black; z-index: -1; font-size: 22px; position: absolute; top: 6px; right: -25px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; background-color: transparent; } #af_actionsheet { position: absolute; left: 0px; right: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin: auto; background: black; float: left; z-index: 9999; border-top: #fff 1px solid; background: rgba(71, 71, 71, 0.95); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)), color-stop(0.08, rgba(255, 255, 255, 0.1)), color-stop(0.08, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0) 8%); box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.4); bottom: 0px; } #af_actionsheet a { text-decoration: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; text-shadow: 0px -1px rgba(0, 0, 0, 0.8); padding: 0px .25em; border: 1px solid rgba(0, 0, 0, 0.8); text-overflow: ellipsis; border-radius: .75em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7); display: block; color: white; text-align: center; line-height: 36px; font-size: 20px; font-weight: bold; margin-bottom: 10px; background-color: #828282; } #af_actionsheet a.selected { background-color: #969696; } #af_actionsheet a.cancel { background-color: #2b2b2b; color: white; } #af_actionsheet a.cancel.selected { background-color: #494949; } #af_actionsheet a.red { color: white; background-color: #cc0000; } #af_actionsheet a.red.selected { background-color: #ff0000; } #mask { display: block; width: 100%; height: 100%; background: #000; z-index: 999999; position: fixed; top: 0; left: 0; } .afPopup { display: block; width: 280px; float: left; border: solid 1px #72767b; border-radius: 10px; padding: 10px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); position: absolute; z-index: 1000000; top: 50%; left: 50%; margin: 0px auto; background: #464646; color: white; } .afPopup > * { color: inherit; } .afPopup > HEADER { font-weight: bold; font-size: 20px; margin: 0; padding: 5px; } .afPopup > DIV { font-size: 14px; margin: 8px; } .afPopup > FOOTER { width: 100%; text-align: center; display: block !important; } .afPopup > FOOTER > A#cancel { float: left; } .afPopup > FOOTER > A#action { float: right; } .afPopup > FOOTER > A.center { float: none!important; width: 80%; margin: 8px; } .afPopup.hidden { opacity: 0; -webkit-transform: scale(0.1); } .afPopup.show { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #splashscreen { position: absolute; top: 0; bottom: 0; width: 100%; left: 0; min-height: 120%; background: #1d1d1c !important; color: white !important; font-size: 30px; text-align: center; z-index: 9999; display: block; margin-left: auto !important; margin-right: auto !important; padding-top: 80px !important; } .ui-icon { background: #666; background: rgba(0, 0, 0, 0.4); background-repeat: no-repeat; } .ui-loader { display: none; margin: 10px; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -100px; margin-top: -35px; padding: 10px 30px; background: #666; background: rgba(0, 0, 0, 0.4); color: white; } .ui-loader h1 { font-size: 15px; text-align: center; } .ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 10px auto; width: 35px; height: 35px; background-color: #eee; } .ui-loader.heavy { opacity: 1; } .spin { -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; transform: rotate(360deg); animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ui-icon-loading { width: 40px; height: 40px; border-left: 2px solid #ccc; border-right: 2px solid #ccc; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; background: white; border-radius: 10px; } .ui-corner-all { border-radius: .6em; } .swipe-reveal .swipe-hidden { position: absolute; right: 0px; top: 0px; z-index: 1; bottom: 0px; } .swipe-reveal .swipe-content { position: relative; display: block; color: inherit; margin: -20px -20px -20px -10px; text-decoration: none; padding: 20px 20px 20px 10px; background: inherit; z-index: 2; } .swipe-hidden .button, .swipe-hidden .button.pressed { display: inline-block; height: 100%; background: #ccc !important; color: white; border-radius: 0 !important; border: none; padding: 20px 15px; margin: 0; float: left; color: white !important; } .swipe-hidden .archive, .swipe-hidden .archive.pressed { background: red !important; } .afToast { width: auto; border: solid 1px #72767b; z-index: 1000000; margin: 0px auto; background: #464646; color: white; opacity: 0.95; height: auto; font-size: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: left; line-height: 46px; margin: 5px 10px; border-radius: 5px; overflow: hidden; } .afToast > * { color: inherit; } .afToast > DIV { font-size: 16px; margin: 8px; } .afToast.hidden { opacity: 0.1; height: 5px; overflow: hidden; } .afToastContainer { position: absolute; top: 0px; left: 0px; z-index: 99999; } .afToast.success { background: #499349; } .afToast.error { background: #AA312A; } .afToast.warning { background: #DF8505; } .afToastContainer.br { bottom: 0px; right: 0px; top: auto; left: auto; } .afToastContainer.bl { bottom: 0px; left: 0px; top: auto; right: auto; } .afToastContainer.tl { top: 0px; left: 0px; right: auto; bottom: auto; } .afToastContainer.tr { top: 0px; right: 0px; left: auto; bottom: auto; } .afToastContainer.tc { top: 0px; right: 0px; bottom: auto; left: 0px; } .afToastContainer.bc { top: auto; right: 0px; bottom: 0px; left: 0px; } .af-badge { position: absolute; top: 2px; right: 2px; display: inline-block; min-width: 20px; max-width: 90%; height: 20px; padding: 0 3px; background-color: red; border-radius: 20px; font-size: 12px; line-height: 19px; font-weight: bold; color: #fff; text-overflow: ellipsis; text-align: center; text-shadow: 0 -1px 0 rgba(64, 0, 0, 0.6); } .af-badge.br { bottom: 2px; right: 2px; top: auto; left: auto; } .af-badge.bl { bottom: 2px; left: 2px; top: auto; right: auto; } .af-badge.tl { top: 2px; left: 2px; right: auto; bottom: auto; } .button { position: relative; display: inline-block; padding: 8px 12px; margin: 8px 0; font-weight: bold; color: #000; text-align: center; vertical-align: top; cursor: pointer; background-color: #eee; border: 1px solid #666; text-decoration: none; z-index: 2; } .button.pressed { background: #fff; } .button.previous { margin-left: 16px; padding-left: 6px; border-color: #666 #666 transparent transparent !important; } .button.next { border-color: #666 transparent #666 #666 !important; margin-right: 16px; padding-right: 6px; } .button.previous::after { z-index: -1; content: ''; position: absolute; width: 25px; height: 27px; background-color: inherit; top: 3px; left: -11px; border-radius: 5px; border: 1px solid; border-color: transparent transparent inherit transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .button.next::after { z-index: -1; content: ''; position: absolute; width: 25px; height: 27px; background-color: inherit; top: 3px; right: -11px; border-radius: 5px; border: 1px solid; border-color: transparent transparent transparent transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .button.block { display: block; } .button.flat { border-radius: 0; box-shadow: none; } .header .button-grouped > .button { margin: 0; border-color: #fff; } .header .button { color: #fff; background: none; border-color: transparent; font-size: 12px; padding: 7px; height: 32px; margin: 5px; text-overflow: ellipsis; white-space: nowrap; } .header .button.icon:before { padding-left: 6px; } .button-grouped { display: inline-block; margin: 5px; } .button-grouped * { border-radius: 0px; float: left; border-left: 0px solid transparent; border-right: 1px solid #666; border-bottom: 1px solid #666; border-top: 1px solid #666; margin: 0; } .button-grouped > .button:first-child { border-left: 1px solid #666; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .button-grouped > .button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .button-grouped.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .button-grouped.flex > .button { -webkit-box-flex: 1; -moz-box-flex: 1 auto; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .button-grouped.flex.vertical { display: inline-block; } .button-grouped.vertical * { border-radius: 0px; display: block; float: none; width: 100%; border-left: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #666; border-bottom: 0px solid #666; } .button-grouped.vertical > .button:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .button-grouped.vertical > .button:last-child { border-top-right-radius: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom: 1px solid #666; } .button.gray { background: #999; border-color: #666; } .button.yellow { background-color: #F1C222; border-color: #999; } .button.red { color: #fff; text-shadow: 0 -1px 0 #666666; background: #B20000; border-color: #666; } .button.green { color: #fff; text-shadow: 0 -1px 0 #666666; background: #009C0C; border-color: #666; } .button.orange { color: #fff; text-shadow: 0 -1px 0 #666666; background-color: #FF8000; border-color: #666; } .button.black { color: #fff; text-shadow: none; background: #000; border-color: #666; } .button.slate { color: #fff; text-shadow: 0 -1px 0 #000000; background: #171F28; border-color: #666; } .backButton { text-overflow: ellipsis; white-space: nowrap; } select, textarea, input[type="text"], input[type=search], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], .input-group { width: 100%; height: 40px; padding: 10px; margin-bottom: 10px; background: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-weight: normal; -webkit-appearance: none; box-sizing: border-box; } form { position: relative; } input[type="radio"], input[type="checkbox"] { display: none; } input[type="radio"] + label, input[type="checkbox"] + label { display: inline-block; width: 60%; float: right; position: relative; text-align: left; padding: 13px 0 0 8px; margin-top: 3px; } input[type="radio"]:not(.toggle) + label:before { background-color: #fafafa; border: 1px solid #cacece; border-radius: 3px; display: block; position: absolute; top: 8px; left: -25px; height: 28px; width: 28px; font-size: 13px; text-align: center; line-height: 28px; content: " "; } input[type="radio"]:checked + label:before { background-color: #1eb0e9; -webkit-transition: background-color 150ms; transition: background-color 150ms; } input[type="checkbox"] + label:before { background-color: #fafafa; border: 1px solid #cacece; border-radius: 3px; display: block; position: absolute; top: 8px; left: -25px; height: 28px; width: 28px; font-size: 13px; text-align: center; line-height: 28px; content: " "; } input[type="checkbox"]:checked + label:before { content: '\00a0\2714'; padding: 0px; display: inline-block; background-color: #1eb0e9; -webkit-transition: background-color 150ms; transition: background-color 150ms; } input[type="radio"]:after, input[type="checkbox"]:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } input[type="search"] { border-radius: 20px; } label { float: left; width: 33%; font-weight: normal; font-size: 14px; color: inherit; text-align: right; padding: 15px 18px; } label + select, label + input[type="radio"], label + input[type="checkbox"] label + textarea, label + input[type="text"], label + input[type=search], label + input[type="password"], label + input[type="datetime"], label + input[type="datetime-local"], label + input[type="date"], label + input[type="month"], label + input[type="time"], label + input[type="week"], label + input[type="number"], label + input[type="email"], label + input[type="url"], label + input[type="tel"], label + input[type="color"], label + textarea { width: 66%; } textarea { height: auto; } .input-group { width: auto; height: auto; padding: 12px; overflow: hidden; } .input-group input:not([type='button']):not([type='submit']), .input-group textarea, .input-group select { margin-bottom: 0; background-color: transparent; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; } .input-group input:not([type="submit"]):not([type="button"]):last-child, .input-group textarea:last-child, .input-group select:last-child { border-bottom: none; } .input-group input[type=button], .input-group input[type=submit] { margin: 5px; } input.toggle + label:before, input.toggle:checked + label:before { content: attr(data-on); position: absolute; color: #fff; left: 5px; width: 42px; text-align: left; z-index: 3; top: 0px; overflow: hidden; background-color: transparent; border: none; border-radius: 0px; text-transform: uppercase; display: none; height: 30px; line-height: 29px !important; } input.toggle:checked + label:before { display: block; } input.toggle:checked + label:after { display: none; } input.toggle:checked + label { background: #1eb0e9; line-height: -1em; -webkit-transition: background 150ms; transition: background 150ms; } input.toggle:checked + label > span { transform: translate3d(37px, 0, 0); -webkit-transform: translate3d(37px, 0, 0); } input.toggle + label:after { content: attr(data-off); position: absolute; color: #505050; width: 42px; text-align: left; z-index: 1; top: 0px; left: 30px; overflow: hidden; background-color: transparent; border: none; border-radius: 0px; text-transform: uppercase; height: 30px; line-height: 29px; } input.toggle + label { position: relative; margin: 5px; border-radius: 50px; display: block; height: 30px; width: 65px; border: 1px solid #ccc; left: 33%; float: none; } input.toggle + label > span { display: block; width: 29px; height: 31px; background: #ccc; border-radius: 50px; z-index: 5; top: -2px; left: 0px; position: absolute; transition: transform 100ms linear; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 100ms linear; } .formGroupHead { font-size: 18px; font-weight: bold; color: inherit; margin: 16px 0 8px; } input[type=button], input[type=submit], button { font-size: inherit; } .grid { width: 100%; overflow: hidden; } .col2, .col3, .col1-3, .col2-3 { float: none; width: 100%; } .grid:after { content: ''; clear: both; } @media handheld, only screen and (min-width: 768px) { .col2 { width: 50%; float: left; } .col3 { width: 33.3%; float: left; } .col1-3 { width: 33.3%; float: left; } .col2-3 { width: 66.6%; float: left; } } .list { margin: 0px; padding: 0px; list-style: none; background-color: #fff; margin: 0 -10px; box-sizing: border-box; -webkit-box-sizing: border-box; } .list li { display: block; list-style: none; position: relative; padding: 20px 20px 20px 10px; border-bottom: 1px solid #ccc; background: inherit; } .list li:first-child { /* border-top: 1px solid #ccc;*/ } .list > li > a { position: relative; display: block; color: inherit; margin: -20px -20px -20px -10px; text-decoration: none; padding: 20px 20px 20px 10px; } .list > li > a:after, .list > li .chevron:after { position: absolute; right: 8px; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; top: 50%; margin-top: -0.5em; color: inherit; } .list a .af-badge { position: absolute; right: 30px; top: 48%; margin-top: -10px; } .list .divider { position: relative; top: -1px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; font-weight: bold; line-height: 18px; background-color: #dfe0e2; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); padding-right: 60px; } .list.inset { border: 1px solid #ccc; border-radius: 6px; margin: 10px; } .list.inset li:first-child { border-top: none; margin-top: 3px; } .list.inset li:last-child { border-bottom: none; margin-bottom: 3px; } @media handheld, only screen and (min-width: 768px) { .splitview > *:not(nav) { margin-left: 256px; z-index: 9; -webkit-transform: none !important; transform: none !important; -webkit-animation: none !important; animation: none !important; } .splitview > nav { left: 0px !important; width: 256px !important; display: block !important; z-index: 10; -webkit-animation: none !important; animation: none !important; } .splitview header .menuButton { display: none !important; } } header .menuButton { position: relative; top: 5px; right: -8px; height: 36px; width: 36px; z-index: 2; float: right; } header .menuButton:after { border-bottom: 9px double white; border-top: 3px solid white; top: 9px; left: 3px; content: ""; height: 15px; position: absolute; width: 15px; }