@font-face
{
	font-family: "Lato";
	src:url("../fonts/Lato-font.ttf");
}
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	letter-spacing: 0.5px;
	font-family: "Lato";
}
html
{
	scroll-behavior: smooth;
}
body
{
	background: ghostwhite;
/*	overflow-x: hidden;*/
	padding: 15px;
}
.container
{
	width: 100%;
}
.container-data
{
	width: 800px;
	background: white;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
/*	height: 80vh;*/
	margin: auto;
	padding: 60px;
	z-index: 1;
/*	position: relative;*/
}
/*.container-data::before
{
	content: "";
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	height: 95%;
	z-index: -1;
	position: absolute;
	border:1px solid black;
}*/
.container-data h2
{
	margin-bottom: 15px;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding-bottom: 5px;
	width: fit-content;
	margin: auto;
}
.image-and-title
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 15px;
}
.image-and-title img
{
	width: 110px;
	height: 130px;
	border-radius: 3px;
/*	object-fit: cover;*/
}
.user-bio
{
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}
.user-bio strong
{
	font-size: 14px;
}
.line-breaker h3
{
	width: 100%;
	padding: 6px;
	margin: 8px 0;
	background: lightgray;
	border-radius: 3px;
	display: block;
	font-size: 15px;
}
.line-breaker p
{
	padding-left: 15px;
	padding-bottom: 5px;
	font-size: 14px;
}
.line-breaker ul
{
	padding-left: 35px;
	padding-bottom: 5px;
}
.line-breaker ul li
{
	font-size: 14px;
	line-height: 1.6;
}
.Personal-Info
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Personal-Info h4
{
	font-size: 14px;
}
.Personal-Info-left
{
	line-height: 1.6;
}
.declaration
{
	margin: 10px 0;
}
.declaration strong
{
	font-size: 14px;
}
.bottoms
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 5px 0;
}
.bottoms p
{
	font-size: 14px;
}
.PrintPDF
{
	background: crimson;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	border:none;
	transition: 0.3s ease;
}
.PrintPDF:active
{
	scale: 0.7;
	background: darkred;
}
/*main body css code*/
.MainContainer
{
	background: ghostwhite;
	overflow-x: hidden;
	width: 100%;
	display: flex;
/*	align-items: center;*/
	justify-content:center;
	column-gap: 150px;
	margin: auto;
}
.MainContainer .logo
{
	position: absolute;
	top:20px;
	left: 25px;
}
.MainContainer .ResumeBuilder
{
	line-height: 1.4;
	margin-top: 120px;
	flex-basis: 45%;
}
.ResumeBuilder h1
{
	font-size: 80px;
}
.ResumeBuilder p
{
	font-size: 22px;
	opacity: 0.6;
}
.ResumeBuilder h3
{
	font-size: 25px;
	margin-top: 14px;
}
.editing-smallText
{
	background: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	padding: 7px 12px;
	border-radius: 10px;
	margin-top: 15px;
}
.ResumeBuilder .smallText
{
	font-size: 18px;
	margin-top: 15px;
	display: block;
}
.ResumeBuilder .smallText i
{
	color: #00997D;
}
.editing-smallText span
{
	padding: 5px 15px 15px 15px;
	opacity: 0.7;
}
.ResumeBuilder .miniTable
{
	background: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	width: fit-content;
	padding: 15px;
}
.ResumeBuilder .miniTable .miniTableCols
{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 130px;
}
.ResumeBuilder .miniTable .miniTableCols .username
{
	width: 100%;
}
.ResumeBuilder .miniTable .miniTableCols .miniTableButtons
{
	display: flex;
	column-gap: 15px;
}
.ResumeBuilder .miniTable .miniTableCols .miniTableButtons i
{
	font-size: 22px;
	cursor: pointer;
	padding: 8px 12px;
	transition: 0.3s ease;
}
.ResumeBuilder .miniTable .miniTableCols .miniTableButtons i:active
{
	scale: 0.8;
}
.ResumeBuilder .miniTable .miniTableCols .miniTableButtons i:nth-child(1)
{
	background: royalblue;
	border-radius: 5px;
	color: white;
}
.ResumeBuilder .miniTable .miniTableCols .miniTableButtons i:nth-child(2)
{
	background:#008E04;
	border-radius: 5px;
	color: white;
}
.MainContainer .serialKeyBoxContainer
{
	padding: 10px;
	border-radius: 10px;
	background: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	margin: 15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	width: fit-content;
}
.MainContainer .serialKeyBoxContainer input
{
	padding: 8px 13px 8px 5px;
	border:none;
	background: transparent;
	font-size: 16.5px;
}
.MainContainer .serialKeyBoxContainer i
{
	font-size: 18px;
}
.MainContainer .serialKeyBoxContainer button
{
	font-size: 16px;
	background:#D2581C;
	color:white;
	border-radius: 5px;
	border:none;
	padding:8px 15px;
	cursor: pointer;
	transition: 0.3s ease;
}
.MainContainer .serialKeyBoxContainer button:active
{
	scale: 0.8;
}
.MainContainer .ResumeBuilder .strongEdit
{
	animation: strongAnim 8s linear infinite;
}
@keyframes strongAnim
{
	0%
	{
		color: crimson;
	}
	20%
	{
		color: royalblue;
	}
	40%
	{
		color: darkred;
	}
	60%
	{
		color: darkblue;
	}
	80%
	{
		color: darkorange;
	}
	100%
	{
		color: crimson;
	}
}
.MainContainer .blobs
{
	background:#D2581C;
	opacity: 0.3;
	border-radius: 59% 41% 70% 30% / 30% 62% 38% 70% ;
	width: 600px;
	height: 600px;
	position: absolute;
	left:-350px;
	top:50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: -1;
	animation: blobanim 20s linear infinite;
}

@keyframes blobanim
{
	100%
	{
		transform: translateY(-50%)rotate(360deg);
	}
}
.MainContainer .blobs-2
{
	background:#D2581C;
	opacity: 0.2;
	border-radius: 38% 62% 54% 46% / 17% 75% 25% 83% ;
	width: 600px;
	height: 600px;
	position: absolute;
	left:-300px;
	top:50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: -1;
	animation: blobanim-2 20s linear infinite;
}
.serialKey input::placeholder
{
	color:rgba(0,0,0,0.3);
}
.SkillsBox input::placeholder
{
	color:rgba(0,0,0,0.3);
}
@keyframes blobanim-2
{
	100%
	{
		transform: translateY(-50%)rotate(-360deg);
	}
}

@media screen and (max-width:1450px)
{
	.MainContainer
	{
		column-gap: 70px;
	}
	.MainContainer .ResumeBuilder
	{
		flex-basis: 50%;
	}

}
@media screen and (max-width:1306px)
{
	.MainContainer
	{
		column-gap: 20px;
	}
	.ResumeBuilder h1
	{
		font-size: 60px;
	}
}
@media screen and (max-width:950px)
{
	.MainContainer
	{
		flex-wrap: wrap;
		row-gap: 30px;
	}
	.MainContainer .ResumeBuilder
	{
		flex-basis: 100%;
		margin-top: 60px;
	}
}
@media screen and (max-width:600px)
{	
	.form-container
	{
		width: 450px!important;
	}
	.form-outer form
	{
		width: 604%!important;
	}
	.form-outer form .page
	{
		width:400px!important;
	}
	.progress-Bars .step p
	{
		font-size: 13px!important;
	}
	.progress-Bars .step .bullet::before,
	.progress-Bars .step .bullet::after
	{
		width: 35px!important;
		right: -41px!important;
	}
	.confirmButtons
	{
		right:-40px!important;
	}
}
@media screen and (max-width:508px)
{
	.form-container
	{
		width: 400px!important;
	}
	.form-outer form
	{
		width: 604%!important;
	}
	.form-outer form .page
	{
		width:350px!important;
	}
	.progress-Bars .step .bullet::before,
	.progress-Bars .step .bullet::after
	{
		width: 35px!important;
		right: -37.6px!important;
	}
	.MainContainer .blobs
	{
		left:-400px;
	}
	.MainContainer .blobs-2
	{
		left: -400px;
	}
}
@media screen and (max-width:445px)
{
	.form-container
	{
		width: 360px!important;
	}
	.form-container h2
	{
		font-size: 23px!important;
	}
	.form-outer form
	{
		width: 604%!important;
	}
	.form-outer form .page
	{
		width:309px!important;
	}
	.progress-Bars .step .bullet::before,
	.progress-Bars .step .bullet::after
	{
		width: 30px!important;
		right: -32.6px!important;
	}
	.confirmButtons
	{
		right:-40px!important;
		bottom:-25px!important;
	}
	.confirmButtons p
	{
		font-size: 12px!important;
		padding: 5px 10px!important;
	}
	.image-Box h2
	{
		font-size: 20px!important;
	}
	.image-Box .image-Box-inside.active
	{
		width: 135px!important;
	}
	.SkillsBox .skills
	{
		flex-basis: 48%!important;
	}
	.field p
	{
		padding: 10px 15px!important;
		font-size: 13px!important;
	}
	.ResumeBuilder h1
	{
		font-size: 35px;
	}
	.ResumeBuilder p
	{
		font-size: 16px;
	}
	.ResumeBuilder h3
	{
		font-size: 18px;
	}
	.editing-smallText
	{
		padding: 5px 20px;
	}
	.editing-smallText .smallText
	{
		font-size: 18px;
	}
	.editing-smallText span
	{
		padding:0 0 15px 0;
		opacity: 0.7;
	}

}
@media screen and (max-width:390px)
{
	.form-container
	{
		width: 335px!important;
	}
	.form-container h2
	{
		font-size: 23px!important;
	}
	.form-outer form
	{
		width: 604%!important;
	}
	.form-outer form .page
	{
		width:283.5px!important;
	}
	.progress-Bars .step p
	{
		font-size: 12px!important;
	}
	.image-Box h2
	{
		font-size: 17px!important;
		width: 100%!important;
	}
	.confirmButtons
	{
		right:-30px!important;
		bottom:-25px!important;
	}
	.progress-Bars .step .bullet::before,
	.progress-Bars .step .bullet::after
	{
		width: 27px!important;
		right: -28.6px!important;
	}
	.serialKeyBoxContainer button
	{
		font-size: 14px!important;
	}
	.miniTable
	{
		width: 100%!important;
	}
	.miniTableCols
	{
		column-gap: 20px!important;
	}
	.miniTableCols i
	{
		font-size: 17px!important;
	}
	.serialKeyBoxContainer
	{
		width: 100%!important;
		justify-content: space-between!important;
	}
	.serialKeyBoxContainer input
	{
		font-size: 15px!important;
	}

}
/*Form Wizard Css Code Starts*/
.form-container
{
	width: 550px;
	padding: 10px;
/*	margin: auto;*/
	background: white;
	line-height: 1.5;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.form-container h2
{
	text-align: center;
	font-size: 26px;
	padding-bottom: 10px;
	border-bottom: 1px solid lightgray;
}
.form-outer
{
	text-align: center;
	padding: 10px;
	width: 100%;
	margin: auto;
	border-radius: 10px;
	overflow: hidden;

}
.form-outer form
{
	display: flex;
	width: 600%;
}
.form-outer form .page
{
	width: 500px;
	background: ghostwhite;
/*	border:1px solid lightgray;*/
	margin:10px;
/*	padding: 1px;*/
	border-radius: 15px;
	transition: 0.4s ease-in-out;
}
.pageFlex
{
	/*display: flex;
	justify-content: left;*/
	column-gap: 10px;
	text-align: left;
}
.image-Box
{
	display: flex;
	justify-content: left;
	width: 100%;
	position: relative;
}
.image-Box h2
{
	font-size: 20px;
	position: relative;
	width: 100%;
	text-align: left;
	margin-top: 20px;
}
.confirmButtons
{
	position: absolute;
	top:40%;
	transform: translateX(-50%);
	right:0;
	display: flex;
	align-items: center;
	column-gap: 10px;
}
.confirmButtons p
{
	padding: 8px 14px;
	border-radius: 15px;
	font-size: 13px;
	border:none;
	transition: 0.3s ease;
	cursor: pointer;
}
.confirmButtons p:active
{
	scale: 0.8;
}

.confirmButtons p:nth-child(1)
{
	background:#00997D;
	color: white;
}
.confirmButtons p:nth-child(2)
{
	background: crimson;
	color: white;
}
.image-Box
{
	overflow: hidden;
}
.image-Box h2::before
{
	content: "Do you want to add Image?";
	font-weight: 100;
	font-size: 15px;
	top:30px;
	width: 90%;
	height: 100%;
	left:0;
	position: absolute;
	opacity: 0.8;
	color:crimson;
}


.image-Box .image-Box-inside
{
	width:0;
	height: 115px;
	border-radius: 3px;
	margin-right: 10px;
	background: white;
	overflow: hidden;
	transition: 0.3s ease;
	position: relative;
}
.image-Box .image-Box-inside input
{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 5;
	display: none;
}
.image-Box .image-Box-inside label
{
	font-size: 12px;
	background: darkred;
	color: white;
	padding: 4px 5px;
	text-align: center;
	text-transform: capitalize;
	border-radius: 5px;
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
	z-index: 6;
	cursor: pointer;
	transition: 0.3s ease;
}
.image-Box .image-Box-inside label:active
{
	scale: 0.8;
}
.image-Box .image-Box-inside img
{
	width: 100%;
	height: 100%;
/*	display: none;*/
	object-fit: cover;
}
.image-Box .image-Box-inside.active
{
	width: 115px;
	border:1px solid lightgray;
	overflow: visible;
}
.page-data 
{
	padding: 15px;
	width: 100%;
}
.page-data .title h3
{
	margin-bottom: 7px;
}
.page-data .field .label
{
	font-size: 16px;
	margin-bottom: 5px;
}
.page-data input
{
	width: 100%;
	padding: 9px 10px;
	background: white;
	border-radius: 5px;
	border:none;
	font-size: 14px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 4px 0;
}
.page-data .field input::placeholder
{
	color:rgba(0,0,0,0.3);
	font-weight: 100;
}
.page .title small
{
	opacity: 0.5;
	margin-bottom: 7px;
	display: block;
}
.objectiveBox
{
	text-align: left;
}
.page-data.arrange
{
	text-align: left;
}
.field textarea
{
	width: 100%;
	height: 70px;
	padding: 11px 10px;
	background: white;
	border-radius: 5px;
	border:none;
	font-size: 14px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 4px 0;

}
.page-data .field textarea::placeholder
{
	color:rgba(0,0,0,0.3);
	font-weight: 100;
}
.field .Next-btn
{
	padding: 10px 20px;
	border-radius: 5px;
	background: royalblue;
	color: white;
	border:none;
	cursor: pointer;
	margin-bottom: 15px;
	margin-top: 5px;
	transition: 0.3s ease;
}
.field .Next-btn.firstBtnEdit
{
	width: 200px;
	margin:10px auto 20px auto;
}
.field .Next-btn:active
{
	scale: 0.8;
}
.field .Prev-btn
{
	padding: 10px 20px;
	border-radius: 5px;
	background: limegreen;
	color: white;
	border:none;
	cursor: pointer;
	margin-bottom: 15px;
	margin-top: 5px;
	transition: 0.3s ease;
}
.field .Prev-btn:active
{
	scale: 0.8;
}
.objectiveBox
{
	padding: 0 15px;	
}

.objectiveBox textarea
{
	width: 100%;
	height: 100px;
	padding: 11px 10px;
	background: white;
	border-radius: 5px;
	border:none;
	font-size: 14px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 4px 0;
/*	text-align: left;*/
}
.SkillsBox
{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	column-gap: 10px;
}
.SkillsBox .skills
{
	flex-basis: 43%;
}
.field select
{
	width: 100%;
	padding: 11px 10px;
	background: white;
	border-radius: 5px;
	border:none;
	font-size: 14px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 4px 0;
}
.title.Declaration
{
	display: flex;
	column-gap: 8px;
	width: 100%;
}
.title.Declaration input
{
	width: 25px;
	height: 25px;
	background: transparent;
	box-shadow: 0 0 0 transparent;
}
.title.Declaration small
{
	padding-top: 5px;
}
.field.btnBox
{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	column-gap: 15px;
}
.page textarea::-webkit-scrollbar
{
	width: 6px;
}
.page textarea::-webkit-scrollbar-thumb
{
	background: royalblue;
	border-radius: 5px;
}
.progress-Bars
{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-around;
	column-gap: 15px;
	margin: 15px auto;
}
.progress-Bars .step
{
	text-align: center;
}
.progress-Bars .step p
{
	font-size: 15px;
	margin-bottom: 5px;
	opacity: 0.6;
}
.progress-Bars .bullet
{
	width: 30px;
	height: 30px;
	border:2px solid rgba(0,0,0,0.5);
	border-radius: 50%;
	display: inline-block;
	position: relative;
	z-index: 1;
	transition: 0.3s ease;
}
.progress-Bars .bullet.active
{
	border-color:darkviolet;
	background: #CCBDE6;
}
.progress-Bars .step:last-child .bullet::before,
.progress-Bars .step:last-child .bullet::after
{
	display: none;
}
.progress-Bars .step .bullet::before,
.progress-Bars .step .bullet::after
{
	position: absolute;
	content: "";
	height: 4px;
	width: 50px;
	background:rgba(0, 0, 0, 0.2);
/*	opacity: 0.6;*/
	bottom:12px;
	right: -57px;
	z-index: -1;
}
.progress-Bars .step .bullet.active::after /*Adding active class here for progress bar*/
{
	background: linear-gradient(to right, violet,darkviolet);
	animation: animate 0.3s linear forwards;
	transform: scaleX(0);
	transform-origin: left;
}
@keyframes animate
{
	100%
	{
		transform: scaleX(1);
	}
}
.progress-Bars .check
{
	position: absolute;
	z-index: 5;
	display: none;
}
.progress-Bars .step .check.active
{
	display: block;
}
.progress-Bars .check i
{
	font-weight: bold;
	font-size: 20px;
	color:darkred;
}
.progressBox
{
	display: flex;
	justify-content: center;
	align-items: center;
}
.progress-Bars .step .bullet.active span
{
	display: none;
}
.progress-Bars .step p.active 
{
	color: darkviolet;
	transition: 0.3s ease;
	opacity: 1;
}

.image-Box .error
{
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: red;
	font-size: 15px;
	width: 400px;
}






/*my custom css*/
.count-style{
	color:green;
	font-size: 14px;
	margin-left:10px;
}
.error_field{
	font-size:13px !important;
	color:red;
}

/* For webkit-based browsers (Chrome, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0; /* Removes the default margin */
}

.green{
	color:green;
}
.blue{
	color:blue;
}
.red{
	color:red;
}
.thanks{
	margin:auto;
}
.counterDiv
{
	/* background: #757575; */
	/* color:whitesmoke; */
	padding: 9px;
	border-radius: 7px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
	width:fit-content;
	margin:auto;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
}
.counterDiv small
{
	font-size: 11px;
	color:red;
}
.counterDiv p
{
	font-size: 11px;
	padding:3px 5px;
	border-radius: 5px;
	background:black;
	color:whitesmoke;
	letter-spacing: 1px;
}