$base-color:#41b5a8;
$base-gradient:'matte';
$ios7-blue: #41b5a8;
$page-bg-color:#ffffff;
$list-bg-color:#ffffff;
$include-html-style: false; 
$include-pictos-font: false;
$include-default-icons: false;
$experimental-support-for-mozilla : false;
$experimental-support-for-opera : false;
$experimental-support-for-microsoft : false;
$primary-text-color: #222;

$standard-margin: .5rem;
$standard-padding: .5rem;

@import "compass/css3";
@import 'blueprint/typography';
@import 'recipes/background';
@import 'recipes/color';

@import 'sencha-touch/base';
// @import 'sencha-touch/base/all';

@import 'sencha-touch/cupertino/var/_Class.scss';
@import 'sencha-touch/cupertino/src/_Button.scss'; 
@import 'sencha-touch/cupertino/src/_Toolbar.scss';
@import 'sencha-touch/cupertino/src/_Panel.scss';
@import 'sencha-touch/cupertino/var/dataview/_List.scss';
@import 'sencha-touch/cupertino/src/dataview/_List.scss';
@import 'sencha-touch/cupertino/var/form/_Panel.scss';
@import 'sencha-touch/cupertino/var/field/_Slider.scss';
@import 'sencha-touch/cupertino/var/field/_Toggle.scss';
@import 'sencha-touch/cupertino/src/field/_Select.scss';
@import 'sencha-touch/cupertino/src/slider/_Toggle.scss';
@import 'sencha-touch/cupertino/src/_Toolbar.scss';
@import 'sencha-touch/cupertino/var/field/_Field.scss';
@import 'sencha-touch/cupertino/src/field/_Field.scss';

@include icon-font('icomoon', inline-font-files('icomoon/icomoon.woff', woff));
@include icon("playlist", "\e900", "icomoon");
@include icon("filter", "\e901", "icomoon");
@include icon("home", "\e902", "icomoon");
@include icon("envelope", "\e903", "icomoon");
@include icon("history", "\e904", "icomoon");
@include icon("bubble", "\e905", "icomoon");
@include icon("list2", "\e906", "icomoon");
@include icon("earth", "\e907", "icomoon");
@include icon("bookmark", "\e908", "icomoon");
@include icon("info", "\e909", "icomoon");
@include icon("exit", "\e90a", "icomoon");
@include icon("share-android", "\e90b", "icomoon");
@include icon("facebook", "\e90c", "icomoon");
@include icon("twitter", "\e90d", "icomoon");
@include icon("pinterest", "\e90e", "icomoon");
@include icon("share-ios", "\e90f", "icomoon");
@include icon("sortZA", "\e910", "icomoon");
@include icon("sortAZ", "\e911", "icomoon");
@include icon("settings", "\e912", "icomoon");
@include icon("search", "\e913", "icomoon");
@include icon("back", "\e914", "icomoon");
@include icon("mute", "\e915", "icomoon");
@include icon("next", "\e916", "icomoon");
@include icon("loop", "\e917", "icomoon");
@include icon("shuffle", "\e918", "icomoon");
@include icon("menu", "\e919", "icomoon");
@include icon("eye", "\e91a", "icomoon");
@include icon("eyeBlocked", "\e91b", "icomoon");
@include icon("more", "\e91c", "icomoon");

html,
body {
    font-family: -apple-system 'Avenir Next', 'Avenir', Helvetica, Arial, sans-serif !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .x-list .x-list-item {
        border-top: 1px solid #ccc;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .x-list .x-list-item {
        border-top: calc(1px / 2) solid #ccc;
    }
}

.track-item-downloaded {
    &:before {
        position: absolute;
        color: rgba(65, 181, 168, 0.5);
        font-size: 1rem;
        font-family: "icomoon";
        left: 4px;
        top: 18px;
        transform: rotate(90deg);
        content: "\e916";
    }
}

.container-background {
    background-color: #FFF;
}

.no-padding {
    padding: 0;
}
.padding, .spa {
    padding: $standard-padding;
}
.padding-top, .spt {
    padding-top: $standard-padding;
}

.padding-bottom, .spb {
    padding-bottom: $standard-padding;
}

.padding-right, .spr {
    padding-right: $standard-padding;
}

.padding-left, .spl {
    padding-left: $standard-padding;
}

.no-margin {
    margin: 0;
}

.margin, .sma {
    margin: $standard-margin
}

.margin-top, .smt {
    margin-top: $standard-margin;
}

.double-margin-top {
     margin-top: $standard-margin * 2;
}

.margin-bottom, .smb {
    margin-bottom: $standard-margin;
}

.margin-right, .smr {
    margin-right: $standard-margin;
}

.margin-left, .sml {
    margin-left: $standard-margin;
}

.page-header .x-innerhtml {
    color: #444;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    font-weight: 400;
    margin-bottom: 0em;
    padding: $standard-padding;
    text-align: left !important;
}

@mixin custom-button() {
    @include transition(all .25s ease);
    @include border-radius(0px);
    background: transparent;
    border: none;
    font-size: 1.25rem;
    padding: .5rem;
    color: #333;
    height: auto;
    text-decoration: none;
    .x-button-label {
        padding: 8px;
        font-weight: 400;
        border-left: 2px solid rgba(65, 181, 168, 0.6);
        text-align: left;
    }
    .x-button-icon {
        color: #666;
        width: 1.4em;
        height: 1.4em;
        &:before {
            font-size: 1.4em;
        }
        margin: 4px 8px 4px 4px;
    }
    &.x-button-pressing {
        background: rgba(255, 255, 255, 0.20)
    }
}

.transparent {
    @include custom-button();
}
 
 .x-button-icon {
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
 }

 .x-button-icon.play {
     top: -0.375em;
     left: -0.375em;
     width: 3em;
     height: 3em;
 }
 
 .x-button .x-button-icon.play:before {
     font-size: 2.5em;
 }
 
 .x-button-icon.pause {
     top: -0.375em;
     left: -0.375em;
     width: 3em;
     height: 3em;
 }
 
 .x-button .x-button-icon.pause:before {
     font-size: 2.5em;
 }
 
 .x-toolbar {
     padding: 0;
 }

 .x-toolbar.x-docked-bottom {
   border-top: none;
}


.x-slider.x-item-disabled {
    opacity: .6;
}

.x-slider {
    height: 16px;
    margin: 0 8px;

    &:before {
        margin: 10px;
        top: -4px;
        right: 0;
        left: 0;
        height: 4px;
        background-color: rgba(65, 181, 168, 0.25);
    }
}

.x-thumb {
    top: -12px;
    height: 46px;
    width: 30px;
    background: transparent none;
    border: 0;

    &:after {
        @include insertion(18px,18px);
        background-color: #f8f9f9;
        top: 8px;
        height: 24px;
        width: 24px;
        border: 2px solid rgba(65, 181, 168, 0.5);
        border-radius: 50%;
    }

    &.x-thumb-pressing {
        &:after {
            -webkit-transition: all 250ms linear;
            transition: all 250ms linear;
            -webkit-transition-property: height, width, top, left, opacity;
            transition-property: height, width, top, left, opacity;
            opacity: .5;
            @include insertion(24px,24px,8px,0px);
        }
    }
}

.x-list .x-list-item {
    min-height: 72px !important;
    max-height: 72px !important;
    overflow: hidden;
    min-width: 100%;
}

 .x-list .x-list-item.x-list-item-tpl:before {
     width: calc(100% - 2em);
 }
 
 .x-list .x-list-item.x-list-item-tpl {
     padding: .5rem 2rem .5rem 1.4rem; 
 }
 
 .x-list .x-list-item.x-list-item-tpl .x-innerhtml {
     padding: 0px;
     font-size: 14px;
 }

.x-list .x-list-disclosure {
    height: auto;
    margin: .25rem .75rem;
    border: none;
    background-color: transparent;
    &:before {
        position: absolute;
        color: rgba(65, 181, 168, 0.5);
        font-size: 1.5rem;
        font-family: "icomoon";
        transform: rotate(90deg) translate(50%);
        content: "\e91c";
    }
 }
 
 .x-list-item {
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     -webkit-box-pack: start;
     -webkit-box-align: center;
 }

 .x-list .x-list-header {
  background-color: rgba(242, 250, 251, 0.90);
  border-bottom: 1px solid #41b5a8;
  padding: .25em 1em;
}

.x-list .x-list-header .x-innerhtml {
  font-size: 1em;
  font-weight:400;
}
 
 .x-toolbar-dark {
     z-index: 4;
     
 }

 .toolbar-shadow {
      box-shadow: 0px 0px 5px 0px rgba(145,145,145,0.65);
 }
 
 .x-list .x-list-item {
     color: #545556 !important;
     width: inherit;
 }
 
 .audioplayer {
     overflow: hidden;
     position: relative;
 }
 
 .audioplayer .elementInner {
     background: no-repeat center top;
 }
 
 .audioplayer .x-body {
     -webkit-box-flex: 0
 }
 
 .audioplayer .bottomContainer {
     margin-top: 6px;
 }
 
 .audioplayer .audiotitle {
     font-size: 17px;
     text-align: center;
     padding-top: 5px;
     color: #FFF;
     display: block;
 }
 
 .audioplayer .audiotitle .x-inner {
     width: 200px;
     display: inline-block;
 }
 
 .audioplayer .audiotitle .x-innerhtml {
     width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
 }
 
 .audioplayer .audiotime {
     font-size: 14px;
     text-align: center;
     padding: 0 5px;
     color: #DDD;
 }
 
 .audioplayer .audiotime:first-child {
     padding: 0 0 0 5px;
 }
 
 .x-animated-icon-element-container {
     -webkit-transform: rotate(-90deg);
     transition: all 0.33s ease;
 }
 
 .x-animated-icon-element-container-2 {
     transition: all 0.33s ease;
 }
 
 .x-icon-element-top {
     height: 0px;
     width: 0px;
     border-top: .375em solid $base-color;
     border-left: 1em solid $base-color;
     border-right: 1em solid $base-color;
     border-bottom: .375em solid $base-color;
     margin-bottom: .5em;
     transition: all 0.2s ease-in-out;
 }
 
 .x-icon-element-bottom {
     height: 0px;
     width: 0px;
     border-top: .375em solid $base-color;
     border-left: 1em solid $base-color;
     border-right: 1em solid $base-color;
     border-bottom: .375em solid $base-color;
     transition: all 0.2s ease-in-out;
 }
 
 .x-icon-element-top-2 {
     height: 0px;
     width: 0px;
     border-top: .5em solid transparent;
     border-left: 1em solid $base-color;
     border-right: 1em solid transparent;
     border-bottom: .5em solid $base-color;
     transition: all 0.2s ease-in-out;
 }
 
 .x-icon-element-bottom-2 {
     height: 0px;
     width: 0px;
     border-top: .5em solid $base-color;
     border-left: 1em solid $base-color;
     border-right: 1em solid transparent;
     border-bottom: .5em solid transparent;
     transition: all 0.2s ease-in-out;
 }

.x-toolbar .x-field-input {
  background: transparent;
}

.x-field-input {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.13);
    background: transparent;
}

.x-field-search .x-field-input:before {
        color: #ccc;
        font-family: "icomoon";
        position: absolute;
        top: .35em;
        left: .35em;
        content: "\e913";
        font-size: 1.4em;
}

.x-field-input .x-input-search{
    border-bottom: none;
    padding: .4em .4em .4em 2em;
    background: transparent;
}

.x-field-input .x-reveal-icon {
    position: absolute;
    right: 1.25em;
    background-color: transparent;
    top: 0.5em;
}

.x-field-text.x-field-revealable .x-reveal-icon:before {
    color: #ccc;
    font-family: "icomoon";
    content: "\e91a";
    font-size: 1.5em;
}

.x-field-text.x-field-revealable.x-revealed .x-reveal-icon:before {
    color: #ccc;
    font-family: "icomoon";
    content: "\e91b";
    font-size: 1.5em;
}

.sign-in-button {
    border-radius: 0;
    border: none;
    border-top: 1px solid #41b5a8;
}


.language-button-label {
    font-size: 13px;
    color: #41b5a8;
    font-weight: 300;
    text-overflow: clip;
}
.x-icon-inactive {
    color: #ADADAD;
    
}

.x-panel.x-floating, .x-msgbox, .x-form.x-floating {
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9);
      border-radius: 5px;
}

.x-msgbox-text {
    background-color: #F8F9F9;
    padding: 1rem;
}

.ripple-parent {
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
}

.ripple-effect-white {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.10);
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.35);
    -webkit-animation: ripple 1s;
    -webkit-animation-fill-mode: forwards;
}

.ripple-effect-grey {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.10);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.25);
    -webkit-animation: ripple 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(75);
        opacity: 0;
    }
}

.side-panel-background {
    background-image: -webkit-linear-gradient(top,#fff,#ededed);
    background-image: linear-gradient(to bottom,#fff,#ededed);
}

@mixin share-icon($color, $name) {
    .#{$name}Color {
        color: $color !important;
        @include transition(color .25s ease);
    }
}

@include share-icon(#555555, "defaultShare");
@include share-icon(#00aced, "twitter");
@include share-icon(#3b5998, "facebook");
@include share-icon(#dd4b39, "pinterest");
@include share-icon(#007D1D, "envelope");
@include share-icon(#F2B50F, "bubble");

.x-button-icon.share-ios {
    font-weight: bold;
}