$cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8;

div.gradebook-wrapper {
  @extend .table-wrapper;

  section.gradebook-content {
    @extend .content;

    .student-search {
    	padding: 0 20px 0 15px;
    }

    .student-search-field {
    	width: 100%;
    	height: 27px;
    	padding: 0 15px 0 35px;
    	box-sizing: border-box;
    	border-radius: 13px;
    	border: 1px solid $table-border-color;
    	background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
    	font-family: $sans-serif;
    	font-size: 11px;
    	@include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset);
    	outline: none;
    	@include transition(border-color .15s);

    	&::-webkit-input-placeholder,
    	&::-moz-input-placeholder {
    		font-style: italic;
    	}

    	&:focus {
    		border-color: #1d9dd9;
    	}
    }

    .student-table {
		float: left;
		// width: 264px;
		width: 24%;
		border-radius: 3px 0 0 3px;
		color: #3c3c3c;

		th {
			height: 50px;
		}

		tr:first-child td {
			border-top: 1px solid $table-border-color;
			border-radius: 5px 0 0 0;
		}

		tr:last-child td {
			border-bottom: 1px solid $table-border-color;
			border-radius: 0 0 0 5px;
		}

		td {
			height: 50px;
			padding-left: 20px;
			border-bottom: 1px solid $cell-border-color;
			border-left: 1px solid $table-border-color;
			background: #f3f3f3;
			font-size: 13px;
			line-height: 50px;
		}

		tr:nth-child(odd) td {
			background-color: #fbfbfb;
		}
	}

	.grades {
		position: relative;
		float: left;
		width: 76%;
		overflow: hidden;

		.left-shadow,
		.right-shadow {
			position: absolute;
			top: 0;
			z-index: 9999;
			width: 20px;
			pointer-events: none;
		}

		.left-shadow {
			left: 0;
			background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
		}

		.right-shadow {
			right: 0;
			background: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
		}
	}

	.grade-table {
		position: absolute;
		top: 0;
		left: 0;
		width: 1000px;
		cursor: move;
		-webkit-transition: none;
		-webkit-user-select: none;
		user-select: none;

		td,
		th {
			width: 50px;
			text-align: center;
		}

		thead th {
			position: relative;
			height: 50px;
			background: -webkit-linear-gradient(top, $cell-border-color, #ddd);
			font-size: 10px;
			line-height: 10px;
			font-weight: bold;
			text-align: center;
			box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;

			&:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9999;
				width: 1px;
				height: 100%;
				background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
			}

			&:first-child {
				border-radius: 5px 0 0 0;
				box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;

				&:before {
					display: hidden;
				}
			}

			&:last-child {
				border-radius: 0 3px 0 0;
				box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
			}

			.assignment {
				margin: 9px 0;
			}

			.type,
			.number,
			.max {
				display: block;
			}

			.max {
				height: 12px;
				background: -webkit-linear-gradient(top, #c6c6c6, #bababa);
				font-size: 9px;
				line-height: 12px;
				color: #fff;
			}
		}

		tr {
			border-right: 1px solid $table-border-color;
		}

		tr:first-child td {
			border-top: 1px solid $table-border-color;
		}

		tr:last-child td {
			border-bottom: 1px solid $table-border-color;
		}

		td {
			height: 50px;
			border-bottom: 1px solid $cell-border-color;
			background: #f3f3f3;
			font-size: 13px;
			line-height: 50px;
			border-left: 1px solid $cell-border-color;
		}

		tr:nth-child(odd) td {
			background-color: #fbfbfb;
		}
	}

    h1 {
      @extend .top-header;
    }
  }
}