/* Styles go here */

body {
    font-family: 'Ubuntu', sans-serif;
    color: orangered;
}

.fill-height{
    display: flex;
    flex: 1;
    min-height: 100%;
}

.fill-height > div{
    min-height: 100%;
    display: flex;
}

#left_nav {
    width: 300px;
    min-width: 300px;
}

md-sidenav {
    overflow: visible;

}
.side-menu, .side-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

/*.side-menu .md-button.active {*/
    /*color: deeppink;*/
/*}*/

.side-menu .menu-toggle-list a.md-button {
    display: block;
    padding: 0 16px 0 32px;
    text-transform: none;
    text-rendering: optimizeLegibility;
    font-weight: 500;
}

.side-menu .menu-toggle-list .md-button {
    display: block;
    padding: 0 16px 0 32px;
    text-transform: none;
}

.side-menu > li {
    border-top: 1px solid #e1e1e1; /* rgba(0, 0, 0, 0.12) */
    border-left: 1px solid #e1e1e1; /* rgba(0, 0, 0, 0.12) */
    border-right: 1px solid #e1e1e1; /* rgba(0, 0, 0, 0.12) */
}

.side-menu > li:last-child {
    border: 1px solid #e1e1e1; /* rgba(0, 0, 0, 0.12) */
}

.md-button-toggle {

}

.leftnav-section-name {
    color: darkgray;
}

.leftnav-section-name.toggled {
    color: #31b8f6 /*#da5802;*/
}

.leftnav-link {
    color:gray;
    text-transform: capitalize;
}

.md-button-toggle.toggled {
    background: #ececec;
}

.md-button-toggle .md-toggle-icon.toggled {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.side-menu .md-button-toggle .md-toggle-icon {
    background-size: 100% auto;
    display: inline-block;
    margin: auto 0 auto auto;
    width: 15px;
    color: darkgray;
    transition: transform .5s;
    -webkit-transition: -webkit-transform .3s;
}

.menu-toggle-list.ng-hide {
    max-height: 0;
}

.side-menu .md-button {
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    margin: 0;
    max-height: 40px;
    overflow: hidden;
    padding: 0px 16px;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    width: 100%;
}

.menu-toggle-list {
    background: red;
    max-height: 1300px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -webkit-transition-property: max-height;
    -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -moz-transition-property: max-height;
    transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    transition-property: max-height;
}


.side-menu menu-toggle span{
    padding-top: 12px;
    padding-bottom: 12px;
}

/*************/

.tabsdemoDynamicHeight md-content {
    background-color: transparent !important; }
.tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }
.tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
    background: white; }
.tabsdemoDynamicHeight md-content h1:first-child {
    margin-top: 0; }


.bottomSheetdemoBasicUsage .md-inline-list-icon-label {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -10px;
    height: 24px;
    vertical-align: middle; }
.bottomSheetdemoBasicUsage .md-grid-item-content {
    height: 90px;
    padding-top: 10px; }
.bottomSheetdemoBasicUsage .md-grid-item-content md-icon {
    height: 48px;
    width: 48px; }
.bottomSheetdemoBasicUsage .md-grid-text {
    padding-bottom: 5px; }
.bottomSheetdemoBasicUsage md-list-item, .bottomSheetdemoBasicUsage md-list-item ._md-list-item-inner {
    min-height: 48px; }
.bottomSheetdemoBasicUsage h2 {
    line-height: 36px;
    padding-top: 10px; }
.bottomSheetdemoBasicUsage .md-subheader ._md-subheader-inner {
    padding: 0; }
.bottomSheetdemoBasicUsage md-toast .md-toast-content {
    background-color: #B14141; }
.bottomSheetdemoBasicUsage md-toast > * {
    font-weight: bolder; }

.fabSpeedDialdemoBasicUsage .text-capitalize {
    text-transform: capitalize; }
.fabSpeedDialdemoBasicUsage .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
    background-color: #000 !important; }
.fabSpeedDialdemoBasicUsage p.note {
    font-size: 1.2rem; }
.fabSpeedDialdemoBasicUsage .lock-size {
    min-width: 300px;
    min-height: 300px;
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto; }



.animate-enter,
.animate-leave
{
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space:nowrap;
}

.animate-leave.animate-leave-active,
.animate-enter {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.animate-enter.animate-enter-active,
.animate-leave {
    opacity: 1;
    width: 150px;
    height: 30px;
}

.material-icons {
    font-size:1.2em;
    vertical-align: middle !important;
    margin-right:3px;
}


@media screen and (max-width: 480px) {
    .fa {
        color: black;
    }
}



/********** Station Logos ************/
.station-logo { width: 150px; height: 75px; background-position-x: 100px; background-position-y: 10px;}
.station-logo-2x { width: 300px; height: 270px; background-position-x: 100px; background-position-y: 10px; }
.planet { background: url('../../img/prc/planet.png') repeat 0px; width:99.5%; height:100%; }
.bhakti { background: url('../../img/app/station_logos.png') no-repeat 0px; }
.classics { background: url('../../img/app/station_logos.png') no-repeat -150px; }
.dance { background: url('../../img/app/station_logos.png') no-repeat -300px; }
.electronica { background: url('../../img/app/station_logos.png') no-repeat -450px; }
.faith { background: url('../../img/app/station_logos.png') no-repeat -600px; }
.freedom { background: url('../../img/app/station_logos.png') no-repeat -900px; }
.funkaantenna { background: url('../../img/app/station_logos.png') no-repeat -750px; }
.fusion { background: url('../../img/app/station_logos.png') no-repeat -1050px; }
.ghazal { background: url('../../img/app/station_logos.png') no-repeat -1200px; }
.hindi { background: url('../../img/app/station_logos.png') no-repeat -1350px; }
.indipop { background: url('../../img/app/station_logos.png') no-repeat -1500px; }
.international { background: url('../../img/app/station_logos.png') no-repeat -1650px; }
.ishq { background: url('../../img/app/station_logos.png') no-repeat -1800px; }
.kannada { background: url('../../img/app/station_logos.png') no-repeat -1950px; }
.love { background: url('../../img/app/station_logos.png') no-repeat -2100px; }
.malayalam { background: url('../../img/app/station_logos.png') no-repeat -2250px; }
.metal { background: url('../../img/app/station_logos.png') no-repeat -2400px; }
.rock { background: url('../../img/app/station_logos.png') no-repeat -2550px; }
.smaran { background: url('../../img/app/station_logos.png') no-repeat -2700px; }
.sufi { background: url('../../img/app/station_logos.png') no-repeat -2850px; }
.tamil { background: url('../../img/app/station_logos.png') no-repeat -3000px; }
.wellness { background: url('../../img/app/station_logos.png') no-repeat -3150px; }

/*** Progress Arcs ***/
.progress-wrapper{
    position: relative;
    margin:20px auto;
    font-size: 40px;
}

.progress{
    position: absolute;
    color: #bbb;
    font-weight: 100;
    line-height: 1;
}