a{
	text-decoration: none;
}


.channel-type-icon{
    font-size: 18px;
    padding-top: 3px;
    color: #cccfd1;
    margin-right: 15px;
    position: absolute;
    right: 0;
    align-self: center;
    display: block;
}

.channelfilter:hover .channel-type-icon.update,
.channel-type-icon.update {
	   color: #ff0075;
}

.menu-group i.update {
	width: 12px;
    height: 12px;
    border: 2px solid #2b2d2f;
    border-radius: 6px;
    background-color: #ff0075;
    right: 15px;
    top: 15px;
}

.share-headline{
	color: #0095ff;
}
 
.channelfilter:hover{
	color: #0095ff;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.5);
}

.channelfilter.current,
.channelfilter:hover {
    background-color: #2b2d2f;
}

.channelfilter.current {
	color: #ffffff;
	border-left: 3px solid #0095ff;
}

.channelfilter.current:hover .channel-name{
		color: #ffffff;
}

.channelfilter:hover .channel-type-icon {
	color: #1b1d1f;
}

.channelfilter:hover img{
	 box-shadow: none;
}

a .channel-name:hover{
	color: #003a63;
}

#channelfilter-container{
	overflow: hidden;
    height: 100%;
}



#channelfilterlist {
    overflow-y: auto;
    height: calc(100vh - 32px);
}

.channel-body #channelfilterlist {
    height: calc(100vh - 87px);
}


#channelfilterlist::-webkit-scrollbar-track {
    background: #f8f8f8; 
}

/* Handle */
#channelfilterlist::-webkit-scrollbar-thumb {
    background: #efefef; 
}

/* Handle on hover */
#channelfilterlist::-webkit-scrollbar-thumb:hover {
    background: #cccccc; 
} 

.channelfilter{
    font-family: 'dracula-Montserrat', 'Montserrat';
    color: #333333;
    cursor: pointer;
    padding-left: 21px;
    font-size: 14px;
}

.channelfilter img{
	max-width: 30px;
	border-radius: 3px;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.5);
}

.channelfilter button.unsubscribe {
    position: absolute;
    right: 15px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: rgba(243, 243, 244, 0.3);
    top: 9px;
    color: #1b1d1f;
 	display:none;
}

.channelfilter:hover button.unsubscribe {
 	display:inline;
}
.channelfilter:hover button.unsubscribe:hover {
	color: #0095ff;
 	display:inline;
}

.channel-selected-wrapper{
    justify-content: flex-start;
    background-color: #0095ff;
    transition: width ease .3s;
}

.channel-selected-parent{
	font-family: 'dracula-Montserrat';
	color: #0095ff;
	background-color: #ffffff;
    position: absolute;
    left: 0;
   	transition: .5s;
	 -webkit-transition: .5s;
    z-index: 1;
    text-align: right;
    box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.5);
    float: left;
    padding: 9px 15px;
    top: -3px;
    cursor: pointer;
}

.channel-selected-parent:hover{
	 transition: 1s;
	 -webkit-transition: 1s;
	 transition-delay: .5s;
	width: 80%;
	background-color: #003a63;
}

a .channel-selected-parent:hover .channel-name{
	 color: #0095ff;
	 	 transition: 2s;
	 -webkit-transition: 2s;
	 transition-delay: .5s;
}

.channel-selected{
   	font-family: 'dracula-Montserrat', 'Montserrat';
   	color: #0095ff;
   	font-size: 14px;
	text-align: right;
	display: block;
	padding: 9px 15px;
}


.channelfilter a:focus .channel-name,
.channelfilter:hover .channel-name{
	color: #0095ff;
}

.channelfilter.selected{
	    background-color: #0095ff;
}


#channelsearch{
	color: #cccccc;
    white-space: nowrap;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#channelsearch .icon-search{
	white-space: nowrap;
}

#channelsearch .reset-search{
    padding: 4px 7px;
    font-size: 18px;
    color: #0095ff;
    cursor: pointer;
}

#channel-controls{
	white-space: nowrap;
}

.channel-control{
	color: #cceaff;
	cursor: pointer;
    font-size: 21px;
    transition: color ease-in 0.3s;
}

.channel-control:hover{
	color: #0095ff;
	transition: color ease-in 0.3s;
}

.channel-control.icon-block-channel,
.channel-control.icon-block-channel:hover{
	padding-left: 13px;
}

.channel-menu-collapse{
    min-height: 30px;
    position: relative;
    font-family: 'dracula-Montserrat', 'Montserrat';
    color: #bdbdbd;
    cursor: pointer;
    font-size: 27px;
    padding: 9px;
    vertical-align: middle;
    text-align: center;
}

#channel-spyglass{
	font-size: 24px;
   	padding: 9px;
    text-align: center;
    cursor: pointer;
}


#channel-menu.collapsed #input-channel-search,
#channel-menu.collapsed .channelfilter .channel-name,
#channel-menu.collapsed .channelfilter .channel-type-icon,
#channel-menu.collapsed .channel-selected .channel-name {
			
}

@media screen and (min-width: 768px){

	#channel-menu.collapsed #input-channel-search,
	#channel-menu.collapsed .channelfilter .channel-name,
	#channel-menu.collapsed .channelfilter .channel-type-icon,
	#channel-menu.collapsed .channel-selected .channel-name {
		display: none;			
	}
	
	#channel-menu.collapsed .channelfilter .new-message {
		position: absolute;
		top: 15px;
		left: 3px;
	}
}

.sharebox{
	padding-left: 30px;
	padding-right: 15px;
	margin: 0 auto;
    max-width: 720px;
}

.sharefield {
	font-family: 'dracula-Montserrat', 'Montserrat';
    background-color: #ffffff;
    border: none;
    padding: 12px;
    outline: none;
    word-break: break-word;
    white-space: pre-wrap;
    width: 100%;
}

.share-user-preview-image,
.share-preview-image{
	height: 90px;
    width: 90px;
    border-radius: 6px;
    outline: none;
    color: #333333;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    margin: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: default;
}


.share-remove-image-button {
	font-size: 21px;
    color: #ffffff;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.7);
    text-align: center;
    display: inline-block;
    position: relative;
    left: 69px;
    cursor: pointer;
    transition: color ease 0.2s;
}

.share-remove-image-button:hover {
	color: #ffffff;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 1);
}

.share-gradient {
	background: linear-gradient(to bottom, rgba(255,255,255, 0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, */
	padding: 9px 12px;
    width: 100%;
    height: 100%;
}


#share-textarea {
    padding-top: 9px;
	padding-right: 36px;
    padding-bottom: 9px;
    padding-left: 12px;
}


.share-enabler {
    right: 6px;
}

#share-trigger-message-box{
	background-color: white;
    width: 100%;
    height: 106px;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.3);
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    font-family: 'dracula-Montserrat', 'Montserrat';
    font-size: 14px;
    color: #cccccc;
    cursor: pointer;
}

.sharebox .text-area-arrow-wrapper:after, .sharebox .text-area-arrow-wrapper:before {
    top: 92px;
}


/* 
 * commenting
 */
 
#comment-textarea-container {
	border-radius: 9px;
	height: 69px;
    border: none;
    box-shadow: 0 3px 9px -3px rgb(43, 45, 47, 0.3);
    transition: all ease 0.3s;
}


.commentbox textarea,
.commentbox textarea:FOCUS{
    background: none;
    border-radius: 0;
    border: none;
    display: block;
    height: 69px;
    box-shadow: none;
    outline: none;
    padding: 9px;
    position: relative;
    width: 100%;
}

.commentbox .submit-button {
	background-color: rgba(255, 255, 255, 0);
    color: #f8f8f8;
    z-index: 1;
    font-size: 24px;
    cursor: default;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*
    on scroll timeline: box-shadow: 0 3px 12px -3px rgba(0, 0, 0, 0.3)
    */
}

.commentbox .send-image {
	border-radius: 6px;
    outline: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.5);
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    cursor: default;
    z-index: 1;
    width: 54px;
    height: 54px;
    right: 81px;
    margin: 9px;
}

.commentbox .send-image .remove-send-image {
    font-size: 39px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: color ease 0.2s;
}

.commentbox .send-image .remove-send-image:hover {
    color: #ffffff;
}

.commentbox .text-area-arrow-wrapper {
    width: 100%;
    position: relative;
}

threadbox . {}

.commentbox .text-area-arrow-wrapper:after, .commentbox .text-area-arrow-wrapper:before {
    bottom: 3px;
}

textarea.plain {
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: hidden;
}

.fs-blend-dark {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0px;
    left: 0px;
}

/* CHANNELS TABLE */
.channel-table {
	
}


table.channel-table thead tr {
	height: 36px;
	background-color: #fafafa;
}

table.channel-table thead tr th {
	padding: 6px;
	margin-bottom: 6px;
}

table.channel-table tr th{
	font-weight: 400;
}

table.channel-table tbody {
	border-top: 2px solid #0095ff;
	    box-shadow: 6px 0px 12px -6px #2b2c2f2c, -6px 0px 12px -6px #2b2c2f2c;
}

table.channel-table tr.table-row {
	height: 55px;
	background-color: #fdfdfd;
	border-bottom: 1px solid #f8f8f8;
	transition: all ease 0.3s;
	cursor: pointer;
}

table.channel-table tr.table-row:nth-child(even) {
	background-color: #fafafa;
}

table.channel-table tr.table-row:last-child {
	border: none !important;
}

table.channel-table tr.table-row:hover {
	background-color: #f8f8f8;
	z-index: 1;
}

table.channel-table tr.table-row td {
		padding: 9px;
	    max-width: 640px;
}

.business-channel-icon {
	font-size: 18px;
	color: #cccccc;
}

.business-channel-icon.update {
	color: #ff0045;
}

.responsive-channel-chat-container {
	flex-grow: 1;
}


/* CARD STUFF*/
.card-container {
 /*    box-shadow: 0 6px 9px -3px rgb(43, 45, 47, 0.7); */
    box-shadow:0 3px 6px -3px rgba(43, 45, 47, 0.3);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all ease 0.3s;
    cursor: pointer;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    background-color: #434950;
    transition: all 0.3s;
    border-radius: 9px;
}

.card-container.message {
	background-color: #ffffff;
}

.card-icon {
    text-align: center;
    font-size: 150px;
    padding: 30px;
    color: #2b2d2f;
}

.card-container.message .card-icon {
 color: #ebedef;
}

.card-image {
	background-size: cover;
    background-position: center;
   transition: all 0.7s ease;
}

.card-container:hover .card-image {
	transform: scale(1.1);
}

.card-gradient {
  	background: linear-gradient(rgba(0,0,0,0.0) 50%,rgba(43, 45, 47) 100%);
}

.card-container.message .card-gradient {
/*	background: linear-gradient(rgba(0,0,0,0.0) 50%,rgba(203, 205, 207) 100%); */
	background: none;
}


.card-text {
	color: #ffffff;
	line-height: 18px;
	text-shadow: 1px 1px 2px #000000;
}

.card-container.message h2 {
	color: #0095ff;
	margin: 0;
	font-weight: 400;
	line-height: 12px;
}

.card-container.message .card-text {
	color: #2b2d2f;
	text-shadow: 1px 1px 2px #ffffff;
	font-weight: 400;
}

.card-container.message .message-time {
    padding: 0;
    font-size: 12px;
    position: relative;
    font-family: 'Montserrat';
    font-weight: 500;
    color: #cccccc;
}

.card-channel-image {
    display: block;
    top: 15px;
    left: 15px;
    overflow: hidden;
}

.giphy {
	width: 45px;
}

.giphy.open {
	width: 100%;
}

input.giphy-search:hover,
input.giphy-search:focus,
input.giphy-search {
    margin: 0;
    box-shadow: none;
    padding: 9px;
    border: none;
    background-color: #f8f8f8;
    height: 36px;
    border-radius: 18px;
    width: 100%;
}