@import "_lams_variables.scss";

/* ==================== COMMON ==================== */
.message {
	padding-bottom: 4px;
}

.private_message {
	font-style: italic;
	background-color: $gray-lightest;
}

.messageFrom {
	font-weight: bold;
}

/* ==================== LEARNING PAGE STYLES ==================== */

#chatContent {
	table-layout: fixed;
	margin-top: 10px;
	border-spacing: 10px;
}

@media (max-width: 768px) {
	#messages {
		height: 100px;
		resize: vertical;
		overflow: auto;
		border: $border-thin-default;
		padding: 2px;
		padding-left:5px;
	}
	
}

@media (min-width: 769px) {
	#messages {
		height: 200px;
		resize: vertical;
		overflow: auto;
		border: $border-thin-default;
		padding: 2px;
		padding-left:5px;
	}

  
}

#roster {
	height: 200px;
	resize: vertical;
	overflow: auto;
	border: $border-thin-default;
	padding: 2px;
}

#roster div {
	margin-right: 5px; 
}	

#roster span {
    display: inline;
	font-size: 14px;
    padding-top: 7px;
    vertical-align: top;
}
	
#sendMessageArea {
	border: $border-thin-default;
	width: 99%;
}

#sendMessageButtonCell {
	text-align: right;
}

#sendMessageButton {
	width: 100%;
}

.selected {
	background-color: $gray-lightest;
	padding: 2px;
	cursor: pointer;
}

.unselected {
	background-color: white;
	padding: 2px;
	cursor: pointer;
}

/* ================== MONITORING ================== */
.edit-pane {
	display: none;;
	border: 1px solid;
	padding: 8px;
}