.gbt-setup-wizard
{
	margin: 100px auto 24px;
    box-shadow: none;
    padding: 0;
    background: #F1F1F1; 
    color: #444;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    margin: 75px auto 75px;
    padding: 0 20px 10px;
    max-width: 700px;
    text-align: center;
    

    // General
    a
    {
    	text-decoration: none;
    	color: #B1B0B0; 
    	font-size: 14px; 
    	line-height: 28px;
    	transition: color .3s;
    	
    	&.wc-return-to-dashboard
    	{
    		&:hover
	    	{
	    		color: #00a0d2;
	    	}
    	}    	
    }

    img
    {
    	max-width: 100%; 
    }

    h1
    {
    	margin: 0;
    	font-size: 24px;
    	font-weight: 500;
    	line-height: 31px;
    	color: #666666;
    }
    
    .button
    {
    	text-decoration: none;
    	border: 1px solid #CCCCCC;
    	border-radius: 3px;
    	box-shadow: inset 0 -2px 0 0 #CCCCCC;
    	background-color: #F7F7F7;
    	color: #FFFFFF;
    	font-size: 20px;
    	color: #555555;
    	line-height: 23px;
    	padding: 7px 25px 11px;
    	display: inline-block;
    	transition: all .5s;
    	
    	&.install
		{
			background-color: #616D7E;
			color: #FFF;
			box-shadow: inset 0 -2px 0 0 #414042; 
			border: 1px solid #414042;
			padding: 8px 18px 11px 25px; 
			
			&:after
			{
				content: "\f345";
				display: inline-block;
			    font: 400 20px/1 dashicons;
			    margin-left: 5px;
			    speak: none;
			    vertical-align: middle;
			    margin-top: -5px; 
			}

			&.doing-ajax
			{
				background-color: inherit; 
				color: #555555;
				box-shadow: inset 0 -2px 0 0 #CCCCCC;
				border: 1px solid #CCCCCC;
				
				&:after
				{
					content: ""; 
				}
			}

			&.done-ajax,
			&.failed-ajax
			{
				&:after
				{
					content: ""; 
				}
			}
		}	
    	
    	&:hover
    	{
    		opacity: .9; 
    	}

    	
		&.doing-ajax
		{
			pointer-events: none;
			opacity: 0.5;
			
			&:before
			{
				width: 16px;
			    height: 16px;
			    margin-right: 8px; 
			    margin-top: -4px;
			    display: inline-block;
			    vertical-align: middle;
			    background: url(../../../../../wp-admin/images/spinner.gif);
			    content: "";
			    background-size: contain;
			    background-repeat: no-repeat;
			}
		}

		&.done-ajax
		{
			pointer-events: all;
			background: #81B536; 
			color: #FFF; 
			box-shadow: inset 0 -2px 0 0 #68ab37;
			border: 1px solid #68ab37;
		}

		&.failed-ajax
		{
			background: #DD322A;
			color: #FFF;   
			box-shadow: inset 0 -2px 0 0 #a72d27;
			border: 1px solid #a72d27;
		}
    	
    }

    .button-primary
    {
    	color: #FFFFFF;
    	background-color: #616D7E;
    	border: 1px solid #414042;
    	box-shadow: inset 0 -2px 0 0 #414042;
    }
    
    .wrapper
    {
	    box-shadow: 0 1px 3px rgba(0,0,0,.13);
		text-align: center;
		padding: 79px 0 100px; 
		margin-bottom: 24px;
		background: #FFF; 
		
	    .content-info
	    {
	    	margin-bottom: 60px;
	    	color: #666666;
	    	line-height: 28px;
	    	text-align: left;
	    	
	    	h1
	    	{
	    		font-size: 24px;
	    		font-weight: 500;
	    		line-height: 28px;
	    		margin: 0;
	    	}

	    	p
	    	{
	    		font-size: 16px;
	    	}
	    	
	    }

		.buttons
		{
			text-align: right;
			font-size: 0;
			
			.button
			{
				&.skip
				{
					margin-right: 20px; 
				}
			}
		} 

		// Wizard Introduction
		&.wizard-introduction
		{
			@media (max-width: 640px)
			{
				padding: 0 0 30px;
			}

			img
			{
				margin-bottom: 25px;
				width: 515px; 
			}

			h1
			{
				margin-bottom: 15px;
			}
			p
			{
				font-size: 16px;
				line-height: 26px;
				color: #666666;
				margin: 0 0 42px;
			}
			
			.button
			{
				padding: 6px 60px 12px; 
			}
			
		}
		
		// Plugins
		&.wizard-plugins
		{
    		box-sizing: border-box;
			padding: 69px 75px;
			
			@media (max-width: 640px)
			{
				padding: 30px;
			}
		    
			.plugins
			{
				text-align: left;
				font-size: 0;
				margin-bottom: 75px; 
				
				.plugin
				{
					width: 240px;
					display: inline-block;
					text-align: left;
					font-size: 14px; 
					position: relative;
					
					@media (max-width: 768px)
					{
						padding: 0 0 30px;
						width: 100%; 
					}
					
					.required-tag
					{
						background-color: #81B536;
						border-radius: 3px;
						color: #FFF;  
						font-size: 9px;
						font-weight: bold;
						margin: 0;
						position: absolute;
						padding: 3px 8px 4px 8px;
						text-transform: uppercase;
						top: 15px;
						left: 17px; 
					}
					
					&:nth-child(2n+1)
					{
						margin-right: 70px;
					}
					 
					.plugin-image
					{
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center center;
						height: 160px; 
						margin-bottom: 23px; 

					}

					.plugin-install
					{
						font-size: 0;
						font-weight: 500; 
						
						label,
						span
						{
							font-size: 14px; 
							line-height: 21px;
						}

						input
						{
							margin-right: 10px; 
							margin-left: 0;
						}

						.plugin-status
						{
							display: inline-block;
							vertical-align: middle;
							
							span.dashicons
							{
								display: inline-block;
								font-size: 18px;
							    width: 26px;
							    height: 21px;
							    color: #666; 
							    
								&.dashicons-yes
								{
									&.grey
									{
										&:before
										{
											color: #666666;
										}
									}

									&:before
									{
										color: #81b536;
									}

								}

								&.dashicons-no
								{
									&:before
									{
										color: #DD322A;
									}
								}

							}
							
						}

						label
						{
							display: inline-block;
							vertical-align: middle;
							margin-left: 4px; 
						}

						.plugin-description
						{
							display: block;
							text-indent: 30px; 
							color: #9B9B9B;
							font-weight: 500;  
						}
						
					}
				}
			}


		} 

		//demo content import
		&.wizard-demo-import
		{
			padding:  72px 75px;
			
			@media (max-width: 640px)
			{
				padding: 30px;
			}
			
			
			.content-info
			{
				margin-bottom: 35px;
				
				h1
				{
					color: #616D7E;
				}
			}

			.demo-icon
			{
				background-color: #616D7E;
				padding: 98px 0 97px; 
				text-align: center;
				margin-bottom: 55px; 
				position: relative;
				
				&.error
				{
					padding: 56px 0 63px; 
					
					p.error-info
					{
						color: #FFF; 
						font-size: 16px;
						font-weight: 500;
						line-height: 22px;
						max-width: 366px;
						margin: 10px auto 0;  
					}
				}
				
				
				img
				{
					width: 72px; 
				}
			}
		}

		&.wizard-ready
		{
			padding: 0;
			text-align: center;
			
			img
			{
				margin-top: 76px;
				width: 515px; 
				
				@media (max-width: 640px)
				{
					margin-top: 0;
				}
			}
			
			.content-info
			{
				text-align: center;
				padding: 35px 94px 49px; 
				margin-bottom: 0;
				
				@media (max-width: 640px)
				{
					padding: 30px;
				}
				
				h1
				{
					color: #616D7E;
					margin: 0 0 15px;
				}

				p
				{
					margin: 0;
				}
			}
			
			.further-info
			{
				background-color: #F5F5F5;
				text-align: left;
				padding: 57px 64px;
				
				@media (max-width: 640px)
				{
					padding: 30px;
				}
				
				&:after
				{
					content: "";
					display: block;
					clear: both;
				}
				
				.column
				{
					width: 50%;
					vertical-align: top;
					float: left;
					
					@media (max-width: 640px)
					{
						width: 100%;
						float: none; 
					}
					
					h2
					{
						font-size: 18px;
						font-weight: 500;
						line-height: 21px;
						color: #666666;
						margin: 0 0 26px;
					}

					.button
					{
						padding: 15px 89px 16px;
						display: inline-block;
						line-height: 23px;
						font-size: 20px;
					}

					&.last
					{
						width: 40%;
						padding-left: 30px; 
						
						@media (max-width: 640px)
						{
							width: 100%;
							float: none;
							padding: 30px 0 0; 
						} 
					}
				}
				
				ul
				{
					list-style-type: none; 
					padding: 0;
					
					li
					{
						a
						{
							color: #616D7E;
							font-weight: 500;
							display: inline-block;
							
							span
							{
								font-size: 18px;
								margin-right: 10px; 
								vertical-align: middle;

							}
						}
					}
				}

			}
		}
    }
}




.gbt-wizard-logo
{
	margin-bottom: 71px;
	 
	img
	{
		width: 74px;
	}
}

ol.gtb-wizard-menu
{
	padding: 0 0 37px;
    margin: 0;
    list-style: none;
    overflow: hidden;
    color: #ccc;
    width: 100%;
    display: inline-flex;
    
    li
    {
	    width: 100px;
	    float: left;
	    padding: 0 0 .8em;
	    margin: 0;
	    text-align: center;
	    position: relative;
	    border-bottom: 4px solid #ccc;
	    line-height: 1.4em;
	    color: #CCCCCC;
		font-size: 14px;
		line-height: 20px;
	    
	    &.active,
	    &.done
	    {
	    	border-bottom: 4px solid #616D7E;;
	    	
	    	span
	    	{
	    		color: #616D7E; 
	    		font-weight: 500;
	    	}
	    	
	    	&:before
	    	{
	    		border: 4px solid #616D7E;
	    		background: #616D7E;
	    	}

	    }

	    &.done
	    {
	    	&:before
	    	{
	    		background: #616D7E;
	    	}
	    }

	    &:first-child,
	    &:last-child
	    {
	    	width: 300px; 
	    }

	    &:first-child
	    {
	    	text-align: right;
	    	
	    	&:before
	    	{
	    		right: 50px;
				left: inherit;
				z-index: 99;
	    	}
	    	
	    	> span
	    	{
	    		padding-right: 30px; 
	    	}
	    }

	    &:last-child
	    {
	    	text-align: left;
	    	
	    	&:before
	    	{
				left: 50px;
				right: inherit;
				z-index: 99;
	    	}
	    	
	    	> span
	    	{
	    		padding-left: 30px; 
	    	}
	    }
	    
	    
	    &:before
	    {
    	    content: '';
		    border: 4px solid #ccc;
		    border-radius: 100%;
		    width: 4px;
		    height: 4px;
		    position: absolute;
		    bottom: 0;
		    left: 50%;
		    margin-left: -6px;
		    margin-bottom: -8px;
		    background: #fff;
	    }
    }
}


// custom checkboxes

// /* Base for label styling */
// [type="checkbox"]:not(:checked),
// [type="checkbox"]:checked {
//   position: absolute;
//   left: -9999px;
// }
// [type="checkbox"]:not(:checked) + label,
// [type="checkbox"]:checked + label {
//   position: relative;
//   padding-left: 1.95em;
//   cursor: pointer;
// }

// /* checkbox aspect */
// [type="checkbox"]:not(:checked) + label:before,
// [type="checkbox"]:checked + label:before {
//   content: '';
//   position: absolute;
//   left: 0; top: 0;
//   width: 22px; height: 22px;
//   border: 2px solid #666666;
//   background: #fff;
//   border-radius: 4px;
//   box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
// }
// /* checked mark aspect */
// [type="checkbox"]:not(:checked) + label:after,
// [type="checkbox"]:checked + label:after {
//   content: '✔';
//   position: absolute;
//   top: .1em; left: .3em;
//   font-size: 1.3em;
//   line-height: 0.8;
//   color: #09ad7e;
//   transition: all .2s;
// }
// /* checked mark aspect changes */
// [type="checkbox"]:not(:checked) + label:after {
//   opacity: 0;
//   transform: scale(0);
// }
// [type="checkbox"]:checked + label:after {
//   opacity: 1;
//   transform: scale(1);
// }
// /* disabled checkbox */
// [type="checkbox"]:disabled:not(:checked) + label:before,
// [type="checkbox"]:disabled:checked + label:before {
//   box-shadow: none;
//   border-color: #bbb;
//   background-color: #ddd;
// }
// [type="checkbox"]:disabled:checked + label:after {
//   color: #999;
// }
// [type="checkbox"]:disabled + label {
//   color: #aaa;
// }
// /* accessibility */
// [type="checkbox"]:checked:focus + label:before,
// [type="checkbox"]:not(:checked):focus + label:before {
//   border: 2px dotted blue;
// }

// /* hover style just for information */
// label:hover:before {
//   border: 2px solid #4778d9!important;
// }