/* all is based on xs, s, md, l, xl*/
.embeded-video {
	height: 282px;
}

.menu-bar {
	overflow: hidden;
}

.on-page-button .stripes {
	top: 21px;
}

.on-page-button .icon{
	font-size: 27px;
}

.chat-record {
	min-width: 320px;
	width: 100%;
	max-width: calc(100% - 24px);
}

.channel-menu {
	position: relative;
	width: 310px;
	float: left;
	left: 0px;
    background-color: #f8f8f8;
	transition: ease all 0.3s;
}

.channel-menu .menu-flex {
	display: flex;
	flex-direction: row;
}

.channel-menu.closed {
	left: -255px;
	transition: ease all 0.3s;
}

nav,
main {
	left: 55px;
	width: calc(100% - 55px);
	display: block;
	transition: ease all 0.3s;
}


/* expand image icon alaways visible for small displays */ 
.expand-image-icon {
	opacity: 1;
}

	
main.indent,
nav {
	width: calc(100vw - 55px);
}

#app nav {
 /*   background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); */
}

	.article-board-container {
		width: 100%;
		max-width: 100%;
	}



.subnavi {
	width: 100%;
}

.subnavi .sideboard {
	width: 100%;
	margin: 0 auto;
}

.channel-bottom-chatbox,
.stretched-bottom-chatbox{
	width: 100vw;
}

.index-board-wrapper,
.responsive-comment-container {
	width: 100%;
}

#threadbox {
}

.thread-message-container {
	width: calc(100% - 55px);
	right: 0;
}

.articleboard-filter{
	margin-left: -52px;
}

.article-bottom-chatbox{
	width:  100%;
}

.channel-container,
.article-container {
	width: calc(100vw - 75px);
	height: 460px;
}

.card-container {
	width: 100%;
}

.article-board-wrapper, .article-wrapper {
	width: calc(100vw - 55px);
}

.smart-viewport-button {
	display: none;
}

table.channel-table tr.table-row {
	font-size: 12px;
}

.responsive-comment-container .message-container {
	width: 100vw;
}

.responsive-channel-chat-container .message-container {
	width: calc(100vw - 55px);
}

.side-container.article,
.side-container {
	width: 100%;
}

.article-board {
	width: 100%;
}

.record-card-wrapper,
.channel-container,
.article-container {
    width: calc(100% - 30px);
    margin: 0 auto;
}

.message-card-wrapper {
	 margin: 0 auto;
}

.dashboard-thread-container {
	width: calc(100% - 55px);
}

	.responsive-article-container .story {
		height: calc(100% - 81px);
    	min-height: calc(100vh - 81px);
	}	

@media screen and (min-width: 480px) {
	.smart-viewport-button {
		display: inline-block;
	}
}


/*XS Viewport*/
@media screen and (max-width: 599px) {
	.hide-xs, .visible-xl, .visible-l, .visible-md, .visible-s,
		.visible-xl-only, .visible-l-only, .visible-md-only, .visible-s-only {
		display: none;
	}
	.icon-bar {
		min-width: 55px;
		max-width: 55px;
	}
	.icon-bar img {
		width: 35px;
	}
}

/* S Viewport*/
@media screen and (max-width: 600px) {
	.visible-xl, .visible-l, .visible-md, .visible-s {
		display: none;
	}
	.short-article {
		width: calc(100% - 24px);
	}
}

@media screen and (min-width: 600px) {
	.hide-s, .visible-xl-only, .visible-l-only, .visible-md-only,
		.visible-xs-only {
		display: none !important;
	}
	.icon-bar {
		min-width: 70px;
		max-width: 70px;
	}
	.icon-bar img {
		width: 45px;
	}
	.embeded-video {
		/* height: 290px; */
	}
	
	.chat-record {
		max-width: 320px;
		width: 320px;
	}
	
}

/* MD Viewport*/
@media screen and (max-width: 767px) {
	.visible-xl, .visible-l, .visible-md {
		display: none;
	}
}

/* MD Viewport*/
@media screen and (min-width: 768px) {
	.hide-md, .visible-xl-only, .visible-l-only, .visible-s-only,
		.visible-xs-only {
		display: none !important;
	}
	
	.channel-menu.closed {
		left: 0px;
	}
	
	#app main,
	#app nav {
		left: 310px;
		width: calc(100vw - 310px);
	}
	
	
	#app nav {
	    background:none;
	}

	.menu-bar {
		vertical-align: top;
		transition: all ease 0.3s;
	}
	.channel-menu.open {
		right: 0px;
	}
	.article-board-container {
		width: 100vw;
		max-width: 100vw;
	}

	/* md : subtract icon bar and menu from article board*/
	.article-board-wrapper {
		width: calc(100vw - 55px);
	}
	.article-wrapper {
		width: 305px;
	}
	#channel-menu.collapsed {
		width: 55px !important;
	}
	.article-board-right-container {
		min-width: calc(100vw - 395px);
	}
	
	.articleboard-filter{
		margin-left: -55px;
	}
	
	.card-container {
		width: 282px;
	}
	
	
	.chat-container.expand {
		max-width: calc(100vw - 330px);
	}
	.channel-menu {
		top: 0px;
	}
	
		
.channel-menu .menu-flex {
	display: flex;
	flex-direction: row-reverse;
}
	
	
	.dashboard-thread-container {
		width: 312px;
	}
	
	
	#threadbox {
		width: 282px;
	}
	
	.embeded-video {
		/* height: 280px; */
	}
	.channel-data-swipe-container-right {
		width: 320px;
	}
	.article-swipe-container {
		width: calc(100vw - 320px);
	}
		
	.responsive-comment-container .message-container {
		width: 100%;
	}

	.responsive-channel-chat-container .message-container {
		width: 100%;
	}

	.responsive-channel-content-container .article-wrapper {
		width: 425px;
	}
	
	.responsive-channel-content-container {
		margin-left: 0;
	}
	
	.responsive-comment-container {
		width: calc(100vw - 480px);
		
	}
	
	.channel-bottom-chatbox,
	.article-bottom-chatbox{
		width: calc(100vw - 480px);
	}
	
	.side-container {
		max-width: 540px;
		width: 385px;
	}
	
	.side-container.channel,
	.side-container.article {
		max-width: 100%;
	}
	
	.record-card-wrapper,
 	.message-card-wrapper,
 	.channel-container,
	.article-container {
	    width: 282px;
		margin: 12px;
	}

}

/* L Viewport*/
@media screen and (max-width: 1023px) {
	.visible-xl, .visible-l {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.hide-l, .visible-xl-only, .visible-l-only, .visible-md-only,
		.visible-s-only, .visible-xs-only {
		display: none !important;
	}
		
	.menu-bar, .channel-data-container {
		width: 245px;
		max-width: 245px;
	}
	.page-article-container .paragraph .embeded-video {
		height: 330px;
	}
	
	.article-board-right-container {
		min-width: calc(100vw - 737px);
	}
	
	.responsive-comment-container {
		width: calc(100vw - 675px);
	}
		
	.article-bottom-chatbox{
		width:  calc(100vw - 675px);
	}
		
	.responsive-channel-content-container {
		width: 420px;
		/* max-width: 420px; */
	}
	
 	.responsive-article-container {
		width: calc(100vw - 768px);
		flex: auto;
	} 
	
	.responsive-article-container .story {
		height: 100%;
    	min-height: 100vh;
	}	

	.responsive-channel-content-container {
		width: 480px;
	/* 	max-width: 480px; */
		flex: auto !important;
	}
	
	.responsive-channel-content-container .article-wrapper {
		width: 365px;
	}
	
	.channel-data-swipe-container-right {
		width: 320px;
	}
	.article-swipe-container {
		width: calc(100vw - 320px);
	}
	
	table.channel-table tr.table-row {
		font-size: 14px;
	}
	
	.side-container {
		width: 420px;
	}

}

/* XL Viewport*/
@media screen and (max-width: 1279px) {
	.visible-xl {
		display: none;
	}
}

/* XL Viewport*/
@media screen and (min-width: 1280px) {
	#article-swipe-chat-button,
	.hide-xl,
	.visible-xs-only, .visible-s-only, .visible-md-only, .visible-l-only {
		display: none !important;
	}

	.menu-bar, .channel-menu, .channel-data-container {
		width: 310px;
		max-width: 310px;
	}
	.channel-data-swipe-container-right {
		width: 420px;
	}
	.article-swipe-container {
		width: calc(100vw - 420px);
	}
	.short-article {
		max-width: 285px;
		width: 285px;
	}
	
	.expand-image-icon {
		opacity: 0;
	}
	
	.page-article-container .paragraph .embeded-video {
		 height: 360px;
	}
	
	.responsive-comment-container {
		width: calc(100vw - 781px);
	}
	
	.article-bottom-chatbox {
		width: calc(100vw - 780px);
	}
	
	.article-wrapper {
		width: 461px;
	}
	
	.responsive-channel-content-container .article-wrapper {
		width: 465px;
	}
	
	.responsive-channel-container {
		width: calc(100vw - 675px);
	}

	.responsive-article-container {
		width: calc(100vw - 735px);
		flex: auto !important;
	}
	
	.responsive-article-container .article-bottom-button-row{
		display: none;
	}
	
	.side-container.article {
		width: 480px;
	}
}

@media screen and (min-width: 1360px) {
	
	.article-board-right-container {
		min-width: calc(100vw - 1043px);
	}
		
	main.indent .channel-bottom-chatbox{
		width: calc(100vw - 735px);
	}

	main.indent.closed .channel-bottom-chatbox{
		width: calc(100vw - 480px);
	}
	
	main.indent .responsive-channel-container {
		width: calc(100vw - 735px);
	}

	main.indent.closed .responsive-channel-container {
		width: calc(100vw - 480px);
	}
	main.indent.closed .responsive-channel-chat-container {
		width: calc(100vw - 535px);
	}
		
	.responsive-channel-content-container {
		width: 480px;
		/* max-width: 480px; */
	}
	
	.responsive-channel-content-container .article-wrapper {
		width: 425px;
	}
	
	.side-container {
		width: 480px;
	}
	
	.subnavi .sideboard {
		width: 100%;
		margin-left: calc(100vw - 690px);
	}
}

@media screen and (min-width: 1440px) {
	
	.article-wrapper {
		width: 581px;
	}
	
	.article-bottom-chatbox {
		width: calc(100vw - 905px);
	}
	
	.responsive-comment-container {
		width: calc(100vw - 905px);
	}
	
	.responsive-channel-content-container .article-wrapper {
		width: 425px;
	}

}

@media screen and (min-width: 1600px) {
	.channel-data-swipe-container-right {
		width: 560px;
	}
	.article-swipe-container {
		width: calc(100vw - 560px);
	}
	
	.side-container.article {
		width: 640px;
	}
	
	.responsive-article-container {
		width: calc(100vw - 895px);
		max-width: 768px;
	}
	
	.responsive-article-container .article-wrapper {
		width: calc(100vw - 1078px);
		max-width: 713px;
	}
	
	.article-bottom-chatbox{
		width: calc(100vw - 1024px);
	}

	main.indent.closed .article-bottom-chatbox{
		width: calc(100vw - 768px);
	}
	
	main.indent .responsive-comment-container {
    	width: calc(100vw - 1024px);
	}

	main.indent.closed .responsive-comment-container {
	    width: calc(100vw - 768px);
	}

	main.indent .channel-bottom-chatbox{
		width: calc(100vw - 795px);
	}
	
	main.indent.closed .channel-bottom-chatbox{
		width: calc(100vw - 540px);
	}
	
	main.indent .responsive-channel-container {
		width: calc(100vw - 795px);
	}
	
	.responsive-channel-content-container {
		width: 540px;
	    /* max-width: 540px; */
	}
	
	.responsive-channel-content-container .article-wrapper {
		width: 485px;
	}
	
		.side-container {
		width: 540px;
	}
}

@media screen and (min-width: 1920px) {
	.article-board-right-container {
		min-width: calc(100vw -  1378px);
	}
	.channel-data-swipe-container-right {
		width: 640px;
	}
	.article-swipe-container {
		width: calc(100vw - 640px);
	}
}