/*
    General Infomation
*/

.general-info {
    background-color: #fff;
    border-radius: 10px;
}
.general-info .info { padding: 20px; }
.general-info .save-info { padding: 20px; }
.general-info .info .form { width: 92%; }
.general-info .info .upload { border-right: 1px solid #e6ecf5; }
.general-info .info .upload p {
    font-size: 14px;
    font-weight: 600;
    color: #3862f5;
}
.general-info .info .upload p i {
    font-size: 22px;
    color: #3862f5;
    vertical-align: middle;
}
.general-info .info h6 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.general-info .info label {
    text-transform: uppercase;
    color: #816cfd;
    font-size: 12px;
}
.general-info .info input::-webkit-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.general-info .info input::-ms-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.general-info .info input::-moz-placeholder {
    color: #515365;
    font-size: 14px;
}
.form-control { border: 1px solid #d5dae2; }
.form-control:focus {
    color: #3b3f5c;
    border-color: #6156ce;
}
.general-info .btn-gradient-warning { width: 100px; }

/*
    Image upload
*/
.general-info .info .dropify-wrapper {
    width: 200px;
    height: 200px;
    border: none;
    border-radius: 6px;
}
.general-info .info .dropify-wrapper .dropify-preview {
    background-color: #FFF; 
    padding: 0; 
}
.general-info .info .dropify-wrapper .dropify-clear {
    font-size: 16px;
    padding: 4px 8px;
    color: #FFF;
    border: none;
}
.general-info .info .dropify-wrapper .dropify-clear:hover { background-color: transparent; }
.general-info .info .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message { padding-top: 27px; }
.general-info .info .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
    content: '\f1a8';
    font-family: flaticon;
    position: absolute;
    top: -1px;
    left: 38%;
    color: #fff;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    background: transparent;
    width: 0;
    height: 0;
    font-size: 28px;
}
.general-info .info .dropify-wrapper.touch-fallback { border: 1px solid #e9ecef; }
.general-info .info .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner { padding: 0; }
.general-info .info .dropify-wrapper.touch-fallback .dropify-clear { color: #4f5163; }
.general-info .info .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename { margin-top: 10px; }


/*
    About
*/

.about {
    background-color: #fff;
    border-radius: 10px;
}
.about .info { padding: 20px; }
.about .save-info { padding: 20px; }
.about .info h5 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.about .info label {
    text-transform: uppercase;
    color: #816cfd;
    font-size: 12px;
}
.about .info .dob-input {
    text-transform: uppercase;
    color: #816cfd;
    font-size: 12px;
    margin-bottom: .5rem;
}
.about .info textarea::-webkit-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.about .info textarea::-ms-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.about .info textarea::-moz-placeholder {
    color: #515365;
    font-size: 14px;
}
.about .btn-gradient-warning { width: 100px; }

/*
    Contact
*/

.contact {
    background-color: #fff;
    border-radius: 10px;
}
.contact .info { padding: 20px; }
.contact .save-info { padding: 20px; }
.contact .info h5 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.contact .info label {
    text-transform: uppercase;
    color: #816cfd;
    font-size: 12px;
}
.contact .info input::-webkit-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.contact .info input::-ms-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.contact .info input::-moz-placeholder {
    color: #515365;
    font-size: 14px;
}
.contact .btn-gradient-warning { width: 100px; }

/*
    Social
*/

.social {
    background-color: #fff;
    border-radius: 10px;
}
.social .info { padding: 20px; }
.social .save-info { padding: 20px; }
.social .info h5 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.social .input-group-prepend .input-group-text {
    border-radius: 6px;
    color: #fff;
    border: none;
}
.social .social-behance .input-group-prepend .input-group-text { background-color: #1a73e9; }
.social .social-dribbble .input-group-prepend .input-group-text { background-color: #f8538d; }
.social .social-fb .input-group-prepend .input-group-text { background-color: #3862f5; }
.social .social-pintrest .input-group-prepend .input-group-text { background-color: #e7515a; }
.social .social-tweet .input-group-prepend .input-group-text { background-color: #00b1f4; } 
.social .info input { border-radius: .25rem!important; }
.social .info input::-webkit-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.social .info input::-ms-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.social .info input::-moz-placeholder {
    color: #515365;
    font-size: 14px;
}
.social .btn-gradient-warning { width: 100px; }

/*
    Skills
*/

.skill {
    background-color: #fff;
    border-radius: 10px;
}
.skill .info { padding: 20px; }
.skill .save-info { padding: 20px; }
.skill .info h5 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.skill .info .bootstrap-tagsinput {
    display: inline-block;
    padding: 4px 6px;
    max-width: 100%;
    line-height: 22px;
}
.skill .info .bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    background-color: #07dabf;
    border-radius: 20px;
    padding: 4px 20px;
    display: inline-block;
    margin-bottom: 5px;
}
.skill .info .bootstrap-tagsinput .tag span[data-role="remove"]:before {
    font-family: 'flaticon' !important;
    content: '\e942';
    font-size: 7px;
    margin-left: 7px;
    cursor: pointer;
    vertical-align: middle;
}
.skill .info .bootstrap-tagsinput input {
    border: 1px solid #d5dae2;
    box-shadow: none;
    outline: none;
    margin: 20px 0 0 0;
    max-width: inherit;
    border-radius: 4px;
    padding: 6px;
}
.skill .info label {
    text-transform: uppercase;
    color: #c2d5ff;
}
.skill .info input::-webkit-input-placeholder { color: #acb0c3; }
.skill .info input::-ms-input-placeholder { color: #acb0c3; }
.skill .info input::-moz-placeholder { color: #acb0c3; }
.skill .btn-gradient-warning { width: 100px; }

/*
    Education and Experience
*/

.edu-experience {
    background-color: #fff;
    border-radius: 10px;
}
.edu-experience .info { padding: 20px; }
.edu-experience .save-info { padding: 20px; }
.edu-experience .info h5 {
    color: #1a73e9;
    margin: 1rem 0 3rem 0.9rem;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.edu-experience .info label {
    text-transform: uppercase;
    color: #816cfd;
    font-size: 12px;
}
.edu-experience .info input::-webkit-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.edu-experience .info input::-ms-input-placeholder {
    color: #515365;
    font-size: 14px;
}
.edu-experience .info input::-moz-placeholder {
    color: #515365;
    font-size: 14px;
}
.edu-experience .btn-gradient-warning { width: 100px; }

@media(max-width: 767px) {
    .general-info .info .upload { border-right: none; }
}