/* 
 * Customise Website
 * - Buttons
 * - Colours
 * - Components
 * - Context Menu
 * - Dropzone
 * - Layout
 * - Tutorial
 */

/* ******** Buttons ******** */


/* Animate changes */

.btn {
	transition: all 0.3s ease;
}


/* Change the style of the disabled loading button to be flat */

.btn.loading {
	background: none !important;
	padding: 0 0.6rem;
	line-height: 0;
}


/* ******** Colours ******** */


/* Side menu colour */

.side-menu a,
.collection .collection-item {
	border-left: 0px solid rgba(0, 0, 0, 0.54);
	transition: border-width 0.3s ease;
}

.side-menu a.context,
.collection .collection-item.context {
	background-color: #F5F5F5;
	color: inherit;
}

.side-menu a.selected,
.collection .collection-item.selected {
	border-left-width: 4px;
	background-color: #F5F5F5;
	color: inherit;
}

.collection .collection-item.link-section.selected {
	border-left-width: 0;
}


/* Icon prefix focus color */

.input-field .prefix.active {
	color: #2196F3;
}


/* Blockquote error color */

blockquote.error:empty,
blockquote.success:empty {
	display: none;
}

blockquote.error {
	color: #F44336;
	border-color: #F44336;
}

blockquote.success {
	color: #4CAF50;
	border-color: #4CAF50;
}

blockquote .btn {
	margin-top: 10px;
}

/* Transition colors */

.link-project>i.material-icons {
	transition: background-color 0.5s ease;
}

.invites .notification .notification-content {
	transition: border-color 0.5s ease;
}


/* ******** Components ******** */


/* Hardware accaleration */

.menu-layer,
.view,
.lean-overlay,
.modal,
.slide-content {
	/* activate the GPU for compositing each page */
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/* Disable text selection */

* {
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
}

input, textarea, pre, pre * {
	-webkit-touch-callout:default;
	-webkit-user-select:text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
	cursor: text;
}

.line-numbers-rows * {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}


/* MenuBar View */

.view, .view-loading {
	display: none;
	position: absolute;
	top: 56px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.view-loading {
	display: block;
	top: 0;
}

.view[page="login"] ~ .menubar .secondary-content,
.view[page="register"] ~ .menubar .secondary-content,
.view[page="reset_password"] ~ .menubar .secondary-content,
.view[page="confirm"] ~ .menubar .secondary-content,
.view[page="error"] ~ .menubar .secondary-content .link-help{
	display: none;
}


/* Popups */

.popup {
		display: none;
    position: absolute;
    right: 24px;
    top: 56px;
}

.popup:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    right: 10px;
}

.popup.account span {
    display: block;
}

.popup.notifications {
	width: 400px;
}

.popup.notifications .card-content {
	max-height: 50vh;
	overflow: auto;
}

.popup.notifications .card-content:empty {
	display: none;
}

.popup.notifications .invites:empty + .placeholder,
.popup.notifications .mentions:empty + .placeholder {
	display: block;
	padding: 20px;
}

.popup.notifications:before {
	border-bottom-color: #e5e5e5;
	right: 59px;
}

.popup.notifications .notification .notification-content {
	border-radius: 2px;
	padding: 20px;
	width: 100%;
	border-left: 4px solid;
}

.popup.notifications .notification time.date {
	display: block;
	margin: 10px 0 20px;
}

.popup.notifications ul .notification:last-child time.date {
	margin-bottom: 0px;
}

.link-dismiss-notification {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px;
    border-radius: 2px;
}

.notification {
    position: relative;
}

.link-dismiss-notification i.material-icons {
    display: block;
}

.popup.help:before {
	right: 106px;
}

.popup p.popup-title {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.popup.help .card-action .btn {
	margin-left: 0;
}

/* Image previewer */
.md-box {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
	cursor: pointer;
}

.md-box .md-image {
	position: absolute;
}

.md-box img {
	max-width: 100%;
	max-height: 80vh;
	cursor: pointer;
}


/* Hide form elements that change */

form#login .card-heading a,
form#login #login,
form#login #register {
	display: none;
}


/* Passwords box */

.passwords {
	display: none;
}


/* Color selector */

.link-select-color {
	line-height: 48px;
	padding-right: 20px;
}

.color-picker-item {
	position: relative;
	display: inline-block;
	background: none !important;
}

.color-picker-item .material-icons {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-weight: bold;
	font-size: 24px;
	line-height: 56px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.color-picker-item [type="radio"]:checked ~ .material-icons {
	opacity: 1;
}

.color-picker-item [type="radio"] + label {
	padding: 0;
	width: 56px;
	height: 56px;
	-webkit-tap-highlight-color: transparent;
}

.color-picker-item [type="radio"] + label:before,
.color-picker-item [type="radio"] + label:after {
	width: 48px !important;
	height: 48px !important;
	border-color: rgba(0, 0, 0, 0);
}

.color-picker-item [type="radio"] + label:before,
.color-picker-item [type="radio"] + label:before {
	border-width: 0;
}

.color-picker-item [type="radio"]:checked + label:after {
	border-width: 8px;
}


/* Recolored items */

.color {
	transition: all 0.3s ease, background-color 0.5s ease;
}

/* Confirmation modal */

#modal-confirm .modal-content .modal-text .title {
    position: absolute;
    top: 0;
    left: 52px;
    font-size: 16px;
    line-height: 42px;
}

#modal-confirm .modal-content .modal-text {
    position: relative;
}

#modal-confirm .modal-content .modal-text i {
    line-height: 38px;
    margin-bottom: 1rem;
}


/* ******** Context Menu ******** */


/* Hardware accaleration */

.context-menu {
	overflow: hidden;
	position: absolute;
	z-index: 15;
	display: none;
}

.context-menu .collection {
	width: 200px;
	margin: 0;
	border: none;
}

.context-menu .collection .collection-item {
    border-bottom: none;
}


/* ******** Dropzone.JS ******** */


/* Position dropzones */

.file-uploadsss {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 100px;
	pointer-events: none;
	z-index: 2;
}


/* Hide elements */

.dropzone-preview-template,
.file-uploading {
	display: none;
}


/* Create drag over effect */

.dz-drag-hover {
	box-shadow: inset 0px 0px 5px 0px rgba(33, 150, 243, 1);
}


/* ******** Layout ******** */


/* Gain access to the screen size */

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}


/* Alternative valign method (true middle, and doesn't valign on mobile) */

@media only screen and (min-width: 601px) {
	.valign2-wrapper {
		display: table;
		width: 100%;
		height: 100%;
	}
	.valign2 {
		display: table-cell;
		vertical-align: middle;
	}
}

.view-loading.valign2-wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.view-loading .valign2 {
	display: table-cell;
	vertical-align: middle;
}


/* Only show certain content to admins */

.link-project-settings {
	display: none;
}

.admin .link-project-settings {
	display: inline-block;
}


/* Adjust layout on account settings page */
	
.card {
	margin: 0;
}

form#account-details,
form#personal-info,
form#account-projects,
form#account-project-invites,
form#project-details,
form#project-users {
	margin: 1.5rem 0;
}


/* Section navigation */

.navigation {
	position: absolute;
	overflow: auto;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 300px;
}

.project-title {
	display: block;
	line-height: 64px;
	padding: 5px 16px 0;
	font-size: 1.2rem;
	border-bottom: 1px solid #e0e0e0;
}

.navigation .sections-container {
	position: absolute;
	top: 70px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

.admin.navigation .sections-container {
	bottom: 54px;
}

.navigation .sections {
	border: none;
	margin: 0;
	display: none;
}

.navigation .section-content {
	max-height: 0px;
	top: 10px;
	position: relative;
}

.navigation .link-section {
	display: none;
}

.navigation .files .collection-item {
    border-bottom: none;
}

.navigation .files,
.navigation .file-uploads {
	border: none;
	margin: 0 -20px;
	position: relative;
	border-top: 1px solid #e0e0e0;
}

.navigation .files .link-file {
	padding-left: 40px !important;
}

body>.link-file {
    padding: 10px 20px;
    padding-left: 40px;
    position: relative;
    width: 300px;
    line-height: 42px;
	background: white !important;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

body>.link-file .title {
    font-size: 16px;
    position: absolute;
    left: 92px;
    top: 12px;
}

body>.link-file .waves-ripple {
	background: none !important;
}

.navigation.section-files .sections {
	top: 0;
}

.navigation .link-section:last-child,
.navigation .file-uploading:last-child {
	border-bottom: 1px solid #e0e0e0;
}

.temp {
	display: none;
}


/* Position the Add Section button */

.navigation a.link-add-section {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}


/* Content */

.content {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 300px;
	z-index: 0;
	padding: 0 20px;
	overflow: auto;
}

.content-loading {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 300px;
	z-index: 0;
	padding: 0 20px;
	overflow: auto;
}

.comment-section {
	max-width: 800px;
	margin: auto;
}


/* Preview section */

.preview-area {
	max-width: 800px;
	margin: auto;
	padding: 40px 10px 0;
	overflow: hidden;
	position: relative;
	/* border: 1px solid #CCC; */
	text-align: center;
}

.preview {
	margin: auto 64px;
	position: relative;
}

.link-previous-version, .link-next-version {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 64px;
}

.link-previous-version {
	left: 0;
}

.link-next-version {
	right: 0;
}

.preview .version {
	width: 100%;
	opacity: 0;
	transform: translateX(-30%);
	transition: all 0.3s ease;
	position: absolute;
	top: 0;
}

.preview .version.active {
	position: relative;
	opacity: 1;
	z-index: 1;
	transform: translateX(0px);
}

.preview .version.active ~ .version {
    transform: translateX(30%);
}

.preview .version .version-info {
    padding: 20px;
}

.preview .fa {
	font-size: 128px;
	font-weight: normal;
}

.preview .version {
	pointer-events: none;
}

.preview .version.active {
	pointer-events: auto;
}

.preview .version.active .image {
	cursor: pointer;
}

.preview .image-caption {
    margin-top: 20px;
}

.preview video,
.preview .image,
.preview img,
.preview code {
	max-width: 100%;
	max-height: 50vh;
	margin: auto;
	display: block;
}

.preview .image {
	display: inline-block;
}

.preview .image.scrollable {
	overflow: scroll;
}

.preview .image.scrollable img {
	width: 100%;
	max-height: none;
}

.preview audio {
	width: 100%;
}

.preview .pdf,
.preview .swf,
.preview iframe {
	border: none;
	width: 100%;
	height: 50vh;
}


/* Comment section */

form#add-comment {
	margin-bottom: 10px;
	padding: 0 10px;
}

.input-button {
	margin-right: 116px;
}

.button-input {
	position: absolute;
	bottom: 15px;
	right: 0;
}

.comments {
	padding: 10px;
}

.comments .comment {
	position: relative;
	padding: 20px;
	margin-bottom: 20px;
}

.comments .comment .title {
	margin: 4px 0px 0 64px;
	font-weight: bold;
}

.comments .comment .date {
	position: absolute;
	top: 20px;
	right: 20px;
}

.comments .comment p {
	margin: 0 0 0 64px;
	word-wrap: break-word;
}


/* ******** Tutorial ******** */

.tutorial {
	display: none;
	position: absolute;
	z-index: 9999;
}

.tutorial-message {
	display: none;
	position: absolute;
	padding: 10px 12px;
	border-radius: 2px;
	background: #323232;
	color: white;
	z-index: 10;
	float: none !important;
}

.tutorial-message.top i.material-icons,
.tutorial-message.right i.material-icons,
.tutorial-message.bottom i.material-icons {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.tutorial-message.left i.material-icons {
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
}

.tutorial-message span {
    display: block;
}

.tutorial-message.top span,
.tutorial-message.right span,
.tutorial-message.bottom span {
	margin-right: 28px;
}

.tutorial-message.left span {
	margin-left: 28px;
}

.tutorial-message.top:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #323232;
	bottom: -8px;
	left: calc(50% - 8px);
}

.tutorial-message.right:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #323232;
	top: 12px;
	left: -8px;
}

.tutorial-message.bottom:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #323232;
	top: -8px;
	left: calc(50% - 8px);
}

.tutorial-message.left:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #323232;
	top: 12px;
	right: -8px;
}

.cursor {
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 100000;
}


/* ******** Dark Mode ******** */

.comment p.darken-3:before {
	border-color: #424242 transparent transparent transparent;
}

.side-menu.darken-3 a.selected,
.collection .collection-item.darken-3.selected {
	background-color: #323232 !important;
}


.side-menu.darken-3 a,
.collection .collection-item.darken-3 {
	border-left-color: rgba(255, 255, 255, 1) !important;
}

.side-menu.darken-3 a.context,
.collection .collection-item.darken-3.context {
	background-color: #323232 !important;
}

.side-menu.darken-3 a.selected,
.collection .collection-item.darken-3.selected {
	background-color: #323232 !important;
}


/* ******** Responsive ******** */

@media only screen and (max-width: 600px) {
	.button-input {
		right: 0;
	}
	
	.content, form#add-comment {
		padding: 0;
	}

	.preview-area {
		padding: 40px 0 0;
	}

	.comments {
		padding: 10px 0;
	}

	form#account-details,
	form#personal-info,
	form#account-projects,
	form#account-project-invites,
	form#project-details,
	form#project-users {
		margin-bottom: 0;
	}

}

@media only screen and (max-width: 800px) {
	.navigation {
		width: 100%;
	}

	.content {
		left: 0;
	}

	.content-loading {
		display: none;
	}

	.content.topic {
		z-index: 1;
	}
	
	.menubar .secondary-content .link-help {
		display: none;
	}
}