body {

  font-family: 'Sarabun', sans-serif;

}

#map_canvas {

  width: 100%;

  height: 400px;

  margin: auto;

  display: none;

  /*  margin-top:100px;*/

}



/*Styles for counter start*/



.days7 {

  /*border-top: 10px solid rgba(173, 40, 40, 1);

    border-bottom: 10px solid rgba(173, 40, 40, 1);

    box-shadow: 0 0 30px 5px black;*/

  font-size: 10px;

  width: 90%;

  margin-left: auto;

  margin-right: auto;

  color: rgb(72, 255, 0);

  position: relative;

  top: 20%;

}

.digit {

  height: 5em;

  width: 7%;

  color: transparent;

  border: 1% solid transparent;

  /*border-right: 10px solid purple;

    border-bottom: 10px solid purple;*/

}

.digit-inner,

.digit-inner-lower {

  height: 50%;

  border: 1% solid transparent;

  /*border-left: 9px solid purple;

    border-bottom: 9px solid purple;

    border-top: 9px solid purple;*/

}

.flex-container {

  display: flex;

  justify-content: center;

}

.center {

  justify-content: center;

}

.flex-item {

  margin: 0.5em;

}

.separator {

  /*color: rgba(173, 40, 40, 1); */

  font-size: 4em;

  /*background-color: rgba(173, 40, 40, 1); */

  /*box-shadow: 0 0 30px 5px white;

    height: 130%;

    position: relative;

    bottom: 0.25em;*/

}

@media screen and (min-width:600px) {

  .days7 {

    font-size: 20px;

  }

  .digit {

    height: 7em;

    width: 5%;

  }

  .separator {

    font-size: 5em;

  }

}