//	=================
//    	Imports
//	=================

@import '../base/color_variables';   	// Color Variables
@import '../base/fonticons';   			// Fonticons Variables
@import '../base/urls';   				// URLS Variables
@import '../base/utilities_variables';  // Utilities Variables

/*
    General Infomation
*/
.general-info {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		.form {
			width: 92%;
		}
		.upload {
			border-right: 1px solid #e6ecf5;
			p {
				font-size: 14px;
				font-weight: 600;
				color: $color_57;
				i {
					font-size: 22px;
					color: $color_57;
					vertical-align: middle;
				}
			}
		}
		h6 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		label {
			text-transform: $transform-upper;
			color: $color_86;
			font-size: 12px;
		}
		input {
			&::-webkit-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-ms-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-moz-placeholder {
				color: $color_2;
				font-size: 14px;
			}
		}
		/*
		    Image upload
		*/
		.dropify-wrapper {
			width: 200px;
			height: 200px;
			border: none;
			border-radius: 6px;
			.dropify-preview {
				background-color: $white;
				padding: 0;
				.dropify-infos {
					.dropify-infos-inner {
						p.dropify-infos-message {
							padding-top: 27px;
							&::before {
								content: '\f1a8';
								font-family: $font_family_1;
								position: absolute;
								top: -1px;
								left: 38%;
								color: $white;
								-webkit-transform: translate(-50%,0);
								transform: translate(-50%,0);
								background: transparent;
								width: 0;
								height: 0;
								font-size: 28px;
							}
						}
					}
				}
			}
			.dropify-clear {
				font-size: 16px;
				padding: 4px 8px;
				color: $white;
				border: none;
				&:hover {
					background-color: $color_none;
				}
			}
		}
		.dropify-wrapper.touch-fallback {
			border: 1px solid #e9ecef;
			.dropify-preview {
				.dropify-infos {
					.dropify-infos-inner {
						padding: 0;
						p.dropify-filename {
							margin-top: 10px;
						}
					}
				}
			}
			.dropify-clear {
				color: $dark;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
.form-control {
	border: $b-width-1 $solid $color_622;
	&:focus {
		color: $additional-color-11;
		border-color: $color_47;
	}
}
/*
    About
*/
.about {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		h5 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		label {
			text-transform: $transform-upper;
			color: $color_86;
			font-size: 12px;
		}
		.dob-input {
			text-transform: $transform-upper;
			color: $color_86;
			font-size: 12px;
			margin-bottom: .5rem;
		}
		textarea {
			&::-webkit-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-ms-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-moz-placeholder {
				color: $color_2;
				font-size: 14px;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
/*
    Contact
*/
.contact {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		h5 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		label {
			text-transform: $transform-upper;
			color: $color_86;
			font-size: 12px;
		}
		input {
			&::-webkit-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-ms-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-moz-placeholder {
				color: $color_2;
				font-size: 14px;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
/*
    Social
*/
.social {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		h5 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		input {
			border-radius: .25rem !important;
			&::-webkit-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-ms-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-moz-placeholder {
				color: $color_2;
				font-size: 14px;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.input-group-prepend {
		.input-group-text {
			border-radius: $br-6;
			color: $white;
			border: none;
		}
	}
	.social-behance {
		.input-group-prepend {
			.input-group-text {
				background-color: $primary;
			}
		}
	}
	.social-dribbble {
		.input-group-prepend {
			.input-group-text {
				background-color: $additional-color-3;
			}
		}
	}
	.social-fb {
		.input-group-prepend {
			.input-group-text {
				background-color: $color_57;
			}
		}
	}
	.social-pintrest {
		.input-group-prepend {
			.input-group-text {
				background-color: $danger;
			}
		}
	}
	.social-tweet {
		.input-group-prepend {
			.input-group-text {
				background-color: $info;
			}
		}
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
/*
    Skills
*/
.skill {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		h5 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		.bootstrap-tagsinput {
			display: inline-block;
			padding: 4px 6px;
			max-width: 100%;
			line-height: 22px;
			.tag {
				margin-right: 2px;
				color: $white;
				background-color: $additional-color-4;
				border-radius: 20px;
				padding: 4px 20px;
				display: inline-block;
				margin-bottom: 5px;
				span[data-role="remove"] {
					&:before {
						font-family: $font_family_1 !important;
						content: '\e942';
						font-size: 7px;
						margin-left: 7px;
						cursor: pointer;
						vertical-align: middle;
					}
				}
			}
			input {
				border: $b-width-1 $solid $color_622;
				box-shadow: none;
				outline: none;
				margin: $m-20 $m-0 $m-0 $m-0;
				max-width: inherit;
				border-radius: 4px;
				padding: 6px;
			}
		}
		label {
			text-transform: $transform-upper;
			color: $light-primary;
		}
		input {
			&::-webkit-input-placeholder {
				color: $light-dark;
			}
			&::-ms-input-placeholder {
				color: $light-dark;
			}
			&::-moz-placeholder {
				color: $light-dark;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
/*
    Education and Experience
*/
.edu-experience {
	background-color: $white;
	border-radius: 10px;
	.info {
		padding: $p-20;
		h5 {
			color: $primary;
			margin: 1rem 0 3rem 0.9rem;
			font-weight: 600;
			font-size: 16px;
			text-transform: $transform-upper;
		}
		label {
			text-transform: $transform-upper;
			color: $color_86;
			font-size: 12px;
		}
		input {
			&::-webkit-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-ms-input-placeholder {
				color: $color_2;
				font-size: 14px;
			}
			&::-moz-placeholder {
				color: $color_2;
				font-size: 14px;
			}
		}
	}
	.save-info {
		padding: $p-20;
	}
	.btn-gradient-warning {
		width: 100px;
	}
}
@media (max-width: 767px) {
	.general-info {
		.info {
			.upload {
				border-right: none;
			}
		}
	}
}