vue-intergrall-plugins 0.0.207 → 0.0.210

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.207",
+  "version": "0.0.210",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Cards/CardFile.vue

@@ -1,24 +1,24 @@
 <template>
   <span class="file-item">
     <transition-group name="fade" mode="out-in" class="file-item-transition">
-      <div v-if="loading" :small="true" key="card-file-loader" class="req-loader slow"></div>
+      <div v-if="isLoading" :small="true" key="card-file-loader" class="req-loader slow"></div>
       <template v-else>
-        <span v-if="imageUrl" class="file-img box-shadow" @click="openFile(imageUrl, true)" key="card-file-img" :title="fileName">
-          <img :src="`${imageUrl}`" :alt="fileName" />
+        <span v-if="imageURL" class="file-img box-shadow" @click="openWindowFromURL(imageURL, true)" key="card-file-img" :title="filename">
+          <img :src="`${imageURL}`" :alt="filename" />
         </span>
         <span 
           v-else
           class="file-icon"
           key="card-file-doc" 
-          :class="[currentClass]"
-          @click="openFile(docUrl, false)"
-          :title="fileName"
+          :class="[iconClass]"
+          @click="openWindowFromURL(docURL, false)"
+          :title="filename"
           target="_blank" 
           rel="noreferrer noopener"
         >
           <fa-icon :icon="icon" />
         </span>
-        <a :href="imageUrl ? imageUrl : docUrl" :download="`${fileName}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${fileName}`">
+        <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${filename}`">
           <fa-icon :icon="['fas', 'download']" />
         </a>
       </template>
@@ -36,9 +36,10 @@
 </style>
 
 <script>
-import { gerarVariaveisAnexo } from "../../services/formatMessage"
+import { fileHandler } from "../../mixins/fileHandler"
 
 export default {
+  mixins: [fileHandler],
   props: {
     file: {
       type: Object,
@@ -53,65 +54,8 @@ export default {
       required: true
     }
   },
-  computed: {
-    currentClass() {
-      return this.fileExt === "pdf" ? "pdf" : "doc"
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      isAnexo: false,
-      imageUrl: "",
-      fileExt: "", 
-      docUrl: "",
-      fileName: "",
-      audio: false,
-      video:  false,
-      icon: []
-    }
-  },
-  mounted() {
-    this.setFileVars()
-  },
-  methods: {
-    setFileVars() {
-      try {
-        const {
-          anexo,
-          imgAnexo,
-          tipoDoc,
-          docAnexo,
-          nomeArquivo,
-          audio,
-          video
-        } = gerarVariaveisAnexo(this.file, { dominio: this.domain });
-    
-        this.isAnexo = anexo;
-        this.imageUrl = imgAnexo;
-        this.fileExt = tipoDoc;
-        this.docUrl = docAnexo;
-        this.fileName = nomeArquivo;
-        this.audio = audio;
-        this.video = video;
-
-        this.generateIcon();
-
-        this.loading = false;
-      }catch(e) {
-        console.error("Erro ao gerar as variaveis dos anexos")
-        console.error(e)
-      }
-    },
-    generateIcon() {
-      this.icon = this.fileExt === "pdf" ? ['fas', 'file-pdf'] : ['fas', 'file-alt']
-    },
-    openFile(link, isImg) {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      const options = !isImg ? `width=${width},height=${height}` : "width=auto,height=auto"
-      window.open(link, "card-file", options)
-    }
+  mounted(){
+    this.setFileVars(this.file, { dominio: this.domain })
   }
 }
 </script>

package/src/lib-components/Chat/BtnFiles.vue

@@ -176,9 +176,13 @@ export default {
       if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
     },
     isFileValid(type, fileName) {
+      if((type == "img" && !this.fileSettings.imagesExtensions) || (type == "doc" && !this.fileSettings.docsExtensions)) {
+        this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
+        this.hasAnyFile = false
+        return false
+      }
       const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
       const regex = new RegExp("("+extensions+")", "i")
-
       if(regex.test(fileName)) return true
       this.hasAnyFile = false
       this.showToastedValidFormats()
@@ -197,10 +201,15 @@ export default {
         this.fileSize = 0
         if(this.fileFormatError) this.file = []
         this.openFiles = false
-        let filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
+        const filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
         this.file = filesAux.length ? filesAux : this.file 
 
         if(!this.file.length) return
+        if(this.file.length > this.fileSettings.max) {
+          this.file = []
+          return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+        }
+
         this.hasAnyFile = true
         this.fileSize = this.file.length
         if(!this.fileSettings.multiple) {
@@ -215,6 +224,8 @@ export default {
       }
     },
     returnFileType(file) {
+      if(!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions) return ""
+
       const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
       if(imgRegex.test(file.name)) return "img"
 
@@ -224,50 +235,64 @@ export default {
       return ""
     },
     multipleFileUpload() {
+      const hasImgExt = this.fileSettings.imagesExtensions ? true : false
+      const hasDocExt = this.fileSettings.docsExtensions ? true : false
+      if(!hasImgExt && !hasDocExt) {
+        this.file = []
+        this.fileSize = 0
+        return this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
+      }
       let waitForImageLoad = false
       this.file = Array.from(this.file)
       this.file.forEach(file => {
-        const fileReader = new FileReader();
-
         const singleFileType = this.returnFileType(file)
         if(!singleFileType) file.invalid = true
         file.imgOrDoc = singleFileType ? singleFileType : ""
-
-        if(file.imgOrDoc === "doc") this.isDoc = true
-        if(file.imgOrDoc === "img") {
-          waitForImageLoad = true
-          fileReader.onload = () => file.src = fileReader.result
-          fileReader.onloadend = () => this.emitFileVars(true)
-        }
-
         if(this.isFileValid(file.imgOrDoc, file.name)) {
-          if(file.imgOrDoc === "img") fileReader.readAsDataURL(file)
+          if(file.imgOrDoc == "img") {
+            const fileReader = new FileReader();
+            waitForImageLoad = true
+            fileReader.onload = () => file.src = fileReader.result
+            fileReader.onloadend = () => this.emitFileVars(true)
+            fileReader.readAsDataURL(file)
+          }
+          if(file.imgOrDoc === "doc") this.isDoc = true
           file.invalid = false
           this.fileFormatError = false
         }else{
           file.invalid = true
           this.fileFormatError = true
-          this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
+          if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")}`
+          if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
+          if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")} - Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
         }
       })
+      
+      if(this.fileFormatError) {
+        this.file = []
+        this.fileSize = 0
+      }
 
       if(this.isDoc && !waitForImageLoad) this.emitFileVars()
     },
     singleFileUpload(type, fileName) {
-      const fileReader = new FileReader()
-      if(type === "img") {
-        fileReader.onload = () => this.imagePreview = fileReader.result 
-        fileReader.onloadend = () => this.emitFileVars()
-      }
-
       if(this.isFileValid(type, fileName)) {
-        if(type === "img") fileReader.readAsDataURL(this.file)
+        const fileReader = new FileReader()
+        if(type === "img") {
+          fileReader.onload = () => this.imagePreview = fileReader.result 
+          fileReader.onloadend = () => this.emitFileVars()
+          fileReader.readAsDataURL(this.file)
+        }
         if(type === "doc") this.isDoc = true
         
         this.fileFormatError = false
       }else {
         this.fileFormatError = true
-        this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
+        const hasImgExt = this.fileSettings.imagesExtensions ? true : false
+        const hasDocExt = this.fileSettings.docsExtensions ? true : false
+        if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`
+        if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`
+        if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`
       }
 
       if(this.isDoc) this.emitFileVars()

package/src/lib-components/Chat/MultipleFilePreview.vue

@@ -9,12 +9,12 @@
         </span>
         <div class="text-footer-invalid-format" v-if="fileFormatError" key="mfp-invalid-format">
           <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-          <h4 v-html="validFileFormats"></h4>
+          <h4 v-html="validFileFormats" :title="validFileFormats"></h4>
         </div>
       </template>
       <template v-else>
         <div class="file-preview" v-for="(singleFile, index) in file" :key="index">
-          <p class="file-title">
+          <p class="file-title" :title="singleFile.name">
             <fa-icon :icon="icon(singleFile.imgOrDoc)" />
             {{ singleFile.name }}
           </p>
@@ -33,8 +33,11 @@
             <span class="pdf" v-else-if="isPdf(singleFile.type)">
               <fa-icon :icon="['fas', 'file-pdf']" />
             </span>
+            <span class="doc" v-else>
+              <fa-icon :icon="['fas', 'file-alt']" />
+            </span>
           </div>
-          <span @click="deleteSpecificFile(singleFile.name, index)" :title="dictionary.msg_excluir_anexo" class="delete-file">
+          <span @click="deleteSpecificFile(singleFile.name, index)" v-tippy="{placement: 'left'}" :content="dictionary.msg_excluir_anexo" :title="dictionary.msg_excluir_anexo" class="delete-file">
             <fa-icon :icon="['fas', 'trash-alt']" />
           </span>
         </div>
@@ -145,9 +148,13 @@ export default {
     padding: 10px; 
   }
   .text-footer-invalid-format h3 {
+    text-overflow: ellipsis;
+    overflow: hidden;
     font-weight: 500; 
   }
   .text-footer-invalid-format h4 {
+    text-overflow: ellipsis;
+    overflow: hidden;
     font-size: .9rem; 
   }
 
@@ -200,7 +207,8 @@ export default {
     margin-left:5px;
   }
   .file-title > svg {
-    margin-right: 5px
+    margin-right: 5px;
+    color: #333;
   }
 
   .small-img {
@@ -215,17 +223,22 @@ export default {
     height: 40px;
     cursor: pointer;
   }
-  .small-img .pdf {
+  .small-img .pdf, .small-img .doc {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 30px;
+  }
+  .small-img .pdf {
     color: #E74C3C;
   }
-  .small-img .pdf svg{ 
+  .small-img .doc {
+    color: #006bc9;
+  }
+  .small-img .pdf svg, .small-img .doc svg{ 
     z-index: 1;
   }
-  .small-img .pdf::after {
+  .small-img .pdf::after, .small-img .doc::after {
     content: "";
     position: absolute;
     bottom: 2px;

package/src/lib-components/Chat/SingleFilePreview.vue

@@ -6,10 +6,10 @@
     </span>
     <div class="text-footer-invalid-format" v-if="fileFormatError">
       <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-      <h4 v-text="validFileFormats"></h4>
+      <h4 v-text="validFileFormats" :title="validFileFormats"></h4>
     </div>
     <template v-else>
-      <h3 v-if="file.name" class="text-footer-preview-title">
+      <h3 v-if="file.name" class="text-footer-preview-title" :title="file.name">
         <fa-icon :icon="['fas', 'file-alt']" v-if="isDoc" />
         <fa-icon :icon="['fas', 'image']" v-else />
         {{ file.name }}

package/src/lib-components/Chat/StandardMessages.vue

@@ -139,7 +139,7 @@ export default {
         this.loadingReq = true
         this.getStandardMessages(cod, this.token_cliente).then((data) => {
           this.loadingReq = false
-          if(data.msg_ret) return this.$toasted.global.emConstrucao({ msg: data.msg_ret })
+          if(data.msg_ret) return this.$toasted.global.defaultInfo({ msg: data.msg_ret })
           if(data) return this.showFormattedMessage(data, selectionIndex)
           this.$toasted.global.defaultError()
         }).catch(e => { 
@@ -157,7 +157,7 @@ export default {
       try {
         let success = false
         if(Array.isArray(messageData)) success = true
-        if(!success && selectionIndex != 4) this.$toasted.global.emConstrucao({ msg: messageData ? messageData.msg : "Nao foi possível obter mensagens" })
+        if(!success && selectionIndex != 4) this.$toasted.global.defaultInfo({ msg: messageData ? messageData.msg : "Nao foi possível obter mensagens" })
 
         switch (selectionIndex) {
           case 2:
@@ -177,7 +177,7 @@ export default {
           case 3:
             if(!success) {
               this.formatted_messages_3.push(messageData)
-              this.$toasted.global.emConstrucao({msg: this.dictionary.msg_erro_sem_msg_formatada})
+              this.$toasted.global.defaultInfo({msg: this.dictionary.msg_erro_sem_msg_formatada})
               this.$emit("close-blocker-standard-message")
             }else{
               if(messageData.length){

package/src/lib-components/Chat/TextFooter.vue

@@ -143,7 +143,7 @@ export default {
     },
     fileSettings: {
       type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false, systemButton: false } },
+      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false, systemButton: false, max: 3 } },
       required: false
     },
     textId: {
@@ -211,7 +211,7 @@ export default {
         if(event.data == '' && this.showStandardMessages){
           this.closeBlockerStandardMessage()
           this.toggleStandardMessages()
-          this.$toasted.global.emConstrucao({msg: this.dictionary.msg_erro_sem_msg_formatada})
+          this.$toasted.global.defaultInfo({msg: this.dictionary.msg_erro_sem_msg_formatada})
         }else if(typeof event.data === "string" && this.showStandardMessages){
           this.message = event.data
           this.focusTextarea()
@@ -383,13 +383,14 @@ export default {
       this.audioSource = ""
     },
     returnFileType(file, stopAlert) {
+      if(!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions) return false
       const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
       if(imgRegex.test(file.name)) return "img"
 
       const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
       if(docRegex.test(file.name)) return "doc"
 
-      if(!stopAlert) return
+      if(!stopAlert) return false
       if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
       const str = {
         img: this.fileSettings.imagesExtensions.split("|").join(", "),
@@ -717,6 +718,7 @@ ul {
       }
     
   .text-footer-container .text-footer-preview-container {
+    width: 100%;
     cursor: default;
     position: absolute;
     left: 0;

package/src/lib-components/Messages/AnexoMensagem.vue

@@ -7,45 +7,46 @@
           {{dictionary.img_com_erro}}
         </div>
       </div>
-      <Loader v-if="carregando" :small="true" key="anexo-loader" :slow="true" />
+      <Loader v-if="isLoading" :small="true" key="anexo-loader" :slow="true" />
       <div v-else key="anexo-mensagem" class="anexo-mensagem">
-        <img v-if="imgAnexo" @click="abrirVisualizacaoImg(imgAnexo)" :src="imgAnexo" :alt="dictionary.alt_msg_img">
-        <div class="anexos-links-container" v-if="imgAnexo">
-          <a href="#" @click="abrirVisualizacaoImg(imgAnexo)"> {{ dictionary.titulo_visualizar_img }} </a>
-          <fa-icon :icon="['fas', 'search-plus']" @click="abrirVisualizacaoImg(imgAnexo)" />
+        <img v-if="imageURL" @click="showImage(imageURL)" :src="imageURL" :alt="dictionary.alt_msg_img">
+        <div class="anexos-links-container" v-if="imageURL">
+          <a href="#" @click.prevent="showImage(imageURL)"> {{ dictionary.titulo_visualizar_img }} </a>
+          <fa-icon :icon="['fas', 'search-plus']" @click="showImage(imageURL)" />
         </div>
-        <div v-else-if="docAnexo" class="anexo-container">
+        <div v-else-if="docURL" class="anexo-container">
           <template v-if="audio || video">
-            <audio v-if="audio" :src="docAnexo" controls :title="`${tipoDoc} - ${nomeArquivo}`">
-              <p> {{ dictionary.msg_erro_audio }} <a :href="docAnexo" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_audio }} </a> </p>
+            <audio v-if="audio" :src="docURL" controls :title="`${fileType} - ${filename}`">
+              <p> {{ dictionary.msg_erro_audio }} <a :href="docURL" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_audio }} </a> </p>
             </audio>
-            <video v-if="video" :src="docAnexo" controls :title="`${tipoDoc} - ${nomeArquivo}`">
-              <p> {{ dictionary.msg_erro_video }} <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_video }} </a> </p>
+            <video v-if="video" :src="docURL" controls :title="`${fileType} - ${filename}`">
+              <p> {{ dictionary.msg_erro_video }} <a v-if="fileType != 'erro'" :href="docURL" target="_blank" rel="noreferrer noopener"> {{ dictionary.msg_abrir_video }} </a> </p>
             </video>
           </template>
           <template v-else>
-            <a v-if="tipoDoc != 'erro'" :href="docAnexo" target="_blank" rel="noreferrer noopener" :title="`${tipoDoc} - ${nomeArquivo}`">
-              <fa-icon :icon="this.icone" />
-              <p v-text="nomeArquivo"></p>
+            <a v-if="fileType != 'erro'" :href="docURL" target="_blank" rel="noreferrer noopener" :title="`${fileType} - ${filename}`">
+              <fa-icon :class="[iconClass]" :icon="icon" />
+              <p v-text="filename"></p>
             </a>
-            <p v-else :title="`${tipoDoc} - ${nomeArquivo}`" class="arquivo-erro">
+            <p v-else :title="`${fileType} - ${filename}`" class="arquivo-erro">
               <fa-icon :icon="['fas', 'file-alt']" />
-              {{ nomeArquivo }}
+              {{ filename }}
             </p>
           </template>
         </div>
-        <a v-if="imgAnexo" :href="imgAnexo" :download="`${nomeArquivo}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_img }} <fa-icon :icon="['fas', 'download']" /> </a>
-        <a v-if="docAnexo" :href="docAnexo" :download="`${nomeArquivo}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_doc }} <fa-icon :icon="['fas', 'download']" /> </a>
+        <a v-if="imageURL" :href="imageURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_img }} <fa-icon :icon="['fas', 'download']" /> </a>
+        <a v-if="docURL" :href="docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"> {{ dictionary.titulo_baixar_doc }} <fa-icon :icon="['fas', 'download']" /> </a>
       </div>
     </transition-group>
   </div>
 </template>
 
 <script>
-import { gerarVariaveisAnexo } from "../../services/formatMessage"
+import { fileHandler } from "../../mixins/fileHandler"
 import Loader from "../Loader/Loader"
 
 export default {
+  mixins: [fileHandler],
   components: { Loader },
   props: {
     anexo: {
@@ -67,86 +68,37 @@ export default {
   },
   data() {
     return {
-      carregando: true,
-      isAnexo: false,
-      imgAnexo: "",
-      tipoDoc: "", 
-      docAnexo: "",
-      nomeArquivo: "",
-      audio: false,
-      video:  false,
-      icone: [],
       imgErro: false,
       imgMsgErro: '',
     }
   },
   mounted() {
     if(this.validarAnexo()){
-      this.setVariaveisAnexo()
+      this.setFileVars(this.anexo, { dominio: this.dominio })
     }
   },
   methods: {
-    abrirVisualizacaoImg(imagem){
-      this.$emit("abrir-imagem", imagem)
-    },
-    setVariaveisAnexo() {
-      try {
-        const {
-          anexo,
-          imgAnexo,
-          tipoDoc,
-          docAnexo,
-          nomeArquivo,
-          audio,
-          video
-        } = gerarVariaveisAnexo(this.anexo, { dominio: this.dominio });
-    
-        this.isAnexo = anexo;
-        this.imgAnexo = imgAnexo;
-        this.tipoDoc = tipoDoc;
-        this.docAnexo = docAnexo;
-        this.nomeArquivo = nomeArquivo;
-        this.audio = audio;
-        this.video = video;
-
-        this.gerarIcone();
-
-        this.carregando = false;
-      }catch(e) {
-        console.error("Erro ao gerar as variaveis dos anexos")
-        console.error(e)
-      }
-    },
     validarAnexo(){
-      let status = true;
+      let status = true
       //caso for audio ou documento ignorar
-      if(this.anexo.docAnexo || this.anexo.audio){
-        return true;
-      }
+      if(this.anexo.docURL || this.anexo.audio) return true
       if(!this.anexo.name){
         this.imgMsgErro = this.dictionary.img_com_erro_nome
-        status = false;
+        status = false
       }
       if(!this.anexo.nomeGravacao){
         this.imgMsgErro = this.dictionary.img_com_erro_nome_gravacao
-        status = false;
+        status = false
       }
-      // if(!this.anexo.size || this.anexo.size == 0){
-      //   this.imgMsgErro = this.dictionary.img_com_erro_tamanho
-      //   status = false;
-      // }
       if(!this.anexo.type){
         this.imgMsgErro = this.dictionary.img_com_erro_tipo
-        status = false;
+        status = false
       }
       if(status == false){
-        this.imgErro = true;
-        this.carregando = false;
+        this.imgErro = true
+        this.isLoading = false
       }
-      return status;
-    },
-    gerarIcone() {
-      this.icone = this.tipoDoc === "pdf" ? ['fas', 'file-pdf'] : ['fas', 'file-alt']
+      return status
     }
   }
 }
@@ -254,4 +206,12 @@ export default {
     font-size: 1.025em;
     margin-right: 2px;
   }
+
+  .pdf {
+    color: #E74C3C;
+  }
+
+  .doc {
+    color: #006bc9
+  }
 </style>