@burh/nuxt-core 1.0.404 → 1.0.406

package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue

@@ -1,516 +1,516 @@
-<template>
-	<div class="bg-white content-left">
-		<div class="profile w-100 text-center">
-			<div class="avatar">
-				<img
-					v-if="userData.urlAvatar"
-					:src="userData.urlAvatar"
-					:alt="userData.name"
-				/>
-				<div v-else class=".">
-					{{ userData.name }}
-				</div>
-			</div>
-
-			<h5
-				class="mb-0 text-wrap"
-				:class="{ 'mt-5': !userData.urlAvatar }"
-				v-html="
-					highlightText(
-						search,
-						`${userData.name} ${userData.last_name}`
-					)
-				"
-			></h5>
-
-			<p
-				class="user-info"
-				v-if="userData.user_experience.length > 0"
-				v-html="
-					highlightText(
-						search,
-						`${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`
-					)
-				"
-			></p>
-
-			<span v-if="userData.user_address">
-				<i class="fas fa-map-marker-alt"></i>
-				{{ userData.user_address.city_name }} -
-				{{ userData.user_address.region_code }} <br>
-				{{ userData.user_address.neighborhood }}
-			</span><br />
-
-			<span
-				v-if="
-					userData && userData.user_complementary_information && userData.user_complementary_information.wage_pretension && userData.user_complementary_information.wage_pretension > 1
-				"
-			>Pretensão salarial:
-				{{
-					userData.user_complementary_information.wage_pretension
-						| convertMoney
-				}}</span
-			>
-		</div>
-
-		<div
-			class="deficiency title-block mt-3 ml-4"
-			v-if="userData.user_deficiency"
-		>
-			<div class="d-flex align-items-center">
-				<i class="fas fa-wheelchair"></i>
-				<h6 class="mb-0 ml-2">Deficiência</h6>
-			</div>
-			<div class="line"></div>
-			<p>
-				{{ userData.user_deficiency.deficiency_id | allDeficiencies }} -
-				{{ userData.user_deficiency.cid }}
-			</p>
-
-			<p v-show="userData.user_deficiency.appliance">
-				Acessório: {{ userData.user_deficiency.appliance }}
-			</p>
-
-			<p v-show="userData.user_deficiency.apparatus">
-				Necessidade: {{ userData.user_deficiency.apparatus }}
-			</p>
-
-			<p v-show="userData.user_deficiency.course">
-				Curso: {{ userData.user_deficiency.course }}
-			</p>
-
-			<p v-show="userData.user_deficiency.note">
-				Anotações: {{ userData.user_deficiency.note }}
-			</p>
-
-			<p v-show="userData.user_deficiency.transport === 1">
-				Utiliza transporte coletivo
-			</p>
-
-			<p v-show="userData.user_deficiency.vehicle === 1">
-				Possuí veículo adaptado
-			</p>
-
-			<p v-show="userData.user_deficiency.escort === 1">
-				Precisa de acompanhante
-			</p>
-		</div>
-
-		<div
-			v-show="userData.user_desired_job.length > 0"
-			class="desidered title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Cargos desejados</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(des, index) in userData.user_desired_job"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, des.occupation)"
-			></p>
-		</div>
-
-		<div
-			v-show="userData.user_language.length > 0"
-			class="languages title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Idiomas</h6>
-			<div class="line"></div>
-
-			<p
-				class="mb-1 text-capitalize"
-				v-for="(lan, index) in userData.user_language"
-				:key="index"
-				v-html="
-					highlightText(
-						search,
-						`${lan.language[0].name} ${languageLevel(lan.level)}`
-					)
-				"
-			></p>
-		</div>
-
-		<div
-			v-show="userData.user_skill.length > 0"
-			class="skills title-block ml-4"
-		>
-			<h6 class="mb-0">Habilidades</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(skill, index) in userData.user_skill"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, skill.skill_word)"
-			></p>
-		</div>
-
-		<div class="socials text-center mt-5">
-			<a
-				:href="baseUrl + '/' + userData.slug.slug"
-				class="text-center"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/burhCv.svg"
-					alt="Burh"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.facebook_url || false"
-				:href="userData.user_complementary_information.facebook_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/facebookCv.svg"
-					alt="Facebook"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.linkedin_url || false"
-				:href="userData.user_complementary_information.linkedin_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/linkedinCv.svg"
-					alt="Linkdin"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.website || false"
-				:href="userData.user_complementary_information.website"
-				class="text-center ml-2"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/webCv.svg"
-					alt="Web"
-				/>
-			</a>
-		</div>
-
-		<div class="burh-code text-center mt-4">
-			<vue-qrcode
-				:value="baseUrl + '/' + userData.slug.slug"
-				:options="{ width: 98, height: 98 }"
-				class="border qr-code"
-			></vue-qrcode>
-			<p class="mb-0">Código BURH</p>
-			<span class="qr-id">{{ userData.id }}</span
-			><br />
-			<div class="teste-block">
-				<span class="font-weight-normal mt-2 d-block" v-if="!isLocked"
-				>Data de atualização:
-					{{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm') }}
-					<!-- <template v-if="isLocked" @click="$emit('open-contact', isLocked)">
-						<i class="fa fa-lock"></i>
-					</template>
-					<template v-else>
-						{{$moment(userData.updated_at).format('DD/MM/YYYY H:mm')}}
-					</template> -->
-				</span>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import getPrefixes from '~/util/getPrefixes.js';
-import VueQrcode from '@chenfengyuan/vue-qrcode';
-// import swal from 'sweetalert2';
-
-export default {
-	name: 'user-cv-left-side',
-	components: {
-		VueQrcode
-	},
-	computed: {
-		currentCompany() {
-			return this.$store.state.company.currentCompany;
-		}
-	},
-	props: {
-		userData: Object,
-		baseUrl: String,
-		search: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			isLocked: !this.companyHasProduct(
-				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['BUSCA_AVANCADA'] || false
-			)
-		};
-	},
-	methods: {
-		highlightText(search, text) {
-			if (search.length < 2) return text;
-
-			const regex = new RegExp(search.toLowerCase(), 'gmi');
-			return String(text || '').replace(
-				regex,
-				`<span class="search-highlight">${search}</span>`
-			);
-		},
-		getTime(
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return textHappening;
-			}
-
-			const dateInitial = this.$moment(
-				['1', start_month.toString(), start_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const dateDone = this.$moment(
-				['1', end_month.toString(), end_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const diffDuration = this.$moment.duration(
-				dateDone.diff(dateInitial)
-			);
-			const years = diffDuration.years();
-			const months = diffDuration.months();
-
-			if (years) {
-				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
-			}
-
-			return months > 1
-				? `(${months} meses)`
-				: months == 1
-					? `(${months} mês)`
-					: '';
-		},
-		languageLevel(level) {
-			switch (parseInt(level)) {
-			case 1:
-				return 'Iniciante';
-			case 2:
-				return 'Elementar';
-			case 3:
-				return 'Pré-intermediário';
-			case 4:
-				return 'Intermediário';
-			case 5:
-				return 'Intermediário Superior';
-			case 6:
-				return 'Avançado';
-			case 7:
-				return 'Fluente';
-			default:
-				return '';
-			}
-		},
-		treatPhone(phone) {
-			if (phone) {
-				if (phone == '0' || phone.length < 9 || !phone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return phone;
-		},
-		treatCellphone(cellphone) {
-			if (cellphone) {
-				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return cellphone;
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-		treatEndDate(end_month, end_year) {
-			if (end_month && end_year) {
-				return `${end_month}/${end_year}`;
-			}
-			return '';
-		}
-	},
-	filters: {
-		allDeficiencies(id) {
-			const typeDeficiency = {
-				1: 'Deficiência Física',
-				2: 'Deficiência Visual',
-				3: 'Deficiência Mental',
-				4: 'Deficiência Auditiva',
-				5: 'Deficiência Fonológica',
-				6: 'Deficiência Múltipla'
-			};
-
-			return typeDeficiency[id] || '-';
-		},
-		convertMoney(money) {
-			let moneyAux = parseFloat(money);
-			let m = moneyAux.toLocaleString('pt-BR', {
-				style: 'currency',
-				currency: 'BRL'
-			});
-			return m;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .search-highlight {
-    background: rgb(255, 252, 61);
-    color: #000;
-}
-
-.teste-block {
-    display: inline !important;
-}
-.qr-id {
-    color: #32325d !important;
-}
-
-.bg-light--darken {
-    background-color: $gray-100 !important;
-}
-
-.profile {
-    .avatar {
-        width: initial!important;
-        height: initial!important;
-        margin-top: -48px;
-        background: transparent !important;
-        img {
-            width: 163px;
-            height: 163px;
-            border-radius: 50%;
-            top: 75%;
-            background: #adb5bd;
-            border: 4px solid #fff;
-        }
-
-        .no-image {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            position: absolute;
-            background-color: #adb5bd;
-            width: 163px;
-            height: 163px;
-            top: 120;
-            border-radius: 50%;
-            margin-bottom: 20px;
-            border: 4px solid #fff;
-        }
-    }
-
-    .user-info {
-        padding: 0 20px;
-        margin-top: 5px;
-    }
-
-    p {
-        font-size: 13px;
-        font-weight: 400;
-        color: #62778c;
-        line-height: 0.85rem;
-        margin-bottom: 2rem;
-    }
-
-    span {
-        font-size: 14px;
-        color: #8da2b5;
-    }
-}
-
-.skills {
-    margin-top: 2.3rem;
-    margin-bottom: 2.3rem;
-}
-
-.desidered {
-    margin-bottom: 2.3rem;
-}
-
-.deficiency {
-    p {
-        margin-top: 0.25rem;
-        margin-bottom: 0;
-        text-transform: capitalize;
-    }
-}
-
-.languages {
-    margin-bottom: 2.3rem;
-}
-
-.title-block {
-    .line {
-        width: 235px;
-        height: 0px;
-        border: 1px solid #ececec5c;
-        margin-bottom: 0.75rem;
-    }
-
-    p {
-        font-size: 13px;
-    }
-}
-
-.burh-code {
-    .qr-code {
-        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-        border-radius: 10px;
-    }
-
-    p {
-        font-size: 8px;
-        font-weight: bold;
-    }
-
-    span {
-        font-size: 12px;
-        font-weight: bold;
-    }
-}
-
-.socials {
-    .no-social {
-        height: 1.39rem;
-    }
-}
-
-.cv-left {
-    word-break: initial;
-}
-
-.disable-none {
-    user-select: none;
-}
-
-.content-left {
-    width: 25%;
-    height: auto;
-    padding: 0 20px;
-    word-break: break-word !important;
-    color: #62778c !important;
-}
-</style>
+<template>
+	<div class="bg-white content-left">
+		<div class="profile w-100 text-center">
+			<div class="avatar">
+				<img
+					v-if="userData.urlAvatar"
+					:src="userData.urlAvatar"
+					:alt="userData.name"
+				/>
+				<div v-else class=".">
+					{{ userData.name }}
+				</div>
+			</div>
+
+			<h5
+				class="mb-0 text-wrap"
+				:class="{ 'mt-5': !userData.urlAvatar }"
+				v-html="
+					highlightText(
+						search,
+						`${userData.name} ${userData.last_name}`
+					)
+				"
+			></h5>
+
+			<p
+				class="user-info"
+				v-if="userData.user_experience.length > 0"
+				v-html="
+					highlightText(
+						search,
+						`${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`
+					)
+				"
+			></p>
+
+			<span v-if="userData.user_address">
+				<i class="fas fa-map-marker-alt"></i>
+				{{ userData.user_address.city_name }} -
+				{{ userData.user_address.region_code }} <br>
+				{{ userData.user_address.neighborhood }}
+			</span><br />
+
+			<span
+				v-if="
+					userData && userData.user_complementary_information && userData.user_complementary_information.wage_pretension && userData.user_complementary_information.wage_pretension > 1
+				"
+			>Pretensão salarial:
+				{{
+					userData.user_complementary_information.wage_pretension
+						| convertMoney
+				}}</span
+			>
+		</div>
+
+		<div
+			class="deficiency title-block mt-3 ml-4"
+			v-if="userData.user_deficiency"
+		>
+			<div class="d-flex align-items-center">
+				<i class="fas fa-wheelchair"></i>
+				<h6 class="mb-0 ml-2">Deficiência</h6>
+			</div>
+			<div class="line"></div>
+			<p>
+				{{ userData.user_deficiency.deficiency_id | allDeficiencies }} -
+				{{ userData.user_deficiency.cid }}
+			</p>
+
+			<p v-show="userData.user_deficiency.appliance">
+				Acessório: {{ userData.user_deficiency.appliance }}
+			</p>
+
+			<p v-show="userData.user_deficiency.apparatus">
+				Necessidade: {{ userData.user_deficiency.apparatus }}
+			</p>
+
+			<p v-show="userData.user_deficiency.course">
+				Curso: {{ userData.user_deficiency.course }}
+			</p>
+
+			<p v-show="userData.user_deficiency.note">
+				Anotações: {{ userData.user_deficiency.note }}
+			</p>
+
+			<p v-show="userData.user_deficiency.transport === 1">
+				Utiliza transporte coletivo
+			</p>
+
+			<p v-show="userData.user_deficiency.vehicle === 1">
+				Possuí veículo adaptado
+			</p>
+
+			<p v-show="userData.user_deficiency.escort === 1">
+				Precisa de acompanhante
+			</p>
+		</div>
+
+		<div
+			v-show="userData.user_desired_job.length > 0"
+			class="desidered title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">Cargos desejados</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(des, index) in userData.user_desired_job"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, des.occupation)"
+			></p>
+		</div>
+
+		<div
+			v-show="userData.user_language.length > 0"
+			class="languages title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">Idiomas</h6>
+			<div class="line"></div>
+
+			<p
+				class="mb-1 text-capitalize"
+				v-for="(lan, index) in userData.user_language"
+				:key="index"
+				v-html="
+					highlightText(
+						search,
+						`${lan.language[0].name} ${languageLevel(lan.level)}`
+					)
+				"
+			></p>
+		</div>
+
+		<div
+			v-show="userData.user_skill.length > 0"
+			class="skills title-block ml-4"
+		>
+			<h6 class="mb-0">Habilidades</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(skill, index) in userData.user_skill"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, skill.skill_word)"
+			></p>
+		</div>
+
+		<div class="socials text-center mt-5">
+			<a
+				:href="baseUrl + '/' + userData.slug.slug"
+				class="text-center"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/burhCv.svg"
+					alt="Burh"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.facebook_url || false"
+				:href="userData.user_complementary_information.facebook_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/facebookCv.svg"
+					alt="Facebook"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.linkedin_url || false"
+				:href="userData.user_complementary_information.linkedin_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/linkedinCv.svg"
+					alt="Linkdin"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.website || false"
+				:href="userData.user_complementary_information.website"
+				class="text-center ml-2"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/webCv.svg"
+					alt="Web"
+				/>
+			</a>
+		</div>
+
+		<div class="burh-code text-center mt-4">
+			<vue-qrcode
+				:value="baseUrl + '/' + userData.slug.slug"
+				:options="{ width: 98, height: 98 }"
+				class="border qr-code"
+			></vue-qrcode>
+			<p class="mb-0">Código BURH</p>
+			<span class="qr-id">{{ userData.id }}</span
+			><br />
+			<div class="teste-block">
+				<span class="font-weight-normal mt-2 d-block" v-if="!isLocked"
+				>Data de atualização:
+					{{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm') }}
+					<!-- <template v-if="isLocked" @click="$emit('open-contact', isLocked)">
+						<i class="fa fa-lock"></i>
+					</template>
+					<template v-else>
+						{{$moment(userData.updated_at).format('DD/MM/YYYY H:mm')}}
+					</template> -->
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
+// import swal from 'sweetalert2';
+
+export default {
+	name: 'user-cv-left-side',
+	components: {
+		VueQrcode
+	},
+	computed: {
+		currentCompany() {
+			return this.$store.state.company.currentCompany;
+		}
+	},
+	props: {
+		userData: Object,
+		baseUrl: String,
+		search: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isLocked: !this.companyHasProduct(
+				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['BUSCA_AVANCADA'] || false
+			)
+		};
+	},
+	methods: {
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(
+				regex,
+				`<span class="search-highlight">${search}</span>`
+			);
+		},
+		getTime(
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = 'Cursando'
+		) {
+			const isHappening = !end_month && !end_year;
+
+			if (isHappening) {
+				return textHappening;
+			}
+
+			const dateInitial = this.$moment(
+				['1', start_month.toString(), start_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const dateDone = this.$moment(
+				['1', end_month.toString(), end_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const diffDuration = this.$moment.duration(
+				dateDone.diff(dateInitial)
+			);
+			const years = diffDuration.years();
+			const months = diffDuration.months();
+
+			if (years) {
+				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
+			}
+
+			return months > 1
+				? `(${months} meses)`
+				: months == 1
+					? `(${months} mês)`
+					: '';
+		},
+		languageLevel(level) {
+			switch (parseInt(level)) {
+			case 1:
+				return 'Iniciante';
+			case 2:
+				return 'Elementar';
+			case 3:
+				return 'Pré-intermediário';
+			case 4:
+				return 'Intermediário';
+			case 5:
+				return 'Intermediário Superior';
+			case 6:
+				return 'Avançado';
+			case 7:
+				return 'Fluente';
+			default:
+				return '';
+			}
+		},
+		treatPhone(phone) {
+			if (phone) {
+				if (phone == '0' || phone.length < 9 || !phone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return phone;
+		},
+		treatCellphone(cellphone) {
+			if (cellphone) {
+				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return cellphone;
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+		treatEndDate(end_month, end_year) {
+			if (end_month && end_year) {
+				return `${end_month}/${end_year}`;
+			}
+			return '';
+		}
+	},
+	filters: {
+		allDeficiencies(id) {
+			const typeDeficiency = {
+				1: 'Deficiência Física',
+				2: 'Deficiência Visual',
+				3: 'Deficiência Mental',
+				4: 'Deficiência Auditiva',
+				5: 'Deficiência Fonológica',
+				6: 'Deficiência Múltipla'
+			};
+
+			return typeDeficiency[id] || '-';
+		},
+		convertMoney(money) {
+			let moneyAux = parseFloat(money);
+			let m = moneyAux.toLocaleString('pt-BR', {
+				style: 'currency',
+				currency: 'BRL'
+			});
+			return m;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .search-highlight {
+    background: rgb(255, 252, 61);
+    color: #000;
+}
+
+.teste-block {
+    display: inline !important;
+}
+.qr-id {
+    color: #32325d !important;
+}
+
+.bg-light--darken {
+    background-color: $gray-100 !important;
+}
+
+.profile {
+    .avatar {
+        width: initial!important;
+        height: initial!important;
+        margin-top: -48px;
+        background: transparent !important;
+        img {
+            width: 163px;
+            height: 163px;
+            border-radius: 50%;
+            top: 75%;
+            background: #adb5bd;
+            border: 4px solid #fff;
+        }
+
+        .no-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: absolute;
+            background-color: #adb5bd;
+            width: 163px;
+            height: 163px;
+            top: 120;
+            border-radius: 50%;
+            margin-bottom: 20px;
+            border: 4px solid #fff;
+        }
+    }
+
+    .user-info {
+        padding: 0 20px;
+        margin-top: 5px;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 400;
+        color: #62778c;
+        line-height: 0.85rem;
+        margin-bottom: 2rem;
+    }
+
+    span {
+        font-size: 14px;
+        color: #8da2b5;
+    }
+}
+
+.skills {
+    margin-top: 2.3rem;
+    margin-bottom: 2.3rem;
+}
+
+.desidered {
+    margin-bottom: 2.3rem;
+}
+
+.deficiency {
+    p {
+        margin-top: 0.25rem;
+        margin-bottom: 0;
+        text-transform: capitalize;
+    }
+}
+
+.languages {
+    margin-bottom: 2.3rem;
+}
+
+.title-block {
+    .line {
+        width: 235px;
+        height: 0px;
+        border: 1px solid #ececec5c;
+        margin-bottom: 0.75rem;
+    }
+
+    p {
+        font-size: 13px;
+    }
+}
+
+.burh-code {
+    .qr-code {
+        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+        border-radius: 10px;
+    }
+
+    p {
+        font-size: 8px;
+        font-weight: bold;
+    }
+
+    span {
+        font-size: 12px;
+        font-weight: bold;
+    }
+}
+
+.socials {
+    .no-social {
+        height: 1.39rem;
+    }
+}
+
+.cv-left {
+    word-break: initial;
+}
+
+.disable-none {
+    user-select: none;
+}
+
+.content-left {
+    width: 25%;
+    height: auto;
+    padding: 0 20px;
+    word-break: break-word !important;
+    color: #62778c !important;
+}
+</style>