<commit_before>/*
    pO\     
   6  /\
     /OO\
    /OOOO\
  /OOOOOOOO\
 ((OOOOOOOO))
  \:~=++=~:/    
 
ChocolateChip-UI
ChUI.ios.css
Copyright 2013 Sourcebits www.sourcebits.com
License: BSD
Version: 3.0.4
*/

html, body {
   padding: 0;
   margin: 0;
   position: absolute;
   top: 0; right: 0;
   bottom: 0; left: 0;
   overflow: hidden;
}
body {
   background-color: #efeff4;
   font: normal 10pt/13pt HelveticaNeue, Helvetica, Sans-serif;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
}
/* ==============================
   Text Styling
   ============================== */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
h1, .type-xx-large {
    font-size: 42pt;
    font-weight: 200;
    letter-spacing: 0;
    line-height: 1.1429; /* 64px when font-size is 42pt */
}
h2, .type-x-large {
    font-size: 20pt;
    font-weight: 200;
    line-height: 1.2; /* 32px when font-size is 20pt */
}
h3, .type-large {
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h4, .type-medium, code, pre, samp {
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
body, h5, .type-small, legend {
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h6, caption, figcaption, small, .type-xx-small {
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.6667; /* 20px when font-size is 9pt */
}
/* ==============================
   Article (view) styles
   ============================== */
article {
   position: absolute;
   top: 45px; right: 0;
   bottom: 0; left: 0;
   -webkit-transition: all .15s ease-out;
   transition: all .15s ease-out;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   display: -webkit-box;
   -wekbit-box-align: stretch;
   -webkit-box-pack: start;
   -webkit-box-orient: vertical;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: center;
   -webkit-align-item: start;
}
@media only screen and (min-width : 768px) {
   article {
      -webkit-transition: all .25s ease-out;
      transition: all .25s ease-out;
   }
}
/* ==============================
   Article navigation states
   ============================== */
.current {
   -webkit-transform: translate3d(0,0,0);
   opacity: 1;
   visibility: visible;
}
.next {
   -webkit-transform: translate3d(105%,0,0);
   opacity: 0;
   visibility: hidden;
}
.previous {
   -webkit-transform: translate3d(-100%,0,0);
   opacity: 0;
   visibility: hidden;
}
/* ==============================
   Slide Out
   ============================== */
.slide-out {
   position: absolute;
   top: 45px;
   left: 0;
   bottom: 0;
   background-color: #fff;
   z-index: 111111111;
   width: 100%;
   visibility: hidden;
   -webkit-transform: translate3d(-100%,0,0);
   -webkit-transition: all .25s ease-out;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   display: -webkit-box;
   -wekbit-box-align: center;
   -webkit-box-pack: start;
   -webkit-box-orient: vertical;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: center;
   -webkit-align-item: start;
}
.slide-out > section {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   padding-bottom: 100px;
   overflow-x: hidden;
   overflow-y: auto;
}
.slide-out.open {
   visibility: visible;
   -webkit-transform: translate3d(0,0,0);
}
.button.slide-out-button {
   position: absolute;
   z-index: 1111111;
   top: 5px;
   left: 15px;
   height: 35px;
   width: 35px;
   box-sizing: border-box;
   padding: 0;
}
.button.slide-out-button::before {
   content: '';
   display: block;
   height: 35px;
   width: 35px;
   background-color: #000;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="25.833" y="20" width="64.167" height="7.666"/><rect x="25.833" y="46.136" width="64.167" height="7.667"/><rect x="25.833" y="72.271" width="64.167" height="7.666"/><rect x="9.833" y="20" width="7.667" height="7.666"/><rect x="9.833" y="46" width="7.667" height="7.666"/><rect x="9.833" y="72.271" width="7.667" height="7.666"/></svg>');
}
body.slide-out-app > article,
body.slide-out-app > nav:not(:first-of-type) {
   display: none !important;
}
body.slide-out-app > article.show,
body.slide-out-app > nav.show  {
   display: block !important;
   z-index: 100;
}
/* ==============================
   Scrollers
   ============================== */
.scroller-vertical,
.scroller-horizontal {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   padding-bottom: 100px;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
.scroller-horizontal {
   overflow-y: hidden;
   overflow-x: auto;
}
article > section,
.slide-out > section {
   padding-top: 20px;
   padding-bottom: 100px;
   -webkit-box-flex: 1 !important;
   -webkit-flex: 1;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 100% !important;
}

/* ==============================
   Horizontal Panels
   ============================== */
.vertical, li.comp > aside.vertical {
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-pack: start;
   -webkit-box-align: start;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: start;
   -webkit-align-item: start;
}

.horizontal {
   /* Old syntax */
   display: -webkit-box;
   -webkit-align-item: start;
   -webkit-box-pack: start;
   -webkit-box-align: start;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-justify-content: start;
}
.horizontal.centered {
   -webkit-justify-content: center;
   -webkit-align-item: center;
   -webkit-box-pack: center;
   -webkit-box-align: stretch;
}
/* ==============================
   Nav bars
   ============================== */
#global-nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
   overflow: hidden;
}
nav {
   height: 45px;
   box-sizing: border-box;
   /* new flex box */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: center;
   /* old flex box */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
   text-align: center;
   position: absolute;
   top: 20;
   left: 0;
   right: 0;
   -webkit-transition: all .15s ease-out;
   transition: opacity .5s ease-in;
   padding: 0 15px;
   vertical-align: middle;
}
nav > h1 {
   text-align: center;
   display: inline-block;
   -webkit-box-flex: 1;
   font: normal 12pt/14pt HelveticaNeue, Sans-serif;
   position: absolute;
   top: 20;
   left: 100px;
   right: 100px;
   z-index: -1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
nav > a.button + h1 {
   left: 120px;
   right: 120px;
}
nav > h1 + a.button {
   margin: 0;
   position: absolute;
   right: 15px;
   top: 23px;
}
@media only screen and (max-device-width : 320px) and (orientation : portrait) {
   nav > a.button + h1 {
      left: 115px;
      right: 115px;
   }
}
@media only screen and (max-device-width : 320px) and (orientation : landscape) {
   nav > a.button + h1 {
      left: 150px;
      right: 150px;
   }
}
/* ==============================
   Lists
   ============================== */
.list {
   list-style: none;
   margin: 0 0 10px 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   width: 100%;
}
.list > li {
   padding: 13px 15px 13px 15px;
   -webkit-transition: all .3s ease-out;
   transition: all .3s ease-out;
   position: relative;
   background-color: #fff;
   font-size: 12pt;
}
.list > li + li {

}
.list > li::before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0px;
   left: 15px;
   right: 0px;
   border-bottom: solid 1px #c8c8c8;
}
.list > li:last-of-type::before {
   border-bottom: none;
}
.list > li.nav::after {
   content: '';
   display: block;
   height: 6px;
   width: 6px;
   border-right: solid 2px #c7c7cc;
   border-top: solid 2px #c7c7cc;
   -webkit-transform: rotate(45deg);
   float: right;
   position: absolute;
   top: 16px;
   right: 15px;
   -webkit-transition: all .4s ease-out;
   transition: all .4s ease-out;
}
.list > li.show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   position: absolute;
   top: 10px;
   right: 15px;
}
/* List Footer */
.list + p, .list + p + p {
   color: #7f7f7f;
   font-family: HelveticaNeue, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 14px
}
.list ~ p {
   margin: 0 15px;
}
.list ~ p + p {
	margin-top: 5pt;
}
.list > li[data-goto] { 
   cursor: pointer;
}
.list > li[data-goto]:hover, 
.list > li[data-goto].touched,
li[data-show-article]:hover,
li[data-show-article].touched,
.list.select > li:hover,
.list.select > li.touched,
.list.select > li.selected {
   background-color: #d9d9d9;
   cursor: pointer;
}
/* ==============================
   List title & subtitle
   ============================== */
.list > li > h3, 
.list > li > h4 {
   width: 80%;
   font-weight: 200;
   margin: 0;
}
.list > li h3 {
   line-height: 18pt;
}
.list > li h4 {
   line-height: 14pt;
   color: #7f7f7f;
}
.list > li > h4, 
.list > li > div > h4 {
   font-size: 11pt;
   margin: 0;
}
.list > li > aside > h4 {
   margin: 0;
   font-weight: normal;
   color: #7f7f7f;
}
/* ==============================
   List detail
   ============================== */
.list > li > p {
   margin: 6px 0px;
   color: #7f7f7f;
}
.list > li p + p {
   margin-top: 6px;
}
.list > li.comp > div > p {
   font-size: 10pt;
   margin: 0;
   color: #7f7f7f;
}
.list h3, .list h4, .list p {
   pointer-events: none;
}

/* ==============================
   List header
   ============================== */
section h2 {
   font: normal 11pt/12pt HelveticaNeue, Sans-serif;
   color: #4d4d4d;
   margin: 40px 0 6px 15px;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #7f7f7f;
}
/* Display header as is */
section h2.normal-case {
   text-transform: none;
}
/* Allow header to wrap */
section h2.wrap {
   white-space: normal;
}
section > h2 {
   margin: 26px 0 6px 15px !important;
}
/* ==============================
   comp List Items
   ============================== */
.list > li.comp::before {
   content: none;
}
li.comp {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   padding-bottom: 0;
}
li.comp > div {
   -webkit-box-flex: 1;
   border-bottom: solid 1px #c8c8c8;
   padding: 0 0 10px 0;
   margin-left: 0;
}
li.comp:last-of-type > div {
   border: none;
}

li.comp > div > h3,
li.comp > div > h4 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: HelveticaNeue, Helvetica, Sans-serif;
   font-weight: 200;
}
li.comp.wrap > div > h3,
li.comp.wrap > div > h4 {
   white-space: wrap;
   overflow: visible;
}
li.comp > div > h3 {
   margin: 0;
}
li.comp > div > h4 {
   margin: 0;
}
li.comp > aside {
   display: -webkit-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   padding: 0 0 10px 0;
}
li.comp > aside:first-child {
   -webkit-box-align: start;
}
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 {
   content: '';
   display: block;
   height: 6px;
   width: 6px;
   border-right: solid 2px #c7c7cc;
   border-top: solid 2px #c7c7cc;
   -webkit-transform: rotate(45deg) translate3d(4px,0,0);
}
li.comp > aside > .show-detail {
   display: inline-block;
   margin-bottom: -4px;
}
li.comp > aside > .show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   float: right;
   margin: 0px 10px 0 0 !important;
}
li.comp > aside:first-child {
   margin-right: 10px;
}
li.comp > aside:last-child {
   padding: 0 10px 10px 10px;
   border-bottom: solid 1px #c8c8c8;
}
li.comp > div + aside {
   margin-right: -15px;
}
li.comp:last-of-type > aside:last-child {
   border: none;
}
aside > span.counter, aside > span.date-time {
   font-weight: normal;
   color: #7f7f7f;
   font-size: 12pt;
}
@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;
   }
}
/* ==============================
   Switched List Items
   ============================== */
li.switched {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
}
li.switched h3 {
   width: auto;
   font-size: 15px;
   line-height: 26px;
   color: #007aff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.list > li.switched > h4 {
   width: 48%;
   text-align: right;
   margin-right: 10px;
   font-size: 19px;
   line-height: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 50%;
   color: #000 !important;
}

/* ============================== 
   Select List
   ============================== */
.list.select li > input {
   display: none;
}
.list.select li.selected,
.list.select li:hover,
.list.select li.touched {
   background-color: #d9d9d9;
}
.list.select li.selected::after {
   content: '';
   height: 20px;
   width: 20px;
   background-color: #007aff;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="26" viewBox="0 0 32 26" id="svg2"><defs id="defs8" /><g transform="translate(0.13135593,-0.34322034)" id="Page-1" style="fill:none;stroke:none"><g id="Artboard-1" style="stroke:#000000;stroke-width:5"><path d="m 10.500868,22.761362 11.023688,0 0,-27.9582975" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,10.899977,-8.7504466)" id="Rectangle-1" /></g></g></svg>');
   float: right;
   margin-top: -20px;
   color: #007aff;
}
.list.select li.selected:hover::after {

}


/* ============================== 
   Deletable Lists
   ============================== */
.deletion-indicator {
   display: -webkit-inline-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   color: #fff;
   border: solid 1px #ff3b30;
   border-radius: 50%;
   background-color: #ff3b30;
   width: 20px;
   height: 20px;
   float: left;
   margin-right: 6px;
   -webkit-transition: all .25s ease-out;
   margin-left: -40px;
   cursor: pointer;
   position: relative;
   z-index: 100;
}
.deletion-indicator::before {
   content: '—';
   display: block;
   font-size: 12pt;
   margin-top: -1px;
}  
.list.showIndicators .deletion-indicator {
   margin-left: 0;
}

.button.delete {
   float: right;
   background-color: red;
   color: #fff;
   text-align: center;
   -webkit-box-sizing: border-box;
   width: 80px;
   position: absolute;
   right: 0;
   top: 0;
   display: -webkit-box;
   -webkit-box-align: center;
   -webkit-box-pack: center;
   -webkit-transition: all .25s ease-out;
   -webkit-transform: translate3d(80px,0,0);
   cursor: pointer;
   font-family: 'HelveticaNeue-Light';
   font-weight: 200;
}

li.selected > .button.delete {
   -webkit-transform: translate3d(80px,0,0);
}
.deletable > li.selected h3, .deletable > li.selected h4, .deletable > li.selected p {
   position: relative;
   -webkit-transform: translate3d(0,0,0);
   -webkit-transition: all 1s ease-out;
}
.list.deletable > li {
	-webkit-transtion: all .25s ease-out;
	-webkit-transform: translate3d(0,0,0);
}
.list.deletable > li.selected {
	-webkit-transform: translate3d(-80px,0,0);
}
/* ============================== 
   Buttons
   ============================== */
a.button {
   cursor: pointer;
   text-decoration: none;
   font-size:  13pt;
   -webkit-transition: all .35s ease-out;
   transition: all .35s ease-out;
   display: block;
   box-sizing: border-box;
   box-sizing: border-box;
   height: auto;
   width: auto;
   padding: 8px 0px;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   text-align: center;
   background-color: rgba(255,255,255,.01);
}
nav > a.button {
   max-width: 100px;
}
a.button.back, a.button.backTo {
   text-align: left;
   padding: 0 0 0 20px !important;
   margin-top: 3px;
   line-height: 28px;
   color: #007aff;
   border: none;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block !important;
   height: 30px;
   margin-top: 8px;
}
.isiOS a.button.back, .isiOS a.button.backTo {
	display: -webkit-box;
	margin-top: 0;
}
.isSafari6 a.button.back, .isSafari6 a.button.backTo {
	margin-top: 2px !important;
}
a.button.back::before, 
a.button.backTo::before {
	content: '';
   background-color: #007aff;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat; 
   border: solid 1px red !important;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="21" height="35" viewBox="0 0 21 35" id="svg2"><defs id="defs8" /><g transform="translate(-2.1355929,0.0677963)" id="Page-1" style="fill:none;stroke:none"><path d="M 21.353814,1.2365445 5.0903576,17.5 21.353814,33.763456" id="Rectangle-1" style="stroke:#000;stroke-width:3" /></g></svg>');
   display: block;
   height: 20px;
   width: 10px;
   margin-right: 7px;
   position: absolute;
   left: 0px;
   top: 2px;
}
.isSafari6 a.button.back,
.isSafari6 a .button.backTo {
   margin-top: 0;
}
.button:hover {
   cursor: pointer;
   opacity: .5 !important;
}
a.button, a.button.back::before {
   color: #007aff;
   border-color: #007aff;
}
.button.align-flush,
.toolbar > .button.align-flush {
   position: absolute;
   right: 15px;
   margin-right: 0 !important;
   z-index: 100;
}
.button.action {
   color: #585d63;
   border: solid 1px #585d63;
   border-radius: 20px;
   width: auto;
   display: block;
   margin: 0 auto;
   padding: 10px 20px;
   box-sizing: border-box;
   height: auto;
   min-width: 200px;
   max-width: 300px
}
.toolbar > .button.align-flush {
   position: absolute;
   right: 15px;
   top: 0px;
   margin-right: 0 !important;
}
/* ==============================
   Switch
   ============================== */
.switch {
   display: inline-block;
   width: 54px;
   height: 32px;
   box-sizing: border-box;
   border: solid 2px #e6e6e6;
   border-radius: 20px;
   position: relative;
   box-shadow: inset 0  0 0 15px #fff;
   cursor: pointer;
   -webkit-animation-duration: .65s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchAnimationOff;
}
.switch > em {
   display: block;
   height: 27px;
   width: 27px;
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
   background-color: #fff;
   border-radius: 50%;
   -webkit-transition: -webkit-transform .1s ease-in-out;
   transition: -webkit-transform .1s ease-in-out;
   -webkit-animation-duration: .45s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchThumbAnimationOff;
}
.switch > input {
   display: none;
}
.switch.on {
   border-color: #6ee102;
   box-shadow: inset 0 0 0 15px #6ee102;
   -webkit-animation-name: none;
}
.switch.on > em {
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.45);
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.45);
   -webkit-transform: translate3d(23px,0,0);
   -webkit-transition-duration: .2s;
   -webkit-animation-duration: .45s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchThumbAnimation;
   
}
@-webkit-keyframes switchAnimationOff {
   0% { box-shadow: inset 0 0 0 15px #e6e6e6; }
   49.999% { box-shadow: inset 0 0 0 0 #e6e6e6; }
   50% { box-shadow: inset 0 0 0 0 #fff; }
   100% { box-shadow: inset 0 0 0 15px #fff; }
}

@-webkit-keyframes switchThumbAnimation {
   0% { width: 27px; }
   1% { width: 40px; }
   50% { width: 27px; }	
   100% { width: 27px; }	
}
@-webkit-keyframes switchThumbAnimationOff {
   0% { width: 27px; }
   5% { width: 45px; }
   50% { width: 27px; }	
   100% { width: 27px; }	
}
/* ==============================
   Segmented Control
   ============================== */
.segmented {
   display: -webkit-inline-box;
   -webkit-box-orient: horizontal;
   display: -webkit-inline-flex;
   -wekbit-flex-direction: row;
   box-sizing: border-box;
}
.segmented > .button {
	border: solid 1px #007aff;
	padding: 4px 15px;
	border-left: none;
	background-color: rgba(255,255,255,.65);
	width: auto;
	overflow-x: hidden;
	-webkit-transition: none;
	transition: none;
	font-size: 10pt;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	text-align: center;
}
.segmented > .button:first-of-type {
   border-left: solid 1px #007aff;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
}
.segmented > .button:last-of-type {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}
.segmented > .button:hover,
.segmented > .button.selected {
   color: #fff;
   background-color: #007aff;
   opacity: 1 !important;
}
div.horizontal.centered > .segmented {
   display: -webkit-box;
   display: -webkit-flex;
   margin: 10px 15px;
   -webkit-flex: 1;
}
.segmented.align-flush {
   position: absolute;
   right: 15px;
   top: 6px;
}

/* ==============================
   Segmented Paging Control
   ============================== */
.segmented.paging > .button {
   border: none;
   background: none;
   color: #007aff;
   width: 40px;
   height: 40px;
   position: relative;
   border-radius: 0 !important;
}
.segmented.paging > .button:hover,
.segmented.paging > .button.selected,
.segmented.paging > .button.touched {
   opacity: .5 !important;
   color: #007aff;
}
.segmented.paging > .button::before {
   content: '';
   display: block;
   height: 35px;
   width: 35px;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: 50% 50%;
   background-color: #007aff;
}
.segmented.paging.horizontal > .button:first-of-type::before {
      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"  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"> <g id="g4"> </g> <g id="layer2"> <path id="path7" d="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  L28.038,8.381z"/> </g> </svg> ');
}
.segmented.paging.horizontal > .button:last-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" 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"><g id="g4"></g><g id="layer2"><path id="path7" d="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"/></g></svg>');
}
.segmented.paging.vertical > .button:first-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" 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"> <g id="g4"> </g> <g id="layer2"> <path id="path7" d="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 L7.227,17.101z"/> </g> </svg>');
}
.segmented.paging.vertical > .button:last-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"    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"><g id="g4"></g><g id="layer2"><path id="path7" d="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 L36.757,29.191z"/></g></svg>');
}
article.paging {
   overflow: hidden !important;
   overflow-y: scroll !important;
   -webkit-box-orient: vertical !important;
   -webkit-direction: column !important;
}
article.paging > section {
   position: absolute;
   width: 100%;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   opacity: 1;
   padding: 0 0 100px 0 !important;
   -webkit-transition: all .15s ease-out;
}
/* Scaling needed to fix overflow bug in mobile Safari: */
article.paging.horizontal > section.previous {
   -webkit-transform: translate3d(-100%,0,0);
}
article.paging.horizontal > section.current {
   -webkit-transform: translate3d(0,0,0) scale(1,1);
}
article.paging.horizontal > section.next {
   -webkit-transform: translate3d(100%,0,0) scale(0,1);
}
article.paging.vertical > section.previous {
   -webkit-transform: translate3d(0,-100%,0);
}
article.paging.vertical > section.current {
   -webkit-transform: translate3d(0,0,0);
}
article.paging.vertical > section.next {
   -webkit-transform: translate3d(0,100%,0);
}
/* ==============================
   Range Control
   ============================== */
input[type="range"] {
   -webkit-appearance: none !important;  
   outline: none;
   display: block;
   height: 4px;
   width: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   border-radius: 4px;
   background-color: #b3b3b4;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   display: block;
   height: 27px;
   width: 27px;
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
   background-color: #fff;
   border-radius: 50%;
   -webkit-transition: -webkit-transform .1s ease-in-out;
   transition: -webkit-transform .1s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
   background-color: #f9f9f9;
}


/* ==============================
   Stepper Control
   ============================== */ 
.stepper {
   display: -webkit-inline-flex;
   -wekbit-flex-direction: row;
   -webkit-align-item: center;
   -webkit-justify-content: start;
   display: -webkit-inline-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: start;
   padding: 1px;
}
stepper > input {
   margin: 0;
   display: none;
}
.stepper > label {
   display: block;
   -webkit-box-sizing: border-box;
   border: solid 1px #007aff;
   width: 40px;
   height: 30px;
   font: bold 16px/30px Helvetica;
   text-align: center;
   background-color: #fff;
}
.stepper > .button {
   display: inline-box;
   -webkit-box-sizing: border-box;
   background-color: rgba(255,255,255,0.35);
   width: 33px;
   border: solid 1px #007aff;
   border-radius: 4px;
   text-align: center;
   font-weight: bold;
   font-size: 20pt;
   line-height: 16pt;
   cursor: pointer !important;
   overflow: hidden;
   padding: 0;
   box-sizing: border-box;
   height: 30px;
}
.stepper > .button:first-of-type {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: none;
}
.stepper > .button:last-of-type {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: none;
}
.stepper > input {
   display: none;
}

/* ==============================
   Busy Control
   ============================== */ 
@-webkit-keyframes busyAnim {
   0% { -webkit-transform:  rotate(0deg); }
   100% { -webkit-transform:  rotate(360deg); }
}
.busy {
   display: block;
   position: relative;
   height: 20px;
   width: 20px;
   margin-left: auto;
   margin-right: auto;
   background-color: #000;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 100% 100%;
   -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'><style> @-webkit-keyframes busyAnim { 0% { opacity: 0.11111111111111116; } 100% { opacity: 5; } } #tine1 { -webkit-animation: busyAnim 1.250s 1.125s infinite linear; } #tine2 { -webkit-animation: busyAnim 1.250s 1s infinite linear; } #tine3 { -webkit-animation: busyAnim 1.250s .875s infinite linear; } #tine4 { -webkit-animation: busyAnim 1.250s .750s infinite linear; } #tine5 { -webkit-animation: busyAnim 1.250s .625s infinite linear; } #tine6 { -webkit-animation: busyAnim 1.250s .500s infinite linear; } #tine7 { -webkit-animation: busyAnim 1.250s .375s infinite linear; } #tine8 { -webkit-animation: busyAnim 1.250s .250s infinite linear; } #tine9 { -webkit-animation: busyAnim 1.250s .125s infinite linear; } #tine10 { -webkit-animation: busyAnim 1.250s 0s infinite linear; }<\/style><g transform='translate(21,21)'><g stroke-width='4' stroke-linecap='round' stroke='rgb(0, 0, 0)'>  <line id='tine1' x1='0' y1='11' x2='0' y2='18' transform='rotate(0, 0, 0)' opacity='1'></line>  <line id='tine2' x1='0' y1='11' x2='0' y2='18' transform='rotate(-36, 0, 0)' opacity='1'></line>  <line id='tine3' x1='0' y1='11' x2='0' y2='18' transform='rotate(-72, 0, 0)' opacity='1'></line>  <line id='tine4' x1='0' y1='11' x2='0' y2='18' transform='rotate(-108, 0, 0)' opacity='1'></line>  <line id='tine5' x1='0' y1='11' x2='0' y2='18' transform='rotate(-144, 0, 0)' opacity='1'></line>  <line id='tine6' x1='0' y1='11' x2='0' y2='18' transform='rotate(-180, 0, 0)' opacity='1'></line>  <line id='tine7' x1='0' y1='11' x2='0' y2='18' transform='rotate(-216, 0, 0)' opacity='1'></line>  <line id='tine8' x1='0' y1='11' x2='0' y2='18' transform='rotate(-252, 0, 0)' opacity='1'></line>  <line id='tine9' x1='0' y1='11' x2='0' y2='18' transform='rotate(-288, 0, 0)' opacity='1'></line>  <line id='tine10' x1='0' y1='11' x2='0' y2='18' transform='rotate(-324, 0, 0)' opacity='1'></line> </g> </g></svg>");
}
.busy.align-flush {
   position: absolute;
   right: 15px;
}

/* ==============================
   Popup Control
   ============================== */
.popup {
   display: block;
   box-sizing: border-box;
   width: 300px;
   border-radius: 10px;
   padding: 0px;
   background-color: #e3e3e3;
   position: absolute;
   z-index: 10000;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 0.25s  ease-in-out;
   -webkit-trasform-origin: center center;
}
.popup.closed {
   -webkit-transform: scale(0);
}
.popup.opened {
   display: block;
   opacity: 1;
   -webkit-transform: scale(1);
}
.popup > .panel {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   /* New syntax */
   display: -webkit-flex;
   -webkit-flex-flow: column;
   -webkit-align-item: center;
   -webkit-justify-content: center;
}
.popup header,
.popup footer {
   display: -webkit-box;
   display: -webkit-flex;
   -webkit-box-align: stretch;
   -webkit-box-pack: justify;
}
.popup header > h1 {
   position: static;
   text-align: center;
   margin: 0 15px;
   width: 100%;
   line-height: 32pt;
   font-size: 16pt;
   font-weight: bold;
}
.popup > .panel > p {
   padding: 0 15px;
   margin-top: 0;
   text-align: center;
}
.popup > .panel .button {
   border-top: solid 1px #b5b5b5;
}
.popup footer {
   width: 100%;
   padding: 0;
}
.popup footer > .button {
   display: block !important;
   -webkit-box-flex: 1 !important;
   -webkit-flex: 1 !important;
   height: 100%;
   line-height: 30pt;
}
.popup footer > .button {
   max-width: 320px !important;
   font-weight: bold;
}
.popup footer > .button + .button {
   border-left: solid 1px #b5b5b5;
}

/* ==============================
   Popover Control
   ============================== */
.popover {
    width: 280px;
    background-color: #e7e9ee;
    border-radius: 10px;
    height: 250px;
    max-height: 300px;
    position: absolute;
    padding-bottom: 10px;
    z-index: 111111;
}
.popover::before {
   content: '';
   display: block;
   height: 15px;
   width: 15px;
   background-color: #f5f5f6;
   -webkit-transform: rotate(45deg);
   margin: 0 auto;
   position: absolute;
   top: -7px;
   left: 49%;
   z-index: -1;
}
.popover header {
   background-color: #f5f5f6;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 1px 10px;
   box-sizing: border-box;
   width: 100%;
}
.popover header h1 {
   font-size: 12pt;
   text-align: center;
}
.popover > section {
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 0;
   position: absolute;
   top: 40px;
   bottom: 10px;
   left: 0;
   right: 0;
}

/* ==============================
   Mask Control
   ============================== */
.mask {
   display: block;
   background-color: #000;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   z-index: 9999;
   cursor: pointer;
}


/* ==============================
   Split Layout Styles
   ============================== */
body.splitlayout {   
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-box-align: stretch;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: stretch;
}
.splitlayout > nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
}
.splitlayout > nav h1 {
   z-index: auto;
   text-align: center;
}
.splitlayout > nav:first-of-type {
   width: 320px;
   right: auto;
   border-right: solid 1px #C8C8C7 !important;
}
.splitlayout > nav:last-of-type {
   left: 320px;
}
.splitlayout > article.master {
   top: 45px;
   left: 0;
   bottom: 0;
   right: 320px;
   box-sizing: border-box;
   width: 320px;
   border-right: solid 1px #C8C8C7 !important;
}
.splitlayout > article.detail {
   top: 45px;
   left: 320px !important;
   bottom: 0;
   left: 0;
   -wekbit-box-flex: 1;
   -wekbit-flex: 1;
}
@media only screen and (max-device-width : 320px) and (orientation : portrait) {
   .splitlayout > article.master {
      right: 260px !important;
      width: 260px;
   }
   .splitlayout > article.detail {
      left: 260px !important;
   }
   .splitlayout > nav:first-of-type {
      width: 260px !important;
   }
   .splitlayout > nav:last-of-type {
      left: 260px !important;
   }
}

/* ==============================
   Tab Bar
   ============================== */

.tabbar {
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-box-align: end;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: stretch;
   height: 50px;
   position: absolute;
   left: 0;
   bottom: 0;
   right: 0;
   box-sizing: border-box;
   border-top: solid 1px #929292;
   background-color: #f7f7f7;
}
body.hasTabBar article {
   bottom: 50px;
}
.tabbar > .button {
   height: 100%;
   position: relative;
   padding: 0;
   /* old */
   display: -webkit-box;
   -webkit-box-flex: 1;
   -webkit-box-align: center;
   -webkit-box-pack: center;
   -webkit-box-orient: vertical;
   /* new */
   display: -webkit-flex;
   -webkit-flex: 1;
   -webkit-align-item: center;
   -webkit-justify-content: center;
   -webkit-flex-direction: column;
   color: #929292;
   font-size: 9pt;
   padding: 1px;
}
.tabbar > .button:hover,
.tabbar > .button.selected {
   color: #007aff !important;
   opacity: 1 !important;
}
.tabbar > .button > .icon {
   margin: 0 auto;
}
.hasTabBar .current {

}
.hasTabBar nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
}
.hasTabBar .previous:not(.navigable),
.hasTabBar .next:not(.navigable) {
   display: none;
   -webkiit-transform: none;
}
.tabbar > .button.more > .icon {
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 90% 90%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-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"><circle cx="10" cy="23" r="5.172"/><circle cx="24" cy="23" r="5.172"/><circle cx="38" cy="23" r="5.172"/></svg> ');
}

/* ==============================
   Sheet Control
   ============================== */
.sheet {
   position: absolute;
   top: 45px;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: rgba(156,159,164,.5);
   -webkit-transition: all .25s ease-in;
   -webkit-transform: translate3d(0,100%,0);
   visibility: hidden;
}
.sheet.opened {
   visibility: visible;
   -webkit-transform: translate3d(0,0,0);
}
.sheet > section {
   position: absolute;
   top: 36px;
   left: 0;
   bottom: 0;
   height: auto;
   right: 0;
}
.sheet > section > h2 {
   text-align: center;
}
article.current.blurred {
   -webkit-filter: blur(20px);
   -webkit-transition-duration: .15s;
   filter: blur(20px);
   transition-duration: .15s;
}
article.current.blurred.removeBlurSlow {
   -webkit-filter: blur(0px);
   -webkit-transition-duration: .35s;
}
.sheet .button {
   color: #585d63;
   border: solid 1px #585d63;<commit_msg>testingtesting<commit_after>/*
    pO\     
   6  /\
     /OO\
    /OOOO\
  /OOOOOOOO\
 ((OOOOOOOO))
  \:~=++=~:/    
 
ChocolateChip-UI
ChUI.ios.css
Copyright 2013 Sourcebits www.sourcebits.com
License: BSD
Version: 3.0.4
*/

html, body {
   padding: 0;
   margin: 0;
   position: absolute;
   top: 20; right: 0;
   bottom: 0; left: 0;
   overflow: hidden;
}
body {
   background-color: #efeff4;
   font: normal 10pt/13pt HelveticaNeue, Helvetica, Sans-serif;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
}
/* ==============================
   Text Styling
   ============================== */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
h1, .type-xx-large {
    font-size: 42pt;
    font-weight: 200;
    letter-spacing: 0;
    line-height: 1.1429; /* 64px when font-size is 42pt */
}
h2, .type-x-large {
    font-size: 20pt;
    font-weight: 200;
    line-height: 1.2; /* 32px when font-size is 20pt */
}
h3, .type-large {
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h4, .type-medium, code, pre, samp {
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
body, h5, .type-small, legend {
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h6, caption, figcaption, small, .type-xx-small {
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.6667; /* 20px when font-size is 9pt */
}
/* ==============================
   Article (view) styles
   ============================== */
article {
   position: absolute;
   top: 65px; right: 0;
   bottom: 0; left: 0;
   -webkit-transition: all .15s ease-out;
   transition: all .15s ease-out;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   display: -webkit-box;
   -wekbit-box-align: stretch;
   -webkit-box-pack: start;
   -webkit-box-orient: vertical;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: center;
   -webkit-align-item: start;
}
@media only screen and (min-width : 768px) {
   article {
      -webkit-transition: all .25s ease-out;
      transition: all .25s ease-out;
   }
}
/* ==============================
   Article navigation states
   ============================== */
.current {
   -webkit-transform: translate3d(0,0,0);
   opacity: 1;
   visibility: visible;
}
.next {
   -webkit-transform: translate3d(105%,0,0);
   opacity: 0;
   visibility: hidden;
}
.previous {
   -webkit-transform: translate3d(-100%,0,0);
   opacity: 0;
   visibility: hidden;
}
/* ==============================
   Slide Out
   ============================== */
.slide-out {
   position: absolute;
   top: 65px;
   left: 0;
   bottom: 0;
   background-color: #fff;
   z-index: 111111111;
   width: 100%;
   visibility: hidden;
   -webkit-transform: translate3d(-100%,0,0);
   -webkit-transition: all .25s ease-out;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   display: -webkit-box;
   -wekbit-box-align: center;
   -webkit-box-pack: start;
   -webkit-box-orient: vertical;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: center;
   -webkit-align-item: start;
}
.slide-out > section {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   padding-bottom: 100px;
   overflow-x: hidden;
   overflow-y: auto;
}
.slide-out.open {
   visibility: visible;
   -webkit-transform: translate3d(0,0,0);
}
.button.slide-out-button {
   position: absolute;
   z-index: 1111111;
   top: 25px;
   left: 15px;
   height: 35px;
   width: 35px;
   box-sizing: border-box;
   padding: 0;
}
.button.slide-out-button::before {
   content: '';
   display: block;
   height: 35px;
   width: 35px;
   background-color: #000;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="25.833" y="20" width="64.167" height="7.666"/><rect x="25.833" y="46.136" width="64.167" height="7.667"/><rect x="25.833" y="72.271" width="64.167" height="7.666"/><rect x="9.833" y="20" width="7.667" height="7.666"/><rect x="9.833" y="46" width="7.667" height="7.666"/><rect x="9.833" y="72.271" width="7.667" height="7.666"/></svg>');
}
body.slide-out-app > article,
body.slide-out-app > nav:not(:first-of-type) {
   display: none !important;
}
body.slide-out-app > article.show,
body.slide-out-app > nav.show  {
   display: block !important;
   z-index: 100;
}
/* ==============================
   Scrollers
   ============================== */
.scroller-vertical,
.scroller-horizontal {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   padding-bottom: 100px;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
.scroller-horizontal {
   overflow-y: hidden;
   overflow-x: auto;
}
article > section,
.slide-out > section {
   padding-top: 20px;
   padding-bottom: 100px;
   -webkit-box-flex: 1 !important;
   -webkit-flex: 1;
   position: absolute;
   top: 20;
   left: 0;
   width: 100%;
   min-height: 100% !important;
}

/* ==============================
   Horizontal Panels
   ============================== */
.vertical, li.comp > aside.vertical {
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-pack: start;
   -webkit-box-align: start;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: column;
   -webkit-justify-content: start;
   -webkit-align-item: start;
}

.horizontal {
   /* Old syntax */
   display: -webkit-box;
   -webkit-align-item: start;
   -webkit-box-pack: start;
   -webkit-box-align: start;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-justify-content: start;
}
.horizontal.centered {
   -webkit-justify-content: center;
   -webkit-align-item: center;
   -webkit-box-pack: center;
   -webkit-box-align: stretch;
}
/* ==============================
   Nav bars
   ============================== */
#global-nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
   overflow: hidden;
}
nav {
   height: 65px;
   box-sizing: border-box;
   /* new flex box */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: center;
   /* old flex box */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
   text-align: center;
   position: absolute;
   top: 20;
   left: 0;
   right: 0;
   -webkit-transition: all .15s ease-out;
   transition: opacity .5s ease-in;
   padding: 0 15px;
   vertical-align: middle;
}
nav > h1 {
   text-align: center;
   display: inline-block;
   -webkit-box-flex: 1;
   font: normal 12pt/14pt HelveticaNeue, Sans-serif;
   position: absolute;
   top: 20;
   left: 100px;
   right: 100px;
   z-index: -1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
nav > a.button + h1 {
   left: 120px;
   right: 120px;
}
nav > h1 + a.button {
   margin: 0;
   position: absolute;
   right: 15px;
   top: 23px;
}
@media only screen and (max-device-width : 320px) and (orientation : portrait) {
   nav > a.button + h1 {
      left: 115px;
      right: 115px;
   }
}
@media only screen and (max-device-width : 320px) and (orientation : landscape) {
   nav > a.button + h1 {
      left: 150px;
      right: 150px;
   }
}
/* ==============================
   Lists
   ============================== */
.list {
   list-style: none;
   margin: 0 0 10px 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   width: 100%;
}
.list > li {
   padding: 13px 15px 13px 15px;
   -webkit-transition: all .3s ease-out;
   transition: all .3s ease-out;
   position: relative;
   background-color: #fff;
   font-size: 12pt;
}
.list > li + li {

}
.list > li::before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0px;
   left: 15px;
   right: 0px;
   border-bottom: solid 1px #c8c8c8;
}
.list > li:last-of-type::before {
   border-bottom: none;
}
.list > li.nav::after {
   content: '';
   display: block;
   height: 6px;
   width: 6px;
   border-right: solid 2px #c7c7cc;
   border-top: solid 2px #c7c7cc;
   -webkit-transform: rotate(45deg);
   float: right;
   position: absolute;
   top: 36px;
   right: 15px;
   -webkit-transition: all .4s ease-out;
   transition: all .4s ease-out;
}
.list > li.show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   position: absolute;
   top: 30px;
   right: 15px;
}
/* List Footer */
.list + p, .list + p + p {
   color: #7f7f7f;
   font-family: HelveticaNeue, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 14px
}
.list ~ p {
   margin: 0 15px;
}
.list ~ p + p {
	margin-top: 5pt;
}
.list > li[data-goto] { 
   cursor: pointer;
}
.list > li[data-goto]:hover, 
.list > li[data-goto].touched,
li[data-show-article]:hover,
li[data-show-article].touched,
.list.select > li:hover,
.list.select > li.touched,
.list.select > li.selected {
   background-color: #d9d9d9;
   cursor: pointer;
}
/* ==============================
   List title & subtitle
   ============================== */
.list > li > h3, 
.list > li > h4 {
   width: 80%;
   font-weight: 200;
   margin: 0;
}
.list > li h3 {
   line-height: 18pt;
}
.list > li h4 {
   line-height: 14pt;
   color: #7f7f7f;
}
.list > li > h4, 
.list > li > div > h4 {
   font-size: 11pt;
   margin: 0;
}
.list > li > aside > h4 {
   margin: 0;
   font-weight: normal;
   color: #7f7f7f;
}
/* ==============================
   List detail
   ============================== */
.list > li > p {
   margin: 6px 0px;
   color: #7f7f7f;
}
.list > li p + p {
   margin-top: 6px;
}
.list > li.comp > div > p {
   font-size: 10pt;
   margin: 0;
   color: #7f7f7f;
}
.list h3, .list h4, .list p {
   pointer-events: none;
}

/* ==============================
   List header
   ============================== */
section h2 {
   font: normal 11pt/12pt HelveticaNeue, Sans-serif;
   color: #4d4d4d;
   margin: 40px 0 6px 15px;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #7f7f7f;
}
/* Display header as is */
section h2.normal-case {
   text-transform: none;
}
/* Allow header to wrap */
section h2.wrap {
   white-space: normal;
}
section > h2 {
   margin: 26px 0 6px 15px !important;
}
/* ==============================
   comp List Items
   ============================== */
.list > li.comp::before {
   content: none;
}
li.comp {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   padding-bottom: 0;
}
li.comp > div {
   -webkit-box-flex: 1;
   border-bottom: solid 1px #c8c8c8;
   padding: 0 0 10px 0;
   margin-left: 0;
}
li.comp:last-of-type > div {
   border: none;
}

li.comp > div > h3,
li.comp > div > h4 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: HelveticaNeue, Helvetica, Sans-serif;
   font-weight: 200;
}
li.comp.wrap > div > h3,
li.comp.wrap > div > h4 {
   white-space: wrap;
   overflow: visible;
}
li.comp > div > h3 {
   margin: 0;
}
li.comp > div > h4 {
   margin: 0;
}
li.comp > aside {
   display: -webkit-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   padding: 0 0 10px 0;
}
li.comp > aside:first-child {
   -webkit-box-align: start;
}
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 {
   content: '';
   display: block;
   height: 6px;
   width: 6px;
   border-right: solid 2px #c7c7cc;
   border-top: solid 2px #c7c7cc;
   -webkit-transform: rotate(45deg) translate3d(4px,0,0);
}
li.comp > aside > .show-detail {
   display: inline-block;
   margin-bottom: -4px;
}
li.comp > aside > .show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   float: right;
   margin: 0px 10px 0 0 !important;
}
li.comp > aside:first-child {
   margin-right: 10px;
}
li.comp > aside:last-child {
   padding: 0 10px 10px 10px;
   border-bottom: solid 1px #c8c8c8;
}
li.comp > div + aside {
   margin-right: -15px;
}
li.comp:last-of-type > aside:last-child {
   border: none;
}
aside > span.counter, aside > span.date-time {
   font-weight: normal;
   color: #7f7f7f;
   font-size: 12pt;
}
@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;
   }
}
/* ==============================
   Switched List Items
   ============================== */
li.switched {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
}
li.switched h3 {
   width: auto;
   font-size: 15px;
   line-height: 26px;
   color: #007aff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.list > li.switched > h4 {
   width: 48%;
   text-align: right;
   margin-right: 10px;
   font-size: 19px;
   line-height: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 50%;
   color: #000 !important;
}

/* ============================== 
   Select List
   ============================== */
.list.select li > input {
   display: none;
}
.list.select li.selected,
.list.select li:hover,
.list.select li.touched {
   background-color: #d9d9d9;
}
.list.select li.selected::after {
   content: '';
   height: 20px;
   width: 20px;
   background-color: #007aff;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="26" viewBox="0 0 32 26" id="svg2"><defs id="defs8" /><g transform="translate(0.13135593,-0.34322034)" id="Page-1" style="fill:none;stroke:none"><g id="Artboard-1" style="stroke:#000000;stroke-width:5"><path d="m 10.500868,22.761362 11.023688,0 0,-27.9582975" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,10.899977,-8.7504466)" id="Rectangle-1" /></g></g></svg>');
   float: right;
   margin-top: -20px;
   color: #007aff;
}
.list.select li.selected:hover::after {

}


/* ============================== 
   Deletable Lists
   ============================== */
.deletion-indicator {
   display: -webkit-inline-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   color: #fff;
   border: solid 1px #ff3b30;
   border-radius: 50%;
   background-color: #ff3b30;
   width: 20px;
   height: 20px;
   float: left;
   margin-right: 6px;
   -webkit-transition: all .25s ease-out;
   margin-left: -40px;
   cursor: pointer;
   position: relative;
   z-index: 100;
}
.deletion-indicator::before {
   content: '—';
   display: block;
   font-size: 12pt;
   margin-top: -1px;
}  
.list.showIndicators .deletion-indicator {
   margin-left: 0;
}

.button.delete {
   float: right;
   background-color: red;
   color: #fff;
   text-align: center;
   -webkit-box-sizing: border-box;
   width: 80px;
   position: absolute;
   right: 0;
   top: 0;
   display: -webkit-box;
   -webkit-box-align: center;
   -webkit-box-pack: center;
   -webkit-transition: all .25s ease-out;
   -webkit-transform: translate3d(80px,0,0);
   cursor: pointer;
   font-family: 'HelveticaNeue-Light';
   font-weight: 200;
}

li.selected > .button.delete {
   -webkit-transform: translate3d(80px,0,0);
}
.deletable > li.selected h3, .deletable > li.selected h4, .deletable > li.selected p {
   position: relative;
   -webkit-transform: translate3d(0,0,0);
   -webkit-transition: all 1s ease-out;
}
.list.deletable > li {
	-webkit-transtion: all .25s ease-out;
	-webkit-transform: translate3d(0,0,0);
}
.list.deletable > li.selected {
	-webkit-transform: translate3d(-80px,0,0);
}
/* ============================== 
   Buttons
   ============================== */
a.button {
   cursor: pointer;
   text-decoration: none;
   font-size:  13pt;
   -webkit-transition: all .35s ease-out;
   transition: all .35s ease-out;
   display: block;
   box-sizing: border-box;
   box-sizing: border-box;
   height: auto;
   width: auto;
   padding: 8px 0px;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   text-align: center;
   background-color: rgba(255,255,255,.01);
}
nav > a.button {
   max-width: 100px;
}
a.button.back, a.button.backTo {
   text-align: left;
   padding: 0 0 0 20px !important;
   margin-top: 3px;
   line-height: 28px;
   color: #007aff;
   border: none;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block !important;
   height: 30px;
   margin-top: 8px;
}
.isiOS a.button.back, .isiOS a.button.backTo {
	display: -webkit-box;
	margin-top: 0;
}
.isSafari6 a.button.back, .isSafari6 a.button.backTo {
	margin-top: 2px !important;
}
a.button.back::before, 
a.button.backTo::before {
	content: '';
   background-color: #007aff;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 90% 90%;
   -webkit-mask-repeat: no-repeat; 
   border: solid 1px red !important;
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="21" height="35" viewBox="0 0 21 35" id="svg2"><defs id="defs8" /><g transform="translate(-2.1355929,0.0677963)" id="Page-1" style="fill:none;stroke:none"><path d="M 21.353814,1.2365445 5.0903576,17.5 21.353814,33.763456" id="Rectangle-1" style="stroke:#000;stroke-width:3" /></g></svg>');
   display: block;
   height: 20px;
   width: 10px;
   margin-right: 7px;
   position: absolute;
   left: 0px;
   top: 22px;
}
.isSafari6 a.button.back,
.isSafari6 a .button.backTo {
   margin-top: 0;
}
.button:hover {
   cursor: pointer;
   opacity: .5 !important;
}
a.button, a.button.back::before {
   color: #007aff;
   border-color: #007aff;
}
.button.align-flush,
.toolbar > .button.align-flush {
   position: absolute;
   right: 15px;
   margin-right: 0 !important;
   z-index: 100;
}
.button.action {
   color: #585d63;
   border: solid 1px #585d63;
   border-radius: 20px;
   width: auto;
   display: block;
   margin: 0 auto;
   padding: 10px 20px;
   box-sizing: border-box;
   height: auto;
   min-width: 200px;
   max-width: 300px
}
.toolbar > .button.align-flush {
   position: absolute;
   right: 15px;
   top: 20px;
   margin-right: 0 !important;
}
/* ==============================
   Switch
   ============================== */
.switch {
   display: inline-block;
   width: 54px;
   height: 32px;
   box-sizing: border-box;
   border: solid 2px #e6e6e6;
   border-radius: 20px;
   position: relative;
   box-shadow: inset 0  0 0 15px #fff;
   cursor: pointer;
   -webkit-animation-duration: .65s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchAnimationOff;
}
.switch > em {
   display: block;
   height: 27px;
   width: 27px;
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
   background-color: #fff;
   border-radius: 50%;
   -webkit-transition: -webkit-transform .1s ease-in-out;
   transition: -webkit-transform .1s ease-in-out;
   -webkit-animation-duration: .45s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchThumbAnimationOff;
}
.switch > input {
   display: none;
}
.switch.on {
   border-color: #6ee102;
   box-shadow: inset 0 0 0 15px #6ee102;
   -webkit-animation-name: none;
}
.switch.on > em {
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.45);
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.45);
   -webkit-transform: translate3d(23px,0,0);
   -webkit-transition-duration: .2s;
   -webkit-animation-duration: .45s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: switchThumbAnimation;
   
}
@-webkit-keyframes switchAnimationOff {
   0% { box-shadow: inset 0 0 0 15px #e6e6e6; }
   49.999% { box-shadow: inset 0 0 0 0 #e6e6e6; }
   50% { box-shadow: inset 0 0 0 0 #fff; }
   100% { box-shadow: inset 0 0 0 15px #fff; }
}

@-webkit-keyframes switchThumbAnimation {
   0% { width: 27px; }
   1% { width: 40px; }
   50% { width: 27px; }	
   100% { width: 27px; }	
}
@-webkit-keyframes switchThumbAnimationOff {
   0% { width: 27px; }
   5% { width: 45px; }
   50% { width: 27px; }	
   100% { width: 27px; }	
}
/* ==============================
   Segmented Control
   ============================== */
.segmented {
   display: -webkit-inline-box;
   -webkit-box-orient: horizontal;
   display: -webkit-inline-flex;
   -wekbit-flex-direction: row;
   box-sizing: border-box;
}
.segmented > .button {
	border: solid 1px #007aff;
	padding: 4px 15px;
	border-left: none;
	background-color: rgba(255,255,255,.65);
	width: auto;
	overflow-x: hidden;
	-webkit-transition: none;
	transition: none;
	font-size: 10pt;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	text-align: center;
}
.segmented > .button:first-of-type {
   border-left: solid 1px #007aff;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
}
.segmented > .button:last-of-type {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}
.segmented > .button:hover,
.segmented > .button.selected {
   color: #fff;
   background-color: #007aff;
   opacity: 1 !important;
}
div.horizontal.centered > .segmented {
   display: -webkit-box;
   display: -webkit-flex;
   margin: 10px 15px;
   -webkit-flex: 1;
}
.segmented.align-flush {
   position: absolute;
   right: 15px;
   top: 26px;
}

/* ==============================
   Segmented Paging Control
   ============================== */
.segmented.paging > .button {
   border: none;
   background: none;
   color: #007aff;
   width: 40px;
   height: 40px;
   position: relative;
   border-radius: 0 !important;
}
.segmented.paging > .button:hover,
.segmented.paging > .button.selected,
.segmented.paging > .button.touched {
   opacity: .5 !important;
   color: #007aff;
}
.segmented.paging > .button::before {
   content: '';
   display: block;
   height: 35px;
   width: 35px;
   position: absolute;
   top: 20;
   left: 0;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: 50% 50%;
   background-color: #007aff;
}
.segmented.paging.horizontal > .button:first-of-type::before {
      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"  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"> <g id="g4"> </g> <g id="layer2"> <path id="path7" d="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  L28.038,8.381z"/> </g> </svg> ');
}
.segmented.paging.horizontal > .button:last-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" 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"><g id="g4"></g><g id="layer2"><path id="path7" d="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"/></g></svg>');
}
.segmented.paging.vertical > .button:first-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" 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"> <g id="g4"> </g> <g id="layer2"> <path id="path7" d="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 L7.227,17.101z"/> </g> </svg>');
}
.segmented.paging.vertical > .button:last-of-type::before {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"    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"><g id="g4"></g><g id="layer2"><path id="path7" d="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 L36.757,29.191z"/></g></svg>');
}
article.paging {
   overflow: hidden !important;
   overflow-y: scroll !important;
   -webkit-box-orient: vertical !important;
   -webkit-direction: column !important;
}
article.paging > section {
   position: absolute;
   width: 100%;
   left: 0;
   right: 0;
   bottom: 0;
   top: 20;
   opacity: 1;
   padding: 0 0 100px 0 !important;
   -webkit-transition: all .15s ease-out;
}
/* Scaling needed to fix overflow bug in mobile Safari: */
article.paging.horizontal > section.previous {
   -webkit-transform: translate3d(-100%,0,0);
}
article.paging.horizontal > section.current {
   -webkit-transform: translate3d(0,0,0) scale(1,1);
}
article.paging.horizontal > section.next {
   -webkit-transform: translate3d(100%,0,0) scale(0,1);
}
article.paging.vertical > section.previous {
   -webkit-transform: translate3d(0,-100%,0);
}
article.paging.vertical > section.current {
   -webkit-transform: translate3d(0,0,0);
}
article.paging.vertical > section.next {
   -webkit-transform: translate3d(0,100%,0);
}
/* ==============================
   Range Control
   ============================== */
input[type="range"] {
   -webkit-appearance: none !important;  
   outline: none;
   display: block;
   height: 4px;
   width: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   border-radius: 4px;
   background-color: #b3b3b4;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   display: block;
   height: 27px;
   width: 27px;
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
   background-color: #fff;
   border-radius: 50%;
   -webkit-transition: -webkit-transform .1s ease-in-out;
   transition: -webkit-transform .1s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
   background-color: #f9f9f9;
}


/* ==============================
   Stepper Control
   ============================== */ 
.stepper {
   display: -webkit-inline-flex;
   -wekbit-flex-direction: row;
   -webkit-align-item: center;
   -webkit-justify-content: start;
   display: -webkit-inline-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: start;
   padding: 1px;
}
stepper > input {
   margin: 0;
   display: none;
}
.stepper > label {
   display: block;
   -webkit-box-sizing: border-box;
   border: solid 1px #007aff;
   width: 40px;
   height: 30px;
   font: bold 16px/30px Helvetica;
   text-align: center;
   background-color: #fff;
}
.stepper > .button {
   display: inline-box;
   -webkit-box-sizing: border-box;
   background-color: rgba(255,255,255,0.35);
   width: 33px;
   border: solid 1px #007aff;
   border-radius: 4px;
   text-align: center;
   font-weight: bold;
   font-size: 20pt;
   line-height: 16pt;
   cursor: pointer !important;
   overflow: hidden;
   padding: 0;
   box-sizing: border-box;
   height: 30px;
}
.stepper > .button:first-of-type {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: none;
}
.stepper > .button:last-of-type {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: none;
}
.stepper > input {
   display: none;
}

/* ==============================
   Busy Control
   ============================== */ 
@-webkit-keyframes busyAnim {
   0% { -webkit-transform:  rotate(0deg); }
   100% { -webkit-transform:  rotate(360deg); }
}
.busy {
   display: block;
   position: relative;
   height: 20px;
   width: 20px;
   margin-left: auto;
   margin-right: auto;
   background-color: #000;
   -webkit-mask-position: 50% 50%;
   -webkit-mask-size: 100% 100%;
   -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'><style> @-webkit-keyframes busyAnim { 0% { opacity: 0.11111111111111116; } 100% { opacity: 5; } } #tine1 { -webkit-animation: busyAnim 1.250s 1.125s infinite linear; } #tine2 { -webkit-animation: busyAnim 1.250s 1s infinite linear; } #tine3 { -webkit-animation: busyAnim 1.250s .875s infinite linear; } #tine4 { -webkit-animation: busyAnim 1.250s .750s infinite linear; } #tine5 { -webkit-animation: busyAnim 1.250s .625s infinite linear; } #tine6 { -webkit-animation: busyAnim 1.250s .500s infinite linear; } #tine7 { -webkit-animation: busyAnim 1.250s .375s infinite linear; } #tine8 { -webkit-animation: busyAnim 1.250s .250s infinite linear; } #tine9 { -webkit-animation: busyAnim 1.250s .125s infinite linear; } #tine10 { -webkit-animation: busyAnim 1.250s 0s infinite linear; }<\/style><g transform='translate(21,21)'><g stroke-width='4' stroke-linecap='round' stroke='rgb(0, 0, 0)'>  <line id='tine1' x1='0' y1='11' x2='0' y2='18' transform='rotate(0, 0, 0)' opacity='1'></line>  <line id='tine2' x1='0' y1='11' x2='0' y2='18' transform='rotate(-36, 0, 0)' opacity='1'></line>  <line id='tine3' x1='0' y1='11' x2='0' y2='18' transform='rotate(-72, 0, 0)' opacity='1'></line>  <line id='tine4' x1='0' y1='11' x2='0' y2='18' transform='rotate(-108, 0, 0)' opacity='1'></line>  <line id='tine5' x1='0' y1='11' x2='0' y2='18' transform='rotate(-144, 0, 0)' opacity='1'></line>  <line id='tine6' x1='0' y1='11' x2='0' y2='18' transform='rotate(-180, 0, 0)' opacity='1'></line>  <line id='tine7' x1='0' y1='11' x2='0' y2='18' transform='rotate(-216, 0, 0)' opacity='1'></line>  <line id='tine8' x1='0' y1='11' x2='0' y2='18' transform='rotate(-252, 0, 0)' opacity='1'></line>  <line id='tine9' x1='0' y1='11' x2='0' y2='18' transform='rotate(-288, 0, 0)' opacity='1'></line>  <line id='tine10' x1='0' y1='11' x2='0' y2='18' transform='rotate(-324, 0, 0)' opacity='1'></line> </g> </g></svg>");
}
.busy.align-flush {
   position: absolute;
   right: 15px;
}

/* ==============================
   Popup Control
   ============================== */
.popup {
   display: block;
   box-sizing: border-box;
   width: 300px;
   border-radius: 10px;
   padding: 0px;
   background-color: #e3e3e3;
   position: absolute;
   z-index: 10000;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 0.25s  ease-in-out;
   -webkit-trasform-origin: center center;
}
.popup.closed {
   -webkit-transform: scale(0);
}
.popup.opened {
   display: block;
   opacity: 1;
   -webkit-transform: scale(1);
}
.popup > .panel {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   /* New syntax */
   display: -webkit-flex;
   -webkit-flex-flow: column;
   -webkit-align-item: center;
   -webkit-justify-content: center;
}
.popup header,
.popup footer {
   display: -webkit-box;
   display: -webkit-flex;
   -webkit-box-align: stretch;
   -webkit-box-pack: justify;
}
.popup header > h1 {
   position: static;
   text-align: center;
   margin: 0 15px;
   width: 100%;
   line-height: 32pt;
   font-size: 16pt;
   font-weight: bold;
}
.popup > .panel > p {
   padding: 0 15px;
   margin-top: 0;
   text-align: center;
}
.popup > .panel .button {
   border-top: solid 1px #b5b5b5;
}
.popup footer {
   width: 100%;
   padding: 0;
}
.popup footer > .button {
   display: block !important;
   -webkit-box-flex: 1 !important;
   -webkit-flex: 1 !important;
   height: 100%;
   line-height: 30pt;
}
.popup footer > .button {
   max-width: 320px !important;
   font-weight: bold;
}
.popup footer > .button + .button {
   border-left: solid 1px #b5b5b5;
}

/* ==============================
   Popover Control
   ============================== */
.popover {
    width: 280px;
    background-color: #e7e9ee;
    border-radius: 10px;
    height: 250px;
    max-height: 300px;
    position: absolute;
    padding-bottom: 10px;
    z-index: 111111;
}
.popover::before {
   content: '';
   display: block;
   height: 15px;
   width: 15px;
   background-color: #f5f5f6;
   -webkit-transform: rotate(45deg);
   margin: 0 auto;
   position: absolute;
   top: -7px;
   left: 49%;
   z-index: -1;
}
.popover header {
   background-color: #f5f5f6;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 1px 10px;
   box-sizing: border-box;
   width: 100%;
}
.popover header h1 {
   font-size: 12pt;
   text-align: center;
}
.popover > section {
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 0;
   position: absolute;
   top: 60px;
   bottom: 10px;
   left: 0;
   right: 0;
}

/* ==============================
   Mask Control
   ============================== */
.mask {
   display: block;
   background-color: #000;
   position: absolute;
   top: 20;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   z-index: 9999;
   cursor: pointer;
}


/* ==============================
   Split Layout Styles
   ============================== */
body.splitlayout {   
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-box-align: stretch;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: stretch;
}
.splitlayout > nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
}
.splitlayout > nav h1 {
   z-index: auto;
   text-align: center;
}
.splitlayout > nav:first-of-type {
   width: 320px;
   right: auto;
   border-right: solid 1px #C8C8C7 !important;
}
.splitlayout > nav:last-of-type {
   left: 320px;
}
.splitlayout > article.master {
   top: 65px;
   left: 0;
   bottom: 0;
   right: 320px;
   box-sizing: border-box;
   width: 320px;
   border-right: solid 1px #C8C8C7 !important;
}
.splitlayout > article.detail {
   top: 65px;
   left: 320px !important;
   bottom: 0;
   left: 0;
   -wekbit-box-flex: 1;
   -wekbit-flex: 1;
}
@media only screen and (max-device-width : 320px) and (orientation : portrait) {
   .splitlayout > article.master {
      right: 260px !important;
      width: 260px;
   }
   .splitlayout > article.detail {
      left: 260px !important;
   }
   .splitlayout > nav:first-of-type {
      width: 260px !important;
   }
   .splitlayout > nav:last-of-type {
      left: 260px !important;
   }
}

/* ==============================
   Tab Bar
   ============================== */

.tabbar {
   /* Old syntax */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-box-align: end;
   /* New syntax */
   display: -webkit-flex;
   -wekbit-flex-direction: row;
   -webkit-justify-content: start;
   -webkit-align-item: stretch;
   height: 50px;
   position: absolute;
   left: 0;
   bottom: 0;
   right: 0;
   box-sizing: border-box;
   border-top: solid 1px #929292;
   background-color: #f7f7f7;
}
body.hasTabBar article {
   bottom: 50px;
}
.tabbar > .button {
   height: 100%;
   position: relative;
   padding: 0;
   /* old */
   display: -webkit-box;
   -webkit-box-flex: 1;
   -webkit-box-align: center;
   -webkit-box-pack: center;
   -webkit-box-orient: vertical;
   /* new */
   display: -webkit-flex;
   -webkit-flex: 1;
   -webkit-align-item: center;
   -webkit-justify-content: center;
   -webkit-flex-direction: column;
   color: #929292;
   font-size: 9pt;
   padding: 1px;
}
.tabbar > .button:hover,
.tabbar > .button.selected {
   color: #007aff !important;
   opacity: 1 !important;
}
.tabbar > .button > .icon {
   margin: 0 auto;
}
.hasTabBar .current {

}
.hasTabBar nav {
   background-color: #f7f7f7;
   border-bottom: solid 1px #a7a7aa;
}
.hasTabBar .previous:not(.navigable),
.hasTabBar .next:not(.navigable) {
   display: none;
   -webkiit-transform: none;
}
.tabbar > .button.more > .icon {
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 90% 90%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-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"><circle cx="10" cy="23" r="5.172"/><circle cx="24" cy="23" r="5.172"/><circle cx="38" cy="23" r="5.172"/></svg> ');
}

/* ==============================
   Sheet Control
   ============================== */
.sheet {
   position: absolute;
   top: 65px;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: rgba(156,159,164,.5);
   -webkit-transition: all .25s ease-in;
   -webkit-transform: translate3d(0,100%,0);
   visibility: hidden;
}
.sheet.opened {
   visibility: visible;
   -webkit-transform: translate3d(0,0,0);
}
.sheet > section {
   position: absolute;
   top: 56px;
   left: 0;
   bottom: 0;
   height: auto;
   right: 0;
}
.sheet > section > h2 {
   text-align: center;
}
article.current.blurred {
   -webkit-filter: blur(20px);
   -webkit-transition-duration: .15s;
   filter: blur(20px);
   transition-duration: .15s;
}
article.current.blurred.removeBlurSlow {
   -webkit-filter: blur(0px);
   -webkit-transition-duration: .35s;
}
.sheet .button {
   color: #585d63;
   border: solid 1px #585d63;
{'fraction_non_alphanumeric': 0.20672727272727273, 'fraction_numerical': 0.06842857142857142, 'mean_word_length': 3.2455202073110216, 'pattern_counts': {'":': 0, '<': 169, '<?xml version=': 0, '>': 479, 'https://': 0, 'lorem ipsum': 0, 'www.': 44, 'xml': 72}, 'pii_count': 0, 'substrings_counts': 10, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6778741', 'n_tokens_mistral': 33369, 'n_tokens_neox': 29052, 'n_words': 6289}