/* HOME LOGIN */
.home-login {
	position:fixed;
	display:none;
	width: 100vw;
	height: 100vh;
	overflow:hidden;
	margin:0px;
	padding:0px;
	background-image: linear-gradient(#2A3D41, #000);
	z-index:1;
}

.login-email {
	position:absolute;
	display:block;
	width:50px;
	height:50px;	
	left:50%;
	top:80%;
	background-color:#000;
	border:2px solid #4D4C59;
	border-radius:50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-image: url("../../img/mobile/icons/email.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:32px 32px;	
	cursor:pointer;
	z-index:100;
	/* Transparent */
	opacity: 0.8;
	filter: alpha(opacity=20); /* For IE8 and earlier */	
}

.login-agreement {
	position:absolute;
	display:block;
	width:250px;
	height:100px;	
	left:50%;
	top:95%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:100;
	color:#fff;
	font-size:10px;
	text-align:center;
}

.privacy-check {
	position:relative;
	display:inline-block;
	width:15px;
	height:15px;
	background-color:#fff;
	border-radius:50%;
	color:#000;	
}

.move-me-img {
	width:100%;
	height:100%;	
}

.move-me {
	position:absolute;
	display:none;
	width:110%;
	height:100%;
	padding: 0px;
	color: white;	
	margin: 0px;	
}

.move-me-left {
	animation: move-left 8s infinite;
}

@keyframes move-left {
  0% {
    left: -50px;
  }
  100% {
    left: 0;
  }
}

.move-me-right {
	animation: move-right 8s infinite;
}

@keyframes move-right {
  0% {
    right: -50px;
  }
  100% {
    right: 0;
  }
}

/* 1st form for login. Email only */
.login-back {
	position:fixed;
	display:inline-block;
	margin:20px;
	cursor:pointer;
	width:20px;
	height:20px;
	background-image: url("../../img/mobile/icons/left-arrow.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;		
}

.box-login {
	position:fixed;
	display:inline-block;
	width:100vw;
	padding-top:0px;
	padding-left:35px;
	padding-right:35px;
	padding-bottom:0px;	
}

.login-txt {	
	top:100px;
}

.txt-wrap {
	position:relative;
	display:inline-block;
	width: calc(100% - 70px);
	width: -moz-calc(100% - 70px);
    width: -webkit-calc(100% - 70px);	
	word-wrap: break-word;  
}

.txt-title {
	position:relative;
	display:block;
	font-size:25px;
	font-weight:bold;
	color:#fff;
	vertical-align:top;
}

.txt-desc {
	position:relative;
	display:block;
	font-size:10px;
	color:#BBBFC2;
	vertical-align:top;
}

.login-input {
	top:200px;
}

/* Contains cleanbtn and input text */
.box-input {
	position:relative;
	display:inline-block;
	width: calc(100vw - 70px);
	width: -moz-calc(100vw - 70px);
    width: -webkit-calc(100vw - 70px);	
	vertical-align:top;
	border:none;
	background-color:#131313;	
	padding:0px;
	margin-top:10px;
}

/* Input text for email, pwd, name */
.input-txt {
	position:relative;
	display:inline-block;
	width: calc(100vw - 120px);
	width: -moz-calc(100vw - 120px);
    width: -webkit-calc(100vw - 120px);		
	padding:15px;
	font-size:15px;
	font-family: 'Titillium Web';	
}

.input-effect {
	border:none;
	background-color:inherit;
	line-height:0px;
	color:#fff;		
}

.input-effect:focus {
	border: 0px none #1C3335 !important;
	box-shadow: 0 0 0px #1C3335 !important;
	-moz-box-shadow: 0 0 0px #1C3335 !important;
	-webkit-box-shadow: 0 0 0px #1C3335 !important;
	outline-offset: 0px !important;
	outline: none !important;
}

.input-effect::placeholder {
	color:#535353;
	opacity: 1; /* Firefox */
}

.input-effect::-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#535353;
}

.input-effect::-ms-input-placeholder { /* Microsoft Edge */
	color:#535353;
}

/* btn clear */
.login-input-cln-icon {
	position:absolute;
	display:none;
	width:15px;
	height:15px;
	background-color:#fff;
	border-radius:50%;
	color:#000;
	font-size:15px;
	line-height:12px;
	font-weight:bold;
	text-align:center;
	top:35%;
	right:15px;
	cursor:pointer;
}

.login-input-pwd-icon {
	position:absolute;
	display:inline-block;
	width:18px;
	height:18px;
	text-align:center;
	top:32%;
	right:13px;
	cursor:pointer;
	background-image: url("../../img/mobile/icons/eye.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;		
}

.login-input-pwdh-icon {
	position:absolute;
	display:inline-block;
	width:20px;
	height:20px;
	text-align:center;
	top:32%;
	right:13px;
	cursor:pointer;
	background-image: url("../../img/mobile/icons/eyeh.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;		
}

.btn-login {
	position:relative;
	display:inline-block;
	width: calc(100vw - 90px);
	width: -moz-calc(100vw - 90px);
    width: -webkit-calc(100vw - 90px);		
	vertical-align:top;
	font-size:18px;
	text-align:center;
	padding:10px;
	border-radius:25px;	
	margin-top:20px;
	cursor:pointer;
}

.btn-login-disable {
	color:#5A6666;	
	background-color:#293738;
	border:1px solid #293738;
}

.btn-login-enable {
	color:#fff;
	background-color:#013F00;
	border:1px solid #013F00;
}

/* Loader */
.login-loader {
	position:fixed;
	display:none;
	left:50%;
	top:65%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color:#0F0E0C;
	vertical-align:top;
	padding:15px;
	border-radius:5px;
	z-index:50;
}

.login-loader > img {
	width:24px;
	height:24px;
}

.loader-txt {
	position:relative;
	display:inline-block;
	vertical-align:top;
	color:#fff;
	font-size:15px;
	margin-left:5px;
}

/* Dialog modal */
.ctr-box-dialog {
	position:fixed;
	display:none;
	width:100vw;
	height:100vh;
	z-index:50;
}

.box-dialog-transparent {
	position:fixed;
	display:inline-block;
	width:100vw;
	height:100vh;
	z-index:51;
	background-color:#070707;
	/* Transparent */
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */		
}

.box-dialog {
	position:absolute;
	display:inline-block;
	width:80%;
	height:200px;
	left:50%;
	top:50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color:#383838;
	vertical-align:top;
	padding:20px;
	border-radius:5px;
	z-index:52;	
}

.dialog-x {
	position:relative;
	display:inline-block;
	vertical-align:top;
	color:#fff;
	font-size:15px;
	text-align:right;
	width: 100%;
	line-height:10px;
	margin-bottom:20px;
}

.dialog-txt {
	position:relative;
	display:inline-block;
	vertical-align:top;
	color:#fff;
	font-size:15px;
	text-align:center;
	width: 100%;
	margin-bottom:10px;
}

.dialog-btn {
	position:relative;
	display:inline-block;
	width: calc(100% - 20px);
	width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);		
	vertical-align:top;
	font-size:15px;
	text-align:center;
	padding:10px;
	border-radius:25px;
	margin-top:15px;
}

.btn-confirm {
	background-color:#58B376;
	border:1px solid #58B376;
	color:#fff;
}

.btn-cancel {
	background-color:#131313;
	border:1px solid #58B376;
	color:#58B376;
}

/* HOME LOGIN */
.home-additional {
	position:fixed;
	display:none;
	width: 100vw;
	height: 100vh;
	overflow:hidden;
	margin:0px;
	padding:0px;
	background-color:#000;
	z-index:1;
}

.additional-row {
	position:relative;
	display:block;
	width:100%;
	margin:0px;
	padding:0px;
	vertical-align:top;
}

.row-header {
	height:60px;
}

.row-content {
	height: calc(100% - 60px);
	height: -moz-calc(100% - 60px);
    height: -webkit-calc(100% - 60px);		
}

.txt-header {
	text-align:center;
	color:#fff;
	font-size:18px;
	padding:5px;
}

.txt-genre {
	text-align:center;
	color:#fff;
	font-size:14px;
	padding:5px;
	margin-bottom:10px;
}

.txt-more {
	text-align:center;
	padding:5px;
	margin-bottom:30px;
	background-image: url("../../img/mobile/icons/bottom-arrow.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:25px 25px;		
}

.txt-space {
	text-align:center;
	width:100%;
	height:140px;
}

.main-content {
	text-align:center;
	margin-top:15px;
	height: calc(100vh - 70px);
	height: -moz-calc(100vh - 70px);
    height: -webkit-calc(100vh - 70px);	
	/* Stay can scrolling without scrollbar */
	overflow: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
    overflow-x: hidden;
}

.main-content::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

/* optional: show position indicator in red */
.main-content::-webkit-scrollbar-thumb {
    background: #FF0000;
}

.thumbnail-artist {
	position:relative;
	display:inline-block;
	width: calc((100% - 100px) / 3);
	width: -moz-calc((100% - 100px) / 3);
    width: -webkit-calc((100% - 100px) / 3);
	height:170px;
	margin:5px;
	padding:5px;
}

.artist-img {
	position:relative;
	display:block;
	border-radius:50%;
	width:100%;
	height:140px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;	
	overflow:hidden;
}

.artist-selected {
	position:absolute;
	display:none;
	width:100%;
	height:140px;
	color:#58B376;
	font-size:80px;
	font-weight:bold;
	z-index:61;
}

.artist-bg-selected {
	position:absolute;
	display:none;
	width:100%;
	height:140px;
	background-color:#000;
	/* Transparent */
	opacity: 0.7;
	filter: alpha(opacity=30); /* For IE8 and earlier */	
	z-index:59;	
}

.artist-name {
	margin-top:5px;
	color:#fff;
	width:100%;
	text-align:center;
	font-size:12px;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;  /* Number of lines displayed before it truncate */	
}

.login-skip {
	position:fixed;
	display:inline-block;
	top:15px;
	right:20px;
	cursor:pointer;
	color:#fff;
	font-size:14px;
}

.box-next {
	position:fixed;
	display:inline-block;
	bottom:0px;
	left:0px;
	width:100%;
	height:100px;
	background-image: linear-gradient(transparent, #202020);
	text-align:center;
}

.btn-next {
	position:relative;
	display:inline-block;
	font-size:15px;
	text-align:center;
	padding:10px;
	border-radius:25px;	
	background-color:#58B376;
	border:1px solid #58B376;
	color:#fff;
	width:100px;
	margin-top:35px;	
}

.box-search-artist {
	position:relative;
	display:inline-block;
	width:200px;
	height:53px;
	vertical-align:top;
	border:none;
	padding:0px;
	margin-left:20px;
}

/* Input text to find artist or genre */
.input-search {
	position:relative;
	display:inline-block;
	width:145px;
	padding:15px 0px 15px 0px;
	font-size:15px;
	font-family: 'Titillium Web';
}

.box-search-icon {
	position:relative;
	display:inline-block;
	width:20px;
	height:20px;
	text-align:center;
	top:32%;
	right:13px;  
	cursor:pointer;
	vertical-align:top;
	margin-left:10px;
	background-image: url("../../img/mobile/icons/search-white.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;	
}

/* GENRE SCREEN SESSION */
.thumbnail-genre {
	position:relative;
	display:inline-block;
	width: calc((100% - 100px) / 2);
	width: -moz-calc((100% - 100px) / 2);
    width: -webkit-calc((100% - 100px) / 2);
	height:170px;
	margin:5px;
	padding:5px;
}

.genre-img {
	position:relative;
	display:block;
	width:100%;
	height:140px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;	
	overflow:hidden;
}

.genre-name {
	position: absolute;
	color:#fff;
	width:100%;
	text-align:center;
	font-size:20px;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;  /* Number of lines displayed before it truncate */	
	z-index:60;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}