@import "_lams_variables.scss";
	
html, body {
	height: 100%;
}

.errorMessage {
	display: none;
	margin-left: 5px;
}

div#titleDiv {
	padding: 5px 0 0 5px;
}

div#titleDiv input {
	margin-left: 10px;
	width: 290px;
}

div#titleDiv button {
	margin-right: 10px;
}

#titleInstructions {
	text-align: center;
	margin-top: 7px;
	border-bottom: $border-thin-dotted;
}

table#groupsTable {
	height: 420px; // do not use calc(100% - XXpx) but fix it so that iPad does not shift lengths when accordians are opened
}
table#groupsTable td {
	vertical-align: top;
	padding: 5px;
}

td#unassignedUserCell {
	width: 240px;
	border-right: $border-thin-dotted;
}

#groupTemplate {
	display: none;
}

#newGroupPlaceholder {
	border: $border-thin-dotted;
	cursor: pointer;
}

#newGroupPlaceholder > div {
	text-align: center;
	margin: 60px 5px 0 5px;
}

.groupContainer {
	float: left;
	width: 200px;
	height: 150px;
	margin: 0 10px 10px 0;
	padding: 5px;
	border: $border-thin-dotted;
}

.userContainerTitle {
	font-weight: bold;
	text-align: center;
}

.sortUsersButton {
	float: right;
	cursor: pointer;
}

.removeGroupButton {
	float: left;
	cursor: pointer;
}

.userContainer {
	overflow: auto;
	height: 109px;
	margin-top: 5px;
}

td#unassignedUserCell .userContainer {
	height: calc(100% - 10px);
	overflow-x: auto;
}

.groupContainer input {
	width: 135px;
	margin-right: 5px;
}

.groupContainer .sortUsersButton {
	padding-top: 3px;
}

.userContainer .ui-state-disabled {
	opacity: 1 !important;
}

.locked {
	padding : 4px;
	border: $border-medium-danger;
}

#course-grouping-advanced-settings {
    display: inline-block;
    width: 100%;
    padding: 10px;
}

 #upload-group-file-settings {
    display: inline-block;
    width: 100%;
    padding: 10px;
    min-height: 150px; // allow a bit extra so the whole accordian is seen on iPad
}

#save-course-grouping-button {
	margin-top: 10px;
}
#accordionAdvanced {
	margin-bottom: 0px;
	margin-top: 20px;
}
.dialogContainer {
    display: none;
    -webkit-overflow-scrolling: touch !important;
    overflow: auto;
}
// override values from dialog.scss
.dialogContainer .modal-body {
	height : 100%;
	max-height: calc(100% - 38px);
	padding: 15px;
}