$edg-blue-color: #468dfb;
$edg-correct-color: #c6e3ca;
$edg-notgraded-bgcolor: #d4e7ff;
$edg-incorrect-bgcolor: #ffe0e1;
$edg-incorrect-color: #ff9a9e;
$edg-selected-color: #fdd066;
#page-blocks-edwiser_grader-grader {
	#edg-graded{
		.edg-grader-attempt-table {
			margin-top: 30px;
		}
	}
	.edg-grader-attempt-table {
		@media screen and (max-width: 480px) {
			overflow: auto;
		}
		.edg-grader-attempt-table-content {
			display: none;
			.edg-student-single-record {
				margin-bottom: 25px;
				position: relative;
				box-sizing: border-box;
				box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
				&.selected {
					border: 2px solid #fdb300;
					.edg-student-top-section {
						background-color: #f3f0e7;
					}
					.edg-student-bottom-section {
						background-color: #f9f5ee;
					}
				}
				.edg-student-single-record-overlay {
					display: none;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.4);
					z-index: 5;
				}
				.edg-student-top-section {
					.edg-single-student {
						background: white;
						padding: 10px 20px;
						@media screen and (max-width: 480px) {
							border-bottom: 1px solid #d3d3d3;
						}
						.edg-student-info {
							width: 350px;
							input[type=checkbox]{
								height: 0;
								width: 0;
								visibility: hidden;
							}
							label {
								cursor: pointer;
								min-width: 24px;
								height: 24px;
								background: white;
								display: block;
								border-radius: 3px;
								border: 1px solid #bfbfbf;
								position: relative;
								&:after {
									content:"\f00c";
									font-family: "Font Awesome", "FontAwesome";
									color: white;
									position: absolute;
									// left: .30rem;
									width: 100%;
									height:100%;
									display: flex;
									align-items: center;
									justify-content: center;
								}
								&.top {
									z-index: 6;
								}
							}
							input:checked + label {
								background: #2e2e2e;
								border: 1px solid #2e2e2e;
							}
							input label:after {
								content: '';
							}
							input:checked + label:after {
							}
							img {
								width: 54px;
								height: 54px;
								object-fit: cover;
								object-position: center;
								border-radius: 50%;
								margin: 0px 30px;
								@media screen and (max-width: 480px) {
									margin: 0px 10px ;
									width: 54px;
									height: 54px;
								}
							}
							.edg-default-img {
								position: relative;
							    width: 64px;
								height: 64px;
								filter: blur(5px);
							    border-radius: 50%;
							    background: #dadada;
							    margin: 0 30px;
							    @media screen and (max-width: 480px) {
									margin: 0px 10px ;
									width: 54px;
									height: 54px;
								}
							}
							.edg-student-details {
								.edg-student-name {
									color: $edg-blue-color;
									font-size: 1.1rem;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									width: 165px;
								}
								.edg-default-stud {
									position: relative;
								    width: 150px;
									height: 15px;
									filter: blur(5px);
								    background: #dadada;
								    margin-bottom: 10px;
								}
								.edg-student-email{
									color: $edg-blue-color;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									width: 165px;
								}
							}
						}
						.edg-student-grade {
							padding: 0px 20px;
							border-left: 1px solid lightgray;
							.edg-grade-text {
								text-transform: uppercase;
								font-size: 0.9rem;
							}
							@media screen and (max-width: 480px) {
								padding: 0px 10px;
								flex: 1;
								align-items: center;
							}
						}
					}
					.edg-single-attempt {
						background: white;
						padding: 10px 20px;
						.edg-attempt-nav {
							.edg-attempt-text {
								text-transform: uppercase;
								font-size: .8rem;
								color: #555;
								margin-right: 20px;
								margin-bottom: 0px;
							}
							.nav-link {
								border: 0;
								color: $edg-blue-color;
								border-radius: 0;
								border-top-left-radius: .5rem;
								border-top-right-radius: .5rem;
								padding: 5px 12px;
								&.active {
									background-color: #eeeeee;
									color: inherit !important;
									&:hover {
										background: #eeeeee;
									}
								}
								&:hover {
									background: transparent;
								}
							}
						}
						#edg-attempt-nav-tabcontent {
							div.tab-pane.active {
								background-color: #eeeeee;
								padding: 10px 20px;
								border-radius: .5rem;
								.edg-attempt-status-text {
									font-size: .8rem;
									font-weight: bold;
									text-transform: uppercase;
									color: gray;
								}
								p.edg-attempt-status-val {
									font-size: .9rem;
									color: #444;
								}
							}
							.edg-noattempt-alert {
								margin: 10px 0px;
							}
						}
					}
				}
				.edg-student-bottom-section {
					display: none;
					background: #eeeeee;
					padding: 15px 20px;
					@media screen and (max-width: 1024px) {
						flex-wrap: wrap;
						padding:15px 55px;
					}
					@media screen and (max-width: 768px) {
						padding: 15px 45px;
					}
					@media screen and (max-width: 480px) {
						padding: 15px 15px;
					}
					.edg-question-pill-container {
						padding: 0px;
						flex-wrap: wrap;
						justify-content: flex-start;
						overflow: hidden;
						height: 55px;
						align-items: center;
						@media screen and (max-width: 1024px) {
							width: 100%;
							height: 55px;
						}
						&.expand {
							height: auto;
							.edg-question-pill {
								margin: 10px 15px 10px 0px;
							}
						}
						.edg-question-pill {
							display: flex;
							border-radius: 4px;
							background: transparent;
							border: 1px solid lightgray;
							margin: 10px 15px 10px 0px;
							cursor: pointer;
							color: #444;
							&:focus {
								outline: 0;
							}
							@media screen and (max-width: 1024px) {
								margin: 10px 15px 10px 0;
							}
							&.notyetanswered {
								pointer-events: none;
							}
							&.dryregrade {
								border: 3px solid #444 !important;
								.edg-q-marks {
									span:first-child {
										font-size: .70rem;
										text-decoration: line-through;
									}
									span:last-child {
										font-size: .85rem;
									}
								}
							}
							span.edg-question-number {
								font-weight: bold;
								letter-spacing: .1rem;
								padding: .350rem 1rem;
								height: 33px;
								width: 40px;
								border-top-left-radius: 2px;
								border-bottom-left-radius: 2px;
								background: lightgray;
								border: 1px solid lightgray;
								border-right: 1px solid #eee;
								@media screen and (max-width: 480px) {
									width: 35px;
								}
								@media screen and (max-width: 380px) {
									width: 30px;
								}
							}
							span.edg-grade-status {
								font-weight: bold;
								width: 65px;
								@media screen and (max-width: 380px) {
									width: 65px;
								}
								@media screen and (max-width: 480px) {
									width: 55px;
								}
							}
							&.correct, &.partiallycorrect {
								border: 1px solid $edg-correct-color;
								span.edg-question-number {
									background: $edg-correct-color;
									border: 1px solid $edg-correct-color;
								}
							}
							&.requiresgrading {
								border: 1px solid $edg-blue-color;
								span.edg-question-number {
									color: white;
									background: $edg-blue-color;
									border: 1px solid $edg-blue-color;
								}
							}
							&.incorrect, &.notanswered {
								border: 1px solid $edg-incorrect-color;
								span.edg-question-number {
									color: white;
									background: $edg-incorrect-color;
									border: 1px solid $edg-incorrect-color;
								}
							}
							&.selected {
								border: 1px solid $edg-selected-color;
								background: $edg-selected-color;
								color: black;
								span.edg-question-number {
									color: black;
									background: $edg-selected-color;
									border: 1px solid $edg-selected-color;
									border-right: 1px solid white;
								}
							}
						}
					}
					.edg-load-more {
						display: none;
						position: relative;
						&.edg-vm {
							.edg-lm-pill {
								display: none !important;
							}
							.edg-view-less {
								display: flex !important;
							}
						}
						.edg-lm-btn {
							color: white;
							font-weight: bold;
							width: 110px;
						    height: 35px;
						    border-radius: 4px;
						    background: $edg-blue-color;
						    border: 1px solid $edg-blue-color;
						    margin: 10px 0px 10px 0;
						    cursor: pointer;
						    &:focus {
								outline: 0;
								border: 0;
						    }
						    @media screen and (max-width: 480px) {
						    	width: 87px;
						    }
						}
						.edg-view-less {
							display: none !important;
						}
					}
				}
			}
			.edg-nocourses-message {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 40px 0px;
				.fa {
					font-size: 5rem;
					color: lightgray;
				}
			}
		}
		.edg-ga-skeleton-content {
			.edg-skeleton-student-row {
				margin-bottom: 30px;
				.edg-skeleton-top-section {
					height: 100px;
					background: #f2f2f2;
					.edg-skeleton-stinfo {
						padding: 20px;
					    height: 100%;
					    display: flex;
					    align-items: center;
					    width: 350px;
					    border-right: 1px solid lightgray;
					    .edg-skcheck {
					    	position: relative;
					    	width: 25px;
					    	height: 25px;
					    	background: #dadada;
					    	border-radius: 5px;
					    }
					    .edg-skimage {
					    	position: relative;
					    	width: 64px;
					    	height: 64px;
					    	border-radius: 50%;
					    	background: #dadada;
					    	margin: 0px 30px;
					    }
					    .edg-sksdetails {
					    	.edg-skname {
					    		position: relative;
					    		width: 150px;
					    		height: 15px;
					    		background: #dadada;
					    		margin-bottom: 10px;
					    	}
					    	.edg-skemail {
					    		position: relative;
					    		width: 100px;
					    		height: 15px;
					    		background: #dadada;
					    	}
					    }
					}
					.edg-skeleton-stgrade-wrap {
						margin: 0px 20px;
						.edg-skeleton-stgrade-text {
							position: relative;
							width: 75px;
							height: 15px;
							background: #dadada;
							margin-bottom: 10px;
						}
						.edg-skeleton-stgrade {
							position: relative;
							width: 75px;
							height: 15px;
							background: #dadada;
						}
					}
					.edg-skeleton-stattempt {
						position: relative;
						width: 75px;
						height: 20px;
						background: #dadada;
						margin-bottom: 5px;
					}
					.edg-skeletion-stcompletion {
						position: relative;
						width: 90%;
						height: 50px;
						background: #dadada;
					}
				}
				.edg-skeleton-bottom-section {
					background: #f9f9f9;
					.edg-skeleton-qpill-container {
						padding: 15px 20px;
						.edg-skeleton-question-pill {
							position: relative;
						    width: 110px;
						    height: 35px;
						    background: #dadada;
						    border-radius: 5px;
						    margin : 10px 15px 10px 0px;
						}
					}
				}
			}
		}
	}
}