/* Main Styles */
/* ----------------------------------- */

* {
	box-sizing:border-box;
}
body {
	font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	background: #F5F5F5;
}

.flash {
	max-width: 680px;
	margin: 1em auto;
	border: 1px solid transparent;
	text-align: center;
	color: #eee;
}
.flash button {
	background: #eee;
	border: none;
}
.flash.warning {
	background-color: #FF5722;
}
.flash.error {
	background-color: #F44336;
}
.flash.info {
	background-color: #2196F3;
}
.flash.success {
	background-color: #4CAF50;
}

.valid {
	color: green;
}
.invalid {
	color: red;
}

a {
	color: #888;
}
a:hover {
	color: #0D47A1;
}

p.sql {
	font-family: "Consolas", monospace;
	background: #ddd;
	color: #444;
	font-size: 10pt;
}

.required {
	color: #B71C1C;
}

.text-muted {
	color: #aaa;
}

summary {
	cursor: pointer;
}

/* Login Box */
/* ----------------------------------- */

#login {
	width: 360px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -180px;
	margin-top: -130px;
	background-color: #f3f3f3;
	border: 1px solid #aaa;
	box-shadow: 4px 4px 10px rgba(1,1,1,0.4);
	padding: 2em;
}
#login img {
	display: block;
	width: 80%;
	margin: 0 auto 1ex;
}
#login p {
	margin: 0 0 1.5em;
}
#login label {
	display: block;
	font-size: 80%;
	margin-bottom: 4px;
}
#login input {
	width: 100%;
	margin-bottom: 1em;
	padding: 4px;
	border: 1px solid #ddd;
}
#login button {
	display: block;
	margin: 1ex auto 0;
	width: 80%;
	background: #24408E;
}

/* Core Structure */
/* ----------------------------------- */

#main {
	margin-left: 240px;
	padding: 0 4em;
	height: 100vh;
	overflow-y:scroll;
}
nav {
	position: absolute;
	width: 240px;
	background: #282D3A;
	background: -webkit-linear-gradient(left, #282D3A 90%, #262931);
	background: -o-linear-gradient(left, #282D3A 90%, #262931);
	background: -moz-linear-gradient(left, #282D3A 90%, #262931);
	background: linear-gradient(to right, #282D3A 90%, #262931);
	height: 100vh;
	overflow-y: scroll;
	padding-bottom: 2em;
	z-index: 10;
}

nav span.badge {
	float: right;
	display: inline-block;
	margin-top: -3px;
	color: #888;
	background: #1C1F25;
	border-radius: 8px;
	border: 1px solid #191919;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) inset;
	padding: 2px 10px;
}

nav span.badge.warning {
	background: #D32F2F;
	color: #dedede;
}

nav::-webkit-scrollbar { width: 0 !important }
nav { -ms-overflow-style: none; }

nav ul {
	margin: 0; padding: 0;
	font-size: 11pt;
}
nav ul li {
	list-style-type: none;
	display: block;
	clear: both;
}
nav .fa {
	font-size: 14px;
}
nav a .fa {
	margin-right: 1ex;
	width: 16px;
	text-align: center;
	color: #A5A5A5;
}

nav ul li a, nav ul li span {
	display: block;
	padding: 0.55em 1em;
	text-decoration: none;
	color: #E4E4E4;
}
nav ul li a:hover {
	background: #42444C;
	color: #ddd;
}

nav li.user {
	background: #1C1F25;
	padding: 4px 0;
}
nav li.user div#icon {
	float: left;
	width: 20px;
	height: 20px;
	background: #999;

	color: #444;
	border: 1px solid #ddd;
	border-left: 3px solid #ddd;

	margin: 16px 10px;
	text-align: center;
}

nav li.user.Online div#icon {
	border-color: #0f0;
	background: #00D700;
	color: #006E00;
}
nav li.user.Away div#icon, nav li.user.Busy div#icon {
	border-color: orange;
	background: yellow;
	color: #DF7200;
}
nav li.user.Offline div#icon {
	border-color: #f00;
	background: #D70000;
	color: #6E0000;
}

nav li.user span {
	font-size: 10pt;
}

#jumpTo {
	width:48px;
	border: none;
	border-bottom:1px solid #bbb;
	background: none;
	text-align: center;
	color: inherit;
	font-size: inherit;
}
#jumpTo:focus {
	outline: none;
}

/* Session Alerts */
/* ----------------------------------- */

.alert {
	background: #fff;
	margin: 1em 0;
	padding: 1em;
}
.alert a {
	color: #eee;
}

.alert.success {
	background: #4caf50;
	color: #fff;
}
.alert.info {
	background: #03a9f4;
	color: #fff;
}
.alert.error {
	background: #f44336;
	color: #fff;
}

/* Publication Alerts */
/* ----------------------------------- */

.alert.publication {
	background: #e4e4e4;
	color: #4e4e4e;
	box-shadow: 1px 1px 4px #bbb;
}
.alert.publication form {
	margin-top: 0.5rem;
}
.alert.publication .input-group {
	margin-bottom: 1rem;
}
.alert.publication label {
	color: #F44336;
	display: block;
	margin-bottom: 0.2rem;
}
.alert.publication .suggestion {
	color: #F44336;
}

/* Ticket List Views */
/* ----------------------------------- */

#view-select {
	background: none;
	border: none;
	padding-bottom: 2px;
	padding-right: 1rem;
	margin-right: 0.5rem;
	border-bottom: 1px solid #777;
	font-weight: bold;
	font-family: inherit;
}
#view-select:focus {
	outline: none;
}

#save-view {
	color: #fff;
	background: #1e88e5;
	padding: 4px 1rem;
	border: none;
}
#make-default-view {
	color: #fff;
	background: #4caf50;
	padding: 4px 1rem;;
	border: none;
}
#remove-view {
	color: #fff;
	background: #e53935;
	padding: 4px 1rem;;
	border: none;
}

#save-view-form {
	max-width: 400px;
}
#save-view-form label {
	font-size: 0.9rem;
	margin-bottom: 2px;
}
#save-view-form input[type="text"] {
	width: 100%;
}
#save-view-form select {
	width: 100%;
	margin: 0.5rem 0;
}
#save-view-form button {
	margin-top: 0.5rem;
}

/* Input Forms */
/* ----------------------------------- */

/*form div {
	display: inline-block;
	padding: 1em 2em;
	background: #eee;
	margin-bottom: 1em;
}
form div label {
	margin-bottom: 1ex;
	display: block;
}
form div input, form div select {
	margin-bottom: 1ex;
}
form div button {
	display: block;
	padding: 4px 1em;
}*/

.btn {
	background: #9E9E9E;
	background: linear-gradient(#9E9E9E, #6E6E6E);
	border: #020202;
	color: #fff;
	border-radius: 6px;
	padding: 4px 1em;
}

.btn:focus {
	outline: none;
}

.btn-default {
	background: #0400E1;
	background: linear-gradient(#0400E1, #010AA0);
	border: #170099;
	color: #fff;
	border-radius: 6px;
	padding: 4px 1em;
}
.btn-success {
	background: #45BB00;
	background: linear-gradient(#45BB00, #0F9400);
	border: #2D9900;
	color: #fff;
	border-radius: 6px;
	padding: 4px 1em;
}
.btn-danger {
	background: #E10000;
	background: linear-gradient(#E10000, #A00101);
	border: #900;
	color: #fff;
	border-radius: 6px;
	padding: 4px 1em;
}
.btn-warn {
	background: #EDD800;
	background: linear-gradient(#EDD800, #C09900);
	border: #C09900;
	color: #fff;
	border-radius: 6px;
	padding: 4px 1em;
}

/*
OK BUTTONS:
	background: #9CCF5F;
	border: 1px solid #6B8E41;
*/

/* Labels */
/* ----------------------------------- */

.label {
	/*border-radius: 4px;*/
	box-shadow: inset 0px 0px 4px rgba(1,1,1,0.1);
	color: #fff;
	display: block;
	text-align: center;
	padding: 1ex 1em;
	font-size: 0.9em;
}

.label.requires-approval {
	background: #f44336;
}
.label.requires-charge-approval {
	background: #ff9800;
}

.label.new {
	background: #00BCD4;
}
.label.assigned, .label.progress {
	background: #BBB;
}
.label.hold {
	background: #FF9800;
}
.label.info {
	background: #1565C0;
}
.label.solved {
	background: #4CAF50;
}
.label.closed {
	background: #009688;
}

/* Tables */
/* ----------------------------------- */

table.main {
	width: 100%;
	border-collapse: collapse;
	font-size: 11pt;
	margin: 1em 0 2em 0;
}
table.main thead tr {
	border-bottom: 2px solid #555;
}
table.main tbody tr {
	border-bottom: 1px solid #555;
}
table.main tbody tr:hover {
	background: #eee;
}
table.main th, table.main td {
	padding: 1ex 1em;
}

table.main tr.disabled {
	color: #ddd;
}

table#tickets {
	font-size: 14px;
}
table#tickets th, table#tickets td {
	padding: 1ex;
}
table#tickets .label {
	font-size: 14px;
}
table#tickets .publication {
	margin-top: 0.5rem;
	font-style: italic;
	color: #999;
}

table#tickets tbody tr {
	transition: opacity 0.2s;
}

table#tickets.selecting tbody tr {
	opacity: 0.5;
}

table#tickets.selecting tbody tr.selected {
	opacity: 1;
}

#related-tickets {
	width: 100%;
	margin-top: 1em;
	border-collapse: collapse;
}

#related-tickets tr {
	border-bottom: 1px solid #DDD;
}

#related-tickets th, #related-tickets td {
	padding: 1ex 1em;
}

.panel {
	margin: 1em 0;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 1em 2em;
	overflow: hidden;
}
.panel label {
	display: block;
	margin-bottom: 1ex;
}
.panel input {
	margin-bottom: 1ex;
}

form>header {
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	padding-bottom: 1ex;
	margin-bottom: 1em;
}

form#new-ticket {
	margin: 1em 0;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 1em 2em;
	max-width: 800px;
}
form#new-ticket label {
	display: block;
	font-weight: bold;
	margin-bottom: 1ex;
}
form#new-ticket input, form#new-ticket textarea,  form#new-ticket select {
	width:100%;
	padding: 6px;
	margin-bottom: 1em;
}
form#new-ticket input, form#new-ticket textarea {
	width:100%;
}
form#new-ticket textarea {
	height: 8em;
}

#queueFields>div {
	background: #F7F7F7;
	padding: 1em;
	margin-bottom: 1ex;
}

form#search, form#input {
	position: relative;
	display: inline-block;
	margin: 1em 0;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 1em 2em;
}
form#search label, form#input label {
	display: inline-block;
	font-weight: bold;
	margin: 1ex 1em 1ex 0;
}

form label em {
	font-weight: normal;
	color: #888;
}

.selectize-control {
	margin-bottom: 1ex;
}

#ticket {
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 0 2em;
	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
#ticket.query {
	/*background: #E3F2FD;*/
	/*color: #0D47A1;*/
}
#ticket.overdue {
	/*background: #FFEBEE;*/
	/*color: #B71C1C;*/
}

#ticket h2 {
	margin-top: 0;
}

.ticket {
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 0 2em;
	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	margin-bottom: 1rem;
}

.ticket .body {
	background: #fffad4;
	border: 1px solid #ddd;
	color: #424242;
	padding: 1em;
	max-height: 26.5em;
	overflow-y: auto;
	box-shadow: 1px 1px 5px #eee inset;
}

.ticket-tab {
	display: inline-block;
	background: #ddd;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-bottom: none;
	text-decoration: none;
	color: #000;
}

.ticket-tab.active {
	background: #fff;
}

.ticket-tab .label {
	margin-top: 6px;
}

tr.ticket {
	border: initial;
	box-shadow: initial;
	background: initial;
	padding: initial;
	overflow: initial;
	overflow-wrap: initial;
	word-wrap: initial;
	margin-bottom: initial;
}

#update-alert-callout {
	position: fixed;
	background: #2196F3;
	color: #FFF;
	padding: 1.11em 1ex 1.11em 16em;
	top: 0;
	left: 16px;
	right: 16px;
	z-index: 5;
	display: none;
}
#update-alert-callout a {
	color: #eee;
}

#ticket .body {
	background: #fffad4;
	border: 1px solid #ddd;
	color: #424242;
	padding: 1em;
	max-height: 26.5em;
	overflow-y: auto;
	box-shadow: 1px 1px 5px #eee inset;
}

#ticket form {
	margin: 6px;
}
#ticket form input, #ticket form select {
	width: 50%;
	max-width: 240px;
}

table.metadata {
	font-size: 0.9em;
	margin-bottom: 1em;
}
table.metadata th {
	text-align: left;
	padding-right: 2em;
}
table.metadata td {
	color: #555;
}

#timer-info {
	width: 100%;
}
#timer-info tbody {
	font-size: 11pt;
}
#timer-info tbody tr:hover {
	background: #fafafa;
}

#timer-info th {
	text-align: left;
}
#timer-info th, #timer-info td {
	padding: 4px 1em;
}
#timer-info em {
	font-style: normal;
	color: #aaa;
}

#timer-info button {
	cursor: pointer;
}
#timer-info form button {
	width: 100%;
	color: #fff;
	border: none;
	padding: 1ex;
}
#timer-info form button.primary {
	background: #2196F3;
}
#timer-info form button.cancel {
	background: #F44336;
}

.comment {
	margin: 1em 0;
	width: 75%;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 0 2em;
	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	transition: background 2s ease-in, border-color 2s ease-in;
}
.comment .user {
	float: left;
}
.comment .timestamp {
	color: #aaa;
	float: right;
}
.comment hr {
	clear: both;
	border-bottom: 1px solid #ddd;
}
.comment .body {
	margin: 1.2em 0;
}
.comment.mine {
	margin-left: 25%;
}
.comment.private {
	background: #EAEAEA;
	color: #555;
	border-color: #fff;
}
.comment.updated {
	border-color: #2196F3;
	background: #E3F2FD;
}
.comment .copied_to {
	font-style: italic;
	color: #AAA;
}

.comment .sla {
	font-style: italic;
	color: #AAA;
}
.comment .sla .pass {
	color: green;
}
.comment .sla .fail {
	color: red;
}

#update, #notes, #review, #timer-review {
	margin: 1em 0;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 4px #ddd;
	background: #fff;
	padding: 1em 2em;
}

#comment {
	margin-bottom: 1ex;
}

#review, #notes {
	overflow: hidden;
}
#update label {
	display: block;
	font-weight: bold;
	margin-bottom: 0.5ex;
}
#update textarea {
	width:100%;
	height: 8em;
}

.note {
	background: #fffad4;
	width: 95%;
	padding: 1ex;
	overflow: hidden;
}
.note header {
	font-weight: bold;
	font-size: 11pt;
	margin-bottom: 1ex;
}
.note textarea {
	font-family: inherit;
	width: 100%;
	border: none;
	background: none;
	resize: none;
	height: 12em;
	margin-bottom: 1ex;
}
.note textarea:focus {
	outline: none;
}
.note button {
	float: right;
	background: #c8e6c9;
    color: #444;
    padding: 1ex;
    border: none;
    cursor: pointer;
}
.note button:focus {
	outline: none;
}

.attachment {
	display: inline-block;
	border: 1px solid #ddd;
	background-color: #f3f3f3;
	border-radius: 6px;
	padding: 6px;
	margin: 0 1em 1em 0;
}
.attachment a {
	text-decoration: none;
	color: #000;
}
.attachment a:hover {
	color: #444;
}

hr {
	border: none;
	border-bottom: 1px solid #bbb;
}

.ticket.query {
	background: #E3F2FD; color: #0D47A1;
	border-bottom: 1px solid;
	border-right: 1px solid;
}
.ticket.query td:first-child {
	background: #1565C0; color: #E3F2FD;
}
.ticket.overdue {
	background: #FFEBEE; color: #B71C1C;
	border-bottom: 1px solid;
	border-right: 1px solid;
}
.ticket.overdue td:first-child {
	background: #C62828; color: #FFEBEE;
}
.ticket.hold {
	background: #ECECEC; color: #555;
	border-bottom: 1px solid;
	border-right: 1px solid;
}
.ticket.hold td:first-child {
	background: #A0A0A0; color: #ECECEC;
}


div.assigned {
	position:relative;
	padding:1ex; border-radius:6px; border: 1px dotted black;
}
div.assigned ul {
	list-style-type: none;
	padding: 0;
	position: absolute;
	z-index: 1;
	border: 1px solid #777;
	width: 150px;
	font-size: 0.9em;
	max-height: 300px;
	overflow-y: scroll;
}
div.assigned ul>li {
	padding: 1ex;
	border-bottom: 1px solid #777;
}
div.assigned ul>li:hover {
	background: #eee;
}

div.assigned.user.Online { background: #CFFFCF; color: #006E00; border-color: #006E00; }
div.assigned.user.Away td:first-child , div.assigned.user.Busy td:first-child { background: #FFEDCC; color: #DF7200; border-color: #DF7200; }
div.assigned.user.Offline td:first-child { background: #FFEBEE; color: #B71C1C; border-color: #B71C1C; }

table .user.Online td:first-child { background: #CFFFCF; color: #006E00; border-color: #006E00; }
table .user.Away td:first-child , table .user.Busy td:first-child { background: #FFEDCC; color: #DF7200; border-color: #DF7200; }
table .user.Offline td:first-child { background: #FFEBEE; color: #B71C1C; border-color: #B71C1C; }

table .user.Online:hover td:first-child { background: #BBFFBB; }
table .user.Away:hover td:first-child , table .user.Busy:hover td:first-child { background: #FFE9BF; }
table .user.Offline:hover td:first-child { background: #FFE6DF; }

tr.queue, tr.ticket {
	cursor: pointer;
}

i.priority { font-size: 1.5em; }
i.priority.Low { color: #2196F3; }
i.priority.Normal { color: #BDBDBD; }
i.priority.Urgent { color: #FF9800; }
i.priority.Emergency { color: #F44336; }

.ticket .pass {background: #CFFFCF; color: #006E00;}
.ticket .fail {background: #FFEBEE; color: #B71C1C;}

span.updated {
	background: #4CAF50;
	color: white;
	padding: 2px 10px 3px;
	border-radius: 8px;
	font-size: 90%;
	margin-right: 1ex;
}

.hidden {
	display: none;
}

div.pagination {
	margin: 0 auto;
	text-align: center;
}

ol.pagination {
	list-style-type: none;
	margin: 0 0 2em;
	padding: 0;
}
ol.pagination>li {
	display: inline-block;
	border: 1px solid #ddd;
	background: #fff;
	margin: 0.5ex;
	box-shadow: 1px 1px 2px #ddd;
}
ol.pagination>li>a, ol.pagination>li>span {
	text-decoration: none;
	display: block;
	text-align: center;
	width: 3em;
	padding: 1ex;
}
ol.pagination>li>span {
	background: #ddd;
	color: #777;
}
ol.pagination>li>a:hover {
	background: #fcfcfc;
}

ol#ratingPicker {
	margin: 0; padding: 0;
	display: inline-block;
}
ol#ratingPicker li {
	list-style-type: none;
	margin: 0; padding: 0;
	display: inline-block;
}


dl {
	max-width: 650px;
}
dl a {
	display: block;
	text-decoration: none;
	color: #000;
	padding: 1ex;
	margin-bottom: 1ex;
}
dl a:hover {
	display: block;
	background-color: #efefef;
}

dl dt {
	font-size: 14pt;
}
dl dd {
	margin: 0;
	color: #888;
}

/* Realtime Connection Status / Info */
/* ----------------------------------- */

#connection {
	margin-bottom: 1em;
}
#connection #status {
	color: #fff;
	padding: 0 1em;
}
#connection.active {
	background: #66BB6A;
	border: 2px solid #66BB6A;
}
#connection.inactive {
	background: #42A5F5;
	border: 2px solid #42A5F5;
}
#viewers {
	padding: 1em;
	background: #fff;
}
#viewers ul {
	list-style-type: none;
	padding: 0;
	margin: 1em 1ex 0;
}
#viewers ul li {
	display: inline-block;
	margin-right: 1em;
	background: #66BB6A;
	color: #fff;
	padding: 1ex 1em;
	font-size: 0.9em;
}

/* Attachment Uploaders */
/* ----------------------------------- */

#upload {
	border: 1px dashed #ddd;
	padding: 1em;
	cursor: pointer;
	background-color: #fafafa;
}
#upload.dragOver, #upload:hover {
	border-color: #2196F3;
	background-color: #F5F8FA;
}
#fileInput {
	display: none;
}
ul#fileList {
	list-style-type: none;
	margin: 0 0 1em;
	border: 1px dashed #ddd;
	border-top: none;
	padding: 1em;
}
#fileList li {
	padding: 2px;
}
#fileList .placeholder {
	color: #777;
}
#fileList .success {
	color: #43A047;
}
#fileList .warning {
	color: #FF9800;
}
#fileList .error {
	color: #F44336;
}

#attachments {
	margin-bottom: 1em;
}
#attachments #uploaders input {
	display: inline-block;
	width: 60%;
}

input[type="file"]:hover {
	cursor: pointer;
}
input[type="file"]:focus {
	outline: none;
}

.vis-timeline {
	background: #fff;
}
.vis-item {
	border: 1px solid #ddd;
	background: #f3f3f3;
}
.vis-item a {
	color: inherit;
	text-decoration: none;
}
.vis-item small {
	color: #bbb;
}

/* Profile Picures */
/* ----------------------------------- */

.avatar {
	vertical-align: middle;
	width: 40px;
	border-radius: 50%;
}

.comment .user, .comment .status, .comment .timestamp {
	line-height: 40px;
}

/* Profile Picure Upload */
/* ----------------------------------- */

#profile-picture-crop {
	display: none;
}
#profile-picture-crop button {
	padding: 1rem;
	background: #222;
	color: #fff;
	border: none;
	width: 100%
}

.crop-wrapper {
	background-color: rgba(255, 255, 255, 1);
	background: url(/img/grid.png);
	background-position: center;
	position: relative;
	width: 100%;
	height: 256px;
	overflow: hidden;
}

.resize-container {
	position: relative;
	display: inline-block;
	cursor: move;
	margin: 0 auto;
}

.resize-container-ontop {
	position: absolute;
	cursor: move;
	background-color: rgba(5, 255, 5, 0);
	z-index: 1000;
	width: 100%;
	height: 100%;
}

.resize-container img {
	display: block;
}

.resize-container:hover img, .resize-container:active img {
	outline: 2px dashed rgba(0, 0, 0, .9);
}

.resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw {
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, .9);
	z-index: 999;
}

.resize-handle-nw {
	top: -5px;
	left: -5px;
	cursor: nw-resize;
}

.resize-handle-sw {
	bottom: -5px;
	left: -5px;
	cursor: sw-resize;
}

.resize-handle-ne {
	top: -5px;
	right: -5px;
	cursor: ne-resize;
}

.resize-handle-se {
	bottom: -5px;
	right: -5px;
	cursor: se-resize;
}

.top-overlay {
	z-index: 990;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	height: 50%;
	margin-top: -64px; /* Half Crop Size */
	position: absolute;
}

.bottom-overlay {
	z-index: 990;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	height: 50%;
	margin-bottom: -64px; /* Half Crop Size */
	position: absolute;
	bottom: 0;
}

.right-overlay {
	z-index: 990;
	background-color: rgba(0, 0, 0, .5);
	width: 50%;
	height: 128px; /* Crop Size */
	top: 50%;
	margin-top: -64px; /* Half Crop Size */
	margin-left: -64px; /* Half Crop Size */
	position: absolute;
}

.left-overlay {
	z-index: 990;
	background-color: rgba(0, 0, 0, .5);
	width: 50%;
	height: 128px; /* Crop Size */
	top: 50%;
	right: 0px;
	margin-top: -64px; /* Half Crop Size */
	margin-right: -64px; /* Half Crop Size */
	position: absolute;
}

.overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -66px; /* Half Crop Size + Border Width */
	margin-top: -66px; /* Half Crop Size + Border Width */
	z-index: 999;
	width: 128px; /* Crop Size */
	height: 128px; /* Crop Size */
	border: solid 2px rgba(222, 222, 222, .9);
	box-sizing: content-box;
	pointer-events: none;
}

.overlay:before {
	top: 0;
	margin-left: -2px;
	margin-top: -40px;
}

.overlay:after {
	bottom: 0;
	margin-left: -2px;
	margin-bottom: -40px;
}

.overlay-inner:before {
	left: 0;
	margin-left: -40px;
	margin-top: -2px;
}

.overlay-inner:after {
	right: 0;
	margin-right: -40px;
	margin-top: -2px;
}