:root {
    --red: #ff0000;
	--amber: #FFCC00;
	--green: #32B40D;
	--grey: #BBBBBB;
	--white: #FFFFFF;
	--blue: #00A8FF;
	--light-green: #99DA86;
	--light-amber: #FFE680;
	--light-red: #FF8080;
	--light-grey: #DDDDDD;
	--mid-grey: #858585;
	--font-size-sml: 13px;
	--font-size-norm: 16px;
	--font-size-med: 18px;
	--txt-grey: #0F1319;
}

.bold{
    font-weight: bold;
}

#filter-menu {
	position: absolute;
	left: 0;
	top: 40px;
	margin: 0 auto;
	min-height: 80px;
	height: auto;
	width: 100%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid #cccccc;
	background: #fff;
	display: none;
	min-height: 40px;
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 100;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 14%)
}

.material-icons.md-18 {
	font-size: 22px
}

.material-icons.md-20 {
	font-size: 22px
}

.material-icons.md-24 {
	font-size: 24px
}

.material-icons.md-28,
.material-icons-outlined.md-28 {
	font-size: 28px
}

.material-icons.md-36 {
	font-size: 36px
}

.material-icons.md-48 {
	font-size: 48px
}

.material-icons.md-dark {
	color: rgba(0, 0, 0, 0.54)
}

.material-icons.md-dark.md-inactive {
	color: rgba(0, 0, 0, 0.26)
}

.material-icons.md-light {
	color: rgba(255, 255, 255, 1);
	opacity: 1
}

.material-icons.md-light.md-inactive {
	color: rgba(255, 255, 255, 0.3)
}

.material-icons.red {
	color: var(--red);
	background-color: transparent !important;
	opacity: 1
}

.material-icons.amber {
	color: var(--amber);
	background-color: transparent !important;
	opacity: 1 !important;
}

.material-icons.green {
	color: var(--green);
	background-color: transparent !important;
	opacity: 1
}

.material-icons.grey {
	color: var(--grey);
	background-color: transparent !important;
	opacity: 1
}

.material-icons,
.material-icons-outlined {
	margin: 0px 4px;
	cursor: pointer;
	opacity: .7;
	vertical-align: top;
	padding: 5px
}

.buttons .material-icons:hover,
.private .material-icons:hover,
.timesheet .material-icons-outlined:hover,
.timesheet .material-icons:hover,
#view .material-icons:hover,
.tag-item .material-icons:hover,
.tagTeamImg .material-icons:hover,
.tagImg .material-icons:hover,
.tagOwnerImg .material-icons:hover,
.filter-cont .material-icons:hover,
.addBigComment:hover,
.close .material-icons:hover,
.history .material-icons:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 100%;
	padding: 5px;
	-webkit-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in
}

.no-hover:hover {
	opacity: .7 !important;
	background-color: unset !important
}

.privateBox {
	margin: 0px 0px 0px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: flex !important;
	justify-content: center;
	align-items: center
}

.private {}

.timesheet {}

#activity-icons {
	margin-right: 5px;
	cursor: pointer;
	position: absolute !important;
	right: 20px;
	top: 40px;
	display: flex;
	align-items: center
}

#activity-type {
	margin-right: 5px;
	cursor: pointer;
	position: absolute !important;
	left: 20px;
	top: 30px;
	display: flex;
	align-items: center
}

.no-margin {
	margin: 0px !important
}

.no-padding {
	padding: 0px !important
}

.num-of-teams {
	color: var(--txt-grey);
	padding: 5px;
	font-size: var(--font-size-sml);
	position: absolute;
	right: 0px;
	top: 0px;
	opacity: .5;
	font-weight: bold
}

label.error {
	padding: 6px 8px;
	font-size: var(--font-size-norm);
	line-height: 18px;
	color: #fff;
	background: #FFCC00;
	border-radius: 20px;
	margin-bottom: 20px;
	text-align: center
}

label {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 22px;
	text-align: left;
	color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center
}

h1 {
	padding: 6px 0;
	font-size: 70px;
	line-height: 56px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.8)
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	text-rendering: optimizeLegibility
}

h2 {
	padding: 6px 0;
	font-size: 240%;
	line-height: 22px;
	margin: 0px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.8)
}

div.h2 {
	background: transparent;
	border: 0;
	font-size: 240%;
	height: auto;
	margin: 10px 0px;
	padding: 5px;
	outline: none;
	border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	resize: none;
	width: 100%;
	border: 1px solid transparent;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1.2;
	text-align: center
}

#title {
	margin-top: 50px;
	font-weight: bold
}

.centred {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 200px !important;
	width: 100%;
	height: 100%
}

.no-result {
	font-size: 240%;
	display: flex;
	text-align: center;
	justify-content: center;
	padding: 100px 40px 40px 40px
}

h3 {
	margin-top: 0px;
	margin-bottom: 20px
}

h3 small {
	padding: 6px 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.8)
}

div.h3 {
	background: transparent;
	border: 0;
	font-size: 16px;
	height: auto;
	margin: 2px 0px;
	padding: 5px;
	outline: none;
	border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border: 1px solid transparent;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: none;
	overflow: hidden;
	line-height: 1.4;
	text-align: center
}

[contentEditable=true]:empty:not(:focus):before {
	content: attr(data-placeholder);
	color: #cccccc;
}

div.edit {
	border: 1px solid transparent;
	border-radius: 5px;
	//margin: 10px 0px;
	padding: 7px;
	outline: none;
	width: 100%;
	display: inline-block;
	cursor: pointer;
	-webkit-text-size-adjust: auto
}

div.edit:hover {
	border: 1px solid #ccc;
	width: 100%
}

div.edit:focus {
	//border: 1px solid var(--green);
	background-color: #fff;
	//border-left: 4px solid var(--mid-grey);
	//border-right: 4px solid var(--mid-grey)
}

p.l {
	font-size: 20px;
	line-height: 34px;
	color: #FFFFFF;
	margin: 50px 0px
}

.l {
	padding: 12px 0 0px;
	font-size: 20px;
	line-height: 34px;
	overflow: hidden;
	text-overflow: ellipsis
}

.la {
	padding: 12px 0 2px;
	font-size: 24px;
	line-height: 34px;
	font-weight: 400
}

.login {
	background: url(/img/plan.jpg) left top fixed;
	box-shadow: 0 0 0 2000px rgb(0 0 0 / 70%) inset;
	background-size: cover
}

.column {
	margin-top: 120px
}

#login-header {
	display: flex;
	justify-content: center
}

#login-subheader {
	display: flex;
	justify-content: center;
	font-size: 20px;
	color: #FFFFFF;
	margin-bottom: 50px
}

#login-box {
	width: 500px;
	justify-content: center;
	display: inline-flex
}

.center {
	text-align: center
}

.flex-center {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap
}

.txtSml {
	font-family: 'Roboto', sans-serif;
	font-size: 9px;
	color: #2DB52D;
	font-style: normal;
	font-weight: bold;
	vertical-align: text-top
}

.txt16 {
	font-size: 15px
}

.txt18 {
	font-size: var(--font-size-med)
}

.txt11 {
	font-size: var(--font-size-sml);
	line-height: unset !important
}

.h40 {
	line-height: 34px
}

.field {
	margin: 0;
	padding: 18px 10px;
	font-family: 'Roboto', sans-serif;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
	font-size: var(--font-size-norm);
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background: #FFFFFF;
	border-radius: 10px;
	border: none
}

input: -webkit-autofill,
input: -webkit-autofill:hover,
input: -webkit-autofill:focus,
input: -webkit-autofill:active {
	-webkit-text-fill-color: #333 !important;
	font-family: sans-serif !important;
	font-size: var(--font-size-norm) !important;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
	background-color: #fff !important;
	transition: background-color 5000s ease-in-out 0s
}

.field.half {
	margin: 0;
	width: 220px;
	border-top-left-radius: 10px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset;
	display: inline-block
}

.field.half:nth-of-type(2) {
	margin: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0
}

.field.full {
	margin: 0;
	width: 360px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom: 1px solid #eee;
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset;
	display: block
}

input,
select,
textarea,
button {
	font-size: 100%;
	vertical-align: middle;
	resize: none;
	-webkit-appearance: none
}

button,
.button,
a.button,
a:visited.button {
	margin: 0;
	padding: 18px 10px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
	color: #ffffff;
	background: #088A08;
	border-radius: 10px;
	border: none
}

button:hover,
.button:hover,
a:hover.button {
	background: #16AA16
}

button.grey,
.button.grey,
a.button.grey,
a:visited.button.grey {
	background: #BBB;
	color: #FFFFFF
}

button.grey:hover,
.button.grey:hover,
a:hover.button.grey {
	background: #ccc
}

.button {
	margin: 0;
	width: 440px;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

label,
input[type=button],
input[type=submit],
button {
	cursor: pointer
}

input,
select,
textarea,
button {
	font-size: 100%;
	vertical-align: middle;
	resize: none;
	-webkit-appearance: none
}

input,
textarea,
keygen,
select,
button {
	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	margin: 0em 0em 0em 0em;
	font: 13.3333px Arial;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	//-webkit-text-size-adjust: none;
	cursor: default
}

body {
	overflow-x: hidden;
	background-color: #fff;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-size: var(--font-size-norm);
	color: var(--txt-grey);
	transition: transform .2s;
	-webkit-transition: -webkit-transform .2s
}

body.ps-active {
	-webkit-transform: translate3d(260px, 0, 0);
	-ms-transform: translate3d(260px, 0, 0);
	transform: translate3d(260px, 0, 0);
	overflow: hidden
}

body.ps-active-right {
	-webkit-transform: translate3d(-260px, 0, 0);
	-ms-transform: translate3d(-260px, 0, 0);
	transform: translate3d(-260px, 0, 0);
	overflow: hidden
}

.panel {
	position: fixed;
	top: 0;
	width: 260px;
	height: 100%;
	background-color: #1f1f1f;
	color: #fff;
	overflow: scroll;
	padding-bottom: 40px
}

#left-panel::-webkit-scrollbar {
	opacity: 0;
	width: 0;
	display: none;
	background-color: transparent
}

#left-panel {
	left: 0;
	-webkit-transform: translate3d(-260px, 0, 0);
	-ms-transform: translate3d(-260px, 0, 0);
	transform: translate3d(-260px, 0, 0)
}

#right-panel {
	right: 0;
	-webkit-transform: translate3d(260px, 0, 0);
	-ms-transform: translate3d(260px, 0, 0);
	transform: translate3d(260px, 0, 0)
}

#right-panel::-webkit-scrollbar {
	opacity: 0;
	width: 0;
	display: none;
	background-color: transparent
}

#page {
	margin: 0px auto;
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden
}

header {
	width: 100%;
	height: 60px;
	margin: 0 auto;
	background: #1f1f1f;
	transition: top 0.2s ease-in-out;
	position: fixed;
	top: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: 60px auto 60px;
	grid-auto-flow: column;
	justify-items: center
}

#left-panel-link {
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 5px;
	left: 0px;
	top: 0px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-image: url('/img/dots-logo.png');
	background-color: transparent;
	background-position: center
}

#right-panel-link {
	position: absolute;
	right: 6px;
	top: 7px
}

#help {
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 5px;
	right: 50px;
	top: 0px;
	background-color: #222;
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-image: url('https: //www.ourvuu.com/img/help.png');
	background-color: transparent;
	background-position: center
}

#video {
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 5px;
	right: 100px;
	top: 0px;
	background-color: #222;
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-image: url('https: //www.ourvuu.com/img/video.png');
	background-color: transparent;
	background-position: center
}

.logo {
	position: absolute;
	top: 2px;
	left: 100px
}

.logo img {
	width: 100%;
	max-width: 100%;
	height: 100%
}

.logoAbs {}

#search {
	//margin: 0px auto;
	height: 40px;
	margin-top: 10px;
	// width: 50%;
	//min-width: 560px;
	width: 60%;
	border-radius: 5px;
	background: #333333;
	position: relative
}

#search input {
	float: left;
	height: 30px;
	background-color: transparent;
	border: transparent;
	width: 70%;
	color: #ffffff;
	margin: 5px 0px 5px 10px;
	font-size: 16px;
	font-weight: 500
}

#search #icon {
	float: left;
	margin: 2px 0px 5px 5px;
	display: flex;
	justify-content: center;
	align-items: center
}

#results {
	position: relative;
	top: -5px;
	left: 0px;
	min-height: 80px;
	width: 100%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}

.search-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	left: 0px;
	top: 26px;
	min-height: 40px;
	max-height: 410px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 100;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14)
}

.search-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%
}

.search-list li {
	list-style-position: outside;
	list-style-type: none;
	padding: 14px 10px 14px 10px !important;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	//display: block;
	font-size: var(--font-size-norm);
	margin: 0;
	padding: 0;
	font-weight: normal
}

.search-list li:hover {
	background: #eee;
	color: var(--txt-grey) !important;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .icons {
	width: 25px;
	margin-top: -9px;
	margin-left: px;
	margin-right: 10px;
	opacity: .7;
	float: left;
	height: 25px;
	cursor: pointer;
	display: flex;
	align-content: center;
	justify-content: center
}

.search-list li .project {
	background-size: 25px 25px;
	background-image: url('https: //www.ourvuu.com/img/world.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 12px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .person {
	background-size: 22px 22px;
	background-image: url('https: //www.ourvuu.com/img/person.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 12px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .contributor {
	background-size: 22px 22px;
	background-image: url('https: //www.ourvuu.com/img/contributor.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 12px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .teams {
	background-size: 25px 25px;
	background-image: url('https: //www.ourvuu.com/img/teams.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 12px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .tag {
	background-size: 20px 20px;
	background-image: url('https: //www.ourvuu.com/img/tag.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 15px;
	margin-left: 12px;
	margin-right: 8px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.search-list li .stage {
	background-size: 25px 25px;
	background-image: url('https: //www.ourvuu.com/img/stage.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-top: 12px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: .5;
	float: left;
	height: 25px;
	cursor: pointer;
	display: block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

input:focus {
	outline: none
}

.nav-up {
	top: -60px
}

#content {
	position: absolute;
	top: 50px;
	line-height: 1.4;
	margin: 0px auto;
	width: 100%;
	padding: 30px 20px 20px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

#content #header {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px 0px 0px 0px;
	background-color: #f4f4f4;
	padding: 10px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	display: flex;
	align-items: center;
	padding-bottom: 50px
}

#content #message {
	height: 40px;
	background-color: #FFFFFF;
	margin-bottom: 20px;
	border-radius: 20px;
	justify-content: center;
	display: flex;
	align-items: center;
	color: #FFFFFF
}

.message:hover,
.no-hover:hover {
	text-decoration: none
}

#content #footer {
	background-color: #f4f4f4;
	padding: 30px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px
}

#content #header #team {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
	overflow: visible
}

#content #header #summary {
	position: absolute;
	top: 10px;
	right: 20px;
	display: flex;
	align-content: center;
	-webkit-text-size-adjust: none
}

#content #header #summary a:hover {
	text-decoration: none
}

#content #header #view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

#content #header #filters-list {
	margin-left: 50px;
	display: flex;
	align-items: center
}

#filter-num {
	background-color: #FFFFFF;
	border-radius: 50%;
	color: #000000;
	font-size: 11px;
	border: 2px solid #333;
	position: absolute;
	right: 10px;
	top: 1px;
	width: 22px;
	height: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold
}

#summary #green {
	float: right;
	margin-left: 3px;
	height: 35px;
	width: 32px;
	text-align: center;
	vertical-align: middle;
	line-height: 35px;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 5px solid var(--green);
	color: var(--green);
}

#summary #amber {
	float: right;
	margin-left: 3px;
	height: 35px;
	width: 32px;
	text-align: center;
	vertical-align: middle;
	line-height: 35px;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 5px solid var(--amber);
	color: var(--amber)
}

#summary #red {
	float: right;
	margin-left: 3px;
	height: 35px;
	width: 32px;
	text-align: center;
	vertical-align: middle;
	line-height: 35px;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 5px solid var(--red);
	color: var(--red)
}

#summary #grey {
	float: right;
	margin-left: 3px;
	height: 35px;
	width: 32px;
	text-align: center;
	vertical-align: middle;
	line-height: 35px;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 5px solid #888;
	color: #888;
}

#content .left-wrapper {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px 0px 5px 0px;
	display: flex;
	align-items: center;
	word-break: break-all;
	padding-left: 20px
}

#content .left-wrapper .title {
    position: relative;
    margin: 0px auto;
    width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 10px 0px 0px 100px;
    font-weight: bold;
}



#content .tags-wrapper,
#content .links-wrapper {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 10px;
	min-height: 44px;
	display: flex;
	align-items: center
}

#content .box-border {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 10px;
	//display: flex;
	border-radius: 10px;
	padding: 10px;
	background-color: #FFFFFF;
	min-height: 140px
}

#content .box-header {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px 0px 5px 0px;
	display: flex;
	align-items: center;
	word-break: break-all;
	padding-left: 5px
}



#content .tags-wrapper .centre,
#content .links-wrapper .centre,
#content .left-wrapper .centre,
#content .box-border .centre {
	position: relative;
	//max-width: 900px;
	margin: 0px auto;
	overflow: visible
}

#content .status-wrapper {
	position: relative;
	margin: 0px auto;
	width: 100%;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 20px;
	display: flex;
	align-items: center
}

#content .status-wrapper .box-large {
	float: left;
	margin: 15px 10px 0px 10px;
	width: 400px
}

#content .status-wrapper .centre {
	position: relative;
	max-width: 1070px;
	margin: 0px auto;
	overflow: visible
}

#content .status-wrapper .centre-full {
	position: relative;
	margin: 0px auto;
	overflow: visible;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

#content .status-wrapper .centre .box {
	margin: 15px 10px 0px 10px;
	width: 150px;
	display: inline-block
}

#content .status-wrapper .centre .box .header {
	float: left;
	font-size: var(--font-size-sml);
	color: #858585;
	text-align: center;
	width: 100%;
	margin-bottom: 5px
}

#content .status-wrapper .centre .box .body {
	float: left;
	clear: both;
	width: 100%;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	font-weight: 500;
	display: inline-block;
	cursor: pointer;
	width: 150px;
	border-radius: 5px;
	height: 34px
}

.box input {
	text-align: center;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	border: #eee solid 1px;
	font-weight: 500;
	cursor: pointer;
	background-color: #eee;
	padding: 6px 10px 6px 10px;
	width: 150px;
	border-radius: 5px;
	height: 34px
}

#content .status-wrapper .centre .box .footer {
	float: left;
	margin-top: 3px;
	font-size: var(--font-size-sml);
	text-align: center;
	width: 100%;
	clear: both;
	height: 20px
}

.centre {
	text-align: center
}

.comments {
	//background-color: #FFFFFF;
	border-radius: 10px
}

.list {
	position: relative;
	line-height: 1;
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-left: 5px solid #cccccc;
	border-bottom: 1px solid #eeeeee
}

.list .title {
	position: relative;
	float: left;
	width: 28%;
	min-width: 300px;
	color: #858585;
	padding-right: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.list .private {
	opacity: .9;
	content: "";
	display: inline-block;
	top: 3px;
	position: absolute;
	background-position: center;
	background-size: 15px 15px;
	//background-image: url(https: //www.ourvuu.com/img/private.png) ;
	vertical-align: middle;
	background-repeat: no-repeat;
	width: 15px;
	height: 15px;
	z-index: 0 !important
}
}

.list .field1 {
	float: left;
	min-width: 50px;
	width: 50px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	min-height: 1px;
	text-align: center
}

.list .field2 {
	float: left;
	min-width: 120px;
	width: 120px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	//min-height: 1px;
	text-align: center
}

.list .field3 {
	float: left;
	min-width: 100px;
	width: 140px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	//min-height: 15px
}

.list .field4 {
	float: left;
	width: 50px;
	margin-right: 15px;
	//height: 20px;
	text-align: center;
	position: relative
}

.list .timeAgo {
	float: left;
	min-width: 100px;
	width: 220px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	//min-height: 15px
}

.list .avatar {
	float: left;
	min-width: 100px;
	width: 200px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	//min-height: 15px;
	margin: -3px;
	flex: 1
}

.avatar a:hover {
	text-decoration: none
}

.addCommentBig {
	width: 56px;
	height: 56px;
	position: fixed;
	right: 40px;
	bottom: 40px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 0px 2px 3px 0px rgb(60 64 67 / 30%), 0px 2px 4px 2px rgb(60 64 67 / 15%);
	box-shadow: 0px 2px 3px 0px rgb(60 64 67 / 30%), 0px 2px 4px 2px rgb(60 64 67 / 15%);
	background-color: rgba(255, 255, 255, 1)
}

.new-activity {
	width: 56px;
	height: 56px;
	position: fixed;
	right: 70px;
	bottom: 50px;
	border-radius: 50%;
	cursor: pointer;
	background: #FFFFFF;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 0px 2px 3px 0px rgb(60 64 67 / 30%), 0px 2px 4px 2px rgb(60 64 67 / 15%);
	box-shadow: 0px 2px 3px 0px rgb(60 64 67 / 30%), 0px 2px 4px 2px rgb(60 64 67 / 15%);
	background-color: rgba(255, 255, 255, 1);
	width: auto
}

.new-options {
	width: auto;
	height: auto;
	background: #fff;
	position: absolute;
	display: none;
	bottom: 58px;
	z-index: 100;
	-webkit-box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 1px 3px 1px rgb(60 64 67 / 15%);
	box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 1px 3px 1px rgb(60 64 67 / 15%);
	border-radius: 10px
}

.grid-container .buttons {
	//position: absolute;
	//right: 20px
}

.list .owners {
	float: left;
	min-width: 100px;
	max-width: 300px;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.list .comment {
	float: left;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 15px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	min-height: 45px
}

.comment .hours {
	position: absolute;
	right: 0px;
	top: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 85px
}

.comment-box {
	text-overflow: ellipsis;
	white-space: nowrap;
	//overflow: hidden;
	padding: 10px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 45px;
	background-color: #FFFFFF !important;
	margin: 10px 0px 10px 0px;
	border-radius: 10px;
	display: flex
}

.list .footer {
	float: left;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 15px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	min-height: 45px
}

.lightGreyBg {
	background-color: #f9f9f9
}

.bg-grey {
	background-color: var(--light-grey) !important
}

.bg-green {
	background-color: #90EE90 !important;
	color: #FFFFFF !important
}

.bg-white {
	background-color: #FFFFFF !important
}

.field-white {
	background-color: #FFFFFF !important
}

.list .footerBig {
	height: auto;
	white-space: normal;
	overflow: visible;
	float: left;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer
}

.list .footer .comment,
.comment-box .comment {
	float: left;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	//overflow: hidden;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.list .footer .comment .user,
.list .footerBig .comment .user,
.comment-box .comment .user {
	margin-right: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	margin-left: 15px;
	margin-top: 3px;
	font-weight: bold
}

.list .footer .comment .update,
.list .footerBig .comment .update,
.comment-box .comment .update {
	width: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: var(--font-size-sml);
	line-height: 21px;
	display: inline-block;
	//margin-right: 10px
}

.list .footer .comment .text,
.comment-box .comment .text {
	float: left;
	text-overflow: ellipsis;
	white-space: normal;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 7px
}

.list .footerBig .comment .text {
	height: auto;
	white-space: normal;
	overflow: visible;
	float: left;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer
}

.list .footer .tags {
	height: auto;
	white-space: normal;
	overflow: visible;
	float: left;
	width: 100%;
	padding: 0px 0px;
	background-color: #f9f9f9;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.list .body {
	float: left;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	line-height: normal;
	padding: 6px;
	display: flex;
	align-items: center;
	min-height: 40px
}

a {
	text-decoration: none;
	color: var(--txt-grey)
}

a:hover {
	//color: var(--txt-grey);
	text-decoration: underline
}

.iconImg {
	display: inline-block;
	opacity: 0.6;
	cursor: pointer;
	margin-right: 10px
}

.iconImg:hover {
	opacity: 1
}

.opacity {
	opacity: 0.5
}

.leftBorderRed {
	border-left: 6px solid var(--red)
}

.leftBorderAmber {
	border-left: 6px solid var(--amber)
}

.leftBorderGreen {
	border-left: 6px solid var(--green)
}

.leftBorderGrey {
	border-left: 6px solid var(--grey)
}

.leftBorderBlank {
	border-left: 6px solid transparent
}

.border-red {
	border: 3px solid;
	border-color: #FF0000 !important
}

.border-amber {
	border: 3px solid;
	border-color: var(--amber) !important
}

.border-green {
	border: 3px solid;
	border-color: #32B40D !important
}

.border-grey {
	border: 3px solid;
	border-color: var(--grey) !important
}

.dashRagRed {
	display: inline-block;
	border: 1px dashed #E8E8E8;
	border-left: 5px solid var(--red);
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	min-height: 20px;
	width: 150px;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #ffffff;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.dashRagAmber {
	display: inline-block;
	border: 1px dashed #E8E8E8;
	border-left: 5px solid var(--amber);
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	min-height: 20px;
	width: 150px;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #ffffff;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.dashRagGreen {
	display: inline-block;
	border: 1px dashed #E8E8E8;
	border-left: 5px solid var(--green);
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	min-height: 20px;
	width: 150px;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #ffffff;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.dashRagGrey {
	display: inline-block;
	border: 1px dashed #E8E8E8;
	border-left: 5px solid var(--grey);
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	min-height: 20px;
	width: 150px;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #ffffff;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.menu ul {
	list-style-type: none;
	margin: 0;
	margin-top: 60px;
	padding: 0;
	width: 260px
}

.menu li {
	list-style-position: outside;
	list-style-type: none;
	padding: 0px;
	cursor: pointer;
	text-overflow: ellipsis;
	//white-space: nowrap;
	overflow: visible;
	display: block;
	font-size: var(--font-size-norm)
}

.menu li a {
	color: #fff;
	padding: 6px 20px 6px 6px;
	text-decoration: none;
	//font-weight: 600;
	font-size: var(--font-size-norm);
	-webkit-font-smoothing: antialiased;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	background-color: #1f1f1f;
	display: flex;
	align-items: center
}

.menu li a:hover {
	background-color: #333333;
	color: #fff;
	text-decoration: none
}

.lightGrey {
	color: var(--mid-grey)
}

.grey1 {
	color: #a9a9a9
}

.midGrey {
	color: var(--txt-grey)
}

.comIcon {
	height: 25px;
	width: 25px;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-image: url('https: //www.ourvuu.com/img/comment.png');
	background-color: #777;
	background-position: center;
	cursor: pointer
}

.comment-avatar {
	width: 48px;
	height: 48px;
	margin-left: 5px;
	background-color: #FFFFFF;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: left;
	margin-right: 10px;
	line-height: 0 !important
}

.user-avatar-small {
	width: 36px;
	height: 36px;
	left: 50px;
	margin-right: -7px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
	font-size: 12px;
	padding: 0px !important;
	flex-shrink: 0
}

.grid-item.avatar {
	display: flex;
	align-items: center;
	overflow: hidden
}

.user-avatar-small.border-amber {
	background-color: var(--amber);
	color: #FFFFFF
}

.user-avatar-small.border-green {
	background-color: var(--green);
	color: #FFFFFF
}

.user-avatar-small.border-grey {
	background-color: var(--grey);
	color: #FFFFFF
}

.user-avatar-small.border-red {
	background-color: var(--red);
	color: #FFFFFF
}

.project-edit {}

.red {
	background-color: var(--red) !important;
	color: #FFFFFF
}

.light-red {
	background-color: var(--light-red) !important
}

.light-amber {
	background-color: var(--light-amber) !important
}

.light-green {
	background-color: var(--light-green) !important
}

.light-grey {
	background-color: var(--light-grey) !important
}

.ragComment {
	width: 25px;
	height: 25px;
	margin-right: 5px;
	display: inline-block;
	cursor: pointer;
	//opacity: 0.4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left
}

.ragBox {
	width: 15px;
	height: 15px;
	margin: 0px 10px 0px 15px;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	border-radius: 50%
}

.amber {
	background-color: var(--amber) !important;
	color: #FFFFFF
}

.green {
	background-color: var(--green) !important;
	color: #FFFFFF
}

.grey {
	background-color: var(--grey);
	color: #FFFFFF
}

.noOpacity {
	opacity: 1 !important
}

.greenTxt {
	color: var(--green) !important
}

.amberTxt {
	color: var(--amber)
}

.redTxt {
	color: var(--red)
}

.whiteTxt {
	color: var(--white)
}

.well .ragBar {
	float: left;
	margin-left: 15px;
	margin-top: 5px
}

.well .tagBar {
	position: absolute;
	bottom: 50px;
	left: 0px;
	width: 100%;
	padding-left: 15px;
	margin-bottom: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: visible
}

.tagBar input[type="text"] {}

.grid-container-popup .grid-item .title {
	padding-top: 20px;
	font-weight: bold;
	margin-right: 20px
}

.well .header .username {
	float: left
}

.well .comFooter {
	position: absolute;
	bottom: 0px;
	width: 100%;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top: 1px solid #f5f5f5;
	padding: 16px 16px 16px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.well .comFooter .btns {
	float: right
}

.well .comFooter .btns button {
	padding: 6px 15px;
	-webkit-user-select: none;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	border: 0;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	font-size: var(--font-size-norm);
	font-weight: 500;
	width: auto;
	outline: none;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
	z-index: 0;
	margin-left: 5px;
	text-overflow: ellipsis;
	white-space: nowrap
}

.commentBox {
	background: transparent;
	border: 0;
	font-size: var(--font-size-norm);
	height: 100%;
	margin: 0;
	line-height: 1.4;
	min-height: 18px;
	outline: none;
	position: absolute;
	resize: none;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	white-space: normal;
	padding: 20px;
	display: inline-block;
	//margin-top: 10px;
	cursor: auto !important
}

.commentBox:empty:before {
  content: attr(data-placeholder);
  color: #0F1319; /* Or any color you prefer for the placeholder */
  /* Add any other styling you want for the placeholder text */
}

/* Optional: Style when the div is focused and empty */
.commentBox:focus:empty:before {
  content: attr(data-placeholder); /* Keep placeholder on focus if empty */
  color: #0F1319;
}


.highlighted {
	background-color: #FFFBCC !important
}

.dropdown-contOLD {
	position: relative;
	vertical-align: middle;
	text-align: center;
	border-radius: 5px;
	padding: 10px
}

.dropdown-contOLD:hover {
	background-color: #eee;
	color: var(--txt-grey) !important
}

.dropdown-contOLD .h2txt {
	font-size: 16px
}

.dropdown-contOLD .dropdown-selected {
	font-size: 220%;
	line-height: 34px;
	font-weight: 400;
	cursor: pointer;
	vertical-align: middle
}

.dropdown-contOLD .dropdown-selected:after {
	content: "";
	width: 0px;
	height: 0px;
	display: inline-block;
	position: absolute;
	top: 25px;
	right: 15px;
	border: 6px solid transparent;
	border-top-color: #888;
	margin-left: 5px;
	vertical-align: middle
}

.dropdown-contOLD .dropdown-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	top: 50px;
	margin-left: -10px;
	width: 400px;
	min-height: 40px;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}

.dropdown-contOLD ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1;
	max-height: 300px
}

.dropdown-contOLD li {
	list-style-position: outside;
	list-style-type: none;
	padding: 6px 5px 6px 12px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: block;
	font-size: var(--font-size-norm);
	margin: 0;
	padding: 0;
	font-weight: normal
}

.dropdown-contOLD li a:hover {
	background-color: #eee;
	color: var(--txt-grey) !important
}

.dropdown-contOLD li a {
	color: var(--txt-grey);
	text-decoration: none;
	font-weight: normal
}

.dropdown-cont {
	position: absolute;
	vertical-align: middle;
	text-align: center;
	border-radius: 5px;
	padding: 10px;
	right: 0px;
	top: 0px;
	height: 40px;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid transparent
}

.dropdown-cont:hover {
	background-color: #1f1f1f;
	color: var(--txt-grey) !important;
	border: 1px solid white
}

.dropdown-cont .h2txt {
	font-size: 16px
}

.dropdown-cont .dropdown-selected {
	cursor: pointer;
	vertical-align: middle;
	color: #FFFFFF;
	text-align: right;
	padding-right: 35px;
	padding-left: 20px
}

.dropdown-cont .dropdown-selected:after {
	content: "";
	width: 0px;
	height: 0px;
	display: inline-block;
	position: absolute;
	top: 18px;
	right: 20px;
	border: 6px solid transparent;
	border-top-color: #888;
	margin-left: 5px;
	vertical-align: middle
}

.dropdown-cont .dropdown-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	top: 39px;
	margin-left: -10px;
	width: 300px;
	min-height: 40px;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}

.dropdown-cont ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1;
	max-height: 300px
}

.dropdown-cont li {
	list-style-position: outside;
	list-style-type: none;
	padding: 6px 5px 6px 12px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: block;
	font-size: var(--font-size-norm);
	margin: 0;
	padding: 0;
	font-weight: normal
}

.dropdown-cont li a:hover {
	background-color: #eee;
	color: var(--txt-grey) !important
}

.dropdown-cont li a {
	color: var(--txt-grey);
	text-decoration: none;
	font-weight: normal
}

.lFloat {
	float: left;
	width: 50%;
	margin-bottom: 10px
}

.rFloat {
	float: right;
	width: 50%;
	margin-bottom: 10px
}

.tags,
.links {
	position: relative;
	min-height: 45px;
	align-items: start;
	flex-wrap: wrap;
	justify-content: center
}

.tags.flex,
.links.flex {
	display: flex
}

.tags-selector,
size-selector,
selector,
.links-selector {
	position: relative;
	//display: inline-block
}

.task {
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eeeeee
}

.selector,
.date,
.switcher,
.notes {
	position: relative;
	float: left;
	line-height: 1.0;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 10px
}

.date .text,
.notes .text {
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	line-height: 0 !important;
	padding: 0px;
	margin: 0px
}

.switcher .text {
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	line-height: 0 !important;
	padding: 0px;
	margin: 0px;
	width: 15px;
	height: 15px;
	font-size: var(--font-size-med)
}

.date .text:after {
	vertical-align: inherit;
	display: inline-block;
	width: 25px;
	height: 25px;
	content: "";
	background: url('https: //www.ourvuu.com/img/calendar.png') no-repeat 0 0;
	background-size: 20px 20px;
	opacity: .5;
	cursor: pointer;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	position: absolute;
	right: 10px;
	bottom: 0px
}

.selector .list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	overflow: visible;
	left: 0px;
	top: 100%;
	width: 100%;
	min-height: 40px;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-align: left;
	font-weight: normal
}

.selector input,
.date input,
.notes input {
	color: #000000;
	padding: 0px;
	margin: 0px;
	border: transparent;
	background-color: transparent;
	width: 100%
}

.selector .text {
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.selector ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1;
	max-height: 400px;
	font-size: var(--font-size-norm)
}

.selector li {
	list-style-position: outside;
	list-style-type: none;
	color: var(--txt-grey);
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: block;
	padding: 16px 0 16px 16px;
	margin: 0;
	vertical-align: middle
}

.selector li .milestone,
.milestone {
	display: inline-block;
	vertical-align: inherit;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	content: "";
	background: url('https: //www.ourvuu.com/img/milestone.png') no-repeat 0 0;
	background-size: 20px 20px;
	opacity: .5;
	cursor: pointer;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.milestone {
	vertical-align: text-top
}

.w50 {
	width: 50px
}

.w150 {
	width: 150px
}

.w200 {
	width: 200px
}

.w300 {
	width: 300px
}

.w400 {
	width: 400px
}

.selector li:hover {
	background-color: #eee;
	color: var(--txt-grey) !important
}

.stage-selector {
	position: relative;
	display: inline-block;
	width: 100%
}

.tags-selector .selected,
.stage-selector .selected,
.size-selector .selected {
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	background-color: #eee;
	padding: 5px 10px 5px 10px;
	width: 150px;
	border-radius: 5px;
	border: 1px solid #eee
}

.tags-selector .selected:after,
.stage-selector .selected:after,
.size-selector .selected:after {
	content: "";
	width: 0px;
	height: 0px;
	display: inline-block;
	position: absolute;
	top: 15px;
	right: 10px;
	border: 6px solid transparent;
	border-top-color: #858585;
	margin-left: 5px
}

.tags-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	overflow: visible;
	left: 0px;
	top: 40px;
	width: 300px;
	min-height: 40px;
	max-height: 150px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-align: left;
	font-weight: normal;
	border-radius: 10px
}

.tagCalImg:hover {
	opacity: 1
}

.tagCalImg {
	background-position: center;
	background-size: 25px 25px;
	background-image: url('https: //www.ourvuu.com/img/calendar.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-left: 0px;
	opacity: .5;
	float: left;
	height: 35px;
	cursor: pointer;
	display: inline-block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	border: 1px solid blue
}

.tagTeamImg,
.tagImg,
.tagOwnerImg {
	cursor: pointer;
	display: inline-block;
	padding: 4px 0px 4px 0px
}

input {
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: var(--font-size-norm);
	border: #E8E8E8 solid 1px
}

.tags input,
.links input {
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: var(--font-size-norm);
	padding: 8px 8px;
	border: #E8E8E8 solid 1px;
	margin: 2px 5px 5px 0px;
	border-radius: 5px;
	width: 200px;
	display: flex;
	align-content: center
}

.tags-list ul {
	margin: 0px;
	padding: 0px
}

.tags-list li {
	list-style-position: outside;
	list-style-type: none;
	padding: 10px 10px 10px 10px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: flex;
	font-size: var(--font-size-norm);
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.tags-list li:hover {
	background-color: #eee;
	color: var(--txt-grey) !important;
	position: relative
}

.tags-list li a {
	color: var(--txt-grey);
	text-decoration: none;
	font-size: 15px;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s
}

.tags-list .ti,
.mention-list .ti {
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 5px
}

*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.tag-item {
	display: inline-block;
	border-radius: var(--font-size-norm);
	padding: 8px 12px;
	margin: 4px 6px 4px 0;
	color: #FFFFFF;
	line-height: 1;
	position: relative;
	min-width: 50px;
	text-align: center;
	overflow: hidden;
}

.tag-item .icon {
	margin: -10px 0px;
	padding-right: 10px !important
}

a.tag-item,
div.tag-item {
	position: relative;
	border-radius: 15px;
	padding: 8px 40px 8px 12px;
	margin: 4px 6px 4px 0;
	background-color: rgba(0, 0, 0, 0.06);
	color: #3d3d3d;
	line-height: 1;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	cursor: pointer;
	display: inline-flex;
	align-items: center
}

a.tag-item.amber,
div.tag-item.amber {
	background-color: var(--amber);
	color: #FFFFFF
}

a.tag-item.red,
div.tag-item.red {
	background-color: var(--red);
	color: #FFFFFF
}

a.tag-item.green,
div.tag-item.green {
	background-color: var(--green);
	color: #FFFFFF
}

a.tag-item.grey,
div.tag-item.grey {
	background-color: var(--grey);
	color: #FFFFFF
}

a.tag-item.blue,
div.tag-item.blue,
.blue {
	background-color: var(--blue);
	color: #FFFFFF
}

a.tag-item:hover {
	text-decoration: none
}

.tag-item a:hover {
	color: #FFFFFF !important
}

a.tag-item .delete {
	position: absolute;
	top: 0px;
	right: -4px
}

.tag-item-delete {
	position: absolute !important;
	right: -4px
}

.well {
	min-height: 20px;
	background: #ffffff;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	display: none;
	-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
	z-index: 2000;
	width: 600px
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

#slide_background {
	-webkit-transition: all 0.1s 0.1s;
	-moz-transition: all 0.1s 0.1s;
	transition: all 0.1s 0.1s
}

#slide,
#slide_wrapper {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s
}

#slide {
	-webkit-transform: translateX(0) translateY(20%);
	-moz-transform: translateX(0) translateY(20%);
	-ms-transform: translateX(0) translateY(20%);
	transform: translateX(0) translateY(20%)
}

.popup_visible #slide {
	-webkit-transform: translateX(0) translateY(0);
	-moz-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0)
}

.well .close {
	position: absolute;
	right: 0px;
	top: 20px;
	cursor: pointer;
	-webkit-transition: background .2s .1s
}

html.noscroll {
	position: fixed;
	overflow-y: scroll;
	width: 100%
}

.list .team {
	float: left;
	width: 50px;
	margin-right: 15px;
	//height: 20px;
	text-align: right;
	position: relative
}

.opacity1,
.opacity1:after {
	opacity: 1 !important
}

.field-txt {
	font-weight: 500;
	display: inline-block;
	cursor: pointer;
	background-color: #eee;
	padding: 6px 10px 6px 10px;
	width: 150px;
	border-radius: 5px;
	height: 34px;
	border: 1px solid #eee;
	text-overflow: ellipsis;
	overflow: hidden
}

.box .dates,
.type-dropdown-txt {
	font-weight: 500;
	display: inline-block;
	cursor: pointer;
	background-color: #eee;
	padding: 6px 10px 6px 10px;
	width: 150px;
	border-radius: 5px;
	border: 1px solid #eee
}

.box .dates:after {
	content: "";
	background-position: center;
	background-size: 20px 20px;
	background-image: url('https: //www.ourvuu.com/img/calendar.png');
	background-repeat: no-repeat;
	width: 25px;
	margin-left: 7px;
	opacity: .5;
	float: right;
	height: 20px;
	cursor: pointer;
	display: inline-block;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	position: absolute
}

.spacer {
	margin-bottom: 20px
}

.inline {
	display: block;
	margin-bottom: 10px;
	align-items: center
}

.passBox {
	width: 500px
}

button.ui-datepicker-close {
	display: none
}

#icon .break {
	border-left: 1px solid #555;
	margin-left: 20px;
	margin-right: 10px
}

.filter-cont {
	position: absolute;
	text-align: center;
	border-radius: 5px;
	right: 0px;
	top: 0px;
	height: 40px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid transparent;
	display: flex
}

.filter-cont .filter-selected {
	cursor: pointer;
	color: #FFFFFF;
	text-align: right;
	padding-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center
}

.filter-cont .filter-menu {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	top: 39px;
	right: 0px;
	width: 300px;
	max-height: 350px;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	font-size: var(--font-size-norm);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}

.filter-menu .reset,
.search-list .reset {
	padding: 14px 20px 10px 16px;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	text-align: right;
	float: right
}

.reset-menu {
	border-bottom: 1px solid #eee;
	height: 42px
}

.filter-menu .all,
.search-list .all {
	padding: 14px 16px 10px 16px;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	text-align: left;
	color: var(--green)
}

.filter-menu .reset span a:hover,
.filter-menu .all span a:hover,
.search-list .reset span a:hover,
.search-list .all span a:hover {
	text-decoration: none;
	color: var(--red);
	background-color: none
}

li.header {
	display: inline-block;
	width: 100%;
	padding: 0;
	margin: -2px
}

li.header:hover {
	background-color: unset
}

.header span {
	padding: 12px 0 12px 16px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: block;
	font-size: var(--font-size-norm);
	font-weight: bold;
	background-color: #f4f4f4;
	border-bottom: 1px solid white;
	position: relative
}

.header span:after {
	content: "";
	width: 0px;
	height: 0px;
	display: inline-block;
	position: absolute;
	top: 18px;
	right: 20px;
	border: 6px solid transparent;
	border-top-color: #000000;
	margin-left: 5px;
	vertical-align: middle
}

ul.filters {
	display: none;
	margin: 0
}

.filters li {
	padding: 10px 5px 10px 16px
}

.filters li .on {
    width: 25px;
    margin-right: 10px;
    opacity: .5;
    /* Remove float if you can, as it can conflict with flexbox layout */
    /* float: left; */
    height: 25px;
    cursor: pointer;
    /* Change display to flex */
    display: flex;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    background-color: grey;
    border-radius: 50%;
}

.my-red-class {
	color: #0000FF
}

.email-banner {
	background: #1f1f1f;
	height: 80px;
	padding: 10px
}

.email-banner-text {
	color: #FFFFFF;
	float: left
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, auto));
	gap: 8px;
	width: 100%;
	align-items: center
}

box-sizing: border-box;
white-space: nowrap;
overflow: visible
}

*/ .grid-item {
	min-width: 50px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	display: flex;
	align-items: center
}

.grid-item .no-overflow {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.align-right {
	justify-items: right;
	text-align: right
}

.align-center {
	justify-items: center;
	text-align: center
}

.align-left {
	//justify-items:left;
	text-align: left;
	justify-content: left
}

.grid-container-popup {
	display: grid;
	white-space: nowrap;
	align-items: center
}

.grid-container-popup .grid-item {
	text-overflow: ellipsis;
	position: relative;
	padding: 0px 0px 20px 0px;
	border-radius: 10px;
	margin: 0px 20px
}

.grid-container-popup .btns {
	float: right
}

.grid-container-popup .btns button {
	padding: 6px 30px;
	-webkit-user-select: none;
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	border: 0;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	cursor: pointer;
	font-size: var(--font-size-norm);
	width: auto;
	margin-left: 5px
}

.grid-container-popup .ragBar {
	float: left;
	margin-left: 15px;
	margin-top: 5px
}

.grid-container-popup .ragComment {
	width: 27px;
	height: 27px;
	margin-right: 10px;
	cursor: pointer;
	//opacity: 0.4;
	float: left;
	border-radius: 100px;
	margin-top: 5px;
	display: flex;
	justify-content: center;
	align-items: center
}

.grid-container-popup #body {
	height: 185px;
	margin-bottom: 10px
}

.grid-container-popup #timesheet-fields,
.grid-container-popup #fields,
.grid-container-popup #timesheets {
	padding: 0px 20px 0px 20px !important
}

.to-front {
	z-index: 100;
	overflow: visible !important
}

[data-title] {
	display: inline-block;
	position: relative
}

[data-title]:before {
	content: attr(data-title);
	display: none;
	position: absolute;
	background: #444;
	color: #fff;
	padding: 4px 10px;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
	border-radius: 4px;
	bottom: 100%;
	left: 0;
	visibility: hidden;
	margin: 0px 0px 5px 0px;
	white-space: nowrap
}

[data-title-position="left"]:before {
	left: 100%;
	-ms-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%)
}

[data-title]:hover:before,
[data-title]:hover:after {
	display: block;
	z-index: 11;
	transition: all 0.1s ease 0.5s;
	visibility: visible
}

.grid-item.avatar,
.grid-item.links {
	overflow: visible
}

.ui-widget-content {
	border: 1px solid var(--light-grey);
	background: var(--white);
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 14%);
	margin-left: -8px;
	margin-top: 6px
}

.ui-widget-header {
	border: none;
	background: transparent;
	color: #222222;
	font-weight: bold
}

.ui-widget {
	font-family: unset;
	font-size: unset
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: unset;
	background: unset;
	font-weight: normal;
	color: #555555;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px
}

.ui-datepicker-calendar .ui-state-hover {
	background: var(--light-grey);
	border-radius: 100%
}

.ui-datepicker td {
	border: 0;
	padding: 0;
	height: 30px
}

.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: 0;
	text-align: center;
	text-decoration: none;
	width: 30px;
	height: 30px
}

.ui-datepicker-calendar .ui-state-active {
	background: var(--green);
	border-radius: 100%;
	color: var(--white)
}

.ui-icon,
.ui-widget-content .ui-icon {
	background-image: unset
}

.ui-datepicker .ui-datepicker-prev {
	position: absolute;
	top: 10px;
	right: 40px;
	left: unset;
	border: solid var(--grey);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	border-radius: 0px;
	width: 10px;
	height: 10px
}

.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 10px;
	right: 10px;
	border: solid var(--grey);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	border-radius: 0px;
	width: 10px;
	height: 10px
}

.ui-datepicker .ui-datepicker-title {
	margin: 4px 10px;
	line-height: unset;
	text-align: left
}

.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 10px;
	right: 10px;
	border: solid var(--grey);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	border-radius: 0px;
	width: 10px;
	height: 10px
}

.ui-datepicker .ui-datepicker-next-hover {
	border: solid var(--green);
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background: unset
}

.ui-datepicker .ui-datepicker-prev-hover {
	border: solid var(--green);
	border-width: 0 2px 2px 0;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background: unset
}

.ui-datepicker .ui-datepicker-buttonpane {
	box-shadow: none
}

.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: unset;
	cursor: pointer;
	padding: 0.2em 0.6em 0.3em 0.6em;
	width: 100%;
	overflow: visible;
	font-size: 12px;
	color: var(--green);
	opacity: 1
}

#ui-datepicker-div button.ui-datepicker-close {
	display: none
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 10px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 10px
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 10px
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 10px
}

.field-cont {
	margin: 10px 8px 0px 8px;
	width: 150px;
	display: inline-block
}

.field-cont .header {
	float: left;
	font-size: var(--font-size-sml);
	color: var(--mid-grey);
	text-align: center;
	width: 100%;
	margin-bottom: 5px
}

.field-cont .body {
	float: left;
	clear: both;
	width: 100%;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	font-weight: 500;
	display: inline-block;
	cursor: pointer;
	width: 150px;
	border-radius: 5px;
	height: 36px;
	background-color: #FFFFFF;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: unset !important;
	border: 1px solid #f4f4f4
}

.field-cont input {
	text-align: center;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	height: 100%;
	border: transparent;
	margin: 0 5px;
	background-color: transparent
}

.field-cont .footer {
	float: left;
	margin-top: 3px;
	font-size: var(--font-size-sml);
	text-align: center;
	width: 100%;
	clear: both;
	height: 20px
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.field-cont .field-selector:after {
	content: "";
	width: 10px;
	height: 10px;
	display: inline-block;
	position: absolute;
	top: 14px;
	right: 10px;
	border: 6px solid transparent;
	border-top-color: #858585;
	margin-left: 5px
}

.field-cont .field-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	overflow: visible;
	left: 0px;
	top: 40px;
	width: 220px;
	min-height: 40px;
	max-height: 150px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 120;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-align: left;
	font-weight: normal;
	border-radius: 10px
}

.field-cont .field-list ul,
.mention-list ul {
	margin: 0px;
	padding: 0px
}

.field-cont .field-list li,
.mention-list li {
	list-style-position: outside;
	list-style-type: none;
	padding: 10px 10px 10px 10px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: visible;
	display: flex;
	font-size: var(--font-size-norm);
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	//color: var(--txt-grey)
	line-height: 1;
}

.field-cont .field-list li:hover,
.mention-list li:hover {
	background-color: #eee;
	//color: var(--txt-grey) !important
}

.field-cont .field-list li a,
.mention-list li a {
	//color: var(--txt-grey);
	text-decoration: none;
	font-size: 15px;
	// -webkit-transition: background .2s .1s;
	// transition: background .2s .1s
}

ul {
	margin: 7px 0;
	padding: 0px
}

ul.bottom-margin {
	margin: 0px 0px 7px 0;
	padding: 0px
}

li {
	list-style-position: outside;
	list-style-type: none;
	padding: 4px 30px 4px 0px;
	cursor: pointer;
	text-overflow: ellipsis;
	//white-space: nowrap;
	display: block;
	overflow: hidden;
	display: flex;
	align-items: center
}

li:hover {
	background-color: #eee;
	color: var(--txt-grey);
	-webkit-transition: background .2s .1s;
	transition: background .2s .1s;
	text-decoration: none
}

li a:hover {
	text-decoration: none
}

.field-cont .body:hover {
	background-color: #eee
}

.no-decor {
	cursor: default !important
}

.no-padding-left {
	padding-left: 0px !important
}

.no-margin-left {
	margin-left: 0px !important
}

a:hover.no-hover {
	color: var(--txt-grey);
	text-decoration: none !important;
	opacity: 1 !important;
	cursor: pointer !important
}

.no-overflow {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: normal
}

.overflow {
	overflow: visible !important
}

.bullet {
	margin: 5px
}

::-webkit-scrollbar {
	width: 10px
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
	//box-shadow: inset 0 0 5px grey;
	border-right: 1px solid #cccccc;
	//border-top: 1px solid #cccccc;
	//border-bottom: 1px solid #cccccc
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
	background: #888
}

.blob {
	border-radius: 50%;
	background: rgba(255, 204, 0, 1);
	transform: scale(1);
	animation: pulse-black 2s infinite;
	width: 33px;
	height: 33px;
	display: flex !important;
	justify-content: center;
	align-items: center
}

.blob.blob-amber {
	background: rgba(255, 204, 0, 1);
	animation: pulse-amber 2s infinite
}

@keyframes pulse-amber {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 204, 0, 0)
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 204, 0, 0)
	}
}

.blob.blob-red {
	background: rgba(255, 0, 0, 1);
	animation: pulse-red 2s infinite
}

@keyframes pulse-red {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 0, 0, 0)
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0)
	}
}

.blob.blob-green {
	background: rgba(50, 180, 13, 1);
	animation: pulse-green 2s infinite
}

@keyframes pulse-green {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(50, 180, 13, 0.7)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(50, 180, 13, 0)
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(50, 180, 13, 0)
	}
}

.blob.blob-grey {
	background: rgba(187, 187, 187, 1);
	animation: pulse-gray 2s infinite
}

@keyframes pulse-gray {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(187, 187, 187, 0.7)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(187, 187, 187, 0)
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(187, 187, 187, 0)
	}
}

#actType {
	margin-right: 8px
}

li.break {
	border-top: 1px solid #333;
	margin: 10px 20px;
	cursor: default
}

.sml-balloon {
	display: inline-flex;
	margin-left: 5px;
	font-size: 11px;
	border-radius: 10px;
	background-color: var(--light-grey);
	padding: 3px 6px;
	position: absolute;
	top: -14px;
	right: 12px;
	justify-content: center;
	align-items: center;
	min-width: 30px
}

.sml-balloon-inside {
	display: flex;
	margin-left: 5px;
	font-size: 11px;
	border-radius: 10px;
	background-color: var(--light-grey);
	padding: 3px 6px;
	position: absolute;
	top: -8px;
	right: -20px;
	justify-content: center;
	align-items: center;
	border: 2px solid white;
	min-width: 30px
}

.sml-balloon-inline {
	font-size: 11px;
	border-radius: 10px;
	background-color: var(--light-grey);
	padding: 3px 6px;
	right: 5px;
	justify-content: center;
	align-items: center;
	justify-items: right;
	margin-left: auto;
	//max-width: 100px;
	//overflow: hidden;
	//text-overflow: ellipsis
}

.mention-list {
	border: 1px solid #cccccc;
	background: #fff;
	position: absolute;
	display: none;
	overflow: visible;
	width: 240px;
	min-height: 40px;
	max-height: 150px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99;
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	text-align: left;
	font-weight: normal;
	border-radius: 10px
}

.mentioned {
	//display: inline-block
}

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
	body {
		-webkit-text-size-adjust: 110% !important
	}

	.grid-container-popup .btns button {
		padding: 6px 15px !important
	}

	#content .status-wrapper .box-large {
		width: 100% !important;
		margin: 0px !important
	}

	#content #header #filters-list {
		display: none !important
	}

	.new-activity {
		right: 40px !important;
		bottom: 40px !important
	}

	.well {
		display: none;
		margin: 0px;
		border-radius: 0px;
		width: 100%;
		height: 100%
	}

	.grid-container .plansLink,
	.grid-container .documentLink,
	.grid-container .collaborationLink,
	.grid-container.headings {
		display: none
	}

	.grid-container {
		grid-template-columns: 40px minmax(80px, auto) minmax(50px, auto) !important;
		height: 50px
	}

	.commentBox {
		font-size: var(--font-size-med)
	}

	.column-1,
	.column-2,
	.column-3,
	.column-4,
	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9 {
		display: none
	}
}

@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
	body {
		-webkit-text-size-adjust: 110% !important
	}

	.grid-container .size,
	.grid-container .stage,
	.grid-container .projMan,
	.grid-container .sponsor,
	.grid-container .priority,
	.grid-container .timeAgo,
	.grid-container .lead,
	.grid-container .targetDate,
	.grid-container .avatar {
		display: none
	}

	.column-2,
	.column-3,
	.column-4,
	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9 {
		display: none
	}

	.grid-container {
		grid-template-columns: 40px minmax(80px, auto) minmax(130px, auto);
		height: 50px
	}

	#content #header #filters-menu {
		display: none
	}

	#search input::-webkit-input-placeholder {
		color: transparent
	}

	#search input: -moz-placeholder {
		color: transparent
	}

	#search input::-moz-placeholder {
		color: transparent
	}

	#search input : -ms-input-placeholder {
		color: transparent
	}

	.list .title {
		width: 85%
	}

	#search {
		height: 40px;
		margin-top: 10px;
		border-radius: 5px;
		background: #333333;
		width: 100%
	}

	#results {
		position: absolute;
		left: 0;
		top: 40px;
		margin: 0 auto;
		min-height: 80px;
		height: auto;
		width: 100%;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px
	}

	.search-list {
		max-height: none;
		height: 100%
	}

	.list .links {
		position: absolute;
		right: 10px;
		width: 40px
	}

	.list .links .collaborationLink {
		margin-top: 5px
	}

	.list .links .plansLink {
		margin-top: 5px
	}

	#content .status-wrapper .centre {
		position: relative;
		margin: 0 auto;
		overflow: visible
	}

	.list .field2 {
		text-align: left
	}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

	.grid-container .lead,
	.grid-container .projMan {
		display: none
	}

	.column-3,
	.column-4,
	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9 {
		display: none
	}
}

@media screen and (min-width: 1025px) and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) {
	.grid-container .lead {
		display: none
	}

	.column-4,
	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9 {
		display: none
	}
}

@media screen and (min-width: 1201px) and (max-width: 1382px) and (-webkit-min-device-pixel-ratio: 2) {
	#content .status-wrapper .box-large {
		width: 360px
	}

	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9 {
		display: none
	}
}

@media only screen and (min-width: 1383px) and (-webkit-min-device-pixel-ratio: 2) {
	#content .status-wrapper .box-large {
		width: 360px
	}
}

.indent {
	padding-left: 20px !important
}

.tag-limiter {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap
}

.grid-table {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(40px, auto) minmax(200px, auto) minmax(120px, auto) minmax(80px, auto) minmax(60px, auto) minmax(100px, auto) minmax(100px, auto) minmax(60px, auto) minmax(150px, auto) minmax(40px, auto);
	gap: 8px;
	background: #f4f4f4
}

.grid-row {
	display: contents;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #ddd
}

.grid-row.header {
	font-weight: bold;
	background: #f5f5f5
}

.grid-row>div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: flex-start
}

.grid-row .icon-column {
	justify-content: center;
	flex: 0 0 auto;
	position: relative;
	overflow: visible !important
}

.grid-row .project-column {
	justify-content: flex-start
}

.grid-row .lead-column,
.grid-row .stage-column,
.grid-row .progress-column,
.grid-row .owner-column,
.grid-row .date-column,
.grid-row .priority-column,
.grid-row .avatar-column {
	justify-content: flex-start
}

.grid-row .button-column {
	justify-content: flex-end;
	min-width: 40px;
	margin-right: 30px
}

.grid-row a,
.grid-row span {
	max-width: 100%;
	text-overflow: ellipsis
}

.tag {
	display: inline-block;
	background: #ddd;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px
}

.avatars {
	display: flex;
	flex-wrap: nowrap
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	border-radius: 50%;
	font-size: var(--font-size-sml);
	margin-right: -7px;
	background: #ccc;
	flex-shrink: 0;
	border: 2px solid white;
	line-height: 0
}

.avatar.green {
	background: #4caf50;
	color: #FFFFFF
}

.avatar.grey {
	background: #999;
	color: #FFFFFF
}

.avatar.amber {
	background: #ffb300;
	color: #FFFFFF
}

.avatar.blue {
	background: #2196f3;
	color: #FFFFFF
}

.avatar.purple {
	background: #9c27b0;
	color: #FFFFFF
}

.balloon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	background: #fff;
	padding: 4px 6px;
	border-radius: 10px;
	font-size: 12px;
	position: relative;
	top: -10px;
	right: 0;
	line-height: 1
}

.date-column {
	position: relative;
	padding-right: 30px;
	display: flex;
	align-items: center
}

.date-column>span {
	margin-right: 4px
}

.red-text {
	color: #FF0000
}

.blue-text {
	color: #2196f3
}

.purple-text {
	color: #9c27b0
}

.material-icons {
	font-size: 20px
}

.full-row {
	grid-column: 1 / -1
}

.full-row .comment {
	background-color: #fff !important;
	border-radius: 10px;
	padding: 10px
}

.full-row .comment-indent {
    margin: 10px 30px 10px 100px;
}

.full-row .comment-featured {
    margin: 30px 100px 30px 100px;
}

.full-row .comment-list {
    margin: 10px 100px 10px 100px;
}

.full-row .comment .user {
	font-weight: bold;
	margin-top: 5px
}

.full-row .comment .update {
	display: inline;
	font-size: var(--font-size-sml)
}

.full-row .comment .text {
	padding-top: 15px;
	padding-left: 5px
}

.grey-background {
	background: #f4f4f4
}

.clear-both {
	clear: both
}

.logoAbs img {
	width: 200px;
	height: auto
}