/*
 *	This code was created for Printr B.V. It is open source under the formide-client package.
 *	Copyright (c) 2017, All rights reserved, http://printr.nl
 */

 #connect{
	 .block{
		 max-width: 900px;
		 padding: 2.5rem 2rem;
		 margin: 0 auto;

		 @include media-query(xs) {
 			padding: 2rem 1rem;
 		}
	 }

	 .logo h1, .anchor__link{
 		color: #46b1e6;
 	}

	.logo{
		margin-top: 0.5rem;
	}

	.btn{
		background-color: rgba(70,177,230,.05);
	    box-shadow: 0 1px 2px rgba(22,23,32,.1);
	    border-color: #30a8e3;
		color: #1b8cc5;
		outline: 0;

		padding: 12px 16px;

		&:focus, &:hover {
		    box-shadow: 0 2px 4px rgba(22,23,32,.3);
		}

		&:active{
			background-color: rgba(48,168,227,.05);
			box-shadow: 0 1px 2px rgba(22,23,32,.1);
		}
	}

	.anchor__link::after{
		background: #a3d8f3;
	}

	fieldset.settings{
		margin: 0 auto;
		max-width: 450px;

		.advanced-settings{
			li{
				margin-bottom: 0.75rem;
			}
		}

		[add-new]{
			margin-bottom: 0;
			padding: 0.3rem;

			.fa{
				color: color(grey, dark);
			}
		}
	}

	.faqs{
		.faqTitle {
		    margin-bottom: 1rem;
		    background: color(grey, light);
		    padding: 0.5rem 1rem;
		}

		.faqBody {
		    margin: 0 1rem 1rem;
		}
	}

 }

 .figure-container{
	 .onboarding-figure {
		 width: 250px;
		 height: 250px;
		 background-color: $tertiary-color;
		 display: block;
		 border-radius: 50%;
		 margin: 0 auto;
		 overflow: hidden;
		 position: relative;

		 img {
			 position: absolute;
		 }

		 .logo-image{
			 left: 25px;
			 top: 80px;
			 animation: fadeInLeft .3s;
		 }

		 .main-image {
			 left: 0;
			 right: 0;
			 top: 0;
			 bottom: 0;
			 animation: fadeInLeft .3s;
		 }

		 &:before {
			 content: '';
			 width: 80%;
			 height: 27.4%;
			 border-radius: 50%;
			 background-color: $secondary-color;
			 display: block;
			 margin: 73.6% auto 0;
		 }
	 }
 }