body{

	font-family: 'Roboto', sans-serif;

	background: #F8F8F8;

	color: #333;

}

.brand-logo{
	margin-left: 20px;
}

.container-fluid{
	margin: 0 40px;
}

.line{
	margin-left: 150px;
	border-left: 5px solid grey;
	height: 110px;
	padding-top: 25px;
}

.line:first-child{
	margin-left: 150px;
	border-left: 5px solid grey;
	height: 80px;
	padding-top: 0;
}

.line a{
	margin-left: 5px;
	color: grey;
}

.line a::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	left: -17px;
	top: 5px;
	-moz-border-radius: 7.5px;
	-webkit-border-radius: 7.5px;
	border-radius: 50%;
	background-color: grey;
}

.line:first-child a::before{
	top: 0;
}

.line.active{
	border-color: teal;
}

.line.active a{
	color: teal;
}
.line.active a::before{
background-color: teal;;
}
.line:last-child {
    height: 30px;
}
.navbar-light{
	background: #fff;
}

#dropzone{
	height: 100px;
	width: 100%;
	background-color: #333;
}

.inside-dropzone{
	height: 50px;
	width: 400px;
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.dz-preview{
	display: none;
}

.card-panel .selectize-control, .card-panel input,.card-panel .input-field{
	max-width: 400px;
}

.navimg{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	height: 100vh;

	width: auto;

	margin: auto;

}



.navbar-brand{

	color: rgb(94, 149, 190) !important;

	font-family: 'Josefin Sans', sans-serif !important;

}



.navbar-right{

	height: 50px;

}



h1, .h1{

	color: #5F9AC6 !important;

}



h3{

	color: #69ACDF;

}



.btn-info{

	background: #5F9AC6;

	height: 50px;

	border-radius: 0px;

}



.btn a {

	color: white !important;

	text-decoration: none;

}



.bg-blue{

	background: #69ACDF;

}



.btn-info:hover{

	background-color: #338cce !important;

}



.onBg{

	background-color: rgba(255,255,255,0.8);

	padding: 0;

}



/* main{

	min-height: 92.3vh;

	height: 0;

} */



.key{

	height: 47px;

	border-bottom: 3px solid gray;

	width: 50px;

	text-align: center;

	background: #fff;

	color: #5F9AC6

}



.bad-text{

	border: none !important;

	border-bottom: 3px solid gray !important;

	background: rgba(255,255,255,1);

	transition: .4s;

}



.lg-vh{

	height: 100%;

}



.white{

	color: #fff !important;

}



.text-input{

	border: none;

	background: transparent;

	border-bottom: 3px solid lightgrey;

	width: 90%;

}





.giant-btn{

	height: 70px;

	width: 430px;

	font-size: 24px;

}



.empty-btn{

	color: #5F9AC6;

}





.empty-btn:hover{

	border: 3px solid #5F9AC6;

}



.forward,.backward{

	padding: 20px 100px 20px 100px !important;

	font-weight: 600;

	font-size: 20px;

}



.forward{

	background: #5F9AC6;

	color: white;

}



.forward:hover{

	background: rgb(46, 127, 189);

	color: white;

}



.backward{

	color: #5F9AC6;

	border: 3px solid transparent;

}



.backward:hover{

	border: 3px solid rgb(46, 127, 189);

	color: rgb(46, 127, 189);

}



.backward a{

	color: #5F9AC6 !important;

	text-decoration: none;

}



input[type="text"], textarea{

	border: none;

	border-bottom: 1px solid #5F9AC6;

	width: 86%;

	resize: none;

}



.selectize-control{

	width: 86%;

}



input[type="text"]{

	padding: 10px 5px;

}



/* TEXT WITH BUTTON */

.form__field {

	width: 87%;

	background: #fff;

	color: #636363;

	font: inherit;

	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);

	border: 0;

	outline: 0;

	font-size: 22px;

	padding: 17px 18px;

}



.btn2{

	display: inline-block;

	background: transparent;

	color: inherit;

	font: inherit;

	border: 0;

	outline: 0;

	padding: 0;

	transition: all 200ms ease-in;

	cursor: pointer;

}



.btn--primary {

	background: #C7C7C7;

	color: #fff;

	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);

	border-radius: 2px;

	padding: 2px 36px;

    height: 50px;

    margin-top: 9px;

}



.btn--primary:hover {

	background: #C0C0C0;

}



.btn--primary:active {

	background: #a8a8a8;

	box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);

}



.btn--inside {

	margin-left: -56px;

}



.no-padding div{

	padding: 0 !important;

	margin: 0 !important;

}



.bottom-col{

	position: absolute;

	bottom: 30px;

	width: 100%;

	text-align: center;

	color: #f1f1f1;

}



.bottom-col:hover{

	color: #e1e1e1;

}



.close-material{

	float: right;margin-right: 23px;border: 1px solid #fff; border-radius: 50px; padding: 5px;cursor: pointer;transition: .4s;

}



.close-material:hover{

	background: rgba(220,220,220,0.6);

	color: rgba(40, 100, 146, 0.9);

	font-weight: bold;

	font-size: 28px;

}



#ins-file{

	position: relative;

	height: 200px;

	width: 100%;

	background: rgba(89,89,83,0.1);

	border: 2px dashed #999;

}



.btn-modal{

	float: right;

	margin: 15px !important;

	height: 50px;

}



.stay-bottom{

	position: absolute;

	bottom: 40px;

	width: 100%;

}





@media (max-width: 575.98px) {

	/* main{

		min-height: 90.8vh;

		height: 0;

	} */



	.stay-bottom{

		position: inherit;

		width: 100%;

		margin: 30px 0;

	}



	.bottom-col{

		bottom: 0px;

		font-size: 12px;

	}

	

	.forward,.backward{

		padding: 15px 65px 15px 65px !important;

		font-weight: 500;

		font-size: 18px;

	}

}



/*COOKIE*/

.cookie{

	position: fixed;

	bottom: 30px;

	left: 30px;

	padding: 20px 12px;

	background: whitesmoke;

	border-radius: 17px;

	border: 1px solid #338cce;

	width: auto;

	max-width: 400px;

	height: auto;

}



.head-img {

	float: left;

	position: absolute;

	top: 2px;

	left: 0;

}

.head-txt {

	position: relative;

	left: 65px;

	color: white;

	float: left;

	color: #338cce;

}

.body-txt{

	float: none;

	width: 100%;

	font-size: 13px;

}



.close-cookie{

	position: absolute;

	right: 20px;

	cursor: pointer;

}

/*END COOKIE*/



/*MODAL*/



#modal-file{

	display: none;

	height: 100%;

	width: 100%;

	background: rgba(0,0,0,0.7);

	z-index: 9999999999999999999999999999999999;

	position: fixed;

	margin: auto;

}



#outer{

	height: 100%;

	width: 100%;

	z-index: 2000;

}



#insider{

	height: 70%;

	width: 60%;

	margin: auto;

	z-index: 3000;

	 background: #fff;

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

}



#top-title{

	height:70px;

	width:100%;

	background-color: #5F9AC6;

	color: white;

	font-size: 22px;

	padding-left: 15px;

	padding-top: 15px;

	padding-bottom: 20px;

}



#details_inside{

	position: absolute;

	top: 0;

	 bottom: 0;

	 left: 0;

	 right: 0;

	 margin: auto;

	height: 120px;

	text-align: center;

}



/*END MODAL*/



/* RIEPILOGUE */



.stati:nth-child(odd) {

	background: #338cce !important;

	color : white !important;

}

.stati:nth-child(even) {

	color: #338cce !important;

	background: white !important;

	border-top: 1px solid #338cce !important;

	border-bottom: 1px solid #338cce !important;

}



.show_more{

	background: #338cce;

	color: white;

	font-size: 22px;

}

/* END RIEPILOGUE */



@media (max-width: 767.98px) {

	/* main{

		min-height: 90.8vh;

		height: 0;

	} */



	.bottom-col{

		bottom: 0px;

		font-size: 12px;

	}

	

	.forward,.backward{

		padding: 15px 65px 15px 65px !important;

		font-weight: 500;

		font-size: 18px;

	}



	.stay-bottom{

		position: inherit;

		width: 100%;

		margin: 30px 0;

	}

}



@media (max-width: 900.98px) {

	/* main{

		min-height: 90.8vh;

		height: 0;

	} */



	.bottom-col{

		bottom: 10px;

		font-size: 12px;

	}

	

	.forward,.backward{

		padding: 17px 70px 17px 70px !important;

		font-weight: 500;

		font-size: 19px;

	}



	.stay-bottom{

		position: inherit;

		width: 100%;

		margin: 30px 0;

	}

}





@media (max-width: 1200.98px) {

	.btn-large{
		width: 180px !important;
	}

	/* main{

		min-height: 90.8vh;

		height: 0;

	} */



	.bottom-col{

		bottom: 10px;

		font-size: 12px;

	}

	

	.forward,.backward{

		padding: 17px 70px 17px 70px !important;

		font-weight: 500;

		font-size: 19px;

	}



	.stay-bottom{

		position: inherit;

		width: 100%;

		margin: 30px 0;

	}

	

	#insider{

		height: 100%;

		width: 100%;

		margin: auto;

		z-index: 3000;

		 background: #fff;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

}