chui-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +1 -0
  7. data/chui-rails.gemspec +23 -0
  8. data/lib/chui/rails.rb +7 -0
  9. data/lib/chui/rails/version.rb +5 -0
  10. data/vendor/assets/images/app-icons/app.png +0 -0
  11. data/vendor/assets/images/app-icons/browser.png +0 -0
  12. data/vendor/assets/images/app-icons/mail.png +0 -0
  13. data/vendor/assets/images/app-icons/music.png +0 -0
  14. data/vendor/assets/images/app-icons/weather.png +0 -0
  15. data/vendor/assets/images/icons/Camera.svg +55 -0
  16. data/vendor/assets/images/icons/Documents.svg +71 -0
  17. data/vendor/assets/images/icons/Download.svg +8 -0
  18. data/vendor/assets/images/icons/Favorite.svg +25 -0
  19. data/vendor/assets/images/icons/Head_phones.svg +32 -0
  20. data/vendor/assets/images/icons/android.svg +15 -0
  21. data/vendor/assets/images/icons/arrow_down.svg +6 -0
  22. data/vendor/assets/images/icons/arrow_left.svg +6 -0
  23. data/vendor/assets/images/icons/arrow_right.svg +6 -0
  24. data/vendor/assets/images/icons/arrow_up.svg +6 -0
  25. data/vendor/assets/images/icons/down.svg +13 -0
  26. data/vendor/assets/images/icons/left.svg +13 -0
  27. data/vendor/assets/images/icons/right.svg +13 -0
  28. data/vendor/assets/images/icons/up.svg +13 -0
  29. Harm.jpg +0 -0
  30. data/vendor/assets/images/music/Imagine Dragons.jpg +0 -0
  31. data/vendor/assets/images/music/Kiss.jpg +0 -0
  32. data/vendor/assets/images/music/Permanent.jpg +0 -0
  33. data/vendor/assets/images/music/The Olms.jpg +0 -0
  34. data/vendor/assets/images/music/Willy Moon.jpg +0 -0
  35. data/vendor/assets/javascripts/chui-3.7.0.js +2796 -0
  36. data/vendor/assets/javascripts/chui-3.7.0.min.js +9 -0
  37. data/vendor/assets/stylesheets/chui-android-3.7.0.css +2970 -0
  38. data/vendor/assets/stylesheets/chui-android-3.7.0.min.css +8 -0
  39. data/vendor/assets/stylesheets/chui-ios-3.7.0.css +2614 -0
  40. data/vendor/assets/stylesheets/chui-ios-3.7.0.min.css +8 -0
  41. data/vendor/assets/stylesheets/chui-win-3.7.0.css +2375 -0
  42. data/vendor/assets/stylesheets/chui-win-3.7.0.min.css +8 -0
  43. metadata +113 -0
@@ -0,0 +1,8 @@
1
+ /*
2
+ ChocolateChip-UI
3
+ ChUI-Android.css
4
+ Copyright 2014 Sourcebits www.sourcebits.com
5
+ License: MIT
6
+ Version: 3.7.0
7
+ */
8
+ .attentionGrapper{color:#007aff!important}body,html{padding:0;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-font-smoothing:subpixel-antialiased}body{background-color:#fafafa;font:100 14px/18px Roboto,SegoeWP,HelveticaNeue,Sans-serif;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}article{position:absolute;top:52px;right:0;bottom:0;left:0;padding-top:1px;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.hide-navbars article{top:0}.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:visible}.next{-webkit-transform:translate3d(105%,0,0);-moz-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0);visibility:hidden}.previous{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}html[dir=rtl] .current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}html[dir=rtl] .next{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] .previous{-webkit-transform:translate3d(105%,0,0);-moz-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0)}.scroller-horizontal,.scroller-vertical{-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;padding-bottom:100px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroller-horizontal{overflow-y:hidden;overflow-x:auto}.scroller-vertical,article>section{padding-top:10px;padding-bottom:100px;min-height:100%;width:100%}.scroller-vertical>:last-child::after,article>section>:last-child::after{margin-bottom:100px}.vertical,li.comp>aside.vertical{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.horizontal{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.horizontal.centered{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}@-webkit-keyframes animate-icon{0%{box-shadow:inset 0 0 0 0 rgba(255,255,255,.25)}65%{box-shadow:inset 0 0 5px 30px rgba(255,255,255,.25)}100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,.25)}}@-webkit-keyframes focused{0%{background-size:0 0}100%{background-size:300% 200%}}.align-flush{position:absolute;top:auto;bottom:auto;right:10px;left:auto}a.button{box-shadow:none;border:none;color:#2d2d2d;display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;font-size:12px;height:40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;margin:0 10px;position:relative;cursor:pointer;text-align:center;text-decoration:none;padding:12px 20px 10px;text-transform:uppercase;font-family:'Roboto Regular',HeveticaNeue,Sans-serif;border-radius:2px;-webkit-transition:all .35s ease-out;-moz-transition:all .35s ease-out;transition:all .35s ease-out;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease-out;animation-duration:.5s;animation-timing-function:ease-out;background-image:-webkit-radial-gradient(rgba(0,0,0,.125) 50%,rgba(0,0,0,0) 60%);background-size:0 0;background-repeat:no-repeat;background-position:center center;-webkit-animation-fill-mode:forwards}a.button:hover{-webkit-animation-name:focused;animation-name:focused}a.button.no-border{border:none!important}a.button.action{color:#2d2d2d;background-color:#e0e0e0;margin:0 auto;width:auto;height:40px;min-width:200px;max-width:300px;box-shadow:0 1px 4px #666}section>a.button.action.action{margin-left:16px}.isDesktop a.button.action:hover{box-shadow:0 3px 7px #666;background-color:#cecece}a.button.back,a.button.backTo{text-align:left;padding:0 12px!important;margin:0 16px 0 0;line-height:28px;color:#eaeaea;font-size:0;border:none;background-color:transparent;border-radius:50%;width:40px;height:40px;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-animation-delay:.5s}a.button.back::after,a.button.backTo::after{content:'';display:block;width:40px;height:40px;position:absolute;left:0;top:0;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22120px%22%20height%3D%22120px%22%20viewBox%3D%220%200%20120%20120%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22BackButton%22%20stroke-linecap%3D%22square%22%20stroke%3D%22%23000000%22%20stroke-width%3D%228%22%3E%3Cg%20id%3D%22Line-2-+-Line-+-Line%22%20transform%3D%22translate%2815.000000,%2022.000000%29%22%3E%3Cpath%20d%3D%22M0.62909796,38.5%20L37.1384668,76.3699524%22%20id%3D%22Line-2%22%3E%3C/path%3E%3Cpath%20d%3D%22M89.3478261,39%20L3.2313744,39%22%20id%3D%22Line%22%3E%3C/path%3E%3Cpath%20d%3D%22M0.62909796,38.5%20L37.1384668,0.63004759%22%20id%3D%22Line%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:90% 90%;background-repeat:no-repeat}.isDesktop a.button.back:hover,.isDesktop a.button.backTo:hover{background-color:rgba(0,0,0,.35)!important;-webkit-animation:animate-icon .5s none}.isDesktop a.button.back:hover::after,.isDesktop a.button.backTo:hover::after{background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22120px%22%20height%3D%22120px%22%20viewBox%3D%220%200%20120%20120%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22BackButton%22%20stroke-linecap%3D%22square%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%228%22%3E%3Cg%20id%3D%22Line-2-+-Line-+-Line%22%20transform%3D%22translate%2815.000000,%2022.000000%29%22%3E%3Cpath%20d%3D%22M0.62909796,38.5%20L37.1384668,76.3699524%22%20id%3D%22Line-2%22%3E%3C/path%3E%3Cpath%20d%3D%22M89.3478261,39%20L3.2313744,39%22%20id%3D%22Line%22%3E%3C/path%3E%3Cpath%20d%3D%22M0.62909796,38.5%20L37.1384668,0.63004759%22%20id%3D%22Line%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important}body.isChrome a.button.back,body.isChrome a.button.backTo{top:6px}body.isNativeAndroidBrowser a.button.back,body.isNativeAndroidBrowser a.button.backTo{top:0;bottom:0}body.isNativeAndroidBrowser a.button.back::after,body.isNativeAndroidBrowser a.button.backTo::after{top:-2px}body.isNativeAndroidBrowser a.button.backTo::after{top:2px}body.isNativeAndroidBrowser a.button.back::before{top:8px}html[dir=rtl] a.button{line-height:12pt}html[dir=rtl] a.button.back,html[dir=rtl] a.button.backTo{margin:0 0 0 16px}html[dir=rtl] a.button.back::after,html[dir=rtl] a.button.backTo::after{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);right:auto}html[dir=rtl] a.button.align-flush{left:10px;right:auto}#global-nav{background-color:#eaeaea;overflow:hidden;box-shadow:0 1px 2px #666}nav{height:50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;display:flex;text-align:center;position:absolute;top:0;left:0;right:0;-webkit-transition:opacity .5s ease-in;-moz-transition:opacity .5s ease-in;transition:opacity .5s ease-in;padding:0 10px;vertical-align:middle}nav>h1{text-align:left;display:inline-block;margin:0 16px 0 8px;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;font:100 16pt/36pt Roboto,SegoeWP,HelveticaNeue,Sans-serif!important;position:relative;z-index:-1;white-space:nowrap;overflow:hidden;color:#000}nav>h1+a.button{margin:5px 0 0;position:absolute;top:0;right:16px}nav>a.button,nav>div>a.button{position:relative;color:#000!important}nav>a.button:hover,nav>div>a.button:hover{background-color:rgba(0,0,0,.25)!important;color:#000!important}.isDesktop nav .back:hover,.isDesktop nav .backTo:hover{background-color:#000!important;-webkit-animation:animate-icon .5s none;color:#000}html[dir=rtl] nav>h1{text-align:right;margin-right:8px}.list{list-style:none;margin:16px 0 0;padding:0;border-top:solid 1px #cbcbcb;border-bottom:solid 1px #cbcbcb;background-color:#fff}.list>li{padding:13px 16px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out;position:relative;background-color:#fff;font-size:12pt;border-bottom:solid 1px #cbcbcb}.list>li.nav::after{display:block;content:'';width:7px;height:7px;border-right:solid 3px #666;border-top:solid 3px #666;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);float:right;position:absolute;top:16px;right:15px;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;transition:all .4s ease-out}.list>li.show-detail::after{content:'i';display:block;width:22px;height:20px;border-radius:20px;border:1px solid #007aff;color:#007aff;font:700 14px/0 Roboto,SegoeWP,HelveticaNeue,Sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 8px;position:absolute;top:10px;right:16px}.list+.button{margin-top:20px!important}h2+.list{margin-top:0}p{font-family:'Roboto Regular',HeveletcaNeue,Helvetica,sans-serif}.list~p{margin:10px 16px 0}.list~p+p{margin-top:5pt}.isDesktop .list.select>li:hover,.isDesktop .list>li[data-goto]:hover,.isDesktop li[data-show-article]:hover,.list>li[data-goto].touched,li[data-show-article].touched{cursor:pointer;background-color:#007aff}.isDesktop .list.select>li:hover div,.isDesktop .list.select>li:hover h3,.isDesktop .list.select>li:hover h4,.isDesktop .list.select>li:hover h5,.isDesktop .list.select>li:hover p,.isDesktop .list.select>li:hover span,.isDesktop .list>li[data-goto]:hover div,.isDesktop .list>li[data-goto]:hover h3,.isDesktop .list>li[data-goto]:hover h4,.isDesktop .list>li[data-goto]:hover h5,.isDesktop .list>li[data-goto]:hover p,.isDesktop .list>li[data-goto]:hover span,.isDesktop li[data-show-article]:hover div,.isDesktop li[data-show-article]:hover h3,.isDesktop li[data-show-article]:hover h4,.isDesktop li[data-show-article]:hover h5,.isDesktop li[data-show-article]:hover p,.isDesktop li[data-show-article]:hover span,.list>li[data-goto].touched div,.list>li[data-goto].touched h3,.list>li[data-goto].touched h4,.list>li[data-goto].touched h5,.list>li[data-goto].touched p,.list>li[data-goto].touched span,li[data-show-article].touched div,li[data-show-article].touched h3,li[data-show-article].touched h4,li[data-show-article].touched h5,li[data-show-article].touched p,li[data-show-article].touched span{color:#fff}.isDesktop .list.select>li:hover .nav::after,.isDesktop .list>li[data-goto].nav:hover::after,.isDesktop .list>li[data-goto]:hover .nav::after,.isDesktop li[data-show-article]:hover .nav::after,.list>li[data-goto].touched .nav::after,li[data-show-article].touched .nav::after{border-color:#fff}.isDesktop .list>li[data-goto].show-detail:hover::after,.isDesktop .list>li[data-goto]:hover .show-detail::after{border:1px solid #fff;color:#fff}.list>li{color:#2d2d2d}.list>li>h3,.list>li>h4{width:80%;font-weight:200;margin:0}.list>li h3{font-family:'Roboto Thin','HeveletcaNeue Light',Helvetica,sans-serif;font-weight:400;font-size:16pt;line-height:20pt;margin-bottom:2px;color:#2d2d2d}.list>li h4{font-family:'Roboto Regular',HeveletcaNeue,Helvetica,sans-serif;font-weight:400;line-height:14pt;color:#2d2d2d}.list>li>div>h4,.list>li>div>p,.list>li>h4,.list>li>p{font-size:13pt;line-height:16pt;margin:0}.list>li>div>p,.list>li>p{font-size:13pt;line-height:16pt}.list>li>div>p+p,.list>li>p+p{margin-top:6px}.list>li+.button.action{margin-top:40px}.list>li>p{margin:6px 16px 6px 0;font-size:13pt;line-height:16pt;color:#666}section h2{font:400 11pt/12pt 'Roboto Regular',SegoeWP,HelveticaNeue,Sans-serif;color:#4d4d4d;margin:26px 0 6px;padding-left:16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:6px}section h2.normal-case{text-transform:none}html[dir=rtl] section h2{padding-right:16px}html[dir=rtl] li{padding:13px 16px}html[dir=rtl] li>h3,html[dir=rtl] li>h4{text-align:right}html[dir=rtl] li>p{margin-right:0}html[dir=rtl] .list>li.nav::after{right:auto;left:16px;border:none;border-left:solid 3px #666;border-bottom:solid 3px #666}html[dir=rtl] li.show-detail::after{left:16px;right:auto}li.comp{-webkit-box-orient:horizontal;-webkit-box-align:stretch;-display:flex;-webkit-direction:row;-webkit-align-items:stretch;display:flex;direction:row;align-items:stretch;padding-bottom:0}li.comp.wrap>div>h3,li.comp.wrap>div>h4{white-space:wrap;overflow:visible}li.comp>div{-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;padding:0 0 10px}li.comp>div:first-child{padding:8px 0 10px;min-width:48%}li.comp>div:first-child+aside>h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}li.comp>div:first-child+aside>h4:nth-child(1){max-width:100%!important}li.comp>div>div>h3,li.comp>div>div>h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Roboto Thin',SegoeWP,HelveticaNeue,Sans-serif;font-weight:200}li.comp>div>h3{font-family:'Roboto Thin',SegoeWP,HelveticaNeue,Sans-serif;line-height:20pt;margin:0 0 10px;font-weight:200}li.comp>div>h4{margin:0}li.comp>aside{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;padding:0 0 10px}li.comp>aside:first-child{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;margin-right:10px;padding:0 0 10px}li.comp>aside>h4{margin:0;font-weight:400;color:#666}li.comp>aside>label,li.comp>aside>span{display:inline-block;margin-left:6px}li.comp>aside>.nav{display:block;width:12px;height:12px}li.comp>aside>.nav::after{display:block;content:'';width:7px;height:7px;border-right:solid 3px #666;border-top:solid 3px #666;-webkit-transform:rotate(45deg) translate3d(2px,-2px,0);-moz-transform:rotate(45deg) translate3d(2px,-2px,0);transform:rotate(45deg) translate3d(2px,-2px,0)}li.comp>aside>.show-detail{display:inline-block;margin-bottom:-4px}li.comp>aside>.show-detail::after{content:'i';display:block;width:22px;height:20px;border-radius:20px;border:1px solid #007aff;color:#007aff;font:700 14px/0 Roboto,Times,serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 8px;float:right;margin:-20px 0 0}li.comp:last-of-type>aside:last-child{border:none}p{color:#707070;font-size:13pt;line-height:16pt}html[dir=rtl] li.comp{padding:13px 16px}html[dir=rtl] li.comp>aside:first-child{margin-right:0;padding:0 0 10px 10px}html[dir=rtl] li.comp>aside:last-child{margin-right:10px}html[dir=rtl] li.comp aside>span.counter,html[dir=rtl] li.comp aside>span.date-time{margin-right:5px;margin-left:5px;white-space:nowrap}html[dir=rtl] li.comp aside>span.nav{margin-left:4px;margin-right:0}html[dir=rtl] li.comp aside>span.nav::after{right:auto;left:16px;border:none;border-left:solid 3px #666;border-bottom:solid 3px #666}html[dir=rtl] li.comp aside>h4{margin-left:5px;width:90%}html[dir=rtl] li.comp div>h3+h4{text-align:right!important}@media only screen and (max-device-width:320px) and (orientation:portrait){li.comp>aside>h4{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media only screen and (max-width:480px) and (orientation:portrait){li.comp>div:first-child+aside>h4:nth-child(1){max-width:45%!important;flex:1}li.comp>div:first-child+aside{-webkit-box-pack:end;-webkit-justify-content:end;justify-content:flex-end}}.grid{-webkit-box-orientation:horizontal;-webkit-box-align:stretch;-webkit-flex-direction:row;-webkit-align-items:stretch;-ms-flex-direction:row;-ms-align-items:stretch;display:flex;flex-direction:row;align-items:stretch}.grid.wrap{-webkit-box-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{-webkit-box-flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.grid.center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center}.center .col{-webkit-flex-grow:0;-webkit-flex-shrink:0;-ms-flex-grow:0;-ms-flex-shrink:0;flex-grow:0;flex-shrink:0}.flex-1{-webkit-flex-basis:10%;-ms-flex-basis:10%;flex-basis:10%}.flex-2{-webkit-flex-basis:20%;-ms-flex-basis:20%;flex-basis:20%}.flex-3{-webkit-flex-basis:30%;-ms-flex-basis:30%;flex-basis:30%}.flex-4{-webkit-flex-basis:40%;-ms-flex-basis:40%;flex-basis:40%}.flex-5{-webkit-flex-basis:50%;-ms-flex-basis:50%;flex-basis:50%}.flex-6{-webkit-flex-basis:60%;-ms-flex-basis:60%;flex-basis:60%}.flex-7{-webkit-flex-basis:70%;-ms-flex-basis:70%;flex-basis:70%}.flex-8{-webkit-flex-basis:80%;-ms-flex-basis:80%;flex-basis:80%}.flex-9{-webkit-flex-basis:90%;-ms-flex-basis:90%;flex-basis:90%}.flex-10{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%}.gutter-5 .col{margin:5px}.gutter-10 .col{margin:10px}html[dir=rtl] .grid{-webkit-box-direction:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}@media only screen and (max-width:599px){.grid{-webkit-box-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-wekbit-flex-direction:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0!important}.col.flex-1,.col.flex-2,.col.flex-3,.col.flex-4{-webkit-box-flex:1!important;-webkit-flex:1!important;-ms-flex:1!important;flex:1!important;-webkit-flex-basis:50%;-ms-flex-basis:50%;flex-basis:50%}.col.flex-10,.col.flex-5,.col.flex-6,.col.flex-7,.col.flex-8,.col.flex-9{-webkit-box-flex:2!important;-webkit-flex:2!important;-ms-flex:2!important;flex:2!important}.isWindows .col,.isWindows .grid{display:block}}.segmented:not(.paging){display:-moz-box;display:inline-flex;display:-webkit-inline-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 10px;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important}.segmented:not(.paging).align-flush{position:absolute;right:15px;top:4px}.segmented:not(.paging)>.button{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;border:1px solid #979797;text-align:center!important;border-left:none;border-right:solid 1px #979797;box-shadow:none;font-size:13px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:30px;cursor:pointer;margin:0!important;padding:6px 10px 0!important;border-radius:0}.segmented:not(.paging)>.button:first-of-type{border-left:solid 1px #979797;border-top-left-radius:2px;border-bottom-left-radius:2px}.segmented:not(.paging)>.button:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px}.isDesktop .segmented:not(.paging)>.button:hover,.segmented:not(.paging)>.button.selected{background-color:#007aff;opacity:1!important;box-shadow:none;color:#fff}div.horizontal.centered>.segmented{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;margin:10px 16px;width:100%}html[dir=rtl] .segmented.align-flush{left:15px;right:auto}html[dir=rtl] .segmented:not(.paging)>.button{border-radius:0}html[dir=rtl] .segmented:not(.paging)>.button:first-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-left:none}html[dir=rtl] .segmented:not(.paging)>.button:last-child{border-top-left-radius:2px;border-bottom-left-radius:2px;border-left:solid 1px #979797}.isNativeAndroidBrowser .segmented.paging{top:0!important}.segmented.paging>a.button{top:4px;background:none!important}.segmented.paging.horizontal>a.button{border:none!important;background-color:none!important;margin:0!important;width:30px!important;height:40px!important}.segmented.paging.horizontal>a.button:first-of-type::before,html[dir=rtl] .segmented.paging.horizontal>a.button:last-of-type::before{content:'';display:block;width:16px;height:16px;border-left:solid 3px #000;border-top:solid 3px #000;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:10px;left:14px}.segmented.paging.horizontal>a.button:last-of-type::before,html[dir=rtl] .segmented.paging.horizontal>a.button:first-of-type::before{content:'';display:block;width:16px;height:16px;margin:0!important;border-right:solid 3px #000;border-bottom:solid 3px #000;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:10px;right:16px}html[dir=rtl] .segmented.paging.horizontal>a.button:last-of-type::before{border-right:none;border-bottom:none;right:6px!important;left:0!important}html[dir=rtl] .segmented.paging.horizontal>a.button:first-of-type::before{border-left:none;border-top:none}.segmented.paging.vertical{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row}.segmented.paging.vertical>a.button{margin:0!important;background-color:none!important}.segmented.paging.vertical>a.button:first-of-type::before{content:'';display:block;width:16px;height:16px;border-right:solid 3px #000;border-bottom:solid 3px #000;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:6px;left:10px}.segmented.paging.vertical>a.button:last-of-type::before{content:'';display:block;width:16px;height:16px;border-right:solid 3px #000;border-top:solid 3px #000;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:17px;left:10px}article.paging>section{position:fixed;width:100%;top:0!important;left:0;right:0;bottom:0;opacity:1;padding:10px 0 40px!important;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out;overflow-y:auto;overflow-x:hidden}article.paging.horizontal>section.previous{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}article.paging.horizontal>section.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}article.paging.horizontal>section.next{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}article.paging.vertical>section.previous{-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}article.paging.vertical>section.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}article.paging.vertical>section.next{-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html[dir=rtl] .segmented.paging.horizontal{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;display:-webkit-flex}html[dir=rtl] .segmented.paging.horizontal .button:first-child{-webkit-box-ordinal-group:2;-webkit-order:2;order:2;float:right}html[dir=rtl] .segmented.paging.horizontal .button:last-child{-webkit-box-ordinal-group:1;-webkit-order:1;order:1}html[dir=rtl] article.paging.horizontal>section.previous{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html[dir=rtl] article.paging.horizontal>section.next{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] article.paging.horizontal>section.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.toolbar{position:fixed;bottom:0;left:0;right:0;height:50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box!important;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);padding:0 16px;vertical-align:middle;background-color:#eaeaea;overflow:hidden;border-top:solid 1px #666}.toolbar>.button{color:#000!important}.toolbar>.button:hover{background-color:rgba(255,255,255,.25)}.splitlayout>.master+.toolbar{left:0;width:320px;border-right:solid 1px #c8c8c7!important}.splitlayout>.detail+.toolbar{left:320px}article.has-toolbar{bottom:50px!important}div.toolbar.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}div.toolbar.next{-webkit-transform:translate3d(105%,0,0);-moz-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0)}div.toolbar.previous{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] div.toolbar.current{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}html[dir=rtl] div.toolbar.next{-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] div.toolbar.previous{-webkit-transform:translate3d(105%,0,0);-moz-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0)}html[dir=rtl] .splitlayout>.master+.toolbar{right:0;left:320px;width:320px;border-right:none;border-left:solid 1px #c8c8c7!important}html[dir=rtl] .splitlayout>.detail+.toolbar{right:320px;left:0}body.splitlayout{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:stretch;-moz-box-align:stretch;-webkit-align-items:stretch;align-items:stretch}.splitlayout>nav{background-color:#eaeaea;border-bottom:solid 1px #a7a7aa}.splitlayout>nav:first-of-type{width:320px;border-right:solid 1px #c8c8c7!important}.splitlayout>nav:last-of-type{left:320px}.splitlayout>nav h1{z-index:auto;text-align:left}.splitlayout>article.master{top:50px;left:0;bottom:0;right:320px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:320px;border-right:solid 1px #c8c8c7!important}.splitlayout>article.detail{top:50px;left:320px!important;bottom:0;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important}.master .list>li.selected{background-color:#d9d9d9}html[dir=rtl] body.splitlayout>nav:first-of-type{right:0;left:320px;border-right:none;border-left:solid 1px #c8c8c7!important}html[dir=rtl] body.splitlayout>nav:last-of-type{left:0;right:320px}html[dir=rtl] body.splitlayout>nav>h1{text-align:right}html[dir=rtl] body.splitlayout>article.master{left:320px!important;right:0!important;border-right:none!important;border-left:solid 1px #c8c8c7!important}html[dir=rtl] body.splitlayout>article.detail{right:320px!important;left:0!important}@media only screen and (max-device-width:320px) and (orientation:portrait){.splitlayout>article.master{right:260px!important}.splitlayout>article.detail{left:260px!important}.splitlayout>nav:first-of-type{width:260px!important}.splitlayout>nav:last-of-type{left:260px!important}}.mask{display:block;background-color:rgba(0,0,0,.5);position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:9999;cursor:pointer}.busy{-webkit-animation:spin 1.77s infinite ease-out;-webkit-transform-origin:center center;display:block;position:absolute}.busy circle{-webkit-transform-origin:center center;fill:none;stroke:#4288ef;stroke-width:10;stroke-linecap:round;stroke-dasharray:.001,180;stroke-dashoffset:0;-webkit-animation:loading 1.5s infinite ease-out}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes loading{0%{stroke-dasharray:.001,180;stroke-dashoffset:0}50%{stroke-dasharray:140,140;stroke-dashoffset:20}100%{stroke-dasharray:180,180;stroke-dashoffset:-179}}:not(.isNativeAndroidBrowser) .busy{-webkit-animation:spin 2s infinite linear}.popover{width:300px;background-color:#f5f5f5;box-shadow:0 0 5px #000;border-radius:4px;height:250px;max-height:300px;position:absolute;z-index:111111;margin-top:10px}.popover header{display:none}.popover>section{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:absolute;top:4px;bottom:4px;width:100%;padding-bottom:20px}.isDesktop .popover .list>li.selected,.isDesktop .popover .list>li:hover{background-color:#007aff!important;color:#fff!important}.isDesktop .popover .list>li.selected h3,.isDesktop .popover .list>li.selected h4,.isDesktop .popover .list>li:hover h3,.isDesktop .popover .list>li:hover h4{color:#fff!important}.button.show-popover{position:relative;background-color:transparent!important;border:none!important;padding:6px 22px 2px 10px!important;margin:0 10px!important;box-shadow:none!important;font-size:18px!important}.button.show-popover.align-flush{position:absolute}.button.show-popover.selected{background-color:#007aff}.segmented>a.button.show-popover:first-of-type{border-left:none!important}.button.show-popover::after{content:'';display:block;position:absolute;right:2px;bottom:2px;width:0;height:0;border-right:solid 6px #000;border-bottom:solid 6px #000;border-top:solid 6px transparent;border-left:solid 6px transparent}nav>.button.show-popover::after{border-right:solid 6px #000;border-bottom:solid 6px #000}nav>h1+.button.show-popover.align-flush{margin:8px 0 0!important}html[dir=rtl] .button.show-popover{padding:6px 10px 2px 20px!important}html[dir=rtl] .button.show-popover::after{left:2px;right:auto;border:none;border-left:solid 6px #000;border-bottom:solid 6px #000;border-top:solid 6px transparent;border-right:solid 6px transparent}html[dir=rtl] .button.show-popover+.button{-webkit-box-ordinal-group:1;-webkit-order:1}html[dir=rtl] .isDesktop .button.show-popover:hover::after{border-left:solid 6px #000!important;border-bottom:solid 6px #000;border-top:solid 6px transparent;border-right:solid 6px transparent}.isNativeAndroidBrowser .popup{box-shadow:0 0 6px 4px #666}.isNativeAndroidBrowser .popup>.panel>header{padding-top:1px}.popup{display:block;-webkit-box-sizeing:border-box;width:320px;padding:1px;background-color:#fff;position:absolute;z-index:10000;margin-left:auto;margin-right:auto;box-shadow:0 0 6px 4px #888;border-radius:3px}.popup.opened{display:block;opacity:1;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.popup>.panel{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;padding:4px 16px}.popup>.panel>footer,.popup>.panel>header{display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-moz-box-pack:justify;-webkit-justify-content:justify;justify-content:space-between;-webkit-box-align:stretch;-moz-box-align:stretch;-webkit-align-items:stretch;align-items:stretch}.popup>.panel>header>h1{position:static;text-align:center;margin:0 15px;line-height:32pt;font-weight:700}.popup>footer{width:320px;padding:0;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal!important;-moz-box-orient:horizontal!important;-webkit-flex-direction:row!important;flex-direction:row!important}.popup>footer>.button{display:block!important;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;line-height:30pt;background-color:#fff;color:#666;font-size:12pt;padding-top:4px;max-width:320px!important;font-weight:700;margin:0!important}.popup>footer>.button+.button{border-left:solid 1px #cbcbcb}.isDesktop .popup>footer>.button:hover{box-shadow:none;background-color:#298fff;color:#fff}.popup>p{padding:0 15px;text-align:center}.popup .button{border-top:solid 1px #cbcbcb;box-shadow:none}html[dir=rtl] .popup>footer .button{border-top:solid 1px #cbcbcb}html[dir=rtl] .popup>footer .button:first-child{border-left:solid 1px #cbcbcb}html[dir=rtl] .popup>footer .button:first-child+.button{border-left:none}.list.deletable>li,.list.editable>li{overflow:hidden}.list.deletable>li>.move-down,.list.deletable>li>.move-up,.list.editable>li>.move-down,.list.editable>li>.move-up{width:21px;height:21px;display:inline-block;position:relative;float:right;margin-top:-20px;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:translate3d(100px,0,0);-moz-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}.list.deletable>li>.move-down::before,.list.deletable>li>.move-up::before,.list.editable>li>.move-down::before,.list.editable>li>.move-up::before{display:block;content:'';width:21px;height:21px;position:absolute;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22367px%22%20height%3D%22367px%22%20viewBox%3D%220%200%20367%20367%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Sortable%22%20transform%3D%22translate%2813.000000,%2013.000000%29%22%20stroke%3D%22%23007aff%22%20stroke-width%3D%2225%22%3E%3Ccircle%20id%3D%22Oval-1%22%20cx%3D%22170.5%22%20cy%3D%22170.5%22%20r%3D%22170.5%22%3E%3C/circle%3E%3Cpath%20d%3D%22M55.3736267,209.778395%20L172.745285,100.706186%20L286.306656,209.611568%22%20id%3D%22Path-2%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-size:100% 100%}.list.deletable>li>.move-down,.list.editable>li>.move-down{margin-right:10px!important}.list.deletable>li:first-of-type>.move-up,.list.deletable>li:last-of-type>.move-down,.list.editable>li:first-of-type>.move-up,.list.editable>li:last-of-type>.move-down{opacity:.35}.deletion-indicator{display:-webkit-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:2px 5px 13px 1px;width:24px;height:24px;border:2px solid #007aff;position:absolute;top:14px;left:-32px;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out;cursor:pointer}.isDesktop .deletion-indicator:hover,li.selected>.deletion-indicator{color:#004999!important;background-color:#007aff;box-shadow:0 0 3px 1px rgba(0,122,255,.5);border-color:#007aff}li.selected>.deletion-indicator::before{content:'';display:block!important;width:22px;height:22px;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22140px%22%20height%3D%22144px%22%20viewBox%3D%220%200%20140%20144%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M47.9487979,122.136928%20L92.9487978,122.136928%20L92.9487978,22.1369286%20L81.3308475,22.1369281%20L81.3308475,109.597461%20L47.9487979,109.597462%20L47.9487979,122.136928%20Z%22%20id%3D%22Rectangle-1%22%20fill%3D%22%23ffffff%22%20transform%3D%22translate%2870.448798,%2072.136929%29%20rotate%2835.000000%29%20translate%28-70.448798,%20-72.136929%29%20%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:100% 100%;background-repeat:no-repeat;font-size:24pt;position:relative;top:1px;left:-1px}.isAndroid li.selected>.deletion-indicator::before{margin:-6px 0 0 -2px!important}.isDesktopChrome li.selected>.deletion-indicator::before{margin:-7px 0 0 -2px!important}.list.showIndicators .deletion-indicator{margin-left:40px}.list.showIndicators li{padding-left:38px}.list.showIndicators li>h3{width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list.showIndicators li .move-up{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.list.showIndicators li .move-down{-webkit-transform:translate3d(0,0,0) rotate(180deg);-moz-transform:translate3d(0,0,0) rotate(180deg);transform:translate3d(0,0,0) rotate(180deg)}.list.showIndicators>li.selected>.move-up{margin-right:60px}.list.showIndicators>li.selected>.move-down{margin-right:100px}.button.delete{float:right;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:60px;height:100%;position:absolute;top:0;right:-10px;bottom:0;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out;-webkit-transform:translate3d(60px,0,0);-moz-transform:translate3d(60px,0,0);transform:translate3d(60px,0,0);visibility:hidden;cursor:pointer;font-weight:200;margin-right:0!important;color:transparent;background-color:#eee;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2283px%22%20height%3D%22108px%22%20viewBox%3D%220%200%2083%20108%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle-1%22%20fill%3D%22%233A3A3A%22%20x%3D%225%22%20y%3D%2224%22%20width%3D%2272%22%20height%3D%2284%22%20rx%3D%228%22%3E%3C/rect%3E%3Cpath%20d%3D%22M-0.411132812,17.9316406%20L-0.411132812,6.22558594%20L20.1357422,6.48730469%20L25.3134766,0.25390625%20L57.4667969,0.25390625%20L62.6025391,6.48730469%20L82.9248047,6.48730469%20L82.9248047,17.8554688%20L-0.411132812,17.9316406%20Z%22%20id%3D%22Path-1%22%20fill%3D%22%233A3A3A%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:auto 20px;background-repeat:no-repeat;box-shadow:inset 2px 2px 2px #bbb;border-radius:0;border-bottom:1px solid #bbb;border-right:1px solid #bbb;-webkit-animation-name:none!important;animation-name:none!important}li.selected>.button.delete{display:block;visibility:visible;-webkit-transform:translate3d(-10px,0,0);-moz-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}html[dir=rtl] .list.deletable li>.move-up,html[dir=rtl] .list.editable li>.move-up{float:left!important;-webkit-transform:translate3d(-100px,0,0);-moz-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html[dir=rtl] .list.deletable li>.move-down,html[dir=rtl] .list.editable li>.move-down{float:left!important;-webkit-transform:translate3d(-140px,0,0) rotate(180deg);-moz-transform:translate3d(-140px,0,0) rotate(180deg);transform:translate3d(-140px,0,0) rotate(180deg)}html[dir=rtl] .list.deletable.showIndicators .deletion-indicator,html[dir=rtl] .list.editable.showIndicators .deletion-indicator{margin-left:auto;margin-right:50px}html[dir=rtl] .list.deletable.showIndicators li,html[dir=rtl] .list.editable.showIndicators li{padding-left:0;padding-right:40px}html[dir=rtl] .list.deletable.showIndicators li>.button.delete,html[dir=rtl] .list.editable.showIndicators li>.button.delete{float:left!important;left:0;right:auto;-webkit-transform:translate3d(-60px,0,0);-moz-transform:translate3d(-60px,0,0);transform:translate3d(-60px,0,0);border-right:none;border-left:1px solid #bbb!important;box-shadow:inset -2px 2px 2px #bbb}html[dir=rtl] .list.deletable.showIndicators li.selected>.button.delete,html[dir=rtl] .list.editable.showIndicators li.selected>.button.delete{-webkit-transform:translate3d(-10px,0,0);-moz-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}html[dir=rtl] .list.deletable.showIndicators li>.move-up,html[dir=rtl] .list.editable.showIndicators li>.move-up{-webkit-transform:translate3d(10px,0,0)!important;-moz-transform:translate3d(10px,0,0)!important;transform:translate3d(10px,0,0)!important}html[dir=rtl] .list.deletable.showIndicators li>.move-down,html[dir=rtl] .list.editable.showIndicators li>.move-down{-webkit-transform:translate3d(20px,0,0) rotate(180deg)!important;-moz-transform:translate3d(20px,0,0) rotate(180deg)!important;transform:translate3d(20px,0,0) rotate(180deg)!important}html[dir=rtl] .list.deletable.showIndicators li.selected>.move-up,html[dir=rtl] .list.editable.showIndicators li.selected>.move-up{-webkit-transform:translate3d(90px,0,0)!important;-moz-transform:translate3d(90px,0,0)!important;transform:translate3d(90px,0,0)!important}html[dir=rtl] .list.deletable.showIndicators li.selected>.move-down,html[dir=rtl] .list.editable.showIndicators li.selected>.move-down{-webkit-transform:translate3d(45px,0,0) rotate(180deg)!important;-moz-transform:translate3d(45px,0,0) rotate(180deg)!important;transform:translate3d(45px,0,0) rotate(180deg)!important}html[dir=rtl] .deletion-indicator{right:-40px;left:auto}input[type=email],input[type=number],input[type=password],input[type=text],input[type=url],textarea{-webkit-appearance:none;border:none;background-color:transparent;background-image:-webkit-linear-gradient(left,#888,#888);background-image:linear-gradient(left,#888,#888);background-size:100% 1px;background-position:bottom left;background-repeat:no-repeat;margin:0;padding:0 0 2px 5px;color:#888;-webkit-user-modify:read-write-plaintext-only;-webkit-tap-highlight-color:transparent;outline-style:none}input:focus,textarea:focus{outline:0!important;background-image:-webkit-linear-gradient(left,#007aff,#007aff);background-image:linear-gradient(left,#007aff,#007aff);background-size:100% 2px}.isAndroid:not(.isDesktop) .select-box>select{opacity:1;position:absolute;left:-100000px;-wekbit-appearance:none}.isDesktop .select-box>select{max-width:120px}.select-box-label{border:1px solid #888;padding:2px 30px 2px 10px;font-size:11px;background-image:-webkit-linear-gradient(top,#888,#888);background-position:top right;background-size:20px 100%;background-repeat:no-repeat;height:20px;box-sizing:border-box;min-width:100px;max-width:160px;width:auto;cursor:pointer;display:inline-block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.select-box-label::after{content:'';display:block;height:10px;width:1px;border-top:solid 7px #fff;border-left:solid 5px transparent;border-right:solid 5px transparent;position:absolute;top:6px;right:5px}.isDesktop .select-box-label{display:none!important}section>div.searchBar{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:transparent;padding:5px 10px}input[type=search]{display:block;padding:7px 0 7px 5px;-webkit-appearance:none;-webkit-transtion:all .5s ease-out;background-image:-webkit-linear-gradient(left,#888,#888),-webkit-linear-gradient(left,#888,#888),-webkit-linear-gradient(left,#888,#888);background-image:linear-gradient(left,#888,#888),linear-gradient(left,#888,#888),linear-gradient(left,#888,#888);text-align:left;-webkit-user-select:ignore;-webkit-tap-highlight-color:transparent;border:none;background-color:transparent;background-size:2px 4px,2px 4px,100% 2px;background-position:bottom left,bottom right,bottom left;background-repeat:no-repeat}input[type=search]:focus{text-align:left;outline:0!important;background-image:-webkit-linear-gradient(left,#81cfeb,#81cfeb),-webkit-linear-gradient(left,#81cfeb,#81cfeb),-webkit-linear-gradient(left,#81cfeb,#81cfeb);background-image:linear-gradient(left,#81cfeb,#81cfeb),linear-gradient(left,#81cfeb,#81cfeb),linear-gradient(left,#81cfeb,#81cfeb)}.icon{width:40px;height:40px;background-repeat:no-repeat;background-position:center center;background-size:auto 70%;border-radius:50%}li>aside>span.icon{margin-left:0}input[type=range]{-webkit-appearance:none!important;outline:0;display:block;margin-top:20px;margin-bottom:20px;width:auto;height:2px;border-radius:2px;background-color:#aaa;background-image:-webkit-linear-gradient(top,#007aff,#007aff);background-size:0 2px;background-position:left center;background-repeat:no-repeat;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;display:block;width:18px;height:18px;border-radius:20px;margin:0;background-color:#007aff;border:1px solid transparent}.isDesktop input[type=range]::-webkit-slider-thumb:hover,input[type=range]:focus::-webkit-slider-thumb{width:40px;height:40px;background-color:transparent;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22102px%22%20height%3D%22102px%22%20viewBox%3D%220%200%20102%20102%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22range-thumb%22%20transform%3D%22translate%281.000000,%201.000000%29%22%3E%3Ccircle%20id%3D%22Oval-1%22%20stroke%3D%22%23007aff%22%20stroke-width%3D%222%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval-2%22%20fill-opacity%3D%220.598698103%22%20fill%3D%22%23007aff%22%20cx%3D%2249.5%22%20cy%3D%2249.5%22%20r%3D%2232.5%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval-3%22%20fill%3D%22%23007aff%22%20cx%3D%2249.5%22%20cy%3D%2249.5%22%20r%3D%2213.5%22%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-size:100% 100%}.isDesktop input[type=range]::-webkit-slider-thumb:hover::before{content:'';display:block;width:40px;height:40px;background-color:#007aff;border-radius:50%;position:absolute;top:0;left:0}.isNativeAndroidBrowser input[type=range]{-webkit-appearance:none!important;outline:0;display:block;margin-top:20px;margin-bottom:20px;width:auto;height:2px;border-radius:2px;background-color:#aaa;background-image:-webkit-linear-gradient(top,#0062cc,#0062cc);background-size:0 2px;background-position:left center;background-repeat:no-repeat;padding:0}.isNativeAndroidBrowser input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;display:block;width:30px;height:30px;border-radius:20px;margin:0;background-color:transparent;background-image:-webkit-radial-gradient(#0053ad 4px,rgba(0,102,214,.8) 4px);border:1px solid #0053ad}.isNativeAndroidBrowser .isDesktop input[type=range]::-webkit-slider-thumb:hover,.isNativeAndroidBrowser input[type=range]:focus::-webkit-slider-thumb{background-image:-webkit-radial-gradient(#0053ad 4px,rgba(0,122,255,.5) 4px)}html[dir=rtl] input[type=range]{background-position:right center}.isDesktop .list.select li:hover{background-color:#007aff}.isDesktop .list.select li:hover::after{background-color:#007aff;-webkit-transition:all .125s ease-in-out;-moz-transition:all .125s ease-in-out;transition:all .125s ease-in-out;opacity:1;box-shadow:0 0 0 3px #007aff,inset 0 0 0 3px #fff}.list.select li.selected{color:#000}.list.select li.selected::after{background-color:#007aff;-webkit-transition:all .125s ease-in-out;-moz-transition:all .125s ease-in-out;transition:all .125s ease-in-out;opacity:1;box-shadow:0 0 0 3px #007aff,inset 0 0 0 3px #fff}.isDesktop .list.select li:hover *,.list.select li.selected *{color:#000}.list.select li::after{content:'';display:block;float:right;margin-top:-25px;width:20px;height:20px;-webkit-transition:all .125s ease-in-out;-moz-transition:all .125s ease-in-out;transition:all .125s ease-in-out;opacity:1;border:2px solid #525252;border-radius:15px}.list.select li>input{display:none}html[dir=rtl] .list.select li::after{float:left}.sheet{position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(240,240,240,.9);-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;transition:all .25s ease-in;-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);display:none}.sheet.opened{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sheet.opened>section.scroller-vertical{top:36px;padding:10px 0 100px!important}.sheet>section.scroller-vertical{position:absolute;top:0;left:0;bottom:0;height:auto;right:0;padding:0!important}.sheet>section>.list{border:none;background-color:transparent!important}.sheet>section>.list>li{background-color:transparent!important;border-bottom:solid 1px #cbcbcb}.sheet>section>.list>li::before{content:none}.sheet .button{display:block;margin:0 auto;padding:10px 20px!important;width:auto;height:auto}.sheet div.handle{display:block;text-align:center;cursor:pointer;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:29pt;background-color:rgba(0,0,0,.001);background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2294px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2094%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate%281.000000,%201.000000%29%22%20id%3D%22Artboard-1%22%20fill%3D%22%23666666%22%3E%3Cpath%20d%3D%22M46,10.1317773%20L4.17415422,35.2632809%20L-0.46118846,27.5487752%20L45.8258458,-0.2632809%20L46,0.0265604%20L46.1741542,-0.2632809%20L92.4611885,27.5487752%20L87.8258458,35.2632809%20L46,10.1317773%20L46,10.1317773%20Z%22%20id%3D%22Rectangle-2%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:auto 40%;background-repeat:no-repeat;margin:10px auto 0}.isDesktop .sheet div.handle:hover{background-color:#007aff;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2294px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2094%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate%281.000000,%201.000000%29%22%20id%3D%22Artboard-1%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M46,10.1317773%20L4.17415422,35.2632809%20L-0.46118846,27.5487752%20L45.8258458,-0.2632809%20L46,0.0265604%20L46.1741542,-0.2632809%20L92.4611885,27.5487752%20L87.8258458,35.2632809%20L46,10.1317773%20L46,10.1317773%20Z%22%20id%3D%22Rectangle-2%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.isNativeAndroidBrowser .sheet div.handle{background-size:20% auto}html[dir=rtl] .sheet>section>h2{font-weight:700!important;font-size:16pt!important;line-height:20pt!important}body.isNativeAndroidBrowser .slide-out{visibility:visible}.slide-out{position:absolute;top:52px;left:0;bottom:0;background-color:#fafafa;z-index:111111111;width:100%;visibility:hidden;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.slide-out.open{visibility:visible;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slide-out>section{-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;padding-bottom:100px;overflow-x:hidden;overflow-y:auto;width:100%}.button.slide-out-button{position:absolute;z-index:1111111;top:5px;left:15px;width:35px;height:35px;box-sizing:border-box;padding:0!important;margin-left:0}.button.slide-out-button::before{content:'';display:block;width:35px;height:35px;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2281px%22%20height%3D%2260px%22%20viewBox%3D%220%200%2081%2060%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22slideout%22%20fill%3D%22%23000000%22%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%220%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2226%22%20width%3D%2264.167%22%20height%3D%227.667%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2252%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:70% 70%;background-repeat:no-repeat}body.slide-out-app>article{display:none!important}body.slide-out-app>article.show,body.slide-out-app>nav.show:not(:first-of-type){display:block!important;z-index:100}body.slide-out-app>nav:not(:first-of-type){display:none!important}.slideout-header{background-color:#fafafa!important;border-bottom:none!important}.slideout-header h2{margin-left:0;color:#4d4d4d!important}html[dir=rtl] .button.slide-out-button{right:15px;left:auto}html[dir=rtl] .slide-out{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html[dir=rtl] .slide-out.open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.stepper{display:-moz-box;display:inline-flex;display:-webkit-inline-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-moz-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;padding:1px}.stepper>input{margin:0;display:none}.stepper>label{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #cbcbcb;width:40px;height:30px;font:700 16px/30px Helvetica;text-align:center;background-color:#fff}.stepper>.button{display:inline-box;width:30px;height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;font-weight:700;font-size:16pt;cursor:pointer!important;margin:0;box-shadow:none;border:1px solid #cbcbcb;padding:0!important;border-radius:0}.isDesktop .stepper>.button:hover{box-shadow:none!important}.stepper>.button:first-of-type{border-right:none;border-top-left-radius:2px;border-bottom-left-radius:2px}.stepper>.button:last-of-type{border-left:none;border-top-right-radius:2px;border-bottom-right-radius:2px}body:not(.isDesktop) .stepper>.button:last-of-type{padding-top:4px!important}html[dir=rtl] .stepper>.button:first-of-type{border-left:none;border-right:solid 1px #cbcbcb;border-radius:0 2px 2px 0}html[dir=rtl] .stepper>.button:last-of-type{border-right:none;border-left:solid 1px #cbcbcb;border-radius:2px 0 0 2px}li.switched{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;box-direction:reverse}li.switched h3{width:auto;font-size:13pt;line-height:24pt;color:#33b5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li.switched h4{width:48%;text-align:right;margin-right:10px;font-size:14pt;line-height:24pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}html[dir=rtl] li.switched h3{text-align:right;width:50%}html[dir=rtl] li.switched h4{text-align:left;margin-left:10px}.switch{width:70px;height:24px;border:1px solid #979797;background-color:#fafafa;display:-moz-box;display:inline-flex;display:-webkit-inline-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:justify;-webkit-justify-content:distribute;justify-content:space-around;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:2px;-webkit-tap-highlight-color:transparent;overflow:hidden;cursor:pointer;-webkit-user-select:none;-webkit-animation-duration:.65s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-webkit-animation-name:switchAnimationOff;user-select:none;animation-duration:.65s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:switchAnimationOff}.isDesktop .switch:hover{box-shadow:0 0 2px 2px #007aff}.switch>em{display:block;position:relative;z-index:30;top:-1px;border:1px solid #919191;border-top:solid 1px #e5e5e5;width:30px;height:22px;background-color:#cecece;pointer-events:none;-webkit-transform:translate3d(-1px,0,0);-moz-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.switch.on{border-color:#003166}.switch.on>em{-webkit-transform:translate3d(36px,0,0);-moz-transform:translate3d(36px,0,0);transform:translate3d(36px,0,0);background-color:#007aff;border:1px solid #007aff;border-top:solid 1px #3d9aff;border-left-color:#003166}.switch>input{display:none}html[dir=rtl] .switch.on>em{-webkit-transform:translate3d(-36px,0,0);-moz-transform:translate3d(-36px,0,0);transform:translate3d(-36px,0,0);border-left-color:#007aff;border-right-color:#003166}html[dir=rtl] .switch>em{-webkit-transform:translate3d(2px,0,0);-moz-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}body.hasTabBar article{top:77px!important}body.hasTabBar article .next:not(.navigable),body.hasTabBar article .previous:not(.navigable){display:none;-webkiit-transform:none}.tabbar{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:30px;position:absolute;left:0;top:47px;right:0;background-color:#cecece}.tabbar>.button{color:#000;background-color:#cecece;position:relative;display:block!important;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important;margin:0;height:100%;text-align:center;line-height:17px;padding:6px 10px 4px;border:none;border-bottom:solid 3px #cecece;border-right:solid 1px #666;box-shadow:none;border-radius:0!important}.tabbar>.button:last-of-type{border-right:none;border-left:none}.isDesktop .tabbar>.button:hover{opacity:1!important;box-shadow:none!important;border-bottom:solid 3px #007aff;background-color:#007aff!important;color:#fff!important}.tabbar>.button.selected{color:#666!important;opacity:1!important;box-shadow:none!important;border-bottom:solid 3px #007aff}.tabbar>.button.more{font-size:0;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center}.tabbar>.button.more::before{content:'';display:block;height:20px;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2239px%22%20height%3D%2211px%22%20viewBox%3D%220%200%2039%2011%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22more%22%20fill%3D%22%23666666%22%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%225.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%2219.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%2233.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-size:40% 40%;background-repeat:no-repeat}.tabbar>.button.more:hover::before{background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2239px%22%20height%3D%2211px%22%20viewBox%3D%220%200%2039%2011%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22more%22%20fill%3D%22%23ffffff%22%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%225.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%2219.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3Ccircle%20id%3D%22Oval%22%20cx%3D%2233.172%22%20cy%3D%225.172%22%20r%3D%225.172%22%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.tabbar>.button>.icon,.tabbar>.button>span{display:block;-webkit-box-flex:1!important;-moz-box-flex:1!important;-webkit-flex:1!important;flex:1!important}html[dir=rtl] .tabbar>.button:first-child{border-right:none!important}html[dir=rtl] .tabbar>.button:last-child{border-right:solid 1px #666!important}#carousel{width:100%;height:100%;margin:10px auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#ccc}.carousel-track{margin:0;padding:0}.carousel-track>li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:1px!important;position:relative;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-moz-box-pack:start;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;border-left:solid 1px #999;-webkit-user-select:none}.carousel-track>li.carousel-panel-active{border:none}.carousel-track>li h2{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pagination{list-style:none;height:10px;padding:0;margin:0 auto;display:-moz-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-moz-box-pack:justify;-webkit-justify-content:distribute;justify-content:space-around}.pagination::after{content:'';display:block;clear:both}.pagination>li{list-style:none;padding:0;margin:0 5px 0 0;height:10px;width:10px;background-color:#666;border-radius:50%}.pagination>li.selected{background-color:#007aff;cursor:pointer}.pagination>li:last-of-type{margin-right:0}.isDesktop .pagination>li:hover{background-color:#007aff;cursor:pointer}html[dir=rtl] .pagination>li{margin-right:0;margin-left:5px;padding:0!important}html[dir=rtl] .pagination>li:last-of-type{margin-left:0}.horizontal-scroll-panel{width:100%;height:200px;background-color:#ccc;padding:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:hidden!important;overflow-x:auto}.horizontal-scroll-panel>ul{list-style:none;margin:0;padding:0;-webkit-padding-start:0;font-size:0}.horizontal-scroll-panel>ul li{display:inline-block;border:1px solid #666;box-shadow:0 0 4px #666;width:200px;height:200px;overflow:hidden;margin-right:20px;font-size:0}.horizontal-scroll-panel>ul:first-of-type{margin-left:0!important}.horizontal-scroll-panel>ul:last-of-type{margin-right:0!important}body.isWindows .horizontal-scroll-panel{background-color:#333}[dir=rtl] .horizontal-scroll-panel li{margin-right:0!important;margin-left:20px!important}[dir=rtl] .horizontal-scroll-panel li:first-of-type{margin-right:0!important}[dir=rtl] .horizontal-scroll-panel li:last-of-type{margin-left:0!important}@media only screen and (max-device-width:320px){.horizontal-scroll-panel{height:125px;padding:10px}.horizontal-scroll-panel li{height:125px;width:125px}}
@@ -0,0 +1,2614 @@
1
+ /*
2
+ pO\
3
+ 6 /\
4
+ /OO\
5
+ /OOOO\
6
+ /OOOOOO\
7
+ (OOOOOOOO)
8
+ \:~==~:/
9
+
10
+ ChocolateChip-UI
11
+ ChUI-iOS.css
12
+ Copyright 2014 Sourcebits www.sourcebits.com
13
+ License: MIT
14
+ Version: 3.7.0
15
+ */
16
+ /*
17
+ To create a custom theme, uncomment the second of each of the following, then adjust the color for @primaryColor. If you want a secondary color, uncomment the line for @secondaryColor and set it's value to what you want.
18
+ */
19
+ .attentionGrapper {
20
+ color: #007aff !important;
21
+ }
22
+ /*
23
+ Flex parameters:
24
+ #flex > .display(<flex> | <inline-flex>);
25
+ #flex > .flex-direction(row | row-reverse | column | column-reverse);
26
+ #flex > .justify-content(flex-start | flex-end | center | space-between | space-around);
27
+ #flex > .align-content(flex-start | flex-end | center | space-between | space-around | stretch);
28
+ #fkex > .flex(none | [ <flex-grow> <flex-shrink> | <flex-basis> ]);
29
+ */
30
+ /* ==============================
31
+ Body
32
+ =========================== */
33
+ html,
34
+ body {
35
+ padding: 0;
36
+ margin: 0;
37
+ position: absolute;
38
+ top: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+ overflow: hidden;
43
+ }
44
+ body {
45
+ background-color: #efeff4;
46
+ font: normal 10pt/13pt HelveticaNeue, Helvetica, Sans-serif;
47
+ -webkit-font-smoothing: subpixel-antialiased;
48
+ -webkit-user-select: none;
49
+ -webkit-tap-highlight-color: transparent;
50
+ }
51
+ /* ==============================
52
+ Typography
53
+ =========================== */
54
+ .ellipsis {
55
+ overflow: hidden;
56
+ text-overflow: ellipsis;
57
+ white-space: nowrap;
58
+ }
59
+ h1,
60
+ .type-xx-large {
61
+ font-size: 42pt;
62
+ font-weight: 200;
63
+ line-height: 1.1429;
64
+ /* 64px when font-size is 42pt */
65
+ }
66
+ h2,
67
+ .type-x-large {
68
+ font-size: 20pt;
69
+ font-weight: 200;
70
+ line-height: 1.2;
71
+ /* 32px when font-size is 20pt */
72
+ }
73
+ h3,
74
+ .type-large {
75
+ font-size: 11pt;
76
+ font-weight: 600;
77
+ line-height: 1.3636;
78
+ /* 20px when font-size is 11pt */
79
+ }
80
+ h4,
81
+ .type-medium,
82
+ code,
83
+ pre,
84
+ samp {
85
+ font-size: 11pt;
86
+ font-weight: 400;
87
+ line-height: 1.3636;
88
+ /* 20px when font-size is 11pt */
89
+ }
90
+ body,
91
+ h5,
92
+ .type-small,
93
+ legend {
94
+ font-size: 11pt;
95
+ font-weight: 300;
96
+ line-height: 1.3636;
97
+ /* 20px when font-size is 11pt */
98
+ }
99
+ h6,
100
+ caption,
101
+ figcaption,
102
+ small,
103
+ .type-xx-small {
104
+ font-size: 9pt;
105
+ font-weight: 400;
106
+ line-height: 1.6667;
107
+ /* 20px when font-size is 9pt */
108
+ }
109
+ /* ==============================
110
+ Article (view)
111
+ =========================== */
112
+ article {
113
+ position: absolute;
114
+ top: 45px;
115
+ right: 0;
116
+ bottom: 0;
117
+ left: 0;
118
+ -webkit-transition: all 0.15s;
119
+ transition: all 0.15s;
120
+ overflow-x: hidden;
121
+ overflow-y: auto;
122
+ -webkit-overflow-scrolling: touch;
123
+ display: flex;
124
+ display: -webkit-flex;
125
+ display: -webkit-box;
126
+ -webkit-box-orient: vertical;
127
+ -webkit-flex-direction: column;
128
+ flex-direction: column;
129
+ -webkit-justify-content: center;
130
+ justify-content: center;
131
+ -webkit-box-align: start;
132
+ -webkit-align-items: flex-start;
133
+ align-items: flex-start;
134
+ }
135
+ .hide-navbars article {
136
+ top: 0;
137
+ }
138
+ .isStandalone article {
139
+ top: 65px;
140
+ }
141
+ .isStandalone .hide-navbars article {
142
+ top: 20px;
143
+ }
144
+ @media only screen and (min-width: 768px) {
145
+ article {
146
+ -webkit-transition: all 0.25s ease-out;
147
+ transition: all 0.25s ease-out;
148
+ }
149
+ }
150
+ /* ==============================
151
+ Article navigation states
152
+ =========================== */
153
+ .current {
154
+ opacity: 1;
155
+ visibility: visible;
156
+ -webkit-transform: translate3d(0, 0, 0);
157
+ transform: translate3d(0, 0, 0);
158
+ }
159
+ .next {
160
+ -webkit-transform: translate3d(105%, 0, 0);
161
+ transform: translate3d(105%, 0, 0);
162
+ opacity: 1;
163
+ visibility: visible;
164
+ }
165
+ .previous {
166
+ -webkit-transform: translate3d(-100%, 0, 0);
167
+ transform: translate3d(-100%, 0, 0);
168
+ opacity: 1;
169
+ visibility: visible;
170
+ }
171
+ html[dir=rtl] .current {
172
+ -webkit-transform: translate3d(0, 0, 0);
173
+ transform: translate3d(0, 0, 0);
174
+ }
175
+ html[dir=rtl] .next {
176
+ -webkit-transform: translate3d(-100%, 0, 0);
177
+ transform: translate3d(-100%, 0, 0);
178
+ }
179
+ html[dir=rtl] .previous {
180
+ -webkit-transform: translate3d(105%, 0, 0);
181
+ transform: translate3d(105%, 0, 0);
182
+ }
183
+ /* ==============================
184
+ Scrollers
185
+ =========================== */
186
+ .scroller-vertical,
187
+ .scroller-horizontal {
188
+ -webkit-box-flex: 1;
189
+ -webkit-flex: 1;
190
+ flex: 1;
191
+ padding-bottom: 100px;
192
+ overflow-x: hidden;
193
+ overflow-y: auto;
194
+ -webkit-overflow-scrolling: touch;
195
+ }
196
+ .scroller-horizontal {
197
+ overflow-x: hidden;
198
+ overflow-y: auto;
199
+ }
200
+ article > section,
201
+ .slide-out > section {
202
+ padding-top: 20px;
203
+ padding-bottom: 100px;
204
+ -webkit-box-flex: 1;
205
+ -webkit-flex: 1;
206
+ flex: 1;
207
+ position: absolute;
208
+ top: 0;
209
+ left: 0;
210
+ width: 100%;
211
+ min-height: 100% !important;
212
+ }
213
+ /* ==============================
214
+ Horizontal Panels
215
+ =========================== */
216
+ .vertical,
217
+ li.comp > aside.vertical {
218
+ display: flex;
219
+ display: -webkit-flex;
220
+ display: -webkit-box;
221
+ -webkit-box-orient: vertical;
222
+ -webkit-flex-direction: column;
223
+ flex-direction: column;
224
+ -webkit-justify-content: start;
225
+ justify-content: flex-start;
226
+ -webkit-box-align: start;
227
+ -webkit-align-items: flex-start;
228
+ align-items: flex-start;
229
+ }
230
+ .horizontal {
231
+ display: flex;
232
+ display: -webkit-flex;
233
+ display: -webkit-box;
234
+ -webkit-box-orient: horizontal;
235
+ -webkit-flex-direction: row;
236
+ flex-direction: row;
237
+ -webkit-justify-content: start;
238
+ justify-content: flex-start;
239
+ -webkit-box-align: start;
240
+ -webkit-align-items: flex-start;
241
+ align-items: flex-start;
242
+ }
243
+ .horizontal.centered {
244
+ -webkit-justify-content: center;
245
+ justify-content: center;
246
+ -webkit-box-align: center;
247
+ -webkit-align-items: center;
248
+ align-items: center;
249
+ }
250
+ /* ==============================
251
+ Buttons
252
+ =========================== */
253
+ a.button {
254
+ cursor: pointer;
255
+ text-decoration: none;
256
+ font-size: 13pt;
257
+ -webkit-transition: all 0.35s ease-out;
258
+ transition: all 0.35s ease-out;
259
+ display: block;
260
+ -webkit-box-sizing: auto;
261
+ box-sizing: auto;
262
+ padding: 8px 0px;
263
+ position: relative;
264
+ white-space: nowrap;
265
+ overflow: hidden;
266
+ text-overflow: ellipsis;
267
+ vertical-align: middle;
268
+ text-align: center;
269
+ color: #007aff;
270
+ border-color: #007aff;
271
+ background-color: rgba(255, 255, 255, 0.01);
272
+ }
273
+ .isDesktop a.button:hover {
274
+ cursor: pointer;
275
+ opacity: .5 !important;
276
+ }
277
+ a.button.back,
278
+ a.button.backTo {
279
+ text-align: left;
280
+ padding: 0 0 0 20px !important;
281
+ line-height: 28px;
282
+ color: #007aff;
283
+ border: none;
284
+ position: relative;
285
+ overflow: hidden;
286
+ text-overflow: ellipsis;
287
+ display: inline-block !important;
288
+ height: 30px;
289
+ }
290
+ a.button.back::before,
291
+ a.button.backTo::before {
292
+ display: block;
293
+ content: '';
294
+ border: solid 1px transparent;
295
+ background-color: #007aff;
296
+ -webkit-mask-position: 50% 50%;
297
+ -webkit-mask-size: 90% 90%;
298
+ -webkit-mask-repeat: no-repeat;
299
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'21'%20height%3D'35'%20viewBox%3D'0%200%2021%2035'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-2.1355929,0.0677963%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cpath%20d%3D'M%2021.353814,1.2365445%205.0903576,17.5%2021.353814,33.763456'%20id%3D'Rectangle-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A3'%20/%3E%3C/g%3E%3C/svg%3E");
300
+ -webkit-mask-position: left center;
301
+ width: 20px;
302
+ height: 20px;
303
+ margin-right: 7px;
304
+ position: absolute;
305
+ left: -4px;
306
+ top: 2px;
307
+ }
308
+ a.button.action {
309
+ color: #585d63;
310
+ border: solid 1px #585d63;
311
+ border-radius: 20px;
312
+ display: block;
313
+ margin: 0 auto;
314
+ padding: 10px 20px;
315
+ -webkit-box-sizing: border-box;
316
+ box-sizing: border-box;
317
+ width: auto;
318
+ height: auto;
319
+ min-width: 200px;
320
+ max-width: 300px;
321
+ }
322
+ nav > a.button {
323
+ max-width: 100px;
324
+ }
325
+ .button.align-flush,
326
+ .toolbar > .button.align-flush {
327
+ position: absolute;
328
+ right: 15px;
329
+ margin-right: 0 !important;
330
+ z-index: 100;
331
+ top: 3px;
332
+ }
333
+ .isDesktopSafari a.button.back {
334
+ margin-top: 8px !important;
335
+ }
336
+ .isiOS a.button.back,
337
+ .isiOS a.button.backTo,
338
+ .isSafari6 a.button.back,
339
+ .isSafari6 a .button.backTo {
340
+ display: -webkit-box;
341
+ margin-top: 0;
342
+ }
343
+ html[dir=rtl] a.button.align-flush {
344
+ right: auto;
345
+ left: 15px;
346
+ }
347
+ html[dir=rtl] a.button.back,
348
+ html[dir=rtl] a.button.backTo {
349
+ padding: 0 20px 0 0 !important;
350
+ }
351
+ html[dir=rtl] a.button.back::before,
352
+ html[dir=rtl] a.button.backTo::before {
353
+ -webkit-transform: rotate(180deg);
354
+ right: -4px;
355
+ left: auto;
356
+ }
357
+ html[dir=rtl] .toolbar > .button.align-flush {
358
+ right: auto;
359
+ left: 15px;
360
+ }
361
+ /* ==============================
362
+ Nav Bars
363
+ =========================== */
364
+ #global-nav {
365
+ background-color: #f7f7f7;
366
+ border-bottom: solid 1px #a7a7aa;
367
+ overflow: hidden;
368
+ }
369
+ nav {
370
+ height: 45px;
371
+ -webkit-box-sizing: border-box;
372
+ box-sizing: border-box;
373
+ display: flex;
374
+ display: -webkit-box;
375
+ display: -webkit-flex;
376
+ -webkit-box-orient: vertical;
377
+ -webkit-flex-direction: column;
378
+ flex-direction: column;
379
+ -webkit-justify-content: center;
380
+ justify-content: center;
381
+ -webkit-box-align: start;
382
+ -webkit-align-items: flex-start;
383
+ align-items: flex-start;
384
+ text-align: center;
385
+ position: absolute;
386
+ top: 0;
387
+ left: 0;
388
+ right: 0;
389
+ -webkit-transition: all 0.15s ease-out;
390
+ transition: all 0.15s ease-out;
391
+ padding: 0 15px;
392
+ vertical-align: middle;
393
+ }
394
+ nav > .button,
395
+ nav > div > .button {
396
+ color: #007aff;
397
+ }
398
+ nav > h1 {
399
+ text-align: center;
400
+ display: inline-block;
401
+ -webkit-box-flex: 1 !important;
402
+ -webkit-flex: 1 !important;
403
+ flex: 1 !important;
404
+ font: normal 12pt/14pt HelveticaNeue, Sans-serif;
405
+ position: absolute;
406
+ top: 0;
407
+ left: 100px;
408
+ right: 100px;
409
+ z-index: -1;
410
+ white-space: nowrap;
411
+ overflow: hidden;
412
+ text-overflow: ellipsis;
413
+ color: #000000;
414
+ }
415
+ nav > h1 + a.button {
416
+ margin: 0;
417
+ position: absolute;
418
+ right: 15px;
419
+ top: 3px;
420
+ }
421
+ nav > a.button + h1 {
422
+ left: 120px;
423
+ right: 120px;
424
+ }
425
+ .isStandalone nav {
426
+ top: 20px;
427
+ }
428
+ .isStandalone #global-nav {
429
+ height: 65px;
430
+ top: 0;
431
+ }
432
+ @media only screen and (max-device-width: 320px) and (orientation: portrait) {
433
+ nav > a.button + h1 {
434
+ left: 115px;
435
+ right: 115px;
436
+ }
437
+ }
438
+ @media only screen and (max-device-width: 320px) and (orientation: landscape) {
439
+ nav > a.button + h1 {
440
+ left: 150px;
441
+ right: 150px;
442
+ }
443
+ }
444
+ /* ==============================
445
+ Lists (Basic)
446
+ =========================== */
447
+ .list {
448
+ list-style: none;
449
+ margin: 0 0 10px 0;
450
+ padding: 0;
451
+ border-top: solid 1px #c8c8c8;
452
+ border-bottom: solid 1px #c8c8c8;
453
+ background-color: #ffffff;
454
+ overflow: hidden;
455
+ width: 100%;
456
+ }
457
+ .list > li {
458
+ padding: 13px 15px 13px 15px;
459
+ -webkit-transition: all 0.3s ease-out;
460
+ transition: all 0.3s ease-out;
461
+ position: relative;
462
+ background-color: #ffffff;
463
+ font-size: 12pt;
464
+ }
465
+ .list > li::before {
466
+ display: block;
467
+ content: '';
468
+ position: absolute;
469
+ bottom: 0px;
470
+ left: 15px;
471
+ right: 0px;
472
+ border-bottom: solid 1px #c8c8c8;
473
+ }
474
+ .list > li:last-of-type::before {
475
+ border-bottom: none;
476
+ }
477
+ .list > li.nav::after {
478
+ display: block;
479
+ content: '';
480
+ width: 6px;
481
+ height: 6px;
482
+ border-right: solid 2px #c7c7cc;
483
+ border-top: solid 2px #c7c7cc;
484
+ -webkit-transform: rotate(45deg);
485
+ transform: rotate(45deg);
486
+ float: right;
487
+ position: absolute;
488
+ top: 16px;
489
+ right: 15px;
490
+ -webkit-transition: all 0.4s ease-out;
491
+ transition: all 0.4s ease-out;
492
+ }
493
+ .list > li.show-detail::after {
494
+ display: block;
495
+ content: 'i';
496
+ width: 22px;
497
+ height: 20px;
498
+ border-radius: 20px;
499
+ border: solid 1px #007aff;
500
+ color: #007aff;
501
+ font: bold 14px/0 'Times', serif;
502
+ -webkit-box-sizing: border-box;
503
+ box-sizing: border-box;
504
+ padding: 10px 8px;
505
+ position: absolute;
506
+ top: 10px;
507
+ right: 15px;
508
+ }
509
+ .list + p,
510
+ .list + p + p {
511
+ color: #7f7f7f;
512
+ font-family: HelveticaNeue, Helvetica, sans-serif;
513
+ -webkit-font-smoothing: antialiased;
514
+ }
515
+ .list ~ p {
516
+ margin: 0 15px;
517
+ }
518
+ .list ~ p + p {
519
+ margin-top: 5pt;
520
+ }
521
+ /* ==============================
522
+ List Footer
523
+ ============================ */
524
+ .list + p,
525
+ .list + p + p {
526
+ color: #7f7f7f;
527
+ font-family: HelveticaNeue, Helvetica, sans-serif;
528
+ -webkit-font-smoothing: antialiased;
529
+ }
530
+ .list ~ p {
531
+ margin: 0 15px;
532
+ }
533
+ .list ~ p + p {
534
+ margin-top: 5pt;
535
+ }
536
+ /* ==============================
537
+ List Hover & Selected States
538
+ ============================ */
539
+ .isDesktop .list > li[data-goto]:hover,
540
+ .isDesktop .list > li[data-show-article]:hover,
541
+ .isDesktop .list.select > li:hover,
542
+ .list > li.selected {
543
+ background-color: #d9d9d9;
544
+ cursor: pointer;
545
+ }
546
+ /* ==============================
547
+ List title & subtitle
548
+ ============================ */
549
+ .list > li > h3,
550
+ .list > li > h4 {
551
+ width: 80%;
552
+ font-weight: 200;
553
+ margin: 0;
554
+ }
555
+ .list > li h3 {
556
+ line-height: 18pt;
557
+ }
558
+ .list > li h4 {
559
+ line-height: 14pt;
560
+ color: #7f7f7f;
561
+ }
562
+ .list > li > h4,
563
+ .list > li > div > h4 {
564
+ font-size: 11pt;
565
+ margin: 0;
566
+ }
567
+ .list > li > aside > h4 {
568
+ margin: 0;
569
+ font-weight: normal;
570
+ color: #7f7f7f;
571
+ }
572
+ /* ==============================
573
+ List detail
574
+ ============================ */
575
+ .list h3,
576
+ .list h4,
577
+ .list p {
578
+ pointer-events: none;
579
+ }
580
+ .list > li > p {
581
+ margin: 6px 0px;
582
+ color: #7f7f7f;
583
+ }
584
+ .list > li > p + p {
585
+ margin-top: 6px;
586
+ }
587
+ .list > li.comp > div > p {
588
+ font-size: 10pt;
589
+ margin: 0;
590
+ color: #7f7f7f;
591
+ }
592
+ /* ==============================
593
+ List header
594
+ ============================ */
595
+ section h2 {
596
+ font: normal 11pt/12pt HelveticaNeue, Sans-serif;
597
+ color: #4d4d4d;
598
+ margin: 26px 0 6px 15px;
599
+ text-transform: uppercase;
600
+ white-space: nowrap;
601
+ overflow: hidden;
602
+ text-overflow: ellipsis;
603
+ color: #7f7f7f;
604
+ }
605
+ section h2.normal-case {
606
+ text-transform: none;
607
+ }
608
+ section h2.wrap {
609
+ white-space: normal;
610
+ }
611
+ html[dir=rtl] section h2 {
612
+ margin: 26px 15px 6px 0;
613
+ }
614
+ html[dir=rtl] .list li {
615
+ padding: 13px 15px 13px 5px;
616
+ }
617
+ html[dir=rtl] .list li::before {
618
+ left: 0px;
619
+ right: 15px;
620
+ }
621
+ html[dir=rtl] .list li.nav::after {
622
+ right: auto;
623
+ top: 20px;
624
+ left: 15px;
625
+ -webkit-transform: rotate(-135deg);
626
+ transform: rotate(-135deg);
627
+ }
628
+ html[dir=rtl] .list li.show-detail::after {
629
+ left: 10px;
630
+ right: auto;
631
+ }
632
+ html[dir=rtl] .list li.nav::after {
633
+ left: 15px;
634
+ right: auto;
635
+ }
636
+ /* ==============================
637
+ Comp List Items
638
+ =========================== */
639
+ .list > li.comp::before {
640
+ content: none;
641
+ }
642
+ li.comp {
643
+ display: flex;
644
+ display: -webkit-flex;
645
+ display: -webkit-box;
646
+ -webkit-box-orient: horizontal;
647
+ -webkit-flex-direction: row;
648
+ flex-direction: row;
649
+ -webkit-box-align: stretch;
650
+ -webkit-align-items: stretch;
651
+ align-items: stretch;
652
+ padding-bottom: 0;
653
+ }
654
+ li.comp > div {
655
+ -webkit-box-flex: 1;
656
+ -webkit-flex: 1;
657
+ flex: 1;
658
+ border-bottom: solid 1px #c8c8c8;
659
+ padding: 0 0 10px 0;
660
+ margin-left: 0;
661
+ }
662
+ li.comp > div > h3,
663
+ li.comp > div > h4 {
664
+ white-space: nowrap;
665
+ overflow: hidden;
666
+ text-overflow: ellipsis;
667
+ font-family: HelveticaNeue, Helvetica, Sans-serif;
668
+ font-weight: 200;
669
+ margin: 0;
670
+ color: #2d2d2d;
671
+ }
672
+ li.comp > div + aside {
673
+ margin-right: -15px;
674
+ }
675
+ li.comp > aside {
676
+ display: -webkit-box;
677
+ -webkit-box-pack: center;
678
+ -webkit-box-align: center;
679
+ -webkit-justify-content: center;
680
+ -webkit-align-items: center;
681
+ justify-content: center;
682
+ align-items: center;
683
+ padding: 0 0 10px 0;
684
+ }
685
+ li.comp > aside:first-child {
686
+ -webkit-box-align: start;
687
+ }
688
+ li.comp > aside > label,
689
+ li.comp > aside > span {
690
+ display: inline-block;
691
+ margin-left: 6px;
692
+ }
693
+ li.comp > aside > .nav {
694
+ display: block;
695
+ width: 12px;
696
+ height: 12px;
697
+ }
698
+ li.comp > aside > .nav::after {
699
+ display: block;
700
+ content: '';
701
+ width: 6px;
702
+ height: 6px;
703
+ border-right: solid 2px #c7c7cc;
704
+ border-top: solid 2px #c7c7cc;
705
+ -webkit-transform: rotate(45deg) translate3d(4px, 0, 0);
706
+ transform: rotate(45deg) translate3d(4px, 0, 0);
707
+ }
708
+ li.comp > aside > .show-detail {
709
+ display: inline-block;
710
+ margin-bottom: -4px;
711
+ }
712
+ li.comp > aside > .show-detail::after {
713
+ display: block;
714
+ content: 'i';
715
+ width: 22px;
716
+ height: 20px;
717
+ border-radius: 20px;
718
+ border: solid 1px #007aff;
719
+ color: #007aff;
720
+ font: bold 14px/0 'Times', serif;
721
+ -webkit-box-sizing: border-box;
722
+ box-sizing: border-box;
723
+ padding: 10px 8px;
724
+ float: right;
725
+ margin: 0px 10px 0 0 !important;
726
+ }
727
+ li.comp > aside:first-child {
728
+ margin-right: 10px;
729
+ }
730
+ li.comp > aside:last-child {
731
+ padding: 0 10px 10px 10px;
732
+ border-bottom: solid 1px #c8c8c8;
733
+ }
734
+ li.comp > aside > span.counter,
735
+ li.comp > aside > span.date-time {
736
+ font-weight: normal;
737
+ color: #2d2d2d;
738
+ font-size: 12pt;
739
+ }
740
+ li.comp:last-of-type > aside:last-child {
741
+ border: none;
742
+ }
743
+ li.comp:last-of-type > div {
744
+ border: none;
745
+ }
746
+ li.comp.wrap > div > h3,
747
+ li.comp.wrap > div > h4 {
748
+ white-space: wrap;
749
+ overflow: visible;
750
+ }
751
+ html[dir=rtl] li.comp {
752
+ padding-bottom: 0 !important;
753
+ }
754
+ html[dir=rtl] li.comp > aside > .nav::after {
755
+ -webkit-transform: rotate(-135deg);
756
+ transform: rotate(-135deg);
757
+ }
758
+ html[dir=rtl] li.comp > aside:first-child {
759
+ margin-left: 10px;
760
+ margin-right: 0;
761
+ }
762
+ html[dir=rtl] li.comp > aside:last-child {
763
+ padding: 0 10px 0 0;
764
+ }
765
+ html[dir=rtl] li.comp > aside:last-child > .nav::after {
766
+ margin-left: -10px !important;
767
+ }
768
+ html[dir=rtl] li.comp > aside > span.counter,
769
+ html[dir=rtl] li.comp > aside > span.date-time {
770
+ margin-right: 5px;
771
+ margin-left: 0px;
772
+ }
773
+ html[dir=rtl] li.comp > aside > h4 {
774
+ padding-bottom: 4px;
775
+ }
776
+ @media only screen and (max-device-width: 320px) and (orientation: portrait) {
777
+ li.comp > aside > h4 {
778
+ max-width: 100px;
779
+ white-space: nowrap;
780
+ overflow: hidden;
781
+ text-overflow: ellipsis;
782
+ }
783
+ }
784
+ /* ==============================
785
+ Grids
786
+ =========================== */
787
+ /* Grid: */
788
+ .grid {
789
+ display: -webkit-box;
790
+ -webkit-box-orientation: horizontal;
791
+ -webkit-box-align: stretch;
792
+ display: -webkit-flex;
793
+ -webkit-flex-direction: row;
794
+ -webkit-align-items: stretch;
795
+ display: -ms-flexbox;
796
+ -ms-flex-direction: row;
797
+ -ms-align-items: stretch;
798
+ display: flex;
799
+ flex-direction: row;
800
+ align-items: stretch;
801
+ }
802
+ /* Allow columns to wrap */
803
+ .grid.wrap {
804
+ -webkit-box-wrap: wrap;
805
+ -webkit-flex-wrap: wrap;
806
+ -ms-flex-wrap: wrap;
807
+ flex-wrap: wrap;
808
+ }
809
+ /* Column: */
810
+ .col {
811
+ -webkit-box-flex: 1 1 auto;
812
+ -webkit-flex: 1 1 auto;
813
+ -ms-flex: 1 1 auto;
814
+ flex: 1 1 auto;
815
+ }
816
+ /* Centered grids: */
817
+ .grid.center {
818
+ -webkit-box-pack: center;
819
+ -webkit-justify-content: center;
820
+ -ms-justify-content: center;
821
+ justify-content: center;
822
+ }
823
+ .center .col {
824
+ -webkit-flex-grow: 0;
825
+ -webkit-flex-shrink: 0;
826
+ -ms-flex-grow: 0;
827
+ -ms-flex-shrink: 0;
828
+ flex-grow: 0;
829
+ flex-shrink: 0;
830
+ }
831
+ /* Columns: */
832
+ .flex-1 {
833
+ -webkit-flex-basis: 10%;
834
+ -ms-flex-basis: 10%;
835
+ flex-basis: 10%;
836
+ }
837
+ .flex-2 {
838
+ -webkit-flex-basis: 20%;
839
+ -ms-flex-basis: 20%;
840
+ flex-basis: 20%;
841
+ }
842
+ .flex-3 {
843
+ -webkit-flex-basis: 30%;
844
+ -ms-flex-basis: 30%;
845
+ flex-basis: 30%;
846
+ }
847
+ .flex-4 {
848
+ -webkit-flex-basis: 40%;
849
+ -ms-flex-basis: 40%;
850
+ flex-basis: 40%;
851
+ }
852
+ .flex-5 {
853
+ -webkit-flex-basis: 50%;
854
+ -ms-flex-basis: 50%;
855
+ flex-basis: 50%;
856
+ }
857
+ .flex-6 {
858
+ -webkit-flex-basis: 60%;
859
+ -ms-flex-basis: 60%;
860
+ flex-basis: 60%;
861
+ }
862
+ .flex-7 {
863
+ -webkit-flex-basis: 70%;
864
+ -ms-flex-basis: 70%;
865
+ flex-basis: 70%;
866
+ }
867
+ .flex-8 {
868
+ -webkit-flex-basis: 80%;
869
+ -ms-flex-basis: 80%;
870
+ flex-basis: 80%;
871
+ }
872
+ .flex-9 {
873
+ -webkit-flex-basis: 90%;
874
+ -ms-flex-basis: 90%;
875
+ flex-basis: 90%;
876
+ }
877
+ .flex-10 {
878
+ -webkit-flex-basis: 100%;
879
+ -ms-flex-basis: 100%;
880
+ flex-basis: 100%;
881
+ }
882
+ .gutter-5 .col {
883
+ margin: 5px;
884
+ }
885
+ .gutter-10 .col {
886
+ margin: 10px;
887
+ }
888
+ html[dir=rtl] .grid {
889
+ -webkit-box-direction: horizontal;
890
+ -webkit-flex-direction: row;
891
+ -ms-flex-direction: row;
892
+ flex-direction: row;
893
+ }
894
+ /* Mobile */
895
+ @media only screen and (max-width: 599px) {
896
+ .grid {
897
+ -webkit-box-wrap: wrap;
898
+ -webkit-flex-wrap: wrap;
899
+ -ms-flex-wrap: wrap;
900
+ flex-wrap: wrap;
901
+ -wekbit-flex-direction: vertical;
902
+ -webkit-flex-direction: column;
903
+ -ms-flex-direction: column;
904
+ flex-direction: column;
905
+ margin: 0 !important;
906
+ }
907
+ .col.flex-1,
908
+ .col.flex-2,
909
+ .col.flex-3,
910
+ .col.flex-4 {
911
+ -webkit-box-flex: 1 !important;
912
+ -webkit-flex: 1 !important;
913
+ -ms-flex: 1 !important;
914
+ flex: 1 !important;
915
+ -webkit-flex-basis: 50%;
916
+ -ms-flex-basis: 50%;
917
+ flex-basis: 50%;
918
+ }
919
+ .col.flex-5,
920
+ .col.flex-6,
921
+ .col.flex-7,
922
+ .col.flex-8,
923
+ .col.flex-9,
924
+ .col.flex-10 {
925
+ -webkit-box-flex: 2 !important;
926
+ -webkit-flex: 2 !important;
927
+ -ms-flex: 2 !important;
928
+ flex: 2 !important;
929
+ }
930
+ .isWindows .grid,
931
+ .isWindows .col {
932
+ display: block;
933
+ }
934
+ }
935
+ /* ==============================
936
+ Segmented Control
937
+ =========================== */
938
+ .segmented:not(.paging) {
939
+ -webkit-box-orient: horizontal;
940
+ -webkit-flex-direction: row;
941
+ flex-direction: row;
942
+ -webkit-box-sizing: border-box;
943
+ box-sizing: border-box;
944
+ }
945
+ .segmented:not(.paging) > .button {
946
+ border: solid 1px #007aff;
947
+ padding: 4px 15px;
948
+ border-left: none;
949
+ background-color: rgba(255, 255, 255, 0.65);
950
+ width: auto;
951
+ overflow-x: hidden;
952
+ -webkit-transition: none;
953
+ transition: none;
954
+ font-size: 10pt;
955
+ display: flex;
956
+ display: -webkit-flex;
957
+ display: -webkit-box;
958
+ -webkit-box-orient: vertical;
959
+ -webkit-flex-direction: column;
960
+ flex-direction: column;
961
+ -webkit-justify-content: center;
962
+ justify-content: center;
963
+ -webkit-box-align: center;
964
+ -webkit-align-items: center;
965
+ align-items: center;
966
+ -webkit-box-flex: 1 !important;
967
+ -webkit-flex: 1 !important;
968
+ flex: 1 !important;
969
+ text-align: center;
970
+ color: #007aff;
971
+ }
972
+ .segmented:not(.paging) > .button:first-of-type {
973
+ border-left: solid 1px #007aff;
974
+ border-top-left-radius: 4px;
975
+ border-bottom-left-radius: 4px;
976
+ }
977
+ .segmented:not(.paging) > .button:last-of-type {
978
+ border-top-right-radius: 4px;
979
+ border-bottom-right-radius: 4px;
980
+ }
981
+ .isDesktop .segmented:not(.paging) > .button:hover,
982
+ .segmented:not(.paging) > .button.selected {
983
+ color: #ffffff;
984
+ background-color: #007aff;
985
+ opacity: 1 !important;
986
+ }
987
+ div.horizontal.centered > .segmented {
988
+ display: flex;
989
+ display: -webkit-flex;
990
+ display: -webkit-box;
991
+ -webkit-box-flex: 1;
992
+ -webkit-flex: 1;
993
+ flex: 1;
994
+ margin: 10px 15px;
995
+ }
996
+ .segmented.align-flush {
997
+ position: absolute;
998
+ right: 15px;
999
+ top: 6px;
1000
+ }
1001
+ html[dir=rtl] .segmented.align-flush {
1002
+ position: absolute;
1003
+ right: auto;
1004
+ left: 15px;
1005
+ top: 6px;
1006
+ }
1007
+ html[dir=rtl] .segmented .button:first-of-type {
1008
+ border-left: none;
1009
+ border-top-left-radius: 0;
1010
+ border-bottom-left-radius: 0;
1011
+ border-top-right-radius: 4px;
1012
+ border-bottom-right-radius: 4px;
1013
+ }
1014
+ html[dir=rtl] .segmented .button:last-of-type {
1015
+ border-left: solid 1px #007aff;
1016
+ border-top-right-radius: 0;
1017
+ border-bottom-right-radius: 0;
1018
+ border-top-left-radius: 4px;
1019
+ border-bottom-left-radius: 4px;
1020
+ }
1021
+ /* ==============================
1022
+ Segmented Paging Control
1023
+ =========================== */
1024
+ .segmented.paging,
1025
+ .segmented.paging.vertical {
1026
+ -webkit-box-orient: horizontal !important;
1027
+ -webkit-flex-direction: row !important;
1028
+ flex-direction: row !important;
1029
+ }
1030
+ .segmented.paging > .button,
1031
+ .segmented.paging.vertical > .button {
1032
+ border: none;
1033
+ background: none !important;
1034
+ color: #007aff;
1035
+ width: 40px;
1036
+ height: 40px;
1037
+ -webkit-box-sizing: border-box;
1038
+ box-sizing: border-box;
1039
+ position: relative;
1040
+ border-radius: 0 !important;
1041
+ border: none !important;
1042
+ }
1043
+ .isDesktop .segmented.paging > .button:hover,
1044
+ .isDesktop .segmented.paging.vertical > .button:hover,
1045
+ .segmented.paging > .button.selected,
1046
+ .segmented.paging.vertical > .button.selected {
1047
+ opacity: .5 !important;
1048
+ color: #007aff;
1049
+ background-color: transparent !important;
1050
+ }
1051
+ .segmented.paging > .button::before,
1052
+ .segmented.paging.vertical > .button::before {
1053
+ display: block;
1054
+ content: '';
1055
+ width: 35px;
1056
+ height: 35px;
1057
+ position: absolute;
1058
+ top: 0;
1059
+ left: 0;
1060
+ -webkit-mask-repeat: no-repeat;
1061
+ -webkit-mask-position: 50% 50%;
1062
+ background-color: #007aff;
1063
+ }
1064
+ .segmented.paging.horizontal > .button:first-of-type::before {
1065
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M28.038,8.381l2.674,2.599L18.545,23.146l12.086,12.086l-2.593,2.679L17.909,27.782l-4.636-4.636l4.636-4.636%20L28.038,8.381z'/%3E%3C/g%3E%3C/svg%3E");
1066
+ }
1067
+ .segmented.paging.horizontal > .button:last-of-type::before {
1068
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M15.946,37.911l-2.674-2.599l12.167-12.167L13.354,11.06l2.593-2.679L26.075,18.51l4.636,4.636l-4.636,4.636L15.946,37.911z'/%3E%3C/g%3E%3C/svg%3E");
1069
+ }
1070
+ .segmented.paging.vertical > .button:first-of-type::before,
1071
+ html[dir=rtl] .segmented.paging.vertical > .button:last-of-type::before {
1072
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M7.227,17.101l2.599-2.674l12.167,12.167l12.086-12.086l2.679,2.593L26.628,27.229l-4.636,4.636l-4.636-4.636%20L7.227,17.101z'/%3E%3C/g%3E%3C/svg%3E");
1073
+ }
1074
+ .segmented.paging.vertical > .button:last-of-type::before,
1075
+ html[dir=rtl] .segmented.paging.vertical > .button:first-of-type::before {
1076
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M36.757,29.191l-2.599,2.674L21.992,19.698L9.905,31.784l-2.679-2.593l10.129-10.129l4.636-4.636l4.636,4.636%20L36.757,29.191z'/%3E%3C/g%3E%3C/svg%3E");
1077
+ }
1078
+ article.paging {
1079
+ overflow: hidden !important;
1080
+ overflow-y: scroll !important;
1081
+ -webkit-box-orient: vertical !important;
1082
+ -webkit-direction: column !important;
1083
+ box-orient: vertical !important;
1084
+ direction: column !important;
1085
+ }
1086
+ article.paging > section {
1087
+ position: absolute;
1088
+ width: 100%;
1089
+ left: 0;
1090
+ right: 0;
1091
+ bottom: 0;
1092
+ top: 0;
1093
+ opacity: 1;
1094
+ padding: 0 0 100px 0 !important;
1095
+ overflow-x: hidden;
1096
+ overflow-y: scroll;
1097
+ -webkit-transition: all 0.15s ease-out;
1098
+ transition: all 0.15s ease-out;
1099
+ }
1100
+ /* Scaling needed to fix overflow bug in mobile Safari: */
1101
+ article.paging.horizontal > section.previous {
1102
+ -webkit-transform: translate3d(-100%, 0, 0);
1103
+ transform: translate3d(-100%, 0, 0);
1104
+ }
1105
+ article.paging.horizontal > section.current {
1106
+ -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
1107
+ transform: translate3d(0, 0, 0) scale(1, 1);
1108
+ }
1109
+ article.paging.horizontal > section.next {
1110
+ -webkit-transform: translate3d(100%, 0, 0) scale(0, 1);
1111
+ transform: translate3d(100%, 0, 0) scale(0, 1);
1112
+ }
1113
+ article.paging.vertical > section.previous {
1114
+ -webkit-transform: translate3d(0, -100%, 0);
1115
+ transform: translate3d(0, -100%, 0);
1116
+ }
1117
+ article.paging.vertical > section.current {
1118
+ -webkit-transform: translate3d(0, 0, 0);
1119
+ transform: translate3d(0, 0, 0);
1120
+ }
1121
+ article.paging.vertical > section.next {
1122
+ -webkit-transform: translate3d(0, -100%, 0);
1123
+ transform: translate3d(0, -100%, 0);
1124
+ }
1125
+ html[dir=rtl] .segmented.paging.horizontal {
1126
+ -webkit-flex-direction: row-reverse;
1127
+ flex-direction: row-reverse;
1128
+ }
1129
+ html[dir=rtl] .segmented.paging.horizontal .button:first-child {
1130
+ border: none !important;
1131
+ }
1132
+ html[dir=rtl] .segmented.paging.horizontal .button:last-child {
1133
+ border: none !important;
1134
+ }
1135
+ html[dir=rtl] .segmented.paging.horizontal > .button::before {
1136
+ top: -2px;
1137
+ }
1138
+ html[dir=rtl] article.paging.horizontal > section.previous {
1139
+ -webkit-transform: translate3d(100%, 0, 0);
1140
+ transform: translate3d(100%, 0, 0);
1141
+ }
1142
+ html[dir=rtl] article.paging.horizontal > section.current {
1143
+ -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
1144
+ transform: translate3d(0, 0, 0) scale(1, 1);
1145
+ }
1146
+ html[dir=rtl] article.paging.horizontal > section.next {
1147
+ -webkit-transform: translate3d(-100%, 0, 0);
1148
+ transform: translate3d(-100%, 0, 0);
1149
+ }
1150
+ html[dir=rtl] .segmented.paging.horizontal > .button::before {
1151
+ -webkit-transform: rotate(180deg);
1152
+ }
1153
+ /* ==============================
1154
+ Toolbar
1155
+ =========================== */
1156
+ .toolbar {
1157
+ position: fixed;
1158
+ bottom: 0;
1159
+ left: 0;
1160
+ right: 0;
1161
+ height: 45px;
1162
+ padding: 0 15px;
1163
+ background-color: #f7f7f7;
1164
+ border-top: solid 1px #a7a7aa;
1165
+ overflow: hidden;
1166
+ -webkit-box-sizing: border-box;
1167
+ box-sizing: border-box;
1168
+ display: flex;
1169
+ display: -webkit-flex;
1170
+ display: -webkit-box;
1171
+ -webkit-box-orient: horizontal;
1172
+ -webkit-flex-direction: row;
1173
+ flex-direction: row;
1174
+ -webkit-justify-content: start;
1175
+ justify-content: flex-start;
1176
+ -webkit-box-align: center;
1177
+ -webkit-align-items: center;
1178
+ align-items: center;
1179
+ -webkit-transition: all 0.15s ease-out;
1180
+ transition: all 0.15s ease-out;
1181
+ -webkit-transform: translate3d(0, 0, 0);
1182
+ transform: translate3d(0, 0, 0);
1183
+ }
1184
+ .toolbar > .button {
1185
+ margin-right: 20px;
1186
+ color: #007aff;
1187
+ }
1188
+ .splitlayout > .master + .toolbar {
1189
+ left: 0;
1190
+ width: 320px;
1191
+ border-right: solid 1px #c8c8c7 !important;
1192
+ }
1193
+ .splitlayout > .detail + .toolbar {
1194
+ left: 320px;
1195
+ }
1196
+ article.has-toolbar {
1197
+ bottom: 45px !important;
1198
+ }
1199
+ div.toolbar.current {
1200
+ -webkit-transform: translate3d(0, 0, 0) !important;
1201
+ transform: translate3d(0, 0, 0) !important;
1202
+ }
1203
+ div.toolbar.next {
1204
+ -webkit-transform: translate3d(101%, 0, 0) !important;
1205
+ transform: translate3d(101%, 0, 0) !important;
1206
+ }
1207
+ div.toolbar.previous {
1208
+ -webkit-transform: translate3d(-101%, 0, 0) !important;
1209
+ transform: translate3d(-101%, 0, 0) !important;
1210
+ }
1211
+ html[dir=rtl] .splitlayout > .master + .toolbar {
1212
+ right: 0;
1213
+ left: 320px;
1214
+ width: 320px;
1215
+ border-right: none;
1216
+ border-left: solid 1px #c8c8c7 !important;
1217
+ }
1218
+ html[dir=rtl] .splitlayout > .detail + .toolbar {
1219
+ right: 320px;
1220
+ left: 0;
1221
+ }
1222
+ /* ==============================
1223
+ Split Layout
1224
+ =========================== */
1225
+ body.splitlayout {
1226
+ display: flex;
1227
+ display: -webkit-flex;
1228
+ display: -webkit-box;
1229
+ -webkit-box-orient: horizontal;
1230
+ -webkit-flex-direction: row;
1231
+ flex-direction: row;
1232
+ -webkit-justify-content: start;
1233
+ justify-content: flex-start;
1234
+ -webkit-box-align: stretch;
1235
+ -webkit-align-items: stretch;
1236
+ align-items: stretch;
1237
+ }
1238
+ body.splitlayout > nav {
1239
+ background-color: #f7f7f7;
1240
+ border-bottom: solid 1px #a7a7aa;
1241
+ }
1242
+ body.splitlayout > nav:first-of-type {
1243
+ width: 320px;
1244
+ right: auto;
1245
+ border-right: solid 1px #c8c8c7 !important;
1246
+ }
1247
+ body.splitlayout > nav:last-of-type {
1248
+ left: 320px;
1249
+ }
1250
+ body.splitlayout > nav h1 {
1251
+ z-index: auto;
1252
+ text-align: center;
1253
+ }
1254
+ body.splitlayout > article.master {
1255
+ top: 45px;
1256
+ left: 0;
1257
+ bottom: 0;
1258
+ right: 320px;
1259
+ -webkit-box-sizing: border-box;
1260
+ box-sizing: border-box;
1261
+ width: 320px;
1262
+ border-right: solid 1px #c8c8c7 !important;
1263
+ }
1264
+ body.splitlayout > article.detail {
1265
+ top: 45px;
1266
+ left: 320px !important;
1267
+ bottom: 0;
1268
+ left: 0;
1269
+ -webkit-box-flex: 1;
1270
+ -webkit-flex: 1;
1271
+ flex: 1;
1272
+ }
1273
+ html[dir=rtl] body.splitlayout > nav:first-of-type {
1274
+ right: 0;
1275
+ left: 320px;
1276
+ border-right: none;
1277
+ border-left: solid 1px #c8c8c7 !important;
1278
+ }
1279
+ html[dir=rtl] body.splitlayout > nav:last-of-type {
1280
+ left: 0;
1281
+ right: 320px;
1282
+ }
1283
+ html[dir=rtl] body.splitlayout > article.master {
1284
+ left: 320px !important;
1285
+ right: 0 !important;
1286
+ border-right: none !important;
1287
+ border-left: solid 1px #c8c8c7 !important;
1288
+ }
1289
+ html[dir=rtl] body.splitlayout > article.detail {
1290
+ right: 320px !important;
1291
+ left: 0 !important;
1292
+ }
1293
+ @media only screen and (max-device-width: 320px) and (orientation: portrait) {
1294
+ .splitlayout > article.master {
1295
+ right: 260px !important;
1296
+ width: 260px;
1297
+ }
1298
+ .splitlayout > article.detail {
1299
+ left: 260px !important;
1300
+ }
1301
+ .splitlayout > nav:first-of-type {
1302
+ width: 260px !important;
1303
+ }
1304
+ .splitlayout > nav:last-of-type {
1305
+ left: 260px !important;
1306
+ }
1307
+ }
1308
+ /* ==============================
1309
+ Mask Control
1310
+ =========================== */
1311
+ .mask {
1312
+ display: block;
1313
+ background-color: #000;
1314
+ position: absolute;
1315
+ top: 0;
1316
+ bottom: 0;
1317
+ left: 0;
1318
+ right: 0;
1319
+ width: 100%;
1320
+ height: 100%;
1321
+ z-index: 9999;
1322
+ cursor: pointer;
1323
+ }
1324
+ /* ==============================
1325
+ Busy Control
1326
+ =========================== */
1327
+ @-webkit-keyframes busyAnim {
1328
+ 0% {
1329
+ -webkit-transform: rotate(0deg);
1330
+ }
1331
+ 100% {
1332
+ -webkit-transform: rotate(360deg);
1333
+ }
1334
+ }
1335
+ @keyframes busyAnim {
1336
+ 0% {
1337
+ transform: rotate(0deg);
1338
+ }
1339
+ 100% {
1340
+ transform: rotate(360deg);
1341
+ }
1342
+ }
1343
+ .busy {
1344
+ display: block;
1345
+ position: relative;
1346
+ width: 20px;
1347
+ height: 20px;
1348
+ -webkit-animation: busyAnim 100s linear infinite;
1349
+ animation: busyAnim 2s linear infinite;
1350
+ margin-left: auto;
1351
+ margin-right: auto;
1352
+ background-color: #000000;
1353
+ -webkit-mask-position: 50% 50%;
1354
+ -webkit-mask-size: 90% 90%;
1355
+ -webkit-mask-repeat: no-repeat;
1356
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'translate%2821,21%29'%3E%3Cg%20stroke-width%3D'4'%20stroke-linecap%3D'round'%20stroke%3D'rgb%280,%200,%200%29'%3E%3Cline%20id%3D'tine1'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%280,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine2'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-36,%200,%200%29'%20opacity%3D'.9'%3E%3C/line%3E%3Cline%20id%3D'tine3'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-72,%200,%200%29'%20opacity%3D'.8'%3E%3C/line%3E%3Cline%20id%3D'tine4'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-108,%200,%200%29'%20opacity%3D'.7'%3E%3C/line%3E%3Cline%20id%3D'tine5'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-144,%200,%200%29'%20opacity%3D'.6'%3E%3C/line%3E%3Cline%20id%3D'tine6'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-180,%200,%200%29'%20opacity%3D'.5'%3E%3C/line%3E%3Cline%20id%3D'tine7'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-216,%200,%200%29'%20opacity%3D'.4'%3E%3C/line%3E%3Cline%20id%3D'tine8'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-252,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine9'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-288,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine10'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-324,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1357
+ }
1358
+ .busy.align-flush {
1359
+ position: absolute;
1360
+ right: 15px;
1361
+ }
1362
+ /* ==============================
1363
+ Popover Control
1364
+ =========================== */
1365
+ .popover {
1366
+ width: 280px;
1367
+ background-color: #e7e9ee;
1368
+ border-radius: 10px;
1369
+ height: 250px;
1370
+ max-height: 300px;
1371
+ position: absolute;
1372
+ padding-bottom: 10px;
1373
+ z-index: 111111;
1374
+ }
1375
+ .popover::before {
1376
+ display: block;
1377
+ content: '';
1378
+ width: 15px;
1379
+ height: 15px;
1380
+ background-color: #f5f5f6;
1381
+ -webkit-transform: rotate(45deg);
1382
+ margin: 0 auto;
1383
+ position: absolute;
1384
+ top: -7px;
1385
+ left: 49%;
1386
+ z-index: -1;
1387
+ }
1388
+ .popover header {
1389
+ background-color: #f5f5f6;
1390
+ border-top-left-radius: 10px;
1391
+ border-top-right-radius: 10px;
1392
+ padding: 1px 10px;
1393
+ -webkit-box-sizing: border-box;
1394
+ box-sizing: border-box;
1395
+ width: 100%;
1396
+ }
1397
+ .popover header h1 {
1398
+ font-size: 12pt;
1399
+ text-align: center;
1400
+ }
1401
+ .popover > section {
1402
+ overflow-x: hidden;
1403
+ overflow-y: auto;
1404
+ -webkit-overflow-scrolling: touch;
1405
+ padding-bottom: 0;
1406
+ position: absolute;
1407
+ top: 40px;
1408
+ bottom: 10px;
1409
+ left: 0;
1410
+ right: 0;
1411
+ }
1412
+ /* ==============================
1413
+ Popup Control
1414
+ =========================== */
1415
+ .popup {
1416
+ display: block;
1417
+ -webkit-box-sizing: border-box;
1418
+ box-sizing: border-box;
1419
+ width: 300px;
1420
+ border-radius: 10px;
1421
+ padding: 0px;
1422
+ background-color: #e3e3e3;
1423
+ position: absolute;
1424
+ z-index: 10000;
1425
+ margin-left: auto;
1426
+ margin-right: auto;
1427
+ -webkit-transition: all 0.25s ease-out;
1428
+ transition: all 0.25s ease-out;
1429
+ -webkit-trasform-origin: center center;
1430
+ trasform-origin: center center;
1431
+ }
1432
+ .popup.closed {
1433
+ -webkit-transform: scale(0);
1434
+ transform: scale(0);
1435
+ }
1436
+ .popup.opened {
1437
+ display: block;
1438
+ opacity: 1;
1439
+ -webkit-transform: scale(1);
1440
+ transform: scale(1);
1441
+ }
1442
+ .popup.noTitle {
1443
+ padding-top: 20px;
1444
+ }
1445
+ .popup > .panel {
1446
+ display: flex;
1447
+ display: -webkit-flex;
1448
+ display: -webkit-box;
1449
+ -webkit-box-orient: vertical;
1450
+ -webkit-flex-direction: column;
1451
+ flex-direction: column;
1452
+ -webkit-justify-content: center;
1453
+ justify-content: center;
1454
+ -webkit-box-align: start;
1455
+ -webkit-align-items: flex-start;
1456
+ align-items: flex-start;
1457
+ }
1458
+ .popup > .panel > p {
1459
+ padding: 0 15px;
1460
+ margin-top: 0;
1461
+ text-align: center;
1462
+ }
1463
+ .popup header,
1464
+ .popup footer {
1465
+ display: flex;
1466
+ display: -webkit-flex;
1467
+ display: -webkit-box;
1468
+ -webkit-box-orient: horizontal;
1469
+ -webkit-flex-direction: row;
1470
+ flex-direction: row;
1471
+ -webkit-justify-content: distribute;
1472
+ justify-content: space-around;
1473
+ -webkit-box-align: stretch;
1474
+ -webkit-align-items: stretch;
1475
+ align-items: stretch;
1476
+ width: 100% !important;
1477
+ box-sizing: border-box;
1478
+ }
1479
+ .popup .panel > header {
1480
+ padding: 8px 16px;
1481
+ }
1482
+ .popup .panel > header > h1 {
1483
+ position: static;
1484
+ text-align: center;
1485
+ margin: 0;
1486
+ width: 100% !important;
1487
+ line-height: 32pt;
1488
+ font-size: 16pt;
1489
+ font-weight: bold;
1490
+ }
1491
+ .popup footer {
1492
+ width: 100%;
1493
+ padding: 0;
1494
+ }
1495
+ .popup footer > .button {
1496
+ display: block !important;
1497
+ -webkit-box-flex: 1 !important;
1498
+ -webkit-flex: 1 !important;
1499
+ flex: 1 !important;
1500
+ height: 100%;
1501
+ line-height: 30pt;
1502
+ max-width: 320px !important;
1503
+ font-weight: bold;
1504
+ border-top: solid 1px #b5b5b5;
1505
+ color: #2d2d2d;
1506
+ }
1507
+ .popup footer > .button + .button {
1508
+ border-left: solid 1px #b5b5b5;
1509
+ }
1510
+ /* ==============================
1511
+ Deletable Lists
1512
+ =========================== */
1513
+ .list li > .deletion-indicator {
1514
+ display: inline-flex;
1515
+ display: -webkit-inline-flex;
1516
+ display: -webkit-box;
1517
+ -webkit-justify-content: center;
1518
+ justify-content: center;
1519
+ -webkit-box-align: center;
1520
+ -webkit-align-items: center;
1521
+ align-items: center;
1522
+ color: #ffffff;
1523
+ border: solid 1px #ff3b30;
1524
+ background-color: #ff3b30;
1525
+ border-radius: 50%;
1526
+ width: 20px;
1527
+ height: 20px;
1528
+ float: left;
1529
+ margin-right: 6px;
1530
+ -webkit-transition: all 0.25s ease-out;
1531
+ transition: all 0.25s ease-out;
1532
+ margin-left: -40px;
1533
+ cursor: pointer;
1534
+ position: relative;
1535
+ z-index: 100;
1536
+ }
1537
+ .list li > .deletion-indicator::before {
1538
+ display: block;
1539
+ content: '—';
1540
+ font-size: 12pt;
1541
+ position: absolute;
1542
+ min-width: 20px;
1543
+ text-align: center;
1544
+ width: 10px;
1545
+ height: 10px;
1546
+ margin-top: -1px;
1547
+ }
1548
+ .list li > .move-up,
1549
+ .list li > .move-down {
1550
+ width: 21px;
1551
+ height: 21px;
1552
+ display: inline-block;
1553
+ position: relative;
1554
+ float: right;
1555
+ margin-top: -20px;
1556
+ -webkit-transition: all 0.25s ease-out;
1557
+ transition: all 0.25s ease-out;
1558
+ -webkit-transform: translate3d(100px, 0, 0);
1559
+ transform: translate3d(100px, 0, 0);
1560
+ }
1561
+ .list li > .move-up::before,
1562
+ .list li > .move-down::before {
1563
+ display: block;
1564
+ content: '';
1565
+ width: 21px;
1566
+ height: 21px;
1567
+ position: absolute;
1568
+ background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22367px%22%20height%3D%22367px%22%20viewBox%3D%220%200%20367%20367%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Sortable%22%20transform%3D%22translate%2813.000000,%2013.000000%29%22%20stroke%3D%22%23007aff%22%20stroke-width%3D%2225%22%3E%3Ccircle%20id%3D%22Oval-1%22%20cx%3D%22170.5%22%20cy%3D%22170.5%22%20r%3D%22170.5%22%3E%3C/circle%3E%3Cpath%20d%3D%22M55.3736267,209.778395%20L172.745285,100.706186%20L286.306656,209.611568%22%20id%3D%22Path-2%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1569
+ background-repeat: no-repeat;
1570
+ background-position: center center;
1571
+ background-size: 100% 100%;
1572
+ }
1573
+ .list li > .move-down {
1574
+ margin-right: 10px;
1575
+ -webkit-transform: translate3d(120px, 0, 0) rotate(180deg);
1576
+ transform: translate3d(120px, 0, 0) rotate(180deg);
1577
+ }
1578
+ .list li > .button.delete {
1579
+ float: right;
1580
+ background-color: #ff0000;
1581
+ color: #ffffff;
1582
+ text-align: center;
1583
+ -webkit-box-sizing: border-box;
1584
+ box-sizing: border-box;
1585
+ width: 80px;
1586
+ position: absolute;
1587
+ right: 0;
1588
+ top: 0;
1589
+ bottom: 0;
1590
+ display: flex;
1591
+ display: -webkit-box;
1592
+ display: -webkit-flex;
1593
+ -webkit-box-orient: vertical;
1594
+ -webkit-flex-direction: column;
1595
+ flex-direction: column;
1596
+ -webkit-justify-content: center;
1597
+ justify-content: center;
1598
+ -webkit-box-align: center;
1599
+ -webkit-align-items: center;
1600
+ align-items: center;
1601
+ -webkit-transition: all 0.25s ease-out;
1602
+ transition: all 0.25s ease-out;
1603
+ -webkit-transform: translate3d(80px, 0, 0);
1604
+ transform: translate3d(80px, 0, 0);
1605
+ cursor: pointer;
1606
+ font-family: 'HelveticaNeue-Light';
1607
+ font-weight: 200;
1608
+ }
1609
+ .list li:first-of-type > .move-up {
1610
+ opacity: .35;
1611
+ }
1612
+ .list li:last-of-type > .move-down {
1613
+ opacity: .35;
1614
+ }
1615
+ .list.editable > li,
1616
+ .list.deletable > li {
1617
+ -webkit-transition: all 0.25s ease-out;
1618
+ transition: all 0.25s ease-out;
1619
+ -webkit-transform: translate3d(0, 0, 0);
1620
+ transform: translate3d(0, 0, 0);
1621
+ }
1622
+ .list.editable > li.selected,
1623
+ .list.deletable > li.selected {
1624
+ margin-right: 80px;
1625
+ background-color: #ffffff;
1626
+ }
1627
+ .list.editable > li.selected h3,
1628
+ .list.deletable > li.selected h3,
1629
+ .list.editable > li.selected h4,
1630
+ .list.deletable > li.selected h4,
1631
+ .list.editable > li.selected p,
1632
+ .list.deletable > li.selected p {
1633
+ position: relative;
1634
+ -webkit-transform: translate3d(0, 0, 0);
1635
+ transform: translate3d(0, 0, 0);
1636
+ -webkit-transition: all 0.25s ease-out;
1637
+ transition: all 0.25s ease-out;
1638
+ }
1639
+ .list.editable > li.selected > .button.delete,
1640
+ .list.deletable > li.selected > .button.delete {
1641
+ -webkit-transform: translate3d(80px, 0, 0);
1642
+ transform: translate3d(80px, 0, 0);
1643
+ }
1644
+ .list.editable > li.selected > .deletion-indicator,
1645
+ .list.deletable > li.selected > .deletion-indicator {
1646
+ -webkit-transform: rotate(90deg);
1647
+ }
1648
+ .list.showIndicators .deletion-indicator {
1649
+ margin-left: 0;
1650
+ }
1651
+ .list.showIndicators .move-up {
1652
+ -webkit-transform: translate3d(0, 0, 0);
1653
+ transform: translate3d(0, 0, 0);
1654
+ }
1655
+ .list.showIndicators .move-down {
1656
+ -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
1657
+ transform: translate3d(0, 0, 0) rotate(180deg);
1658
+ }
1659
+ .list.showIndicators > li[data-goto] {
1660
+ padding-left: 40px;
1661
+ }
1662
+ .list.showIndicators > li[data-goto] .deletion-indicator {
1663
+ left: 10px;
1664
+ }
1665
+ .list.showIndicators > li > h3 {
1666
+ width: 55%;
1667
+ white-space: nowrap;
1668
+ overflow: hidden;
1669
+ text-overflow: ellipsis;
1670
+ }
1671
+ .list > li[data-goto] > .deletion-indicator {
1672
+ position: absolute;
1673
+ left: -40px;
1674
+ margin-left: 0px;
1675
+ }
1676
+ .list > li[data-goto] > .deletion-indicator + div + aside {
1677
+ margin: -20px;
1678
+ position: relative;
1679
+ right: 15px;
1680
+ }
1681
+ html[dir=rtl] .list > li > .deletion-indicator {
1682
+ float: right;
1683
+ margin-right: auto;
1684
+ margin-left: -20px;
1685
+ right: -40px;
1686
+ }
1687
+ html[dir=rtl] .list > li > .move-up {
1688
+ float: left !important;
1689
+ -webkit-transform: translate3d(-100px, 0, 0);
1690
+ transform: translate3d(-100px, 0, 0);
1691
+ }
1692
+ html[dir=rtl] .list > li > .move-down {
1693
+ float: left !important;
1694
+ -webkit-transform: translate3d(-140px, 0, 0) rotate(180deg);
1695
+ transform: translate3d(-140px, 0, 0) rotate(180deg);
1696
+ }
1697
+ html[dir=rtl] .list > li > .button.delete {
1698
+ -webkit-transform: translate3d(-80px, 0, 0);
1699
+ transform: translate3d(-80px, 0, 0);
1700
+ left: 0;
1701
+ right: auto;
1702
+ }
1703
+ html[dir=rtl].deletable.showIndicators > li,
1704
+ html[dir=rtl].editable.showIndicators > li {
1705
+ margin-right: 0px;
1706
+ }
1707
+ html[dir=rtl] .list.deletable > li.selected,
1708
+ html[dir=rtl] .list.editable > li.selected {
1709
+ margin-right: 0 !important;
1710
+ }
1711
+ html[dir=rtl] .list.deletable > li.selected > .button.delete,
1712
+ html[dir=rtl] .list.editable > li.selected > .button.delete {
1713
+ -webkit-transform: translate3d(0, 0, 0) !important;
1714
+ transform: translate3d(0, 0, 0) !important;
1715
+ }
1716
+ html[dir=rtl] .list.deletable > li > .button.delete,
1717
+ html[dir=rtl] .list.editable > li > .button.delete {
1718
+ -webkit-transform: translate3d(-80px, 0, 0) !important;
1719
+ transform: translate3d(-80px, 0, 0) !important;
1720
+ }
1721
+ html[dir=rtl] .list.showIndicators > li.selected,
1722
+ html[dir=rtl] .list.deletable.showIndicators > li.selected,
1723
+ html[dir=rtl] .list.editable.showIndicators > li.selected {
1724
+ margin-right: 0;
1725
+ }
1726
+ html[dir=rtl] .list.showIndicators > li.selected > .button.delete,
1727
+ html[dir=rtl] .list.deletable.showIndicators > li.selected > .button.delete,
1728
+ html[dir=rtl] .list.editable.showIndicators > li.selected > .button.delete {
1729
+ -webkit-transform: translate3d(0, 0, 0) !important;
1730
+ transform: translate3d(0, 0, 0) !important;
1731
+ }
1732
+ html[dir=rtl] .list.showIndicators > li.selected > .move-up,
1733
+ html[dir=rtl] .list.deletable.showIndicators > li.selected > .move-up,
1734
+ html[dir=rtl] .list.editable.showIndicators > li.selected > .move-up {
1735
+ -webkit-transform: translate3d(90px, 0, 0);
1736
+ transform: translate3d(90px, 0, 0);
1737
+ }
1738
+ html[dir=rtl] .list.showIndicators > li.selected > .move-down,
1739
+ html[dir=rtl] .list.deletable.showIndicators > li.selected > .move-down,
1740
+ html[dir=rtl] .list.editable.showIndicators > li.selected > .move-down {
1741
+ -webkit-transform: translate3d(100px, 0, 0) rotate(180deg);
1742
+ transform: translate3d(100px, 0, 0) rotate(180deg);
1743
+ }
1744
+ html[dir=rtl] .list.showIndicators > li > .deletion-indicator,
1745
+ html[dir=rtl] .list.deletable.showIndicators > li > .deletion-indicator,
1746
+ html[dir=rtl] .list.editable.showIndicators > li > .deletion-indicator {
1747
+ right: 0px !important;
1748
+ margin-left: 10px;
1749
+ }
1750
+ html[dir=rtl] .list.showIndicators > li > .move-up,
1751
+ html[dir=rtl] .list.deletable.showIndicators > li > .move-up,
1752
+ html[dir=rtl] .list.editable.showIndicators > li > .move-up {
1753
+ -webkit-transform: translate3d(10px, 0, 0);
1754
+ transform: translate3d(10px, 0, 0);
1755
+ }
1756
+ html[dir=rtl] .list.showIndicators > li > .move-down,
1757
+ html[dir=rtl] .list.deletable.showIndicators > li > .move-down,
1758
+ html[dir=rtl] .list.editable.showIndicators > li > .move-down {
1759
+ -webkit-transform: translate3d(20px, 0, 0) rotate(180deg);
1760
+ transform: translate3d(20px, 0, 0) rotate(180deg);
1761
+ }
1762
+ html[dir=rtl] .list.showIndicators > li > .button.delete,
1763
+ html[dir=rtl] .list.deletable.showIndicators > li > .button.delete,
1764
+ html[dir=rtl] .list.editable.showIndicators > li > .button.delete {
1765
+ right: auto;
1766
+ left: 0 !important;
1767
+ }
1768
+ /* ==============================
1769
+ Form Elements
1770
+ =========================== */
1771
+ input[type=text],
1772
+ input[type=email],
1773
+ input[type=password],
1774
+ input[type=text],
1775
+ input[type=url],
1776
+ input[type=number],
1777
+ textarea {
1778
+ -webkit-appearance: none;
1779
+ box-shadow: none;
1780
+ border: none;
1781
+ }
1782
+ .isiOS:not(.isDesktop) .select-box > select {
1783
+ opacity: .01;
1784
+ height: 1px;
1785
+ width: 1px;
1786
+ -wekbit-appearance: none;
1787
+ position: absolute;
1788
+ }
1789
+ .isDesktop .select-box > select {
1790
+ max-width: 120px;
1791
+ }
1792
+ .isDesktop .select-box-label {
1793
+ display: none !important;
1794
+ }
1795
+ .select-box-label {
1796
+ border: solid 1px #007aff;
1797
+ border-radius: 3px;
1798
+ padding: 2px 30px 2px 10px;
1799
+ font-size: 11px;
1800
+ background-image: -webkit-linear-gradient(top, #007aff, #007aff);
1801
+ background-position: top right;
1802
+ background-size: 20px 100%;
1803
+ background-repeat: no-repeat;
1804
+ height: 20px;
1805
+ box-sizing: border-box;
1806
+ min-width: 100px;
1807
+ max-width: 160px;
1808
+ width: auto;
1809
+ cursor: pointer;
1810
+ display: inline-block;
1811
+ overflow-x: hidden;
1812
+ text-overflow: ellipsis;
1813
+ white-space: nowrap;
1814
+ position: relative;
1815
+ }
1816
+ .select-box-label::after {
1817
+ content: '';
1818
+ display: block;
1819
+ height: 10px;
1820
+ width: 1px;
1821
+ border-top: solid 7px #fff;
1822
+ border-left: solid 5px transparent;
1823
+ border-right: solid 5px transparent;
1824
+ position: absolute;
1825
+ top: 6px;
1826
+ right: 4px;
1827
+ }
1828
+ .searchBar {
1829
+ width: 100%;
1830
+ -webkit-box-sizing: border-box;
1831
+ height: 45px;
1832
+ background-color: #c9c9ce;
1833
+ padding: 5px 10px;
1834
+ }
1835
+ input[type="search"] {
1836
+ display: block;
1837
+ background-color: #fff;
1838
+ padding: 7px 0 7px 10px;
1839
+ border-radius: 5px;
1840
+ border-color: transparent;
1841
+ width: 100%;
1842
+ -webkit-appearance: none;
1843
+ padding-left: 20px;
1844
+ -webkit-transtion: all 0.5s ease-out;
1845
+ background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='48px' height='48px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><path d='M42.71,38.482L32.478,28.208c1.598-2.385,2.532-5.249,2.532-8.329c0-8.273-6.73-15.004-15.004-15.004 S5.001,11.606,5.001,19.879c0,8.274,6.731,15.004,15.004,15.004c3.055,0,5.896-0.923,8.27-2.497l10.236,10.279 c0.858,0.861,2.19,0.927,2.977,0.143l1.354-1.349C43.629,40.678,43.569,39.345,42.71,38.482z M10.001,19.879 c0-5.517,4.488-10.004,10.004-10.004S30.01,14.363,30.01,19.879c0,5.516-4.487,10.004-10.004,10.004S10.001,25.396,10.001,19.879z' fill='#bbb' /></svg>");
1846
+ background-position: 5px center;
1847
+ text-align: left;
1848
+ background-size: 14px 14px;
1849
+ background-repeat: no-repeat;
1850
+ -webkit-user-select: ignore;
1851
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1852
+ }
1853
+ input[type="search"]:focus {
1854
+ outline: none;
1855
+ }
1856
+ /* ==============================
1857
+ Icon
1858
+ =========================== */
1859
+ /*
1860
+ Put a class or id on each icon.
1861
+ The use a png or svg image as
1862
+ a background image. Apply a
1863
+ background color too.
1864
+ See page article of demo
1865
+ paging control for example.
1866
+ */
1867
+ .icon {
1868
+ width: 40px;
1869
+ height: 40px;
1870
+ background-repeat: no-repeat;
1871
+ background-position: center center;
1872
+ background-size: auto 70%;
1873
+ border-radius: 10px;
1874
+ }
1875
+ /* ==============================
1876
+ Range Control
1877
+ =========================== */
1878
+ input[type="range"] {
1879
+ -webkit-appearance: none !important;
1880
+ outline: none;
1881
+ display: block;
1882
+ width: auto;
1883
+ height: 4px;
1884
+ margin-top: 20px;
1885
+ margin-bottom: 20px;
1886
+ border-radius: 4px;
1887
+ background-color: #b3b3b4;
1888
+ background-image: -webkit-linear-gradient(top, #007aff, #007aff);
1889
+ background-size: 0px 4px;
1890
+ background-position: left center;
1891
+ background-repeat: no-repeat;
1892
+ }
1893
+ input[type="range"]::-webkit-slider-thumb {
1894
+ -webkit-appearance: none;
1895
+ display: block;
1896
+ width: 27px;
1897
+ height: 27px;
1898
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
1899
+ background-color: #ffffff;
1900
+ border-radius: 50%;
1901
+ -webkit-transition: -webkit-transform 0.1s ease-in-out;
1902
+ transition: -webkit-transform 0.1s ease-in-out;
1903
+ }
1904
+ .isDesktop input[type="range"]::-webkit-slider-thumb:hover {
1905
+ background-color: #f9f9f9;
1906
+ }
1907
+ html[dir=rtl] input[type="range"] {
1908
+ background-position: right center;
1909
+ }
1910
+ /* ==============================
1911
+ Select List
1912
+ =========================== */
1913
+ .list.select li > input {
1914
+ display: none;
1915
+ }
1916
+ .list.select li.selected::after {
1917
+ display: block;
1918
+ content: '';
1919
+ width: 20px;
1920
+ height: 20px;
1921
+ -webkit-mask-position: 50% 50%;
1922
+ -webkit-mask-size: 90% 90%;
1923
+ -webkit-mask-repeat: no-repeat;
1924
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'32'%20height%3D'26'%20viewBox%3D'0%200%2032%2026'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%280.13135593,-0.34322034%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000000%3Bstroke-width%3A5'%3E%3Cpath%20d%3D'm%2010.500868,22.761362%2011.023688,0%200,-27.9582975'%20transform%3D'matrix%280.70710678,0.70710678,-0.70710678,0.70710678,10.899977,-8.7504466%29'%20id%3D'Rectangle-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1925
+ float: right;
1926
+ margin-top: -20px;
1927
+ background-color: #007aff;
1928
+ }
1929
+ .isDesktop .list.select li.selected:hover {
1930
+ background-color: #d9d9d9;
1931
+ }
1932
+ html[dir=rtl] .list.select li.selected::after {
1933
+ float: left;
1934
+ }
1935
+ /* ==============================
1936
+ Sheet Control
1937
+ =========================== */
1938
+ .sheet {
1939
+ position: absolute;
1940
+ top: 45px;
1941
+ left: 0;
1942
+ bottom: 0;
1943
+ right: 0;
1944
+ background-color: rgba(156, 159, 164, 0.5);
1945
+ -webkit-transition: all 0.25s ease-in;
1946
+ transition: all 0.25s ease-in;
1947
+ -webkit-transform: translate3d(0, 100%, 0);
1948
+ transform: translate3d(0, 100%, 0);
1949
+ visibility: hidden;
1950
+ }
1951
+ .sheet div.handle {
1952
+ display: block;
1953
+ text-align: center;
1954
+ margin: 0 auto;
1955
+ color: #ffffff;
1956
+ cursor: pointer;
1957
+ height: 20pt;
1958
+ background-color: #ffffff;
1959
+ -webkit-mask-position: 50% 50%;
1960
+ -webkit-mask-size: 90% 90%;
1961
+ -webkit-mask-repeat: no-repeat;
1962
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'76'%20height%3D'27'%20viewBox%3D'0%200%2076%2027'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-283.79661,-123.77966%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20transform%3D'translate%28254,108%29'%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A12%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around'%3E%3Cpath%20d%3D'm%2036.25,26.242187%2031.394531,0%2030.53125,0'%20id%3D'Path-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1963
+ margin: 10px auto 0;
1964
+ }
1965
+ .sheet.opened {
1966
+ visibility: visible;
1967
+ -webkit-transform: translate3d(0, 0, 0);
1968
+ transform: translate3d(0, 0, 0);
1969
+ }
1970
+ .sheet.opened div.handle {
1971
+ background-color: #ffffff;
1972
+ -webkit-mask-position: 50% 50%;
1973
+ -webkit-mask-size: 90% 90%;
1974
+ -webkit-mask-repeat: no-repeat;
1975
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'76'%20height%3D'27'%20viewBox%3D'0%200%2076%2027'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-283.79661,-123.77966%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20transform%3D'translate%28254,108%29'%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A12%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around'%3E%3Cpath%20d%3D'm%2036.25,26.242187%2031.394531,7.972657%2030.53125,-8.425782'%20id%3D'Path-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1976
+ }
1977
+ .sheet .button {
1978
+ color: #585d63;
1979
+ border: solid 1px #585d63;
1980
+ border-radius: 20px;
1981
+ width: auto;
1982
+ height: auto;
1983
+ margin: 0 auto;
1984
+ padding: 10px 20px;
1985
+ }
1986
+ .isDesktop .sheet .button:hover,
1987
+ .sheet .button.selected {
1988
+ color: #ffffff;
1989
+ border-color: #ffffff;
1990
+ opacity: 1 !important;
1991
+ -webkit-transition: none;
1992
+ transition: none;
1993
+ }
1994
+ .sheet > section {
1995
+ position: absolute;
1996
+ top: 36px;
1997
+ left: 0;
1998
+ bottom: 0;
1999
+ height: auto;
2000
+ right: 0;
2001
+ }
2002
+ .sheet > section > h2 {
2003
+ text-align: center;
2004
+ }
2005
+ .sheet > section > .list {
2006
+ border: none;
2007
+ background-color: transparent !important;
2008
+ }
2009
+ .sheet > section > .list > li {
2010
+ border-bottom: solid 1px #585d63;
2011
+ background-color: transparent !important;
2012
+ }
2013
+ .sheet > section > .list > li::before {
2014
+ content: none;
2015
+ }
2016
+ article.current.blurred {
2017
+ -webkit-filter: blur(20px);
2018
+ -webkit-transition-duration: .15s;
2019
+ filter: blur(20px);
2020
+ transition-duration: .15s;
2021
+ }
2022
+ article.current.blurred.removeBlurSlow {
2023
+ -webkit-filter: blur(0px);
2024
+ -webkit-transition-duration: .35s;
2025
+ filter: blur(0px);
2026
+ transition-duration: .35s;
2027
+ }
2028
+ /* ==============================
2029
+ Slide-Out
2030
+ =========================== */
2031
+ .slide-out {
2032
+ position: absolute;
2033
+ top: 45px;
2034
+ left: 0;
2035
+ bottom: 0;
2036
+ background-color: #ffffff;
2037
+ z-index: 111111111;
2038
+ width: 100%;
2039
+ visibility: hidden;
2040
+ -webkit-transform: translate3d(-100%, 0, 0);
2041
+ transform: translate3d(-100%, 0, 0);
2042
+ -webkit-transition: all 0.25s ease-out;
2043
+ transition: all 0.25s ease-out;
2044
+ overflow-x: hidden;
2045
+ overflow-y: auto;
2046
+ -webkit-overflow-scrolling: touch;
2047
+ display: flex;
2048
+ display: -webkit-flex;
2049
+ display: -webkit-box;
2050
+ -webkit-box-orient: vertical;
2051
+ -webkit-flex-direction: column;
2052
+ flex-direction: column;
2053
+ -webkit-justify-content: center;
2054
+ justify-content: center;
2055
+ -webkit-box-align: start;
2056
+ -webkit-align-items: flex-start;
2057
+ align-items: flex-start;
2058
+ }
2059
+ .slide-out.open {
2060
+ visibility: visible;
2061
+ -webkit-transform: translate3d(0, 0, 0);
2062
+ transform: translate3d(0, 0, 0);
2063
+ }
2064
+ .slide-out > section {
2065
+ -webkit-box-flex: 1;
2066
+ -webkit-flex: 1;
2067
+ flex: 1;
2068
+ padding-bottom: 100px;
2069
+ overflow-x: hidden;
2070
+ overflow-y: auto;
2071
+ }
2072
+ .button.slide-out-button {
2073
+ position: absolute;
2074
+ z-index: 1111111;
2075
+ top: 5px;
2076
+ left: 15px;
2077
+ width: 35px;
2078
+ height: 35px;
2079
+ -webkit-box-sizing: border-box;
2080
+ box-sizing: border-box;
2081
+ padding: 0;
2082
+ }
2083
+ .button.slide-out-button::before {
2084
+ display: block;
2085
+ content: '';
2086
+ width: 35px;
2087
+ height: 35px;
2088
+ background-color: #000000;
2089
+ -webkit-mask-position: 50% 50%;
2090
+ -webkit-mask-size: 90% 90%;
2091
+ -webkit-mask-repeat: no-repeat;
2092
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2281px%22%20height%3D%2260px%22%20viewBox%3D%220%200%2081%2060%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22slideout%22%20fill%3D%22%23000000%22%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%220%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2226%22%20width%3D%2264.167%22%20height%3D%227.667%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2252%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
2093
+ }
2094
+ body.slide-out-app > article {
2095
+ display: none !important;
2096
+ }
2097
+ body.slide-out-app > article.show {
2098
+ display: block !important;
2099
+ /*margin-top: 20px !important;*/
2100
+ }
2101
+ body.slide-out-app > nav:not(:first-of-type) {
2102
+ display: none !important;
2103
+ }
2104
+ body.slide-out-app > nav:not(:first-of-type).show {
2105
+ display: block !important;
2106
+ z-index: 10000;
2107
+ }
2108
+ html[dir=rtl] .button.slide-out-button {
2109
+ right: 15px;
2110
+ left: auto;
2111
+ }
2112
+ html[dir=rtl] .slide-out {
2113
+ -webkit-transform: translate3d(100%, 0, 0);
2114
+ transform: translate3d(100%, 0, 0);
2115
+ }
2116
+ html[dir=rtl] .slide-out.open {
2117
+ -webkit-transform: translate3d(0, 0, 0);
2118
+ transform: translate3d(0, 0, 0);
2119
+ }
2120
+ /* ==============================
2121
+ Stepper Control
2122
+ =========================== */
2123
+ .stepper {
2124
+ display: flex;
2125
+ display: -webkit-flex;
2126
+ display: -webkit-box;
2127
+ -webkit-box-orient: horizontal;
2128
+ -webkit-flex-direction: row;
2129
+ flex-direction: row;
2130
+ -webkit-justify-content: center;
2131
+ justify-content: center;
2132
+ -webkit-box-align: start;
2133
+ -webkit-align-items: flex-start;
2134
+ align-items: flex-start;
2135
+ padding: 1px;
2136
+ }
2137
+ .stepper > input {
2138
+ margin: 0;
2139
+ display: none;
2140
+ }
2141
+ .stepper > label {
2142
+ display: block;
2143
+ -webkit-box-sizing: border-box;
2144
+ box-sizing: border-box;
2145
+ border: solid 1px #007aff;
2146
+ width: 40px;
2147
+ height: 30px;
2148
+ font: bold 16px/30px Helvetica;
2149
+ text-align: center;
2150
+ background-color: #ffffff;
2151
+ }
2152
+ .stepper > .button {
2153
+ display: inline-box;
2154
+ background-color: rgba(255, 255, 255, 0.35);
2155
+ width: 33px;
2156
+ height: 30px;
2157
+ border: solid 1px #007aff;
2158
+ border-radius: 4px;
2159
+ text-align: center;
2160
+ font-weight: bold;
2161
+ font-size: 20pt;
2162
+ line-height: 16pt;
2163
+ cursor: pointer !important;
2164
+ overflow: hidden;
2165
+ padding: 0;
2166
+ -webkit-box-sizing: border-box;
2167
+ box-sizing: border-box;
2168
+ color: #2d2d2d;
2169
+ }
2170
+ .stepper > .button:first-of-type {
2171
+ border-top-right-radius: 0;
2172
+ border-bottom-right-radius: 0;
2173
+ border-right: none;
2174
+ }
2175
+ .stepper > .button:last-of-type {
2176
+ border-top-left-radius: 0;
2177
+ border-bottom-left-radius: 0;
2178
+ border-left: none;
2179
+ }
2180
+ html[dir=rtl] .stepper > .button:first-of-type {
2181
+ border-radius: 4px;
2182
+ border-top-left-radius: 0;
2183
+ border-bottom-left-radius: 0;
2184
+ border-right: solid 1px #007aff;
2185
+ border-left: none;
2186
+ }
2187
+ html[dir=rtl] .stepper > .button:last-of-type {
2188
+ border-radius: 4px;
2189
+ border-top-right-radius: 0;
2190
+ border-bottom-right-radius: 0;
2191
+ border-left: solid 1px #007aff;
2192
+ border-right: none;
2193
+ }
2194
+ /* ==============================
2195
+ Switched List Items
2196
+ =========================== */
2197
+ .list > li.switched {
2198
+ -webkit-box-direction: reverse;
2199
+ display: flex;
2200
+ display: -webkit-flex;
2201
+ display: -webkit-box;
2202
+ -webkit-box-orient: horizontal;
2203
+ -webkit-flex-direction: row-reverse;
2204
+ flex-direction: row-reverse;
2205
+ }
2206
+ .list > li.switched h3 {
2207
+ width: auto;
2208
+ font-size: 15px;
2209
+ line-height: 26px;
2210
+ color: #007aff;
2211
+ white-space: nowrap;
2212
+ overflow: hidden;
2213
+ text-overflow: ellipsis;
2214
+ }
2215
+ .list > li.switched > h4 {
2216
+ width: 48%;
2217
+ text-align: right;
2218
+ margin-right: 10px;
2219
+ font-size: 19px;
2220
+ line-height: 24px;
2221
+ white-space: nowrap;
2222
+ overflow: hidden;
2223
+ text-overflow: ellipsis;
2224
+ max-width: 50%;
2225
+ color: #000000 !important;
2226
+ }
2227
+ /* ==============================
2228
+ Switches
2229
+ =========================== */
2230
+ .switch {
2231
+ display: inline-block;
2232
+ width: 54px;
2233
+ height: 32px;
2234
+ -webkit-box-sizing: border-box;
2235
+ box-sizing: border-box;
2236
+ border: solid 2px #e6e6e6;
2237
+ border-radius: 20px;
2238
+ position: relative;
2239
+ box-shadow: inset 0 0 0 15px #ffffff;
2240
+ cursor: pointer;
2241
+ -webkit-animation-duration: .65s;
2242
+ -webkit-animation-timing-function: ease-in-out;
2243
+ -webkit-animation-fill-mode: forwards;
2244
+ -webkit-animation-name: switchAnimationOff;
2245
+ animation-duration: .65s;
2246
+ animation-timing-function: ease-in-out;
2247
+ animation-fill-mode: forwards;
2248
+ animation-name: switchAnimationOff;
2249
+ }
2250
+ .switch > em {
2251
+ display: block;
2252
+ width: 27px;
2253
+ height: 27px;
2254
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
2255
+ background-color: #ffffff;
2256
+ border-radius: 50%;
2257
+ -webkit-transition: -webkit-transform 0.1s ease-in-out;
2258
+ -webkit-animation-duration: .45s;
2259
+ -webkit-animation-timing-function: ease-in-out;
2260
+ -webkit-animation-fill-mode: forwards;
2261
+ -webkit-animation-name: switchThumbAnimationOff;
2262
+ transition: -webkit-transform 0.1s ease-in-out;
2263
+ animation-duration: .45s;
2264
+ animation-timing-function: ease-in-out;
2265
+ animation-fill-mode: forwards;
2266
+ animation-name: switchThumbAnimationOff;
2267
+ pointer-events: none;
2268
+ }
2269
+ .switch > input {
2270
+ display: none;
2271
+ }
2272
+ .switch.on {
2273
+ border-color: #6ee102;
2274
+ box-shadow: inset 0 0 0 15px #6ee102;
2275
+ -webkit-animation-name: none;
2276
+ animation-name: none;
2277
+ }
2278
+ .switch.on > em {
2279
+ -webkit-transform: translate3d(23px, 0, 0);
2280
+ -webkit-transition-duration: .2s;
2281
+ -webkit-animation-duration: .45s;
2282
+ -webkit-animation-timing-function: ease-in-out;
2283
+ -webkit-animation-fill-mode: forwards;
2284
+ -webkit-animation-name: switchThumbAnimation;
2285
+ transform: translate3d(23px, 0, 0);
2286
+ transition-duration: .2s;
2287
+ animation-duration: .45s;
2288
+ animation-timing-function: ease-in-out;
2289
+ animation-fill-mode: forwards;
2290
+ animation-name: switchThumbAnimation;
2291
+ }
2292
+ @-webkit-keyframes switchAnimationOff {
2293
+ 0% {
2294
+ box-shadow: inset 0 0 0 15px #e6e6e6;
2295
+ }
2296
+ 49.999% {
2297
+ box-shadow: inset 0 0 0 0 #e6e6e6;
2298
+ }
2299
+ 50% {
2300
+ box-shadow: inset 0 0 0 0 #fff;
2301
+ }
2302
+ 100% {
2303
+ box-shadow: inset 0 0 0 15px #fff;
2304
+ }
2305
+ }
2306
+ @-webkit-keyframes switchThumbAnimation {
2307
+ 0% {
2308
+ width: 27px;
2309
+ }
2310
+ 1% {
2311
+ width: 40px;
2312
+ }
2313
+ 50% {
2314
+ width: 27px;
2315
+ }
2316
+ 100% {
2317
+ width: 27px;
2318
+ }
2319
+ }
2320
+ @-webkit-keyframes switchThumbAnimationOff {
2321
+ 0% {
2322
+ width: 27px;
2323
+ }
2324
+ 5% {
2325
+ width: 45px;
2326
+ }
2327
+ 50% {
2328
+ width: 27px;
2329
+ }
2330
+ 100% {
2331
+ width: 27px;
2332
+ }
2333
+ }
2334
+ @keyframes switchAnimationOff {
2335
+ 0% {
2336
+ box-shadow: inset 0 0 0 15px #e6e6e6;
2337
+ }
2338
+ 49.999% {
2339
+ box-shadow: inset 0 0 0 0 #e6e6e6;
2340
+ }
2341
+ 50% {
2342
+ box-shadow: inset 0 0 0 0 #fff;
2343
+ }
2344
+ 100% {
2345
+ box-shadow: inset 0 0 0 15px #fff;
2346
+ }
2347
+ }
2348
+ @keyframes switchThumbAnimation {
2349
+ 0% {
2350
+ width: 27px;
2351
+ }
2352
+ 1% {
2353
+ width: 40px;
2354
+ }
2355
+ 50% {
2356
+ width: 27px;
2357
+ }
2358
+ 100% {
2359
+ width: 27px;
2360
+ }
2361
+ }
2362
+ @keyframes switchThumbAnimationOff {
2363
+ 0% {
2364
+ width: 27px;
2365
+ }
2366
+ 5% {
2367
+ width: 45px;
2368
+ }
2369
+ 50% {
2370
+ width: 27px;
2371
+ }
2372
+ 100% {
2373
+ width: 27px;
2374
+ }
2375
+ }
2376
+ html[dir=rtl] .switch > em {
2377
+ -webkit-transform: translate3d(-23px, 0, 0);
2378
+ transform: translate3d(-23px, 0, 0);
2379
+ }
2380
+ html[dir=rtl] .switch.on > em {
2381
+ -webkit-transform: translate3d(0, 0, 0);
2382
+ transform: translate3d(0, 0, 0);
2383
+ }
2384
+ /* ==============================
2385
+ Tab Bar
2386
+ =========================== */
2387
+ body.hasTabBar {
2388
+ /*
2389
+ nav {
2390
+ background-color: @navBkgnd;
2391
+ border-bottom: solid 1px #a7a7aa;
2392
+ }*/
2393
+ }
2394
+ body.hasTabBar article {
2395
+ bottom: 50px;
2396
+ }
2397
+ body.hasTabBar .previous:not(.navigable),
2398
+ body.hasTabBar .next:not(.navigable) {
2399
+ display: none;
2400
+ -webkiit-transform: none;
2401
+ }
2402
+ .tabbar {
2403
+ display: flex;
2404
+ display: -webkit-flex;
2405
+ display: -webkit-box;
2406
+ -webkit-box-orient: horizontal;
2407
+ -webkit-flex-direction: row;
2408
+ flex-direction: row;
2409
+ -webkit-justify-content: start;
2410
+ justify-content: flex-start;
2411
+ -webkit-box-align: center;
2412
+ -webkit-align-items: center;
2413
+ align-items: center;
2414
+ height: 50px;
2415
+ position: absolute;
2416
+ left: 0;
2417
+ bottom: 0;
2418
+ right: 0;
2419
+ -webkit-box-sizing: border-box;
2420
+ box-sizing: border-box;
2421
+ border-top: solid 1px #929292;
2422
+ background-color: #f7f7f7;
2423
+ }
2424
+ .tabbar > .button {
2425
+ height: 100%;
2426
+ position: relative;
2427
+ padding: 0;
2428
+ display: flex;
2429
+ display: -webkit-flex;
2430
+ display: -webkit-box;
2431
+ -webkit-box-orient: vertical;
2432
+ -webkit-flex-direction: column;
2433
+ flex-direction: column;
2434
+ -webkit-justify-content: center;
2435
+ justify-content: center;
2436
+ -webkit-box-align: center;
2437
+ -webkit-align-items: center;
2438
+ align-items: center;
2439
+ -webkit-box-flex: 1 !important;
2440
+ -webkit-flex: 1 !important;
2441
+ flex: 1 !important;
2442
+ color: #929292;
2443
+ font-size: 9pt;
2444
+ padding: 1px;
2445
+ }
2446
+ .isDesktop .tabbar > .button:hover,
2447
+ .tabbar > .button.selected {
2448
+ color: #007aff !important;
2449
+ opacity: 1 !important;
2450
+ }
2451
+ .isDesktop .tabbar > .button:hover > .icon,
2452
+ .tabbar > .button.selected > .icon {
2453
+ background-color: #007aff !important;
2454
+ }
2455
+ .tabbar > .button > .icon {
2456
+ margin: 0 auto;
2457
+ background-color: #929292;
2458
+ content: '';
2459
+ display: block;
2460
+ height: 30px;
2461
+ width: 30px;
2462
+ }
2463
+ .tabbar > .button.more > .icon {
2464
+ background-color: #929292;
2465
+ -webkit-mask-position: 50% 50%;
2466
+ -webkit-mask-size: 90% 90%;
2467
+ -webkit-mask-repeat: no-repeat;
2468
+ -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'Layer_2'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Ccircle%20cx%3D'10'%20cy%3D'23'%20r%3D'5.172'/%3E%3Ccircle%20cx%3D'24'%20cy%3D'23'%20r%3D'5.172'/%3E%3Ccircle%20cx%3D'38'%20cy%3D'23'%20r%3D'5.172'/%3E%3C/svg%3E");
2469
+ }
2470
+ /* ==============================
2471
+ Carousel styles
2472
+ =========================== */
2473
+ #carousel {
2474
+ width: 100%;
2475
+ height: 100%;
2476
+ margin: 10px auto;
2477
+ box-sizing: border-box;
2478
+ background-color: #ccc;
2479
+ }
2480
+ .carousel-track {
2481
+ margin: 0;
2482
+ padding: 0;
2483
+ }
2484
+ .carousel-track > li {
2485
+ box-sizing: border-box;
2486
+ list-style: none;
2487
+ margin: 0;
2488
+ padding: 0;
2489
+ position: relative;
2490
+ display: flex;
2491
+ display: -webkit-flex;
2492
+ display: -webkit-box;
2493
+ -webkit-box-orient: vertical;
2494
+ -webkit-flex-direction: column;
2495
+ flex-direction: column;
2496
+ -webkit-justify-content: start;
2497
+ justify-content: flex-start;
2498
+ -webkit-box-align: center;
2499
+ -webkit-align-items: center;
2500
+ align-items: center;
2501
+ overflow: hidden;
2502
+ border-left: solid 1px #999;
2503
+ padding-bottom: 10px;
2504
+ -webkit-user-select: none;
2505
+ }
2506
+ .carousel-track > li.carousel-panel-active {
2507
+ border: none;
2508
+ }
2509
+ .pagination {
2510
+ list-style: none;
2511
+ padding: 0;
2512
+ margin: 0 auto;
2513
+ display: -webkit-box;
2514
+ -webkit-box-orient: horizontal;
2515
+ -webkit-box-pack: justify;
2516
+ display: -webkit-flex;
2517
+ -webkit-flex-direction: row;
2518
+ -webkit-justify-content: space-around;
2519
+ display: flex;
2520
+ flex-direction: row;
2521
+ justify-content: space-around;
2522
+ }
2523
+ .pagination::after {
2524
+ content: '';
2525
+ display: block;
2526
+ clear: both;
2527
+ }
2528
+ .pagination > li {
2529
+ list-style: none;
2530
+ padding: 0;
2531
+ margin: 0;
2532
+ height: 10px;
2533
+ width: 10px;
2534
+ background-color: #666;
2535
+ border-radius: 5px;
2536
+ margin-right: 5px;
2537
+ }
2538
+ .pagination > li.selected {
2539
+ background-color: #007aff;
2540
+ cursor: pointer;
2541
+ }
2542
+ .isDesktop .pagination > li:hover {
2543
+ background-color: #007aff;
2544
+ cursor: pointer;
2545
+ }
2546
+ .pagination > li:last-of-type {
2547
+ margin-right: 0;
2548
+ }
2549
+ html[dir=rtl] .pagination > li {
2550
+ margin-right: 0;
2551
+ margin-left: 5px;
2552
+ padding: 0;
2553
+ }
2554
+ html[dir=rtl] .pagination > li:last-of-type {
2555
+ margin-left: 0;
2556
+ }
2557
+ .horizontal-scroll-panel {
2558
+ width: 100%;
2559
+ height: 200px;
2560
+ background-color: #ccc;
2561
+ padding: 20px;
2562
+ overflow-x: hidden;
2563
+ overflow-y: auto;
2564
+ -webkit-overflow-scrolling: touch;
2565
+ -ms-overflow-style: -ms-autohiding-scrollbar;
2566
+ overflow-y: hidden !important;
2567
+ overflow-x: auto;
2568
+ }
2569
+ .horizontal-scroll-panel > ul {
2570
+ list-style: none;
2571
+ margin: 0;
2572
+ padding: 0;
2573
+ -webkit-padding-start: 0;
2574
+ font-size: 0;
2575
+ }
2576
+ .horizontal-scroll-panel > ul li {
2577
+ display: inline-block;
2578
+ border: solid 1px #666;
2579
+ box-shadow: 0 0 4px #666;
2580
+ width: 200px;
2581
+ height: 200px;
2582
+ overflow: hidden;
2583
+ margin-right: 20px;
2584
+ font-size: 0;
2585
+ }
2586
+ .horizontal-scroll-panel > ul:first-of-type {
2587
+ margin-left: 0 !important;
2588
+ }
2589
+ .horizontal-scroll-panel > ul:last-of-type {
2590
+ margin-right: 0 !important;
2591
+ }
2592
+ body.isWindows .horizontal-scroll-panel {
2593
+ background-color: #333;
2594
+ }
2595
+ [dir=rtl] .horizontal-scroll-panel li {
2596
+ margin-right: 0 !important;
2597
+ margin-left: 20px !important;
2598
+ }
2599
+ [dir=rtl] .horizontal-scroll-panel li:first-of-type {
2600
+ margin-right: 0 !important;
2601
+ }
2602
+ [dir=rtl] .horizontal-scroll-panel li:last-of-type {
2603
+ margin-left: 0 !important;
2604
+ }
2605
+ @media only screen and (max-device-width: 320px) {
2606
+ .horizontal-scroll-panel {
2607
+ height: 125px;
2608
+ padding: 10px;
2609
+ }
2610
+ .horizontal-scroll-panel li {
2611
+ height: 125px;
2612
+ width: 125px;
2613
+ }
2614
+ }