/* normalize */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; outline: none !important; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

input, textarea, select, .include-screenshot, .notify-users {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

/* Controls */
html, body { height: 100%; }
body { background: #444; font-family: verdana,arial,serif; color: #ccddff; font-size: 12px; margin: 0; padding: 7px; text-align: left; }
.left { float:left; text-align: left; }
#screenshots { padding: 4px; white-space: nowrap; overflow: auto; height: 76px; }
#screenshots img { max-height: 72px; max-width: 150px; margin-right: 4px; }
.right { float: right; padding-right: 10px; }
input[type="text"], textarea, select { width: 100%; background: #ccc; border: none; font-family: verdana,arial,serif; color: #444; font-size: 12px; padding: 0;}
textarea {height: 40px; padding: 3px; }
#sendCapture {margin-top: 3px; }
#issue-container { padding: 6px 6px 0; }
#controls { display: none; }
#controls #priority { color: #777; }
#controls #priority option { color: #000; }
button { vertical-align: 1px; cursor: pointer; background-color: #ddd;border-radius: 6px;padding: 3px 9px;border: 1px solid;}
#cancelCapture { background-color: #ccc; width:9%; display: none; }
#cancelCapture, #issue { width: 120px; margin-left: 40px; }
#sendCapture { background-color: #dfd; width: 21% }
button:hover { background-color: white !important; }
.settings { width: 40%; padding-top: 11px; }
.settings label { width: 40%; display: inline-block; text-align: right; margin-bottom: 2px; white-space: nowrap; }
.settings input, .settings select { width: 50%; margin-bottom: 2px; }
h2 { margin: 1px 0; }

.current-issues-container { margin-top: 5px; }

#current-issues { height: 49px; overflow: auto; margin-top: 4px; }
#current-issues a { white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; }
#current-issues a span { display: inline-block; padding-right: 12px; }

.total-issues {
	border: 1px solid #888;
	padding: 5px;
	vertical-align: 1px;
}

.notify-users {
	float: left;
	width: 35%;
	height: 92px;
	overflow: auto;
	overflow-x: hidden;
	margin-top: 5px;
	margin-bottom: 3px;
	border: 1px solid #777;
}

.include-screenshot {
	width: 170px;
	display: inline-block;
	padding: 5px 2px 4px;
	border: 1px solid #888;
}

.new-window { padding: 8px }

.checkbox-label { padding: 6px; display: block; }
.change-url {
	width: 100% !important;
	padding: 4px !important;
}
.change-url.darken {
	background-color: #aaa;
}

#change-url-form {
	display: inline-block;
	transition: all .3s;
	width: 61% !important;
	margin: 0;
	position: relative;
}
#change-url-form div {
	padding-left: 30px;
}
/*#change-url-form.open {
	opacity: 1;
	width: 62% !important;
}*/
.change-url-link {
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	padding: 4px 6px 5px 6px;
	border: 1px solid #777777;
	border-radius: 3px;
	background-color: #4a4a4a;
}

.cover {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}


/* Issues */
#screenshots { padding: 4px; white-space: nowrap; overflow: auto; height: 76px; }
#screenshots img { max-height: 72px; max-width: 150px; margin-right: 4px; }
input[type="text"], textarea { width: 100%; background: #ccc; border: none; font-family: verdana,arial,serif; color: #444; font-size: 12px; padding: 0;}
#view-issues select { background: #444; color: #ccddff; border: 0; width: 100%; font-size: 14px; padding: 3px; }
#view-issues option { color: #ccddff; }
#search { float: right; width: 30%; min-width: 120px; padding: 4px; }
.user-icon { position: fixed;
width: 50px;
right: -10px;
top: 10px; cursor: pointer; }

textarea {height: 34px; padding: 3px; }
#sendCapture {margin-top: 3px; }
#controls { display: none; padding: 6px; margin-top: -18px; }
#controls input, #controls textarea, #controls select { margin: 6px 0.1% 1px 0; padding: 3px }
#controls input, #controls select { width: 37%; }
#controls input, #controls.full-access select, .include-screenshot { width: 18.9%; }

#include_screenshot { margin: 0 !important; }

#location { width: 120px !important; }
#with-selected { width: 160px !important; }

#with-selected, #location { border: 1px solid #888 !important; }

button {cursor: pointer;}
a { color: #cde; }
a:hover { color: #fff; }
.btn { margin: 4px; cursor: pointer; }

.view-comments .comments-container {  display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    padding-bottom: 160px; }
.view-comments form > label { float: left; width: 64%; margin-right: 1%;}
.view-comments form > label.notify-header { float: left; width: 35%; margin: 0;}
.notify-users label { width: 100%; float: none; clear: both; display: block; white-space: nowrap;}
.view-comments .comments-list { height: 85%; overflow: auto; }
.view-comments textarea { margin-top: 5px; width: 64%; margin-right: 1%; height: 130px; border-radius: 4px 0 0 4px; float: left; }
.view-comments form input[type="submit"] {
	float: right;
	height: 36px;
	border-radius: 0 4px 4px 0;
	border: 1px solid black;
	cursor: pointer;
	width: 35%;
}
.view-comments form { bottom: 33px; position: absolute;width: 100%; background: inherit; padding-bottom: 6px; }
.view-comments .comment-title { color: #999; }
.view-comments .comment-title span { color: white; }
.view-comments .comment-log { color: #eca; }
.view-comments .comment-body { padding-left: 30px; margin: 3px 0 12px 0; }

#user-profile input { max-width: 300px; margin-bottom: 3px; padding: 2px; }
#user-profile { max-width: 500px; margin: auto; }
#user-profile .right { float: left; }

.btn.inactive {
	cursor: default !important;
	color: #777 !important;
}

/* SlickGrid */
html, body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

#view_header {
	padding: 6px;
}

#grid-container {
  position: absolute;
  top: 37px;
  left: 0;
  right: 0;
  bottom: 0;
}

.slick-sort-indicator {
	width: 0 !important;
	height: 0 !important;
	float: none !important;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	background: none !important;
}

.slick-sort-indicator-asc
{
	border-bottom: 5px solid;
}

.slick-sort-indicator-desc
{
	border-top: 5px solid;
}

.slick-viewport {
	/*height: 100% !important;*/
	overflow-x: hidden !important;
}

#description h2 {
  padding-left: 0.5em;
}

.slick-header-columns {
    background-color: #555;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
}

body.loading:after {
	content: '';
	display: block;
	background: rgba(68,68,68,0.6);
	z-index: 10;
	width: 100%;
	height: 100%;
	position: absolute;
}

.slick-cell > p {
	padding: 5px;
	margin: 0;
	display: block;
	height: 100%;
}

.slick-cell.r6 {
    white-space: normal;
}

/*.slick-editor { width: 100% !important; max-width: 600px !important; }*/
.slick-editor { border: 0 !important; background: none !important; }

.slick-editor textarea { width: 98% !important; height: 32px; }

@media only screen and (max-height: 360px) {
	.notify-users {
		height: 40px !important;
	}

	.view-comments textarea {
		height: 79px !important;
	}

	.view-comments .comments-container {
	    padding-bottom: 140px !important;
	}
}

@media only screen and (max-width: 768px) {
	body #grid-container .slick-row {
		position: relative !important;
		top: 0 !important;
		height: 97px !important;
	}
	body.full-access #grid-container .slick-cell.l6,
	body.limited-access #grid-container .slick-cell.l5 {
		left: 0 !important;
		top: 42px !important;
		height: 50px;
		width: 112% !important;
		padding-right: 30px;
		background-color: #333;
		border-top: 1px solid #ccc;
		z-index: 2;
		white-space: normal !important;
	}
	body.full-access #grid-container .slick-cell.l7,
	body.limited-access #grid-container .slick-cell.l6 {
		margin-left: -33px !important;
	}
	body.full-access #grid-container .slick-header-column:nth-child(7),
	body.limited-access #grid-container .slick-header-column:nth-child(6){
		opacity: 0;
	}
	body.full-access #grid-container .slick-cell.l7 p,
	body.limited-access #grid-container .slick-cell.l6 p {
		max-width: 60px;
	}
	body.full-access #grid-container .slick-cell.l7 p a,
	body.limited-access #grid-container .slick-cell.l6 p a {
		white-space: normal !important;
	}

	#search {
		width: 98%;
		margin-top: 6px;
	}

	#grid-container {
		top: 67px;
	}
	body #with-selected, body #location {
		width: 35% !important;
	}
	body .slick-editor {
		width: 97% !important;
		left: 1px !important;
	}
}

@media only screen and (max-width: 1200px) {
	.hide-for-medium { display: none; }
}

@media only screen and (max-width: 600px) {
	body.full-access #grid-container .slick-cell.l6 {
		width: 96% !important;
	}
	body.limited-access #grid-container .slick-cell.l5 {
		width: 103% !important;
	}
	.hide-for-small { display: none; }

	.left, .right {
		width: 100% !important;
	}

	#controls input, #controls select, #controls button, .include-screenshot { width: 49.2% !important; }

	#change-url-form {
		width: 82% !important;
		margin-bottom: 3px;
	}

	#user-profile .left { width: 75% !important; }
	#user-profile .right { width: 14% !important; }
	#user-profile { margin: 3px 10px; }

}

@media only screen and (max-width: 480px) {
	body.full-access #grid-container .slick-cell.l6 {
		width: 89% !important;
	}
	body.limited-access #grid-container .slick-cell.l5 {
		width: 99% !important;
	}
}

@media only screen and (max-width: 380px) {
	body.full-access #grid-container .slick-cell.l6 {
		width: 79% !important;
	}
	body.limited-access #grid-container .slick-cell.l5 {
		width: 83% !important;
	}
}





/***************  Colorbox  *****************/
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }
#cboxWrapper { max-width: none; height: 100% !important;}
#cboxWrapper > div:nth-child(2) { height: 100% !important;}
#cboxOverlay { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5) repeat 0 0;}
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; overflow: hidden; height: 100% !important; }
#cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; margin-top: 28px; height: 100% !important; }
#cboxTitle { margin: 0; position: absolute; top: 2px; left: 0; width: 100%; color: #949494; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; border-radius: 4px; }
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; background: #444; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; overflow: hidden !important; }
#colorbox { top: 10% !important; height: 80% !important; outline: 0; border: 4px solid #eee; background-color: #444; border-radius: 12px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); left: auto !important; right: 142px !important; }
#cboxError { padding: 50px; border: 1px solid #cccccc; }
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight { width: 6px; height: 6px; }
#cboxMiddleLeft, #cboxMiddleRight { width: 6px; }
#cboxTopCenter, #cboxBottomCenter { height: 6px; }
#cboxCurrent { position: absolute; bottom: 4px; left: 58px; color: #949494; }
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; }
#cboxSlideshow { position: absolute; bottom: 4px; right: 30px; color: #0092ef; }
#cboxPrevious { position: absolute; bottom: 0; left: 0; width: 25px; height: 25px; text-indent: -9999px; background-color: transparent; background-position: -460px -897px; border-radius: 15px; }
#cboxNext { position: absolute; bottom: 0; left: 27px; width: 25px; height: 25px; text-indent: -9999px; background-color: transparent; background-position: -476px -897px; border-radius: 15px; }
#cboxClose { background: #777; position: absolute; top: 0; right: 0; width: 22px; height: 22px; text-indent: 200px; background-position: -14px -842px; border-radius: 15px; }
#cboxClose:hover { background: #aaa; }
#cboxClose:after { content: 'X'; display: block; height: 20px;left: -192px;position: absolute;top: 4px;width: 20px; }
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); }