WIP MMCM

package-lock.json

@@ -20,6 +20,7 @@
         "@vitejs/plugin-vue": "^3.1.0",
         "autoprefixer": "^10.4.12",
         "postcss": "^8.4.16",
+        "sass": "^1.55.0",
         "tailwindcss": "^3.1.8",
         "vite": "^3.1.0"
       }
@@ -1014,6 +1015,12 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1488,6 +1495,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2310,6 +2334,12 @@
         "function-bind": "^1.1.1"
       }
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2589,6 +2619,17 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "@vitejs/plugin-vue": "^3.1.0",
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.16",
+    "sass": "^1.55.0",
     "tailwindcss": "^3.1.8",
     "vite": "^3.1.0"
   }

src/App.vue

@@ -2,11 +2,13 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import Home from './components/Home.vue'
+import Wizard from "./components/Wizard.vue";
 </script>
 
 <template>
   <div class="PARA">
     <main id="product">
+      <wizard></wizard>
       <router-view></router-view>
     </main>
   </div>

src/components/Wizard.vue

@@ -0,0 +1,151 @@
+<template>
+  <ol class="step-indicator">
+    <li class="active">
+      <div class="step"><i class="fa-regular fa-location-dot fa-fw"></i></div>
+      <div class="caption d-none d-sm-block">Etape <span>1</span>: <span>Mon adresse</span></div>
+    </li>
+    <li class="">
+      <div class="step"><i class="fa-solid fa-file-medical fa-fw"></i></div>
+      <div class="caption d-none d-sm-block">Etape <span>2</span>: <span>Mon ordonnance</span></div>
+    </li>
+    <li class="">
+      <div class="step"><i class="fa-solid fa-truck fa-fw"></i></div>
+      <div class="caption d-none d-sm-block">Etape <span>3</span>: <span>Ma livraison</span></div>
+    </li>
+    <li class="">
+      <div class="step"><i class="fa-solid fa-calendar-days fa-fw"></i></div>
+      <div class="caption d-none d-sm-block">Etape <span>4</span>: <span>Date</span></div>
+    </li>
+    <li class="">
+      <div class="step"><i class="fa-solid fa-circle-check fa-fw"></i></div>
+      <div class="caption d-none d-sm-block">Step <span>5</span>: <span>Confirmation</span></div>
+    </li>
+  </ol>
+</template>
+
+<script>
+export default {
+  name: "Wizard"
+}
+</script>
+
+<style lang="scss">
+$wizard-color-neutral: #ccc !default;
+$wizard-color-active: #4183D7 !default;
+$wizard-color-complete: #87D37C !default;
+$wizard-step-width-height: 64px !default;
+$wizard-step-font-size: 24px !default;
+
+@import 'https://fonts.googleapis.com/css?family=Roboto';
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #f6f6f6;
+  font-family: 'Roboto', sans-serif;
+}
+
+.container {
+  background-color: #fff;
+}
+
+.step-wrapper {
+  padding: 20px 0;
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+
+.step-indicator {
+  border-collapse: separate;
+  display: table;
+  margin-left: 0px;
+  position: relative;
+  table-layout: fixed;
+  text-align: center;
+  vertical-align: middle;
+  padding-left: 0;
+  padding-top: 20px;
+
+  li {
+    display: table-cell;
+    position: relative;
+    float: none;
+    padding: 0;
+    width: 1%;
+
+    &:after {
+      background-color: $wizard-color-neutral;
+      content: "";
+      display: block;
+      height: 1px;
+      position: absolute;
+      width: 100%;
+      top: $wizard-step-width-height*0.5;
+    }
+
+    &:after {
+      left: 50%;
+    }
+
+    &:last-child {
+      &:after {
+        display: none;
+      }
+    }
+
+    &.active {
+      .step {
+        border-color: $wizard-color-active;
+        color: $wizard-color-active;
+      }
+
+      .caption {
+        color: $wizard-color-active;
+      }
+    }
+
+    &.complete {
+      &:after {
+        background-color: $wizard-color-complete;
+      }
+
+      .step {
+        border-color: $wizard-color-complete;
+        color: $wizard-color-complete;
+      }
+
+      .caption {
+        color: $wizard-color-complete;
+      }
+    }
+  }
+
+  .step {
+    background-color: #fff;
+    border-radius: 50%;
+    border: 1px solid $wizard-color-neutral;
+    color: $wizard-color-neutral;
+    font-size: $wizard-step-font-size;
+    height: $wizard-step-width-height;
+    line-height: $wizard-step-width-height;
+    margin: 0 auto;
+    position: relative;
+    width: $wizard-step-width-height;
+    z-index: 1;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .caption {
+    color: $wizard-color-neutral;
+    padding: 11px 16px;
+  }
+}
+
+</style>

src/views/address-check.vue

@@ -1,7 +1,6 @@
 <template>
   <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
 
-
   <div class="input-group mb-3">
     <div class="input-group-text">
       <i v-if="isSearching" class="fa-solid fa-circle-notch fa-spin fa-fw color-success"></i>
@@ -27,6 +26,7 @@
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
 
+
 export default {
   setup() {
     const store = useMMCMStore()

src/views/delivery-option-step-1.vue

@@ -1,23 +1,4 @@
 <template>
-  <!--
-
-   <div class="form-register">
-    <div class="steps clearfix"><ul role="tablist"><li role="tab" aria-disabled="false" class="first current" aria-selected="true"><a id="form-total-t-0" href="#form-total-h-0" aria-controls="form-total-p-0"><span class="current-info audible"> </span><div class="title">
-      <span class="step-icon"> <i class="fa-solid fa-user"></i> </span>
-      <span class="step-text">Ordonnance</span>
-    </div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-1" href="#form-total-h-1" aria-controls="form-total-p-1"><div class="title">
-      <span class="step-icon"><i class="zmdi zmdi-lock"></i></span>
-      <span class="step-text">Livraison</span>
-    </div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-2" href="#form-total-h-2" aria-controls="form-total-p-2"><div class="title">
-      <span class="step-icon"><i class="zmdi zmdi-card"></i></span>
-      <span class="step-text">Date</span>
-    </div></a></li><li role="tab" aria-disabled="false" class="last"><a id="form-total-t-3" href="#form-total-h-3" aria-controls="form-total-p-3"><div class="title">
-      <span class="step-icon"><i class="zmdi zmdi-receipt"></i></span>
-      <span class="step-text">Confirmation</span>
-    </div></a></li></ul></div>
-        </div>
-  -->
-
 
   <div class="card">
     <div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
@@ -86,593 +67,4 @@ export default {
 
 <style scoped>
 
-.form-register {
-  width: 100%;
-  display: flex;
-
-}
-
-.form-register .steps {
-  margin-bottom: 33px;
-}
-
-.form-register .steps ul {
-  display: flex;
-  list-style: none;
-  padding-left: 108px;
-  text-align: left;
-}
-
-.form-register .steps li,
-.form-register .steps li.current {
-  outline: none;
-  -o-outline: none;
-  -ms-outline: none;
-  -moz-outline: none;
-  -webkit-outline: none;
-  position: relative;
-}
-
-.form-register .steps li .current-info {
-  display: none;
-}
-
-.form-register .steps li a {
-  text-decoration: none;
-  outline: none;
-  -o-outline: none;
-  -ms-outline: none;
-  -moz-outline: none;
-  -webkit-outline: none;
-}
-
-.form-register .steps li a .title span {
-  display: block;
-}
-
-.form-register .steps li a .title .step-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  -o-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  background: #ccc;
-  margin: 0 auto;
-  position: relative;
-  outline: none;
-  -o-outline: none;
-  -ms-outline: none;
-  -moz-outline: none;
-  -webkit-outline: none;
-  color: #fff;
-  font-size: 25.6px;
-  margin-right: 108px;
-}
-
-.form-register .steps li a .step-icon i {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -o-transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-}
-
-.form-register .steps li .step-icon::before,
-.form-register .steps li:last-child .step-icon::after {
-  position: absolute;
-  content: "";
-  background: #e5e5e5;
-  width: 108px;
-  height: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  -o-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  -moz-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-}
-
-.form-register .steps li .step-icon::before {
-  right: 100%;
-}
-
-.form-register .steps li:last-child .step-icon::after {
-  left: 100%;
-}
-
-.form-register .steps li.current a .step-icon,
-.form-register .steps li.current a:active .step-icon,
-.form-register .steps li.done a .step-icon,
-.form-register .steps li.done a:active .step-icon {
-  background: #24c1e8;
-}
-
-.form-register .steps .current .step-icon::before,
-.form-register .steps .current:last-child .step-icon::after,
-.form-register .steps .done .step-icon::before {
-  background: #24c1e8;
-}
-
-.form-register .steps li a .step-text {
-  color: #999;
-  font-weight: 400;
-  font-size: 18px;
-  padding: 14px 0 8px;
-}
-
-.form-register .steps .current .step-text,
-.form-register .steps .done .step-text {
-  color: #333;
-}
-
-.form-register .content h2 {
-  display: none;
-}
-
-.form-register .content .inner h3 {
-  font-size: 22px;
-  color: #333;
-  font-weight: 700;
-  margin: 0;
-  padding-bottom: 18px;
-  padding-top: 5px;
-}
-
-.form-register .content .form-total-p-1 .inner h3 {
-  padding-bottom: 13px;
-  padding-top: 0;
-}
-
-.form-register .content #form-total-p-3 .inner h3 {
-  padding-bottom: 5px;
-}
-
-.form-register .content .inner h4 {
-  font-size: 18px;
-  font-weight: 700;
-  color: #333;
-  margin: 0;
-}
-
-.inner .form-row {
-  display: flex;
-  margin: 0 -12px;
-  position: relative;
-}
-
-.form-row.form-row-date.form-row-date-1 {
-  margin-top: 50px;
-  margin-bottom: -18px;
-}
-
-.inner .form-row .form-holder {
-  width: 50%;
-  padding: 0 12px;
-  margin-bottom: 15px;
-  position: relative;
-}
-
-.inner .form-row .form-holder.form-holder-1 {
-  width: 84.1%;
-}
-
-.inner .form-row .form-holder.form-holder-2 {
-  width: 100%;
-  position: relative;
-}
-
-.inner .form-row .form-row-inner {
-  position: relative;
-}
-
-.inner .form-row .form-holder .label {
-  position: absolute;
-  top: -3px;
-  left: 10px;
-  font-size: 16px;
-  font-weight: 400;
-  color: #666;
-  transform-origin: 0 0;
-  transition: all .2s ease;
-  -webkit-transition: all .2s ease;
-  -moz-transition: all .2s ease;
-  -o-transition: all .2s ease;
-  -ms-transition: all .2s ease;
-}
-
-.inner .form-row .form-holder .border {
-  position: absolute;
-  bottom: 31px;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  background: #6bc734;
-  transform: scaleX(0);
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -o-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform-origin: 0 0;
-  transition: all .15s ease;
-  -webkit-transition: all .15s ease;
-  -moz-transition: all .15s ease;
-  -o-transition: all .15s ease;
-  -ms-transition: all .15s ease;
-}
-
-.inner .form-row #radio {
-  color: #666;
-  font-weight: 400;
-  font-size: 16px;
-  margin: 8px 12px;
-}
-
-.inner .form-row #checkbox {
-  margin: 10px 0 28px 11px;
-  font-size: 15px;
-  color: #666;
-  font-weight: 400;
-}
-
-.inner .form-row .form-holder label.special-label {
-  display: inline-block;
-  float: left;
-  margin-top: 25px;
-  padding-right: 20px;
-  color: #666;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.inner .form-row .form-holder label.pay-1-label,
-.inner .form-row .form-holder label.pay-2-label {
-  width: 190px;
-  height: 95px;
-  border: 1px solid #e5e5e5;
-  display: block;
-  cursor: pointer;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  float: left;
-  margin-right: 15px;
-  text-align: center;
-  color: #666;
-  font-size: 16px;
-  font-weight: 400;
-  margin-bottom: 5px;
-}
-
-.inner .form-row .form-holder label.pay-1-label img,
-.inner .form-row .form-holder label.pay-2-label img {
-  padding-top: 15px;
-  padding-bottom: 8px;
-}
-
-.inner .form-row.form-row-date .form-holder select {
-  float: left;
-  width: 19%;
-  margin-right: 20px;
-}
-
-.inner .form-row .form-holder input,
-.inner .form-row .form-holder select {
-  width: 100%;
-  padding: 13px 10px 8px;
-  border: none;
-  border-bottom: 2px solid #e5e5e5;
-  appearance: unset;
-  -moz-appearance: unset;
-  -webkit-appearance: unset;
-  -o-appearance: unset;
-  -ms-appearance: unset;
-  outline: none;
-  -moz-outline: none;
-  -webkit-outline: none;
-  -o-outline: none;
-  -ms-outline: none;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-
-.inner .form-row .form-holder input {
-  font-size: 18px;
-  color: #333;
-  font-weight: 700;
-}
-
-.inner .form-row .form-holder input#pay-1,
-.inner .form-row .form-holder input#pay-2 {
-  display: none;
-}
-
-.inner .form-row .form-holder select {
-  font-size: 15px;
-  color: #666;
-  background: #fff url('../images/wizard_v4_icon.png') no-repeat scroll;
-  background-position: right 0 center;
-  z-index: 1;
-  cursor: pointer;
-  position: relative;
-}
-
-.inner .form-row .form-holder select:focus {
-  border-bottom: 2px solid #24c1e8;
-}
-
-.inner .form-row .form-holder .form-control:focus,
-.inner .form-row .form-holder .form-control:valid {
-  border-bottom: 2px solid #24c1e8;
-  margin-top: 21px;
-}
-
-.inner .form-row .form-holder .form-control:focus + .label,
-.inner .form-row .form-holder .form-control:valid + .label {
-  transform: translateY(-23px) scale(1);
-  -o-transform: translateY(-23px) scale(1);
-  -ms-transform: translateY(-23px) scale(1);
-  -moz-transform: translateY(-23px) scale(1);
-  -webkit-transform: translateY(-23px) scale(1);
-  color: #24c1e8;
-}
-
-.inner .form-row .form-holder .form-control:focus + .border,
-.inner .form-row .form-holder .form-control:valid + .border {
-  transform: scaleX(1);
-  -o-transform: scaleX(1);
-  -ms-transform: scaleX(1);
-  -moz-transform: scaleX(1);
-  -webkit-transform: scaleX(1);
-}
-
-.inner .form-row .form-holder input#pay-1:checked + label,
-.inner .form-row .form-holder input#pay-2:checked + label {
-  border: none;
-  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-  -o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-  -ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-  -webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-}
-
-.inner .form-row.table-responsive {
-  border: none;
-  border-radius: 5px;
-  -o-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  margin: 27px 0 -25px;
-}
-
-.inner .table-responsive .table {
-  width: 100%;
-}
-
-.inner .table-responsive tbody {
-  text-align: left;
-}
-
-.inner .table-responsive tr.space-row > td,
-.inner .table-responsive tr.space-row > th {
-  padding: 17px 20px 14px;
-  border-top: 1px solid #e5e5e5;
-}
-
-.inner .table-responsive tr.space-row:last-child > td,
-.inner .table-responsive tr.space-row:last-child > th {
-  border-bottom: none;
-}
-
-.inner .table-responsive tbody th {
-  color: #666;
-  font-size: 16px;
-  font-weight: 400;
-  width: 30%;
-}
-
-.inner .table-responsive tbody td {
-  color: #333;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.actions ul {
-  list-style: none;
-  padding-left: 0;
-  padding: 0 20px;
-  margin: 30px 0;
-  display: flex;
-  display: -webkit-flex;
-  justify-content: space-between;
-  -o-justify-content: space-between;
-  -ms-justify-content: space-between;
-  -moz-justify-content: space-between;
-  -webkit-justify-content: space-between;
-}
-
-.actions ul li.disabled {
-  opacity: 0;
-}
-
-.actions ul li {
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  -o-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  display: inline-flex;
-  height: 45px;
-  width: 140px;
-  justify-content: center;
-  -o-justify-content: center;
-  -ms-justify-content: center;
-  -moz-justify-content: center;
-  -webkit-justify-content: center;
-  -o-align-items: center;
-  -ms-align-items: center;
-  -moz-align-items: center;
-  -webkit-align-items: center;
-  align-items: center;
-  background: #24c1e8;
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.actions ul li:hover {
-  background: #1d97b5;
-}
-
-.actions ul li:first-child {
-  background: #999;
-  margin-left: 60.9%;
-}
-
-.actions ul li:first-child:hover {
-  background: #666;
-}
-
-.actions ul li a {
-  color: #fff;
-  text-decoration: none;
-  padding: 13px 34px;
-}
-
-/* Responsive */
-@media screen and (max-width: 1199px) {
-  .wizard-v3-content {
-    margin: 180px 20px;
-  }
-}
-
-@media screen and (max-width: 991px) {
-  .form-register .steps ul {
-    padding-left: 0;
-    justify-content: space-around;
-    -o-justify-content: space-around;
-    -ms-justify-content: space-around;
-    -moz-justify-content: space-around;
-    -webkit-justify-content: space-around;
-  }
-
-  .form-register .steps li a .title {
-    text-align: center;
-  }
-
-  .form-register .steps li a .title .step-icon,
-  .form-register .steps li a .title .step-icon {
-    margin: 0 auto;
-  }
-
-  .form-register .steps li a .title .step-icon::before,
-  .form-register .steps li:last-child a .title .step-icon::after {
-    content: none;
-  }
-
-  .actions ul li:first-child {
-    margin-left: 0;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .inner .form-row.form-row-date .form-holder select {
-    width: 17.5%;
-    margin-right: 20px;
-  }
-
-  .inner .form-row .form-holder label.pay-1-label,
-  .inner .form-row .form-holder label.pay-2-label {
-    margin-bottom: 15px;
-  }
-}
-
-@media screen and (max-width: 575px) {
-  .wizard-v3-content {
-    width: 90%;
-  }
-
-  .wizard-form .wizard-header {
-    padding: 40px 20px 20px 20px;
-  }
-
-  .inner .form-row {
-    flex-direction: column;
-    -o-flex-direction: column;
-    -ms-flex-direction: column;
-    -moz-flex-direction: column;
-    -webkit-flex-direction: column;
-    margin: 0;
-  }
-
-  .inner .form-row .form-holder {
-    width: 100%;
-  }
-
-  .inner .form-row .form-holder.form-holder-1 {
-    width: 100%;
-  }
-
-  .inner .form-row .form-holder {
-    padding: 0;
-  }
-
-  .inner .form-row .form-holder label.special-label {
-    float: none;
-  }
-
-  .inner .form-row.form-row-date .form-holder select {
-    float: none;
-    width: 100%;
-    margin-bottom: 20px;
-    margin-right: 0;
-    display: block;
-  }
-
-  .form-register .steps li a .title .step-icon {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-  }
-
-  .form-register .steps li a .step-text {
-    font-size: 12px;
-  }
-
-  .form-register .content {
-    padding: 35px 30px 60px;
-  }
-
-  .inner .form-row #radio {
-    margin-left: -2px;
-  }
-
-  .inner .form-row #checkbox {
-    margin-left: 0;
-  }
-
-  .actions ul li {
-    width: 120px;
-  }
-
-  .actions ul li a {
-    padding: 15px 24px;
-  }
-}
-
 </style>