@-ms-viewport {
    width: device-width;
}

    html, body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    body {
        font-family: Arial, Helvetica, Verdana;
        font-size: 14px;
        /*	line-height: 22px;*/
        color: #666;
        position: relative;
        -webkit-text-size-adjust: none;
    }
    
    body * {
        text-shadow: none;
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1;
        font-weight: bold;
        /*margin: 20px 0 10px 0;*/
    }
    
    h1, h2, h3 {
        font-size: 18px;
    }
    
    h4, h5, h6 {
        /*font-size: 16px;*/
    }
    
    p {
        margin: 0 0 10px 0;
    }
    
    a, a:link, a:active, a:visited, a:hover {
        color: inherit;
        text-decoration: underline;
    }
    
    span.menu-header {
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        margin: 0 0 0 0;
    }
    
    a.back-button {
        float: left;
        margin-right: 10px;
    }
    
    
    @media all and (orientation:portrait) {
        .station {
            float: left;
            width: 100%;
            display: -moz-inline-stack;
            display: inline-block;
            *display: inline;
            text-align: center;
        }
    }
    
    @media all and (orientation:landscape) {
        .station {
            float: left;
            width: 45%;
            display: -moz-inline-stack;
            display: inline-block;
            *display: inline;
            text-align: center;
        }
    }
    
    .station img {
        width: 95%;
        border: solid #fff;
    }
    
    .startScreenStation img {
        width: 100%;
        border: solid #999999;
        border-radius: 0.25rem;
    }
    
    .login-button img {
        width: 95%;
        border: solid #fff;
    }
    
    .music-menu-button {
        float: left;
        width: 45%;
        display: -moz-inline-stack;
        display: inline-block;
        *display: inline;
        text-align: center;
    }
    
    .music-menu-button img {
        width: 95%;
        border: solid #fff;
    }
    
    .music-menu-button span {
        text-align: center;
        font-size: 10pt;
    }
    
    
    .copy-station-button {
        width: 30%;
        margin: 2px;
        display: -moz-inline-stack;
        display: inline-block;
        *display: inline;
        text-align: center;
    }
    
    .copy-station-button img {
        width: 95%;
        border: solid #fff;
    }
    
    .copy-station-button span {
        text-align: center;
        font-size: 10pt;
    }
    
    
    .header,
    .content,
    .player-content,
    .footer {
        text-align: center;
    }
        /*.header,
    .footer
    {
        display:table-header-group;
    	font-size: 16px;
    	font-weight: bold;
    	color:#ffffff;
     	position: fixed;
        top: 0;
         z-index: 10;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;	
    	width: 100%;
    	padding: 0 20px;
        border-bottom:1px solid #ffffff;
    }*/
        /*.header.fixed
    {
    	position: fixed;
    	top: 0;
    	left: 0;
     
    }
    .footer.fixed
    {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    }*/
    
    
    .header #header-wrapper a#menu-button {
        background: center center no-repeat transparent;
        color: white;
        display: none;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 20px;
        left: 20px;
    }
    
    .header #header-wrapper a#secondary-menu-button {
        background: center center no-repeat transparent;
        color: white;
        width: 40px;
        height: 40px;
        display: none;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    #secondary-menu, #menu {
        /* background-color: rgba(0,0,0, 0.55);*/
    }
    
    
    
    a.close-menu-button {
        background: center center no-repeat transparent;
        color: white;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .header #header-wrapper a#secondary-menu-button i, .header #header-wrapper a#menu-button i {
        text-align: center;
        vertical-align: middle;
    }
    
    .header-placeholder {
        display: table-row;
        height: 80px;
        width: 100%;
    }
    
    .content-wrapper {
        display: table-row;
        height: 100%;
        width: 100%;
    }
    
    
    .podcastOpenButton img {
        width: 100%;
        border: solid #999999;
        border-radius: 0.25rem;
    }
    
    .playlist-wrapper {
        grid-gap: 3%;
        display: grid;
        padding-left: 3%;
        grid-template-columns: 30% 30% 30%;
    }
    
    .video-list-wrapper {
        position: relative;
        height: calc(100vh - 75px);
        overflow: auto;
        /*width: 260px;*/
        z-index: 4;
        padding-bottom: 30px;
        padding-top: 30px;
        /*grid-gap: 3%;
        display: grid;
        padding-left: 3%;
        grid-template-columns: 30%;*/
    }
    
    .video-page-wrapper {
        display: grid;
        grid-template-columns: 67% 30%;
        grid-gap: 3%;
        padding-left: 3%;
    }
    
    .player-content {
        display: block;
        width: 100%;
        background: rgb(0,0,0);
        height: 100%;
    }
    
    .content {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .grid-content {
        display: block;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    .page {
        display: block;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    .hsPlayer-container {
        display: none;
        height: inherit;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    .hsStartScreen-container {
        text-align: center;
        display: none;
        /*height: inherit;*/
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    .hsStartScreen-container h3 {
        margin-top: 90px;
        text-align: center;
        color: white;
    }
    
    img.centerImage {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    div#StationList, div#LoginList, .two-column-menu-list, div#AdminCopyList, div#CopyStationList, div#AdminDeleteList, div#AdminMenuList {
        background-color: rgba(0,0,0,0);
    }
    
    .menu-list-wrapper {
        background-color: rgba(0,0,0,0);
        display: inline-block;
    }
   
    .panelbtn {
        font: normal 20px/normal "Antic", Helvetica, sans-serif;
        color: #6e6d6e; /* #ffffff;*/
        width: 95%;
        background: rgba(40,40,40,.6);
        margin: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        padding: 10px 20px 10px 20px;
        border: solid #b0b0b0 2px;
        text-decoration: none;
    }
    
    .panelbtn:hover {
        background: rgba(0,0,0,0.4);
        text-decoration: none;
    }
    
    label > input { /* HIDE RADIO */
        display: none;
    }
    
    label > input + img { /* IMAGE STYLES */
        cursor: pointer;
        border: solid #fff;
    }
    
    label > input:checked + img { /* (CHECKED) IMAGE STYLES */
        border: solid #f00;
    }
    
    
    .delete-menu-button, .copy-menu-button, .admin-menu-button {
        cursor: pointer;
        height: 40px;
    }
    
    
    .button {
        margin: 5px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 70%;
        height: 42px;
        cursor: pointer;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0 20px;
        overflow: hidden;
        border: none;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        font: normal 20px/normal "Antic", Helvetica, sans-serif;
        color: rgba(140,140,140,1);
        text-decoration: normal;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        background: rgba(40,40,40,0.6);
        -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.5) inset;
        box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.5) inset;
        -webkit-transition: all 502ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -moz-transition: all 502ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -o-transition: all 502ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        transition: all 502ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
    }
    
    .button:hover {
        color: rgba(181,181,181,1);
        background: rgba(0,0,0,0.4);
        -webkit-transition: all 500ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -moz-transition: all 500ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -o-transition: all 500ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        transition: all 500ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
    }
    
    .button:focus {
        width: 95%;
        cursor: default;
        padding: -13px 20px 0;
        color: rgba(255,255,255,1);
        -webkit-transition: all 601ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -moz-transition: all 601ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        -o-transition: all 601ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
        transition: all 601ms cubic-bezier(0.68, -0.75, 0.265, 1.75);
    }
    
    
    #txtContactBody {
        height: 100px;
    }
    
    .squaredThree {
        width: 20px;
        position: relative;
        margin: 20px auto;
    }
    
    .squaredThree label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
        background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
    }
    
    .squaredThree label:after {
        content: '';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border: 3px solid #fcfff4;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .squaredThree label:hover::after {
        opacity: 0.3;
    }
    
    .squaredThree input[type=checkbox] {
        visibility: hidden;
    }
    
    .squaredThree input[type=checkbox]:checked + label:after {
        opacity: 1;
    }
    
    .albumSongListItem {
        padding: 10px 8px;
        cursor: pointer;
        border: solid #f00;
        height: 30px;
    }
    
    .album-detail-header {
        /* position:fixed;*/
        display: table-row;
        width: 98%;
    }
    
    .album-detail-cover-wrapper {
        display: table-cell;
        width: 50%;
    }
    
    .album-detail-info {
        display: table-cell;
        width: 50%;
        vertical-align: top;
    }
    
    .album-detail-cover {
        width: 98%;
    }
    
    .toast {
        top: 72px;
    }
    
    #LoadingPanel img {
        width: 75%;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    
    .station-list-wrapper {
        grid-gap: 3%;
        display: grid;
        padding-left: 3%;
        padding-top: 25px;
        grid-template-columns: 30% 30% 30%;
    }
    
    .podcast-list-wrapper {
        grid-gap: 3%;
        display: grid;
        padding-left: 3%;
        padding-top: 25px;
        grid-template-columns: 30% 30% 30%;
    }
    
    .renamePlaylistPanel {
        grid-gap: 3%;
        display: grid;
        padding-left: 3%;
        padding-top: 25px;
        grid-template-columns: 30% 30% 30%;
    }
    
    .video-details-card {
        margin-top: 10px;
        padding: 20px;
    }
    
    .card {
        background-color: #333333;
    }
    
    .podcast-detail-wrapper {
        padding: 20px;
        display: grid;
        grid-gap: 3%;
        padding-left: 3%;
        grid-template-columns: 47% 47%;
    }
    
    .podcast-episode-detail-wrapper {
        padding: 20px;
        display: grid;
        grid-gap: 3%;
        padding-left: 3%;
        grid-template-columns: 47% 47%;
    }
    
    .playlist-button-line .btn.btn-just-icon .material-icons {
        margin-top: 0;
        position: absolute;
        width: 100%;
        transform: none;
        left: 0;
        top: 0;
        height: 100%;
        line-height: 41px;
        font-size: 32px;
    }
    
    
    .song-option {
        display: inline-block;
    }
    
    .song-option-info {
        display: inline-block;
    }
    
    /*
    .song-option {
        display:inline-block;
    }
    */
    
    
    [data-layout="info-and-album-cover"] .song-options-cover {
        display: none;
    }
    [data-layout="single-album-cover"]  .song-options-info{
        display: none;
    }
    
    .song-option i,
    .song-option-info i {
        padding: 20px;
    }
    
    .song-option i {
        font-size: 30px;
        /*padding: 15px;*/
        color:#FFFFFF;
    }
    
    .song-option[data-size="tiny"],
    .song-option-info[data-size="tiny"] i {
        font-size: 12px;
    }
    
    .song-option[data-size="x-small"],
    .song-option-info[data-size="x-small"] i {
        font-size: 16px;
    }
    
    .song-option[data-size="small"],
    .song-option-info[data-size="small"] i {
        font-size: 24px;
    }
    
    .song-option[data-size="medium"],
    .song-option-info[data-size="medium"] i {
        font-size: 30px;
    }
    
    .song-option[data-size="large"],
    .song-option-info[data-size="large"] i {
        font-size: 36px;
    }
    
    .song-option[data-size="x-large"],
    .song-option-info[data-size="x-large"] i {
        font-size: 42px;
    }
    
    .song-option[data-size="2x-large"],
    .song-option-info[data-size="2x-large"] i {
        font-size: 60px;
    }
    
    .song-option[data-size="3x-large"],
    .song-option-info[data-size="3x-large"] i {
        font-size: 72px;
    }
    
    .bottom-nav-wrapper {
        display: none;
        height: 80px;
        background-color: #2b2b2b;
        z-index:1000;
        width:100%;
    }
    
    .bottom-nav-wrapper .nav-tabs {
        padding: 0px;
        width: 100%;
       
    }
    
    .bottom-nav-wrapper .nav-tabs .nav-item {
        width: 25%;
        text-align: center;
    }
    
    .tab-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: 100%;
        z-index: 4;
    }
    
    .tab-image img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        margin-top: 5px;
        padding-bottom: 10px;
        width: 48px;
        z-index: 4;
    }
    
    .side-tab-image img {
        display: inline-block;
        margin-left: auto;
        margin-right: 10px;
        position: relative;
        margin-top: 5px;
        padding-bottom: 10px;
        width: 40px;
        z-index: 4;
        padding-right: 10px;
    }
    
    
    .bottom-nav-wrapper .nav-tabs .nav-item .material-icons {
        margin: -1px 0 0 3px;
    }
    
    #playerTab {
        padding: 0 0 25px 0;
    }
    
    
    .newPlaylistCard {
        width: 93%;
        margin: 3%
    }
    
    .videoCard {
        margin-bottom: 30px;
    }
    
    .podcast-left-side img {
        width: 100%;
    }
    
    .play-episode-button {
        position: relative;
        
        display: block;
        padding-bottom: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
       
        -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    }
    
    .play-episode-button-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
    }
    
    .play-episode-button {
        opacity: .5;
        position: absolute;
        display: block;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding-bottom: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    }
    
    
    .play-episode-button-wrapper a i {
        position: absolute;
        font-size: 100px;
        top: 50%;
        left: 50%;
        color: #db01fc;
        transform: translate( -50%, -50% );
    }
    

@media screen and (max-width: 375px) {
    .song-option i {
        font-size: 25px;
        padding: 7px;
    }
}

@media (max-width: 991.98px) {

    .bottom-nav-wrapper {
        display: block;
    }

    .newPlaylistCard {
        width: 94%;
        margin: 3%
    }

    .videoPlayerPanel {
        position: fixed;
        top: 50px;
    }

    .video-details-card {
        display:none;
    }

    .playlist-wrapper {
        grid-template-columns: 47% 47%;
        padding-bottom: 100px;
    }

    .podcast-detail-wrapper {
        display: block;
        grid-gap: 3%;
        padding-left: 3%;
        padding-right: 3%;
    }

    .podcast-episode-detail-wrapper {
        display: block;
        grid-gap: 3%;
        padding-left: 3%;
        padding-right: 3%;
    }

    /*.podcast-episode-detail-wrapper*/ .podcast-left-side {
     /*  padding: 20px; */
    }

    .video-list-wrapper {
        position: fixed;
        top: 50%;
        height: calc(50vh - 75px);
        overflow: auto;
        z-index: 4;
        padding-bottom: 0px;
        padding-top: 30px;
    }

    .video-page-wrapper {
        grid-template-columns: 96%;
        padding-left: 0;
    }

    .podcast-list-wrapper {
        grid-template-columns: 47% 47%;
        grid-gap: 15px;
    }

    .station-list-wrapper {
        grid-template-columns: 47% 47%;
        grid-gap: 15px;
    }
}

   
@media (min-width: 991.98px) {
  
}
        /*
[data-style-type="info-and-album-cover"] .song-options {
    display: block;
}*/
        /*
.fixed-footer {
    display:inline-block;
    position:fixed;
    bottom:0px;
}

.scrollable-list{
    padding: 200px;
    overflow:scroll;

}*/