/* size, shape, color */
.jab-container { border:1px solid #eee; background:#fff; width:45px; padding:2px 6px; position:relative; font-size:12px; line-height:16px; cursor:pointer; color:#aaa; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/* prevent color flash as button sets visual state on init */
.jab-container.jab-post-init {/* transition:background-color 0.4s ease, color 0.4s ease;*/ }
.jab-container.jab-show-fillcontainer { display:block; }
.jab-container:hover { color:#000; border-color:#ccc; }
.jab-container.jab-state-loading { color:#999; cursor:auto; }
.jab-inline-el { display:none; position:relative; z-index:2; text-align:center; vertical-align:middle; }
.jab-inline-el.jab-text-duration, .jab-inline-el:last-child { margin-right:0; }

.jab-text-duration { padding-left:4px; }

/* maintain UI state */
.jab-show-duration .jab-text-duration, .jab-show-status.jab-state-inactive .jab-text-play, .jab-show-status.jab-state-pause .jab-text-resume, .jab-show-status.jab-state-active .jab-text-pause, .jab-show-icons.jab-state-inactive .jab-icon-play, .jab-show-icons.jab-state-pause .jab-icon-resume, .jab-show-icons.jab-state-active .jab-icon-pause, .jab-show-icons.jab-state-loading .jab-text-play, .jab-show-icons.jab-state-loading .jab-icon-loader { display:inline-block; }
.jab-progress { display:none; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; }
.jab-show-progressbar.jab-state-active .jab-progress, .jab-show-progressbar.jab-state-pause .jab-progress { display:block; }
.jab-show-progressbar .jab-bar { width:0; height:100%; border-bottom:2px solid #ff0000; transition:width 0.4s ease; box-sizing:border-box; }

/* svg icons */
.jab-container svg { display:block; }
.jab-svg-icon { width:13px; }
.jab-icon path { fill:#000; }

/**
 * Spinning Loader, by Luke Hass. MIT.
 * https://github.com/lukehaas/css-loaders
 */
.jab-loader { margin:0 auto; font-size:10px; position:relative; text-indent:-9999em; border-top:2px solid rgba(0,0,0,0.2); border-right:2px solid rgba(0,0,0,0.2); border-bottom:2px solid rgba(0,0,0,0.2); border-left:2px solid rgba(0,0,0,1); -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:load8 1.1s infinite linear; animation:jab-loader-spin 1.1s infinite linear; }
.jab-loader, .jab-loader:after { border-radius:50%; width:8px; height:8px; }

 @-webkit-keyframes jab-loader-spin {  0% {  -webkit-transform:rotate(0deg); transform:rotate(0deg); }  100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } }
 @keyframes jab-loader-spin { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } }