button {
	-webkit-user-select         : none;
	-moz-user-select            : none;
	-ms-user-select             : none;
	user-select                 : none;
	-webkit-tap-highlight-color : transparent;
}

.hide {
	display : none;
}

.zero-padding {
	padding : 0 !important;
}

.web-page {
	display    : flex;
	height     : 100%;
	overflow-x : hidden;
	overflow-y : scroll;
	position   : relative;
	width      : 100%;
}

.web-page-top {
	display        : flex;
	flex-direction : row-reverse;
	flex-shrink    : 0;
	min-height     : 7px;
	padding        : 0 0.5rem;
	z-index        : 99;
}

.web-page-top.right-content-active {
	max-width : unset;
}

.web-page-top .back-link {
	border-radius  : 4px;
	flex-direction : row-reverse;
	margin         : 0.4rem 0.7rem;
	margin-bottom  : 0.1rem;
	outline        : none;
	padding        : 0.3rem;
}

.web-page-top .right.back-link {
	flex-direction : row;
}

.web-page-top .back-link:active {
	opacity : 0.7;
}

.web-page-top .header-title-extra .back-link:hover {
	background : #f5f5f5;
	color      : #0e336c !important;
}

.header-filler,
.web-page-filler {
	flex-grow : 1;
}

.web-page-section-title {
	color         : #0e336c !important;
	flex-shrink   : 0;
	font          : 1.5rem Lato,'Helvetica Neue',Arial,Helvetica,sans-serif !important;
	font-weight   : 900 !important;
}

.web-page-content {
	background     : #fff;
	display        : flex;
	flex-direction : row;
	height         : 100%;
	position       : relative;
	width          : 100%;
}

.web-page-left-overlay,
.web-page-left-content,
.web-page-right-content {
	align-items    : center;
	display        : flex;
	flex-direction : column;
	flex-grow      : 0;
	flex-shrink    : 0;
	position       : relative;
	width          : 270px;
	z-index        : 99;
}

.web-page-left-overlay {
	align-items    : baseline;
	border-right   : 1px solid #ddd;
	flex-direction : row;
	pointer-events : none;
	transition     : width 0.5s ease-out;
}

.collapsed.web-page-left-overlay {
	width : 16px;
}

.web-page-left-content-collapse-container {
	cursor         : pointer;
	display        : inline-block;
	opacity        : 0;
	transition     : opacity 1s ease-in;
	height         : 100%;
}

.collapsed.web-page-left-overlay .web-page-left-content-collapse-container {
	opacity        : 1;
	pointer-events : visible;
}

.web-page-left-content-collapse {
	align-items : center;
	display     : flex;
	height      : 100%;
}

.web-page-left-content-collapse-highlight {
	align-items : center;
	display     : inline-flex;
	height      : 40px;
}

.web-page-left-content-collapse-container:hover {
	background : rgba(260,260,100,0.05);
}

.web-page-left-content-collapse-icon {
	height : 1.1em !important;
	margin : 0 !important;
}

.web-page-left-content {
	background   : linear-gradient(#f5f5f5, #f2f2f9, #f5f5f5);
	border-right : 1px solid #d9d9d9;
	height       : 100%;
	left         : 0;
	overflow-x   : hidden;
	overflow-y   : auto;
	position     : absolute;
	top          : 0;
	z-index      : 0;
}

.web-page-right-content {
	border-left : 1px solid #eee;
	height      : calc(100% - 2rem);
	margin      : 1rem 0;
}

.web-page-main-content {
	align-items    : center;
	border-radius  : 4px;
	display        : flex;
	flex-direction : column;
	flex-grow      : 1;
	margin         : 0;
	min-width      : 0;
	position       : relative;
	z-index        : 101;
}

.web-page-main-content-fill {
	align-items    : center;
	background     : #fff;
	display        : flex;
	flex-direction : column;
	flex-grow      : 1;
	padding        : 0.75rem 1rem;
	width          : 100%;
}

.webpage-empty-shell-message {
	align-items     : center;
	color           : #777;
	display         : flex;
	font            : 2.5rem Verdana;
	font-weight     : 100;
	justify-content : center;
	height          : calc(100vh - 150px);
	width           : 100%;
}

.webpage-empty-shell-message-container {
	align-items     : baseline;
	background      : #f9f9f9;
	box-shadow      : 0 0 0 1rem #f9f9f9;
	display         : flex;
	flex-grow       : 1;
	justify-content : center;
	width           : 100%;
}

.web-page-core,
.web-page-tabs {
	max-width : 1300px;
	width     : 100%;
}

.web-page-tabs {
	display   : flex;
	flex-grow : 1;
	position  : relative;
	z-index   : 0;
}

.web-page-delete-button {
	background   : none !important;
	color        : #4183c4 !important;
	font-weight  : 300 !important;
	margin-right : 1rem !important;
	min-width    : 6rem;
}

.web-page-delete-button>.icon {
	visibility : hidden;
}

.web-page-delete-button:hover {
	color : #c44141 !important;
}

.web-page-delete-button:hover>.icon {
	visibility : visible;
}

.web-page-cancel-button,
.web-page-cancel-button:hover {
	background   : none !important;
	border       : 1px solid !important;
	color        : #333 !important;
	margin-right : 1rem !important;
}

.web-page-save-button,
.web-page-save-button:hover {
	background   : linear-gradient(to left,#4183c4,#1047a4) !important;
	color        : #fff !important;
	margin-right : 0 !important;
}

.web-page-hover-button:hover{
	box-shadow : 0 10px 7px -9px #aaa !important;
	transform  : translate(0px, -0.15rem);
}

.web-page-hover-button {
	box-shadow : none !important;
	transition : box-shadow 0.3s, transform 0.3s;
}

.web-page-hover-button:active {
	box-shadow : none !important;
	filter     : contrast(0.5);
	opacity    : 0.95;
	transform  : none;
}

.web-page-hover-button.scary-button,
.web-page-hover-button.scary-button:hover,
.web-page-hover-button.scary-button:active {
	background : linear-gradient(to left,#c44141,#941710) !important;
}

.web-page-edit-button:not(.loading):hover{
	box-shadow : 0 8px 7px -3px #ccc;
	transform  : translate(0px, -3px);
}

.web-page-edit-button {
	background     : #1047a4;
	border         : none;
	border-radius  : 50%;
	box-shadow     : none;
	color          : #fff;
	cursor         : pointer;
	display        : inline-block;
	height         : 2.07rem;
	line-height    : 1;
	outline        : none;
	overflow       : hidden;
	padding        : 0.3rem !important;
	transform      : translate(0px, 0px);
	transition     : box-shadow 0.3s, transform 0.3s;
	vertical-align : middle;
	width          : 2.07rem;
}

.web-page-edit-button:not(.loading):active {
	color     : #ccc;
	opacity   : 0.9;
	transform : translate(0px, 0px);
}

.web-page-edit-button:disabled {
	background : rgb(221, 221, 221) !important;
	cursor     : default;
}

.loading.web-page-edit-button {
	color  : transparent !important;
	cursor : progress !important;
}

.loading.web-page-edit-button:before {
	display : none;
}

.loading.web-page-edit-button::after {
	animation        : webpage-loading-spinner 0.6s infinite linear;
	border           : 0.3rem solid rgba(0, 0, 0, 0.2);
	border-radius    : 50%;
	border-top-color : rgba(255, 255, 255, 0.2);
	content          : '';
	height           : 1rem;
	left             : 50%;
	position         : absolute;
	top              : 50%;
	width            : 1rem;
	z-index          : 100;
}

.web-page-edit-button .pencil {
	margin : 0 !important;
}

.web-page-help-img {
	cursor : help;
}

.web-page-tabs [data-tab] {
	display    : flex;
	flex-grow  : 1;
	max-width  : 100%;
	opacity    : 1;
	transition : opacity 0.3s, transform 0.3s;
}

.web-page-tabs [data-tab]:not(.active) {
	left           : 0;
	max-height     : calc(100% - 50px);
	opacity        : 0;
	pointer-events : none;
	position       : absolute;
	right          : 0;
	transform      : translateY(50px);
	top            : 0;
}

.web-page .web-page-tabs [data-tab] > div {
	flex-grow : 1;
}

.web-page-images {
	background : linear-gradient(to right, #f7f7f0, #ecefff);
	display    : flex;
	max-height : 90vh;
	max-width  : 95vw;
	overflow   : hidden;
}

.web-page-images .image-container-title {
	border-bottom : 1px solid #ddd;
	flex-shrink   : 0;
	margin        : 0;
	padding       : 0.5rem;
}

.web-page-images .image-container {
	background : #fff;
	display    : flex;
	flex-grow  : 1;
	flex-wrap  : wrap;
	overflow   : auto;
}

.web-page-user-images,
.web-page-system-images {
	display        : flex;
	flex           : 1 0 50%;
	flex-direction : column;
}

.system-image-filler,
.system-image-container {
	flex       : 1 0 100px;
	margin     : 0.5rem;
	width      : 100px;
	min-height : 50px;
}

.system-image-container {
	align-items     : center;
	cursor          : pointer;
	display         : flex;
	height          : 100px;
	justify-content : center;
	position        : relative;
}

.system-image-container:hover:after {
	background : rgba(0, 0, 0, 0.2);
	bottom     : 0;
	content    : '';
	left       : 0;
	position   : absolute;
	right      : 0;
	top        : 0;
}

.system-image-container .system-image {
	max-height : 90%;
	max-width  : 90%;
}

.web-page-user-images .nu-file-container {
	flex-grow : 1;
	height    : auto;
	width     : auto;
}

.web-page-user-images .nu-file-container .nu-file-files {
	border-color : #ddd;
	border-top   : none;
	box-shadow   : none;
}

.web-page-saving-container {
	display       : flex;
	margin-bottom : 0.4rem;
	width         : 100%;
}

.web-page-unsaved-changes-message {
	color     : #555;
	flex-grow : 1;
	min-width : 7.5rem;
}

.web-page-saving-container .tab-save {
	background   : transparent;
	color        : #4183c4;
	font-weight  : 300;
	margin-right : 0.5rem;
	opacity      : 1;
	padding      : 0;
	transition   : opacity 0.5s;
}

.web-page-invisible {
	height         : 0 !important;
	margin         : 0 !important;
	opacity        : 0 !important;
	padding        : 0 !important;
	pointer-events : none;
}

.web-page-slider-icon-button:hover {
	color     : #0e438c;
	transform : translate(0.4rem, 0);
}

.web-page-slider-icon-button:hover .icon {
	opacity   : 1;
	transform : translate(-0.2rem, 0);
}

.web-page-slider-icon-button,
.web-page-slider-icon-button:disabled {
	background : none;
	border     : none;
	color      : #4183c4;
	cursor     : pointer;
	font       : 1.1rem Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
	outline    : none !important;
	text-align : right;
	transform  : translate(1.5rem, 0);
	transition : all 0.9s;
}

.web-page-slider-icon-button .icon,
.web-page-slider-icon-button:disabled .icon {
	margin     : 0;
	opacity    : 0;
	transform  : translate(-1.5rem, 0);
	transition : all 0.5s;
}

.web-page-slider-icon-button:active {
	opacity : 0.5;
}

.web-page-slider-icon-button:disabled {
	cursor  : default;
	opacity : 0.35;
}

.web-page-confirm {
	margin : -20px;
}

.web-page-confirm-message {
	color       : #0e336c;
	font-size   : 1.3rem;
	font-weight : bold;
	max-width   : 40vw;
	padding     : 2.5rem;
}

.web-page-confirm-bottom {
	align-items     : center;
	background      : linear-gradient(to left, #f7f7f0, #f3f7fa);
	border-top      : 1px solid #e9e9e9;
	display         : flex;
	justify-content : flex-end;
	padding         : 0.7rem 0.4rem;
}

.web-page-content .bootstrap .modal {
	overflow : visible;
}

.web-page-summernote-modal-container .modal-dialog {
	box-shadow : none;
}

.web-page-summernote-modal-container>.fade.in.note-modal {
	align-items : center;
	background  : rgba(0, 0, 0, 0.25);
	display     : flex !important;
}

.web-page-rich-text-content .note-editor,
.editing.web-page-rich-text-content .web-page-rich-text-read {
	display : none;
}

.editing.web-page-rich-text-content .note-editor {
	display : block;
}

.web-page-rich-text-content .btn-group-vertical>.btn,
.web-page-rich-text-content .btn-group>.btn {
	background-color : transparent;
	border           : none;
	border-radius    : 0;
}

.web-page-rich-text-content .note-editor.panel .note-toolbar {
	padding : 0;
}

.web-page-rich-text-content .note-editor .note-toolbar>.note-btn-group {
	border-right : 1px solid #ddd;
	margin       : 0;
	padding      : 0;
}

.web-page-rich-text-content .panel-default.note-editor.note-frame {
	border        : 1px solid #e0e0e0;
	border-radius : 2px;
	box-shadow    : none;
	margin-bottom : 0;
}

.web-page-rich-text-content .note-resizebar {
	display : none;
}

.web-page-rich-text-content .panel-default>.panel-heading {
	background-color : #efefff;
	border-radius    : 0;
	box-shadow       : 0 13px 7px #f0f0f0 inset;
}

.web-page-rich-text-content .note-editable {
	height : unset !important;
}

.web-page-rich-text-content .note-editable>p:last-child {
	margin-bottom : 0;
}

.web-page-rich-text-content .note-status-output,
.web-page-rich-text-content .note-statusbar {
	display : none !important;
}

.web-page-rich-text-content .note-palette .note-color-select,
.web-page-rich-text-content .note-palette .note-color-reset,
.web-page-rich-text-content .note-palette .note-holder-custom {
	display : none;
}

.web-page-rich-text-content .note-btn-group .note-btn:hover {
	background : rgba(100,100,100,0.07);
}

.web-page-rich-text-content .note-editor .note-toolbar .note-dropdown-menu.note-check a i,
.web-page-rich-text-content .note-popover .popover-content .note-dropdown-menu.note-check a i {
	color : #1047a4;
}

.note-toolbar .note-dropdown-menu.dropdown-fontsize {
	min-width : 100px;
}

.note-editor.note-focused .panel-heading.note-toolbar {
	border-bottom: 0.15rem solid #0e336c;
}

.note-editor.note-focused .panel-heading.note-toolbar .note-btn{
	padding-bottom : calc(5px - 0.15rem);
}

.note-editor.note-focused {
	box-shadow : 0 0 7px #ccc !important;
}

.sn-checkbox-open-in-new-window,
.sn-checkbox-use-protocol {
	display : none !important;
}

.web-page-content .dataTable-table > thead th,
.web-page-content .dataTable-table > thead td,
.web-page-content .dataTable-table > tfoot th,
.web-page-content .dataTable-table > tfoot td,
.web-page-content .dataTable-scroll {
	border-color : #ddd;
}

.web-page-content .dataTable-table .dataTable-insertRow th,
.web-page-content .dataTable-table .dataTable-insertRow td {
	border-color : #c2c2c2;
}

.web-page-content .dataTable-filters > .dataTable-wrapper > .dataTable-controls .dataTable-filterToggle,
.web-page-content .dataTable-messageStudents > .dataTable-wrapper > .dataTable-controls .dataTable-communicationButtons,
.web-page-content .dataTable-messageStaff > .dataTable-wrapper > .dataTable-controls .dataTable-communicationButtons,
.web-page-content .dataTable-export > .dataTable-wrapper > .dataTable-controls .dataTable-exportButtons {
	align-items  : center;
	border-color : #bbb;
	display      : inline-flex;
	padding-top  : 0;
}

.fade-out {
	animation : fade 5s linear forwards;
	border    : none;
}

.pulse-red {
	animation : flash-red 2.5s infinite linear;
}

@keyframes fade {
	0% {
		opacity : 100%;
	}
	80% {
		opacity : 100%;
	}
	100% {
		opacity : 0%;
	}
}

@keyframes flash-red {
	0% {
		color : #4183c4;
	}
	33% {
		color : #4183c4;
	}
	66% {
		color : #9f3a38;
	}
	100% {
		color : #4183c4;
	}
}

@keyframes webpage-loading-spinner {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}