@font-face {
    font-family: Quicksand;
    src: url(../../../assets/font/Quicksand-Regular.ttf);
}
@font-face {
    font-family: Quicksand Medium;
    src: url(../../../assets/font/Quicksand-Medium.ttf);
}
@font-face {
    font-family: Quicksand Bold;
    src: url(../../../assets/font/Quicksand-Bold.ttf);
}
@font-face {
    font-family: Quicksand Light;
    src: url(../../../assets/font/Quicksand-Light.ttf);
}


@media only screen and (min-width: 800px) {
  html{
    url(../../../assets/font/Quicksand-Medium.ttf)
  }
  body {
    background-color: #000000;
    color: #ffffff;
    width: 500px;    
    height: 100%;
    margin:0px auto;
    padding:0px;
  }
}

@media only screen and (max-width: 800px) {
  html{
    url(../../../assets/font/Quicksand-Medium.ttf)
  }
  body {
    background-color: green;
    color: #ffffff;
    width: 100%;
    height: 100%;
    margin:0px auto;
    padding:0px;
    left:0;
    right: 0;
    
  }

}


html{
  font-family: Quicksand;
  font-size:10pt;
}


#wrapper {
  background-color: #eeeeee;
  overflow-x:hidden;
}

#container {
  position: relative;  
  background-color: #000;
}

#page{
  position:relative;
  background-color: #444444;
  width:100%;
  left:0;
  overflow:hidden;
  color:#e0e0e0;
  padding-bottom: 80px;
  transition: left .3s;

}

#mmenu{
  position:absolute;
  background-color: #ffffff;
  left:-200px;
  width:200px;
  height:100%;
  z-index: 9999;
  transition: left .3s;
}

#container.showMenu #mmenu {
  left: 0px;
}

#container.showMenu #page {
  left: 200px;
}


.icon_sidebar {
  margin:0;
  padding:10px 10px 0px 20px;
}

.icon_sidebar  a{
  text-decoration: none;
  display:block;
}

.icon_sidebar  a:hover{
  display:block;
}

.dvicon{
  /*background-color: red;*/
  width:100%;
  margin:0px 0px;
  margin-bottom: 25px;
  height: 25px;
  display:block;
  position:relative;
}



.dvicon a{
  padding-left: 50px;
  text-decoration: none;
  font-size:16px;
  color: #000;
  line-height:25px;
  display:block;
}
  
.dvicon_sub{
  padding-left: 10px;
}
  
.icon_holder {
  position:absolute;
  width:25px;  
  height:25px;
  top:0;
  left:0;
}  
  
.icon_logo{
  /*background-image: url(../../../assets/mobitube/images/icon_logo.png);*/
  background-size: 80% 80%;
  background-repeat: no-repeat;
  width: 120px;
  height: 50px;
  margin-top:15px;
}

.icon_close {
  /*background-image: url(../../../assets/mobitube/images/icon_close.png);*/
  background-size: 15px 15px;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  margin-top:22px;
  vertical-align:middle;
  float:right;
}

.icon_home{
  background-image: url(../../../assets/mobitube/images/icon_home_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

.icon_channel{
  background-image: url(../../../assets/mobitube/images/icon_channel_off.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:25px;
  height:25px;
}

.icon_gift{
  background-image: url(../../../assets/mobitube/images/icon_gift_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

.icon_account{
  background-image: url(../../../assets/mobitube/images/icon_account_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

.icon_faq{
  background-image: url(../../../assets/mobitube/images/icon_faq_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}
.icon_more{
  background-image: url(../../../assets/mobitube/images/icon_more_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}
.icon_language{
  background-image: url(../../../assets/mobitube/images/icon_language_off.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

.icon_home.active {
  background-image: url(../../../assets/mobitube/images/icon_home_on.png);
}
.icon_channel.active  {
  background-image: url(../../../assets/mobitube/images/icon_channel_on.png);
}
.icon_gift.active{
  background-image: url(../../../assets/mobitube/images/icon_gift_on.png);
}
.icon_account.active {
  background-image: url(../../../assets/mobitube/images/icon_account_on.png);
}
.icon_faq.active {
  background-image: url(../../../assets/mobitube/images/icon_faq_on.png);
}
.icon_more.active{
  background-image: url(../../../assets/mobitube/images/icon_more_on.png);
}
.icon_language.active{
  background-image: url(../../../assets/mobitube/images/icon_language_on.png);
}

.icon_arrow {  width:10px; vertical-align:middle; }
.icon_rect {  width:10px; vertical-align:middle; }

#header_background {
  background-image: url(../images/header.png);
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:auto;
  max-height:70px;
}

#footer_background {
  background-image: url(../images/header.png);
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:auto;
  min-height:78px;
  position: absolute;
  left: 0;
  bottom :0;
  
}

#header_title {
  text-align:center;
  padding: 25px 0px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size:20px;
}

#telcobar {
  padding:15px;
  text-align:center;
}

.mtoggle {
  position: absolute;
  text-align:left;
  left:0;
  top:0;
  /*background-color:red;*/
  padding:22.5px;
}

.bar {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 4px;
  background-color: #eeeeee;
  margin: 4px 0;
  transition: 0.4s;
}


/*
*Big Banner POP
*/
#overlaybox {
  display: none;
  width: 90%;
  height: auto;
  position: absolute;
  z-index: 900;
  top: 100px;
  left: 0;
  right:0;
  background-color:#ffffff;
  vertical-align: middle;  
  padding: 20px 10px;
  color: #000;
  margin: auto auto;
  border-radius: 10px;
}
  
#fade, #nkfade {
  display: none;  /* ensures it’s invisible until it’s called */
  position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
  /*left: 0;*/ /* makes the div span all the way across the viewing area */
  /*top: 0;*/ /* makes the div span all the way across the viewing area */
  right:0;
  -moz-opacity: 0.5; /* makes the div transparent, so you have a cool overlay effect */
  opacity: .50;
  filter: alpha(opacity=50);
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
  background-color: #000000;
  overflow: hidden;  
}

#tg, #nktg {
  width: 100%;
  display: block;
  min-height: 100%;
  height: auto;
}

.tg_grey{
  margin-top:20px;
  background-color: #e0e0e0;
  text-align:center;
  font-weight: bold;
  font-size: 20px;
}

.tg_grey a{
  font-size: 20px;
  display:block;
  text-decoration: none;
  font-weight:bold;
  padding: 30px;
  color: #000000;
}

a.link {
  text-decoration: underline;
  color: #000000;
}

a.noline {
  text-decoration: none;
}

ul.nostyle {
  list-style-type:none;
  margin:0;
  padding:0;
}

.playmark_box {
  position:relative;
	display:block;
  padding-right: 5px;
  padding-top: 5px;
}

img.playmark {
	position: absolute;
	top: 30%;
	left: 30%;
	width: 30%;
	height: 30px;
}

.playmark_banner{
  position:relative;
	display:block;
}

img.playmark_banner {
	position: absolute;
	top: 9%;
	left: 43%;
	width: 13%;
	height: auto;
}

.channel_title_banner {
  padding-left:5px;
  padding-right:5px;
  padding-top:8px;
  font-weight:bold;
}

.channel_title {
  padding-right:5px;
}

.tq_channel_desc {
  font-size: 10px;
  font-weight: normal;
  padding: 5px;
}

img.playmark_banner {
	position: absolute;
	top: 35%;
	left: 43%;
	width: 13%;
	height: 23%;
}

.frameplain {
  margin:10px 10px;
  position: relative;
}

.frame {
  background-color: #ffffff; 
  margin:0px 10px;
  position: relative;
  color: #000;
}

.framebanner {
  background-color: #ffffff; 
  margin: 10px 10px 0px 10px;
  position: relative;
}

.framebox {
   padding:10px; 
   cursor:pointer;
   position:relative;
   background-color:#ffffff;
   border-radius: 10px;
   margin-bottom:10px;
   color: #000;
}

.framebox_blank {
   cursor:pointer;
   position:relative;
   border-radius: 10px;
   /*margin:30px 0px;*/
   margin-bottom: 20px;
}

.frametitle_classic {
  border-bottom: 1px solid;
  padding: 15px 0px 5px 0px;
  font-weight: bold;
  color: #000;
}

.frametitle {
  text-align: left;
  padding: 10px 0px 5px 0px;
  background-color: #444;
  color:#ffffff;
  font-size:18px;
  font-family: Quicksand Bold;
}

.framearrow{
  display:inline-block;
  vertical-align:middle;
  float:right;
  clear:left;
}

.frameimg{
  display:inline-block;
  vertical-align:middle;
}

.framechannel{
  display:inline-block;
  vertical-align:middle;
  font-size:16px;
  padding-left:5px;
  font-weight:bold;
}

.framechannelborder{
  text-align: left;
  border-bottom:1px solid #cccccc;
  padding-bottom:10px;
  margin-bottom:5px;
  font-size:18px;
}

.framerow{
  background-color:#ffffff;
  width: 100%;
  /*display: table-cell;  */
  display: block;  
  padding-bottom: 10px;
}

.framerowimg{
  display: table-cell;
}

.framerowinfo{
  display: table-cell; 
  vertical-align:middle;
  word-wrap: break-word;
}

.contentname{
  font-weight:bold;
  font-size:14px;
  color:#A837EC;
}

.framethumb{
  padding:10px;
  width:1px;
}

.contentrow {
  margin:10px 0px 10px 0px;
  background-color:#ffffff;
  color:#000;
}

.separator{
  height:1px;
  background-color: #eeeeee;
  margin: 10px 0xp 10px 0px;
}

.floatright {
  float:right;
}

.noline{
  text-decoration: none;
}

.smalltext{
  font-size: 12px;
  color: #ffffff;
}

.white{
  color: #ffffff;
}


/*
* ACCOUNT
*/
#account  {
  padding:10px;
}

#account  div{
  padding:5px;
}

#account  {
  padding:10px;
}
#account .title{
  font-weight: bold;
}
#account .border_bottom{
  border-bottom: 2px solid #eeeeee;
}
#account #profile_name{
  border-bottom: 1px solid #eeeeee;
}

.btn{
  width:100%;
  padding:10px 20px;
  color: #ffffff;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  
}

#account .btn_red{
  background-color: red;
  color: #ffffff;
}

.btn_default{
  background-color: #1473E6;
  color: #ffffff;
}

.btn_darkgrey{
  background-color: #a9a9a9;
}

.btn_lightblue{
  background-color: #41c5ff;
}

.btn_lightblue_frame{
  background-color: #ffffff;
  border: 2px solid #41c5ff;
}

/*
* UPLOAD CONTENT
*/ 

#upload_content.bg { 
  background-image: url('../../../assets/mobitube/images/upload_now.jpg'); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#upload_content .frame {
  height: 700px;
  min-height:700px;
}

#upload_content .frame, .framerow, .framecontent {
  background-color: transparent;
}

#upload_content .intro {
  margin:0 auto;
  padding-top : 170px;
  text-align:center;
  font-size: 12px;
  width:70%;
}

#upload_content table {
  text-align:center;
}

#upload_content table.upload {
  background-color:transparent;
  margin:0 auto;
  padding-top:20px;
}

#upload_content #upload_btn {
  margin-top: 30px;
  text-align:center;
  width:200px;
  cursor : pointer;
}

#upload_content #preview {
  background-color:#ffffff;
  display:block;
  float:right;
  width:200px;
}

#upload_content #upload_form > div {
  margin-bottom:10px;
}

#upload_content #speed,#remaining {
  width:100px;
}

#upload_content #b_transfered {
  text-align:right;
}

#upload_content .clear_both {
  clear:both;
}

#upload_content #progress_info {
  font-size:10pt;
}

#upload_content #fileinfo,#error,#error2,#abort,#warnsize {
  color:#000;
  display:none;
  font-size:10pt;
  font-style:italic;
  margin-top:10px;
}

#progress {
  border:1px solid #ccc;
  display:none;
  height:14px;
  border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
  -webkit-border-radius:10px;
  background: -moz-linear-gradient(#66cc00, #4b9500);
  background: -ms-linear-gradient(#66cc00, #4b9500);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));
  background: -webkit-linear-gradient(#66cc00, #4b9500);
  background: -o-linear-gradient(#66cc00, #4b9500);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')";
  background: linear-gradient(#66cc00, #4b9500);
}
#upload_response {
  padding: 10px;
  margin-right:10px;
  overflow: hidden;
  display: none;
}

.nkpopmenubttn{
  width: auto;
  border: 1px solid #eeeeee;  
  display: block;
  font-size: 14px;
  text-align:center;
  background-color:#e0e0e0;
  padding: 20px 5px;
  
}

.hideme {
  display:none;
}

#unsub_msg {
  text-align:center !important;
  
}

/*
* UGC
*/
.ugcbacktopage {
  position:absolute;
  top:60px;
  right:60px;
  font-weight:bold;
  font-size: 14px;
}


/*
* Purchase confirmation
*/
  
#aoc {
  padding:20px;
}

#aoc .confirmation{
  font-size: 25px;
  line-height: 20px;
  color: #000000;
  text-align:center;
  padding: 15px 0px;
  
}
#aoc .divider {
  height:1px;
  border-bottom : 1px solid #e0e0e0;
  margin:10px 0px;
}

#aoc table td{
  padding:5px;
}

#aoc table td.tdleft{
  font-weight:bold;
  color: #444444;
}  

#aoc .ulogo{
  vertical-align:middle;
  display:inline-block;
}

#aoc .cancel{
  float:right;
}

#aoc .cancel a{
  font-size:14px;
  font-weight:bold;
  vertical-align:middle;
  display:inline-block;
  line-height:3.5em;
  color: #000000;
}  

#aoc .confirm {
  font-size:16px;
  font-weight:bold;
  background-color: #e0e0e0;
  text-align:center;
  width:240px;
  margin:0 auto;
  border-radius: 10px;
}

#aoc .confirm a{
  color: #ffffff;
  display:block;
  padding:15px; 
  text-align:center;  
} 


/*
* Login Form
*/
#loginform {
  margin:0 auto;
  width: 90%;
  margin-top: 3%;
  font-size: 12pt;
}  

#loginform input[type=text],input[type=password]{
  width:100%;
  height:25px;
  margin: 0px 0px 10px 0px;
  background: transparent;
  border:none;
  border-bottom:1px solid #e0e0e0;
  color: #fff;
  font-size:14pt;
  padding: 5px;
} 

#loginform a{
  color: #ffffff;
  text-decoration: none;
  font-size: 12pt;
}  

#loginform .alignright{
  text-align:right;
  padding:5px;
}  

#loginform .aligncenter{
  text-align:center;
  padding:5px;
}

#loginform .aligncenter{
  text-align:center;
  padding:5px;
}  

#loginform .formlabel{
  color: #ffffff;
  font-size: 10pt;
  font-weight:bold;
  font-size:14pt;
  margin: 15px 0px;
}  

#loginform .spaceheight10{
  height:10px;
}  


#loginform .btn_blue{
  background-color: #41C5FF;
  height:35pt;
  font-size:12pt;
  max-width:250px;
  min-width:150px;
  text-align:center;
}