.blueBG { background: #4f96ed !important; } .blueText { color: #4f96ed !important; }
.redBG { background: #ed4f59 !important; } .redText { color: #ed4f59 !important; }
.greenBG { background: #00b25c !important; } .greenText { color: #00b25c !important; }

button.default[disabled] {
	opacity: .5;
	pointer-events: none;
}

button.default {
	background: #596781;
	padding: 5px 8px;
	border: none;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
}

button.default.light {
	background: #EEE;
	color: #596781;
}

button.default:hover,
button.default.active {
	background: #4f96ed;
	color: #FFF;
}

button.default.active:hover {
	color: #000;
}

button.default.red:hover {
	background: #ed4f59;
}

button.default.green.active {
	color: #FFF;
}

button.default.green:hover,
button.default.green.active{
	background: #00b25c;
}

button.default:active {
	background: #FFF;
	color: #000;
}

button.default.light:active {
	background: #596781;
	color: #FFF;
}

button.default.small {
	font-size: 0.85em;
}

/*button.default > .fa {
	line-height: 1px;
}*/

.faBtn {
	margin-right: 3px;
}

input.default {
	background: #e8f0fa;
	border: none;
	border-radius: 5px;
	padding: 8px;
	color: #7988a0;
	outline: none;
}

input.default:hover {
	background: #BFC8CD;
	color: #596781;
}

input.default:focus {
	background: #4f96ed;
	color: #FFF;
}

input.default:invalid {
	background: #ed4f59;
	color: #FFF;

	border: 0;
	outline: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

textarea.default {
    background: #e8f0fa;
    border: none;
    border-radius: 5px;
    padding: 8px;
    color: #7988a0;
}

textarea.default:hover {
    background: #d1d8e1;
    color: #FFF;
}

textarea.default:focus {
    background: #4f96ed;
    color: #FFF;
}

textarea.default:invalid {
    background: #ed4f59;
    color: #FFF;

    border: 0;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

/* Checkbox */
input[type="checkbox"].default {
	position: absolute;
	left: -9999px;
	border: 0;
	outline: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

input[type="checkbox"].default + label {
	position: relative;
	cursor: pointer;
}

input[type="checkbox"].default + label > i {
	font-style: normal;
	margin-right: 2px;
}

input[type="checkbox"].default + label > i:before { content:"\f096"; }
input[type="checkbox"].default.filled + label > i:before { content:"\f0c8"; }
input[type="checkbox"].default:checked + label > i:before { content:"\f14a"; }
input[type="checkbox"].default:checked + label > i,
input[type="checkbox"].default:hover + label > i { color: #00b25c; }
input[type="checkbox"].default:not(:hover):focus + label > i { color: #000; }

/* Avatar Default */
img.avatarDefault {
	display: block;
	border-radius: 100%;
}

img[src="/assets/avatarDefault.png"].avatarDefault,
img[src="//www.ofyz.de/assets/avatarDefault.png"].avatarDefault {
	background-color: #C8D2D7;
}

/* Tooltop */
#Tooltip {
	position: fixed;
	background: #4f96ed;
	padding: 8px;
	color: #FFF;
	border-radius: 3px;
	font-size: .9em;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

#Tooltip.left { margin-right: 6px; }
#Tooltip.right { margin-left: 6px; }
#Tooltip.top { margin-bottom: 6px; }
#Tooltip.bottom { margin-top: 6px; }

#Tooltip > .arrow {
	position: absolute;
}

#Tooltip > .arrow.left {
	top: calc(50% - 5px);
	right: -6px;
	width: 6px;
	height: 10px;

	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #4f96ed;
}

#Tooltip > .arrow.right {
	top: calc(50% - 5px);
	left: -6px;
	width: 6px;
	height: 10px;

	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #4f96ed;
}

#Tooltip > .arrow.top {
	bottom: -6px;
	left: calc(50% - 5px);
	width: 10px;
	height: 6px;

	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #4f96ed;
}

#Tooltip > .arrow.bottom {
	top: -6px;
	left: calc(50% - 5px);
	width: 10px;
	height: 6px;

	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #4f96ed;
}

/* ContextMenu */
#ContextMenu {
	position: absolute;
	background: #2d3039;
	color: #9fa8bf;
	cursor: pointer;
	z-index: 1000;
	visibility: hidden;
}

#ContextMenu > ul > li {
	border: 3px solid #0f1922;
	border-bottom: none;
	font-size: 0.90em;
}

#ContextMenu > ul > li:hover {
	background: #0f1922;
	color: #4f96ed;
}

#ContextMenu > ul > li > .icon {
	float: left;
	font-size: 1.20em;
	padding: 5px;
	padding-right: 0;
}

	#ContextMenu > ul > li > .text {
		float: left;
		padding: 7px 10px 5px 5px;
	}

	#ContextMenu > ul > li > .input {
		float: right;
		background: #0f1922;
		padding: 7px;
	}

		#ContextMenu > ul > li > .input > .fa-close {
			color: #ed4f59;
		}

		#ContextMenu > ul > li > .input > .fa-check {
			color: #00b25c;
		}

#ContextMenu > ul > li:last-child {
	border-bottom: 3px solid #0f1922;
}

/* UserList */
#UserList > .user {
	float: left;
	margin-left: 3px;
	cursor: pointer;
}

	#UserList.small > .user.add > .avatar {
		width: 30px;
		height: 30px;
		padding-top: 2px;
	}

	#UserList > .user.add > .avatar {
		width: 40px;
		height: 40px;
		padding-top: 7px;
		border: 2px solid #4f96ed;
		border-radius: 100%;
		color: #4f96ed;
	}

	#UserList > .user.add:hover > .avatar {
		background-color: #4f96ed;
		color: #FFF;
	}

	#UserList > .user > .avatar {
		position: relative;
		text-align: center;
	}

		#UserList > .user > .avatar > .fa-user-plus,
		#UserList > .user > .avatar > .fa-user-times {
			padding-left: 2px;
		}

		#UserList.small > .user > .avatar > .icon {
			width: 30px;
			height: 30px;
			line-height: 30px;
		}

		#UserList > .user > .avatar > .icon {
			background: #4f96ed;
			display: block;
			position: absolute;
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 100%;
			color: #FFF;
		}

		#UserList > .user:not(:hover) > .avatar > .icon {
			display: none;
		}

		#UserList.small > .user > .avatar > img {
			width: 30px;
			height: 30px;
		}

        #UserList > .user > .avatar > img {
			width: 40px;
			height: 40px;
		}

/* Editor */
#WrapperFeedEditor {
	border-radius: 5px;
}

#WrapperFeedEditor:not(.noShadow) {
	box-shadow: 1px 1px 3px #d8dee2;
}

	#WrapperFeedEditor > .content {
		background: #FFF;
		padding: 5px;
		border-radius: 5px 5px 0 0;
	}

	#WrapperFeedEditor.hide > .content {
		border-radius: 5px;
	}

		#WrapperFeedEditor > .content > textarea {
			border: none;

			min-width: 100%;
			max-width: 100%;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;

			font-family: 'Open Sans', Arial, Verdana, sans-serif;
			font-size: .9em;

			resize: none;
		}

	#WrapperFeedEditor > .tools {
		background: #f9f9f9;
		border-radius: 0 0 5px 5px;
	}

	#WrapperFeedEditor.hide > .tools {
		display: none;
	}

		#WrapperFeedEditor > .tools > .fileList {
		}

			#WrapperFeedEditor > .tools > .fileList > .file {
				background: #d7e0e4;
				height: 35px;
			}

			#WrapperFeedEditor > .tools > .fileList > .file:nth-child(odd) {
				background: #e0e8ec;
			}

				#WrapperFeedEditor > .tools > .fileList > .file > .icon {
					float: left;
					width: 50px;
					height: 100%;
					line-height: 35px;
					text-align: center;
				}

					#WrapperFeedEditor > .tools > .fileList > .file > .icon > .fa {
						vertical-align: middle;
						font-size: 1.65em;
						color: #00b25c;
					}

					#WrapperFeedEditor > .tools > .fileList > .file > .icon > .fa-youtube-play {
						color: #ed4f59;
					}

				#WrapperFeedEditor > .tools > .fileList > .file > .name {
					float: left;
					width: calc(100% - 80px);
					height: 100%;
					line-height: 35px;
					font-size: 0.9em;
				}

				#WrapperFeedEditor > .tools > .fileList > .file > .remove {
					float: right;
					height: 100%;
					line-height: 35px;
					padding: 0 5px;
					cursor: pointer;
				}

					#WrapperFeedEditor > .tools > .fileList > .file > .remove:hover {
						background: #ed4f59;
						color: #FFF;
					}

					#WrapperFeedEditor > .tools > .fileList > .file > .remove:active {
						background: #FFF;
						color: #000;
					}

		#WrapperFeedEditor > .tools > .buttons {
			float: left;
			padding: 5px;
		}

		#WrapperFeedEditor > .tools > .submit {
			float: right;
			padding: 5px;
		}

#Spotlight:not(.open) {
	background: transparent;
	visibility: collapse;
}

#Spotlight:not(.open) > .wrapper {
	margin-top: -55px;
}

#Spotlight {
	background: rgba(63, 85, 112, .3);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;

	padding-left: 90px;
	padding-right: 70px;

	transition: background 0.5s;
}

body.expandLeft #Spotlight {
	padding-left: 210px;
}

	#Spotlight > .wrapper {
		background: #FFF;
		width: 90%;
		margin: 10px auto;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 1px 3px #A7B7C8;

		transition: margin-top 0.5s;
	}

		#Spotlight > .wrapper > .input > .icon {
			float: left;
			color: #596781;
			margin-right: 8px;
			padding-top: 6px;
		}

			#Spotlight > .wrapper > .input > input {
				float: left;
				width: calc(100% - 34px);
				font-size: 1.5em;
				background: #e8f0fa;
			}

			#Spotlight > .wrapper > .input > input:focus {
				color: #596781;
			}

		#Spotlight > .wrapper > .result {
		}

			/* LIST */
			#Spotlight > .wrapper > .result.show > .list { float: left;	width: 50%; }
			#Spotlight > .wrapper > .result > .list {
				max-height: calc(100vh - 82px);
				overflow: auto;
			}

			#Spotlight > .wrapper > .result > .list:not(:empty) {
				margin-top: 10px;
			}

				#Spotlight > .wrapper > .result > .list > .noResults {
					margin-left: 10px;
					color: #ed4f59;
				}

				#Spotlight > .wrapper > .result > .list > .group:first-child > .title {
					border-radius: 3px 3px 0 0;
				}

				#Spotlight > .wrapper > .result > .list > .group > .title {
					background: #4C505D;
					font-size: 0.9em;
					padding: 3px 8px;
					color: #00CC69;
				}

				#Spotlight > .wrapper > .result > .list > .group .cat {
					margin-left: 8px;
					font-size: 0.9em;
					color: #888;
				}

				#Spotlight > .wrapper > .result > .list > .group > ul > li {
					padding: 1px 5px;
					color: #596781;
					cursor: pointer;
				}

				#Spotlight > .wrapper > .result > .list > .group > ul > li.sub {
					padding-left: 15px;
				}

				#Spotlight > .wrapper > .result > .list > .group > ul > li:hover {
					background: #EEE;
				}

				#Spotlight > .wrapper > .result > .list > .group > ul > li.selected {
					background: #4f96ed;
					color: #FFF;
				}

					#Spotlight > .wrapper > .result > .list > .group > ul > li > .icon {
						float: left;
					}

					#Spotlight > .wrapper > .result > .list > .group > ul > li > .name {
						float: left;
						margin-left: 5px;
						margin-top: 2px;
						font-size: 0.9em;
					}

			/* PREVIEW */
			#Spotlight > .wrapper > .result:not(.show) > .preview { display: none;	}
			#Spotlight > .wrapper > .result > .preview {
				float: left;
				width: 50%;
				height: calc(100vh - 82px);
				margin-top: 10px;
			}
			
/* Settings Box */
#SettingsBox {
	background: #FFF;
	border-top: 5px solid #4f96ed;
	border-radius: 2px;
	padding: 20px 30px;
	margin-top: 30px;
	box-shadow: 1px 1px 3px #d8dee2;
}

	#SettingsBox > .title,
	#SettingsBox > form > .title {
		padding-bottom: 20px;
	}

		#SettingsBox > .title > .label,
		#SettingsBox > form > .title > .label {
			float: left;
			font-size: 1.2em;
			font-weight: bold;
			padding-top: 2px;
		}

		#SettingsBox > .title > .buttons,
		#SettingsBox > form > .title > .buttons {
			float: right;
		}

			#SettingsBox > form > .title > .buttons > .saved {
				float: left;
				height: 28px;
				line-height: 28px;
				margin-right: 7px;
				font-size: 0.9em;
				display: none;
			}

	#SettingsBox > form {
	}

		#SettingsBox > form > .element {
			margin-bottom: 20px;
		}

		#SettingsBox > form > .element:last-child {
			margin-bottom: 0;
		}

			#SettingsBox > form > .element > .label {
				margin: 3px 5px;
			}

				#SettingsBox > form > .element > .label > .fa {
					margin-right: 5px;
					color: #4f96ed;
				}

			#SettingsBox > form > .element > .input {
			}

				#SettingsBox > form > .element > .input > input.default {
					width: 100%;
				}

					#SettingsBox > form > .element > .input > button.default > .fa {
						color: #4f96ed;
					}

					#SettingsBox > form > .element > .input > button.default:hover > .fa {
						color: #FFF;
					}

		#SettingsBox > form > .element.name {
			float: left;
			margin-right: 20px;
		}