/* scroll --------------------
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
*/
html.freebsd body,
html.linux body,
html.windows body,
html.mac body {
	overflow-y:auto;
}
html.mac :not(.resize)::-webkit-scrollbar-track,
html.linux :not(.resize)::-webkit-scrollbar-track,
html.freebsd :not(.resize)::-webkit-scrollbar-track,
html.windows :not(.resize)::-webkit-scrollbar-track { 
	background-color:#262626;
}
html.mac :not(.resize)::-webkit-scrollbar-thumb,
html.linux :not(.resize)::-webkit-scrollbar-thumb,
html.freebsd :not(.resize)::-webkit-scrollbar-thumb,
html.windows :not(.resize)::-webkit-scrollbar-thumb { 
	background-color:#ffcb17;
	background-image:url('/assets/images/scrollbar.png'); 
	background-position:center; 
	background-repeat:no-repeat; 
}
html.mac :not(.resize)::-webkit-scrollbar,
html.linux :not(.resize)::-webkit-scrollbar,
html.freebsd :not(.resize)::-webkit-scrollbar,
html.windows :not(.resize)::-webkit-scrollbar { 
	width: 3px;
	height:3px;
}
html.mac body::-webkit-scrollbar,
html.linux body::-webkit-scrollbar,
html.freebsd body::-webkit-scrollbar,
html.windows body::-webkit-scrollbar { 
	width: 5px!important;
}

/* имитация прокрутки для режима без скрола */
@media screen and (min-width: 1025px) {
	html.mac.no-scroll.no-scroll-track,
	html.windows.no-scroll.no-scroll-track,
	html.linux.no-scroll.no-scroll-track,
	html.freebsd.no-scroll.no-scroll-track {
		border-right:5px solid #262626;
	}
	html.mac.no-scroll.no-scroll-track body:not(.no-adaptive) .header,
	html.windows.no-scroll.no-scroll-track body:not(.no-adaptive) .header,
	html.linux.no-scroll.no-scroll-track body:not(.no-adaptive) .header,
	html.freebsd.no-scroll.no-scroll-track body:not(.no-adaptive) .header {
		border-right:5px solid #262626;
	}
}


html {
	--mode: default;
	--userlist-height: 55px;
	--chatlist-height: 200px;
	--playerPage-minHeight: 200px;
	--userlist-spacer-height: 0px;
}

html, body {
	min-width: 300px;
}

.bg-color {
	background-color: #34495E!important;
}

.video-wrap {
    overflow: unset;
    max-width: none;
    position: relative;
    width: 100%!important;
    height: auto!important;
    overflow: hidden;
    margin-bottom: 5px;
}
.video-wrap-16x9 .video-wrap-proportion {
    padding-bottom: 56.25%;
}
.video-wrap .video-wrap-proportion {
    display: block;
}
.video-wrap-proportion {
	position: relative;
}
.video-wrap canvas, .video-wrap iframe, .video-wrap img, .video-wrap object, .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}

.border-top {
	border-top: 1px solid #495C6E!important;
}
.border-bottom {
	border-bottom: 1px solid #495C6E!important;
}

.player-userlist {
	height: var(--userlist-height);
	margin-bottom:5px;
}
#playerUserList1 {
	display: block;
}
#playerUserList1-spacer {
	display: none;
}
#playerUserList2 {
	display: none;
}
.player-buttonlist {
	min-height: 70px;
	padding: 15px !important;
}
#playerButtonList1 {
	display: none;
}
#playerButtonList2 {
	display: block;
}
#chatlist {
	height: var(--chatlist-height);
}
#chatlist-controls {
	min-height: 70px;
	padding: 10px;
}
.control-chat {
	display: none;
}

.ant-user {
    width: 35px;
    height: 35px;
    line-height:35px;
    border-radius: 50%;
    margin-right:7px;
    margin-left:7px;
    margin-top:5px;
    margin-bottom:5px;
    opacity:0.5;
    background-color:#495C6E!important;
}
.ant-user.active {
    width: 45px;
    height: 45px;
    line-height:45px;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:2px;
    margin-left:2px;
    opacity:1;
}

.ant-user .ant-avatar-string {	
	transform: scale(1) translateX(-50%);
}

#playerPage {
	padding:15px;
	height:100%;
	min-height:var(--playerPage-minHeight);
}
.fullscreen #playerPage {
	padding:50px;
}
.playerContent-rowBottom {
	height:70px;
}
.playerContent-columnLeft,
.playerContent-columnRight {
	vertical-align: top;
}
.playerContent-columnLeft {
	width:70%;
	padding-right:3px;
}
.playerContent-columnRight {
	width:30%;
	min-width:400px;
	padding-left:3px;
}



@media (max-width: 991px) {
	html {
		--mode: default-md;
		--playerUserList1-top: 285px;
		--playerButtonList2-top: 350px;
	}

	#playerPage {
		padding:5px;
	}
	.playerContent-columnLeft,
	.playerContent-columnRight {
		width:50%;
	}
	.playerContent-columnRight {
		min-width:auto;
	}
}
@media (orientation: landscape) and (max-height: 450px) {
	html {
		--mode: landscape-maxh450;
		--playerUserList1-top: 285px;
		--playerButtonList2-top: 350px;
	}

	#playerPage {
		padding:2px 5px 0;
	}
	.playerContent-columnLeft,
	.playerContent-columnRight {
		width:50%;
	}
	.playerContent-columnLeft {
		padding-right:1px;
	}
	.playerContent-columnRight {
		padding-left:1px;
	}
	.playerContent-columnRight {
		min-width:auto;
	}
	.video-wrap {
		margin-bottom: 2px;
	}
	html:not(.mainvideoonly) .control-chat {
		display: initial;
	}
	.control-fullscreen {
		display: none;
	}
	html:not(.mainvideoonly) #chatlist,
	html:not(.mainvideoonly) #chatlist-controls {
		display:none;
	}
	#chatlist-controls {
		min-height:60px;
		padding:5px 10px;
	}
	html.mainvideoonly #playerUserList1 {
		margin-bottom: 2px;
	}
	html:not(.mainvideoonly) #playerUserList1 {
		display:block;
		position: absolute;
		width: calc(100% - 10px);
		z-index:1;
	}
	html:not(.mainvideoonly) #playerUserList1-spacer {
		display: block;
		height: var(--userlist-spacer-height);
	}
	#playerUserList2 {
		display:none;
	}
	.playerContent-rowBottom {
		height:60px;
	}
	.player-buttonlist {
		min-height: 60px;
		padding: 10px !important;
	}
	html.mainvideoonly .player-buttonlist-right {
		display: none;
	}
	#playerButtonList1 {
		display:none;
	}
	html:not(.mainvideoonly) #playerButtonList2 {
		display:block;
		position: absolute;
		width: calc(100% - 10px);
		z-index:1;
	}

	html.inchat #chatlist {
		display: block;
		position:absolute;
		top: 64px;
		right: 5px;
		width: calc(100% - 10px);
		height: calc(100% - 124px);
		z-index:2;
	}
	html.inchat #chatlist-controls {
		display: block;
		position:absolute;
		bottom: 0;
		right: 5px;
		width: calc(100% - 10px);
		z-index:2;
	}
	html.inchat #playerButtonList2 {
		position: absolute;
		width: calc(100% - 10px);
		top: 2px;
		bottom: auto;
		border-bottom:2px solid #2b3e4f;
	}
}
@media (orientation: portrait) and (max-width: 767px) {
	html {
		--mode: portrait-md;
	}

	#playerPage {
		padding:0px;
	}
	#playerContent > .table-tr > .table-td,
	#playerContent > .table-tr,
	#playerContent {
		display: block;
		width: 100% !important;
		max-width: initial;
	}
	.playerContent-columnLeft {
		padding-right:0;
	}
	.playerContent-columnRight {
		min-width:auto;
		padding-left:0;
	}
	.video-wrap {
		margin-bottom: 2px;
	}
	.control-chat {
		display: initial;
	}
	.control-fullscreen {
		display: none;
	}
	.player-userlist {
		margin-bottom: 2px;
	}
	#playerUserList1 {
		display: none;
	}
	#playerUserList2 {
		display: block;
	}
	.player-buttonlist {
		min-height: 60px;
		padding: 10px !important;
	}
	#playerButtonList1 {
		display: block;
	}
	#playerButtonList2 {
		display: none;
	}
	#chatlist,
	#chatlist-controls {
		display:none;
	}
	#playerPage {
		height: auto;
	}
	#playerContent .playerContent-rowBottom {
		display: none;
	}

	.inchat #playerPage {
		height: 100%;
	}
	.inchat .video-wrap {
		display: none;
	}
	.inchat #playerUserList1,
	.inchat #playerUserList2 {
		display: none;
	}
	.inchat #playerButtonList1 {
		display: block;
		position: absolute;
		width: 100%;
		top: 0;
		bottom: auto;
		border-bottom:2px solid #2b3e4f;
		z-index:2;
	}
	.inchat #chatlist {
		display: block;
		position:absolute;
		top: 62px;
		right: 0;
		width: 100%;
		height: calc(100% - 132px);
		z-index:2;
	}
	.inchat #playerContent .playerContent-rowBottom {
		display: block;
	}
	.inchat #playerContent .playerContent-rowBottom .playerContent-columnLeft {
		display: none;
	}
	.inchat #chatlist-controls {
		display: block;
		position:absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		z-index:2;
	}
}