@import "../../../variables.less"; 
@import "../../../mixins.less";

.uiGettingStarted{
	.gadgetTitle{
		a{
			cursor: pointer;
			visibility: hidden;
		}

		&:hover{
			a{
				visibility: visible;
			}
		}
	}

	.listBlock {
		padding: 15px;
	}

	.gsList li {
		 padding: 0 0 0 23px;
		 margin: 0 0 5px 0;
		 cursor: pointer;
		 position: relative;
		 background: url("@{images-path}/platform/portlets/homepage/gettingStarted/gettingStartedCheck.png") no-repeat left -43px;
		 &:before {
			background: @uiCheckboxBackground;
			.border-radius(@borderRadiusSmall);
			.box-shadow(inset 0 1px 2px rgba(0,0,0,.17));
			.square(12px);
			top: 4px;
			left: 0px;
			content: "";
			position: absolute;
		 }
		 &:after {
			border-bottom: 2px solid @uiCheckboxCheckedBorder;
			border-left: 2px solid @uiCheckboxCheckedBorder;
			content: "";
			.size(3px,6px);
			-webkit-transform: skew(45deg, -49deg);
			-moz-transform: skew(45deg, -49deg);
			-ms-transform: skewX(30deg) skewY(-35deg); // See https://github.com/twitter/bootstrap/issues/4885
			-o-transform: skew(45deg, -49deg);
			transform: skew(45deg, -49deg);
			-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
			left: 4px;
			position: absolute;
			top: 4px;
			display: none;
		 }
		 &.done {
			background-position: 0 5px;
			text-decoration: line-through;
			 &:after {
			 	display: block;
			 }
		}

		 a {
			color: @textColor;
		}

	}
	.btnCompleteGetting{
		margin-bottom: 15px;
	}

	/*** progress bar**/

	#progress-shell {
		width: 200px;
	}

	.progress{
		#gradient .vertical(@primaryBackgroundHover, @primaryBackground);
	}

	.progessLabel {
		line-height: 23px;
		margin-left: 8px;
		color: @baseColorLight;
	}

}