Edit in JSFiddle

var projectKey = '12345678';
var googleClientId = 'gme-webgeoservicessa';
var markersStyle = {
    rules: [
        {
            type: 'drive',
            icon: {url: 'https://images.woosmap.com/marker_drive.svg', scaledSize: {width: 36, height: 48}},
            selectedIcon: {url: 'https://images.woosmap.com/marker_drive_selected.svg', scaledSize: {width: 46, height: 60}}
        }
    ],
    default: {
        icon: {url: 'https://images.woosmap.com/marker_default.svg', scaledSize: {width: 36, height: 48}},
        selectedIcon: {url: 'https://images.woosmap.com/marker_selected.svg', scaledSize: {width: 46, height: 60}}
    }
};
var tilesStyle = {
  color: '#0288D1',
  size: 11,
  minSize: 6,
  typeRules: [{
    type: 'drive',
    color: '#FF5722'
  }]
};

//this function is called when loader finished the API loading
function woosmap_main() {
  var loader = new woosmap.MapsLoader(googleClientId);
  var dataSource = new woosmap.DataSource();
  loader.load(function() {

    /******** usefull function ********/
    function closeRouteContainer() {
      woosmap.$('.route-summary-upper-panel').addClass('hide');
      woosmap.$('.route-summary-lower-panel').hide();
      woosmap.$('.woosmap-route-details').hide();
      woosmap.$('.woosmap-route-info-container').addClass('hide');
    }

    function displayRouteContainer(container) {
      var $container = woosmap.$(container);
      $container.find('.route-summary-lower-panel').show();
      $container.find('.woosmap-route-details').show();
      $container.find('.woosmap-route-info-container').removeClass('hide');
      $container.find('.route-summary-upper-panel').removeClass('hide');
    }

    function makeMarker(position, icon, title) {
      directionsMarkers.push(new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        title: title
      }));
    }

    function cleanMarker() {
      woosmap.$.each(directionsMarkers, function(index, marker) {
        marker.setMap(null);
      });
      directionsMarkers = [];
    }

    /*********************************/

    var map = new google.maps.Map(woosmap.$('#my-map')[0], {
      center: {
        lat: 45,
        lng: 2
      },
      zoom: 5,
      disableDefaultUI: true
    });

    var mapView = new woosmap.TiledView(map, {
      style: markersStyle,
      tileStyle: tilesStyle
    });


    /**** directions renderers options ****/
    var newPolylineOption = {
      strokeColor: '#1badee',
      strokeOpacity: 1.0,
      strokeWeight: 4,
      icons: ['https://images.woosmap.com/markers/marker.png']
    };

    // Start/Finish icons
    var icons = {
      start: 'https://images.woosmap.com/markers/start.png',
      end: 'https://images.woosmap.com/markers/end.png'
    };
    var directionRendererOptions = {
      suppressMarkers: true,
      suppressInfoWindows: true,
      polylineOptions: newPolylineOption
    };

    var googleDirectionsRequestOptions = {
      provideRouteAlternatives: true,
      durationInTraffic: true
    };
    /***************************************/

    var directionsMarkers = [];
    var navigatorGeolocation = new woosmap.location.LocationProvider();
    var travelModeSelector = new woosmap.ui.TravelModeSelector(woosmap.$('#travel-mode-selector-template').html());
    var originDestinationInput = new woosmap.ui.OriginDestinationInput(woosmap.$('#directions-origin-destination-template').html(), {
      'geolocText': 'Ma Position'
    });
    var directionsProvider = new woosmap.location.DirectionsProvider(directionRendererOptions, googleDirectionsRequestOptions);
    var mailView = new woosmap.ui.MailView(woosmap.$('#directions-mail-input-template').html());
    var locationProvider = new woosmap.location.LocationProvider();
    var store_id = '';
    var directionsRestorer = new woosmap.utils.MVCObject();
    directionsRestorer.location = null;
    directionsRestorer.location_changed = function() {
      var self = this;
      if (store_id) {
        dataSource.getStoreById(store_id, function(data) {
          originDestinationInput.set('selectedStore', data);
          originDestinationInput.set('location', self.get('location'));
        });
      }
    };

    var directionsResultsDisplayer = new woosmap.ui.DirectionsResultsDisplayer(map, woosmap.$('#directions-summary-template').html(),
      function() {
        //this function is called when directionResultsDisplayer finished to display renderers
        directionsResultsDisplayer.displayRouteOnMap(0);
        directionsResultsDisplayer.displayRouteSteps(0);
        woosmap.$("#directions").show();
        var computedDirections = directionsResultsDisplayer.get("directionsRenderers")[0].getDirections();
        var leg = computedDirections.routes[0].legs[0];
        cleanMarker();
        makeMarker(leg.start_location, icons.start, "Start");
        makeMarker(leg.end_location, icons.end, 'End');

        closeRouteContainer();
        displayRouteContainer(woosmap.$('.woosmap-route-container')[0]);

        woosmap.$('.woosmap-route-container').click(function() {
          closeRouteContainer();
          displayRouteContainer(this);
          directionsResultsDisplayer.cleanMapFromRoutes();
          directionsResultsDisplayer.cleanRouteSteps();
          directionsResultsDisplayer.displayRouteOnMap(woosmap.$(this).find('.woosmap-show-steps').data('renderer-index'));
          directionsResultsDisplayer.displayRouteSteps(woosmap.$(this).find('.woosmap-show-steps').data('renderer-index'));
        });

        woosmap.$('.woosmap-route-details').click(function() {
          woosmap.$('#instructions').show();
          woosmap.$('#routes').hide();
          woosmap.$('#inputs').hide();
          woosmap.$('#instructions-mail').hide();
          woosmap.$('#directions').css('top', '5px');
          woosmap.$('#directions').css('bottom', '5px');
        });

        woosmap.$('#close-instructions-button').click(function() {
          woosmap.$('#instructions').hide();
          woosmap.$('#routes').show();
          woosmap.$('#inputs').show();
          woosmap.$('#instructions-mail').show();
          woosmap.$('#directions').css('top', '135px');
          woosmap.$('#directions').css('bottom', '');
        });
      }
    );

    originDestinationInput.bindTo('selectedStore', mapView);
    directionsProvider.bindTo('selectedTravelMode', travelModeSelector);
    directionsProvider.bindTo('originDestination', originDestinationInput);
    directionsResultsDisplayer.bindTo('directionsSummaries', directionsProvider);
    directionsResultsDisplayer.bindTo('directionsRenderers', directionsProvider);
    directionsResultsDisplayer.bindTo('directionsLink', directionsProvider);
    originDestinationInput.bindTo('location', navigatorGeolocation);
    mailView.bindTo('selectedStore', mapView);
    directionsRestorer.bindTo('location', locationProvider);

    function _update_mail_status(text, color) {
      var $mailStatusDiv = woosmap.$('#mail-status');
      $mailStatusDiv.html(text).css('color', color);
      $mailStatusDiv.show();
      setTimeout(function() {
        $mailStatusDiv.hide(1000);
      }, 3000);
    }

    mailView.delegate = {
      mailSent: function() {
        _update_mail_status('Email envoyé', 'green');
        woosmap.$('.woosmap-mail-input').val("");
      },
      mailError: function() {
        _update_mail_status('Erreur', 'red');
      },
      mailSending: function() {
        _update_mail_status('Envoi en cours', '#1badee');
      }
    };

    woosmap.$('#map-container').append(originDestinationInput.getODContainer());
    woosmap.$('#routes').append(directionsResultsDisplayer.getRoutesContainer());
    woosmap.$('#instructions-steps').append(directionsResultsDisplayer.getStepsContainer());
    woosmap.$('#directions-travel-mode-selector').append(travelModeSelector.getSelectorContainer());

    woosmap.$('#instructions-mail').empty().append(mailView.getContainer());

    if (new woosmap.DeviceDetector().getDeviceType() == 'mobile') {
      woosmap.$('.woosmap-mail-container').hide();
    } else {
      woosmap.$('.woosmap-mobile-form-menu').click(function() {
        woosmap.$('.woosmap-mobile-form').toggle();
      });
    }

    woosmap.$(".woosmap-directions-origin .woosmap-close-icon").click(function() {
      woosmap.$("#woosmap-directions-origin-input").val('');
    });

    woosmap.$(".woosmap-directions-destination .woosmap-close-icon").click(function() {
      woosmap.$("#woosmap-directions-destination-input").val('');
    });

    woosmap.$('#directions-travel-mode-selector .woosmap-travel-mode-option').click(function() {
      woosmap.$('#directions-travel-mode-selector .woosmap-travel-mode-option').removeClass('selected');
      woosmap.$(this).addClass('selected');
    });

    woosmap.$('.geolocation-button').click(function() {
      navigatorGeolocation.askForLocation(navigator.geolocation);
    });

    google.maps.event.addListener(map, 'click', function(event) {
      originDestinationInput.set('location', {
        'lat': event.latLng.lat(),
        'lng': event.latLng.lng()
      });
    });
    window.setTimeout(function() {
      store_id = top.location.search.split('store_id=')[1] ? top.location.search.split('store_id=')[1].replace('&', '') : '';
      if (store_id) {
        dataSource.getStoreById(store_id, function(data) {
          originDestinationInput.set('selectedStore', data);
          originDestinationInput.set('location', self.get('location'));
        });
        locationProvider.askForLocation(navigator.geolocation);
      };
    }, 1000);
    woosmap.$("#inputs").show();
  });
}

document.addEventListener("DOMContentLoaded", function(event) {
  WoosmapLoader.load('1.3', projectKey, woosmap_main);
});
<script src="https://sdk.woosmap.com/locator/loader.js"></script>

<script id="travel-mode-selector-template" type="text/mustache">
  <label class="woosmap-form-label geolocation-button">
    <span class="woosmap-geolocation-icon"></span>
  </label>
  <div class="woosmap-travel-mode">
    <div class="pure-g">
      <label class="pure-u-1-3 woosmap-travel-mode-option driving selected" data-travel-mode="DRIVING">
        <span class="woosmap-travel-mode-icon woosmap-driving-icon"></span>
      </label>

      <label class="pure-u-1-3 woosmap-travel-mode-option walking" data-travel-mode="WALKING">
        <span class="woosmap-travel-mode-icon woosmap-walking-icon"></span>
      </label>

      <label class="pure-u-1-3 woosmap-travel-mode-option bicycling" data-travel-mode="BICYCLING">
        <span class="woosmap-travel-mode-icon woosmap-bicycling-icon"></span>
      </label>
    </div>
  </div>
</script>
<script id="directions-summary-template" type="text/mustache">
  <div>
    <div class="woosmap-route-container">
      <div class="woosmap-route-info-container">
        <div class="route-summary-upper-panel">
          <div style="float:left">{{ summary }}</div>
          <div class="woosmap-route-traffic-duration" style="float:right">
            {{#durationInTrafficShort }} {{ durationInTrafficShort }} {{/durationInTrafficShort }}
          </div>
          <div style="clear:both"></div>
        </div>
        <div class="route-summary-lower-panel">
          <div class="woosmap-route-duration" style="float:left">{{ durationShort }} sans circulation</div>
          <div style="float:right">{{ distance }}</div>
          <div style="clear:both"></div>
        </div>
      </div>
      <div class="woosmap-route-details woosmap-show-steps" data-renderer-index='{{ rendererIndex }}'>
        Details
        <div class="pure-form woosmap-mobile-link-container">
          <input type="button" class="pure-button woosmap-mobile-link-button" value="Start driving" />
        </div>
      </div>
    </div>
  </div>
</script>
<script id="directions-origin-destination-template" type="text/mustache">
  <div id="directions-box">
    <div id="inputs" class="woosmap-directions-inputs">
      <div id="directions-travel-mode-selector"></div>
      <form>
        <div class="woosmap-directions-origin">
          <label class="woosmap-form-label">
            <span class="woosmap-directions-icon woosmap-depart-icon"></span>
          </label>
          <input type="text" required="required" id="woosmap-directions-origin-input" class="woosmap-origin" placeholder="Start" autocomplete="off">

          <div class="woosmap-directions-icon woosmap-close-icon" title="Clear value"></div>
        </div>

        <div class="woosmap-directions-destination">
          <label class="woosmap-form-label">
            <span class="woosmap-directions-icon woosmap-arrive-icon"></span>
          </label>
          <input type="text" required="required" id="woosmap-directions-destination-input" class="woosmap-destination" placeholder="End" autocomplete="off">

          <div class="woosmap-directions-icon woosmap-close-icon" title="Clear value"></div>
        </div>
        <span class="woosmap-directions-icon woosmap-reverse-icon woosmap-directions-reverse-input woosmap-toggle-origin-destination" title="Reverse origin &amp; destination">
            </span>
      </form>
    </div>
    <div id="directions">
      <div id="routes" class="woosmap-directions-routes"></div>
      <div id="instructions" class="woosmap-directions-instructions" style="display:none">
        <div class="instructions-header">
          <span class="woosmap-instructions-title">Itinéraire</span>
          <span id="close-instructions-button" class="close-instructions-button"></span>
          <div style="clear:both"></div>
        </div>
        <div id="instructions-steps"></div>
      </div>
      <div id="instructions-mail"></div>
    </div>
  </div>
</script>
<script id="directions-mail-input-template" type="text/mustache">
  <div class="woosmap-mail-container">
    <div class="woosmap-mobile-form-menu">
      <label class="woosmap-mobile-label">

        <span class="woosmap-mobile-icon"></span> Send to mobile
      </label>
    </div>
    <div class="woosmap-mobile-form" style="display: none">
      <div class="pure-form">
        <input type="email" class="woosmap-mail-input" placeholder="your@email.com" width="">
        <button class="pure-button woosmap-send-button">Send</button>
      </div>
    </div>
  </div>
  <div id="mail-status"></div>
</script>

<div class="locator-container pure-g">
  <div id="map-container" class="map pure-u-1">
    <div id="my-map" class="map"></div>
  </div>
</div>
#my-map {
  height: 500px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input {
  font-size: inherit;
  line-height: normal;
}

#directions-box {
  position: absolute;
  max-height: 100%;
  top: 10px;
  left: 10px;
  max-width: 350px;
  min-width: 250px;
  width: 40%;
}

#inputs,
#errors,
#directions {
  width: 100%
}

#inputs {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: none;
  background-color: white;
}

#directions {
  display: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: white;
  margin-top: 4px;
  max-height: 470px;
}

#directions-travel-mode-selector {
  position: relative;
  height: 40px;
}

#directions-travel-mode-selector .woosmap-form-label {
  background-color: #F7F7F7;
}

#errors {
  z-index: 8;
  opacity: 0;
  padding: 10px;
  border-radius: 0 0 3px 3px;
  background: rgba(0, 0, 0, .25);
  top: 90px;
  left: 10px;
}


/* Basics */

.woosmap-directions-inputs,
.woosmap-directions-errors,
.woosmap-directions-routes,
.woosmap-directions-instructions {
  font: 300 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}


/* Inputs */

.woosmap-directions-origin,
.woosmap-directions-destination {
  /*background-color: white;*/
  position: relative;
}

.woosmap-form-label {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  background: #444;
  color: rgba(0, 0, 0, .75);
  font-weight: bold;
  text-align: center;
  padding: 10px;
  line-height: 20px;
}

.woosmap-directions-origin .woosmap-form-label {
  background-color: #03A9F4;
}

.woosmap-travel-mode-option {
  cursor: pointer;
  top: 0;
  color: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 10px;
  line-height: 20px;
}

.woosmap-directions-inputs input {
  width: 100%;
  border: 0;
  background-color: transparent;
  height: 40px;
  margin: 0;
  color: rgba(0, 0, 0, .5);
  padding: 10px 10px 10px 50px;
  font-weight: 300;
}

.woosmap-directions-inputs input:focus {
  color: rgba(0, 0, 0, .75);
  outline: 0;
  box-shadow: none;
  outline: thin dotted;
}

.woosmap-directions-origin input {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.woosmap-directions-destination input {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.woosmap-directions-reverse-input {
  position: absolute;
  background: white;
  left: 50px;
  top: 70px;
  cursor: pointer;
}

.woosmap-directions-inputs .woosmap-close-icon {
  opacity: .5;
  position: absolute;
  right: 5px;
  top: 10px;
  cursor: pointer;
}

input:not(:valid) + .woosmap-close-icon {
  display: none;
}

.woosmap-close-icon:hover {
  opacity: .75;
}


/* Errors */

.woosmap-directions-error {
  color: white;
  display: inline-block;
  padding: 0 5px;
}


/* Routes */

.woosmap-route-container {
  padding: 6px;
  box-shadow: -1px 5px 10px -4px #aaa6a0;
}

.woosmap-route-info-container {
  border-bottom: 1px solid rgb(230, 230, 230);
}

.woosmap-route-info-container.hide {
  border-bottom: none;
}

.woosmap-route-short-duration {
  color: rgb(152, 152, 152);
  font-size: small
}

.woosmap-route-traffic-duration {
  color: #1badee;
}

.woosmap-route-details {
  font-size: small;
  color: #3b8bba;
  margin-bottom: 10px;
}

.woosmap-route-details:hover {
  text-decoration: underline;
  cursor: pointer;
}

.route-summary-upper-panel.hide {
  cursor: pointer;
}


/* Mail View */

.woosmap-mail-container {
  padding: 6px;
  box-shadow: -1px 5px 10px -4px #aaa6a0;
}

.woosmap-mobile-form-menu {
  cursor: pointer;
  margin: 2px 0px 3px -3px;
}

.woosmap-mobile-icon {
  background-image: url('https://images.woosmap.com/mobile-icon.png');
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-top: 1px;
  background-color: white;
}

.woosmap-mobile-link-container {
  float: right;
  margin: 3px;
}


/* Instructions */

.instructions-header {
  background-color: #1badee;
}

#instructions-steps {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 445px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
}

.woosmap-instructions-title {
  vertical-align: middle;
  padding-left: 10px;
  color: white;
}

.close-instructions-button {
  background-image: url('https://images.woosmap.com/close-x.png');
  cursor: pointer;
  background-color: #1badee;
  width: 24px;
  height: 24px;
  float: right;
}

.woosmap-directions-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woosmap-directions-step {
  position: relative;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  padding: 20px 20px 20px 40px;
  font-size: 20px;
  line-height: 25px;
}

.woosmap-directions-step-distance {
  color: rgba(255, 255, 255, .5);
  position: absolute;
  padding: 5px 10px;
  font-size: 12px;
  left: 30px;
  bottom: -15px;
}

.woosmap-directions-step:hover {
  color: white;
}

.woosmap-directions-step:after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: -20px;
  border-left: 2px dotted rgba(255, 255, 255, .2);
  left: 20px;
}

.woosmap-directions-step:last-child:after,
.woosmap-directions-step:last-child .woosmap-directions-step-distance {
  display: none;
}


/* icons */

.woosmap-geolocation-icon {
  background-image: url('https://images.woosmap.com/location.png');
  -webkit-background-size: 280px 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.woosmap-travel-mode {
  padding: 0 0 0 40px;
  background: white;
  text-align: center;
}

.woosmap-directions-icon {
  background-image: url('https://images.woosmap.com/woosmap.directions.png');
  -webkit-background-size: 280px 20px;
  background-size: 280px 20px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.woosmap-directions-instructions .woosmap-directions-icon {
  position: absolute;
  left: 10px;
  top: 25px;
  margin: auto;
}

.woosmap-depart-icon {
  background-position: -160px 0;
}

.woosmap-arrive-icon {
  background-position: -200px 0;
}

.woosmap-close-icon {
  background-position: -220px 0;
}

.woosmap-reverse-icon {
  background-position: -240px 0;
}

.woosmap-travel-mode-option {
  background-color: white;
}

.woosmap-travel-mode-icon {
  background-image: url('https://images.woosmap.com/driving-sprite.png');
  -webkit-background-size: 20px 276px;
  background-size: 20px 276px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.woosmap-driving-icon {
  background-position: 0 -40px;
}

.woosmap-walking-icon {
  background-position: 0 -120px;
}

.woosmap-bicycling-icon {
  background-position: 0 -160px;
}

.selected .woosmap-driving-icon {
  background-position: 0 -60px;
}

.selected .woosmap-walking-icon {
  background-position: 0 -140px;
}

.selected .woosmap-bicycling-icon {
  background-position: 0 -180px;
}

.woosmap-travel-mode-option.selected {
  box-shadow: inset 0 -2px 0px 0px #3983de;
}


/*------------override google maps style----------*/

.adp-warnbox {
  display: none;
}

.adp-placemark {
  border: none;
  background: #FFF;
}

#adp-placemark,
.adp-placemark {
  font-weight: bold !important;
}

.adp-substep {
  max-width: 153px;
}

#directions .adp-placemark img {
  width: 30px;
  height: 44px;
  margin-right: 5px;
}

#directions #adp-placemark img {
  content: url('https://images.woosmap.com/start.png') !important;
}

#directions .adp-placemark:last-child img {
  content: url('https://images.woosmap.com/end.png') !important;
}

#map-container {
  position: relative;
}


/*grids*/

.pure-g {
  letter-spacing: -.31em;
  text-rendering: optimizespeed;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
  -ms-align-content: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

.pure-g [class *="pure-u"] {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
  font-weight: normal;
  letter-spacing: 0.01em;
}

.pure-u-1,
.pure-u-1-3 {
  display: inline-block;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}

.pure-u-1 {
  width: 100%;
}

.pure-u-1-3 {
  width: 33.3333%
}

.pure-form input[type=text],
.pure-form input[type=email] {
  padding: .5em .6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.pure-form input:not([type]) {
  padding: .5em .6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.pure-form input[type=text]:focus,
.pure-form input[type=email]:focus {
  outline: 0;
  border-color: #129FEA
}

.pure-form input:not([type]):focus {
  outline: 0;
  border-color: #129FEA
}

.pure-form input[type=text][disabled],
.pure-form input[type=email][disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3
}

.pure-form input:not([type])[disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3
}

.pure-form input[readonly] {
  background-color: #eee;
  color: #777;
  border-color: #ccc
}

.pure-form input:focus:invalid {
  color: #b94a48;
  border-color: #e9322d
}

.pure-form label {
  margin: .5em 0 .2em
}

@media only screen and (max-width: 480px) {
  .pure-form button[type=submit] {
    margin: .7em 0 0
  }
  .pure-form input:not([type]),
  .pure-form input[type=text],
  .pure-form input[type=email],
  .pure-form label {
    margin-bottom: .3em;
    display: block
  }
  .pure-group input:not([type]),
  .pure-group input[type=text],
  .pure-group input[type=email] {
    margin-bottom: 0
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
}

::-webkit-scrollbar-track {
  background-color: #F7F7F7;
}