list
<template>
<div class="container">
  <div class="tab">
    <button class="tablinks" id ="prueba" v-on:click="openTab(event, 'Lista')">Lista</button>
    <button class="tablinks" v-on:click="openTab(event, 'Galería')">Galería</button>
  </div>

  <div id="Lista" class="tabcontent">
    <div class="row">
        <md-table class="col-xs-12">
            <md-table-row>
                <md-table-head>Nombre</md-table-head>
                <md-table-head>Tamaño</md-table-head>
                <md-table-head>Modificacion</md-table-head>
                <md-table-head>Opciones</md-table-head>
            </md-table-row>
            <md-table-row :key="file.webViewLink" v-for="file of files">
                <md-table-cell class="text-align-l">
                  <a :href="file.webViewLink">
                  <img class="icon padding-r-5" :src="chooseExtension(file.extension, file.type)">
                  <span v-if="file.extension != '' ">
                    {{file.filename}}.{{file.extension}}
                  </span>
                  <span v-else>
                    {{file.filename}}
                  </span>
                  </a>
                </md-table-cell>
                <md-table-cell class="text-align-l"> {{convertToMbs(file.size)}} MB </md-table-cell>
                <md-table-cell class="text-align-l"> {{ file.modifiedTime | moment('LLLL') }} </md-table-cell>
                <md-table-cell class="text-align-l">
                <md-menu md-direction="bottom-start" :md-offset-x="127" :md-offset-y="-36">
                  <md-button md-menu-trigger>⋮</md-button>
                    <md-menu-content>
                      <md-menu-item><button v-on:click='downloadFile(file)'>Descargar</button></md-menu-item>
                      <md-menu-item><button v-on:click='deleteFile(file)'>Eliminar</button></md-menu-item>
                    </md-menu-content>
                </md-menu>
              </md-table-cell>
            </md-table-row>
          <md-table-row :key="folder.webViewLink" v-for="folder of folders">
            <md-table-cell class="text-align-l">
              <a :href="'listfolders/' + folder.id">
                <img class="icon padding-r-5" :src="chooseExtension(folder.extension, folder.type)">
                {{folder.filename}}
              </a>
            </md-table-cell>
            <md-table-cell class="text-align-l"> - </md-table-cell>
            <md-table-cell class="text-align-l"> {{folder.modifiedTime | moment('LLLL')}} </md-table-cell>
            <md-table-cell class="text-align-l">
              <md-menu md-direction="bottom-start" :md-offset-x="127" :md-offset-y="-36">
                <md-button md-menu-trigger>⋮</md-button>
                <md-menu-content>
                  <md-menu-item><a :href="folder.webViewLink">Ir a carpeta</a></md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-table-cell>
          </md-table-row>
      </md-table>
  </div>
  </div>

  <div id="Galería" class="tabcontent">
        <table class="row">
          <tr :key="file.webViewLink" v-for="file of files" class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-align-c">
              <a :href="file.webViewLink">
                <img class="width-020" :src="chooseExtension(file.extension, file.type)">
                <span v-if="file.extension != '' ">
                  <p>{{file.filename}}.{{file.extension}} </p>
                </span>
                <span v-else>
                  <p>{{file.filename}}</p>
                </span>
              </a>
          </tr>
          <tr :key="folder.webViewLink" v-for="folder of folders" class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-align-c">
              <a :href="'listfolders/' + folder.id">
                <img class="width-020" :src="chooseExtension(folder.extension, folder.type)">
                <p>{{folder.filename}}</p>
              </a>
          </tr>
        </table>
  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      files: [],
      folders: []
    }
  },
  created () {
    axios.get('http://localhost:9005/list')
      .then(response => {
        this.files = response.data
      })
    axios.get('http://localhost:9005/listfolders')
      .then(response => {
        this.folders = response.data
      })
  },
  methods: {
    openTab (evt, name) {
      var i, tabcontent, tablinks
      tabcontent = document.getElementsByClassName('tabcontent')
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = 'none'
      }
      tablinks = document.getElementsByClassName('tablinks')
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(' active', '')
      }
      document.getElementById(name).style.display = 'block'
      evt.currentTarget.className += ' active'
    },
    convertToMbs (bytes) {
      return ((bytes / 1024) / 1024).toFixed(2)
    },
    chooseExtension (extension, type) {
      extension = extension.toLowerCase()
      if (type === 'dir') {
        return 'static/img/folder.jpg'
      }
      if (extension === 'txt') {
        return 'static/img/txt.jpg'
      }
      if (extension === 'pptx') {
        return 'static/img/ppt.jpg'
      }
      if (extension === 'docx') {
        return 'static/img/docx.jpg'
      }
      if (extension === 'pdf') {
        return 'static/img/pdf.jpg'
      }
      if (extension === 'xlsx') {
        return 'static/img/xlsx.jpg'
      }
      if (extension === 'zip') {
        return 'static/img/zip.jpg'
      }
      if (extension === 'jpg' || extension === 'png') {
        return 'static/img/img.png'
      }
      if (extension === '') {
        return 'static/img/docs.png'
      }
    },
    downloadFile (file) {
      var path = file.path
      var filename = file.filename + '.' + file.extension
      var mimetype = file.mimetype

      axios.post('http://localhost:9005/get', {path, filename, mimetype}, {responseType: 'blob'})
        .then(response => {
          let blob = new Blob([response.data], { type: mimetype })
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = filename
          link.click()
        })
    },
    deleteFile (file) {
      var path = file.path
      axios.get('http://localhost:9005/delete/' + path)
        .then(response => {
          console.log(response)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

h1, h2 {
  font-weight: normal;
}

.width-020{
  width: 20%;
}

.text-align-c{
  text-align: center;
}

.text-align-l{
  text-align: left;
}

.icon {
  height: 30px;
  width: 30px;
}

.display-ib{
  display: inline-block;
}

.padding-r-5{
  padding-right: 5px;
}

/* prueba */

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

</style>
------------------------------
web
<?php
use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('put', function() {
    Storage::cloud()->put('test.txt', 'Hello World');
    return 'File was saved to Google Drive';
});

Route::get('put-existing', function() {
    $filename = 'laravel.png';
    $filePath = public_path($filename);
    $fileData = File::get($filePath);

    Storage::cloud()->put($filename, $fileData);
    return 'File was saved to Google Drive';
});

Route::get('list', function() {
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    //return $contents->where('type', '=', 'dir'); // directories
    return $contents->where('type', '=', 'file'); // files
});

Route::get('listfolders', function() {
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    return $contents->where('type', '=', 'dir'); // directories
    //return $contents->where('type', '=', 'file'); // files
});

Route::get('listfoldercontents/{id}', function($id) {
    return collect(Storage::cloud()->listFolderContents($id));
});

Route::post('get', function(Request $request) {
    $path = $request->get('path');
    $filename = $request->get('filename');
    $mimetype = $request->get('mimetype');

    $rawData = Storage::cloud()->get($path);

    return response($rawData, 200)
        ->header('ContentType', $mimetype)
        ->header('Content-Disposition', "attachment; filename='$filename'");
});

Route::get('delete/{path}', function($path) {

    Storage::cloud()->delete($path);

    return 'File was deleted from Google Drive';
});

Route::get('delete', function(Request $request) {

    $path = $request->get('path');

    Storage::cloud()->delete($path);

    return 'File was deleted from Google Drive';
});

Route::get('put-get-stream', function() {
    // Use a stream to upload and download larger files
    // to avoid exceeding PHP's memory limit.

    // Thanks to @Arman8852's comment:
    // https://github.com/ivanvermeyen/laravel-google-drive-demo/issues/4#issuecomment-331625531
    // And this excellent explanation from Freek Van der Herten:
    // https://murze.be/2015/07/upload-large-files-to-s3-using-laravel-5/

    // Assume this is a large file...
    $filename = 'laravel.png';
    $filePath = public_path($filename);

    // Upload using a stream...
    Storage::cloud()->put($filename, fopen($filePath, 'r+'));

    // Get file listing...
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    // Get file details...
    $file = $contents
        ->where('type', '=', 'file')
        ->where('filename', '=', pathinfo($filename, PATHINFO_FILENAME))
        ->where('extension', '=', pathinfo($filename, PATHINFO_EXTENSION))
        ->first(); // there can be duplicate file names!

    //return $file; // array with file info

    // Store the file locally...
    //$readStream = Storage::cloud()->getDriver()->readStream($file['path']);
    //$targetFile = storage_path("downloaded-{$filename}");
    //file_put_contents($targetFile, stream_get_contents($readStream), FILE_APPEND);

    // Stream the file to the browser...
    $readStream = Storage::cloud()->getDriver()->readStream($file['path']);

    return response()->stream(function () use ($readStream) {
        fpassthru($readStream);
    }, 200, [
        'Content-Type' => $file['mimetype'],
        //'Content-disposition' => 'attachment; filename="'.$filename.'"', // force download?
    ]);
});

Route::get('create-dir/{name_project}', function($name_project) {
    Storage::cloud()->makeDirectory($name_project);

    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    $dir = $contents->where('type', '=', 'dir')
    ->where('filename', '=', $name_project)
    ->first(); // There could be duplicate directory names!

    Storage::cloud()->makeDirectory($dir['path'].'/Enviados');
	Storage::cloud()->makeDirectory($dir['path'].'/Recibidos');
    Storage::cloud()->makeDirectory($dir['path'].'/Trabajo');
    Storage::cloud()->makeDirectory($dir['path'].'/Informe');
    Storage::cloud()->makeDirectory($dir['path'].'/Administracion');
    Storage::cloud()->put($dir['path'].'/Log.txt', 'Log del proyecto');

    return 'Directory was created in Google Drive';
});

function base64url_decode($data) {
    return base64_decode(strtr($data, '-_', '+/'));
}

Route::post('put-in-dir/', function(Request $request) {

    $folderId = $request->get('FolderId');
    $to = $request->get('To');
    $from = $request->get('From');
    $ref = $request->get('Reference');
    $attachsRaw = $request->get('AttachRaw');
    $attNames = $request->get('AttachNames');
    $dateMail = $request->get('DateMail');
    //$dataMail = $request->get('DataMail');
    $subject = $request->get('Subject');
    $content = $request->get('FileRaw');
    $attachRaw = $request->get('AttachRaw');

	$folderName=$subject.'_1234_'.$from.'_'.$dateMail;
	//Hay que añadir un punto al final del string porque si no coge el . del mail y lo parte como si fuese la extension
    Storage::cloud()->makeDirectory($folderId.'/'.$folderName.'.');

    $contents = collect(Storage::cloud()->listFolderContents($folderId));


    $newFolder = $contents->where('type', '=', 'dir')
    ->where('filename', '=', $folderName)
    ->first();

    $folderId2 = $newFolder['path'];

    Storage::cloud()->put($folderId2.'/'. $subject.'.eml', $content);

	$listSize = count($attNames);

    for  ($i = 0; $i< $listSize; $i++){
        Storage::cloud()->put($folderId2.'/'. $attNames[$i], base64url_decode($attachsRaw[$i]) );
    }

    return $contents;
});

Route::get('newest', function() {
    $filename = 'test.txt';

    Storage::cloud()->put($filename, \Carbon\Carbon::now()->toDateTimeString());

    $dir = '/';
    $recursive = false; // Get subdirectories also?

    $file = collect(Storage::cloud()->listContents($dir, $recursive))
        ->where('type', '=', 'file')
        ->where('filename', '=', pathinfo($filename, PATHINFO_FILENAME))
        ->where('extension', '=', pathinfo($filename, PATHINFO_EXTENSION))
        ->sortBy('timestamp')
        ->last();

    return Storage::cloud()->get($file['path']);
});

Route::get('delete-dir', function() {
    $directoryName = 'test';

    // First we need to create a directory to delete
    Storage::cloud()->makeDirectory($directoryName);

    // Now find that directory and use its ID (path) to delete it
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    $directory = $contents
        ->where('type', '=', 'dir')
        ->where('filename', '=', $directoryName)
        ->first(); // there can be duplicate file names!

    Storage::cloud()->deleteDirectory($directory['path']);

    return 'Directory was deleted from Google Drive';
});

Route::get('rename-dir', function() {
    $directoryName = 'test';

    // First we need to create a directory to rename
    Storage::cloud()->makeDirectory($directoryName);

    // Now find that directory and use its ID (path) to rename it
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));

    $directory = $contents
        ->where('type', '=', 'dir')
        ->where('filename', '=', $directoryName)
        ->first(); // there can be duplicate file names!

    Storage::cloud()->move($directory['path'], 'new-test');

    return 'Directory was renamed in Google Drive';
});

Route::get('share', function() {
    $filename = 'test.txt';

    // Store a demo file
    Storage::cloud()->put($filename, 'Hello World');

    // Get the file to find the ID
    $dir = '/';
    $recursive = false; // Get subdirectories also?
    $contents = collect(Storage::cloud()->listContents($dir, $recursive));
    $file = $contents
        ->where('type', '=', 'file')
        ->where('filename', '=', pathinfo($filename, PATHINFO_FILENAME))
        ->where('extension', '=', pathinfo($filename, PATHINFO_EXTENSION))
        ->first(); // there can be duplicate file names!

    // Change permissions
    $service = Storage::cloud()->getAdapter()->getService();
    $permission = new \Google_Service_Drive_Permission();
    $permission->setRole('reader');
    $permission->setType('anyone');
    $permission->setAllowFileDiscovery(false);
    $permissions = $service->permissions->create($file['basename'], $permission);
});
----------------------------------
listreceived
<template>
<div class="container">
  <div id="Galería">
    <div class="col-xs-12">
      <md-table class="col-xs-12">
            <md-table-row>
                <md-table-head class="text-align-c">Asunto</md-table-head>
                <md-table-head class="text-align-c">De</md-table-head>
                <md-table-head class="text-align-c">Para</md-table-head>
                <md-table-head class="text-align-c">Fecha</md-table-head>
                <md-table-head class="text-align-c">Guardar</md-table-head>
            </md-table-row>
            <md-table-row  :key="file.id" v-for="file of listPayload">
              <md-table-cell>
              <a  v-on:click="show(file.id)">
                {{checkSubject(file)}}
              <!--{{checkAttachs(file)}}-->
              </a>
              </md-table-cell>
              <md-table-cell>
              <a  v-on:click="show(file.id)">
                {{checkFrom(file)}}
              </a>
              </md-table-cell>
              <md-table-cell>
              <a  v-on:click="show(file.id)">
                {{checkTo(file)}}
              </a>
              </md-table-cell>
              <md-table-cell>
              <a  v-on:click="show(file.id)">
                {{checkDate(file) | moment('LLLL')}}
              </a>
              </md-table-cell>
              <md-table-cell>
                <button v-on:click='saveMail(file)'>Guardar</button>
              </md-table-cell>

              <modal :name="'hello-world' + file.id" height="auto" :scrollable="true">
                <p class="padding-modal-p format-text"> Asunto: {{checkSubject(file)}} </p>
                <p class="padding-modal-p format-text"> De: {{checkFrom(file)}} </p>
                <p class="padding-modal-p format-text"> Para: {{checkTo(file)}} </p>
                <p class="padding-modal-p format-text"> Fecha:{{ checkDate(file) | moment('LLLL') }}  </p>
                <p class="padding-modal-p format-text"> ---------------------- Correo ------------------------ </p>
                <p class="padding-modal-p format-text" v-html="checkData(file)"> </p>
                <span v-if="file.payload.parts">
                 <span :key="attach" v-for="attach in checkAttachmentName(file)">
                    <p class="padding-modal-p format-text"> {{attach}} </p>
                  </span>
                </span>
                <p class="padding-modal-p format-text"> {{file.id}}</p>
              </modal>
            </md-table-row>
            </md-table>
    </div>
  </div>

</div>
</template>

<script>
import axios from 'axios'
import {Base64 as decoder} from 'js-base64'

export default {
  data () {
    return {
      files: [],
      listPayload: [],
      listMessages: [],
      listRaw: []
    }
  },
  created () {
    axios.get('https://www.googleapis.com/gmail/v1/users/me/messages?q="in:inbox"',
      { headers: {'Authorization': 'Bearer ya29.GlujBd3WfAEAQp9S5kGb6pocXDrsTrmoSedoDfowO3vQdlvNkjG3PuBenauw1Ou21ner41envxdz1hlwXBhEmVf9gbBgX6uk41KgOgaQeOcy9Okazpz-azGKkab1'} })
      .then(response => {
        this.files = response.data
        this.listMessages = this.files.messages

        for (var i = 0; i < this.listMessages.length; i++) {
          axios.get('https://www.googleapis.com/gmail/v1/users/me/messages/' + this.listMessages[i].id,
          // + '?format=raw',
            { headers: {'Authorization': 'Bearer ya29.GlujBd3WfAEAQp9S5kGb6pocXDrsTrmoSedoDfowO3vQdlvNkjG3PuBenauw1Ou21ner41envxdz1hlwXBhEmVf9gbBgX6uk41KgOgaQeOcy9Okazpz-azGKkab1'} })
            .then(response => {
              this.filePayload = response.data
              this.listPayload.push(this.filePayload)
            })
        }
      })
  },
  methods: {
    decodeRaw (text) {
      return (decoder.decode(text.replace(/-/g, '+').replace(/_/g, '/')))
    },
    show (id) {
      this.$modal.show('hello-world' + id)
    },
    checkReturn (file) {
      if (file.payload.headers[7].name === 'Return-Path') {
        return file.payload.headers[7].value
      } else if (file.payload.headers[7].name === 'From') {
        return file.payload.headers[7].value
      } else {
        return file.payload.headers[6].value
      }
    },
    checkSubject (file) {
      return ((file.payload.headers).find(x => x.name === 'Subject')).value
    },
    getRef (file) {
      var subj = ((file.payload.headers).find(x => x.name === 'Subject')).value
      return subj.substr(0, 6)
    },
    /*
    checkAttachs (file) {
      if (file.payload.parts) {
        if (file.payload.parts[2]) {
          return 'pruebi2' + file.payload.parts[2].filename
        } else if (file.payload.parts[1] && file.payload.parts[1].filename) {
          return 'pruebi1' + file.payload.parts[1].filename
        } else if (file.payload.parts[0]) {
          return 'pruebi0' + file.payload.parts[0].filename
        } else {
          return 'nose'
        }
      } else {
        return 'no tiene parts'
      }
    }, */
    checkAttachmentName (file) {
      var attachmentList = []
      if (file.payload.parts) {
        for (var i = 0; i <= (file.payload.parts.length) - 1; i++) {
          if (file.payload.parts[i].filename) {
            attachmentList.push(file.payload.parts[i].filename)
          }
        }
      }
      return attachmentList
    },
    checkAttachmentId (file) {
      var attachmentsIds = []
      if (file.payload.parts) {
        for (var i = 0; i <= (file.payload.parts.length) - 1; i++) {
          if (file.payload.parts[i].body.attachmentId) {
            attachmentsIds.push(file.payload.parts[i].body.attachmentId)
          }
        }
      }
      return attachmentsIds
    },
    saveMail (file) {
      var attachIds = this.checkAttachmentId(file)
      let AttachRaw = attachIds.map(attId => {
        return axios.get('https://www.googleapis.com/gmail/v1/users/me/messages/' + file.id + '/attachments/' + attId,
          { headers: {'Authorization': 'Bearer ya29.GlujBd3WfAEAQp9S5kGb6pocXDrsTrmoSedoDfowO3vQdlvNkjG3PuBenauw1Ou21ner41envxdz1hlwXBhEmVf9gbBgX6uk41KgOgaQeOcy9Okazpz-azGKkab1'}
          }
        )
      })
      var url = window.location.href
      var arr = url.split('/')
      var FolderId = arr[4]
      var AttachNames = this.checkAttachmentName(file)
      var FileRaw = ''
      var From = this.checkFrom(file).replace('"', '').replace('"', '_').replace(' <', '<')
      var To = this.checkTo(file)
      var Reference = this.getRef(file)
      var DateMail = this.checkDate(file)
      var Subject = this.checkSubject(file)
      // var DataMail = this.checkData(file)

      axios.all(AttachRaw).then(
        AttachRaw => {
          AttachRaw = AttachRaw.map(attData => attData.data.data)
          this.checkRaw(file).then(response => {
            FileRaw = this.decodeRaw(response.data.raw)
            console.log(AttachRaw)
            axios.post('http://localhost:9005/put-in-dir/', { From, To, FolderId, Reference, AttachNames, DateMail, Subject, FileRaw, AttachRaw })
              .then(response => {
                console.log(response)
              })
              .catch(error => {
                console.log(error.response)
              })
          })
        })
    },
    checkRaw (file) {
      return axios.get('https://www.googleapis.com/gmail/v1/users/me/messages/' + file.id + '?format=raw',
        { headers: {'Authorization': 'Bearer ya29.GlujBd3WfAEAQp9S5kGb6pocXDrsTrmoSedoDfowO3vQdlvNkjG3PuBenauw1Ou21ner41envxdz1hlwXBhEmVf9gbBgX6uk41KgOgaQeOcy9Okazpz-azGKkab1'} })
    },
    checkFrom (file) {
      return ((file.payload.headers).find(x => x.name === 'From')).value
    },
    checkTo (file) {
      return ((file.payload.headers).find(x => x.name === 'To')).value
    },
    checkDate (file) {
      return ((file.payload.headers).find(x => x.name === 'Date')).value
    },
    checkData (file) {
      if (file.payload.body.data) {
        return this.decodeRaw(file.payload.body.data)
      } else if (file.payload.parts[0]['body'].data) {
        return (this.decodeRaw(file.payload.parts[0]['body'].data))
      } else if (!file.payload.parts[0].parts) {
        return 'este correo solo tiene attachments' + file.id
      } else if (file.payload.parts[0].parts[0]['body'].data) {
        return this.decodeRaw(file.payload.parts[0].parts[0]['body'].data)
      } else {
        return 'este correo no se puede mostrar' + file.id
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
}

a {
  color: #35495E;
}

.width-020{
  width: 20%;
}

.text-align-c{
  text-align: center;
}

.text-align-l{
  text-align: left;
}

.icon {
  height: 30px;
  width: 30px;
}

.display-ib{
  display: inline-block;
}

.padding-r-5{
  padding-right: 5px;
}

.padding-modal-p{
  padding-left: 50px;
  padding-right: 50px;
}

.format-text{
  overflow-wrap: break-word;
  white-space: pre-wrap;
}


</style>