Cannot close a pool while it is connecting?

I am trying to implement some queries in my server code, but am facing this error:

setImmediate(callback, new ConnectionError('Cannot close a pool while it is connecting'))

ConnectionError: Cannot close a pool while it is connecting

I checked online and it said to use mssql.query instead of a mssql.timeout but my code has both so it got me quite confused. I tried to increase the set timeout from 500 to 1500 thinking the error was because of that, but it still had crashes.

An odd thing is that the server doesn’t always crash. It just happens randomly at times when a query is being executed.

The server essentially sends data for beacons and the floor they are located on.

I’ve been trying to figure this out for quite sometime now. I would appreciate any help.

Here is the parts where the error is happening:

// Handle POST requests for downloading files for beacons
app.post('/beacon', function (req, res) {

    // POST variables
    var auth = req.body.auth;
    var gid = req.body.gid;
    var fno = req.body.fno;

    // Database Information 
    const config = {
        user: 'RANDOM',
        password: auth,
        server: 'localhost',
        database: 'beacons',
        "options": {
        "encrypt": true,
        "enableArithAbort": true
        },
        port: 1499
    };

    try{
        // Connect to database
        mssql.connect(config, function (err) {

            // Create request handler and query for files
            var request = new mssql.Request();
            var query = `SELECT beacon_file FROM dbo.beacons WHERE group_id = ${gid} AND floor_num = ${fno}`;

            // Query for file to download
            request.query(query,
            function (err, records) {
                try{
                    if (err){
                        console.log(err);
                        throw err;
                    }

                    try {

                        // If there are files associated with the given group ID
                        if (records.rowsAffected != '0'){
                            // Get filename & send for download
                            // NOTE: We can either send a download or send text, not both using the current setup
                            var fileName = 'beaconfiles/' + records.recordset[0].beacon_file;
                            res.download(fileName, function (derr) {
                                if (derr) {
                                    throw(derr);
                                }

                                else {
                                console.log(`Successfully sent ${fileName} for download.`)
                                }
                            });
                        }
                        else{
                            res.send(`<p>There are no files with that group ID.</p>
                                <a href="javascript:history.back()">Go Back</a>`);  
                        }
                    }
                    catch (err) {
                        console.log(`There was an error:  ${err} `);
                        res.send(`<p>There was an error. Make sure the group ID is correct: ${err}</p>
                            <a href="javascript:history.back()">Go Back</a>` );
                    }
                }
                catch(err){
                    res.send(`<p>There was an error getting the file: ${err}</p>
                        <a href="javascript:history.back()">Go Back</a>`);
                }
            });
            setTimeout(function(){
            mssql.close();
            }, 1500);

        });
    }
    catch(err){
        console.log(`There was an issue connecting to the database, check the authorization: ${err} `);
        res.send(`<p>There was an issue connecting to the database, check the authorization: ${err}</p>
            <a href="javascript:history.back()">Go Back</a>`);
    }
});

// Handle POST requests for downloading files for beacons
app.post('/floor', function (req, res) {

    // POST variables
    var auth = req.body.auth;
    var gid = req.body.gid;
    var fno = req.body.fno;

    // Database Information 
    const config = {
        user: 'RANDOM',
        password: auth,
        server: 'localhost',
        database: 'beacons',
        "options": {
        "encrypt": true,
        "enableArithAbort": true
        },
        port: 1499
    };

    try{
        // Connect to database
        mssql.connect(config, function (err) {

            // Create request handler and query for files
            var request = new mssql.Request();
            var query = `SELECT floor_file FROM dbo.beacons WHERE group_id = ${gid} AND floor_num = ${fno}`;

            // Query for file to download
            request.query(query,
            function (err, records) {
                try{
                    if (err){
                        console.log(err);
                        throw err;
                    }

                    try {

                        // If there are files associated with the given group ID
                        if (records.rowsAffected != '0'){
                            // Get filename & send for download
                            // NOTE: We can either send a download or send text, not both using the current setup
                            var fileName = 'beaconfiles/' + records.recordset[0].floor_file;
                            res.download(fileName, function (derr) {
                                if (derr) {
                                    throw(derr);
                                }

                                else {
                                console.log(`Successfully sent ${fileName} for download.`)
                                }
                            });
                        }
                        else{
                            res.send(`<p>There are no files with that group ID.</p>
                                <a href="javascript:history.back()">Go Back</a>`);  
                        }
                    }
                    catch (err) {
                        console.log(`There was an error:  ${err} `);
                        res.send(`<p>There was an error. Make sure the group ID is correct: ${err}</p>
                            <a href="javascript:history.back()">Go Back</a>` );
                    }
                }
                catch(err){
                    res.send(`<p>There was an error getting the file: ${err}</p>
                        <a href="javascript:history.back()">Go Back</a>`);
                }
            });
            setTimeout(function(){
            mssql.close();
            }, 1000);

        });
    }
    catch(err){
        console.log(`There was an issue connecting to the database, check the authorization: ${err} `);
        res.send(`<p>There was an issue connecting to the database, check the authorization: ${err}</p>
            <a href="javascript:history.back()">Go Back</a>`);
    }
});

Updating react component state after API call. 2022

I am trying to create a react component that receives one object initially. this object has all the necessary data for me to make an API call and query a DB collection. I have semi acheived what I am needing but it is messy includes some code from outdated tutorials. This should be easy I would think with react.

QuestionComponent.js

class QuestionComponent extends React.Component{

    constructState(props){
        var ret = []
        return new Promise(resolve => {
            console.log(props.question.public_token)
            window.API.user_profile(props.question.public_token).then(user => {
                ret['question'] = props.question
                ret['public_token'] = props.question.public_token
                ret['title'] = props.question.title
                ret['author'] = user.username
                console.log(props.question)
                var z = 0
                props.question.tags.forEach(tag => {
                    z++
                    ret['tags'] = [ret['tags'], <TagComponent key={tag+z} text={tag}></TagComponent>] 
                });
                resolve(ret)                 
            })
            
            
        })
    }

    constructor(props){
        super(props);
        console.log(props)
        this.state = {question:props.question}

        this.constructState(props).then(res => {
            console.log(res)
            this.state = res
        })
        //var isQuestion

        //if(props.isQuestion|| props.isQuestion != undefined){
        //    this.state = {id: props.question.id, title: props.question.title, tags:props.question.tags, author:props.question.author}
        //}else{
        //    console.log('else')
        //    this.state = {id: props.question.id, title: 'test', tags:['test','test'], author:'test author'}
        //}
        

    }
    
    componentDidMount(){
        console.log('mount')
        this.constructState(this.state.question).then(res => {
            console.log(res)
            this.state = res
        })
    }



    render(){
        return (...)
    }

};

export default QuestionComponent;

this is where I am at right now. you can see the console.log(res) in the constructor.construcState() when i run the code it seems to return Exactly what i want but I think its being evaluated afterwards in the console or I cant set the state properly. I’m still somewhat new to React. could someone show me what i’m doing wrong?

Using regex to match string that changes only number part [duplicate]

I’m trying to create a regex so I can separate some data on my code. What I’m attempting to perform is. There is a string in which looks like this:

data.0.id

This strings will come inside many arrays, and the number part will vary between numbers
I need to perform an if operation, that whenever the string constains that number I will return it

Basically what I attempted:

const k = "data.0.id" // this will vary into data.1.id, data.2.id. etc

if (k === `organisations./d+/g.id`) console.log("worked");

i attempted to use include, but include will add othe datas which have similar formats, in which I don’t want to. For example (don’t want, but came with include):

data.0.low_id
data.1.high_id
...
```

Discord.js: Advantages and point of moving from JavaScript to TypeScript

TypeScript is believed to be faster and more effective than JavaScript. It is more attractive to me than JS, but should I move? Does it really make sense to convert a lot of Discord.js code to it? Will it significantly affect the speed of a bot?

I want to hear answers from those who have experienced converting their Discord.js JS code to TS and their results. I will also appreciate it if you send some guides about Discord.js TS.

Thanks in advance. <3

How to make calculator input display properly

I am new to javascript and still learning, I am working on a calculator project and trying this without looking up code, but I am stuck at the moment.

I have the inputs appear on the screen, however, it does not function the same way as a normal calculator function.

what it’s currently doing is, that the user input goes out of bounds of the screen when the digits become too much.

In short the entire input should be contained within the screen, I have the <div class="calc"></div> && <div class="answer"></div> in the screen because, what the next step for me to do is to let user input display on <div class="answer"> and when calculation happens the answer replaces the <div class="answer"> and the calculation is shifted to <div class="calc"></div>

/*********************
Setting up varlaibles*
**********************/

let result;
let calculation;
let num1;
let num2;

/*****************************************
Function for numbers to display on screen*
******************************************/

function buttonPress(numbers) {

  result = document.querySelector('.answer');
  result.innerHTML += numbers


}
body {
  margin: auto 15rem;
  box-sizing: border-box;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.base {
  margin-top: 2rem;
  background-color: #0C1021;
  width: 19.8rem;
  height: 40rem;
  border-radius: 1.5rem;
}

.header {
  display: flex;
  flex-direction: row;
}

.time {
  font-size: 10px;
  color: white;
  margin-top: 1rem;
  margin-left: 2rem;
}

.icons {
  margin-left: 11.3rem;
  margin-top: 0.2rem;
}

.icons img {
  width: 13px;
  margin-top: 10px;
  padding-left: 5px;
}

.battery {
  filter: brightness(0) invert(1);
}

span {
  display: block;
  width: 6%;
  border-top: 3px solid white;
  margin-left: 1rem;
  margin-top: 2rem;
}

.hl {
  margin-top: 3px;
}

.hl2 {
  cursor: pointer;
  margin-top: 2px;
}

.calc-header {
  display: flex;
  flex-direction: row;
}

.calc-header h2 {
  position: absolute;
  margin-left: 6rem;
  color: white;
  margin-top: -23px;
}

.screen {
  margin-left: 16rem;
  margin-top: 149px;
}

.calc {
  width: 5px;
  color: white;
}

.answer {
  color: red;
  font-size: 32px;
}

button {
  border: none;
  cursor: pointer;
}

.row {
  margin-top: -359px;
  position: absolute;
}

.col {
  padding: 1px;
}

.col-op,
.col-op-end,
.col-num {
  width: 75.3px;
  height: 70px;
}

.col-eq-end {
  width: 155px;
  height: 68px;
}

.col-op,
.col-op-end {
  background-color: #093A52;
  color: #01A6CB;
}

.col-num {
  background-color: #0B1A2C;
  color: white;
}

#border-left {
  border-radius: 0px 0px 0px 23px;
}

.col-eq-end {
  background-color: #01A6CB;
  color: white;
}

#border-right {
  border-radius: 0px 0px 23px 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/main.css" />
  <script src="js/main.js" defer></script>
  <script src="js/time.js" defer></script>
  <title>Calculator</title>
</head>

<body>

  <header>
    <div class="base">
      <div class="header">
        <div class="time"></div>
      </div>
      <div class="dummy-nav">
        <span></span>
        <span class="hl"></span>
        <span class="hl2"></span>
      </div>
      <div class="calc-header">
        <h2>Calculator</h2>
      </div>

      <div class="screen">
        <div class="calc"></div>
        <div class="answer"></div>
      </div>
  </header>

  <main>
    <div class="row">

      <div class="col">
        <button class="col-op clear" onclick="buttonPress('c')">C</button>
        <button class="col-op" onclick="buttonPress('()')">()</button>
        <button class="col-op" onclick="buttonPress('%')">%</button>
        <button class="col-op" onclick="buttonPress('/')">/</button>
      </div>

      <div class="col">
        <button class="col-num" onclick="buttonPress(1)">1</button>
        <button class="col-num" onclick="buttonPress(2)">2</button>
        <button class="col-num" onclick="buttonPress(3)">3</button>
        <button class="col-op-end" onclick="buttonPress('x')">x</button>
      </div>

      <div class="col">
        <button class="col-num" onclick="buttonPress(4)">4</button>
        <button class="col-num" onclick="buttonPress(5)">5</button>
        <button class="col-num" onclick="buttonPress(6)">6</button>
        <button class="col-op-end" onclick="buttonPress('+')">+</button>
      </div>

      <div class="col">
        <button class="col-num" onclick="buttonPress(7)">7</button>
        <button class="col-num" onclick="buttonPress(8)">8</button>
        <button class="col-num" onclick="buttonPress(9)">9</button>
        <button class="col-op-end" onclick="buttonPress('-')">-</button>
      </div>

      <div class="col">
        <button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
        <button class="col-num" onclick="buttonPress('.')">.</button>
        <button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
      </div>

    </div>

  </main>
</body>

</html>

Can i achieve dynamic routing in nextJS for nested routes with unknown number of slugs?

In nextJS routing is path based for pages but is there anyway to achieve a common route for following:

http://localhost/abc/element/id
http://localhost/abc/def/element/id
http://localhost/abc/def/ghi/element/id

Note how /element/id is common in all

I understand i can make nested folder structure and redirect them to same component but i want to avoid the same as we can further more nesting.

Do take care that you can not use catch all as it should be at the end just before file extension.
Also, i don’t want to add an extra prefix to the URL as that makes the older url’s invalid.

Show and hide with CSS animation

My goal is to create an animation when showing and hiding an HTML element. The show and hide is triggered by a button that toggles a class hide.

Here is my code:

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})
.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  display: block;  
}

.hide {
  display: none;
  transition: all 1s ease-out;
  opacity: 0;  
}
<button>Show / Hide</button>
<div class="box hide"></div>

How to Host an Image in Mongo DB Database from Input Field So That It Can Be Fetched as Image URL?

I want a way so that when people upload an Image in the input field along with other informations , the image will be stored to mongoDB database as an image url. So that when I will fetch the data through GET API it will also come along other data as an actual Image URL.

Till now I have done this by pasting image URL to the input field of the form. But this is ofcourse not an efficient process. People will not paste image URL . Rather they will upload the image from their local computer to the form. But I just want to host that image somewhere automatically so that it can be kept as Image URL to the Mongo DB database. How can I do that?

<Form onSubmit={handleSubmit}>
      <h1 className="mb-lg-0 mb-5 text-center">
        Please Add New Book To Your Store
      </h1>
      <Form.Group
        className="mb-3 mt-5"
        controlId="exampleForm.ControlInput1"
      >
        <Form.Label className="checkout-labels">Your Name</Form.Label>
        <Form.Control
          disabled={authUser?.displayName ? true : false}
          value={authUser?.displayName}
          type="text"
          placeholder="First Name"
          required
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="[email protected]"
          value={authUser?.email}
          required
          disabled={authUser?.email ? true : false}
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Book Cover Image</Form.Label>
        <Form.Control
          type="text"
          placeholder="Image URL of the Book"
          required
          name="image"
        />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Book Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Name Of Your Book"
          required
          name="bookName"
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Name of Author</Form.Label>
        <Form.Control
          type="text"
          name="author"
          placeholder="Book Author Name"
          required
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Description</Form.Label>

        <Form.Control
          as="textarea"
          rows="3"
          placeholder="Description Of Your Book"
          required
          name="description"
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Price</Form.Label>
        <Form.Control
          type="number"
          name="price"
          placeholder="Number of Stock"
          required
        />
      </Form.Group>

      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label className="checkout-labels">Number Of Stock</Form.Label>
        <Form.Control
          type="number"
          name="quantity"
          placeholder="Number of Stock"
          required
        />
      </Form.Group>

      <Button
        className="px-5 d-block mx-auto checkout-labels"
        variant="primary"
        type="submit"
      >
        Add This Item To The Store
      </Button>
    </Form>

How to upload Multiple Images using Next.js to Firebase

I am trying to allow the user to upload multiple images (no more than 3) to the Firebase Database. Currently, the user can only select one image and upload it. This code is also displaying the selected image, how would I be able to modify it so that the multiple selected images will be shown just like Twitter

Post.js

function Post() {
  const { data: session } = useSession();
  const [selectedFile, setSelectedFile] = useState(null);
  const filePickerRef = useRef(null);

  const sendPost = async () => {
    const docRef = await addDoc(collection(db, "posts"), {
      postid: postId,
      id: session.user.uid,
      name: session.user.realname,
      username: session.user.username,
      email: session.user.email,
      userImg: session.user.image,
      title: title,
      text: input,
      timestamp: serverTimestamp(),
    });

    const imageRef = ref(storage, `posts/${docRef.id}/image`);

    if (selectedFile) {
      await uploadString(imageRef, selectedFile, "data_url").then(async () => {
        const downloadURL = await getDownloadURL(imageRef);
        await updateDoc(doc(db, "posts", docRef.id), {
          image: downloadURL,
        });
      });
    }

    setSelectedFile(null);
  };

  const addImageToPost = (e) => {
    const reader = new FileReader();
    if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
    }

    reader.onload = (readerEvent) => {
      setSelectedFile(readerEvent.target.result);
    };
  };

  return (
    <div>
      <img
         src={selectedFile}
         alt=""
         className="rounded-2xl max-h-80 object-contain"
      />

      <div className="flex items-center justify-center pt-2.5 px-3 py-2 ">
        <div className="flex space-x-3">
          <div
            className="text-white grayBoxHover"
            onClick={() => filePickerRef.current.click()}
          >
            <PhotographIcon className="text-[#FEFEFE] h-[25px]" />
            <input
              type="file"
              ref={filePickerRef}
              hidden
              onChange={addImageToPost}
            />
          </div>

          <div className="ml-auto">
            <button
              className="px-5 py-2.5 text-lg font-bold bg-[#A3A3A5] hover:bg-[#d9d9d9] text-[#FEFEFE] disabled:hover:bg-[#A3A3A5] disabled:cursor-default rounded-lg"
              onClick={sendPost}
            >
              Post
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Post;

appending pasted image file into formdata is always empty

I’m pasting an image and then creating it as a File object, afterwards I append it into formData and it shows as empty, no file is appended.

pasting event:

const handlePaste = async function (e) {
        if (!e.clipboardData.files.length) {
            return console.log('no images sent');
        }

        const clipboardItems = e.clipboardData.items;
        const items = [].slice.call(clipboardItems).filter(function (item) {
            // Filter the image items only
            return item.type.indexOf('image') !== -1;
        });

        if (items.length === 0) {
            return;
        }

        const pastedImageFile = items[0].getAsFile();

        const image = {
            preview: URL.createObjectURL(pastedImageFile),
            data: pastedImageFile,
        }

        setPastedImage(image);
        setSendingPasted(true);
    }

I check image.data and it shows that the File object is there, Now that I have image.data as a file, I load it into formData:

const imageFile = new FormData();
imageFile.append('image', pastedImage.data, pastedImage.data.name);
imageFile.append('username', 'Chris');

printing out imageFile:

for (var pair of imageFile.entries()) {
    console.log(pair[0]+ ', ' + JSON.stringify(pair[1]));
}

returns:

image.png, {}
username, "Chris"

What am I doing wrong?

How do I have a number update and display live in HTML consecutively?

So far I’m stuck here. I continue to get NAN as a result. I tried by starting off with a paragraph and fetching number 0 but returns “cannot read properties of null (reading ‘addEventListener’)”

<html>
<style>
</style>
<body>
 <p id="result" value=0>
      0
 </p>
 <button id="func">RUN IT</button>
 <script> 
document.getElementById("func").addEventListener("click", () => {
 var n = document.getElementById("result");
 console.log(result);
 if (n != 10) {
      n++;
      
document.getElementById("result").innerHtml = n;
 }});
</script>
</body>
</html>

How to get selected value from slick slider for multiple radio button checked using javascript

$(‘.product-tile’).each(function() {
var initialslideId = $(‘.product-tile.shi-product-tile–plp’).attr(“id”);
var initialslidee = initialslideId.$(‘.swatches-option.selectable.selected.slick-slide.slick-active’).data(“slick-index”);
if($(this).find(‘.swatches.multiple.size .swatches-option’).length > 3) {
$(this).find(‘.swatches.multiple.size’)
.not(‘.slick-slider’)
.slick({
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
speed: 300,
swipeToSlide: true,
initialSlide : parseInt(initialslidee),
});
}
});

jqueryvalidation + sweetalert2 + wpcf7 (WordPress)

MODAL: Wait for processing

modal example

Hi guys, I have an email form on a WordPress site that works normally by validating the fields and showing an error or success message (sweetalert2).
What I would like is to add a new message (sweetalert2) showing the processing before the error is displayed or the form is correctly submitted.
Could anyone help me with this?

// VALIDAÇÃO
$(function() {
    $("#contactForm").validate({
        rules: {
            seunome: {
                required: true,
                minlength: 3
            },
            seuemail: {
                required: true,
                email: true
            },
            seuwhatsapp: {
                required: true,
                minlength: 16
            },
            seuassunto: {
                required: true,
                minlength: 3
            },
            suamensagem: {
                required: true,
                minlength: 7
            }
        },
        errorElement: "span",
        errorClass: "help-inline-error",

    });

});

// MENSAGEM DE ERRO - SWEETALERT

document.addEventListener( 'wpcf7mailfailed', function( event ) {
Swal.fire({
  icon: 'error',
  title: 'Ops...',
  text: 'Algo deu errado!',
  footer: '<a href="javascript:;">Por favor, tente novamente mais tarde!</a>',
  timer: 3000,
  timerProgressBar: true
})
}, false );


// MENSAGEM DE SUCESSO - SWEETALERT
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '13' == event.detail.contactFormId ) {
      $("#contactForm").trigger('reset');
      $("#contactForm")[0].reset();
      Swal.fire({
        icon: 'success',
        title: 'Sucesso',
        text: 'Sua mensagem foi enviada!',
        footer: '<a href="javascript:;">Responderemos assim que possível.</a>',
        timer: 3000,
        timerProgressBar: true
      })
    }
}, false );
.screen-reader-response { display: none; }
.wpcf7-response-output { display: none; }
.wpcf7-not-valid-tip { display: none; }

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control.help-inline-error {
    border-color: #dc3545!important;
    background-color: #f8d7da;
    color: #dc3545!important;
}
span.help-inline-error {
  display: none!important;
}
.text-red, .text-danger {
    color: #dc3545;
}
.has-error .form-control {
    border-color: #dc3545!important;
    background-color: #f8d7da;
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.form-control.help-inline-error {
    border-color: #dc3545!important;
    background-color: #f8d7da!important;
    color: #dc3545!important;
}
.wpcf7-select.wpcf7-validates-as-required.form-control.help-inline-error {
    border-color: #dc3545!important;
    background-color: #f8d7da!important;
    color: #dc3545!important;
}
.wpcf7-list-item-label {
  margin: 0 15px 0 5px;
}