@charset "UTF-8";.divWrapper{position:relative;padding-bottom:56.25%;padding-top:0;height:0;}
.divWrapper iframe{position:absolute;left:0;width:100%;height:100%;border:none;}
.noContent{color:#999;margin:auto;padding:20px;}
.demo button{display:block;margin-top:10px;}
#get-class{padding:20px 0px;}
#get-class li{background-color:#eaeaea;border:1px solid #dadada;color:#333;display:inline-block;margin:3px;padding:3px 10px;}
#get-class li:hover{background-color:#fff;}
.IE .etabs,
.IE .video-group,
.IE .box-wrap,
.IE .listing-box .text,
.IE .cate-wrap,
.IE .diy-thumb-wrap{
    font-size: 100%;
}

/* header & menu */
.no-mobile.IE .language-wrap,
.no-mobile.IE .genreDetail-lang-wrap,
.no-mobile.IE .genreDetail-genre-wrap,
.no-mobile.IE .start-time-wrap .input-wrap,
.no-mobile.IE .end-time-wrap .input-wrap,
.no-mobile.IE .tellUs-reason .input-wrap{
    display: table;
    position: relative;
}
.no-mobile.IE .start-time-wrap .input-wrap,
.no-mobile.IE .end-time-wrap .input-wrap,
.no-mobile.IE .tellUs-reason .input-wrap{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* destop ie select box will have original arrow showing */
.no-mobile.IE .language-wrap:after,
.no-mobile.IE .genreDetail-lang-wrap:after,
.no-mobile.IE .genreDetail-genre-wrap:after,
.no-mobile.IE .start-time-wrap .input-wrap:after,
.no-mobile.IE .end-time-wrap .input-wrap:after,
.no-mobile.IE .tellUs-reason .input-wrap:after{
    background-color: #fff;
    content: "";
    display: block;
    height: 44px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    z-index: 5;
}
.no-mobile.IE .start-time-wrap .input-wrap:after,
.no-mobile.IE .end-time-wrap .input-wrap:after,
.no-mobile.IE .tellUs-reason .input-wrap:after{
    background-color: #e7e7e7;
    right: 30px;
}
.no-mobile.IE .start-time-wrap.valid .input-wrap:after,
.no-mobile.IE .end-time-wrap.valid .input-wrap:after,
.no-mobile.IE .tellUs-reason.valid .input-wrap:after{
    background-color: #9ed266;
    right: 74px;
}
.no-mobile.IE .language-wrap:after{
    left: 0px;
    right: auto;
}
.no-mobile.IE .genreDetail-lang-wrap:after,
.no-mobile.IE .genreDetail-genre-wrap:after{
    background-color: #ebebeb;
    right: 30px;
}
.no-mobile.IE-9 #start-time,
.no-mobile.IE-9 #end-time{
    margin-top: -1px;
    /*
    height: 42px;
    margin: -43px 0px 0px 0px;
    */
}

/* browse page */
.IE .genreDetail-genre-wrap.loading{
    width: 200px;
}
.IE .genreDetail-genre-wrap.loading:after{
    background-color: transparent;
    display: inline-block;
    width: 130px;
}
.IE-9 .manage-diy-section .action.on-off input,
.IE-9 .pacakge-manage-wrap .action.on-off input{
    margin-top: -7px;
}

/* fallback for samsung native browser(internet)*/
.samsung_native #dialog{
    /*max-height: 260px !important;*/
}
/* 	for unknown reason, when the content is too long, item at the bottom part of the content is not clickable,
        add extra padding to make sure item at bottom is able to scroll to clickable area
*/
.samsung_native #form-manage-crt-group,
.samsung_native #form-manage-setTime-add{
    padding-bottom: 60px;
}
/* 	for unknown reason, samsung native browser's input-wrap will remain full width when validating
        if no margin added to it
*/
.samsung_native .validating .input-wrap{
    margin-right: 1px;
}




/* ===== notification ==================== */
#notification-bar{
    left: 0px;
    padding: 12px 0px;
    position: fixed;
    top: -100%;
    width: 100%;
    z-index: 100;
}
#notification-bar p{
    color: #fff;
    font-size: 88%;
}
#notification-bar.green{
    background-color: #61c200;
}
#notification-bar.red{
    background-color: #ff0000;
}
#notification-bar.orange{
    background-color: #FF7F50;
}





/* ===== common ==================== */
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
*{
    color:#999;
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin:0px;
    padding:0px;
}
body{
    background-color: #f3f3f3;
    counter-reset: albumTracks-counter contest-guide-counter contest-tnc-counter;
}
a{
    color: #E10000;
}
img{
    vertical-align: top;
}
a img{
    border: none;
}
sup{
    color: inherit;
    font-size: 75%;
}
span{
    color: inherit;
}
p{
    color: #464646;
    font-size: 88%;
}
p > a,
p > span{
    font-size: inherit;
}
.main{
    color: #333;
}
.sub{
    color: #999;
}
.desc{
    color: #666;
    font-size: 75%;
}
.txt-red{
    color: #e10000;
}
.txt-dark{
    color: #333;
}
.txt-bold{
    font-family: Arial, sans-serif;
    font-size: inherit;
    font-weight: bold;
}
strong,
b{
    color: inherit;
    font-family: Arial, sans-serif;
    font-size: inherit;
    font-weight: bold;
}
.crt-tnc{
    color: black;
    font-family: Arial, sans-serif;
    font-size: inherit;
    font-weight: bold;
}
#wrapper{
    padding-top: 44px;
}
.icon{
    background-repeat: no-repeat;
    cursor: pointer;
    height: 44px;
    vertical-align: top;
    width: 44px;
}
/* arrow with ▴
.arrow{
        color: #333;
        float: right;
        font-size: 16px;
        font-weight: normal;
        line-height: 44px;
        text-align: center;
        width: 30px;
        
        -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
        
        -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.opened .arrow{
        -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.active .arrow{
        color: #e10000;
}
.disabled .arrow{
        color: #ccc;
}
*/
.arrow{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #464646;
    float: right;
    height: 0px;
    margin: 18px 10px;
    width: 0px;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.opened .arrow{
    border-top-color: #e10000;

    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.disabled .arrow{
    border-top-color: #ccc;
}
.active .arrow{
    border-top-color: #e10000;
}
.error .arrow{
    border-top-color: #ff0000;
}
.valid .arrow{
    border-top-color: #fff;
}
.centerContent{
    padding: 0px 15px;
    max-width: 980px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.section-top-line{
    border-top: 1px solid #dadada;	
}
.section-titleBar{
    padding-bottom: 10px;
}
.title-back{
    display: inline-block;
    height: 44px;
    line-height: 44px;
    margin-bottom: -10px;
    text-decoration: none;
}
.title-back:after{
    clear: both;
    content: "";
    display: block;
}
.title-back-arrow{
    background-color: #e10000;
    background-image: url(../images/title-back-arrow-horiz.png);
    background-position: left top;
    background-repeat: no-repeat;
    color: #f3f3f3;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    margin-top: 11px;
    text-align: center;
    vertical-align: top;
    width: 22px;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;

    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}
.title-back p{
    color: inherit;
    display: inline-block;
    font-size: 100%;
    line-height: inherit;
    vertical-align: top;
}
.title-back:hover p{
    text-decoration: underline;
}
.title-back:hover .title-back-arrow{
    background-color: #fff;
    background-position: -22px top;
}
h2{
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 140%;
    font-weight: bold;
    padding-top: 15px;
}
.title-desc{
    color: #999;
    font-size: 88%;
    line-height: 18px;
    margin-top: 10px; 
}
.title-desc:first-of-type{
    margin-top: 0px;
}
.title-desc p,
.title-desc span,
.title-desc a{
    font-size: inherit;
}

/* remove default style when button / input in focus */
a,
.menu-toggle,
.expMenu-label,
.language-wrap select,
.preview,
.listing .action,
.listing .arrow,
.packages .title,
.packages .package-track,
.manage-button,
.attempt-bar,
#search-field,
.shortCut-search-bar,
.dial-button,
button,
input[type="button"],
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select{
    outline-width:0;
}
.error-msg{
    background-image: url(../images/indicator-error-msg.png);
    background-position: left top;
    background-repeat: no-repeat;
    color: #e10000;
    font-size: 87%;
    line-height: 26px;
    padding-left: 27px;
    padding-right: 10px;
}
.artwork img,
.thumb img,
.thumb-vfx img,
.portrait img,
.contest-wrap img{
    width: 100%;
}
.thumb-vfx img{
    height: 100%;
}
#page-loading{
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999;
}
#page-loading .overlay{
    background-color: #fff;
    height: 100%;
    left: 0px;
    opacity: .75;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    -khtml-opacity: .75;
    opacity: .75;
}
.ani{
    background-image: url(../images/ripple.gif);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    height: 44px;
    width: 44px;
}
#page-loading h1{
    line-height: 44px;
    overflow: hidden;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.loading-info{
    background-color: #fff;
    left: 50%;
    max-width: 460px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: 80%;


    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.contact-wrap,
.time-wrap{
    padding-top: 10px;
}


.share-btn{
    background-position: left 0px;
    background-repeat: no-repeat;
    height: 44px;
    vertical-align: top;
    width: 44px;
    display:inline-block;
    text-decoration: none;
}
.share-btn:hover{
    background-position: left -44px;
}
.share-btn.fb{
    background-image: url(../images/share-fb.png);
}
.share-btn.twi{
    background-image: url(../images/share-twi.png);
}
.share-btn.gPlus{
    background-image: url(../images/share-gPlus.png);
}
.share-btn.whatsapp{
    background-image: url(../images/share-whatsapp.png);
}

/* song request button special style */
.song-req,
.crt-plus-text{
	padding-left: 12px;
}
.song-req p{
	background: #e10000 url(../images/iconSprite-song-req.png) left -95px no-repeat;
	color: #fff;
	display: inline-block;
	padding: 0 10px 0 44px;
        line-height: 30px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
.active.song-req{
	padding-left: 0;
}
.active.song-req p{
	background-color: transparent;
	background-position: left -51px;
	color: #e10000;
	
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* crt+ menu style */
.crt-plus{
	height: 44px;
	min-width: 94px;
	padding: 0;
	position: relative;
}
.crt-plus:after{
	background: #e10000;
	content: "";
	display: block;
	height: 30px;
	left: 12px;
	margin-top: -15px;
	position: absolute;
	top: 50%;
	width: 78px;
	
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
.crt-plus p{
	background: url(../images/crt+.png) 22px -132px no-repeat;
	height: 44px;
	position: relative;
	z-index: 1;
}
.active.crt-plus p{
	background-position: 0 -88px;
}
.crt-plus-text p{
	background: #e10000;
	color: #fff;
    display: inline-block;
    padding: 7px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
.crt-plus-text span{
	font-size: 120%;
}


/* ===== dialog, jQuery UI, overwrite style ==================== */
#dialog{
    background-color: #fff;
    display: none;
    padding: 0px;
    position: relative;
}
#form-manage-crt-group .info:after{
    clear: both;
    content: "";
    display: block;
}
/* style for popout with button panel */
.custom-popout.ui-dialog.ui-dialog-buttons{
}
.custom-popout.ui-dialog.ui-dialog-buttons #dialog{
    overflow-x: hidden;
    overflow-y: auto;
}

.dialog-close-text{
    bottom: 12px;
    color: #fff;
    font-size: 75%;
    height: 22px;
    line-height: 22px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 200;
}
.custom-popout a{
    color: #e10000;
}
.custom-popout input{
    font-family: Arial, sans-serif;
}
#dialog > div,
#dialog form > div{
    padding: 10px;
}
.custom-popout.ui-dialog{
    border: none;
    max-height: 70%;
    max-width: 460px;
    overflow-y: auto;
    padding: 0px;
    position: fixed;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.no-samsung_native .custom-popout.ui-dialog{
    left: 50% !important;  /* add !important to override inline style */
    top: 50% !important;  /* add !important to override inline style */

    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.custom-popout.ui-dialog .ui-dialog-titlebar{
    display: none;
}
html .ui-widget-overlay{
    background-color: #000;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    -khtml-opacity: .75;
    opacity: .75;
}
/* confirm purchase */
.custom-popout .selected-song{
    border-bottom: 1px solid #dadada;
}
#dialog > div > .selected-song{
    padding-bottom: 10px;
}
#dialog > div > .selected-song + .info{
    padding-top:10px;
}

/* when the dialog is only one or few paragraphs */
#dialog > p{
    padding: 10px;
}
#dialog .listing{
    background-color: transparent;
    float: none;
    height: 44px;
    margin: 0px;
    padding: 0px;
}
#dialog .listing.manage{
    height: auto;
}
#dialog .listing:hover{
    background-color: transparent;
}
.price{
    color: #e10000;
    margin-top: 5px;
}
.price span{
    color: #999;
    font-size: 75%;
    margin-left: 5px;
}
.gst-reminder{
    color: #333;
    font-size: 58%;
}
.custom-popout .visitor-msg{
    color: #464646;
    font-size: 88%;
    margin-top: 30px;
}
.USSD-code{
    background-color: #f2f2f2;
}
.USSD-code p{
    color: #999;
    font-size: 75%;
    line-height: 120%;
    margin-top: 5px;
}
#USSD{
    background-color: transparent;
    color: #e10000;
    font-family: Arial, sans-serif;
    font-size: 105%;
    font-weight: bold;
    padding: 0px;
}
.custom-popout label{
    display: block;
    margin-top: 10px;
    position: relative;
}
.custom-popout label.gift,
.custom-popout label.weekend-def{
    height: 22px;
    line-height: 22px;
}
.custom-popout .gift p,
.custom-popout .weekend-def p{
    color: #999;
    margin-left: 5px;
}
.custom-popout label input[type="checkbox"]{
    display: inline-block;
    position: relative;
    top: 50%;
    vertical-align: top;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.custom-popout label p{
    display: inline-block;
    font-size: 75%;
    line-height: 22px;
}
.field-wrap.receiver-wrap{
    display: none;
}
.custom-popout.ui-dialog .ui-dialog-buttonpane{
    background-color: #f2f2f2;
    margin-top: 0px;
    padding: 10px;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.custom-popout.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
    float:none;
    margin-right: -10px;
}
.custom-popout.ui-dialog .ui-dialog-buttonpane button{
    font-family: Arial, sans-serif;
    font-size: initial;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
}

/* date picker */
#dialog select,
form select{
    font-size: 88%;
    padding-left: 15px;
    text-transform: capitalize;
    width: 100%;
}
#form-manage-assignContatc-add,
#form-manage-assignContatc-edit{
    float: left;
    position: relative;
    width: 100%;
}
#form-manage-assignContatc-add > div:after,
#form-manage-assignContatc-edit > div:after{
    clear: both;
    content: "";
    display: block;
}
.calendar-wrap{
    margin-left: 100%;
    position: relative;
    top: 0px;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.calendar-wrap .start,
.calendar-wrap .end{
    display: none;
    margin-top: 10px;
}
.calendar-wrap .start:before,
.calendar-wrap .end:before{
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 140%;
    font-weight: bold;
    padding-top: 15px;
}
.calendar-wrap .start:before{
    content: "Start Date";
}
.calendar-wrap .end:before{
    content: "End Date";
}
.ui-datepicker{
    background-color: #f3f3f3;
    border: none;
    padding: 4px;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-datepicker .ui-datepicker-header{
    background-color: #e10000;
    border: none;
    height: 44px;
    margin: -4px -4px 0px -4px;
    padding: 0px;

    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next{
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    height: 40px;
    width: 44px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.ui-datepicker .ui-datepicker-prev.ui-state-hover, 
.ui-datepicker .ui-datepicker-next.ui-state-hover{
    background-color: transparent;
}
.ui-datepicker .ui-datepicker-prev.ui-state-disabled, 
.ui-datepicker .ui-datepicker-next.ui-state-disabled{
    opacity: .35;
}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span{
    display: none;
}
.ui-datepicker .ui-datepicker-prev{
    background-image: url(../images/calendar-prev.png);
}
.ui-datepicker .ui-datepicker-next{
    background-image: url(../images/calendar-next.png);
}
.ui-datepicker .ui-datepicker-title{
    color: #fff;
    line-height: 44px;
}
.ui-datepicker .ui-datepicker-title span{
    color: inherit;
}
.ui-datepicker table{
    margin-bottom: 0px;
}
.ui-datepicker td{
    width: 14.285714%;
}
/**/
.ui-datepicker td span,
.ui-datepicker td a,
.ui-datepicker .ui-state-default{
    background-color: #e10000;
    border: none;
    color: #fff;
    padding: 4px;
    text-align: center;
}
.ui-datepicker td.ui-state-disabled{
    opacity: 1;
}
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-state-disabled a{
    background-color: #ccc;
    color: #eee;
    opacity: 1;
}
.ui-datepicker .ui-datepicker-current-day a{
    background-color: #61c200;
}
.ui-datepicker .ui-datepicker-current-day a{
    border: none;
    color: #fff;
}






/* ===== header / menu ==================== */
#header{
    background-color: #fff;
    height: 44px;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 99;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#header:after{
    clear: both;
    content: "";
    display: block;
}
nav .centerContent,
.logo-bar .centerContent{
    padding: 0px;
}

/* ===== logo bar ===== */
.logo-bar{
    float: left;
    height: 44px;
    width: calc(100% - 44px);

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: -1;
}
/* fallback for browser that not support css: calc() */
.no-csscalc .logo-bar{
    /**/
    margin-left: -44px;
    padding-left: 44px;
    width: 100%;
}
.logo-bar .centerContent:after{
    clear: both;
    content: "";
    display: block;
}
.logo-bar a{
    display: block;
    float: left;
}
.language-wrap,
.reset-wrap{
    float: right;
}
.reset-wrap a,
.reset-wrap p{
    color: #464646;
    font-size: 75%;
    height: 44px;
    line-height: 44px;
    padding-right: 20px;
    text-decoration: none;
    text-transform: uppercase;
}
.reset-wrap p{
    color: #ccc;
}


/* ===== menu ===== */
.menu-toggle{
    /*background-color: #fff;*/
    background-color: transparent;
    float: left;
    height: 44px;
    min-width: 0px;
    padding: 15px 12px;
    position: relative;
    text-align: center;
    width: 44px;
    z-index: 100;
}
.menu-toggle .bar{
    background-color: #333;
    height: 2px;
    margin-top: 4px;
    width: 20px;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.menu-toggle .bar.top{
    margin-top: 0px;
}
.menu-toggle.opened .bar{
    background-color: #e10000;
}
.opened .top{
    margin-bottom: -2px;

    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.opened .mid{
    margin: 0px;
    width: 0px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.opened .bot{
    margin-top: -2px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
nav{
    background-color: #ebebeb;
    bottom: 0px;
    left: -82%;
    overflow-y: auto;
    position: fixed;
    top: 0px;
    width: 82%;
    z-index: 99;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
nav .centerContent:after{
    clear: both;
    content: "";
    display: block;
}
nav a,
nav button,
.desk-profile a,
.desk-signIn-wrap a,
.nav-style{
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
    color: #4d4d4d;
    display: block;
    font-size: 88%;
/*    height: 44px;*/
    line-height: 44px;
    overflow: hidden;
    padding-left: 44px;
    padding-right: 10px;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
nav a:hover,
nav button:hover{
}
nav a.active,
nav button.active,
.desk-profile a.active{
    background-position: left center;
    color: #e10000;
}
nav a.disabled,
nav button.disabled,
nav button:disabled{
    background-position: left bottom;
    color: #ccc;
}
.expMenu{
    min-height: 44px;
}
.mob-profile{
    background-color: #fff;
    padding: 64px 0px 10px 0px;
}
.user-number{
    color: #999;
    font-weight: normal;
}
.welcome-msg{
    color: #333;
    font-family: Arial, sans-serif;
    font-weight: bold;
    margin: 0px 15px;
}
.user-number{
    font-size: 75%;
    margin: 0px 15px 10px 15px;
    padding-bottom: 15px;
    position: relative;
}
nav .user-number:after{
    border-bottom: 1px solid #f4f4f4;
    bottom: 0px;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
}
.user-number a{
    padding-left: 0px;
}
nav .expMenu-label{
    color: #333;
    cursor: pointer;
    font-size: 88%;
    line-height: 44px;
    padding-left: 44px;
    text-align: left;
    width: 100%;
}
.closed .option-wrap{
    display: none;
}
.option-wrap li{
    background-image: url(../images/menu-dotted-line.png);
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    height: 44px;
    padding-left: 32px;	
}
.option-wrap li:last-child{
    background-image: url(../images/menu-dotted-line-last.png);
}
.nav-overlay{
    background-color: #000;
    bottom: 0px;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.desk-signIn-wrap{
    display: none;
}
/* menu icon */
.manage{
    background-image: url(../images/iconSprite-manage.png);
}
.purchases{
    background-image: url(../images/iconSprite-purchases.png);
}
.what-is-crt{
    background-image: url(../images/iconSprite-whatsCRT.png);
}
.for-you{
    background-image: url(../images/iconSprite-foryou.png);
}
.browse{
    background-image: url(../images/iconSprite-browse.png);
}
.search{
    background-image: url(../images/iconSprite-search.png);
}
.packages,
.listing.packages .thumb{
    background-image: url(../images/iconSprite-packages.png);
}
.diy{
    background-image: url(../images/iconSprite-diy.png);
}
.cool-stuff{
    background-image: url(../images/iconSprite-CoolStuff.png);
}
.bgm{
    background-image: url(../images/iconSprite-bgm.png);
}
.spotify{
    background-image: url(../images/iconSprite-spotify.png);
}
.sign-out{
    background-image: url(../images/iconSprite-signOut.png);
}
.sign-in{
    background-image: url(../images/iconSprite-signIn.png);
}
nav .manage-crt{
    background-image: url(../images/iconSprite-browse.png);
}
nav .manage-packages{
    background-image: url(../images/iconSprite-packages.png);
}
nav .manage-diy{
    background-image: url(../images/iconSprite-diy.png);
}
nav .manage-bgm{
    background-image: url(../images/iconSprite-bgm.png);
}
.more{
	background-image: url(../images/iconSprite-more.png);
}

.desk-profile{
    display: none;
}

/* ===== search ==================== */
.predict-msg{
    margin:0px 15px;
    color:#999;
    font-size:88%;
    line-height:18px;
}

#search-wrap{
    display: none;
    height: 100%;
    left: 0px;
    padding-top: 44px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 200;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#form-search{
    height: 100%;
    width: 100%;
}
.search-overlay{
    background-image: url(../images/color-black-70.png);
    display: none;
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
#search-bar{
    background-color: #e2e2e2;
    left: 0px;
    position: fixed;
    top: -44px;
    height: 44px;
    width: 100%;
    z-index: 130;
}
#search-bar .centerContent{
    padding-left: 0px;
    padding-right: 0px;
}
#search-field{
    background-image: url(../images/iconSprite-search.png);
    margin-right: 10px;
    padding-right: 0px;
    width: calc(100% - 96px);

    -webkit-appearance: textfield;
}
.search-cancel{
    color: #e10000;
    float: right;
    line-height: 44px;
    margin-bottom: -44px;
    padding: 0px 15px;
    position: relative;
}
.search-cancel:before{
    border-right: 1px solid #cbcbcb;
    content: "";
    display: block;
    height: 20px;
    left: 0px;
    top: 12px;
    position: absolute;
}
#suggest-search{
    background-color: #f3f3f3;
    background-image: url(../images/ripple.gif);
    background-position: 15px 10px;
    background-repeat: no-repeat;
    display: none;
    height: 64px;
    padding-bottom: 10px;
    padding-left: 59px;
    padding-top: 10px;

    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}
#suggest-search:before{
    content: "Generating suggested searches";
    display: block;
    font-size: 88%;
    line-height: 14px;
    padding-left: 10px;
    position: relative;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#predict-wrap{
    background-color: #f3f3f3;
    max-height: 68%;
    overflow-y: auto;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


    -webkit-transition: opacity 750ms ease-in-out;
    -moz-transition: opacity 750ms ease-in-out;
    -ms-transition: opacity 750ms ease-in-out;
    -o-transition: opacity 750ms ease-in-out;
    transition: opacity 750ms ease-in-out;
}
#predict-wrap.off{
    display: none;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
#predict-wrap.on{
    display: block;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
#predict-wrap > div{
    padding: 10px 0px;
}
#predict-wrap > div:before{
    display: block;
    font-size: 75%;
    line-height: 20px;
    margin-left: 15px;
}
.predict-crt:before{
    content: "Tracks";
}
.predict-artist:before{
    content: "Artists";
}
.predict-album:before{
    content: "Albums";
}
.predict-item{
    background-position: left -176px;
    background-repeat: no-repeat;
    font-size: 88%;
    line-height: 44px;
    overflow: hidden;
    padding-left: 44px;
    padding-right: 15px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.predict-crt .predict-item{
    background-image: url(../images/iconSprite-music1.png);
}
.predict-artist .predict-item{
    background-image: url(../images/iconSprite-mic.png);
}
.predict-album .predict-item{
    background-image: url(../images/iconSprite-album.png);
}
.predict-crt, 
.predict-artist{
    border-bottom: 1px solid #dadada;
}
.keyword{
    color: #e10000;
    font-family: Arial, sans-serif;
    font-weight: bold;
}
.result-count{
    color: #e10000;
    font-size: 75%;
}
.result-count:before{
    content: "(";
}
.result-count:after{
    content: ")";
}
.search-result-desc{
    font-size: 94%;
    padding-top: 54px;
}
.search-result-desc p{
    font-size: inherit;
}
.search-result-sect{
    border-bottom: 1px solid #dadada;
}
.search-result-sect:first-of-type{
}
.search-result-sect:last-of-type{
    border-bottom: none;
}
.shortCut-search-bar{
    background-color: #e2e2e2;
    background-image: url(../images/iconSprite-search.png);
    background-position: left 0px;
    background-repeat: no-repeat;
    color: #999;
    font-size: 88%;
    height: 44px;
    left: 0px;
    padding-left: 44px;
    position: fixed;
    text-align: left;
    top: 44px;
    width: 100%;
    z-index: 20;
}
#search-wrap .button-wrap{
    display: none;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    z-index: 1;

    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}
.submit-search{
    background-color: #e10000;
    color: #fff;
    height: 44px;
    overflow: hidden;
    padding: 0px 15px;
    text-align: left;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.submit-search:before{
    color: #fff;
    content: "Search for \0022";
}
.submit-search:after{
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    content: "\0022";
    padding-right: 44px;
}







/* ===== form elements ==================== */
select{
    background-color: transparent;
    border: none;
    color: #464646;
    font-size: 75%;
    height: 44px;
    margin-right: -30px;
    padding-right: 30px;
    text-transform: uppercase;

    -moz-appearance: none;
    -webkit-appearance: none;
}
.error select{
    color: #ff0000;
}
.valid select{
    color: #fff;
}
.field-wrap{
    margin-bottom: 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.captcha .captcha-img{
    border: 5px solid #e7e7e7;
    border-bottom-width: 10px;
    background-color: #fff;
    margin-bottom: -3px;
    width: 100%;

    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.captcha-img .holder{	
    display: inline-block;
    height: 46px;
    margin: 2px;
    overflow: hidden;
    vertical-align: top;
    width: 196px;
}
.captcha-img .holder img{
    margin-left: -2px;
    margin-top: -2px;
}
.ref-captcha{
    background-image: url(../images/iconSprite-refresh.png);
    float: right;
    margin-bottom: 3px;
    margin-top: 3px;
    position: relative;
}
.ref-captcha:before{
    border-left: 1px solid #dadada;
    content: "";
    display: block;
    height: 24px;
    left: -4px;
    position: absolute;
    top: 10px;
}
.IE .ref-captcha:before{
    left: 0px;
}
.ref-captcha.loading{
    background-image: url(../images/ripple.gif);
}
.valid.captcha .captcha-img{
    border-color: #9ed266;
}
.captcha .error-msg{
    clear: both;
}
.input-wrap{
    background-color:#e7e7e7;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
label.input-wrap{
    background-color: transparent;
    display: block;
}
.button-wrap{
    font-size: initial;
    margin-top: 30px;
}
button,
input[type="button"],
input[type="submit"]{
    background-color: transparent;
    color: #999;
    border: none;
    cursor: pointer;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
button.standardBtn,
input[type="button"].standardBtn,
input[type="submit"].standardBtn,
a.standardBtn{
    background-color: #e10000;
    color: #fff;
    display: inline-block;
    line-height: 44px;
    min-width: 100px;
    padding: 0px 20px;
    text-align: center;
    text-decoration: none;

    -webkit-appearance: none; /* remove default style on iPhone/iPad button */

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button.standardBtn.cancel,
input[type="button"].standardBtn.cancel,
input[type="submit"].standardBtn.cancel,
a.standardBtn.cancel{
    background-color: #464646;
}
button:disabled.standardBtn,
input[type="button"]:disabled.standardBtn,
input[type="submit"]:disabled.standardBtn,
a.standardBtn.disabled,
button:disabled.standardBtn.cancel,
input[type="button"]:disabled.standardBtn.cancel,
input[type="submit"]:disabled.standardBtn.cancel,
a.standardBtn.disabled.cancel{
    background-color: #ccc;
    cursor: default;
}
.standardBtn ~ .standardBtn{
	margin-left: 10px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
.textfield{
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border:none;
    color:#333;
    font-size: 88%;
    height:44px;
    padding:0px 10px 0px 44px;
    width:100%;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-modify: read-write-plaintext-only;
}
/* Change the white to any color ;) 
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    -webkit-transition-delay: 9999s;
}*/
textarea{
    background-color: transparent;
    border:none;
    color:#333;
    display: block;
    font-size: 88%;
    min-height: 88px;
    padding: 6px 10px;
    resize: vertical;
    width:100%;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"].iconless,
input[type="email"].iconless,
input[type="password"].iconless,
input[type="search"].iconless,
.textfield.iconless{
    padding-left: 10px;
}
.error input[type="text"],
.error input[type="email"],
.error input[type="password"],
.error input[type="search"],
.error .textfield,
.error textarea{
    background-position: left -44px;
    color: #ff0000;
}
.valid input[type="text"],
.valid input[type="email"],
.valid input[type="password"],
.valid input[type="search"],
.valid .textfield{
    background-color: transparent;
    background-position: left -88px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.valid textarea{
    color: #fff;
    resize: none;
}
.valid .input-wrap{
    background-color: #9ed266;
    background-image: url(../images/icon-tick-white.png);
    background-position: right top;
    background-repeat: no-repeat;
    padding-right: 44px;
}
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
textarea:disabled{
    background-color: transparent;
    background-position: left -132px;
    color: #ccc;
}
.disabled .input-wrap,
.disabled .textfield{
    background-color: transparent;
    background-image: url(../images/field-disabled-bg.png);
}
.field-wrap.validating{
    background-image: url(../images/ripple.gif);
    background-position: right top;
    background-repeat: no-repeat;
    padding-right: 54px;
}
/*
.validating .input-wrap,
.validating .textfield{
        background-image: url(../images/ripple.gif);
        background-position: right top;
        background-repeat: no-repeat;
}*/

/* placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{ /* WebKit browsers */
    color: #999;
}
.error input::-webkit-input-placeholder,
.error textarea::-webkit-input-placeholder{ /* WebKit browsers */
    color: #ff0000;
}
.disabled input::-webkit-input-placeholder,
.disabled textarea::-webkit-input-placeholder{ /* WebKit browsers */
    color: #ccc;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color:#999;
    -moz-opacity: 1;
    opacity: 1;
}
.error input:-moz-placeholder,
.error textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color:#ff0000;
    -moz-opacity: 1;
    opacity: 1;
}
.disabled input:-moz-placeholder,
.disabled textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color:#ccc;
    -moz-opacity: 1;
    opacity: 1;
}
input::-moz-placeholder,
textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color:#999;
    -moz-opacity: 1;
    opacity: 1;
}
.error input::-moz-placeholder,
.error textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color:#ff0000;
    -moz-opacity: 1;
    opacity: 1;
}
.disabled input::-moz-placeholder,
.disabled textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color:#ccc;
    -moz-opacity: 1;
    opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{ /* Internet Explorer 10+ */
    color:#999;
}
.error input:-ms-input-placeholder,
.error textarea:-ms-input-placeholder{ 
    color:#ff0000;
}
.disabled input:-ms-input-placeholder,
.disabled textarea:-ms-input-placeholder{ 
    color:#ccc;
}


/* field icon */
input.smartPhone{
    background-image: url(../images/iconSprite-smartPhone.png);
}
input.letter{
    background-image: url(../images/iconSprite-letter.png);
}
input.lock{
    background-image: url(../images/iconSprite-lock.png);
}
input.phone{
    background-image: url(../images/iconSprite-phone.png);
}
input.shield{
    background-image: url(../images/iconSprite-shield.png);
}
input.user{
    background-image: url(../images/iconSprite-contact.png);
}
input.identity{
    background-image: url(../images/iconSprite-id.png);
}
input.fb{
    background-image: url(../images/iconSprite-fb.png);
}
input.twi{
    background-image: url(../images/iconSprite-twi.png);
}
input.insta{
    background-image: url(../images/iconSprite-insta.png);
}
input.calendar{
    background-image: url(../images/iconSprite-calendar.png);
}
input.anti-bot{
    background-image: url(../images/iconSprite-anti-bot.png);
}

input.music1{
	background-image: url(../images/iconSprite-music1.png);
}
input.artist{
	background-image: url(../images/iconSprite-mic.png);
}




/* ===== tabs style ==================== */
.tabs-wrap{
    padding-bottom: 15px;
}
.etabs{
    background-image: url(../images/tab-bg.png);
    background-position: left top;
    background-repeat: repeat-x;
    font-size: 0px;
    height: 45px;
    list-style: none;
    margin: 0px -15px;
    overflow-x: auto;
    position: relative;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.no-multiplebgs .etabs{
    background-image: url(../images/tab-bg.png);
    background-position: left top;
    background-repeat: repeat-x;
}
/*.multiplebgs .etabs.left{
    background-image: url(../images/tab-bg.png), url(../images/tabs-shadow-left.png);
    background-position: left top;
    background-repeat: repeat-x, no-repeat;
}*/
/*.multiplebgs .etabs.right{
    background-image: url(../images/tab-bg.png), url(../images/tabs-shadow-right.png);
    background-position: left top, right top;
    background-repeat: repeat-x, no-repeat;
}*/
/*.multiplebgs .etabs.right.left{
    background-image: url(../images/tab-bg.png), url(../images/tabs-shadow-left.png), url(../images/tabs-shadow-right.png);
    background-position: left top, left top, right top;
    background-repeat: repeat-x, no-repeat, no-repeat;
}

.multiplebgs .etabs{
        background-image: url(../images/tab-bg.png), url(../images/tabs-shadow-left.png), url(../images/tabs-shadow-right.png);
        background-position: left top, left top, right top;
        background-repeat: repeat-x, no-repeat, no-repeat;
}*/
.etabs li{
    color: #e10000;
    display: inline-block;
    font-size: initial;
    margin: 0px 15px;
    vertical-align: top;
    height:44px;
}
.etabs li.active{
    border-bottom: 1px solid #999;
    color: #999;
    margin-bottom: -1px;
}
.etabs a{
    display: block;
    color: inherit;
    line-height: 44px;
    text-decoration: none;
}
.tab-content{
    margin-top: 15px;
    overflow:hidden;
}
.tab-content:after{
    clear: both;
    content: "";
    display: block;
}





/* ===== listing ==================== */
.listing{
    cursor: default;
    display: block;
    height: 54px;
    margin: 0px -15px;
    padding: 5px 15px;
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a.listing{
    text-decoration: none;
}
a.listing.artist{
    cursor: pointer;
}
.listing:hover,
.listing.loading,
.listing.playing,
.listing.opened{
    background-color: #e9e9e9;
}
.listing:after{
    clear: both;
    content: "";
    display: block;
}
.listing .thumb{
    background-color: #e7e7e7;
    float: left;
    height: 44px;
    margin-right: 10px;
    position: relative;
    width: 44px;
}
.listing.artist .thumb{
    background-color: transparent;
}
.listing.albumTrack .thumb{
    background-color: transparent;
    margin-right: 0px;
}
.listing .preview,
.listing .artwork{
    background-position: left top;
    background-repeat: no-repeat;
    height: inherit;
    left: 0px;
    position: absolute;
    top: 0px;
    width: inherit;
}
.listing .preview{
    z-index: 2;
}
.stopped .preview{
    background-image: url(../images/preview-play.png);
}
.loading .preview,
.package-track.loading .preview{
    background-color: #f3f3f3;
    background-image: url(../images/ripple.gif);
}
.playing .preview{
    background-image: url(../images/preview-stop.png);
}
.listing .action,
.listing .swap,
.diy-wrap .action{
    background-position: left -44px;
    background-repeat: no-repeat;
    color: #e10000;
    float: right;
    font-size: 75%;
    height: 44px;
    margin-left: 10px;
    min-width: 44px;
    position: relative;
    text-align: center;
    z-index: 2;
}
.listing .action:disabled,
.diy-wrap .action:disabled{
    background-position: left -132px;
    color: #ccc;
    cursor: default;
}
.listing.packages .action{
    float: none;
}
.action p{
    border: 1px solid #e10000;
    color: inherit;
    height: 20px;
    line-height: 20px;
    padding: 0px 10px;
    text-transform: uppercase;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.action:disabled p{
    border-color: #ccc;
}
.action:hover p{
    background-color: #e10000;
    color: #fff;
}
.action:disabled:hover p{
    background-color: transparent;
    color: #ccc;
}
/* action icon */
.action.ellipsis{
    background-image: url(../images/iconSprite-ellipsis.png);
}
.action.deactivate{
    background-image: url(../images/iconSprite-deactivate.png);
}
.action.swap{
    background-image: url(../images/iconSprite-swap.png);
}
.action.remove{
    background-image: url(../images/iconSprite-remove.png);
}
.action.activate{
    background-image: url(../images/iconSprite-plus.png);
}
.action.set-key{
    background-image: url(../images/iconSprite-bgm-dial.png);
}
.listing .text{
    position: relative;
    text-align: left;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.listing .main,
.box-wrap .main{
    color: #333;
    font-size: 94%;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listing .sub,
.box-wrap .sub{
    font-size: 75%;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.load-more,
.see-more{
    background-image: none;
    clear: both;
    color: #e10000;
    display: block;
    height: 44px;
    line-height: 44px;
    margin: 5px 0px;
    text-decoration: none;
    text-transform: capitalize;
}
.load-more:after,
.see-more:after{
    clear: both;
    content: "";
    display: block;
}
.load-more:hover p,
.see-more:hover p{
    text-decoration: underline;
}
.more-plus{
    background-color: #e10000;
    background-image: url(../images/more-plus-horiz.png);
    background-position: left top;
    background-repeat: no-repeat;
    display: inline-block;
    height: 18px;
    margin-right: 5px;
    margin-top: 13px;
    vertical-align: top;
    width: 18px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.load-more p,
.see-more p{
    color: inherit;
    display: inline-block;
    font-size: 75%;
    line-height: inherit;
    vertical-align: top;
}
.box-wrap{
    font-size: 0px;
    margin: 0px -15px;
    padding: 0px 10px;
    overflow-y: auto;
    white-space: nowrap;
}
.listing-box{
    display: inline-block;
    margin: 0px 5px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    width: 128px;
}
.artist .artwork{
    overflow: hidden;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}
.listing-box .text{
    font-size: initial;
}
.listing-box .main{
    line-height: 30px;
}
.listing.packages{
    background-image: none;	
    height: auto;
    margin-bottom: 5px;
}
.listing .title{
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.listing.packages .thumb{
    background-color: #e7e7e7;
}
.listing .name{
    color: #4d4d4d;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 44px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listing .content{
    display: none;
    margin-top: 5px;
}
.listing.opened .content{
    display: block;
}
.listing .package-track{
    height: 54px;
    padding: 5px 0px;
    position: relative;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.package-track .preview{
    float: left;
    height: 44px;
    margin-right: 10px;
    position: static;
    width: 44px;
}
.listing.packages .text{
    padding-left: 54px;
    position: absolute;
    width: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.diy-box{
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 15px;
    position: relative;
    text-decoration: none;
    width: 128px;	
}
.diy-box:hover .diy-thumb,
.diy-box:hover .box-swap{
    top: -3px;

    /*
    -ms-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
    */
}
.diy-thumb{
    position: relative;
    top: 0px;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.diy-thumb .thumb{
    position: relative;
    width: 100%;
    z-index: 2;
}
.thumb-vfx{
    bottom: -14px;
    left: -4px;
    position: absolute;
    right: -4px;
    top: -4px;
}
.diy-text{
    font-size: initial;
    margin-top: 10px;
    text-align: center;
}
.ala-cart.manage,
.ala-cart.purchases,
.bgm.purchases{
    background-image: none;
    padding-bottom: 10px;
    padding-top: 10px;
    height: auto;
}
.ala-cart.manage .text,
#assign-crt .text,
.listing.purchases .text{
    top: 0px;

    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.listing.manage .next-renewal,
.diy-text .next-renewal{
    color: #e10000;
}
.listing.manage .next-renewal:before,
.diy-text .next-renewal:before{
    color: #999;
    content: "Next renewal: ";
}
.purchases-price{
    color: #e10000;
    float: right;
    font-size: 94%;
    line-height: 20px;
    margin-left: 10px;
}
.purchases-price:before{
    content: "RM ";
}
.purchases-date,
.purchases-time{
    color: #e10000;
    font-size: 75%;
}
.purchases-date:before{
    color: #999;
    content: "Purchase date: ";
}
.purchases-time:before{
    color: #999;
    content: "Purchase time: ";
}
.purchases-gift{
    background-color: #e10000;
    background-image: url(../images/purchases-gift-indicator.png);
    background-repeat: no-repeat;
    background-position: left top;
    color: #fff;
    display: inline-block;
    font-size: 75%;
    height: 26px;
    line-height: 30px;
    overflow: hidden;
    padding-left: 28px;
    padding-right: 10px;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}
.listing.packages.purchases{
    background-color: transparent;
}
.listing.packages.purchases{
}
.listing.purchases .name{
    line-height: normal;
}
.packages .purchases-date,
.packages .purchases-time,
.bgm .purchases-date,
.bgm .purchases-time{
    margin-left: 54px;
}
.packages .purchases-price{
    line-height: 44px;
}
.diy-wrap.purchases{
    background-image: none;
}
.diy-wrap.purchases .diy-thumb{
    height: 96px;
    width: 96px;
}
.purchases .thumb-vfx{
    bottom: -10.5px;
    left: -3px;
    right: -3px;
    top: -3px;
}
.diy-wrap .purchases-price{
    font-size: 94%;
    margin-left: 0px;
    margin-top: 5px;
}
.diy-wrap .purchases-date,
.diy-wrap .purchases-time,
.diy-wrap .purchases-price{
    float: none;
    margin-left: 106px;
}
.listing.bgm{
    background-image: none;
}
.listing.bgm .thumb{
    background-image: url(../images/iconSprite-bgm.png);
    background-position: left 0px;
    background-repeat: no-repeat;
}
.bgm.manage .label{
    color: #e6e6e6;
    font-size: 75%;
    line-height: 12px;
}
.bgm.manage.keyed .label{
    color: #f08080;
}
.listing.bgm.manage .thumb{
    background-color: #ccc;
    background-image: none;
    color: #fff;
    padding: 5px;
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bgm.manage.keyed .thumb{
    background-color: #e10000;
}
.bgm.manage .selected-key{
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 94%;
}
.listing.albumTrack{
    padding-left: 5px;
}
.listing.albumTrack .artwork,
.listing.albumTrack .sub{
    display: none;
}
.albumTrack.stopped .preview{
    background-image: url(../images/albumTrack-preview-play.png);
}
.albumTrack.playing .preview{
    background-image: url(../images/albumTrack-preview-stop.png);
}
.listing.albumTrack .text{
    line-height: 44px;
    position: static;
    top: 0px;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
.listing.albumTrack .main{
    line-height: inherit;
}






/* ===== sign in page ==================== */
.standardBtn .countDown{
    background-color: #fff;
    color: #e10000;
    display: inline-block;
    font-size: 75%;
    height: 20px;
    line-height: 24px;
    margin-left: 5px;
    padding: 0px 7px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
label span{
    font-size: 75%;
}
/* by default, this form is hidden, untill PIN is send to user with sms */
#form-sign-in{
    display: none;
}





/* ===== Here you go... page ==================== */
#trending{
    background-color: #e7e7e7;
    padding-bottom: 20px;
}
.video-group{
    margin: 0px -15px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.video-container{
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: top;
    width: calc(85% - 10px);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.no-csscalc .video-container{
    width: 85%;
}
.video-container:first-child{
    margin-left: 15px;
}
.video-container:last-child{
    margin-right: 15px;
}
.video-wrap {
    background: #000;
    height: 0;
    overflow: hidden;
    padding-bottom: 56%;
    padding-top: 0;
    position: relative;
    width: 100%;
}
.video-wrap .play {
    background: #000;
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -21px;
    position: absolute;
    top: 50%;
    width: 42px;
    z-index: 1;
    -moz-opacity: .7;
    -khtml-opacity: .7;
    opacity: .7;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}
.video-wrap .play:before {
    border-bottom: 5.75px solid transparent;
    border-left: 10px solid #fff;
    border-top: 5.75px solid transparent;
    content: "";
    display: block;
    height: 0;
    margin: 9px 15px 9px 17px;
    width: 0;
}
.video-wrap img {
    left: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.video-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container .views{
	color: #333;
	font-size: 88%;
	padding: 0 5px;
}
.video-container .views:before{
	color: #bb0000;
	content: "Views: ";
	display: inline;
}
.quick-buy-wrap.listing{
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
}
.quick-buy-wrap .thumb{
    display: none;
}
#dialog .thumb{
    display: block;
}
#dialog .quick-buy-wrap{
    padding-left: 0px;
    padding-right: 0px;
}
#form-recommended-pick .etabs{
    display: none;
}
.cate-wrap{
    font-size: 0px;
    margin-top: 30px;
    text-align: center;
}
.cate-wrap .button-wrap{
    margin-top: 50px;
}
.cate-btn{
    cursor: pointer;
    display: inline-block;
    height: 44px;
    line-height: 44px;
    margin: 5px;
    position: relative;
    vertical-align: top;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.cate-btn input{
    left: 0px;
    position: absolute;
    top: 0px;
    visibility: hidden;
}
.cate-btn .style{
    background-color: #999;
    color: #fff;
    font-size: initial;
    line-height: inherit;
    padding: 0px 18px;
    text-transform: uppercase;
    /*    width: 100%;*/

    -webkit-border-radius: 44px;
    -moz-border-radius: 44px;
    border-radius: 44px;
}
.cate-btn input:checked + .style{
    background-color: #e10000;
}
.cate-btn.disabled{
    cursor: default;
}
.cate-btn.disabled .style{
    background-color: #ccc;
}
/* checked color for each genre cate, color number start with 00 */
#cate-genre .color-00 input:checked + .style{
    background: #ff1493; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(90deg, #ff1493, #e51284); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(90deg, #ff1493, #e51284); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(90deg, #ff1493, #e51284); /* For Firefox 3.6 to 15 */
    background: linear-gradient(90deg, #ff1493, #e51284); /* Standard syntax */
}
#cate-genre .color-01 input:checked + .style{
    background: #00bfff;
    background: -webkit-linear-gradient(90deg, #00bfff, #00ace5);
    background: -o-linear-gradient(90deg, #00bfff, #00ace5);
    background: -moz-linear-gradient(90deg, #00bfff, #00ace5); 
    background: linear-gradient(90deg, #00bfff, #00ace5);
}
#cate-genre .color-02 input:checked + .style{
    background: #dda0dd;
    background: -webkit-linear-gradient(90deg, #dda0dd, #c690c6);
    background: -o-linear-gradient(90deg, #dda0dd, #c690c6);
    background: -moz-linear-gradient(90deg, #dda0dd, #c690c6);
    background: linear-gradient(90deg, #dda0dd, #c690c6);
}
#cate-genre .color-03 input:checked + .style{
    background: #90ee90;
    background: -webkit-linear-gradient(90deg, #90ee90, #81d681);
    background: -o-linear-gradient(90deg, #90ee90, #81d681);
    background: -moz-linear-gradient(90deg, #90ee90, #81d681);
    background: linear-gradient(90deg, #90ee90, #81d681);
}
#cate-genre .color-04 input:checked + .style{
    background: #f5deb3;
    background: -webkit-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background: -o-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background: -moz-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background: linear-gradient(90deg, #f5deb3, #dcc7a1);
}
#cate-genre .color-05 input:checked + .style{
    background: #fa8072;
    background: -webkit-linear-gradient(90deg, #fa8072, #e17366);
    background: -o-linear-gradient(90deg, #fa8072, #e17366);
    background: -moz-linear-gradient(90deg, #fa8072, #e17366);
    background: linear-gradient(90deg, #fa8072, #e17366);
}
#cate-genre .color-06 input:checked + .style{
    background: #9370db;
    background: -webkit-linear-gradient(90deg, #9370db, #8465c5);
    background: -o-linear-gradient(90deg, #9370db, #8465c5);
    background: -moz-linear-gradient(90deg, #9370db, #8465c5);
    background: linear-gradient(90deg, #9370db, #8465c5);
}
#cate-genre .color-07 input:checked + .style{
    background: #ff69b4;
    background: -webkit-linear-gradient(90deg, #ff69b4, #e55ea2);
    background: -o-linear-gradient(90deg, #ff69b4, #e55ea2);
    background: -moz-linear-gradient(90deg, #ff69b4, #e55ea2);
    background: linear-gradient(90deg, #ff69b4, #e55ea2);
}
#cate-genre .color-08 input:checked + .style{
    background: #4169e1;
    background: -webkit-linear-gradient(90deg, #4169e1, #3a5eca);
    background: -o-linear-gradient(90deg, #4169e1, #3a5eca);
    background: -moz-linear-gradient(90deg, #4169e1, #3a5eca);
    background: linear-gradient(90deg, #4169e1, #3a5eca);
}
#cate-genre .color-09 input:checked + .style{
    background: #9acd32;
    background: -webkit-linear-gradient(90deg, #9acd32, #8ab82d);
    background: -o-linear-gradient(90deg, #9acd32, #8ab82d);
    background: -moz-linear-gradient(90deg, #9acd32, #8ab82d);
    background: linear-gradient(90deg, #9acd32, #8ab82d);
}





/* ===== browse page ==================== */
#banner{
    background-color: #ececec;
}
#banner .slide{
    display: block;
}
.owl-nav{
    display: none;
}
.owl-dots{
    bottom: 0px;
    height: 20px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.owl-dot{
    background-color: #fff;
    display: inline-block;
    height: 4px;
    line-height: 20px;
    margin: 2px;
    vertical-align: top;
    width: 4px;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.owl-dot.active{
    width: 12px;
}
#most-wanted{
    border-top: 1px solid #eee;
    background: #f8f8f8;
    /*padding: 20px;*/
}
#featured-artists,
#new-albums{
    border-top: 1px solid #dadada;
    padding-bottom: 20px;
}
#new-albums{
    background: #f8f8f8;
}
#featured-artists .centerContent:after,
#new-albums .centerContent:after{
    clear: both;
    content: "";
    display: block;
}
.genre-list{
    display: block;
    margin: 0px -15px;
    padding: 5px 15px;
    text-decoration: none;
}
.genre-list:hover{
    background-color: #ebebeb;
}
.genre-list .thumb{
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    height: 50px;
    margin-right: 10px;
    width: 50px;
}
.genre-list p{
    color: #333;
    font-size: 110%;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#genre-dropdown-bar{
    background-color: #ebebeb;
    border-top: 1px solid #dadada;
    position: fixed;
    top: 44px;
    width: 100%;
    z-index: 11;
}
#genre-dropdown-bar:after{
    clear: both;
    content: "";
    display: block;
}
.genreDetail-lang-wrap{
    border-right: 1px solid #dadada;
    display: inline-block;
    float: left;
}
.genreDetail-genre-wrap{
    border-left: 1px solid #f9f9f9;
    display: inline-block;
    height: 44px;
    padding-left: 15px;
}
.genreDetail-genre-wrap.loading{
    background-image: url(../images/ripple.gif);
    background-position: 5px top;
    background-repeat: no-repeat;
}
.genreDetail-genre-wrap.loading:after{
    content: "Loading Genre";
    display: block;
    line-height: 44px;
    padding-left: 44px;
}
.genreDetail-genre-wrap.loading span,
.genreDetail-genre-wrap.loading select{
    display: none;
}
#genre-details-songlist{
    padding-top: 59px;
}

/* genre icons */
.Alternative .thumb{
    background-image: url(../images/genre-Alternative.png);
}
.Children .thumb{
    background-image: url(../images/genre-Children.png);
}
.Classical .thumb{
    background-image: url(../images/genre-Classical.png);
}
.Country .thumb{
    background-image: url(../images/genre-Country.png);
}
.Dance .thumb{
    background-image: url(../images/genre-Dance.png);
}
.Devotional .thumb{
    background-image: url(../images/genre-Devotional.png);
}
.Festive .thumb{
    background-image: url(../images/genre-Festive.png);
}
.FootballAnthems .thumb{
    background-image: url(../images/genre-Football-Anthems.png);
}
.HipHop-Rap .thumb{
    background-image: url(../images/genre-Hip-Hop-Rap.png);
}
.Instrumental .thumb{
    background-image: url(../images/genre-Instrumental.png);
}
.JazzBlues .thumb{
    background-image: url(../images/genre-JazzBlues.png);
}
.Latino .thumb{
    background-image: url(../images/genre-Latino.png);
}
.KMovie .thumb,
.TMovie .thumb,
.INMovie .thumb,
.MovieTV .thumb{
    background-image: url(../images/genre-MovieTV.png);
}
.MyName .thumb{
    background-image: url(../images/genre-MyName.png);
}
.Pop .thumb,
.Canpop .thumb,
.Japanese .thumb,
.Korean .thumb,
.MYPop .thumb,
.Tpop .thumb,
.INPop .thumb,
.Manpop .thumb{
    background-image: url(../images/genre-Pop.png);
}
.RnB-Soul .thumb{
    background-image: url(../images/genre-R&BSoul.png);
}
.MYDangdut .thumb,
.INDangdut .thumb,
.Reggae .thumb{
    background-image: url(../images/genre-Reggae.png);
}
.Rock .thumb,
.INRock .thumb,
.MYRock .thumb{
    background-image: url(../images/genre-Rock.png);
}
.SoundEffect .thumb{
    background-image: url(../images/genre-Sound-Effect.png);
}
.VoiceClip .thumb{
    background-image: url(../images/genre-Voice-Clip.png);
}
.Others .thumb,
.World .thumb{
    background-image: url(../images/genre-World.png);
}
.Mandarin .thumb{
    background-image: url(../images/genre-Mandarin.png);
}
.Cantonese .thumb{
    background-image: url(../images/genre-Cantonese.png);
}
.Manin-Mainder .thumb{
    background-image: url(../images/genre-Manin-Mainder.png);
}
.Bollywood .thumb{
    background-image: url(../images/genre-Bollywood.png);
}
.Kollywood .thumb{
    background-image: url(../images/genre-Kollywood.png);
}
.Islamik .thumb{
    background-image: url(../images/genre-Islamik.png);
}
.Dangdut .thumb{
    background-image: url(../images/genre-dangdut.png);
}
.Tagalog .thumb{
    background-image: url(../images/genre-Tagalog.png);
}
.Bangladesh .thumb{
    background-image: url(../images/genre-Bangladesh.png);
}
.Myanmar .thumb{
    background-image: url(../images/genre-Myanmar.png);
}
.Nepalse .thumb{
    background-image: url(../images/genre-Nepalese.png);
}
.Pakistan .thumb{
    background-image: url(../images/genre-Pakistan.png);
}
.Vietnamese .thumb{
    background-image: url(../images/genre-Vietnamese.png);
}
.Sri-Lanka .thumb{
    background-image: url(../images/genre-Sri-Lanka.png);
}



/* genre colors */
.color-01 .thumb{
    background-color: #ff1493; /* For browsers that do not support gradients */
    background-color: -webkit-linear-gradient(90deg, #ff1493, #e51284); /* For Safari 5.1 to 6.0 */
    background-color: -o-linear-gradient(90deg, #ff1493, #e51284); /* For Opera 11.1 to 12.0 */
    background-color: -moz-linear-gradient(90deg, #ff1493, #e51284); /* For Firefox 3.6 to 15 */
    background-color: linear-gradient(90deg, #ff1493, #e51284); /* Standard syntax */
}
.color-02 .thumb{
    background-color: #00bfff;
    background-color: -webkit-linear-gradient(90deg, #00bfff, #00ace5);
    background-color: -o-linear-gradient(90deg, #00bfff, #00ace5);
    background-color: -moz-linear-gradient(90deg, #00bfff, #00ace5); 
    background-color: linear-gradient(90deg, #00bfff, #00ace5);
}
.color-03 .thumb{
    background-color: #dda0dd;
    background-color: -webkit-linear-gradient(90deg, #dda0dd, #c690c6);
    background-color: -o-linear-gradient(90deg, #dda0dd, #c690c6);
    background-color: -moz-linear-gradient(90deg, #dda0dd, #c690c6);
    background-color: linear-gradient(90deg, #dda0dd, #c690c6);
}
.color-04 .thumb{
    background-color: #90ee90;
    background-color: -webkit-linear-gradient(90deg, #90ee90, #81d681);
    background-color: -o-linear-gradient(90deg, #90ee90, #81d681);
    background-color: -moz-linear-gradient(90deg, #90ee90, #81d681);
    background-color: linear-gradient(90deg, #90ee90, #81d681);
}
.color-05 .thumb{
    background-color: #f5deb3;
    background-color: -webkit-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background-color: -o-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background-color: -moz-linear-gradient(90deg, #f5deb3, #dcc7a1);
    background-color: linear-gradient(90deg, #f5deb3, #dcc7a1);
}
.color-06 .thumb{
    background-color: #fa8072;
    background-color: -webkit-linear-gradient(90deg, #fa8072, #e17366);
    background-color: -o-linear-gradient(90deg, #fa8072, #e17366);
    background-color: -moz-linear-gradient(90deg, #fa8072, #e17366);
    background-color: linear-gradient(90deg, #fa8072, #e17366);
}
.color-07 .thumb{
    background-color: #9370db;
    background-color: -webkit-linear-gradient(90deg, #9370db, #8465c5);
    background-color: -o-linear-gradient(90deg, #9370db, #8465c5);
    background-color: -moz-linear-gradient(90deg, #9370db, #8465c5);
    background-color: linear-gradient(90deg, #9370db, #8465c5);
}
.color-08 .thumb{
    background-color: #ff69b4;
    background-color: -webkit-linear-gradient(90deg, #ff69b4, #e55ea2);
    background-color: -o-linear-gradient(90deg, #ff69b4, #e55ea2);
    background-color: -moz-linear-gradient(90deg, #ff69b4, #e55ea2);
    background-color: linear-gradient(90deg, #ff69b4, #e55ea2);
}
.color-09 .thumb{
    background-color: #4169e1;
    background-color: -webkit-linear-gradient(90deg, #4169e1, #3a5eca);
    background-color: -o-linear-gradient(90deg, #4169e1, #3a5eca);
    background-color: -moz-linear-gradient(90deg, #4169e1, #3a5eca);
    background-color: linear-gradient(90deg, #4169e1, #3a5eca);
}
.color-10 .thumb{
    background-color: #9acd32;
    background-color: -webkit-linear-gradient(90deg, #9acd32, #8ab82d);
    background-color: -o-linear-gradient(90deg, #9acd32, #8ab82d);
    background-color: -moz-linear-gradient(90deg, #9acd32, #8ab82d);
    background-color: linear-gradient(90deg, #9acd32, #8ab82d);
}
.color-11 .thumb{
    background-color: #ffc0cb;
    background-color: -webkit-linear-gradient(90deg, #ffc0cb, #e5acb6);
    background-color: -o-linear-gradient(90deg, #ffc0cb, #e5acb6);
    background-color: -moz-linear-gradient(90deg, #ffc0cb, #e5acb6);
    background-color: linear-gradient(90deg, #ffc0cb, #e5acb6);
}
.color-12 .thumb{
    background-color: #ff6347;
    background-color: -webkit-linear-gradient(90deg, #ff6347, #e55940);
    background-color: -o-linear-gradient(90deg, #ff6347, #e55940);
    background-color: -moz-linear-gradient(90deg, #ff6347, #e55940);
    background-color: linear-gradient(90deg, #ff6347, #e55940);
}
.color-13 .thumb{
    background-color: #c0c0c0;
    background-color: -webkit-linear-gradient(90deg, #c0c0c0, #acacac);
    background-color: -o-linear-gradient(90deg, #c0c0c0, #acacac);
    background-color: -moz-linear-gradient(90deg, #c0c0c0, #acacac);
    background-color: linear-gradient(90deg, #c0c0c0, #acacac);
}
.color-14 .thumb{
    background-color: #ff1493;
    background-color: -webkit-linear-gradient(90deg, #ff1493, #e51284);
    background-color: -o-linear-gradient(90deg, #ff1493, #e51284);
    background-color: -moz-linear-gradient(90deg, #ff1493, #e51284);
    background-color: linear-gradient(90deg, #ff1493, #e51284);
}
.color-15 .thumb{
    background-color: #87ceeb;
    background-color: -webkit-linear-gradient(90deg, #87ceeb, #79b9d3);
    background-color: -o-linear-gradient(90deg, #87ceeb, #79b9d3);
    background-color: -moz-linear-gradient(90deg, #87ceeb, #79b9d3);
    background-color: linear-gradient(90deg, #87ceeb, #79b9d3);
}
.color-16 .thumb{
    background-color: #1e90ff;
    background-color: -webkit-linear-gradient(90deg, #1e90ff, #1b81e5);
    background-color: -o-linear-gradient(90deg, #1e90ff, #1b81e5);
    background-color: -moz-linear-gradient(90deg, #1e90ff, #1b81e5);
    background-color: linear-gradient(90deg, #1e90ff, #1b81e5);
}
.color-17 .thumb{
    background-color: #bdb76b;
    background-color: -webkit-linear-gradient(90deg, #bdb76b, #aaa460);
    background-color: -o-linear-gradient(90deg, #bdb76b, #aaa460);
    background-color: -moz-linear-gradient(90deg, #bdb76b, #aaa460);
    background-color: linear-gradient(90deg, #bdb76b, #aaa460);
}
.color-18 .thumb{
    background-color: #6a5acd;
    background-color: -webkit-linear-gradient(90deg, #6a5acd, #5f51b8);
    background-color: -o-linear-gradient(90deg, #6a5acd, #5f51b8);
    background-color: -moz-linear-gradient(90deg, #6a5acd, #5f51b8);
    background-color: linear-gradient(90deg, #6a5acd, #5f51b8);
}
.color-19 .thumb{
    background-color: #9932cc;
    background-color: -webkit-linear-gradient(90deg, #9932cc, #892db7);
    background-color: -o-linear-gradient(90deg, #9932cc, #892db7);
    background-color: -moz-linear-gradient(90deg, #9932cc, #892db7);
    background-color: linear-gradient(90deg, #9932cc, #892db7);
}
.color-20 .thumb{
    background-color: #8fbc8f;
    background-color: -webkit-linear-gradient(90deg, #8fbc8f, #80a980);
    background-color: -o-linear-gradient(90deg, #8fbc8f, #80a980);
    background-color: -moz-linear-gradient(90deg, #8fbc8f, #80a980);
    background-color: linear-gradient(90deg, #8fbc8f, #80a980);
}
.color-21 .thumb{
    background-color: #556b2f;
    background-color: -webkit-linear-gradient(90deg, #556b2f, #556b2f);
    background-color: -o-linear-gradient(90deg, #556b2f #556b2f);
    background-color: -moz-linear-gradient(90deg, #556b2f, #556b2f);
    background-color: linear-gradient(90deg, #556b2f, #556b2f);
}
.color-22 .thumb{
    background-color: #da70d6;
    background-color: -webkit-linear-gradient(90deg, #da70d6, #c465c0);
    background-color: -o-linear-gradient(90deg, #da70d6, #c465c0);
    background-color: -moz-linear-gradient(90deg, #da70d6, #c465c0);
    background-color: linear-gradient(90deg, #da70d6, #c465c0);
}
.color-23 .thumb{
    background-color: #00ffff;
    background-color: -webkit-linear-gradient(90deg, #00ffff, #00e5e5);
    background-color: -o-linear-gradient(90deg, #00ffff, #00e5e5);
    background-color: -moz-linear-gradient(90deg, #00ffff, #00e5e5);
    background-color: linear-gradient(90deg, #00ffff, #00e5e5);
}
.color-24 .thumb{
    background-color: #b0c4de;
    background-color: -webkit-linear-gradient(90deg, #b0c4de, #9eb0c7);
    background-color: -o-linear-gradient(90deg, #b0c4de, #9eb0c7);
    background-color: -moz-linear-gradient(90deg, #b0c4de, #9eb0c7);
    background-color: linear-gradient(90deg, #b0c4de, #9eb0c7);
}
.color-25 .thumb{
    background-color: #deb887;
    background-color: -webkit-linear-gradient(90deg, #deb887, #c7a579);
    background-color: -o-linear-gradient(90deg, #deb887, #c7a579);
    background-color: -moz-linear-gradient(90deg, #deb887, #c7a579);
    background-color: linear-gradient(90deg, #deb887, #c7a579);
}
.color-26 .thumb{
    background-color: #40e0d0;
    background-color: -webkit-linear-gradient(90deg, #40e0d0, #39c9bb);
    background-color: -o-linear-gradient(90deg, #40e0d0, #39c9bb);
    background-color: -moz-linear-gradient(90deg, #40e0d0, #39c9bb);
    background-color: linear-gradient(90deg, #40e0d0, #39c9bb);
}
.color-27 .thumb{
    background-color: #800000;
    background-color: -webkit-linear-gradient(90deg, #800000, #730000);
    background-color: -o-linear-gradient(90deg, #800000, #730000);
    background-color: -moz-linear-gradient(90deg, #800000, #730000);
    background-color: linear-gradient(90deg, #800000, #730000);
}
.color-28 .thumb{
    background-color: #228b22;
    background-color: -webkit-linear-gradient(90deg, #228b22, #1f7d1f);
    background-color: -o-linear-gradient(90deg, #228b22, #1f7d1f);
    background-color: -moz-linear-gradient(90deg, #228b22, #1f7d1f);
    background-color: linear-gradient(90deg, #228b22, #1f7d1f);
}
.color-29 .thumb{
    background-color: #daa520;
    background-color: -webkit-linear-gradient(90deg, #daa520, #c4941d);
    background-color: -o-linear-gradient(90deg, #daa520, #c4941d);
    background-color: -moz-linear-gradient(90deg, #daa520, #c4941d);
    background-color: linear-gradient(90deg, #daa520, #c4941d);
}
.color-30 .thumb{
    background-color: #7fff00;
    background-color: -webkit-linear-gradient(90deg, #7fff00, #72e500);
    background-color: -o-linear-gradient(90deg, #7fff00, #72e500);
    background-color: -moz-linear-gradient(90deg, #7fff00, #72e500);
    background-color: linear-gradient(90deg, #7fff00, #72e500);
}

/* for color then shoud use white icon */
.color-09 .thumb,
.color-18 .thumb,
.color-19 .thumb,
.color-21 .thumb,
.color-27 .thumb,
.color-28 .thumb{
    background-position: left bottom;  /* use this to display white icon, if the color is too dark */
}





/* ===== CRT ala carte ==================== */
/* manage */
.manage-button.group{
    background-image: url(../images/iconSprite-group.png);
}
.manage-button.group:before{
    content: "Set By Group";
}
.manage-button.assign-contact{
    background-image: url(../images/iconSprite-assign-contact.png);
}
.manage-button.assign-contact:before{
    content: "Assign Contact";
}
.manage-button.set-time{
    background-image: url(../images/iconSprite-set-time.png);
}
.manage-button.set-time:before{
    content: "Set Time";
}
.manage-button.remove{
    background-image: url(../images/iconSprite-remove.png);
}
.manage-button.remove:before{
    content: "Remove";
}
.manage-button,
.status-label{
    background-position: left -44px;
    background-repeat: no-repeat;
    display: block;
    height: 44px;
    width: 44px;
}
.manage-button:hover{
    text-decoration: underline;
}
.manage-button:before{
    color: #e10000;
    display: none;
    font-size: 75%;
    line-height: 44px;
    padding-left: 44px;
    text-decoration: inherit;
}
.manage-button:disabled{
    background-position: left -132px;
}
.manage-button:disabled:before{
    color: #ccc;
    text-decoration: none;
}

/* style: bar expandable bar 
.manage-wrap{
        background-color: #f7f7f7;
        bottom: -44px;
        clear: both;
        display: none;
        height: 44px;
        left: 0px;
        margin-top: 5px;
        padding: 0px 5px;
        position: absolute;
        width: 100%;
        
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
.listing.manage-opened{
        background-color: #fff;
        margin: 0px -5px 44px -5px;
        padding: 5px;
        z-index: 10;
        
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
.manage-opened .manage-wrap{
        display: block;
}
.status-label{
        cursor: pointer;
        display: block;
        float: left;
        height: 44px;
        min-width: 55px;
        padding: 0px 5px;
        vertical-align: top;
}
.status-label input{
        display: inline-block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        vertical-align: top;
}
.status-label .status{
        display: inline-block;
        vertical-align: top;
}
.status-label .status:before{
        font-family: Arial, sans-serif;
        font-size: 92%;
        font-weight: bold;
        line-height: 44px;
        padding-left: 5px;
        vertical-align: top;
}
.status:before{
        color: #999;
        content: "OFF";
}
.status-label input:checked + .status:before{
        content: "ON";
        color: #61c200;
}
.manage-button{
        float: right;
}
.manage-button.close{
        display: none;
}*/


/* style: expandable circle */
.manage-section{
    overflow: hidden;
    padding-bottom: 60px;
}
.manage-opened{
    background-color: #e9e9e9;
}
.manage-wrap{
    background-color: #fff;
    height: 140px;
    margin-top: -70px;
    position: absolute;
    right: -33px;
    top: 50%;
    width: 140px;
    z-index: 10;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;

    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);

    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.manage-opened .manage-wrap{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;

    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
}
.manage-button,
.status-label{
    position: absolute;
}
.manage-button.close{
    left: 50%;
    margin-left: -22px;
    margin-top: -22px;
    padding: 15px 12px;
    top: 50%;
}
.manage-button.close .bar{
    background-color: #e10000;
    height: 2px;
    width: 20px;
}
.manage-button.close .one{
    margin-bottom: -2px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.manage-button.close .two{
    margin-top: -2px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.status-label{
    cursor: pointer;
    left: 63px;
    top: 0px;
}
.status-label input{
    position: absolute;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.status-label .status{
    background-image: url(../images/iconSprite-on_off.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    height: inherit;
    width: inherit;
}
.status-label input:checked + .status{
    background-position: left top;
}
.manage-button.group{
    left: 19px;
    top: 4px;
}
.manage-button.assign-contact{
    left: 0px;
    margin-top: -22px;
    top: 50%;
}
.manage-button.set-time{
    bottom: 4px;
    left: 19px;
}
.manage-button.remove{
    bottom: 0px;
    left: 63px;
}
.contact,
.time{
    height: 44px;
    position: relative;
    width: 100%;
}
.contact .user{
    background-image: url(../images/iconSprite-contact.png);
    background-position: left -176px;
    float: left;
}
.time .clock{
    background-image: url(../images/iconSprite-set-time.png);
    background-position: left -176px;
    float: left;
}
.contact .plus,
.time .plus{
    background-image: url(../images/iconSprite-plus.png);
    background-position: left -44px;
    float: left;
}
.contact .edit,
.contact .remove,
.time .remove{
    background-position: left -44px;
    float: right;
}
.contact .edit{
    background-image: url(../images/iconSprite-edit.png);
}
.contact .remove,
.time .remove{
    background-image: url(../images/iconSprite-remove.png);
}
.contact p,
.time p{
    font-size: 88%;
    line-height: 44px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.time .week,
.time .hour{
    display: inline-block;
    margin-right: 10px;
}
.contact .number{
    color: #999;
    display: none;
}
.time .hour{
    color: #999;
}
.contact.add p,
.time.add p{
    color: #e10000;
}
.custom-popout .radio-label{
    min-height: 44px;
}
.group-label,
.custom-popout .radio-label{
    display: block;
    position: relative;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.group-label:hover,
.custom-popout .radio-label:hover{
    background-color: #f5f5f5;
}
.group-label input{
    display: block;
    float: left;
    margin: 5px;
}
.custom-popout .radio-label input{
    display: inline-block;
    left: 5px;
    position: absolute;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.group-label .text,
.custom-popout .radio-label .text{
    padding-left: 30px;
    padding-top: 2px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.custom-popout .radio-label .text{
    padding-bottom: 2px;
    box-sizing: border-box;
}
.group-label .text p,
.custom-popout .radio-label .text p{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-label .text .main,
.custom-popout .radio-label .main{
    font-size: 88%;
}
.custom-popout .radio-label .main{
    line-height: 44px;
}
.group-label .text .sub:before{
    content: "Song: ";
}
.group-label input:checked + .text,
.custom-popout .radio-label input:checked + .text{
    background-color: #f0f0f0;
}
#assign-crt:hover,
#assign-crt.playing,
#assign-crt.loading{
    background-color: transparent;
}
#assign-crt{
    background-image: none;
    border-bottom: 1px solid #dadada;
    height: auto;
    margin: 0px;
    padding: 5px 0px 15px 0px;
}
#weekend-FS{
    margin-left: 5px;
}
#dialog .week-wrap{
    border-bottom: 1px solid #dadada;
    padding-bottom: 20px;
}
.renewal-method{
    background-color: #ececec;
    border-top: 1px solid #dadada;
    bottom: 0px;
    padding: 10px 0px;
    position: fixed;
    width: 100%;
    z-index: 10;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: bottom 750ms ease-in-out;
    -moz-transition: bottom 750ms ease-in-out;
    -ms-transition: bottom 750ms ease-in-out;
    -o-transition: bottom 750ms ease-in-out;
    transition: bottom 750ms ease-in-out;
}
.renewal-method .centerContent:after{
    clear: both;
    content: "";
    display: block;
}
.renewal-method .standardBtn{
    display: inline-block;
    float: right;
    vertical-align: top;
}
.renewal-method p{
    display: block;
    font-size: 85%;
    line-height: 16px;
    vertical-align: top;
    width: calc(100% - 110px);	
}
.no-csscalc .renewal-method p{
    margin-right: 110px
}






/* ===== package page ==================== */
.listing.packages.closed.has-playing .name:before{
    background-image: url(../images/loadinfo.net-1.gif);
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    margin-top: 14px;
    width: 16px;
}

/* manage */
.pacakge-manage-wrap{
    border-top: 1px solid #dadada;
    position: relative;
}
.pacakge-manage-wrap:after{
    clear: both;
    content: "";
    display: block;
}
.pacakge-manage-wrap .action.on-off{
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    position: relative;
}
.pacakge-manage-wrap .action.on-off:after{
    border-right: 1px solid #aaa;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    right: 0px;
    top: 14px;
}
.pacakge-manage-wrap .action.remove{
    float: right;
}
.packages .next-renewal{
    line-height: 44px;
}





/* ===== D.I.Y. package page ==================== */
.diy-thumb-wrap{
    font-size: 0px;
    margin-right: -15px;
    text-align: center;
}
#diy-details,
#manage-diy-swap-details{
    background-color: #fff;
    border-top: 1px solid #dadada;
    margin-bottom: 10px;
}
.diy-wrap{
    padding-bottom: 26px;
}
.diy-wrap:after{
    clear: both;
    content: "";
    display: block;
}
.diy-wrap .diy-thumb{
    float: left;
    margin-right: 10px;
    width: 128px;
}
.diy-wrap .diy-text{
    margin-top: 0px;
    padding-top: 10px;
    text-align: left;
}
.diy-text p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diy-wrap .action{
    float: left;
    margin-left: 0px;
    margin-right: 10px;
}
.listing.diy-active{
    background-image: url(../images/indicator-diy-active.png);
    background-position: 91% 5px;
    background-position: right 27px top 5px;
    background-repeat: no-repeat;
    padding-right: 69px;
}
.listing.diy-active .action{
    display: none;
}
#dialog .diy-wrap{
    padding: 0px;
}
#dialog .diy-thumb{
    float: left;
    width: 64px;
}
#dialog .thumb-vfx{
    bottom: -7px;
    left: -2px;
    right: -2px;
    top: -2px;
}
#dialog .diy-text{
    margin-top: 0px;
    padding-top: 5px;
    text-align: left;
}
.subscriber-reminder{
    cursor: pointer;
    margin-left: 138px;
}
.subscriber-reminder .symbol{
    background-color: #e10000;
    color: #fff;
    float: left;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: top;
    width: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.subscriber-reminder .msg{
    font-size: 75%;
    padding-left: 30px;
    line-height: 20px;
    vertical-align: top;
}
.subscriber-reminder-text{
    color: #e10000;
    font-size: 65%;
    line-height: 12px;
    margin-top: 5px;
}

/* manage */
.manage-diy-section{
    padding-top: 44px;
}
#diy-active-panel{
    background-color: #fff;
    border-top: 1px solid #dadada;
    left: 0px;
    min-height: 44px;
    position: fixed;
    top: 44px;
    width: 100%;
    z-index: 90;
}
#diy-active-panel.opened{
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);	
}
.active-wrap{
    padding-bottom: 15px;
}
.active-wrap .desc{
    color: #999;
    line-height: 16px;
    margin-bottom: 5px;
}
.attempt-bar{
    display: block;
    height: 44px;
    text-align: left;
    width: 100%;
}
.attempt-bar:before{
    color: #333;
    content: "Attempt(s) left";
    font-size: 88%;
    line-height: 44px;
}
.attempt-count{
    background-color: #e10000;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 88%;
    font-weight: bold;
    float: right;
    height: 24px;
    line-height: 26px;
    margin-top: 10px;
    margin-right: 10px;
    text-align: center;
    width: 24px;

    -webkit-border-radius: 44px;
    -moz-border-radius: 44px;
    border-radius: 44px;
}
.manage-diy-section .diy-thumb{
    width: 96px;
}
.manage-diy-section .thumb-vfx{
    bottom: -10.5px;
    left: -3px;
    right: -3px;
    top: -3px;
}
.manage-diy-section .action.on-off,
.pacakge-manage-wrap .action.on-off{
    cursor: pointer;
    font-size: 100%;
    position: relative;
    text-align: left;
}
.manage-diy-section .action.on-off input,
.pacakge-manage-wrap .action.on-off input{
    left: 0px;
    position: absolute;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.manage-diy-section .action.on-off .status,
.pacakge-manage-wrap .action.on-off .status{
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 44px;
    padding-left: 20px;
}
.manage-diy-section .action.on-off .status:before,
.pacakge-manage-wrap .action.on-off .status:before{
    color: #ccc;
    content: "OFF";
}
.manage-diy-section .action.on-off input:checked + .status:before,
.pacakge-manage-wrap .action.on-off input:checked + .status:before{
    color: #61c200;
    content: "ON";
}
.manage-diy-section .diy-wrap{
    border-bottom: 1px solid #dadada;
}
.manage-diy-section + section{
    padding-bottom: 10px;
    padding-top: 10px;
}
.activate-full .activate{
    display: none;
}
.box-swap{
    background-color: #666;
    background-image: url(../images/iconSprite-swap.png);
    background-position: left -88px;
    background-repeat: no-repeat;
    height: 44px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 44px;
    z-index: 10;

    -webkit-transition: top 200ms ease-in-out;
    -moz-transition: top 200ms ease-in-out;
    -ms-transition: top 200ms ease-in-out;
    -o-transition: top 200ms ease-in-out;
    transition: top 200ms ease-in-out;
}
.box-swap:disabled{
    background-color: #f0f0f0;
    background-position: left -132px;
}
.diy-wrap.manage{
    background-image: none;
}
.diy-wrap.manage .diy-text{
    margin-bottom: 10px;
    padding-top: 0px;
}
.diy-wrap.manage .diy-text:after{
    clear: both;
    content: "";
    display: block;
}
.diy-wrap.manage .main,
.diy-wrap.manage .sub{
    display: inline-block;
    float: left;
    height: 32px;
    line-height: 34px;
    max-width: 50%;
    overflow: hidden;
    padding: 0px 10px;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.diy-wrap.manage .main{
    background-color: #e10000;
    color: #fff;
    font-size: 120%;
}
.diy-wrap.manage .sub{
    background-color: #ddd;
}
.diy-wrap.manage .next-renewal{
    background-color: transparent;
    clear: both;
    display: block;
    float: none;
    max-width: 100%;
    padding: 0px;
}





/* ===== background music ==================== */
.bgm-cate-wrap:after{
    clear: both;
    content: "";
    display: block;
}
.bgm-cate{
    display: block;
    line-height: 44px;
    margin-bottom: 10px;
    text-decoration: none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bgm-cate:after{
	clear: both;
	content: "";
	display: block;
}
.bgm-cate p{
	line-height: inherit;
}

.bgm-cate:hover p{
    background-color: #eee;
}
.bgm-cate .icon{
    background-color: #e7e7e7;
    background-image: url(../images/iconSprite-bgm-cate.png);
    float: left;
    margin-right: 10px;
}
/* manage */
.dial-pad-wrap{
    text-align: center;
}
.unsubs-bgm{
    padding-bottom: 20px;
}
.dial-pad-wrap .desc{
    text-align: left;
}
#form-manage-bgm-setKey .dial-button{
    color: #464646;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 60px;
    margin: 5px;
    position: relative;
    text-transform: uppercase;
    vertical-align: top;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#form-manage-bgm-setKey div.dial-button{
    color: #ccc;
    cursor: default;
}
.dial-button input{
    left: 0px;
    position: absolute;
    top: 0px;
    visibility: hidden;
}
label.dial-button input:checked + .text{
    background-color: #fce5e5;
    color: #e10000;
}
.dial-button .text{
    color: inherit;
    height: 100%;
    width: 100%;

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
label.dial-button:hover .text{
    background-color: #f3f3f3;
}
.dial-button p{
    color: inherit;
    left: 0px;
    position: absolute;
    width: 100%;
}
.dial-button .main{
    font-size: 140%;
    line-height: 22px;
    top: 14px;
}
.dial-button .sub{
    bottom: 6px;
    font-size: 62%;
}





/* ===== artist page ==================== */
.portrait-sect{
    border-top: 1px solid #dadada;
    background-color: #fff;
    padding: 15px 0px 20px 0px;
    text-align: center;
    width: 100%;
}
.portrait-sect.darkBG{
    color: #fff;
}
.portrait-sect.lightBG{
    color: #333;
}
.portrait{
    display: inline-block;
    height: 128px;
    overflow: hidden;
    width: 128px;

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
}
.portrait-sect .name{
    color: inherit;
    margin: 0px auto;
    max-width: 768px;
    overflow: hidden;
    padding: 0px 30px;
    text-overflow: ellipsis;
    white-space: nowrap;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}





/* ===== album page ==================== */
#album-details-wrap .centerContent{
    padding: 0px;
}
.album-details{
    background-color: #e2e2e2;
    margin-bottom: 10px;
    padding: 15px 15px 25px 15px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.album-details:after{
    clear: both;
    content: "";
    display: block;
}
.album-details .artwork{
    float: left;
    margin-right: 10px;
    height: 128px;
    width: 128px;
}
.album-details .info{
    padding-left: 138px;
    padding-top: 10px;
}
.album-details .main{
    font-size: 113%;
    line-height: 22px;
    overflow: hidden;
}
.album-details a{
    font-size: 75%;
    overflow: hidden;
    line-height: 12px;
    text-overflow: ellipsis;
/*    white-space: nowrap;*/
}
.listing-OL{
    list-style-type: none;
    margin-bottom: 10px;
    padding: 0px 15px;
}
.listing-OL li{
    counter-increment: albumTracks-counter;
}
.listing-OL li .main:before{
    color: #ccc;
    content: counters(albumTracks-counter, ".", decimal-leading-zero);
    display: inline-block;
    margin-right: 10px;
    text-align: right;
    width: 20px;
}





/* ===== contest page ==================== */
.contest-thumb{
    background-color: #e9e9e9;
    display: block;
    margin-bottom: 10px;
    padding: 15px;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.contest-thumb:hover{
    background-color: #e0e0e0;
}
.contest-wrap .title{
    font-family: Arial, sans-serif;
    font-size: 88%;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 10px;
    max-height: 32px;
    overflow: hidden;
}
#how2win .contest-wrap .title{
    max-height: none;
    overflow: visible;
}
.contest-wrap .basic-info{
    font-size: 75%;
    margin-bottom: 10px;
    white-space: nowrap;
}
.contest-wrap .right .basic-info{
    height: 44px;
    line-height: 48px;
    margin-bottom: 0px;
    position: relative;
}
.contest-wrap .basic-info:after{
    clear: both;
    content: "";
    display: block;
}
.basic-info span{
    color: #e10000;
    float: left;
    font-size: inherit;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.contest-wrap .date{
    padding-right: 10px;
/*    position: relative;*/
}
.contest-wrap .date:after{
/*    border-right: 1px solid #333;*/
    content: "";
    display: block;
    height: 12px;
    margin-top: -8px;
    position: absolute;
    right: 0px;
    top: 50%;
}
.contest-wrap .entries{
    padding-left: 10px;
}
.basic-info span:before{
    color: #999;
}
.contest-wrap .promoDate{
    padding-right: 10px;
    position: relative;
}
.contest-wrap .promoDate:after{
    content: "";
    display: block;
    height: 12px;
    margin-top: -8px;
    position: absolute;
    right: 0px;
    top: 50%;
}
.contest-wrap .banner{
    overflow: hidden;
    width: 100%;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.contest-wrap .date:before{
    content: "End date: ";
}
.contest-wrap .promoDate:before{
    content: "End date: ";
}
.contest-wrap .ended .date:before{
    display: none;
}
.contest-wrap .entries:before{
    content: "Entries: ";
}
.contest-guide{
    list-style-type: none;
    margin-top: 20px;
    margin-bottom: 20px;
}
.contest-guide li{
    counter-increment: contest-guide-counter;
    margin-bottom: 5px;
    padding-top: 3px;
}
.contest-guide li p{
    margin-bottom: 10px;
}
.contest-guide li:before{
    background-color: #e10000;
    color: #fff;
    content: counters(contest-guide-counter, ".");
    display: inline-block;
    float: left;
    font-size: 88%;
    height: 20px;
    line-height: 22px;
    margin-right: 10px;
    text-align: center;
    width: 20px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-top: -3px;
}
.gift-sms-code{
    border-top: 1px solid #dadada;
    margin-top: 20px;
    padding-top: 20px;
}
li .entry-form{
    color: #e10000;
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
}
li .entry-form:disabled{
    color: #999;
    cursor: default;
}
#prizes.tab-content > p:first-of-type{
    margin-bottom: 20px;
}
.prize-wrap{
    margin-bottom: 25px;
}
.prize-wrap:after{
    clear: both;
    content: "";
    display: block;
}
.prize-box{
    margin-bottom: 15px;
}
.prize-box:after{
    clear: both;
    content: "";
    display: block;
}
.prize-box .image{
    float: left;
    height: 120px;
    width: 120px;
}
.prize-box .text{
    padding-right: 10px;
    padding-top: 20px;
    margin-left: 130px;
}
.prize-rank{
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 100%;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prize-available-winner{
    color: #999;
    margin-bottom: 10px;
}
.prize-available-winner:after{
    content: " winner(s)";
}
.prize-available-winner-malay{
    color: #999;
    margin-bottom: 10px;
}
.prize-available-winner-malay:after{
    content: " Pemenang";
}
.prize-name{
    line-height: 20px;
    max-height: 60px;
    overflow: hidden;
}
.entry-form-wrap > p{
    margin-bottom: 20px;	
}
.entry-agree-tnc.error{
    background-color: #f4dada;
}
.checkbox-wrap{
    padding-left: 24px;
    line-height: 20px;
}
#entry-tnc-checkbox{
    left: 4px;
    position: absolute;
    top: 10px;
}
.error #entry-tnc-checkbox{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(255,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(255,0,0,0.75);
}
.share-contest-wrap{
    background-color: #e5e5e5;
    display: none;
    height: 44px;
    position: absolute;
    padding: 0px 10px;
    right: 0px;
    top: 20px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.right .share{
    background-image: url(../images/iconSprite-share.png);
    background-position: left -176px;
    float: right;
}
.no-mobile .whatsapp{
    display: none;
}
.illustration-purpose{
    color: #333;
    font-size: 75%;
}
.prize-note{
    clear: both;
    color: #e10000;
    font-size: 75%;
    font-style: italic;
    margin-bottom: 10px;
}
.prize-note:before{
    content: "Note: ";
}

/* tnc */
.tnc-table{
    border: 1px solid #bbb;
}
.tnc-row{
}
.tnc-col{
    color: #333;
    font-size: 88%;
    padding: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tnc-col *,
.tnc-list *{
    color: inherit;
    font-size: inherit;
    line-height: 20px;
}
.tnc-col > p{
    margin-top: 10px;
}
.tnc-col > p:first-child{
    margin-top: 0px;
}
.tnc-list p{
    word-wrap: break-word;
}
.tnc-list a{
    color: #e10000;
    word-wrap: break-word;
}
.tnc-col ul{
    margin-left: 20px;
    list-style: disc;
}
.tnc-col ol{
    margin-left: 20px;
}
.tnc-col ol > li{
    margin-bottom: 10px;
}
.tnc-col .step{
    list-style-type: none;
    margin-left: 0px;
}
.tnc-col .step > li{
    counter-increment: contest-tnc-counter;
}
.tnc-col .step > li:before{
    content: "Step " counters(contest-tnc-counter, ".");
    display: block;
    font-family: Arial, sans-serif;
    font-weight: bold;
}
.tnc-col.title{
    background-color: #444;
    color: #fff;
    text-transform: uppercase;
}
.tnc-col.title p{
    font-family: Arial, sans-serif;
    font-weight: bold;
}
ol.lower-alpha{
    margin-top: 10px;
    list-style: lower-alpha;
}
.tnc-col .prize-note{
    color: #e10000;
}
.tnc-list{
    color: #333;
    font-size: 88%;
    margin-left: 20px;
    margin-top: 40px;
}
.tnc-list > li{
    color: #333;
    margin-bottom: 20px;
}
.tnc-list ol,
.tnc-list ul{
    background-color: #e7e7e7;
    padding: 10px 10px 10px 30px;
    margin-bottom: 10px;
}
.tnc-list ol li,
.tnc-list ul li{
    margin-bottom: 5px;
    line-height: inherit;
}
.reminder-bar{
    /*background-color: #e10000;*/
    background-color: #fff;
    opacity: 0;
    padding-bottom: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 110;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    transform: translateY(-100%);
}
.reminder-bar.on{
    transform: translateY(0%);
}
.reminder-bar p{
    /*color: #fff;*/
    margin-top: 14px;
    vertical-align: top;
}
html .txtBtn{
    color: #fff;
    margin-right: 15px;
    font-weight: bold;
    line-height: 44px;
    text-decoration: underline;
}
html .txtBtn:last-child{
    margin-right: 0;
}
.txtBtn.cancel{
    color: rgba(255,255,255,.7);
    font-weight: normal;
}
.reminder-btn-wrap{
    margin-top: 20px;
}






/* ===== footer ==================== */
footer{
    padding: 20px 0px;
}
footer p{
    color: #999;
    font-size: 65%;
    line-height: 20px;
}
footer a{
    font-size: 75%;
    line-height: 20px;
    margin-right: 10px;
    vertical-align: top;
    white-space: pre;
}
footer a.active{
    cursor: default;
    color: #ccc;
    text-decoration: none;
}
.follow-social p{
    display: inline-block;
    line-height: 44px;
}

/* ===== SST Note =====*/
.sstnote{
    font-size: 70%;
}



/* ===== faq ==================== */
.qna-item{
    margin: 2px -15px;
    padding: 15px 15px;
}
.qna-trigger{
    color: #333;
    cursor: pointer;
    padding-right: 20px;
    position: relative;
}
.qna-trigger p{
    color: inherit;
}
.opened .qna-trigger{
    color: #e10000;
}
.que:before{
    color: #e10000;
    content: "Q";
    font-family: Arial, sans-serif;
    font-size: 150%;
    font-weight: bold;
    float: left;
    line-height: 20px;
    margin-right: 10px;
}
.qna-trigger:after{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #464646;
    content: "";
    display: block;
    float: right;
    height: 0px;
    margin: 5px 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.opened .qna-trigger:after{
    border-top-color: #e10000;

    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.qna-content{
    display: none;
}
.qna-content:after{
    clear: both;
    content: "";
    display: block;
}
.qna-content p{
    margin-bottom: 10px;
}
.ans:before{
    color: #9ed266;
    content: "A";
    font-family: Arial, sans-serif;
    font-size: 150%;
    font-weight: bold;
    float: left;
    line-height: 20px;
    margin-right: 10px;
}
.qna-content ul,
.qna-content ol{
    margin-bottom: 10px;
    margin-left: 30px;
    padding-left: 20px;
}
.qna-content ul p,
.qna-content ol p{
    margin-bottom: 0px;
}
.qna-content li ul,
.qna-content li ol{
    background-color: #e3e3e3;
    margin-left: 0px;
    margin-top: 10px;
    padding: 5px 5px 5px 32px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.qna-content li ul{
    list-style: disc;
}
.qna-item:hover,
.qna-item.opened{
    background-color: #ececec;
}
.qna-item.opened .qna-trigger{
    padding-bottom: 10px;
}
.qna-item.opened .qna-content{
    border-top: 1px solid #dadada;
    display: block;
    padding-top: 10px;
}
.qna-item p{
    line-height: 20px;
    margin-left: 30px;
}
.qna-item li p{
    margin-left: 0px;
}
.qna-item .gst-reminder{
    font-size: 75%;
    margin-top: 15px;
}
/*
.action-bar{
        border-top: 1px solid #dadada;
        margin-top: 10px;
        padding-top: 10px;
}
*/
.qna-item .qna-close{
    color: #fff;
    height: 44px;
    margin-top: 10px;
}
.qna-item .qna-close p{
    background-color: #e10000;
    color: inherit;
    font-size: 75%;
    height: 20px;
    line-height: 22px;
    padding: 2px 10px;
}





/* ===== what's CRT ==================== */
#what-is-wrap{
	height: 900px;
}
.what-is-msg{
	color: #999;
	left: 0px;
	line-height: 18px;
	margin-top: 10px;
	position: fixed;
	top: 54px;
	width: 100%;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}
.what-is-msg p{
	color: inherit;
}
#phone-wrap{
	left: 50%;
	margin-left: -96px;
	position: fixed;
	top: 150px;
}
.phone img {
    display: block;
    margin: 20px auto;
}
#song-bubble,
#screen-2,
#screen-1{
	position: absolute;
	left: 0px;
	top: 0px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}
#phone-wrap #phone{
	z-index: 0;
}
#phone-wrap .phone-screen{
	z-index: 1;
}
#phone-wrap #song-bubble{
	top: -20px;
	z-index: 2;
}

.jp-audio{
height: 44px;
position: relative;
width: 44px;
z-index: 10;
}

.jp-audio a.preview{
display: block;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 44px;
}

/* ===== song request ==================== */
.requester-info{
	border-bottom: 1px solid #dadada;
	margin-bottom: 20px;
	padding-bottom: 10px;
}
.song-req-wrap{
	margin-top: 10px;
}
.song-req-wrap ~ .song-req-wrap{
	margin-top: 0;
}
.song-req-wrap:after{
	clear: both;
	content: "";
	display: block;
}
.song-req-wrap .field-wrap{
	width: calc(100% - 54px);
}
.song-action{
	background: url(../images/song-req-linkStroke.png) left top no-repeat;
	float: right;
	height: 98px;
	position: relative;
	width: 54px;
}
.song-action:after{
	background-color: #e10000;
	content: "";
	display: block;
	height: 34px;
	margin-top: -17px;
	position: absolute;
	right: 5px;
	top: 50%;
	width: 34px;
}
.disabled.song-action:after{
	background-color: #ccc;
}
.disabled.song-action{
	background-position: left bottom;
}
.song-action button{
	background: left -88px no-repeat;
	margin-top: -22px;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 10;
}
.add button{
	background-image: url(../images/iconSprite-plus.png);
}
.del button{
	background-image: url(../images/iconSprite-remove.png);
}

/* ===== push notification ==================== */
.pn-center{
	/*
	background-color: rgba(0,0,0,0.5);
	*/
	list-style: none;
	max-height: 100%;
	max-width: 460px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 10px;
	position: fixed;
	right: 0px;
	width: 100%;
	z-index: 100;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.pn-item{
	background: #fff;
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.pn-item.ani-false{
	margin-top: -100px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}
.pn-item .link{
	display: block;
	text-decoration: none;
}
.pn-item .link:after{
	clear: both;
	content: "";
	display: block;
}
.pn-item:hover .desc{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
.pn-item .close{
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	z-index: 999;
}
.pn-item .close:hover:before,
.pn-item .close:hover:after{
	background-color: #e10000;
}
.pn-item .close:before,
.pn-item .close:after{
	background: #999;
	content: "";
	display: block;
	height: 2px;
	left: 50%;
	margin: -1px 0 0 -6px;
	position: absolute;
	top: 50%;
	width: 12px;
}
.pn-item .close:before{
	transform: rotate(45deg);
}
.pn-item .close:after{
	transform: rotate(-45deg);
}
.pn-item .artwork{
	float: left;
	width: 30%;	
}
.pn-item .text{
	margin-left: 30%;
	padding: 12px 8px 8px 8px;
}
.pn-item .title{
	font-size: 88%;
	font-weight: bold;
	margin-bottom: 5px;
	overflow: hidden;
	padding-right: 32px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pn-item .desc{
	color: #666;
	line-height: 14px;
	max-height: 28px;
	overflow: hidden;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	
	-webkit-transition: opacity 500ms ease-in-out;
	-moz-transition: opacity 500ms ease-in-out;
	-ms-transition: opacity 500ms ease-in-out;
	-o-transition: opacity 500ms ease-in-out;
	transition: opacity 500ms ease-in-out;
}
.fake-link{
	color: #e10000;
	font-size: 75%;
	margin-top: 5px;
	text-decoration: underline;
}





/* ===== support ==================== */
#support-pg{
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	margin: 40px 0 20px 0;
}
.support-thumb{
	align-items: center;
	background-color: #fff;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 10px;
	text-decoration: none;
	transition-duration: .5s;
	-o-transition-timing-function: ease-in-out;
	transition-property: box-shadow, transform, background-image;
}
.support-thumb:hover{
	box-shadow: 0 4px 4px rgba(0,0,0,0.1);
	transform: scale(1.02) translateY(-3px);
}
.support-thumb img{
	display: block;
	height: 45px;
}
.support-thumb p{
	font-size: 18px;
	text-align: center;
}
#tutorial.tutorial-wrap{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 40px auto 0 auto;
	max-width: 720px;
}
.tuto-box{
	border-radius: 12px;
	border: 1px solid #999;
	box-sizing: border-box;
	padding: 15px;
	width: 100%;
}
.tuto-box img{
	width: 100%;
}
.tuto-box h2{
	padding-top: 0;
}
#manage-crt-box{
	padding-right: 0;
}
.tuto-item-wrap{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}
.tuto-item{
	border-bottom: 1px solid rgba(0,0,0,.1);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom:20px;
}
.tuto-item:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}
.tuto-item .main{
	align-items: center;
	display: flex;
	gap: 4px;
}
.tuto-item .tuto-ic{
	background-repeat: no-repeat;
	background-position-x: -11px;
	height: 22px;
	width: 22px;
}
.tuto-ic.on{
	background-image: url(../images/iconSprite-on_off.png);
	background-position-y: -11px;
}
.tuto-ic.off{
	background-image: url(../images/iconSprite-on_off.png);
	background-position-y: -55px;
}
.tuto-item .for-desk{
	display: none;
}
.valid-green,
.tuto-item .on-txt{
	color: #9ed266;
}
.tuto-item .main .on-txt{
	font-weight: bold;
}
.tuto-item .off-txt{
	color: #999;
}
.tuto-item .main .off-txt{
	font-weight: bold;
}
.tuto-item .explanation{
	color: #4D4D4D;
}
.tuto-item .attempt-count{
	margin: 0;
}
nav .supp{
	background-image: url(../images/iconSprite-supp.png);
}
nav .faq{
	background-image: url(../images/iconSprite-faq.png);
}



/* ===== what is crt =====*/

#pg-whats-crt{
	padding: 15px 10px;
	gap: 40px;
}
html body .whats-wrap{
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 720px;
}
.whats-crt{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
}
.whats-crt .img{
	position: relative;
}
.whats-crt .img:before{
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 75%);
	border-radius: 20px;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.whats-crt img{
	border-radius: 20px;
	display: block;
	width: 100%;
}
.whats-crt .img .txt{
	align-items: center;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	position: absolute;
	text-align: center;
	width: calc(100% - 30px);
	z-index: 1;
}
.whats-crt .title,
.whats-crt .img .txt p{
	color: #fff;
}
.whats-crt .title{
	font-size: 28px;
	font-weight: bold;
}
.whats-crt .img .txt p{
	font-size: 18px;
}
.whats-crt .icon-xl{
	margin-bottom: 10px;
}
.txt-red{
	color: #e10000;
}
.txt-grey{
	color: #999;
}

/* bg possition Y */
.tuto-ic.acti-1,
.tuto-ic.deact-1,
.tuto-ic.swap-1,
.tuto-ic.remove-1,
.tuto-ic.group-1,
.tuto-ic.contact-1,
.tuto-ic.settime-1{
	background-position-y: -55px;
}

/* bg possition X */
.tuto-ic.acti-2,
.tuto-ic.deact-2,
.tuto-ic.swap-2,
.tuto-ic.group-2,
.tuto-ic.contact-2,
.tuto-ic.settime-2{
	background-position-y: -11px;
}

.tuto-ic.currActi-1{
	background-position: 0 -12px;
}



/* group */
.tuto-ic.group-1,
.tuto-ic.group-2{
	background-image: url(../images/iconSprite-group.png);
}


/* contact */
.tuto-ic.contact-1,
.tuto-ic.contact-2{
	background-image: url(../images/iconSprite-assign-contact.png);
}

/* settime */
.tuto-ic.settime-1,
.tuto-ic.settime-2{
	background-image: url(../images/iconSprite-set-time.png);
}

/* remove */
.tuto-ic.remove-1{
	background-image: url(../images/iconSprite-remove.png);
}

/* swap */
.tuto-ic.swap-1,
.tuto-ic.swap-2{
	background-image: url(../images/iconSprite-swap.png);
}

/* deactivate */
.tuto-ic.deact-1,
.tuto-ic.deact-2{
	background-image: url(../images/iconSprite-deactivate.png);
}

/* activate */
.tuto-ic.acti-1,
.tuto-ic.acti-2{
	background-image: url(../images/iconSprite-plus.png);
}

/* currently active */
.tuto-ic.currActi-1{
	background-image: url(../images/indicator-diy-active.png);
}

.tuto-item .switch{
	background-color: #e10000;
	border-radius: 5px;
    color: #fff;
    display: inline-block;
    line-height: 44px;
    padding: 0 20px;
    text-align: center;
}





/* ===== what is manage crt =====*/
#whats-crt-vid{
	display: flex;
	justify-content: center;
}
#whats-crt-vid video{
	border-radius: 14px;
	box-shadow: 0 8px 8px rgba(0,0,0,.3);
}





@media (min-width:320px){
}

@media (min-width:375px){
	/* ===== push notification[iPhone6] ===== */
	.pn-item .desc{
		max-height: 42px;
        }
}

@media (min-width:768px){
    #banner{ 
        overflow:hidden;
    } 
    
    /* ===== overwrite atf inlining ===== */
    .logo-bar .desk-profile{
	display: block;
    }
        
    /* special case */

    .no-mobile.IE .language-wrap:after{
        left: 10px;
    }





    /* ===== common[tablet] ===== */
    #wrapper{
        padding-top: 88px;
    }





    /* ===== dialog, jQuery UI, overwrite style[tablet] ===== */
    .custom-popout.ui-dialog{
        max-width: 520px;
    }
    .custom-popout .gst-reminder{
        font-size: 78%;
    }
    .USSD-code p,
    .custom-popout label p,
    .custom-popout .listing .sub,
    .price span{
        font-size: 95%;
    }
    .custom-popout p,
    .custom-popout .main,
    .custom-popout .radio-label .main{
        font-size: 108%;
    }
    .custom-popout .listing .main{
        font-size: 115%;
    }
    #USSD{
        font-size: 125%;
    }

    /* date picker */
    .start-date-wrap{
        float: left;
        margin-right: 10px;
        width: calc(50% - 5px);
    }
    .end-date-wrap{
        clear: both;
        float: left;
        margin-right: 10px;
        width: calc(50% - 5px);
    }
    .no-csscalc .start-date-wrap,
    .no-csscalc .end-date-wrap{
        margin-right: 2%;
        width: 49%;
    }
    .start-date-wrap + .field-wrap,
    .end-date-wrap + .field-wrap{
        float: left;
        width: calc(50% - 5px);
    }
    .no-csscalc .start-date-wrap + .field-wrap,
    .no-csscalc .end-date-wrap + .field-wrap{
        width: 49%;
    }




    /* ===== header[tablet] ===== */
    #header{
        height: 88px;
    }
    .no-csscalc .logo-bar{
        margin-left: 0px;
        padding-left: 0px;
    }
    .logo-bar .centerContent{
        padding: 0px 15px;
    }
    nav{
        height: 44px;
        overflow: visible;
        position: static;
        width: 100%;
    }
    nav .centerContent{
        padding-left: 5px;
    }
    .menu-toggle,
    .mob-profile,
    .mob-sign-out{
        display: none;
    }
    nav a,
    nav button,
    nav .expMenu-label,
    .desk-profile a,
    .desk-signIn-wrap a{
        float: left;
        font-size: 75%;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: top;
        width: auto;
    }
    #header nav a,
    #header nav button,
    .desk-profile a,
    .desk-signIn-wrap a{
        background-image: none;
    }
    #header nav .search{
        background-image: url(../images/iconSprite-search.png);
        background-position: right top;
        background-repeat: no-repeat;
        float: right;
        padding-right: 44px;
    }
    .expMenu{
        float: left;
        width: auto;
    }
    .expMenu.opened{
        background-color: #fff;

        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }
    nav .expMenu-label{
        float: none;
	font-size: 75%;
	padding: 0 10px;
    }
    .option-wrap{
        list-style: none;
        padding-bottom: 10px;
    }
    .option-wrap li,
    .option-wrap li:last-child{
        background-image: none;
        padding-left: 0px;
    }
    .options a{
        float: none;
        line-height: 30px;
    }
    .nav-overlay{
        display: none;
    }
    .logo-bar{
        float: none;
        position: absolute;
        width: 100%;
    }
    .logo-bar .centerContent{
        padding-left: 15px;
        padding-right: 8px;
    }
    .desk-profile{
        display: block;
        float: left;
        margin-left: 20px;
    }
    .desk-profile .user-number{
        font-size: inherit;
        margin: 0px;
    }
    .desk-profile .welcome-msg{
        color: #333;
        font-size: 85%;
        font-weight: 700;
        height: 44px;
        line-height: 48px;
        margin: 0px;
        padding: 0px 10px;
    }
    .opened .welcome-msg,
    .opened .user-number{
        color: #e10000;
    }
    .sign-out-wrap{
        border-top: 1px solid #dadada;
        margin-top: 10px;
        padding-top: 10px;
    }
    .language-wrap,
    .reset-wrap{
        padding-left: 10px;
        position: relative;
    }
    .language-wrap:before,
    .reset-wrap:before{
        border-left: 1px solid #dadada;
        content: "";
        display: block;
        height: 16px;
        left: 0px;
        position: absolute;
        top: 14px;
    }
    .reset-wrap a,
    .reset-wrap p{
        padding-right: 10px;
    }
    .reset-wrap a:after,
    .reset-wrap p:after{
        content: " Your Preferences";
    }
    .desk-signIn-wrap{
        display: block;
        float: right;
    }
    .desk-signIn-wrap a{
        float: none;
    }





    /* ===== search[tablet] ===== */
    #search-wrap{
    }
    .search-overlay{
    }
    #search-bar{
        background-color: #ebebeb;
    }
    #predict-wrap{
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    }
    #predict-wrap:after{
        clear: both;
        content: "";
        display: block;
    }
    #predict-wrap > div{
        float: left;
        position: relative;
        width: 33%;
    }
    .predict-crt,
    .predict-artist{
        border-bottom: none;
    }
    .predict-crt:after,
    .predict-artist:after{

    }
    #predict-wrap.on:before{ 
        bottom: 10px;
        border-left: 1px solid #dadada;
        border-right: 1px solid #dadada;
        content: "";
        display: block;
        left: 33%;
        margin-left: -2px;
        position: absolute;
        top: 10px;
        width: 33%;
    }

    .shortCut-search-bar{
        display: none;
    }
    .search-result-desc{
        padding-top: 15px;
    }
    .search-result-sect:first-of-type{
        padding-top: 0px;
    }






    /* ===== form elements[tablet] ===== */
    .field-wrap.captcha{
        padding-bottom: 3px;
        padding-top: 3px;
    }
    .captcha .captcha-img{
        border: none;
        float: left;
        margin-right: 10px;
        margin-top: -3px;
        width: 250px;

        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    }
    .captcha .input-wrap{
        margin-left: 260px;
    }





    /* ===== listing[tablet] ===== */
    .songlist-wrap,
    .artistlist-wrap,
    .albumlist-wrap{
        position: relative;
        margin-bottom:15px;
    }
    .songlist-wrap:before,
    .artistlist-wrap:before,
    .albumlist-wrap:before{
        border-left: 1px solid #dadada;
        bottom: 44px;
        content: "";
        display: block;
        left: 50%;
        position: absolute;
        top: 5px;
    }
    .songlist-wrap.no-moreBtn:before,
    .artistlist-wrap.no-moreBtn:before,
    .albumlist-wrap.no-moreBtn:before{
        bottom: 0;
    }
    .songlist-wrap:after,
    .artistlist-wrap:after,
    .albumlist-wrap:after{
        clear: both;
        content: "";
        display: block;
    }
    .songlist-wrap .listing,
    .artistlist-wrap .listing,
    .albumlist-wrap .listing{
        width: 50%;
    }
    .songlist-wrap .listing:nth-child(odd),
    .artistlist-wrap .listing:nth-child(odd),
    .albumlist-wrap .listing:nth-child(odd){
        float: left;
    }
    .songlist-wrap .listing:nth-child(even),
    .artistlist-wrap .listing:nth-child(even),
    .albumlist-wrap .listing:nth-child(even){
        float: right;
    }
    .listing.packages{
        background-color: #e9e9e9;
        float: left;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        width: calc(50% - 5px);
    }
    .listing.packages:nth-child(even){
        margin-right: 10px;
    }
    .listing.packages .arrow{
        display: none;
    }
    .listing .content{
        /* use important to override inline style set by expand & collapse funtion */
        display: block !important;
    }
    .listing.packages.has-playing .name:before{
        background-image: url(../images/loadinfo.net-1.gif);
        content: "";
        display: inline-block;
        height: 16px;
        margin-right: 10px;
        margin-top: 14px;
        width: 16px;		
    }
    .action.swap{
        padding-left: 44px;
    }
    .action.swap:hover{
        text-decoration: underline;
    }
    .action.swap:before{
        content: "Swap Package";
    }
    .purchases .text{
        float: left;
        width: 40%;
    }
    .bgm.purchases .text{
        width: 30%;
    }
    .listing .purchases-price,
    .listing .purchases-date,
    .listing .purchases-time{
        float: right;
        font-size: 94%;
        line-height: 44px;
        margin: 0px;
        text-align: right;
        width: 20%;
    }
    .purchases-date:before,
    .purchases-time:before{
        display: none;
    }
    .purchases-time{
        display: block;
    }
    .purchases-gift{
        clear: both;
    }
    .listing.packages.purchases{
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
    .listing.purchases .name{
        float: left;
        line-height: 44px;
        vertical-align: top;
        width: calc(40% - 54px);
    }
    .diy-wrap.purchases .diy-thumb{
        height: 128px;
        width: 128px;
    }
    .purchases .thumb-vfx{
        bottom: -14px;
        left: -4px;
        right: -4px;
        top: -4px;
    }
    .no-csscalc .listing.purchases .name{
        margin-left: -54px;
        padding-left: 54px;
        width: 40%;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .diy-wrap .purchases-price,
    .diy-wrap .purchases-date,
    .diy-wrap .purchases-time{
        margin-left: 0px;
        margin-top: 10px;
        float: left;
        font-size: 94%;
        text-align: right;
        width: 20%;
    }
    .diy-wrap.purchases .diy-text{
        float: left;
        width: calc(40% - 138px);
    }
    .no-csscalc .diy-wrap.purchases .diy-text{
        margin-left: -138px;
        padding-left: 138px;
        width: 40%;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }





    /* ===== Here you go... page[tablet] ===== */
    .video-group{
        margin-left: 0px;
        margin-right: -10px;
        overflow-x: visible;
        white-space: normal;
    }
    .video-group:after{
        clear: both;
        content: "";
        display: block;
    }
    .video-container{
        float: left;
        margin-bottom: 20px;
        margin-right: 0px;
        padding-right: 10px;
        width: 33.333333%;
    }
    .video-container:first-child{
        margin-left: 0px;
    }
    .video-container:last-child{
        margin-right: 0px;
    }
    .cate-wrap{
        text-align: left;
    }





    /* ===== browse page[tablet] ===== */
    #banner{
        padding-bottom: 30px;
        padding-top: 10px;
    }
    .owl-nav{
        display: block;
        overflow: hidden;
        width: 100%;
    }
    .owl-prev,
    .owl-next{
        position: absolute;
        top: 50%;
        margin-top: -32px;
        background-position: center;
        background-repeat: no-repeat;
        height: 64px;
        width: 64px;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
    }
    .owl-prev:hover,
    .owl-next:hover{
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    .owl-prev{
        background-image: url(../images/banner-arrow-left.png);
        left: -32px; 
    }
    .owl-next{
        background-image: url(../images/banner-arrow-right.png);
        right: -32px;
    }

    .owl-item{
        margin-bottom: 10px;
        margin-top: 10px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }
    .owl-dots{
        display: block;
    }
    #genre:after{
        clear: both;
        content: "";
        display: block;
    }
    .genre-list{
        border-bottom: 1px solid #f3f3f3;
        float: left;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 5px;
        padding-right: 5px;
        width: 33.3333%;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .genre-list:hover{
        border-color: #dfdfdf;
    }
    #genre-dropdown-bar{
        top: 88px;
    }
    #genre-details-songlist.songlist-wrap:before{
        top: 64px;
    }

    #most-wanted{
        padding: 20px;
    }




    /* ===== CRT ala carte[tablet] ===== */
    /* manage */
    .listing.manage-opened{
        background-color: #e7e7e7;
        margin: 0px -15px;
        padding: 5px 15px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .action.ellipsis{
        display: none;
    }
    .manage-section{
        padding-bottom: 0px;
    }
    .manage-wrap{
        background-color: transparent;
        bottom: auto;
        clear: none;
        display: block;
        float: right;
        height: 44px;
        left: auto;
        margin-left: 10px;
        margin-top: 0px;
        position: relative;
        right: auto;
        top: auto;
        width: auto;
        z-index: 10;

        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;

        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .manage-button,
    .status-label{
        display: inline-block;
        position: static;
        vertical-align: top;
    }
    .manage-button{
        float: right;
    }
    .manage-button.assign-contact{
        margin-top: 0px;
    }
    .manage-button.close{
        display: none;
    }

    /* set to play */
    .status-label{
        cursor: pointer;
        display: block;
        float: left;
        height: 44px;
        min-width: 55px;
        padding: 0px 5px;
        vertical-align: top;
    }
    .status-label input{
        display: inline-block;
        position: relative;
        top: 50%;
        vertical-align: top;

        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    .status-label .status{
        background-image: none;
        display: inline-block;
        vertical-align: top;
        width: auto;
    }
    .status-label .status:before{
        font-family: Arial, sans-serif;
        font-size: 92%;
        font-weight: bold;
        line-height: 44px;
        padding-left: 5px;
        vertical-align: top;
    }
    .status:before{
        color: #999;
        content: "OFF";
    }
    .status-label input:checked + .status:before{
        content: "ON";
        color: #61c200;
    }
    .contact-wrap,
    .time-wrap{
        padding-right: 5px;
        padding-top: 20px;
    }
    .contact-wrap:after,
    .time-wrap:after{
        clear: both;
        content: "";
        display: block;
    }
    .contact,
    .time{
        background-color: #333;
        cursor: pointer;
        display: block;
        float: left;
        font-size: initial;
        height: 120px;
        margin-bottom: 10px;
        margin-right: 10px;
        overflow: hidden;
        vertical-align: top;
        width: 120px;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .contact.add,
    .time.add{
        background-color: #e10000;
    }
    .contact .plus,
    .contact .user,
    .time .plus,
    .time .clock{
        background-position: left -88px;
        float: none;
        left: 0px;
        position: absolute;
        top: 0px;

        -webkit-transition: margin 500ms ease-in-out;
        -moz-transition: margin 500ms ease-in-out;
        -ms-transition: margin 500ms ease-in-out;
        -o-transition: margin 500ms ease-in-out;
        transition: margin 500ms ease-in-out;
    }
    .contact p,
    .contact.add p,
    .contact .name,
    .time p,
    .time.add p,
    .time .week{
        color: #fff;
        display: block;
        line-height: normal;
        padding: 0px 10px;

        -webkit-transition: margin 500ms ease-in-out;
        -moz-transition: margin 500ms ease-in-out;
        -ms-transition: margin 500ms ease-in-out;
        -o-transition: margin 500ms ease-in-out;
        transition: margin 500ms ease-in-out;
    }
    .contact .name,
    .time .week{
        margin-top: 65px;
    }
    .contact .number,
    .contact.add p,
    .time .hour,
    .time.add p{
        display: block;
    }
    .contact.add p,
    .time.add p{
        margin-top: 64px;
        position: absolute;
        top: 0px;
        white-space: normal;
    }
    .contact .edit,
    .contact .remove,
    .time .remove{
        bottom: -44px;
        position: absolute;


        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;

        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
    .contact .edit{
        left: 0px;
    }
    .contact .remove{
        left: 44px;
    }
    .contact:hover .user,
    .time:hover .clock{
        margin-top: -34px;
    }
    .contact:hover .name,
    .time:hover .week{
        margin-top: 10px;
    }
    .contact:hover .edit,
    .contact:hover .remove,
    .time:hover .remove{
        bottom: 0px;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    /* when removing contact */
    .contact.removing .user,
    .contact.removing:hover .user,
    .time.removing .clock,
    .time.removing:hover .clock{
        margin-top: 0px;
    }
    .contact.removing .name,
    .contact.removing:hover .name,
    .time.removing .week,
    .time.removing:hover .week{
        margin-top: 65px;
    }
    .contact.removing .edit,
    .contact.removing .remove,
    .contact.removing:hover .edit,
    .contact.removing:hover .remove,
    .time.removing .remove,
    .time.removing:hover .remove{
        bottom: -44px;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
    }
    .week-wrap:after,
    .time-wrap:after{
        clear: both;
        content: "";
        display: block;
    }
    .custom-popout .group-label,
    .custom-popout .radio-label{
        float: left;
        width: calc(50% - 5px);
    }
    .custom-popout .group-label:nth-child(even){
        margin-right: 10px;
    }
    .week-wrap .radio-label:nth-child(even),
    .time-wrap .radio-label:nth-child(even){
        margin-left: 10px;
    }








    /* ===== D.I.Y. package page[tablet] ===== */
    .diy-thumb-wrap{
        text-align: left;
    }
    .diy-thumb-wrap:after{
        clear: both;
        content: "";
        display: block;
    }
    .diy-box{
        float: left;
    }
    #diy-active-panel{
        top: 88px;
    }
    .manage-diy-section .diy-thumb{
        width: 128px;
    }
    .manage-diy-section .thumb-vfx{
        bottom: -14px;
        left: -4px;
        right: -4px;
        top: -4px;
    }
    .manage-diy-section .remove{
        padding-left: 44px;
    }
    .manage-diy-section .remove:hover{
        text-decoration: underline;
    }
    .manage-diy-section .remove:before{
        content: "Remove";
    }





    /* ===== background music[tablet] ===== */
    .bgm-cate-wrap{
        margin-right: -10px;
    }
    .bgm-cate{
        float: left;
        margin-right: 10px;
        width: calc(33.333333% - 10px);
    }
    .no-csscalc .bgm-cate-wrap{
        padding-left: 10px;
    }
    .no-csscalc .bgm-cate{
        margin-left: -10px;
        width: 33.333333%
    }






    /* ===== album page[tablet] ===== */
    #album-details-wrap .centerContent{
        padding-left: 15px;
        padding-right: 15px;
    }
    #album-details-wrap .centerContent:after{
        clear: both;
        content: "";
        display: block;
    }
    .album-details{
        background-color: transparent;
        float: left;
        padding-left: 0px;
        width: 255px;
    }
    .album-details .artwork{
        float: none;
        margin-bottom: 20px;
        margin-right: 0px;
        height: 240px;
        width: 240px;

        -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
    }
    .album-details .info{
        padding-left: 0px;
    }
    .listing-OL{
        padding-left: 275px;
        padding-top: 15px;
    }





    /* ===== contest page[tablet] ===== */
    .contest-thumb{
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 10px);
    }
    .contest-thumb:nth-child(even){
        margin-left: 10px;
    }
    .contest-thumb .title{
        height: 32px;
    }
    .contest-wrap .left{
        float: left;
        width: 320px;
    }
    .contest-wrap .right{
        float: right;
        width: calc(100% - 340px);
    }
    .no-csscalc .contest-wrap .left{
        width: 40%;
    }
    .no-csscalc .contest-wrap .right{
        padding-left: 20px;
        width: 60%;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .prize-box{
        float: left;
        background-color: #fff;
        margin-bottom: 10px;
        width: calc(50% - 5px);
    }
    .prize-box:nth-child(2n+4){
        margin-left: 10px;
    }
    .right .share{
        display: none;
    }
    .share-contest-wrap{
        background-color: transparent;
        display: block;
        float: left;
        margin-left: 10px;
        position: static;

        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }

    /* tnc */
    .tnc-row{
        border-bottom: 1px solid #bbb;
    }
    .tnc-row:after{
        clear: both;
        content: "";
        display: block;
    }
    .tnc-row:last-child{
        border-bottom: none;
    }
    .tnc-col{
        float: left;
        padding: 5px;
        width: 70%;
    }
    .tnc-col.title{
        background-color: transparent;
        color: #333;
        width: 30%;
    }
    .tnc-col:nth-child(odd){
        border-right: 1px solid #bbb;
        margin-right: -1px;
    }
    .tnc-col:nth-child(even){
        border-left: 1px solid #bbb;
    }





    /* ===== footer[tablet] ===== */
    footer{
        margin-top: 20px;
    }
    footer a{
        line-height: 44px;
    }
    .footer-links-wrap{
        float: left;
        max-width: 65%;
    }
    .follow-social{
        float: right;
    }
    .follow-social p{
        display: none;
    }
    footer p{
        font-size: 75%;
    }
    .copyright{
        clear: both;
        margin-top: 10px;
    }
    .sstnote{
        clear: both;
        margin-top: 10px;
    }
    
    /* ===== what's CRT ==================== */
	.what-is-msg{
		top: 98px;
	}
	#phone-wrap{
		top: 200px;
	}

    /* ===== song request[tablet] ==================== */
	.song-req-wrap .field-wrap{
		float: left;
		margin-right: 10px;
		width: calc(50% - 32px);
	}
	.song-action{
		background: none;
		height: 44px;
		width: 44px;
	}
	.song-action:after{
		height: 44px;
		margin-top: -22px;
		right: 0;
		width: 44px;
	}
	
	/* crt+ menu style */
	.crt-plus:after{
		height: 26px;
		margin-top: -13px;
	}   
        
        /* ===== push notification[tablet] ===== */
	.pn-item .desc{
		max-height: 56px;
	}
        
        /* ===== Support[tablet] ==================== */
	#support-pg{
		grid-template-columns: 1fr 1fr 1fr;
	}
	.whats-wrap{
		margin-left: auto;
		margin-right: auto;
	}
	#pg-whats-crt{
		align-items: flex-start;
		flex-direction: row;
		gap: 10px;
		justify-content: center;
	}
	.tuto-item .for-desk{
		display: block;
	}
        .tuto-item .for-mob{
		display: none;
	}
	#manage-crt-box{
		padding-right: 15px;
	}
        
}


@media (min-width:980px){

    /* ===== common[desktop] ===== */
    .centerContent{
        left: 50%;
        margin-left: -490px;
        position: relative;
    }

    /* ===== dialog, jQuery UI, overwrite style[desktop] ===== */
    .custom-popout.ui-dialog{
    }





    /* ===== browse page[desktop] ===== */
    .box-wrap{
        margin: 0px;
        padding: 0px;
        white-space: normal;
    }
    .listing-box{
        float: left;
        margin-left: 0px;
        margin-right: 10px;
        width: 127px;
    }
    .listing-box:last-child{
        margin-right: 0px;
    }
    .genre-list{
        width: 25%;
    }





    /* ===== CRT ala carte[desktop] ===== */
    /* manage */
    .manage-button{
        margin-right: 10px;
        width: auto;
    }
    .manage-button:before{
        display: block;
    }





    /* ===== D.I.Y. package page[desktop] ===== */
    .diy-box{
        margin-right: 9px;
    }





    /* ===== background music[desktop] ===== */
    .bgm-cate{
        width: calc(25% - 20px);
    }
    .no-csscalc .bgm-cate{
        margin-left: -10px;
        width: 25%
    }




    /* ===== contest page[desktop] ===== */
    .contest-thumb{
        width: calc(33% - 10px);
    }
    .contest-thumb:nth-child(even){
        margin-left: 0px;
    }
    /* start from item 2, and following item that is after 3 items */
    .contest-thumb:nth-child(3n+2){
        margin-left: 10px;
        margin-right: 10px;
    }
    .prize-box{
        float: left;
        background-color: #fff;
        width: calc(33.333333% - 7px);
    }
    .prize-box:nth-child(2n+4){
        margin-left: 0px;
    }
    .prize-box:nth-child(3n+4){
        margin-left: 10px;
        margin-right: 10px;
    }
    .contest-wrap .left{
        float: left;
        width: 380px;
    }
    .contest-wrap .right{
        float: right;
        width: calc(100% - 400px);
    }
}

#wrapper .oops-wrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 40px 0;
    padding: 0 20px;
}
.oops-wrap img{
    width: 100%;
}
.oops-wrap .txt{
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.oops-wrap .txt img{
    display: block;
    max-width: 512px;
    margin: 0 auto;
}
.oops-wrap .btn-wrap{
    margin-top: 20px;
}
#refresh-btn{
    background-color: #263e4b;
    border-radius: 99px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 10px 20px;
}
@media (min-width:768px){
    .oops-wrap{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (min-width:980px){
    #wrapper .oops-wrap{
        align-items: center;
        flex-direction: row;
        gap: 40px;
    }
    .oops-wrap .figure{
        flex: 2 2 50%;
    }
    .oops-wrap .txt{
        flex: 1 1 50%;
    }
    .oops-wrap .{
    }
    .oops-wrap .txt{
        text-align: left;
    }
    .oops-wrap .txt img{
        margin-left: 0;
    }
    
    /* ===== Support[desktop] ==================== */
    #support-pg{
            grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}