@wizishop/angular-components 15.1.113 → 15.1.115

package/angular-components.scss

@@ -140,32 +140,33 @@ $wac-token-dark: #E8BF09!default;
 $wac-token-main: #1D2A3B!default;
 $wac-token-disabled: #EFF2F4!default;
 $wac-token-disabled-dark: #8A98B2!default;
-.zindexToggle {
-  z-index: 9!important;
-  position: relative;
-}
-
-.field-label .label {
-  font-size: rem(14);
-}
-
-.date-item, .wac-calendar__absolute .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item {
-  width: rem(32);
-  height: rem(32);
-}
-
-.wac-calendar__absolute .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date {
-  width: rem(36);
-  height: rem(36);
-}
-
-.wac-table__head__cell--checkbox .wac-field-checkbox.alone .is-checkradio[type=checkbox]:not(:checked) + label:before {
-  background-color: $wac-white;
-}
-
-.wac-table__head__cell--checkbox .wac-field-checkbox__row {
-  transform: translateX(5px);
-}
+
+$wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
+  z-index: 9!important;
+  position: relative;
+}
+
+.field-label .label {
+  font-size: rem(14);
+}
+
+.date-item, .wac-calendar__absolute .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item {
+  width: rem(32);
+  height: rem(32);
+}
+
+.wac-calendar__absolute .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date {
+  width: rem(36);
+  height: rem(36);
+}
+
+.wac-table__head__cell--checkbox .wac-field-checkbox.alone .is-checkradio[type=checkbox]:not(:checked) + label:before {
+  background-color: $wac-white;
+}
+
+.wac-table__head__cell--checkbox .wac-field-checkbox__row {
+  transform: translateX(5px);
+}
 .wac-ai-express {
   position: relative;
   width: 100%;
@@ -416,78 +417,78 @@ $wac-token-disabled-dark: #8A98B2!default;
     }
   }
 }
-.wac-alert {
-  width: 100%;
-  background-color: transparentize($wac-link-color, 0.85);
-  color: $wac-link-color;
-  border-radius: 3px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding: 20px;
-  &.success {
-    background-color: transparentize($wac-green-color, 0.85);
-    p {
-      color: $wac-p-alert-color-success;
-      > * {
-        color: $wac-p-alert-color-success;
-      }
-    }
-    i {
-      color: $wac-green-color;
-    }
-  }
-  &.warning {
-    background-color: transparentize($wac-primary-button, 0.85);
-    p {
-      color: $wac-p-alert-color-warning;
-      > * {
-        color: $wac-p-alert-color-warning;
-      }
-    }
-    i {
-      color: $wac-primary-button;
-    }
-  }
-  &.alert {
-    background-color: transparentize($wac-orange-color, 0.85);
-    p {
-      color: $wac-p-alert-color-alert;
-      > * {
-        color: $wac-p-alert-color-alert;
-      }
-    }
-    i {
-      color: $wac-orange-color;
-    }
-  }
-  p {
-    width: 100%;
-    font-size: rem(14);
-    line-height: rem(25);
-    margin: 0;
-    padding: 0;
-    color: $wac-p-alert-color-default;
-    > * {
-      color: $wac-p-alert-color-default;
-    }
-  }
-  i {
-    width: auto;
-    margin: 0 10px 0 0;
-    color: inherit;
-    font-size: rem(14);
-    line-height: rem(25);
-  }
-
-  .wac-button i {
-    color: $wac-white;
-  }
-
-  .closeAlert {
-    font-size: rem(20);
-  }
-}
+.wac-alert {
+  width: 100%;
+  background-color: transparentize($wac-link-color, 0.85);
+  color: $wac-link-color;
+  border-radius: 3px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 20px;
+  &.success {
+    background-color: transparentize($wac-green-color, 0.85);
+    p {
+      color: $wac-p-alert-color-success;
+      > * {
+        color: $wac-p-alert-color-success;
+      }
+    }
+    i {
+      color: $wac-green-color;
+    }
+  }
+  &.warning {
+    background-color: transparentize($wac-primary-button, 0.85);
+    p {
+      color: $wac-p-alert-color-warning;
+      > * {
+        color: $wac-p-alert-color-warning;
+      }
+    }
+    i {
+      color: $wac-primary-button;
+    }
+  }
+  &.alert {
+    background-color: transparentize($wac-orange-color, 0.85);
+    p {
+      color: $wac-p-alert-color-alert;
+      > * {
+        color: $wac-p-alert-color-alert;
+      }
+    }
+    i {
+      color: $wac-orange-color;
+    }
+  }
+  p {
+    width: 100%;
+    font-size: rem(14);
+    line-height: rem(25);
+    margin: 0;
+    padding: 0;
+    color: $wac-p-alert-color-default;
+    > * {
+      color: $wac-p-alert-color-default;
+    }
+  }
+  i {
+    width: auto;
+    margin: 0 10px 0 0;
+    color: inherit;
+    font-size: rem(14);
+    line-height: rem(25);
+  }
+
+  .wac-button i {
+    color: $wac-white;
+  }
+
+  .closeAlert {
+    font-size: rem(20);
+  }
+}
 .wac-alert-popup {
   .alert {
     z-index: 999999;
@@ -758,33 +759,33 @@ $wac-token-disabled-dark: #8A98B2!default;
   }
 
 }
-.wac-back {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    border: 1px solid $wac-border-light;
-    background-color: transparent;
-    transition: border-color 0.3s ease-in-out;
-
-    i {
-      color: $wac-second-color;
-      font-size: 11px;
-      line-height: 14px;
-    }
-
-    &:hover {
-      border-color: $wac-back-border-hover;
-      transition: border-color 0.3s ease-in-out;
-    }
-  }
-}
+.wac-back {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    border: 1px solid $wac-border-light;
+    background-color: transparent;
+    transition: border-color 0.3s ease-in-out;
+
+    i {
+      color: $wac-second-color;
+      font-size: 11px;
+      line-height: 14px;
+    }
+
+    &:hover {
+      border-color: $wac-back-border-hover;
+      transition: border-color 0.3s ease-in-out;
+    }
+  }
+}
 wac-block {
   .wac-block {
     background-color: $white;
@@ -944,7 +945,157 @@ wac-block {
     margin-right: 0;
   }
 }
-.wac-breadcrumbs {
+.w-border-picker {
+  display: flex;
+  flex-direction: column;
+
+  .bp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+    position: relative;
+
+    .border-preview {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      border: 2px solid #1d2a3b;
+      border-radius: 3px;
+
+      .mask1, .mask2 {
+        background: #fff;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .mask1 {
+        width: 30px;
+        height: 14px;
+      }
+
+      .mask2 {
+        width: 14px;
+        height: 30px;
+      }
+    }
+    
+    .bp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+
+    .slider-popup {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      position: absolute;
+      top: 50px;
+      left: 0;
+      min-width: 270px;
+      background: white;
+      border: 1px solid #dee2ed;
+      padding: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -20px;
+        left: 8px;
+        border: 10px solid transparent;
+        border-bottom-color: #dee2ed;
+      }
+
+      .slider {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        input[type="range"] {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 8px;
+          background: #dee2ed;
+          border-radius: 5px;
+          outline: none;
+          opacity: 0.7;
+          transition: opacity .2s;
+
+          &:hover {
+            opacity: 1;
+          }
+
+          &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #52aecd;
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+          }
+
+          &::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            background: #52aecd;
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+          }
+        }
+      }
+
+      .preset-buttons {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        button {
+          border: 1px solid #dee2ed;
+          background-color: #f5f5f5;
+          color: #1d2a3b;
+          font-size: 14px;
+          border-radius: 12px;
+          padding: 5px 15px;
+          cursor: pointer;
+          transition: background-color 0.3s, box-shadow 0.3s;
+
+          &:hover {
+            background-color: #e0e0e0;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+          }
+
+          &:active {
+            background-color: #d0d0d0;
+            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+    }
+  }
+}.wac-breadcrumbs {
   width: 100%;
   display: flex;
   align-items: center;
@@ -3593,7 +3744,41 @@ wac-calendar {
     }
   }
 }
-.wac-confirm-delete {
+.w-color-picker {
+  display: flex;
+  flex-direction: column;
+
+  .cp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+
+    .color-preview {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #dee2ed;
+      border-radius: 3px;
+    }
+    
+    .cp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+  }
+}.wac-confirm-delete {
   position: absolute;
   right: 0;
   top: 0;
@@ -3875,139 +4060,139 @@ wac-calendar {
 .wac-draganddrop-list__wrapper.cdk-drop-list-dragging .wac-draganddrop-list__wrapper__item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
-.wac-dropdown {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    &__icon {
-      font-size: 30px;
-      line-height: 18px;
-      color: $wac-second-color;
-      transition: color 0.3s ease, transform 0.3s ease;
-    }
-
-    &__sublevel {
-      position: absolute;
-      min-width: 160px;
-      top: 100%;
-      right: 0;
-      z-index: -1;
-      opacity: 0;
-      background-color: $wac-white;
-      border-radius: rem(3);
-      box-shadow: 0px 2px 5px $wac-info-box-shadow;
-      visibility: hidden;
-      transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
-
-      &__container {
-        padding: 10px 10px;
-        border: 1px solid $wac-border-color;
-        border-radius: 3px;
-
-        &__item {
-          padding: 5.7px 10px;
-          font-size: 14px;
-          line-height: 24px;
-          color: $wac-second-color;
-          cursor: pointer;
-          transition: background-color 0.3s ease, color 0.3s ease;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          align-content: center;
-
-          i {
-            min-width: 15px;
-            margin-right: 5px;
-            text-align: center;
-          }
-          span {
-            white-space: nowrap;
-          }
-
-          &:hover {
-            background-color: $wac-gray-background;
-            transition: background-color 0.3s ease, color 0.3s ease;
-            color: $wac-input-active-color;
-          }
-        }
-      }
-    }
-
-    &:hover {
-      .wac-dropdown__wrapper__icon {
-        color: $wac-wizishop-blue;
-        transform: rotate(90deg);
-        transition: color 0.3s ease, transform 0.3s ease;
-      }
-
-      .wac-dropdown__wrapper__sublevel {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-        transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
-      }
-    }
-  }
-}
-.wac-edit-in-place.nwb-wrapper {
+.wac-dropdown {
   display: inline-block;
-  position: relative;
-  width: auto;
-  min-width: 12px;
-  min-height: 1.4em;
-
-  input {
-    font-size: inherit;
-    transition: width 50ms;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: calc(100% + 14px) !important;
-    padding: 5px;
-    z-index: 1;
-    margin: 0;
-    outline: none !important;
-    border: 1px solid $wac-edit-in-place-border;
-    background: inherit;
-    transform: translateY(-17%);
-    background-color: $wac-edit-in-place-background;
+  width: 40px;
+  height: 40px;
 
-    &.nwb-editable {
-      text-decoration: none;
-      color: inherit;
-      border: none;
-      cursor: pointer;
-      height: 26px;
-    }
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-    &.nwb-editing {
-      color: $wac-edit-in-place-border;
+    &__icon {
+      font-size: 30px;
+      line-height: 18px;
+      color: $wac-second-color;
+      transition: color 0.3s ease, transform 0.3s ease;
     }
-  }
-
-  div.select {
-    position: absolute;
-    left: 0;
 
-    &:before,
-    &:after {
-      display: block;
+    &__sublevel {
       position: absolute;
-      height: 10px;
-      width: 10px;
-    }
-  }
+      min-width: 160px;
+      top: 100%;
+      right: 0;
+      z-index: -1;
+      opacity: 0;
+      background-color: $wac-white;
+      border-radius: rem(3);
+      box-shadow: 0px 2px 5px $wac-info-box-shadow;
+      visibility: hidden;
+      transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
+
+      &__container {
+        padding: 10px 10px;
+        border: 1px solid $wac-border-color;
+        border-radius: 3px;
+
+        &__item {
+          padding: 5.7px 10px;
+          font-size: 14px;
+          line-height: 24px;
+          color: $wac-second-color;
+          cursor: pointer;
+          transition: background-color 0.3s ease, color 0.3s ease;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          align-content: center;
+
+          i {
+            min-width: 15px;
+            margin-right: 5px;
+            text-align: center;
+          }
+          span {
+            white-space: nowrap;
+          }
+
+          &:hover {
+            background-color: $wac-gray-background;
+            transition: background-color 0.3s ease, color 0.3s ease;
+            color: $wac-input-active-color;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .wac-dropdown__wrapper__icon {
+        color: $wac-wizishop-blue;
+        transform: rotate(90deg);
+        transition: color 0.3s ease, transform 0.3s ease;
+      }
+
+      .wac-dropdown__wrapper__sublevel {
+        visibility: visible;
+        opacity: 1;
+        z-index: 2;
+        transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
+      }
+    }
+  }
+}
+.wac-edit-in-place.nwb-wrapper {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  min-width: 12px;
+  min-height: 1.4em;
+
+  input {
+    font-size: inherit;
+    transition: width 50ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: calc(100% + 14px) !important;
+    padding: 5px;
+    z-index: 1;
+    margin: 0;
+    outline: none !important;
+    border: 1px solid $wac-edit-in-place-border;
+    background: inherit;
+    transform: translateY(-17%);
+    background-color: $wac-edit-in-place-background;
+
+    &.nwb-editable {
+      text-decoration: none;
+      color: inherit;
+      border: none;
+      cursor: pointer;
+      height: 26px;
+    }
+
+    &.nwb-editing {
+      color: $wac-edit-in-place-border;
+    }
+  }
+
+  div.select {
+    position: absolute;
+    left: 0;
+
+    &:before,
+    &:after {
+      display: block;
+      position: absolute;
+      height: 10px;
+      width: 10px;
+    }
+  }
 
   span.nwb-loader {
     &.nwb-is-loading {
@@ -4243,293 +4428,293 @@ wac-calendar {
     }
   }
 }
-.wac-filters {
-  width: 100%;
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    align-content: center;
-    button {
-      position: relative;
-      width: auto;
-      display: flex;
-      align-items: center;
-      font-size: rem(14);
-      line-height: rem(16);
-      font-weight: 400;
-      color: $wac-second-color;
-      border: 1px solid $wac-border-light;
-      border-radius: 3px;
-      background: transparent;
-      box-shadow: none;
-      margin-bottom: rem(10);
-      transition: 0.3s ease;
-      cursor: pointer;
-      padding: 12px 20px;
-      .event {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 2;
-        display: inline-block;
-      }
-      i {
-        color: $wac-main-text;
-        font-size: rem(14);
-        margin: 0 rem(10) 0 0;
-      }
-      &:hover,
-      &:focus,
-      &.active {
-        border-color: $wac-wizishop-blue;
-        color: $wac-main-text;
-      }
-      &:not(:last-child) {
-        margin: 0 rem(10) rem(10) 0;
-      }
-    }
-    > span {
-      position: relative;
-      color: $wac-link-color;
-      display: inline-block;
-      transition: 0.3s ease;
-      font-size: rem(14);
-      line-height: rem(16);
-      margin: 0 0 0 rem(30);
-      cursor: pointer;
-      z-index: 1;
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 100%;
-        max-width: 0;
-        height: 1px;
-        border-radius: 3px;
-        background-color: darken($wac-link-color, 15%);
-        left: 0;
-        bottom: -2px;
-        transition: 0.3s ease;
-      }
-      &:hover,
-      &:focus {
-        color: darken($wac-link-color, 15%);
-        &:before {
-          max-width: 100%;
-        }
-      }
-    }
-  }
-}
-.wac-free-popin {
-  height: 100%;
-  width: 100%;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  &__wrapper {
-    background-color: white;
-    border: 1px solid $wac-border-color;
-    border-radius: 3px;
-    margin: auto;
-     box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 50px;
-    z-index: 3;
-    max-height: 90vh;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    max-width: 575px;
-    overflow: hidden;
-
-    &__content {
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      > * {
-        height: auto;
-      }
-    }
-
-    div:not([class]) {
-      width: 100%;
-      margin: 0 0 17px;
-    }
-
-    > * {
-      width: 100%;
-    }
-
-    &__button-close {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: $wac-popin-btn-close;
-      transition: .3s ease;
-      i {
-        color: $wac-second-color;
-        font-size: 14px;
-        font-weight: 400;
-      }
-      &:hover, &:focus {
-        background-color: $wac-main-text;
-        i {
-          color: $wac-white;
-        }
-      }
-    }
-
-    h1 {
-      font-size: rem(30);
-      line-height: rem(35);
-      font-weight: 600;
-      color: $wac-main-text;
-    }
-
-    h2 {
-      font-size: rem(18);
-      line-height: rem(21);
-      font-weight: 500;
-      color: $wac-main-text;
-    }
-
-    h3 {
-      font-size: rem(16);
-      line-height: rem(19);
-      font-weight: 500;
-      color: $wac-main-text;
-    }
-
-    h4 {
-      font-size: rem(14);
-      line-height: rem(16);
-      font-weight: 500;
-      color: $wac-main-text;
-    }
-
-    img {
-        width: auto;
-        height: auto;
-        margin: 0 auto;
-    }
-
-    &__title {
-        font: normal normal bold 20px/25px sans-serif;
-        color: $wac-main-text;
-    }
-
-    &__buttons {
-      width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      margin: 30px 0 0;
-        &__button {
-            margin: 10px;
-            width: auto;
-        }
-    }
-  }
-  &__background {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: transparentize($wac-main-text, .5);
-  }
-}
-
-.wac-free-popin  .ps-content > * {
-  padding-right: 15px;
-}
-.wac-google-preview {
-  padding: 30px;
-  border: 1px solid $wac-google-preview-border;
+.wac-filters {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-family: 'Arial', sans-serif;
-  overflow: hidden;
-  &__url {
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: $wac-google-preview-url;
-    font-size: rem(14);
-    margin: 0 0 10px;
-    line-height: rem(16);
-  }
-  &__title {
-    width: 100%;
-    color: $wac-google-preview-title;
-    font-size: rem(20);
-    line-height: rem(22);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    margin: 0 0 rem(12);
-  }
-  &__description {
+  &__wrapper {
     width: 100%;
-    font-size: rem(14);
-    line-height: rem(24);
-    overflow: hidden;
-    color: $wac-google-preview-description;
-    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+    button {
+      position: relative;
+      width: auto;
+      display: flex;
+      align-items: center;
+      font-size: rem(14);
+      line-height: rem(16);
+      font-weight: 400;
+      color: $wac-second-color;
+      border: 1px solid $wac-border-light;
+      border-radius: 3px;
+      background: transparent;
+      box-shadow: none;
+      margin-bottom: rem(10);
+      transition: 0.3s ease;
+      cursor: pointer;
+      padding: 12px 20px;
+      .event {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        display: inline-block;
+      }
+      i {
+        color: $wac-main-text;
+        font-size: rem(14);
+        margin: 0 rem(10) 0 0;
+      }
+      &:hover,
+      &:focus,
+      &.active {
+        border-color: $wac-wizishop-blue;
+        color: $wac-main-text;
+      }
+      &:not(:last-child) {
+        margin: 0 rem(10) rem(10) 0;
+      }
+    }
+    > span {
+      position: relative;
+      color: $wac-link-color;
+      display: inline-block;
+      transition: 0.3s ease;
+      font-size: rem(14);
+      line-height: rem(16);
+      margin: 0 0 0 rem(30);
+      cursor: pointer;
+      z-index: 1;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        max-width: 0;
+        height: 1px;
+        border-radius: 3px;
+        background-color: darken($wac-link-color, 15%);
+        left: 0;
+        bottom: -2px;
+        transition: 0.3s ease;
+      }
+      &:hover,
+      &:focus {
+        color: darken($wac-link-color, 15%);
+        &:before {
+          max-width: 100%;
+        }
+      }
+    }
   }
 }
-.wac-header-page {
+.wac-free-popin {
+  height: 100%;
   width: 100%;
-  background-color: transparent;
-  position: relative;
-  z-index: 2;
-  &__maxWidth {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  &__wrapper {
+    background-color: white;
+    border: 1px solid $wac-border-color;
+    border-radius: 3px;
+    margin: auto;
+     box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 50px;
+    z-index: 3;
+    max-height: 90vh;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     width: 100%;
-    margin: 0 auto;
-    &__top {
+    max-width: 575px;
+    overflow: hidden;
+
+    &__content {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      > * {
+        height: auto;
+      }
+    }
+
+    div:not([class]) {
+      width: 100%;
+      margin: 0 0 17px;
+    }
+
+    > * {
       width: 100%;
+    }
+
+    &__button-close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
-      margin: 0 0 27px;
-      @include media('<tablet') {
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-items: flex-start;
-        margin: 0;
-      }
-      &.center {
-        justify-content: center;
+      background-color: $wac-popin-btn-close;
+      transition: .3s ease;
+      i {
+        color: $wac-second-color;
+        font-size: 14px;
+        font-weight: 400;
       }
-      &__left {
-        width: auto;
+      &:hover, &:focus {
+        background-color: $wac-main-text;
+        i {
+          color: $wac-white;
+        }
+      }
+    }
+
+    h1 {
+      font-size: rem(30);
+      line-height: rem(35);
+      font-weight: 600;
+      color: $wac-main-text;
+    }
+
+    h2 {
+      font-size: rem(18);
+      line-height: rem(21);
+      font-weight: 500;
+      color: $wac-main-text;
+    }
+
+    h3 {
+      font-size: rem(16);
+      line-height: rem(19);
+      font-weight: 500;
+      color: $wac-main-text;
+    }
+
+    h4 {
+      font-size: rem(14);
+      line-height: rem(16);
+      font-weight: 500;
+      color: $wac-main-text;
+    }
+
+    img {
+        width: auto;
+        height: auto;
+        margin: 0 auto;
+    }
+
+    &__title {
+        font: normal normal bold 20px/25px sans-serif;
+        color: $wac-main-text;
+    }
+
+    &__buttons {
+      width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      margin: 30px 0 0;
+        &__button {
+            margin: 10px;
+            width: auto;
+        }
+    }
+  }
+  &__background {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparentize($wac-main-text, .5);
+  }
+}
+
+.wac-free-popin  .ps-content > * {
+  padding-right: 15px;
+}
+.wac-google-preview {
+  padding: 30px;
+  border: 1px solid $wac-google-preview-border;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-family: 'Arial', sans-serif;
+  overflow: hidden;
+  &__url {
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: $wac-google-preview-url;
+    font-size: rem(14);
+    margin: 0 0 10px;
+    line-height: rem(16);
+  }
+  &__title {
+    width: 100%;
+    color: $wac-google-preview-title;
+    font-size: rem(20);
+    line-height: rem(22);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 0 rem(12);
+  }
+  &__description {
+    width: 100%;
+    font-size: rem(14);
+    line-height: rem(24);
+    overflow: hidden;
+    color: $wac-google-preview-description;
+    margin: 0;
+  }
+}
+.wac-header-page {
+  width: 100%;
+  background-color: transparent;
+  position: relative;
+  z-index: 2;
+  &__maxWidth {
+    width: 100%;
+    margin: 0 auto;
+    &__top {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 0 27px;
+      @include media('<tablet') {
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin: 0;
+      }
+      &.center {
+        justify-content: center;
+      }
+      &__left {
+        width: auto;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -4624,89 +4809,89 @@ wac-calendar {
     }
   }
 }
-.wac-image {
-  width: 60px;
-  height: 60px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    border: 1px solid $wac-border-light;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    &.empty {
-      background-color: $wac-gray-background;
-    }
-
-    i {
-      color: $wac-border-form;
-      font-size: 25px;
-      line-height: 23px;
-    }
-  }
-}
-.wac-info {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    i {
-      font-size: 14px;
-      line-height: 25px;
-      color: $wac-second-color;
-      transition: color 0.3s ease-in-out;
-    }
-
-    &__sublevel {
-      position: absolute;
-      width: 350px;
-      top: 13px;
-      left: 100%;
-      z-index: -1;
-      opacity: 0;
-      background-color: $wac-white;
-      border-radius: rem(3);
-      box-shadow: 0px 2px 5px $wac-info-box-shadow;
-      visibility: hidden;
-      transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
-
-      &__container {
-        padding: 15px 20px;
-        font-size: rem(14);
-        line-height: rem(25);
-        color: $wac-second-color;
-      }
-    }
-
-    &:hover {
-      i {
-        color: $wac-input-active-color;
-        transition: color 0.3s ease-in-out;
-      }
-
-      .wac-info__wrapper__sublevel {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-        transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
-      }
-    }
-  }
-}
+.wac-image {
+  width: 60px;
+  height: 60px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    border: 1px solid $wac-border-light;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    &.empty {
+      background-color: $wac-gray-background;
+    }
+
+    i {
+      color: $wac-border-form;
+      font-size: 25px;
+      line-height: 23px;
+    }
+  }
+}
+.wac-info {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    i {
+      font-size: 14px;
+      line-height: 25px;
+      color: $wac-second-color;
+      transition: color 0.3s ease-in-out;
+    }
+
+    &__sublevel {
+      position: absolute;
+      width: 350px;
+      top: 13px;
+      left: 100%;
+      z-index: -1;
+      opacity: 0;
+      background-color: $wac-white;
+      border-radius: rem(3);
+      box-shadow: 0px 2px 5px $wac-info-box-shadow;
+      visibility: hidden;
+      transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
+
+      &__container {
+        padding: 15px 20px;
+        font-size: rem(14);
+        line-height: rem(25);
+        color: $wac-second-color;
+      }
+    }
+
+    &:hover {
+      i {
+        color: $wac-input-active-color;
+        transition: color 0.3s ease-in-out;
+      }
+
+      .wac-info__wrapper__sublevel {
+        visibility: visible;
+        opacity: 1;
+        z-index: 2;
+        transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
+      }
+    }
+  }
+}
 .wac-link {
   position: relative;
   color: $wac-link-color;
@@ -4760,99 +4945,99 @@ wac-calendar {
     transition: opacity .3s ease 0s, visibility 0s linear .35s;
   }
 }
-.wac-loader {
-  &.is-small {
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: -70px;
-    transform: scale(0.6);
-  }
-  margin-bottom: rem(80);
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    50% {
-      transform: rotate(180deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes rotate2 {
-    0% {
-      transform: rotate(0deg);
-      border-top-color: $wac-color-loader;
-    }
-    50% {
-      transform: rotate(180deg);
-      border-top-color: $wac-color-loader2;
-    }
-    100% {
-      transform: rotate(360deg);
-      border-top-color: $wac-color-loader;
-    }
-  }
-
-  @mixin loaderDivMixin {
-    border-radius: 50%;
-    padding: rem(8);
-    border: rem(2) solid transparent;
-    animation: rotate linear 3.5s infinite;
-  }
-
-  .loader {
-    position: relative;
-    margin: rem(75) auto;
-    width: rem(150);
-    height: rem(150);
-    display: block;
-    overflow: hidden;
-    div {
-      height: 100%;
-    }
-  }
-
-  /* loader 1 */
-  .loader1,
-  .loader1 div {
-    @include loaderDivMixin;
-    border-top-color: $wac-color-loader;
-    border-bottom-color: $wac-color-loader2;
-  }
-
-  div:hover {
-    animation-play-state: paused;
-  }
-
-  .loader,
-  .loader * {
-    will-change: transform;
-  }
-
-  p {
-    margin-top: -50px;
-    font-weight: 500;
-  }
-}
-.wac-logo {
-  &__wrapper {
-    svg {
-      width: 128px !important;
-    }
-
-    &.white {
-      .cls-0,
-      .cls-1,
-      .cls-2 {
-        fill: white;
-      }
-    }
-  }
-}
+.wac-loader {
+  &.is-small {
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: -70px;
+    transform: scale(0.6);
+  }
+  margin-bottom: rem(80);
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate2 {
+    0% {
+      transform: rotate(0deg);
+      border-top-color: $wac-color-loader;
+    }
+    50% {
+      transform: rotate(180deg);
+      border-top-color: $wac-color-loader2;
+    }
+    100% {
+      transform: rotate(360deg);
+      border-top-color: $wac-color-loader;
+    }
+  }
+
+  @mixin loaderDivMixin {
+    border-radius: 50%;
+    padding: rem(8);
+    border: rem(2) solid transparent;
+    animation: rotate linear 3.5s infinite;
+  }
+
+  .loader {
+    position: relative;
+    margin: rem(75) auto;
+    width: rem(150);
+    height: rem(150);
+    display: block;
+    overflow: hidden;
+    div {
+      height: 100%;
+    }
+  }
+
+  /* loader 1 */
+  .loader1,
+  .loader1 div {
+    @include loaderDivMixin;
+    border-top-color: $wac-color-loader;
+    border-bottom-color: $wac-color-loader2;
+  }
+
+  div:hover {
+    animation-play-state: paused;
+  }
+
+  .loader,
+  .loader * {
+    will-change: transform;
+  }
+
+  p {
+    margin-top: -50px;
+    font-weight: 500;
+  }
+}
+.wac-logo {
+  &__wrapper {
+    svg {
+      width: 128px !important;
+    }
+
+    &.white {
+      .cls-0,
+      .cls-1,
+      .cls-2 {
+        fill: white;
+      }
+    }
+  }
+}
 .wac-mosaic {
   height: 450px;
   position: relative;
@@ -5593,333 +5778,333 @@ wac-optional-disable-container {
             }
         }
     }
-}.wac-pagination {
-  width: 100%;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(flex-end);
-    padding: 30px 0 0;
-
-    &__page {
-      margin-right: 30px;
-      padding: 4px 0 5px 0;
-
-      @include flexbox();
-
-      p {
-        margin: 4px 11px 4px 0;
-        font-size: 14px;
-        line-height: 24px;
-        color: $wac-second-color;
-      }
-
-      select {
-        width: 61px;
-        font-size: 14px;
-        line-height: 24px;
-        color: $wac-second-color;
-        padding: 3px 26px 3px 14px;
-        border: 1px solid $wac-border-form;
-        border-radius: 3px;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        text-indent: 0;
-        text-overflow: '';
-        background: transparent
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
-          top 8px right 12px / 10px 10px no-repeat;
-      }
-
-      select::-ms-expand {
-        display: none;
-      }
-    }
-
-    &__elements {
-      margin-right: 30px;
-
-      p {
-        margin: 8px 0 9px 0;
-        font-size: 14px;
-        line-height: 24px;
-        color: $wac-dark;
-      }
-    }
-
-    &__arrows {
-      @include flexbox();
-
-      &__arrow {
-        width: 40px;
-        height: 40px;
-        padding: 9px 14px;
-        border: 1px solid $wac-border-form;
-        border-radius: 3px;
-        cursor: pointer;
-        transition: .3s ease;
-
-        &:hover, &:focus {
-          &:not(.wac-pagination__wrapper__arrows__arrow--disabled) {
-            border: 1px solid $wac-wizishop-blue;
-          }
-        }
-
-        span {
-          display: inline-block;
-          width: 10px;
-          height: 15px;
-        }
-
-        &--left {
-          margin-right: 10px;
-
-          span {
-            background: transparent
-              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='chevron-left' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-left fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'/%3E%3C/svg%3E")
-              center center / 10px 12px no-repeat;
-          }
-        }
-
-        &--right {
-          span {
-            background: transparent
-              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='chevron-right' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-right fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E")
-              center center / 10px 12px no-repeat;
-          }
-        }
-
-        &--disabled {
-          border-color: $wac-background-color;
-          background-color: $wac-background-color;
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}
-.wac-free {
-  height: 100%;
-  width: 100%;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-
-  &__wrapper {
-    background-color: white;
-    border: 1px solid $wac-border-color;
-    border-radius: 3px;
-    margin: auto;
-    box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 50px;
-    z-index: 3;
-    max-height: 90vh;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    max-width: 575px;
-    overflow: hidden;
-
-    &__content {
-      position: relative;
-      overflow: hidden;
-      display: flex;
-
-    }
-
-    div:not([class]) {
-      width: 100%;
-      margin: 0 0 20px;
-    }
-
-    > * {
-      width: 100%;
-    }
-
-    &__button-close {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: $wac-popin-btn-close;
-      transition: .3s ease;
-      i {
-        color: $wac-second-color;
-        font-size: 14px;
-        font-weight: 400;
-      }
-      &:hover, &:focus {
-        background-color: $wac-main-text;
-        i {
-          color: $wac-white;
-        }
-      }
-    }
-
-    img {
-      display: block;
-      max-width: 200px;
-      margin: 0 auto rem(20);
-    }
-
-    h2 {
-      font-size: rem(20);
-      line-height: rem(25);
-      margin: 0 0 rem(20);
-      font-weight: 500;
-      width: 100%;
-      text-align: center;
-    }
-
-    p {
-      font-size: rem(14);
-      line-height: rem(25);
-      color: $wac-second-color;
-      width: 100%;
-      text-align: center;
-      padding: 0;
-      margin: 0;
-    }
-
-    &__buttons {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 30px 0 0;
-      &__button {
-        margin: 10px;
-        width: auto;
-      }
-    }
-  }
-  &__background {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: transparentize($wac-main-text, .5);
-  }
-}
-
-.wac-free .ps-content > * {
-  padding-right: 15px;
-}
-.wac-progressBarContent {
-  position: relative;
-  width: 100%;
-  display: block;
-  .progressBar {
-    position: relative;
-    width: 88%;
-    margin-bottom: 1rem;
-    progress {
-      &.progress {
-        margin-bottom: 0;
-        height: rem(2);
-        &::-webkit-progress-value {
-          transition: width 0.5s ease;
-        }
-      }
-    }
-    span {
-      position: absolute;
-      top: -4px;
-      height: 11px;
-      width: 11px;
-      background-color: $wac-border-color;
-      border-radius: 50%;
-    }
-    .is-danger {
-      background-color: $wac-primary-button;
-      &::-webkit-progress-value {
-        background-color: $wac-primary-button;
-      }
-    }
-    .is-warning {
-      background-color: $wac-orange-color;
-      &::-webkit-progress-value {
-        background-color: $wac-orange-color;
-      }
-    }
-    .is-success {
-      background-color: $wac-green-color;
-      &::-webkit-progress-value {
-        background-color: $wac-green-color;
-      }
-    }
-  }
-  .size {
-    display: inline;
-    color: $wac-color-text-grey;
-    position: absolute;
-    right: 0;
-    top: -9px;
-    background: $wac-white;
-    padding-left: 0.875rem;
-    .is-success {
-      color: $wac-green-color;
-    }
-    .is-warning {
-      color: $wac-orange-color;
-    }
-    .is-danger {
-      color: $wac-primary-button;
-    }
-    > span {
-      font-size: rem(14) !important;
-      line-height: 1;
-      transform: translateY(-3px);
-      display: inline-block;
-      letter-spacing: 0;
-      strong {
-        letter-spacing: 0;
-        font-weight: 600;
-      }
-    }
-  }
-}
-.wac-radio {
-  .is-checkradio[type='radio'] {
-    outline: 0 !important;
-    & + label {
-      font-size: rem(14);
-      line-height: rem(24);
-      color: $wac-input-radio-color-label;
-      padding-left: 30px;
-      padding-right: 5px;
-      margin-right: 0;
-      outline: 0 !important;
-      &:before {
-        width: 16px;
-        height: 16px;
-        border: 1px solid $wac-border-form;
-        border-radius: 23px;
-        top: 3px;
+}.wac-pagination {
+  width: 100%;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(flex-end);
+    padding: 30px 0 0;
+
+    &__page {
+      margin-right: 30px;
+      padding: 4px 0 5px 0;
+
+      @include flexbox();
+
+      p {
+        margin: 4px 11px 4px 0;
+        font-size: 14px;
+        line-height: 24px;
+        color: $wac-second-color;
       }
-      &:after {
-        width: 20px;
-        height: 20px;
-        background: $wac-input-active-color;
+
+      select {
+        width: 61px;
+        font-size: 14px;
+        line-height: 24px;
+        color: $wac-second-color;
+        padding: 3px 26px 3px 14px;
+        border: 1px solid $wac-border-form;
+        border-radius: 3px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        text-indent: 0;
+        text-overflow: '';
+        background: transparent
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
+          top 8px right 12px / 10px 10px no-repeat;
+      }
+
+      select::-ms-expand {
+        display: none;
+      }
+    }
+
+    &__elements {
+      margin-right: 30px;
+
+      p {
+        margin: 8px 0 9px 0;
+        font-size: 14px;
+        line-height: 24px;
+        color: $wac-dark;
+      }
+    }
+
+    &__arrows {
+      @include flexbox();
+
+      &__arrow {
+        width: 40px;
+        height: 40px;
+        padding: 9px 14px;
+        border: 1px solid $wac-border-form;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: .3s ease;
+
+        &:hover, &:focus {
+          &:not(.wac-pagination__wrapper__arrows__arrow--disabled) {
+            border: 1px solid $wac-wizishop-blue;
+          }
+        }
+
+        span {
+          display: inline-block;
+          width: 10px;
+          height: 15px;
+        }
+
+        &--left {
+          margin-right: 10px;
+
+          span {
+            background: transparent
+              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='chevron-left' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-left fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'/%3E%3C/svg%3E")
+              center center / 10px 12px no-repeat;
+          }
+        }
+
+        &--right {
+          span {
+            background: transparent
+              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='chevron-right' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-right fa-w-10 fa-7x'%3E%3Cpath fill='%23526384' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E")
+              center center / 10px 12px no-repeat;
+          }
+        }
+
+        &--disabled {
+          border-color: $wac-background-color;
+          background-color: $wac-background-color;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+.wac-free {
+  height: 100%;
+  width: 100%;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+
+  &__wrapper {
+    background-color: white;
+    border: 1px solid $wac-border-color;
+    border-radius: 3px;
+    margin: auto;
+    box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 50px;
+    z-index: 3;
+    max-height: 90vh;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 575px;
+    overflow: hidden;
+
+    &__content {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+
+    }
+
+    div:not([class]) {
+      width: 100%;
+      margin: 0 0 20px;
+    }
+
+    > * {
+      width: 100%;
+    }
+
+    &__button-close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: $wac-popin-btn-close;
+      transition: .3s ease;
+      i {
+        color: $wac-second-color;
+        font-size: 14px;
+        font-weight: 400;
+      }
+      &:hover, &:focus {
+        background-color: $wac-main-text;
+        i {
+          color: $wac-white;
+        }
+      }
+    }
+
+    img {
+      display: block;
+      max-width: 200px;
+      margin: 0 auto rem(20);
+    }
+
+    h2 {
+      font-size: rem(20);
+      line-height: rem(25);
+      margin: 0 0 rem(20);
+      font-weight: 500;
+      width: 100%;
+      text-align: center;
+    }
+
+    p {
+      font-size: rem(14);
+      line-height: rem(25);
+      color: $wac-second-color;
+      width: 100%;
+      text-align: center;
+      padding: 0;
+      margin: 0;
+    }
+
+    &__buttons {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 30px 0 0;
+      &__button {
+        margin: 10px;
+        width: auto;
+      }
+    }
+  }
+  &__background {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparentize($wac-main-text, .5);
+  }
+}
+
+.wac-free .ps-content > * {
+  padding-right: 15px;
+}
+.wac-progressBarContent {
+  position: relative;
+  width: 100%;
+  display: block;
+  .progressBar {
+    position: relative;
+    width: 88%;
+    margin-bottom: 1rem;
+    progress {
+      &.progress {
+        margin-bottom: 0;
+        height: rem(2);
+        &::-webkit-progress-value {
+          transition: width 0.5s ease;
+        }
+      }
+    }
+    span {
+      position: absolute;
+      top: -4px;
+      height: 11px;
+      width: 11px;
+      background-color: $wac-border-color;
+      border-radius: 50%;
+    }
+    .is-danger {
+      background-color: $wac-primary-button;
+      &::-webkit-progress-value {
+        background-color: $wac-primary-button;
+      }
+    }
+    .is-warning {
+      background-color: $wac-orange-color;
+      &::-webkit-progress-value {
+        background-color: $wac-orange-color;
+      }
+    }
+    .is-success {
+      background-color: $wac-green-color;
+      &::-webkit-progress-value {
+        background-color: $wac-green-color;
+      }
+    }
+  }
+  .size {
+    display: inline;
+    color: $wac-color-text-grey;
+    position: absolute;
+    right: 0;
+    top: -9px;
+    background: $wac-white;
+    padding-left: 0.875rem;
+    .is-success {
+      color: $wac-green-color;
+    }
+    .is-warning {
+      color: $wac-orange-color;
+    }
+    .is-danger {
+      color: $wac-primary-button;
+    }
+    > span {
+      font-size: rem(14) !important;
+      line-height: 1;
+      transform: translateY(-3px);
+      display: inline-block;
+      letter-spacing: 0;
+      strong {
+        letter-spacing: 0;
+        font-weight: 600;
+      }
+    }
+  }
+}
+.wac-radio {
+  .is-checkradio[type='radio'] {
+    outline: 0 !important;
+    & + label {
+      font-size: rem(14);
+      line-height: rem(24);
+      color: $wac-input-radio-color-label;
+      padding-left: 30px;
+      padding-right: 6px;
+      margin-right: 0;
+      outline: 0 !important;
+      &:before {
+        width: 22px;
+        height: 22px;
+        border: 1px solid $wac-border-form;
+        border-radius: 23px;
         top: 1px;
-        left: -2px;
+      }
+      &:after {
+        width: 32px;
+        height: 32px;
+        background: $wac-input-active-color;
+        top: -4px;
+        left: -5px;
       }
       &:before,
       &:after {
@@ -5958,7 +6143,7 @@ wac-optional-disable-container {
 
   .wac-radio__row {
     min-width: 100%;
-    margin: 0 0 7px;
+    margin: 0 0 15px;
   }
 
   &--nowrap {
@@ -6032,22 +6217,22 @@ wac-optional-disable-container {
       line-height: rem(24);
       color: $wac-input-radio-color-label;
       padding-left: 30px;
-      padding-right: 6px;
+      padding-right: 5px;
       margin-right: 0;
       outline: 0 !important;
       &:before {
-        width: 22px;
-        height: 22px;
+        width: 16px;
+        height: 16px;
         border: 1px solid $wac-border-form;
         border-radius: 23px;
-        top: 1px;
+        top: 3px;
       }
       &:after {
-        width: 32px;
-        height: 32px;
+        width: 20px;
+        height: 20px;
         background: $wac-input-active-color;
-        top: -4px;
-        left: -5px;
+        top: 1px;
+        left: -2px;
       }
       &:before,
       &:after {
@@ -6086,7 +6271,7 @@ wac-optional-disable-container {
 
   .wac-radio__row {
     min-width: 100%;
-    margin: 0 0 15px;
+    margin: 0 0 7px;
   }
 
   &--nowrap {
@@ -6448,258 +6633,258 @@ wac-optional-disable-container {
     margin: 0;
   }
 }
-.wac-search {
-  width: 100%;
-  min-height: 50px;
-  border-radius: 3px;
-  background-color: $wac-white;
-  position: relative;
-  z-index: 2;
-  border: 1px solid $wac-border-light;
-  transition: 0.3s ease;
-  &.open {
-    border-color: $wac-wizishop-blue;
-  }
-  &__wrapper {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    align-content: stretch;
-    flex-wrap: nowrap;
-    width: 100%;
-    min-height: 50px;
-    @include media('<tablet') {
-      padding: 0 12px;
-    }
-    input {
-      background: transparent;
-      border: none;
-      color: $wac-main-text;
-      font-size: rem(14);
-      height: 50px;
-      line-height: 50px;
-      padding: 0 20px 0 48px;
-      font-weight: 400;
-      width: 100%;
-      @include media('<tablet') {
-        padding: 0 0 0 10px;
-      }
-      &::-webkit-input-placeholder {
-        /* Chrome/Opera/Safari */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &::-moz-placeholder {
-        /* Firefox 19+ */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:-ms-input-placeholder {
-        /* IE 10+ */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:-moz-placeholder {
-        /* Firefox 18- */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:focus {
-        & + button i {
-          color: $wac-main-text;
-        }
-        &::-webkit-input-placeholder {
-          /* Chrome/Opera/Safari */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &::-moz-placeholder {
-          /* Firefox 19+ */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &:-ms-input-placeholder {
-          /* IE 10+ */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &:-moz-placeholder {
-          /* Firefox 18- */
-          color: $wac-white;
-          opacity: 1;
-        }
-      }
-    }
-    button {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
-      border-radius: 3px;
-      position: absolute;
-      left: 20px;
-      top: 50%;
-      transform: translateY(-50%);
-      border: none;
-      cursor: pointer;
-      background-color: $wac-white;
-      i {
-        font-size: rem(18);
-        color: $wac-color-icon-search-multiple-search;
-        transition: 0.3s ease;
-      }
-      &:hover {
-        i {
-          color: $wac-wizishop-blue !important;
-        }
-      }
-    }
-  }
-  &__absolute {
-    position: absolute;
-    top: 100%;
-    margin-top: rem(14);
-    left: -1px;
-    width: auto;
-    min-width: calc(100% - 38px);
-    max-width: calc(100% + 2px);
-    border: 1px solid $wac-border-light;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    background-color: $wac-white;
-    max-height: 260px;
-    height: auto;
-    visibility: visible;
-    opacity: 1;
-    box-shadow: 3px 3px 20px $wac-select-box-shadow;
-    padding: 10px;
-    &.hidden {
-      visibility: hidden;
-      opacity: 0;
-      & > * {
-        opacity: 0;
-        transition: 0s;
-      }
-    }
-    .ps {
-      max-height: 240px;
-    }
-    &.open,
-    &.open.hidden {
-      position: relative;
-      left: auto;
-      top: 0;
-      transform: translateX(-1px);
-      visibility: visible;
-      opacity: 1;
-      & > * {
-        opacity: 1;
-        transition: 0s;
-      }
-    }
-    &__item {
-      width: 100%;
-      font-size: rem(14);
-      line-height: rem(30);
-      cursor: pointer;
-      transition: 0.3s ease;
-      position: relative;
-      display: flex;
-      justify-content: flex-start;
-      align-content: center;
-      align-items: center;
-      color: $wac-second-color;
-      > div {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        align-content: center;
-      }
-      .icon {
-        width: 24px;
-        margin: 0 10px 0 0;
-        height: auto;
-        max-height: 24px;
-      }
-      &:not(:last-child) {
-        margin: 0 0 rem(10);
-      }
-      &:empty {
-        display: none;
-      }
-      &:first-child {
-        border-width: 1px 0 1px;
-      }
-      &:hover,
-      &:focus {
-        background-color: $wac-gray-background;
-        color: $wac-main-text;
-      }
-      > div {
-        padding: 0 10px;
-        &.selected {
-          background-color: $wac-gray-background;
-          color: $wac-main-text;
-        }
-      }
-    }
-    &__empty {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      span {
-        font-size: rem(16);
-        font-weight: 400;
-        text-align: center;
-        color: $wac-second-color;
-        display: inline-block;
-        line-height: rem(25);
-      }
-    }
-  }
-}
-.wac {
-  &-select-in-text {
-    width: auto;
+.wac-search {
+  width: 100%;
+  min-height: 50px;
+  border-radius: 3px;
+  background-color: $wac-white;
+  position: relative;
+  z-index: 2;
+  border: 1px solid $wac-border-light;
+  transition: 0.3s ease;
+  &.open {
+    border-color: $wac-wizishop-blue;
+  }
+  &__wrapper {
     position: relative;
     display: flex;
-    align-items: center;
-    padding: 20px 0;
-    &:hover,
-    &:focus {
-      z-index: 4;
+    justify-content: space-between;
+    align-items: stretch;
+    align-content: stretch;
+    flex-wrap: nowrap;
+    width: 100%;
+    min-height: 50px;
+    @include media('<tablet') {
+      padding: 0 12px;
     }
-    &__prepend,
-    &__after {
-      font-size: rem(14);
-      line-height: rem(16);
+    input {
+      background: transparent;
+      border: none;
       color: $wac-main-text;
-    }
-    &__prepend {
+      font-size: rem(14);
+      height: 50px;
+      line-height: 50px;
+      padding: 0 20px 0 48px;
+      font-weight: 400;
+      width: 100%;
+      @include media('<tablet') {
+        padding: 0 0 0 10px;
+      }
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &::-moz-placeholder {
+        /* Firefox 19+ */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:-ms-input-placeholder {
+        /* IE 10+ */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:-moz-placeholder {
+        /* Firefox 18- */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:focus {
+        & + button i {
+          color: $wac-main-text;
+        }
+        &::-webkit-input-placeholder {
+          /* Chrome/Opera/Safari */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &::-moz-placeholder {
+          /* Firefox 19+ */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &:-ms-input-placeholder {
+          /* IE 10+ */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &:-moz-placeholder {
+          /* Firefox 18- */
+          color: $wac-white;
+          opacity: 1;
+        }
+      }
+    }
+    button {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 3px;
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: none;
+      cursor: pointer;
+      background-color: $wac-white;
+      i {
+        font-size: rem(18);
+        color: $wac-color-icon-search-multiple-search;
+        transition: 0.3s ease;
+      }
+      &:hover {
+        i {
+          color: $wac-wizishop-blue !important;
+        }
+      }
+    }
+  }
+  &__absolute {
+    position: absolute;
+    top: 100%;
+    margin-top: rem(14);
+    left: -1px;
+    width: auto;
+    min-width: calc(100% - 38px);
+    max-width: calc(100% + 2px);
+    border: 1px solid $wac-border-light;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background-color: $wac-white;
+    max-height: 260px;
+    height: auto;
+    visibility: visible;
+    opacity: 1;
+    box-shadow: 3px 3px 20px $wac-select-box-shadow;
+    padding: 10px;
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+      & > * {
+        opacity: 0;
+        transition: 0s;
+      }
+    }
+    .ps {
+      max-height: 240px;
+    }
+    &.open,
+    &.open.hidden {
+      position: relative;
+      left: auto;
+      top: 0;
+      transform: translateX(-1px);
+      visibility: visible;
+      opacity: 1;
+      & > * {
+        opacity: 1;
+        transition: 0s;
+      }
+    }
+    &__item {
+      width: 100%;
+      font-size: rem(14);
+      line-height: rem(30);
+      cursor: pointer;
+      transition: 0.3s ease;
+      position: relative;
+      display: flex;
+      justify-content: flex-start;
+      align-content: center;
+      align-items: center;
+      color: $wac-second-color;
+      > div {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        align-content: center;
+      }
+      .icon {
+        width: 24px;
+        margin: 0 10px 0 0;
+        height: auto;
+        max-height: 24px;
+      }
+      &:not(:last-child) {
+        margin: 0 0 rem(10);
+      }
+      &:empty {
+        display: none;
+      }
+      &:first-child {
+        border-width: 1px 0 1px;
+      }
+      &:hover,
+      &:focus {
+        background-color: $wac-gray-background;
+        color: $wac-main-text;
+      }
+      > div {
+        padding: 0 10px;
+        &.selected {
+          background-color: $wac-gray-background;
+          color: $wac-main-text;
+        }
+      }
+    }
+    &__empty {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      span {
+        font-size: rem(16);
+        font-weight: 400;
+        text-align: center;
+        color: $wac-second-color;
+        display: inline-block;
+        line-height: rem(25);
+      }
+    }
+  }
+}
+.wac {
+  &-select-in-text {
+    width: auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+    &:hover,
+    &:focus {
+      z-index: 4;
+    }
+    &__prepend,
+    &__after {
+      font-size: rem(14);
+      line-height: rem(16);
+      color: $wac-main-text;
+    }
+    &__prepend {
       margin: 0 rem(4) 0 0;
     }
     &__after {
@@ -6821,236 +7006,236 @@ wac-optional-disable-container {
     }
   }
 }
-.selected-list {
-  width: 100%;
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    &__head {
-      width: 100%;
-      min-height: rem(60);
-      display: flex;
-      justify-content: space-between;
-      padding: 10px 20px;
-      background-color: $wac-gray-background;
-      margin: 0 0 10px;
-      > p {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
-      }
-
-      &__button {
-        height: rem(40);
-        width: fit-content;
-        margin-left: auto;
-
-        &__mobile {
-          @include media('>=1024px') {
-            display: none;
-          }
-        }
-
-        &__notMobile {
-          @include media('<1024px') {
-            display: none;
-          }
-        }
-
-      }
-
-    }
-    &__content {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      align-content: flex-start;
-      justify-content: flex-start;
-      &__item {
-        white-space: nowrap;
-        margin: 0 10px 10px 0;
-        border: 1px solid $wac-border-form;
-        border-radius: 2px;
-        color: $wac-second-color;
-        height: rem(40);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 20px;
-        transition: .3s ease;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
-        cursor: pointer;
-        &:hover, &:focus {
-          border: 1px solid $wac-main-text;
-        }
-        > i {
-          color: $wac-green-color;
-          max-width: 0;
-          display: block;
-          transition: .3s ease;
-          overflow: hidden;
-        }
-        &.active {
-          color: $wac-main-text;
-          > i {
-            max-width: unset;
-            margin: 0 0 0 10px;
-          }
-        }
-        &:first-child {
-          margin-left: 18px;
-        }
-      }
-    }
-  }
-}.wac-separator {
-  display: block;
-  width: 100%;
-  border-bottom: 1px solid $wac-border-color;
-  margin: 17px 0;
-
-  &.dashed {
-    border-bottom-style: dashed;
-  }
-}
-.wac-settings {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    background-color: $wac-gray-background;
-    transition: background-color 0.3s ease-in-out;
-
-    i {
-      color: $wac-second-color;
-      font-size: 15px;
-      line-height: 0;
-      transition: color 0.3s ease-in-out;
-    }
-
-    &:hover {
-      background-color: $wac-second-color;
-      transition: background-color 0.3s ease-in-out;
-
-      i {
-        color: $wac-white;
-        transition: color 0.3s ease-in-out;
-      }
-    }
-  }
-}
-.wac-snackbar {
-    .notification {
-      position: fixed;
-      bottom: 0;
-      width: 800px;
-      color: #fff;
-      font-size: 15px;
-      font-weight: 300;
-      margin: 0 auto;
-      left: 0;
-      right: 0;
-      z-index: 10;
-    }
-
-    .notification.is-transparent {
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    .notification button {
-      word-wrap: break-word;
-      word-break: break-all;
-      white-space: normal;
-      height: 100%;
-      margin-right: 1em;
-    }
-
-    .notification .column:nth-child(2) {
-      text-align: right;
-    }
-
-    .notification .column:nth-child(1) {
-      text-align: left;
-    }
-
-    .notification--message {
-      align-self: center;
-    }
-
-}
-.wac-state {
-  width: 12px;
-  height: 12px;
-  position: relative;
-
-  &:before,
-  &:after {
-    position: absolute;
-    content: '';
-    border-radius: 45px;
-  }
-
-  &:before {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  &:after {
-    width: 6px;
-    height: 6px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &.success {
-    &:before {
-      border-color: $wac-green-color;
-    }
-
-    &:after {
-      background-color: $wac-green-color;
-    }
-  }
-
-  &.warning {
-    &:before {
-      border-color: $wac-warning-color;
-    }
-
-    &:after {
-      background-color: $wac-warning-color;
-    }
-  }
-
-  &.error {
-    &:before {
-      border-color: $wac-primary-button;
-    }
-
-    &:after {
-      background-color: $wac-primary-button;
-    }
-  }
-}
+.selected-list {
+  width: 100%;
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    &__head {
+      width: 100%;
+      min-height: rem(60);
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 20px;
+      background-color: $wac-gray-background;
+      margin: 0 0 10px;
+      > p {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
+      }
+
+      &__button {
+        height: rem(40);
+        width: fit-content;
+        margin-left: auto;
+
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
+        }
+
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
+        }
+
+      }
+
+    }
+    &__content {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+      justify-content: flex-start;
+      &__item {
+        white-space: nowrap;
+        margin: 0 10px 10px 0;
+        border: 1px solid $wac-border-form;
+        border-radius: 2px;
+        color: $wac-second-color;
+        height: rem(40);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+        transition: .3s ease;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
+        cursor: pointer;
+        &:hover, &:focus {
+          border: 1px solid $wac-main-text;
+        }
+        > i {
+          color: $wac-green-color;
+          max-width: 0;
+          display: block;
+          transition: .3s ease;
+          overflow: hidden;
+        }
+        &.active {
+          color: $wac-main-text;
+          > i {
+            max-width: unset;
+            margin: 0 0 0 10px;
+          }
+        }
+        &:first-child {
+          margin-left: 18px;
+        }
+      }
+    }
+  }
+}.wac-separator {
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid $wac-border-color;
+  margin: 17px 0;
+
+  &.dashed {
+    border-bottom-style: dashed;
+  }
+}
+.wac-settings {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    background-color: $wac-gray-background;
+    transition: background-color 0.3s ease-in-out;
+
+    i {
+      color: $wac-second-color;
+      font-size: 15px;
+      line-height: 0;
+      transition: color 0.3s ease-in-out;
+    }
+
+    &:hover {
+      background-color: $wac-second-color;
+      transition: background-color 0.3s ease-in-out;
+
+      i {
+        color: $wac-white;
+        transition: color 0.3s ease-in-out;
+      }
+    }
+  }
+}
+.wac-snackbar {
+    .notification {
+      position: fixed;
+      bottom: 0;
+      width: 800px;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 300;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      z-index: 10;
+    }
+
+    .notification.is-transparent {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    .notification button {
+      word-wrap: break-word;
+      word-break: break-all;
+      white-space: normal;
+      height: 100%;
+      margin-right: 1em;
+    }
+
+    .notification .column:nth-child(2) {
+      text-align: right;
+    }
+
+    .notification .column:nth-child(1) {
+      text-align: left;
+    }
+
+    .notification--message {
+      align-self: center;
+    }
+
+}
+.wac-state {
+  width: 12px;
+  height: 12px;
+  position: relative;
+
+  &:before,
+  &:after {
+    position: absolute;
+    content: '';
+    border-radius: 45px;
+  }
+
+  &:before {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  &:after {
+    width: 6px;
+    height: 6px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.success {
+    &:before {
+      border-color: $wac-green-color;
+    }
+
+    &:after {
+      background-color: $wac-green-color;
+    }
+  }
+
+  &.warning {
+    &:before {
+      border-color: $wac-warning-color;
+    }
+
+    &:after {
+      background-color: $wac-warning-color;
+    }
+  }
+
+  &.error {
+    &:before {
+      border-color: $wac-primary-button;
+    }
+
+    &:after {
+      background-color: $wac-primary-button;
+    }
+  }
+}
 .wac-summary {
   p {
     font-size: rem(14);
@@ -7248,152 +7433,152 @@ wac-optional-disable-container {
     }
   }
 }
-.wac-table {
-  width: 100%;
-
-  &__head {
-    @include flexbox();
-    @include flex-flow(row nowrap);
-    width: 100%;
-    border-top: 1px solid $wac-border-form;
-    border-bottom: 1px solid $wac-border-form;
-    background-color: $wac-gray-background;
-
-    &__cell {
-      @include flexbox();
-      @include flex(1);
-      padding: 15px 20px;
-      font-size: 14px;
-      line-height: 20px;
-      color: $wac-main-text;
-      font-weight: 600;
-
-      &--checkbox {
-        @include flex(none);
-        @include align-items(center);
-        @include justify-content(center);
-      }
-
-      &__search {
-        color: $wac-main-text;
-        padding-right: 23px;
-        transition: background-image 0.3s ease-in-out;
-        cursor: text;
-
-        &:hover {
-          color: $wac-main-text;
-        }
-
-        &--idle {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort' viewBox='0 0 320 512' class='svg-inline--fa fa-sort fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-
-        &--up {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-up' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-up fa-w-10 fa-5x'%3E%3Cpath fill='currentColor' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-
-        &--down {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-      }
-
-      &--center--left {
-        @include align-items(center);
-        @include justify-content(flex-start);
-      }
-      &--center--center {
-        @include align-items(center);
-        @include justify-content(center);
-      }
-      &--center--right {
-        @include align-items(center);
-        @include justify-content(flex-end);
-      }
-    }
-  }
-
-  // TODO delete __search
-  &__search {
-    height: 100px;
-    margin-top: 10px;
-  }
-
-  &__body {
-    width: 100%;
-    margin-top: -10px;
-
-    &__loader {
-      position: relative;
-      min-height: 200px;
-    }
-
-    &__line {
-      @include flexbox();
-      @include flex-flow(row nowrap);
-      width: 100%;
-      border-bottom: 1px solid $wac-textarea-border-color;
-
-      &:first-child:last-child {
-        border-bottom: none;
-      }
-
-      &__cell {
-        @include flexbox();
-        @include flex(1);
-        padding: 20px 20px 20px 20px;
-        font-size: 14px;
-        line-height: 25px;
-        color: $wac-secondary-color;
-
-        &--checkbox {
-          @include flexbox();
-          @include flex(none);
-          @include justify-content(center);
-          @include align-items(center);
-          width: 80px;
-          padding: 8px 20px;
-        }
-
-        &--center--left {
-          @include align-items(center);
-          @include justify-content(flex-start);
-        }
-        &--center--center {
-          @include align-items(center);
-          @include justify-content(center);
-        }
-        &--center--right {
-          @include align-items(center);
-          @include justify-content(flex-end);
-        }
-      }
-    }
-  }
-}
+.wac-table {
+  width: 100%;
+
+  &__head {
+    @include flexbox();
+    @include flex-flow(row nowrap);
+    width: 100%;
+    border-top: 1px solid $wac-border-form;
+    border-bottom: 1px solid $wac-border-form;
+    background-color: $wac-gray-background;
+
+    &__cell {
+      @include flexbox();
+      @include flex(1);
+      padding: 15px 20px;
+      font-size: 14px;
+      line-height: 20px;
+      color: $wac-main-text;
+      font-weight: 600;
+
+      &--checkbox {
+        @include flex(none);
+        @include align-items(center);
+        @include justify-content(center);
+      }
+
+      &__search {
+        color: $wac-main-text;
+        padding-right: 23px;
+        transition: background-image 0.3s ease-in-out;
+        cursor: text;
+
+        &:hover {
+          color: $wac-main-text;
+        }
+
+        &--idle {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort' viewBox='0 0 320 512' class='svg-inline--fa fa-sort fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+
+        &--up {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-up' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-up fa-w-10 fa-5x'%3E%3Cpath fill='currentColor' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+
+        &--down {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+      }
+
+      &--center--left {
+        @include align-items(center);
+        @include justify-content(flex-start);
+      }
+      &--center--center {
+        @include align-items(center);
+        @include justify-content(center);
+      }
+      &--center--right {
+        @include align-items(center);
+        @include justify-content(flex-end);
+      }
+    }
+  }
+
+  // TODO delete __search
+  &__search {
+    height: 100px;
+    margin-top: 10px;
+  }
+
+  &__body {
+    width: 100%;
+    margin-top: -10px;
+
+    &__loader {
+      position: relative;
+      min-height: 200px;
+    }
+
+    &__line {
+      @include flexbox();
+      @include flex-flow(row nowrap);
+      width: 100%;
+      border-bottom: 1px solid $wac-textarea-border-color;
+
+      &:first-child:last-child {
+        border-bottom: none;
+      }
+
+      &__cell {
+        @include flexbox();
+        @include flex(1);
+        padding: 20px 20px 20px 20px;
+        font-size: 14px;
+        line-height: 25px;
+        color: $wac-secondary-color;
+
+        &--checkbox {
+          @include flexbox();
+          @include flex(none);
+          @include justify-content(center);
+          @include align-items(center);
+          width: 80px;
+          padding: 8px 20px;
+        }
+
+        &--center--left {
+          @include align-items(center);
+          @include justify-content(flex-start);
+        }
+        &--center--center {
+          @include align-items(center);
+          @include justify-content(center);
+        }
+        &--center--right {
+          @include align-items(center);
+          @include justify-content(flex-end);
+        }
+      }
+    }
+  }
+}
 .wac-tabs {
   position: relative;
 
@@ -7413,6 +7598,42 @@ wac-optional-disable-container {
     }
   }
 
+  &--column {
+    .wac-tabs__wrapper {
+      flex-direction: column;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: 1px;
+        height: 100%;
+        top: 0;
+        left: -15px;
+        background-color: $wac-border-form;
+      }
+
+      .wac-tabs__wrapper__tab {
+        &::after {
+          background-color: $wac-tab-colunm-blue;
+          height: 0;
+          width: 1px;
+          left: -15px;
+          top: 0;
+        }
+
+        &--selected {
+          color: $wac-tab-colunm-blue;
+          font-weight: 400;
+
+          &::after {
+            height: 100%;
+            transition: height 0.3s ease-in-out;
+          }
+        }
+      }
+    }
+  }
+
   wac-tab-body {
     width: 100%;
     max-width: 100%;
@@ -8283,130 +8504,130 @@ span.wac-tooltip {
     }
   }
 }
-.wac-upload {
-  width: auto;
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    button {
-      padding: 10.5px 20px;
-      border: none;
-      background-color: $wac-green-color;
-      border-radius: 3px;
-      color: $wac-white;
-      font-size: rem(14);
-      line-height: rem(16);
-      transition: 0.3s ease;
-      font-weight: 500;
-      cursor: pointer;
-      i {
-        font-size: rem(18);
-        margin: 0 rem(10) 0 0;
-      }
-      &:hover {
-        background-color: $wac-green-color-darken;
-      }
-      &:focus {
-        background-color: $wac-green-color-focus;
-      }
-    }
-  }
-  &.portrait {
-    .wac-upload {
-      &__wrapper {
-        min-width: rem(331);
-        border-radius: 3px;
-        border: 1px solid $wac-border-light;
-        padding: rem(30);
-        flex-direction: column;
-        justify-content: center;
-        &__visual {
-          > img {
-            display: block;
-            margin: 0 auto rem(10);
-            max-width: rem(40);
-          }
-          > strong {
-            display: block;
-            width: 100%;
-            text-align: center;
-            font-size: rem(14);
-            line-height: rem(16);
-            font-weight: 500;
-            margin: 0 0 rem(20);
-          }
-        }
-        > span {
-          font-size: rem(14);
-          line-height: rem(16);
-          margin: 0 0 rem(20);
-        }
-      }
-    }
-  }
-  &.landscape {
-    .wac-upload {
-      &__wrapper {
-        border-radius: 3px;
-        border: 1px solid $wac-border-light;
-        padding: rem(30);
-        flex-direction: row;
-        justify-content: center;
-        &__visual {
-          margin: 0 rem(20) 0 0;
-          > img {
-            display: block;
-            margin: 0 auto rem(10);
-            max-width: rem(40);
-          }
-          > strong {
-            display: block;
-            width: 100%;
-            text-align: center;
-            font-size: rem(14);
-            line-height: rem(16);
-            font-weight: 500;
-            margin: 0 0 rem(20);
-          }
-        }
-        > span {
-          font-size: rem(14);
-          line-height: rem(16);
-          margin: 0 rem(20) 0;
-        }
-      }
-    }
-  }
-}
-.wac-wrapper {
-  width: 100%;
-  &.max-width {
-    max-width: 1080px;
-    margin: 0 auto;
-  }
-}
-.wac-wrapper-blocs {
-  &.sidebar {
-    width: calc(100% + 30px);
-    transform: translateX(-15px);
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    align-content: flex-start;
-    & > :first-child {
-      @include media('>=desktop') {
-        width: 100%;
-      }
-    }
-    & > :last-child:not(:first-child) {
-      min-width: 340px;
-    }
-    & > * {
-      margin: 0 15px;
-    }
-  }
-}
+.wac-upload {
+  width: auto;
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    button {
+      padding: 10.5px 20px;
+      border: none;
+      background-color: $wac-green-color;
+      border-radius: 3px;
+      color: $wac-white;
+      font-size: rem(14);
+      line-height: rem(16);
+      transition: 0.3s ease;
+      font-weight: 500;
+      cursor: pointer;
+      i {
+        font-size: rem(18);
+        margin: 0 rem(10) 0 0;
+      }
+      &:hover {
+        background-color: $wac-green-color-darken;
+      }
+      &:focus {
+        background-color: $wac-green-color-focus;
+      }
+    }
+  }
+  &.portrait {
+    .wac-upload {
+      &__wrapper {
+        min-width: rem(331);
+        border-radius: 3px;
+        border: 1px solid $wac-border-light;
+        padding: rem(30);
+        flex-direction: column;
+        justify-content: center;
+        &__visual {
+          > img {
+            display: block;
+            margin: 0 auto rem(10);
+            max-width: rem(40);
+          }
+          > strong {
+            display: block;
+            width: 100%;
+            text-align: center;
+            font-size: rem(14);
+            line-height: rem(16);
+            font-weight: 500;
+            margin: 0 0 rem(20);
+          }
+        }
+        > span {
+          font-size: rem(14);
+          line-height: rem(16);
+          margin: 0 0 rem(20);
+        }
+      }
+    }
+  }
+  &.landscape {
+    .wac-upload {
+      &__wrapper {
+        border-radius: 3px;
+        border: 1px solid $wac-border-light;
+        padding: rem(30);
+        flex-direction: row;
+        justify-content: center;
+        &__visual {
+          margin: 0 rem(20) 0 0;
+          > img {
+            display: block;
+            margin: 0 auto rem(10);
+            max-width: rem(40);
+          }
+          > strong {
+            display: block;
+            width: 100%;
+            text-align: center;
+            font-size: rem(14);
+            line-height: rem(16);
+            font-weight: 500;
+            margin: 0 0 rem(20);
+          }
+        }
+        > span {
+          font-size: rem(14);
+          line-height: rem(16);
+          margin: 0 rem(20) 0;
+        }
+      }
+    }
+  }
+}
+.wac-wrapper {
+  width: 100%;
+  &.max-width {
+    max-width: 1080px;
+    margin: 0 auto;
+  }
+}
+.wac-wrapper-blocs {
+  &.sidebar {
+    width: calc(100% + 30px);
+    transform: translateX(-15px);
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    align-content: flex-start;
+    & > :first-child {
+      @include media('>=desktop') {
+        width: 100%;
+      }
+    }
+    & > :last-child:not(:first-child) {
+      min-width: 340px;
+    }
+    & > * {
+      margin: 0 15px;
+    }
+  }
+}
 .wac-wrapper-multiple-block {
   width: 100%;
   display: flex;
@@ -8622,29 +8843,29 @@ h1.wac-h1 {
     font-weight: normal;
   }
 }
-h2.wac-h2 {
-  font-size: rem(18);
-  line-height: rem(21);
-  font-weight: 500;
-  color: $wac-main-text;
-}h3.wac-h3 {
-  font-size: rem(16);
-  line-height: rem(19);
-  font-weight: 500;
-  color: $wac-main-text;
-  &.grey {
-    color: $wac-second-color;
-  }
-}
-h4.wac-h4 {
-  font-size: rem(14);
-  line-height: rem(16);
-  font-weight: 500;
-  color: $wac-main-text;
-  &.grey {
-    color: $wac-second-color;
-  }
-}
+h2.wac-h2 {
+  font-size: rem(18);
+  line-height: rem(21);
+  font-weight: 500;
+  color: $wac-main-text;
+}h3.wac-h3 {
+  font-size: rem(16);
+  line-height: rem(19);
+  font-weight: 500;
+  color: $wac-main-text;
+  &.grey {
+    color: $wac-second-color;
+  }
+}
+h4.wac-h4 {
+  font-size: rem(14);
+  line-height: rem(16);
+  font-weight: 500;
+  color: $wac-main-text;
+  &.grey {
+    color: $wac-second-color;
+  }
+}
 .wac-input {
   ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */