<template>
  <div class="col-12 row">
    <div class="row col-12" style="padding-top: 80px">
      <div id="information" name="1" class="row col-12 information q-mt-sm">
        <!-- <Informationvue
            v-model:statusEdit="statusEdit"
            :profileType="profileType"
          /> -->
        <Information :statusAdd="true" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Information from "@/modules/08_registryEmployee/views/information.vue";
</script>
<style>
.image-size-default {
  height: 150px;
  max-width: 15vw;
}

.image-size-full {
  height: 160px;
  max-width: 15vw;
}

.border-green {
  border: 5px solid #52c688;
}

.area-div {
  background-color: transparent;
}

.text-header {
  font-size: 1.2em;
}

.containerimage {
  position: relative;
}

.containerimage:hover .overlay {
  opacity: 1;
}

.overlay {
  background-color: #e4f2ffd2 !important;
  opacity: 0;
  padding: 2px !important;
}

.information:target {
  padding-top: 84px;
}

.border-custom {
  border: 0.5px solid #c3c3c3;
}

.bg-active-image {
  background-color: #52c688;
}

.text-name {
  font-size: 1.3em;
  overflow: hidden;
}

.text-sub {
  font-size: 1.2em;
  overflow: hidden;
  color: var(--q-primary);
}
</style>
