@CHARSET "UTF-8";

#myGoals #emptyState {
	display: none;
}

#myGoals #emptyState {
	text-align: center;
}

#myGoals #emptyState .raketko {
	background: url(../../../images/myGoal/emptyGoal.svg);
	height: 150px;
	width: 150px;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
	background-repeat: no-repeat;
}

#myGoals #emptyState .heading {
	font-size: 36px;
	font-weight: 400;
	margin-top: 36px;
}

#myGoals #emptyState .text {
	padding: 30px 20%;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
}

#myGoals.empty #emptyState {
	display: block;
}

#myGoals.empty .content, #myGoals.empty .background {
	display: none;
}

#myGoals h2 {
	clear: both;
	font-size: 2.1875em;
	color: #333333;
	padding-right: 0.5em;
	margin-bottom: 26px;
	margin-top: 82px;
}

#myGoals .background {
	background: url(../../../images/myGoal/progress.jpg);
	position: fixed;
	width: calc(100% - 256px);
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.15;
	z-index: -1;
	top: 60px;
	left: 256px;
	right: auto;
	bottom: 0;
	-webkit-filter: grayscale(100%);
	-moz-kit-filter: grayscale(100%);
	-o-kit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#myGoals .cardHeader {
	padding: 20px;
}

#myGoals .cardHeader .title {
	font-size: 20px;
	font-weight: 500;
}

#myGoals .cardHeader .settings {
	float: right;
	font-size: 16px;
	color: #009fe3;
	cursor: pointer;
}

#myGoals .cardHeader .settings .fa {
	padding-right: 8px;
}

#myGoals .legend ul:after {
	clear: both;
	content: '';
	display: block;
}

#myGoals .legend ul {
	margin: 20px;
}

#myGoals .legend ul li {
	width: 50%;
	float: left;
	padding-left: 20px;
	min-height: 40px;
	margin-bottom: 20px;
	background: transparent !important;
}

#myGoals .legend ul li:before {
	content: '';
	display: block;
	position: absolute;
	width: 8px;
	height: 40px;
}

#myGoals .legend ul li.blue:before {
	background-color: #419fd8;
}

#myGoals .legend ul li.purple:before {
	background-color: #8f3e97;
}

#myGoals .legend ul li.green:before {
	background-color: #4cad4c;
}

#myGoals .legend ul li.yellow:before {
	background-color: #fdc010;
}

#myGoals .legend ul li.lime:before {
	background-color: #cddc37;
}

#myGoals .legend ul li.pink:before {
	background-color: #e71f63;
}

#myGoals .legend ul li.red:before {
	background-color: #d31f26;
}

#myGoals .legend ul li.orange:before {
	background-color: #f26f46;
}

#myGoals .legend ul li.brown:before {
	background-color: #795548;
}

#myGoals .legend ul li.grey:before {
	background-color: #607d8b;
}

#myGoals .legend ul li .category {
	padding-left: 20px;
	font-size: 17px;
	font-weight: 500;
	padding: 3px 0 3px 20px;
}

#myGoals .legend ul li .date {
	font-size: 14px;
	padding-left: 20px;
	font-weight: 300;
}

#myGoals .col {
	position: relative;
}

#myGoals .lSSlideOuter .lSPager.lSpg {
	display: none;
}

#myGoals .shortGoals {
	padding-top: 32px;
}

#myGoals .shortGoals .categoryTitle {
	text-align: center;
	font-size: 22px;
}

#myGoals .shortGoals .goalContent {
	padding: 36px 0;
}

#myGoals .shortGoals .goalName {
	font-weight: 500;
	font-size: 18px;
}

#myGoals .shortGoals .description {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.3;
	padding: 10px 0;
}

#myGoals .shortGoals .due {
	font-weight: 500;
}

#myGoals .shortGoals .shortGoal {
	padding-top: 20px;
}

#myGoals .lSAction>.lSPrev:before {
	content: "\f104";
}

#myGoals .lSAction>.lSPrev {
	left: -10px;
}

#myGoals .lSAction>.lSNext:before {
	content: "\f105";
}

#myGoals .lSAction>a {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 30px;
	cursor: pointer;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #009fe3;
	padding: 0 16px;
	top: 11px;
	opacity: 1;
}

#myGoals .lSSlideOuter .lSPager.lSpg>li.active a, .lSSlideOuter .lSPager.lSpg>li:hover a
	{
	background-color: #009fe3;
}

#myGoals .lSSlideOuter .lSPager.lSpg>li a {
	background-color: #e4e4e4;
}

#myGoals .lSAction>a:hover {
	text-decoration: none;
}

#myGoals .shortGoalsList {
	margin-top: 20px;
	max-height: 400px;
	overflow: auto;
}

#myGoals .shortGoalsList li {
	padding-bottom: 16px;
	border-bottom: 1px dashed #e4e4e4;
	margin-bottom: 13px;
}

#myGoals .shortGoalsList li:last-of-type {
	border-bottom: none;
}

#myGoals .shortGoalsList .number {
	display: inline-block;
	background-color: #009fe3;
	color: #fff;
	height: 36px;
	width: 36px;
	line-height: 36px;
	border-radius: 50%;
	text-align: center;
}

#myGoals .shortGoalsList .goalInfo {
	display: inline-block;
	width: calc(100% - 140px);
	vertical-align: middle;
	padding-left: 16px;
}

#myGoals .shortGoalsList .due {
	font-size: 14px;
	font-weight: 300;
	padding-top: 4px;
}

#myGoals .shortGoalsList .status {
	float: right;
	position: relative;
}

#myGoals .shortGoalsList .status .complete-goal {
	color: rgba(0, 159, 227, 0.8);
	font-size: 16px;
	cursor: pointer;
	transition: color 200ms ease-in-out;
	position: absolute;
	right: 0;
	font-weight: 500;
	width: 116px;
	top: 11px;
}

#myGoals .shortGoalsList .status .mdi-navigation-check {
	color: rgba(125, 125, 125, 0.8);
	font-size: 26px;
	cursor: default;
	transition: color 200ms ease-in-out;
	vertical-align: top;
	margin-right: 13px;
	padding-top: 6px;
}

#myGoals .shortGoalsList .status .complete-goal:hover {
	color: #009fe3;
}

#myGoals .shortGoalsList .status .mdi-action-thumb-up {
	font-size: 22px;
	color: rgba(0, 0, 0, 0.87);
}

#myGoals .shortGoal button {
	margin: 20px 0;
	cursor: pointer !important;
}

/* Goal end */
#goalEnd {
	width: 470px;
	min-height: 400px;
	padding: 0;
	position: relative;
	perspective: 800px;
	background-color: transparent;
	text-align: center;
}

#goalEnd #goalContent.shortTermGoal, #goalEnd #goalContent.longTermGoal
	{
	width: 100%;
	height: 100%;
	position: absolute;
	/* transform-style: preserve-3d; */
	/* transition: transform 1s; */
}

#goalEnd #goalContent figure {
	margin: 0;
}

#goalEnd #goalContent.shortTermGoal figure .front, #goalEnd #goalContent.longTermGoal figure .back
	{
	margin: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

#goalEnd #goalContent.shortTermGoal .front, #goalEnd #goalContent.longTermGoal .front
	{
	background: #fff;
	z-index: 2;
	transform: rotateY(0deg);
}

#goalEnd .flipped .front {
	display: none;
}

#goalEnd #goalContent.shortTermGoal .back, #goalEnd #goalContent.longTermGoal .back
	{
	background: #fff;
	transform: rotateY(-180deg);
	opacity: 0;
}

#goalEnd #goalContent.shortTermGoal.flipped .back, #goalEnd #goalContent.longTermGoal.flipped .back
	{
	opacity: 1;
}

#goalEnd #goalContent.shortTermGoal.flipped, #goalEnd #goalContent.longTermGoal.flipped
	{
	transform: rotateY(-180deg);
}

#goalEnd .back .backContent {
	opacity: 0;
	transition: all 3000ms ease-in-out;
	visibility: hidden;
	display: none;
}

#goalEnd .back .backContent.showContent {
	opacity: 1;
	visibility: visible;
	display: block;
}

#goalEnd #goalContent.shortTermGoal.flipped .front .close-button,
	#goalEnd #goalContent.longTermGoal.flipped .front .close-button {
	display: none;
}

#goalEnd .goalName {
	padding-top: 50px;
	background-color: transparent !important;
}

#goalEnd .goalName .name {
	font-size: 28px;
	position: relative;
	padding-bottom: 8px;
	margin-bottom: 8px;
}

#goalEnd .goalName .name:after {
	height: 2px;
	display: block;
	content: '';
	width: 50px;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	right: 0;
	left: 0;
}

#goalEnd .goalName.blue .name:after {
	background-color: #419fd8;
}

#goalEnd .goalName.yellow .name:after {
	background-color: #fdc010;
}

#goalEnd .goalName.lime .name:after {
	background-color: #cddc37;
}

#goalEnd .goalName.pink .name:after {
	background-color: #e71f63;
}

#goalEnd .goalName.red .name:after {
	background-color: #d31f26;
}

#goalEnd .goalName.green .name:after {
	background-color: #4cad4c;
}

#goalEnd .goalName.purple .name:after {
	background-color: #8e3f97;
}

#goalEnd .goalName.orange .name:after {
	background-color: #f26f46;
}

#goalEnd .goalName.brown .name:after {
	background-color: #795548;
}

#goalEnd .goalName.grey .name:after {
	background-color: #607d8b;
}

#goalEnd .goalName .date {
	font-weight: 300;
	margin-bottom: 32px;
}

#goalEnd .text {
	font-size: 22px;
	padding: 32px 38px 16px;
	font-weight: 300;
	line-height: 1.3;
	border-top: 1px dashed #e4e4e4;
}

#goalEnd .error .text {
	color: #f44336;
}

#goalEnd .goalText {
	padding-bottom: 26px;
	font-size: 18px;
	max-height: 50px;
	overflow-y: auto;
}

#goalEnd .question {
	margin-top: 32px;
	font-size: 24px;
	margin-bottom: 31px;
}

#goalEnd .currentState-wraper {
	padding: 20px 20px 26px 20px;
}

#goalEnd .buttons {
	padding-bottom: 20px;
}

#goalEnd .buttons button {
	float: none;
	margin: 0 6px;
	min-width: 130px;
	line-height: 34px;
	border: 1px solid #009fe3;
}

#goalEnd .buttons .line {
	background: transparent;
	border: 1px solid #009fe3;
	color: #009fe3;
}

#goalEnd .newDateText {
	padding-top: 50px;
	font-size: 18px;
}

#goalEnd select {
	display: inline;
}

#goalEnd .ui-datepicker {
	width: 320px;
	padding: 20px 0 0 0;
	margin: 0 auto;
}

#goalEnd .ui-datepicker td a, #goalEnd .ui-datepicker th span {
	text-align: center;
	height: 18px;
	width: 18px;
	margin: 0 auto;
}

#goalEnd .ui-datepicker td span, #goalEnd .ui-datepicker td a {
	text-align: center;
}

#goalEnd .ui-datepicker td a.ui-state-active {
	background: #009fe3;
	color: #fff;
	border-radius: 50%;
	line-height: 18px;
}

#goalEnd .back .buttons {
	margin-top: 10px;
}

#goalEnd .congrats {
	font-size: 32px;
	padding-top: 50px;
}

#goalEnd .raketko {
	background: url("../../../images/lections/intro/intro1.svg") no-repeat
		center;
	height: 140px;
	width: 120px;
	margin: 15px auto 10px;
	background-size: contain;
}

#goalEnd #goalContent .raketko {
	height: 200px;
	width: 150px;
	padding: 50px 0 10px 0;
}

/* Custom goal name */
#customGoalName {
	width: 470px;
}

#customGoalName button {
	float: right;
}

#customGoalName .text {
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 20px;
}

#customGoalName textarea {
	min-height: 60px;
	margin-bottom: 20px;
	padding: 16px;
	width: 434px;
	border-radius: 3px;
	transition: border 200ms ease-in-out;
}

#customGoalName textarea:focus {
	outline: none;
	border: 1px solid #009fe3;
}

#customGoalName .error textarea {
	border-color: #F44336;
}

#customGoalName .error-description {
	color: #F44336;
	display: none;
}

#customGoalName .content.error .error-description {
	display: inline-block;
}

#myGoals .lSSlideWrapper .lSFade * {
	cursor: initial;
}

/*values*/
#myGoals .values-circle, #myGoals .values-text, #wheel .values-circle,
	#wheel .values-text {
	cursor: pointer;
}

#myValuesDialog.ui-dialog-content {
	overflow: auto !important;
}

#myValuesDialog .my-values {
	background: #009fe3;
	color: #fff;
	padding: 10px 10px 10px 15px;
	min-width: 175px;
	margin-bottom: 18px;
}

#myValuesDialog .my-values::after {
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(50, 192, 163, 0);
	border-top-color: #009fe3;
	border-width: 10px;
	margin-left: -10px;
	bottom: 0;
}

#myValuesDialog .my-values .values-header .values-title {
	text-align: left;
	padding: 5px 0px;
	float: left;
	font-weight: 500;
	font-size: 17px;
}

#myValuesDialog .my-values .values-header .values-edit {
	float: right;
	cursor: pointer;
	font-size: 18px;
}

#myValuesDialog .my-values .values-content {
	clear: both;
}

#myValuesDialog .my-values li {
	list-style-type: disc;
	margin-left: 15px;
	font-weight: 300;
	padding-top: 8px;
}