.zf-green {
    color: #68b604;
}

.btn-success {
  background-color: #57a900;
  background-image: -moz-linear-gradient(top, #70d900, #57a900);
  background-image: -ms-linear-gradient(top, #70d900, #57a900);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
  background-image: -webkit-linear-gradient(top, #70d900, #57a900);
  background-image: -o-linear-gradient(top, #70d900, #57a900);
  background-image: linear-gradient(top, #70d900, #57a900);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  background-color: #57a900;
}

.btn-success:active, .btn-success.active {
  background-color: #57a900;
}

div.container a.brand {
    background: url("../img/zf2-logo.png") no-repeat scroll 0 10px transparent;
    margin-left: 0;
    padding: 8px 20px 12px 40px;
}

/****************************************************************************/
/*                             CUSTOM CSS BELOW                             */
/****************************************************************************/

.sidebar-nav ul > li.active {
		box-shadow: 0 5px 5px #666, 0 -5px 5px #666;
    }

    .bg-inverse {
        background-color: #37474F;
        color: #FFFFFF !important;
    }

    .theme-2 .timeline > li.timeline-separator::before {
        line-height: inherit !important;
    }

    .nav > li > a > .nav-icon {
        position: relative;
    }

    .tab-badge {
        position: absolute;
        top: -28px;
        right: -5px;
    }

    .badge-lg {
        min-width: 25px !important;
        min-height: 25px !important;
        padding: 3px 3px;
    }

    .card-heading > .card-title > span > small {
        color: rgba(162, 162, 162, 0.92);
        font-size: 65%;
        line-height: 25px;
    }

    .project-card-section {
        height: 75px;
        overflow: hidden;
    }

    .text-ellipsis {
        text-overflow: ellipsis;
    }

    .btn-circle-small {
      width: 32px;
      height: 32px;
      overflow: hidden;
      border-radius: 50% !important;
      line-height: 32px;
      padding: 0;
      text-align: center;
    }

    .btn-circle-offset {
        position: relative;
        top: -10px;
    }

    .notification-unseen td {
        background-color: #D3E4FF;
    }

    #user-popover {
        min-width: 312px;
        width:312px;
    }

    #user-popover .popover-content {
        margin: 0 auto;
    }

    #user-popover-name-outer-container {
        position: relative;
        height: 100px;
    }

    #user-popover-name-inner-container {
        position: absolute;
        bottom: 0;
    }

    #user-popover-name {
        font-weight: bold;
        font-size: 1.6em;
    }

    #user-popover-job-title {
        font-style: italic;
        font-size: 0.75em;
        color: gray;
    }

    #user-popover-email {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

    .user-popover-icon {
        text-align: center;
    }

    .profile-picture {
        border-radius: 50%;
    }

    .profile-picture-xs {
        width: 35px;
        height: 35px;
    }

    .profile-picture-sm {
        width: 50px;
        height: 50px;
    }

    .profile-picture-md {
        width: 100px;
        height: 100px;
    }

    .profile-picture-lg {
        width: 175px;
        height: 175px;
    }

    #password-strength-container {
        height: 14px;
        padding: 1px;
        border: 1px solid grey;
        /*width: 100%;*/
}

#password-strength {
	height: 10px;
}

.password-criteria-met-text {
	text-decoration: line-through;
}

.password-criteria-met-icon {
	color: #00FF15;
}

.password-criteria-unmet-icon {
	color: #FF2424;
}

.weak-password {
	background-color: #FF2424;
}

.okay-password {
	background-color: #FFAE00;
}

.good-password {
	background-color: #FFEE00;
}

.strong-password {
	background-color: #00FF15;
}

#password-confirm-error {
	display: none;
}

.bg-job {
	background-color: #C69C6D;
	color: #fff !important;
}

.bg-task {
	background-color: #79569E;
	/*background-color: #71A81B;*/
	color: #fff !important;
}

.bg-support {
	background-color: #C1D42F;
	/*background-color: #E2DC07;*/
	color: #fff !important;
}

.bg-email {
	background-color: #00B0DB;
	/*background-color: #7F7F7F;*/
	color: #fff !important;
}

.bg-document {
	background-color: #EC008C;
	/*background-color: #008000;*/
	color: #fff !important;
}

.bg-task-discussion {
	background-color: #6FC9C1;
	/*background-color: #3232EA;*/
	color: #fff !important;
}

.bg-job-discussion {
	background-color: #F5841F;
	/*background-color: #3232EA;*/
	color: #fff !important;
}



.bg-blyth-green {
	background-color: #C1D42F;
	color: #fff !important;
}

.bg-blyth-purple {
	background-color: #79569E;
	color: #fff !important;
}

.bg-blyth-blue {
	background-color: #6FC9C1;
	color: #fff !important;
}

.bg-blyth-orange {
	background-color: #F5841F;
	color: #fff !important;
}

.bg-blyth-bright-blue {
	background-color: #00B0DB;
	color: #fff !important;
}

.bg-blyth-pink {
	background-color: #EC008C;
	color: #fff !important;
}

.card {
	border-radius: 12px;
}

.delete-button {
	cursor: pointer;
}

.speech-bubble {
	top: -10px;
}

.timeline-regular .speech-bubble {
	left: -5px;
}

.timeline-inverted .speech-bubble {
	right: -5px;
}

.timeline-regular .speech-bubble:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	right: -20px;
	top: 20px;
	border: 10px solid;
	border-color: rgba(0, 0, 0, 0.12) transparent transparent rgba(0, 0, 0, 0.12);
}

.timeline-regular .speech-bubble:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	right: -18px;
	top: 21px;
	border: 13px solid;
	border-color: #fff transparent transparent #fff;
}

.timeline-inverted .speech-bubble:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: -20px;
	top: 20px;
	border: 10px solid;
	border-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12) transparent transparent;
}

.timeline-inverted .speech-bubble:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: -18px;
	top: 21px;
	border: 13px solid;
	border-color: #fff #fff transparent transparent;
}

.anchorFillContainer {
	display: block;
	width: 100%;
	height: 100%;
}

#routeInfo {
	display: none;
}

/* Ensures that the navbar is static for non-mobile devices */
@media(min-width: 767px) {
	.navbar {
		position: relative;
	}

	.navbar ~ .tab-content {
		position: absolute;
		top: 57px;
		left: 0;
		right: 0;
		bottom: 0px;
		overflow: auto;
		margin-top: 30px;
	}
}

/* Animation for collapsable navbar */
.navbar-toggle {
	border: none;
	background: transparent !important;
}
.navbar-toggle:hover {
	border: none;
	background: transparent !important;
}
.navbar-toggle .icon-bar {
	width: 22px;
	transition: all 0.2s;
}
.navbar-toggle .top-bar {
	transform: rotate(45deg);
	transform-origin: 10% 10%;
	-ms-transform: rotate(45deg);
	-ms-transform-origin: 10% 10%;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
	opacity: 0;
}
.navbar-toggle .bottom-bar {
	transform: rotate(-45deg);
	transform-origin: 10% 90%;
	-ms-transform: rotate(-45deg);
	-ms-transform-origin: 10% 90%;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
	transform: rotate(0);
	-ms-transform: rotate(0);
	-webkit-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
	opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
	transform: rotate(0);
	-ms-transform: rotate(0);
	-webkit-transform: rotate(0);
}

.project-user-selected {
	background-color: #BFD7FF;
}

.move-member-div {
	width: 100%;
	margin-bottom: 15px;
}

.move-member-div button {
	width: 50%;
}

.notification-emphasise {
	font-style: italic;
	font-weight: bold;
}

.notification-emphasise a {
	/* Do something here to style the hyperlinks on notification page */
}

blockquote {
	font-size: 16px;
	font-style: italic;
}

.discussion-updated-time {
	margin-left: 15px;
}

.project-no-users {
	height: 75px;
	line-height: 75px;
	font-style: italic;
}

.project-users-container {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	height: 75px;
	line-height: 75px;
}

input:focus:invalid {
	border: 1px solid #B80000;
}

#sevenDayActivityChart .c3-axis .tick line {
	stroke: none;
}

#sevenDayActivityChart .c3-bars > path {
	stroke: white !important;
	stroke-width: 2px !important;
}

#timeline-see-more {
	cursor: pointer;
}

.div50 {
	position: relative;
	top: -40px;
	width: 70px;
	height: 70px;
}

#analysisChartGP {
	font-weight: bold;
	width: 100%;
	height: 100%;
	padding-top: 10px;
	border: 3px solid #00B0DB;
	border-radius: 50%;
}

#div-sla-performance {
	text-align: center;
    display: table-cell;
    vertical-align: middle;
	font-weight: bolder;
	font-size: 14pt;
}

.dashboard-figure {
	width: 100%;
	height: 150px;
}

.dashboard-figure-content {
	text-align: center;
	font-size: 52px;
	font-weight: bold;
	width: 100%;
	height: 150px;
	line-height: 150px;
	color: #00B0DB;
}

.table-th-no-hover:hover {
	background-color: inherit !important;
}

.table-hover > tbody > tr:hover {
	background-color: rgb(3, 169, 244, 0.16);
}

.pin-icon {
	position: absolute;
	top: -20px;
	left: -5px;
}

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

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

.form-control-invalid {
	border-color: #f44336 !important;
}

.button-space-right {
	margin-right: 10px;
}

.center-wrapper{
	display: flex;
  	justify-content: center;
}

.yes-no-button{
	margin-top: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

.reset-button{
    padding-left: 40px;
    padding-right: 40px;
}

.dash-boarder-bottom{
    border-bottom: 1px dashed rgba(162,162,162,0.25);
	padding-top:  20px
}