div.group-list-view div.group-list-card {
    padding: 0px;
}

div.group-list-view div.group-list-card div.group-list {
    overflow: hidden;
    padding: 8px 0px;
}

div.group-list-view div.group-list-card div.group-list .group {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    padding: 16px;
}

div.group-list-view div.group-list-card div.group-list .group:hover {
    background-color: var(--card-item-focused);
}

div.group-list-view div.group-list-card div.group-list .group .name i {
    color: var(--text-secondary);
    margin-right: 12px;
}

div.group-list-view div.group-list-card div.group-list .group .name div {
    display: inline-block;
    font-size: 1.1em;
}

div.group-list-view div.group-list-card div.group-list .group .details {
    color: var(--text-secondary);
}

main .main-content .content.group-view-container {
    min-width: 1012px;
}

div.group-view .group-nav {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    margin-left: -4px;
}

div.group-view .group-nav .breadcrumb {
    display: flex;
    align-items: center;
}

div.group-view .group-nav .breadcrumb .link {
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
}

div.group-view .group-nav .breadcrumb .link:hover {
    color: var(--primary-orange);
}

div.group-view .group-nav .breadcrumb .link.current {
    color: var(--primary-orange);
    cursor: default;
    text-decoration: none;
}

div.group-view .group-nav .breadcrumb .link.group-dropdown {
    cursor: pointer;
    text-decoration: none;
}

div.group-view .title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
    margin-top: 8px;
}

div.group-view .title-row .group-name {
    color: var(--primary-orange);
    flex-grow: 1;
    margin-bottom: 0px;
}

div.group-view .title-row .group-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 40px;
    min-width: 250px;
}

div.group-view .view-tabs {
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

div.group-view .view-tabs .material-tab.selected {
    font-weight: 600;
}

div.group-view .group-overview {
    align-items: center;
    display: flex;
}

div.group-view .group-overview .group-info-col {
    align-items: center;
    display: flex;
    flex-grow: 1;
}

div.group-view .group-overview .group-info-col .group-info {
    align-items: center;
    display: flex;
    margin-right: 24px;
}

div.group-view .group-overview .group-info-col .group-info .count {
    font-weight: 600;
    margin-right: 4px;
}

div.group-view .group-overview .group-settings-col {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

div.group-view .group-overview .group-settings-col .switch {
    padding-left: 24px;
}

div.group-view .lms-card .card-title-row {
    margin-bottom: 16px;
}

div.group-view .lms-card .card-title-row .card-title {
    display: inline-block;
    line-height: 1.5;
    margin-bottom: 0px;
    vertical-align: middle;
}

div.group-view .lms-card .card-title-row .timeframe {
    display: inline-block;
    margin-left: 8px;
    text-transform: lowercase;
    vertical-align: middle;
}

div.group-view .usage-overview {
    padding-right: 24px;
}

div.group-view .usage-overview .lms-card .data {
    color: var(--primary-orange);
    font-size: 1.1em;
    font-weight: 600;
}

div.group-view .usage-overview .lms-card .label {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

div.group-view .top-users .lms-card .user-row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    padding: 8px 16px;
}

div.group-view .top-users .lms-card .user-row:hover {
    background-color: var(--card-item-focused);
}

div.group-view .top-users .lms-card .user-row:last-child {
    border-bottom: none;
}

div.group-view .top-users .lms-card .user-row i {
    font-size: 36px;
    min-width: 52px;
}

div.group-view .top-users .lms-card .user-row .name-col {
    flex-grow: 1;
}

div.group-view .top-users .lms-card .user-row .name {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
}

div.group-view .top-users .lms-card .user-row .level {
    color: var(--text-secondary);
}

div.group-view .top-users .lms-card .user-row .points-col {
    color: var(--primary-orange);
    min-width: 100px;
    text-align: right;
}

div.group-view .top-users .lms-card .user-row .points-col span {
    font-weight: 600;
}

div.group-view .points-info {
    padding-left: 24px;
}

div.group-view .points-info .lms-card p {
    color: var(--text-secondary);
}

div.group-view .points-info .lms-card .point-equivalent {
    margin-bottom: 4px;
}

div.group-view .points-info .lms-card .point-equivalent div {
    display: inline-block;
}

div.group-view .points-info .lms-card .point-equivalent .bullet {
    color: var(--primary-orange);
    font-size: 0.8em;
    margin-right: 8px;
}

div.group-view .group {
    margin-bottom: 50px;
    margin-top: 24px;
}

div.group-view .group .lms-card {
    padding: 0px 0px 8px 0px;
}

div.group-view .group .lms-card .card-title-row {
    background-color: var(--search-bar);
    margin-bottom: 0px;
    padding: 12px 16px;
}

div.group-view .group .lms-card .member-table {
    font-size: 0.9em;
}

div.group-view .group .lms-card .member-table.scrollable {
    border-bottom: 1px solid var(--border);
    overflow-y: auto;
}

div.group-view .group .lms-card .member-table .row {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    height: 48px;
    padding: 0px 16px;
}

div.group-view .group .lms-card .member-table .row:hover {
    background-color: var(--card-item-focused);
}

div.group-view .group .lms-card .member-table .row .name {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: middle;
}

div.group-view .group .lms-card .member-table .row .admin-chip {
    background-color: var(--primary-orange-dark);
    border-radius: 10px;
    color: var(--white);
    display: inline-block;
    font-size: 0.8em;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}

div.group-view .switch label {
    color: var(--text-secondary);
    font-size: 1em;
    font-weight: 300;
}

div.group-view .switch label .lever {
    background-color: var(--grey);
    margin-right: 0px;
}

div.group-view .switch label input[type=checkbox]:checked+.lever {
    background-color: var(--primary-orange-dark);
}

div.group-view .switch label input[type=checkbox]:checked+.lever:after {
    background-color: var(--primary-orange);
}

/* STUDENT VIEW */

div.group-view div.student-view .usage-overview .student-level {
    text-align: center;
}

div.group-view div.student-view .usage-overview .student-level i {
    font-size: 36px;
    margin-bottom: 8px;
}

div.group-view div.student-view .usage-overview .student-level div {
    margin-bottom: 8px;
}

div.group-view div.student-view .certificate {
    cursor: pointer;
}

div.group-view div.student-view .student-progress {
    margin-top: 32px;
}

div.group-view div.student-view .student-progress h4 {
    margin-bottom: 16px;
}

div.group-view div.student-view .student-progress .category {
    padding: 0px 0px 24px 0px;
}

div.group-view div.student-view .student-progress .category .category-name {
    color: var(--primary-orange);
    font-size: 1.3em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

div.group-view div.student-view .student-progress .category .courses {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -8px;
}

div.group-view div.student-view .student-progress .category .courses .course-card {
    background-color: var(--grey-dark);
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    height: 150px;
    margin: 8px;
    width: 150px;
    position: relative;
}

div.group-view div.student-view .student-progress .category .courses .course-card.completed {
    background-color: var(--success);
}

div.group-view div.student-view .student-progress .category .courses .course-card.assigned {
    background-color: var(--accent-blue-dark);
}

div.group-view div.student-view .student-progress .category .courses .course-card.overdue {
    background-color: var(--error);
}

div.group-view div.student-view .student-progress .category .courses .course-card .name {
    font-size: 1.1em;
    height: 106px;
    line-height: 1.3;
    padding: 16px 8px;
    text-align: center;
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info {
    text-align: center;
}

div.group-view div.student-view .student-progress .category .courses .course-card.completed .progress-info {
    font-size: 0.9em;
    line-height: 1;
    padding-top: 12px;
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info .percentage-container {
    right: 8px;
    height: 36px;
    width: 36px;
    position: absolute;
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info .percentage-gradient {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background-color: var(--success);
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info .percentage-circle {
    position: relative;
    top: 5px;
    left: 5px;
    text-align: center;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background-color: var(--grey-dark);
}

div.group-view div.student-view .student-progress .category .courses .course-card.assigned .progress-info .percentage-circle {
    background-color: var(--accent-blue-dark);
}

div.group-view div.student-view .student-progress .category .courses .course-card.overdue .progress-info .percentage-circle {
    background-color: var(--error);
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info .percentage-text {
    top: 7px;
    position: relative;
    font-size: 11px;
    line-height: 1;
}

div.group-view div.student-view .student-progress .category .courses .course-card .progress-info .due-date {
    font-size: 0.9em;
    line-height: 1;
    padding-top: 12px;
    padding-right: 42px;
}

div.group-view div.student-view .student-progress .category .courses .course-card .action-btn-overlay {
	align-items: center;
	background-color: var(--background-overlay);
	bottom: 0px;
	cursor: default;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	transition: opacity 0.1s;
	width: 100%;
}

div.group-view div.student-view .student-progress .category .courses .course-card .action-btn-overlay.show {
	opacity: 1;
}

div.group-view div.student-view .student-progress .category .courses .course-card .action-btn-overlay .btn-primary-clear {
	display: none;
    width: 120px;
    padding: 0px;
}

div.group-view div.student-view .student-progress .category .courses .course-card .action-btn-overlay.show .btn-primary-clear {
	display: inline-block;
}

div.group-view div.student-view .student-progress .assessments .lms-card {
    margin-bottom: 24px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .header-row {
    margin-bottom: 16px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .header-row .header-col {
    width: 50%;
}

div.group-view div.student-view .student-progress .assessments .lms-card .header-row h4 {
    margin-bottom: 0px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .preheader {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .col.scores {
    padding-right: 24px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .description {
    color: var(--text-secondary);
    padding-right: 12px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .data {
    padding-left: 12px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .data .recommendation {
    margin-bottom: 4px;
}

div.group-view div.student-view .student-progress .main-filter-card {
    margin: 16px 0px;
}

div.group-view div.student-view .student-progress .filter-bar .filter-chip {
    background-color: var(--primary-orange-dark);
    border-radius: 16px;
    color: var(--white);
    font-size: 14px;
    margin-bottom: 16px;
    margin-left: 8px;
    padding: 3px 10px;
    cursor: auto;
}

div.group-view div.student-view .student-progress .filter-bar {
    width: 95%;
    margin-bottom:24px;
    display: flex;
    justify-content: space-between;
}

div.group-view div.student-view .student-progress .filter-bar .main-filter-btn span:hover {
    color: var(--primary-orange);
    cursor: pointer;
}

div.group-view div.student-view .student-progress .main-filter-card .filter-card {
    width: 95%;
    margin: 12px 0px;
    padding: 16px;
}

div.group-view div.student-view .student-progress .main-filter-card .filter-card.hidden {
    display: none;
}

div.group-view div.student-view .student-progress .main-filter-card .filter-card .filter-row .filter-btn {
    margin-right: 36px;
}
div.group-view div.student-view .student-progress .main-filter-card .filter-card .filter-row .filter-btn:hover {
    cursor: pointer;
}

div.group-view div.student-view .student-progress .main-filter-card .filter-card .filter-row .filter-btn .filter-checkbox {
    margin-right: 7px;
}

div.group-view div.student-view .student-progress .main-filter-card .filter-card .btn-bar {
    margin-top: 16px;
}

.assessment-recs-modal .recommendation {
    border-bottom: 1px solid var(--grey);
    padding: 4px 0px;
}

.assessment-recs-modal .recommendation:last-child {
    border-bottom: none;
}

div.group-view div.student-view .student-progress .assessments .lms-card .data .recommendation .name, .assessment-recs-modal .recommendation .name {
    flex-grow: 1;
}

div.group-view div.student-view .student-progress .assessments .lms-card .data .recommendation .btn-col, .assessment-recs-modal .recommendation .btn-col {
    min-width: 100px;
}

div.group-view div.student-view .student-progress .assessments .lms-card .data .btn-primary-flat {
    font-size: 0.9em;
    padding: 0px;
}

.assessment-recs-modal h4 {
    line-height: 1.3;
    white-space: pre-wrap;
}

div.group-view div.student-view .student-progress .assessments .lms-card .empty-text {
    padding: 16px 0px 48px 0px;
}

.group-back-btn {
    cursor:pointer;
    display: inline-block;
    margin-bottom: 16px;
    vertical-align: middle;
}

.group-back-btn:hover {
    color: var(--primary-orange);
}


.group-back-btn i {
    font-size: 20px;
    padding-right: 8px;
    vertical-align: middle;
}

.group-back-btn div {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: middle;
}

div.group-view .entitlement-item {
    background-color: var(--card);
    cursor: pointer;
}

div.group-view .entitlement-item:hover {
    background-color: var(--card-item-focused);
}

div.group-view .entitlement-checkbox {
    font-size: 25px;
}

.gradebook-activity {
    color: var(--grey-dark);
    font-size: 1em;
    margin-top: 5px;
}

.gradebook-attempt {
    box-sizing: border-box;
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    margin: 8px;
    padding: 5px 0px;
    text-align: center;
    width: 70px;
}

.gradebook-attempt .date {
    font-size: 10px;
    line-height: 20px;
    margin-top: -2px;
}

.gradebook-attempt .percentage {
    font-size: 14px;
}

.gradebook-resource {
    background-color: var(--grey-light) !important;
    border-bottom: 1px solid var(--grey) !important;
    padding: 0px 20px !important;
}

.gradebook-resource .attempts {
    min-height: 48px;
}

.course-progress-modal {
    background-color: var(--white);
    height: 85%;
    max-height: 85%;
    max-width: 1200px;
    width: 80%;
}

.course-progress-modal .modal-content {
    padding: 0px;
}

.course-progress-modal .modal-content .header {
    border-bottom: 1px solid var(--grey);
    flex-wrap: wrap;
    padding: 24px;
}

.course-progress-modal .modal-content .course-progress {
    align-items: center;
    display: flex;
    padding: 4px 32px 4px 0px;
}

.course-progress-modal .modal-content .course-progress .course-progress-percentage {
    width: 36px;
}

.course-progress-modal .modal-content .course-progress .course-progress-bar {
    background-color: var(--grey);
    flex-grow: 1;
    height: 12px;
}

.course-progress-modal .modal-content .course-progress .course-progress-bar .progress-bar-fill {
    background-color: var(--accent-blue);
    height: 12px;
}

.course-progress-modal .modal-content .progress-detail {
    padding: 24px;
}

.course-progress-modal .modal-content .progress-detail .track-course {
    border-bottom: 1px solid var(--grey);
    padding: 8px 16px;
}

.course-progress-modal .modal-content .progress-detail .track-course:last-child {
    border-bottom: none;
}

.course-progress-modal .modal-content .progress-detail .track-course .track-course-progress {
    align-items: center;
    color: var(--grey-dark);
    display: flex;
}

.course-progress-modal .modal-content .progress-detail .track-course .track-course-progress .progress-percentage {
    width: 40px;
}

.course-progress-modal .modal-content .progress-detail .track-course .track-course-progress .progress-bar {
    background-color: var(--grey);
    flex-grow: 1;
    height: 12px;
}

.course-progress-modal .modal-content .progress-detail .track-course .track-course-progress .progress-bar .progress-bar-fill {
    background-color: var(--accent-blue);
    height: 12px;
}

.assignment-modal .modal-content .row {
    margin: 20px 0px 32px 0px;
}

.assignment-modal .modal-content input {
    width: 100%;
}

.assignment-modal .modal-content .validation {
    color: var(--error);
    font-size: 0.9em;
}

.assignment-modal .modal-content .processing {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 180px;
}

.assignment-modal .modal-content .success {
    color: var(--success);
}

.assignment-modal .modal-content .fa-check-circle.success {
    font-size: 60px;
    margin-bottom: 16px;
}

/* Assignment Detail Popup */

.modal.assignment-detail-popup .modal-content span {
    font-weight: 600;
}

.modal.assignment-detail-popup .modal-content .row {
    margin-bottom: 8px;
}

.modal.assignment-detail-popup .modal-content .row .label {
    color: var(--grey-dark);
}

.modal.assignment-detail-popup .modal-content .row .data .progress-percentage {
    width: 40px;
}

.modal.assignment-detail-popup .modal-content .row .data .progress-bar {
    background-color: var(--grey);
    flex-grow: 1;
    height: 12px;
}

.modal.assignment-detail-popup .modal-content .row .data .progress-bar .progress-bar-fill {
    background-color: var(--accent-blue);
    height: 12px;
}

.modal.assignment-detail-popup .modal-content .btn-bar .btn-primary, .modal.assignment-detail-popup .modal-content .btn-bar .btn-primary-clear {
    margin-top: 16px;
    padding: 0px 16px;
}