@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	font: 14px/18px 'PT Sans', 'PTSansWeb', Arial,Sans-Serif;
	color: #000;
	position: relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
@media handheld { width: 300px; }

html, body, .app{
	height: 100%;
	width: 100%;
	background-color: var(--bg);
    color: #efeff1;
}
a{
	color: #04fcec;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
b{
	font-weight: bold;
}

/* Color pallet */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --block: #1d2333;
    --bg: #151a27;
    --hover-block: #293249;
    --separator: rgba(255, 255, 255, 0.1);

    --twitch: rgba(123, 93, 255, 1);
    --twitch-hover: rgba(123, 93, 255, 0.5);
    --youtube: rgba(253, 67, 79, 1);
    --youtube-hover: rgba(253, 67, 79, 0.5);
    --goodgame: rgba(35, 48, 86, 1);
    --goodgame-hover: rgba(35, 48, 86, 0.5);
    --trovo: rgba(25, 214, 107, 1);
    --trovo-hover: rgba(25, 214, 107, 0.5);
    --wasd: rgba(37, 143, 229, 1);
    --wasd-hover: rgba(37, 143, 229, 0.5);
    --boosty: rgba(241, 95, 44, 1);
    --boosty-hover: rgba(241, 95, 44, 0.5);
    --discord: rgba(88, 101, 242, 1);
    --discord-hover: rgba(88, 101, 242, 0.5);
    --coub: rgba(3, 50, 255, 1);
    --coub-hover: rgba(3, 50, 255, 0.5);
    --donationalerts: rgba(245, 119, 7, 1);
    --donationalerts-hover: rgba(245, 119, 7, 0.5);
    --facebook: rgba(57, 86, 147, 1);
    --facebook-hover: rgba(57, 86, 147, 0.5);
    --twitter: rgba(29, 155, 240, 1);
    --twitter-hover: rgba(29, 155, 240, 0.5);
    --vkontakte: rgba(0, 119, 255, 1);
    --vkontakte-hover: rgba(0, 119, 255, 0.5);
    --patreon: rgba(255, 89, 0, 1);
    --patreon-hover: rgba(255, 89, 0, 0.5);
    --onlyfans: rgba(0, 175, 240, 1);
    --onlyfans-hover: rgba(0, 175, 240, 0.5);
    --instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    --instagram-hover: rgba(214, 36, 159, 0.5);
 }

/* 
=============================
==== INPUTS ================= 
=============================
*/
input[type=password], input[type=text], select, textarea {
    background-color: var(--bg);
    border: 1px solid #3f485f;
    color: #fff;
    padding: 10px 18px;
    /*height: 38px;*/
    border-radius: 6px;
    width: 300px;
    box-sizing: border-box;
    line-height: 16px;
}
input[type=password]:focus, 
input[type=text]:focus, 
select:focus, 
textarea:focus{
    outline: none !important;
    border-color: #4ff461;
}
input.error:focus{
    outline: none !important;
    border-color: var(--blue);
}
.input-block{
	position: relative;
    max-width: 300px;
    width: 300px;
    margin-bottom: 20px;
    display: inline-block;
    margin-right: 20px;	
}
.input-block input{
	width: 100%;
	box-sizing: border-box;
}
.input-block.label-icon input{
	padding-left: 45px;
}
.input-block.label-icon div[class^='button-']{
	position: absolute;
    left: 0px;
    top: 4px;
}
.input-block.label-icon label{
	position: absolute;
    left: 42px;
    top: -12px;
    font-size: .75rem;
    color: #9aa4bf;
    padding: 3px;
    background-color: var(--bg);
    border-radius: 5px;
}

.input-block label{
    position: absolute;
    left: 15px;
    top: -9px;
    font-size: .75rem;
    color: #9aa4bf;
    padding: 0 3px;
    background-color: var(--bg);
    border-radius: 5px;
}
.input-block .length{
    padding: 0 5px;
}

.separator{
	background: var(--separator);
}

.logo{
	display: inline-block;/*
	font-family: Titillium Web, sans-serif;*/
	/*font-family: 'Anton', sans-serif;*/
	font-family: 'Teko', sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
}
.logo a{
	color: #fff;
}
.logo span{
	color: var(--primary);
}

.sidebar-right{
	width: 340px;
	height: 100%;
	display: inline-block;
	position: fixed;
	top: 0;
	right: 0;
	background-color: var(--block);
}
.sidebar-right .chat{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.wrapper{
	width: calc(100% - 560px);
	padding: 0 340px 0 220px;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper.no-bar-left{
	width: calc(100% - 390px);
	padding: 0 340px 0 50px;
}
.wrapper .content{
	padding-top: 0;
}

.player {
	position: relative;
	top: 0;
	padding-bottom: 56.25%; 
	background-color: var(--gray-dark);
}
.player iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.description{
	margin: 10px;
	width: cacl(100% - 20px);
	box-sizing: border-box;
	/* background-color: #241c2c; */
	padding: 10px;
	border-radius: 10px;
	position: relative;
}
.description .info,
.description .controlls{
	display: inline-block;
	width: 100%;
}
.description .controlls .viewers{
	display: inline-block;
}
.description .controlls .player-switch{
	display: inline-block;
	float: right;
}
.description .controlls .btn-follow{
	margin-right: 10px;
}
.description .controlls .btn-follow i{
	float: left;
    transform: scale(0.7);
    margin-top: 4px;
    margin-right: 5px;
    margin-left: -3px;
}

.description .info .name{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
	color: var(--light);
}
.description .info .title{
	color: var(--secondary);
	text-transform: uppercase;
	font-size: 12px;
}
.description .info .category{
	width: 45px;
	height: 60px;
	display: inline-block;
	float: left;
	margin-right: 10px;
	border-radius: 5px;
}
.description .controlls{
	width: fit-content;
	position: absolute;
	right: 10px;
	top: 10px;
}
select.player-select{
    border-radius: 5px;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    color: #efeff1;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    width: auto;
}
.description .tags a{
	color: var(--light);
}
.description .tags .tag{
	padding: 2px 5px;
	font-size: 10px;
	background-color: var(--gray-dark);
	border-radius: 5px;
}
.description .viewers{
	color: var(--red);
	font-weight: 600;
	line-height: 35px;
	font-size: 15px;
}
.description .viewers i{
	margin-bottom: -1px;
	margin-right: 3px;
}
.description .stats{
	text-align: right;
}
.description .stats div{
	display: inline-block;
	margin-left: 5px;
}
.description .stats .timer{
	vertical-align: text-bottom;
}

.channel-header{
	margin: 10px;
	width: calc(100% - 20px);
	box-sizing: border-box;
	background-color: var(--block);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.channel-header .channel-header-bg{
	width: 100%;
	height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.channel-header .channel-header-bg.placeholder{
	background-repeat: repeat;
}
.channel-logo{
	position: absolute;
    width: 110px;
    height: 110px;
    border: 5px solid var(--block);
    background-color: var(--block);
    border-radius: 15px;
    overflow: hidden;
    bottom: 10px;
    left: 10px;
}
.channel-header img{
	width: inherit;
	height: inherit;
	border-radius: 10px;
}

.channel-header .description{
	height: 60px;
	padding-left: 130px;
	padding-top: 5px;
	overflow: hidden;
	line-height: 21px;
}
.channel-header .description .name{
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 5px;
	color: var(--light);
}
.channel-header .description .title{
	color: var(--secondary);
	text-transform: uppercase;
	font-size: 12px;
}

.channel-header .stats{
	position: absolute;
	right: 20px;
	bottom: 8px;
	background-color: var(--block);
	line-height: initial;
}

.channel-header .stats .block{
	width: fit-content;
	display: inline-block;
	text-align: center;
	padding: 10px;
}
.channel-header .stats .block .count{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
	color: var(--light);
}
.channel-header .stats .block .title{
	font-size: 10px;
	color: var(--secondary);
	padding: 0;
}
.channel-header .stats .separator{
    height: 30px;
    display: inline-block;
    width: 1px;
}

.footer{
	width: 100%;
	height: 50px;
}

.socials{
	position: absolute;
	top: 10px;
	right: 10px;
}

.button-little{
	width: 30px;
	height: 30px;
	cursor: pointer;
	line-height: 30px;
	text-align: center;
	border-radius: 5px;
	display: inline-block;
	justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-bottom: 5px;
}
.button-little a{
	display: inline-block;
	width: 100%;
	height: 100%;
	justify-content: center;
    align-items: center;
}
.button-little.instagram{
	background-color: rgba(214, 36, 159, 1);
  	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.button-little.instagram:hover{ box-shadow: 0 0 10px 0 rgba(214, 36, 159, 0.5) }
.button-little.twitch{ background-color: #7b5dfa }
.button-little.twitch:hover{ box-shadow: 0 0 10px 0 rgba(123, 93, 255, 0.5) }
.button-little.youtube{ background-color: #fd434f }
.button-little.youtube:hover{ box-shadow: 0 0 10px 0 rgba(253, 67, 79, 0.5) }
.button-little.goodgame{ background-color: rgba(35, 48, 86, 1) }
.button-little.goodgame:hover{ box-shadow: 0 0 10px 0 rgba(35, 48, 86, 0.5) }
.button-little.trovo{ background-color: rgba(25, 214, 107, 1) }
.button-little.trovo:hover{ box-shadow: 0 0 10px 0 rgba(25, 214, 107, 0.5) }
.button-little.wasd{ background-color: rgba(37, 143, 229, 1) }
.button-little.wasd:hover{ box-shadow: 0 0 10px 0 rgba(37, 143, 229, 0.5) }
.button-little.boosty{ background-color: rgba(241, 95, 44, 1) }
.button-little.boosty:hover{ box-shadow: 0 0 10px 0 rgba(241, 95, 44, 0.5) }
.button-little.discord{ background-color: rgba(88, 101, 242, 1) }
.button-little.discord:hover{ box-shadow: 0 0 10px 0 rgba(88, 101, 242, 0.5) }
.button-little.coub{ background-color: rgba(3, 50, 255, 1) }
.button-little.coub:hover{ box-shadow: 0 0 10px 0 rgba(3, 50, 255, 0.5) }
.button-little.donationalerts{ background-color: rgba(245, 119, 7, 1) }
.button-little.donationalerts:hover{ box-shadow: 0 0 10px 0 rgba(245, 119, 7, 0.5) }
.button-little.facebook{ background-color: rgba(57, 86, 147, 1) }
.button-little.facebook:hover{ box-shadow: 0 0 10px 0 rgba(57, 86, 147, 0.5) }
.button-little.twitter{ background-color: rgba(29, 155, 240, 1) }
.button-little.twitter:hover{ box-shadow: 0 0 10px 0 rgba(29, 155, 240, 0.5) }
.button-little.vkontakte{ background-color: rgba(0, 119, 255, 1) }
.button-little.vkontakte:hover{ box-shadow: 0 0 10px 0 rgba(0, 119, 255, 0.5) }
.button-little.patreon{ background-color: rgba(255, 89, 0, 1) }
.button-little.patreon:hover{ box-shadow: 0 0 10px 0 rgba(255, 89, 0, 0.5) }
.button-little.onlyfans{ background-color: rgba(0, 175, 240, 1) }
.button-little.onlyfans:hover{ box-shadow: 0 0 10px 0 rgba(0, 175, 240, 0.5) }

.index{
	width: calc(100% - 240px);
	padding: 0 0px 0 220px;
}	

/* 
=============================
==== LISTS ================== 
=============================
*/

.content .block{
	padding: 10px;
}
.block .title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
.list.streams .item{
	width: 300px;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
}
.list.streams .item .name{
	font-weight: bold;
}
.list.streams .item .desc{
	overflow: hidden;
	height: 20px; 
}
.item a{
	color: #fff;
}
.item .preview{
	width: 300px;
	height: 170px;
	display: block;
	margin-bottom: 10px;
	border-radius: 10px;
	position: relative;
}
.item .preview img{
	width: 300px;
	height: 170px;
	border-radius: 10px;
}
.item .avatar{
	width: 35px;
	height: 35px;
	float: left;
	margin-right: 10px;
	border-radius: 10px;
}

.item .online{
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 0 5px;
	border-radius: 5px;
	background-color: #eb0400;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
}
.item .viewers{
	position: absolute;
	bottom: 7px;
	left: 7px;
	padding: 0 5px;
	border-radius: 5px;
	background-color: #eb0400;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.5);
}

.list.users .item{

	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
}
.list.users .avatar{
	width: 100px;
	height: 100px;
	float: left;
	margin-right: 10px;
	border-radius: 10px;
}

.list.users .item .name{
    font-weight: normal;
    font-size: 13px;
    line-height: 30px;
}



/*
	
	BUTTONS

*/

div[class^='btn-'],
input[class^='btn-']{
    display: inline-block;
    border-radius: 5px;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    color: #efeff1;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    line-height: 30px;
    user-select: none;
}
div[class^='btn-']:hover,
input[class^='btn-']:hover  {  }
div[class^='btn-']:focus,
input[class^='btn-']:focus  { background: var(--red); }
div[class^='btn-']:active,
input[class^='btn-']:active { background: var(--red); }
div[class^='btn-block-'],
input[class^='btn-block-']  { display: block; }
div[class^='btn-'].disabled,
input[class^='btn-block-'].disabled{ 
	background: var(--gray-dark);
	color: var(--gray);
}
div[class^='btn-'] a,
input[class^='btn-'] a{ color: #fff }


/* COLORS */

.c-disabled{ background-color: var(--gray-dark) }
.c-default{ background-color: var(--purple) }
.c-twitch{ background-color: var(--twitch) }
.c-twitch:hover{ background-color: var(--twitch-hover) }
.c-trovo{ background-color: var(--trovo) }



/*
	SECTION
*/

.section-1{
	box-sizing: border-box;
	padding: 20px;
	width: 400px;
	margin: 0 auto;
}

.section-1 div[class^='btn-']{
	width: inherit;
	margin-bottom: 10px;
}
.section-1 div[class^='btn-'] div{
    display: inline-block;
    text-align: center;
    width: calc(100% - 30px);
}

/*
	
	SELECT
	https://codepen.io/n1ghtman/pen/KMRgQp
	https://codepen.io/vkjgr/pen/VYMeXp?editors=1100
*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--green);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.clear{
	clear: both;
    display: block;
}