@wizishop/wizi-block 4.2.22-beta → 4.2.23-beta

package/wizi-block.scss

@@ -49,6 +49,7 @@ $wb-cancel-background: #e43232 !default;
 $wb-color-border: #dee2ed !default;
 $wb-second-color: #526384 !default;
 $wb-wizishop-blue-light: #52aecd26 !default;
+$wb-wizishop-blue: #4baed0 !default;
 $transition-base-time: 200ms !default;
 .wb-structure-config-payment {
   padding: 0;
@@ -805,11 +806,23 @@ $transition-base-time: 200ms !default;
         align-items: center;
         justify-content: center;
 
+        @include media('<1100px') {
+            height: 100%;
+            overflow-y: scroll;
+            align-items: flex-start;
+        }
+
         > div:last-child {
             display: flex;
             padding-top: 30px;
             align-items: flex-start;
             justify-content: center;
+            @include media('<1100px') {
+                flex-direction: column !important;
+                > * {
+                    margin: 0 0 10px !important;
+                }
+            }
         }
 
         input {
@@ -905,6 +918,7 @@ $transition-base-time: 200ms !default;
     }
 
     &__picker {
+        width: 100%;
         max-height: 0;
         overflow: hidden;
         @include simple_transition();
@@ -1019,6 +1033,11 @@ input[type='number'] {
 }
 
 .control {
+    &--flexStart {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
     &--flex {
         display: flex;
         align-items: center;
@@ -1106,12 +1125,13 @@ input[type='number'] {
 }
 
 .color-wrapper {
-    width: 132px;
+    width: auto;
+    min-width: 132px;
     padding: 5px 20px 5px 5px;
     border-radius: 3px;
     border: 1px solid $wb-border-color;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     > div {
         width: 30px;
@@ -1290,6 +1310,10 @@ wb-structure-config-extended-input {
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2352AECD' d='M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z'/%3E%3C/svg%3E");
     background-size: auto 100%;
 }
+
+wb-structure-tools {
+    z-index: 2;
+}
 .wb-map-fullpage {
   position: relative;
 
@@ -2199,6 +2223,10 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
             margin-right: 0 !important;
         }
 
+        &__loader {
+            max-height: 100px;
+        }
+
         .ce {
             &-block {
                 &__content {
@@ -2613,32 +2641,34 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 }
                             }
 
-                            &.size-small {
-                                span {
-                                    display: none;
+                            &.we-size {
+                                &-small {
+                                    span {
+                                        display: none;
 
-                                    &:first-of-type {
-                                        display: initial;
+                                        &:first-of-type {
+                                            display: initial;
+                                        }
                                     }
                                 }
-                            }
 
-                            &.size-large {
-                                span {
-                                    display: none;
+                                &-large {
+                                    span {
+                                        display: none;
 
-                                    &:nth-of-type(3) {
-                                        display: initial;
+                                        &:nth-of-type(3) {
+                                            display: initial;
+                                        }
                                     }
                                 }
-                            }
 
-                            &.size-huge {
-                                span {
-                                    display: none;
+                                &-huge {
+                                    span {
+                                        display: none;
 
-                                    &:nth-of-type(4) {
-                                        display: initial;
+                                        &:nth-of-type(4) {
+                                            display: initial;
+                                        }
                                     }
                                 }
                             }
@@ -2923,11 +2953,13 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 transition: border-color 0.3s ease-in-out;
 
                                 &:hover {
+                                    border-width: 2px;
                                     border-color: #bbbbbb;
                                     transition: border-color 0.3s ease-in-out;
                                 }
 
                                 &--active {
+                                    border-width: 2px;
                                     border-color: $wizishop-blue;
                                     transition: border-color 0.3s ease-in-out;
                                 }
@@ -3286,7 +3318,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                             }
                         }
 
-                        button {
+                        &__add {
                             border: none;
                             border-radius: 3px;
                             color: white;
@@ -3301,6 +3333,10 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                                 background-color: $wizishop-blue-hover;
                                 transition: background-color 0.3s ease-in-out;
                             }
+
+                            &.hidden {
+                                display: none;
+                            }
                         }
 
                         &.hidden {
@@ -3309,11 +3345,39 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                             pointer-events: none;
                             transition: opacity 0.3s ease-in-out, z-index 0s linear 0.3s;
                         }
+
+                        &__delete {
+                            height: 39px;
+                            width: 39px;
+                            border: none;
+                            border-radius: 3px;
+                            cursor: pointer;
+                            background: $wb-cancel-background
+                                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0h120.4c12.1 0 23.2 6.848 28.6 17.69L320 32h96c17.7 0 32 14.33 32 32s-14.3 32-32 32H32C14.33 96 0 81.67 0 64s14.33-32 32-32h96l7.2-14.31zM31.1 128H416v320c0 35.3-28.7 64-64 64H95.1c-34.45 0-64-28.7-64-64V128zm80 80v224c0 8.8 8.1 16 16 16 9.7 0 16-7.2 16-16V208c0-8.8-6.3-16-16-16-7.9 0-16 7.2-16 16zm96 0v224c0 8.8 8.1 16 16 16 9.7 0 16.9-7.2 16.9-16V208c0-8.8-7.2-16-16.9-16-7.9 0-16 7.2-16 16zm96.9 0v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16s-16 7.2-16 16z'/%3E%3C/svg%3E")
+                                center center / 15px 15px no-repeat;
+                            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+
+                            &:hover {
+                                background-color: darken($wb-cancel-background, 8%);
+                                transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+                            }
+
+                            &.hidden {
+                                display: none;
+                            }
+                        }
                     }
                 }
             }
         }
     }
+
+    &--top {
+        .ce-inline-toolbar {
+            top: unset !important;
+            bottom: 100%;
+        }
+    }
 }
 
 .codeEdit {
@@ -3403,98 +3467,101 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
     }
 }
 .wb-product-zoom {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
-
-  .ql-editor {
-    padding: rem(5) 0;
-    margin-bottom: 30px;
-  }
-
-  &__selected {
-    padding: rem(30);
+    //minimum search sized for product - no less needed
+    min-height: rem(380);
 
-    img {
-      display: block;
-      padding-right: rem(20);
-      margin-bottom: rem(30);
+    .ql-editor {
+        padding: rem(5) 0;
+        margin-bottom: 30px;
     }
 
-    .columns {
-      .column:last-child {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(30);
-          font-weight: 600;
-          line-height: 30px;
-          margin-bottom: 30px;
+    &__selected {
+        padding: rem(30);
+
+        img {
+            display: block;
+            padding-right: rem(20);
+            margin-bottom: rem(30);
         }
 
-        > p {
-          margin: rem(30) 0;
-          font-weight: 600;
+        .columns {
+            .column:last-child {
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(30);
+                    font-weight: 600;
+                    line-height: 30px;
+                    margin-bottom: 30px;
+                }
 
-          &.is-variant {
-            margin: 0;
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
+                > p {
+                    margin: rem(30) 0;
+                    font-weight: 600;
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
-            }
-          }
-        }
+                    &.is-variant {
+                        margin: 0;
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
 
-        > a {
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          display: inline-block;
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
+
+                > a {
+                    text-transform: uppercase;
+                    color: $wb-white;
+                    font-weight: 600;
+                    padding: rem(15) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    display: inline-block;
+                }
+            }
         }
-      }
     }
-  }
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
+    }
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
-    wb-structure-search-product {
-      width: 100%;
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
 }
 .wb-loader {
   height: rem(76);
@@ -3549,123 +3616,126 @@ wb-loader {
   }
 }
 .wb-product-zoom-complete {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
+    //minimum search sized for product - no less needed
+    min-height: rem(380);
 
-  &__stock {
-    width: 100%;
-    background-color: $wb-stock-background;
-    color: $wb-stock-text;
-    font-weight: 600;
-    text-align: center;
-    border-radius: rem(3);
-    padding: rem(5);
-    margin-top: rem(5);
+    &__stock {
+        width: 100%;
+        background-color: $wb-stock-background;
+        color: $wb-stock-text;
+        font-weight: 600;
+        text-align: center;
+        border-radius: rem(3);
+        padding: rem(5);
+        margin-top: rem(5);
 
-    > div {
-      vertical-align: middle;
+        > div {
+            vertical-align: middle;
 
-      span {
-        margin-left: rem(10);
-      }
+            span {
+                margin-left: rem(10);
+            }
+        }
     }
-  }
-
-  .ql-editor {
-    padding: rem(5) 0;
-  }
-
-  &__selected {
-    padding: rem(30);
-    position: relative;
-    z-index: 34;
 
-    img {
-      display: block;
-      padding-right: rem(20);
-      margin-bottom: rem(30);
+    .ql-editor {
+        padding: rem(5) 0;
     }
 
-    .columns {
-      .column:last-child {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(45);
-          font-weight: 600;
-          line-height: rem(45);
-          margin-bottom: 30px;
-        }
-
-        > p {
-          margin: rem(30) 0;
-          font-weight: 500;
-          font-size: rem(35);
-
-          &.is-variant {
-            margin: 0 0 rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
-            font-size: rem(16);
-
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
-            }
-          }
-        }
+    &__selected {
+        padding: rem(30);
+        position: relative;
+        z-index: 34;
 
-        > a {
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          display: inline-block;
-          width: 100%;
-          text-align: center;
-          margin-bottom: rem(20);
+        img {
+            display: block;
+            padding-right: rem(20);
+            margin-bottom: rem(30);
         }
-      }
-    }
-  }
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+        .columns {
+            .column:last-child {
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(45);
+                    font-weight: 600;
+                    line-height: rem(45);
+                    margin-bottom: 30px;
+                }
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+                > p {
+                    margin: rem(30) 0;
+                    font-weight: 500;
+                    font-size: rem(35);
 
-    wb-structure-search-product {
-      width: 100%;
+                    &.is-variant {
+                        margin: 0 0 rem(30);
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
+                        font-size: rem(16);
+
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
+
+                > a {
+                    text-transform: uppercase;
+                    color: $wb-white;
+                    font-weight: 600;
+                    padding: rem(15) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    display: inline-block;
+                    width: 100%;
+                    text-align: center;
+                    margin-bottom: rem(20);
+                }
+            }
+        }
+    }
+
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
+    }
+
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
+
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
 }
 .wb-small-loader {
   display: block;
@@ -3724,274 +3794,279 @@ wb-loader {
   }
 }
 .wb-product-zoom-complete-background {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
-
-  &__stock {
+    //minimum search sized for product - no less needed
+    min-height: rem(380);
+    position: relative;
     width: 100%;
-    background-color: $wb-stock-background;
-    color: $wb-stock-text;
-    font-weight: 600;
-    text-align: center;
-    border-radius: rem(3);
-    padding: rem(5);
-    margin-top: rem(5);
-
-    > div {
-      vertical-align: middle;
 
-      span {
-        margin-left: rem(10);
-      }
-    }
-  }
+    &__stock {
+        width: 100%;
+        background-color: $wb-stock-background;
+        color: $wb-stock-text;
+        font-weight: 600;
+        text-align: center;
+        border-radius: rem(3);
+        padding: rem(5);
+        margin-top: rem(5);
 
-  .ql-editor {
-    padding: rem(5) 0;
-  }
+        > div {
+            vertical-align: middle;
 
-  &__upper {
-    z-index: 2;
-    position: relative;
-  }
+            span {
+                margin-left: rem(10);
+            }
+        }
+    }
 
-  &__selected {
-    padding: rem(30);
-    background-size: cover;
-    position: relative;
-    z-index: 34;
+    .ql-editor {
+        padding: rem(5) 0;
+    }
 
-    img {
-      display: block;
-      padding-right: rem(20);
-      margin-bottom: rem(30);
+    &__upper {
+        z-index: 2;
+        position: relative;
     }
 
-    .columns {
-      width: 70%;
-      margin: 0 auto;
+    &__selected {
+        padding: rem(30);
+        background-size: cover;
+        position: relative;
+        z-index: 34;
 
-      .column:last-child {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(45);
-          font-weight: 600;
-          line-height: rem(45);
-          margin-bottom: 30px;
-          text-align: center;
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
+        img {
+            display: block;
+            padding-right: rem(20);
+            margin-bottom: rem(30);
         }
 
-        > p {
-          margin: rem(30) 0;
-          font-weight: 500;
-          font-size: rem(35);
-          text-align: center;
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
+        .columns {
+            width: 70%;
+            margin: 0 auto;
 
-          &.is-variant {
-            width: 40%;
-            margin: 0 auto rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
-            font-size: rem(16);
+            .column:last-child {
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(45);
+                    font-weight: 600;
+                    line-height: rem(45);
+                    margin-bottom: 30px;
+                    text-align: center;
+                    pointer-events: none;
+                    z-index: 0;
+                    position: relative;
+                }
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
-            }
-          }
-        }
+                > p {
+                    margin: rem(30) 0;
+                    font-weight: 500;
+                    font-size: rem(35);
+                    text-align: center;
+                    pointer-events: none;
+                    z-index: 0;
+                    position: relative;
 
-        > a {
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          display: block;
-          width: rem(260);
-          text-align: center;
-          margin: auto;
-          margin-bottom: rem(20);
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
-        }
-      }
-    }
-  }
+                    &.is-variant {
+                        width: 40%;
+                        margin: 0 auto rem(30);
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
+                        font-size: rem(16);
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+                > a {
+                    text-transform: uppercase;
+                    color: $wb-white;
+                    font-weight: 600;
+                    padding: rem(15) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    display: block;
+                    width: rem(260);
+                    text-align: center;
+                    margin: auto;
+                    margin-bottom: rem(20);
+                    pointer-events: none;
+                    z-index: 0;
+                    position: relative;
+                }
+            }
+        }
+    }
 
-    wb-structure-search-product {
-      width: 100%;
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
     }
-  }
 
-  &__media {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    left: 0;
-    top: 0;
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
-    &:after {
-      content: '\f03e';
-      font-family: 'Font Awesome 5 Pro';
-      display: block;
-      @include simple_transition();
-      position: absolute;
-      z-index: 38;
-      font-size: rem(70);
-      top: -#{rem(50)};
-      opacity: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      width: rem(70);
-      height: rem(90);
-      color: $wb-white;
-      pointer-events: none;
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
 
-    &:hover {
-      &:after {
-        top: -#{rem(25)};
-        opacity: 0.3;
-      }
-    }
-  }
+    &__media {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        left: 0;
+        top: 0;
 
-  &__noimages {
-    background-color: lighten($wb-border-color, 12%);
-    cursor: pointer;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    position: absolute;
-    width: 100%;
-    top: 0;
+        &:after {
+            content: '\f03e';
+            font-family: 'Font Awesome 5 Pro';
+            display: block;
+            @include simple_transition();
+            position: absolute;
+            z-index: 38;
+            font-size: rem(70);
+            top: -#{rem(50)};
+            opacity: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            width: rem(70);
+            height: rem(90);
+            color: $wb-white;
+            pointer-events: none;
+        }
 
-    &:before {
-      content: '';
-      display: block;
-      width: 100%;
-      position: relative;
-      padding-top: 31%;
-      transition: padding 300ms ease;
+        &:hover {
+            &:after {
+                top: -#{rem(25)};
+                opacity: 0.3;
+            }
+        }
     }
 
-    &--small {
-      &:before {
-        padding-top: 27.5%;
-      }
-    }
+    &__noimages {
+        background-color: lighten($wb-border-color, 12%);
+        cursor: pointer;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+        top: 0;
 
-    &--medium {
-      &:before {
-        padding-top: 33%;
-      }
-    }
+        &:before {
+            content: '';
+            display: block;
+            width: 100%;
+            position: relative;
+            padding-top: 31%;
+            transition: padding 300ms ease;
+        }
 
-    &--large {
-      &:before {
-        padding-top: 38.47%;
-      }
-    }
+        &--small {
+            &:before {
+                padding-top: 27.5%;
+            }
+        }
 
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      font-size: rem(14);
-      color: $wb-secondary-text-color;
-      width: auto;
-      white-space: nowrap;
+        &--medium {
+            &:before {
+                padding-top: 33%;
+            }
+        }
 
-      &:before {
-        position: absolute;
-        width: 0;
-        bottom: -(#{rem(3)});
-        height: rem(2);
-        transition: 200ms all;
-        background-color: $wb-border-color;
-        content: ' ';
-        left: 0;
-      }
-    }
+        &--large {
+            &:before {
+                padding-top: 38.47%;
+            }
+        }
 
-    i {
-      color: $wb-secondary-text-color;
-      text-align: center;
-      display: block;
-      font-size: rem(45);
-      opacity: 0.4;
-      transition: 200ms all;
-      margin-bottom: rem(10);
-    }
+        p {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            font-size: rem(14);
+            color: $wb-secondary-text-color;
+            width: auto;
+            white-space: nowrap;
 
-    border: rem(1) solid lighten($wb-border-color, 12%);
-    transition: 200ms all;
+            &:before {
+                position: absolute;
+                width: 0;
+                bottom: -(#{rem(3)});
+                height: rem(2);
+                transition: 200ms all;
+                background-color: $wb-border-color;
+                content: ' ';
+                left: 0;
+            }
+        }
 
-    &:hover {
-      border: rem(1) solid $wb-border-color;
+        i {
+            color: $wb-secondary-text-color;
+            text-align: center;
+            display: block;
+            font-size: rem(45);
+            opacity: 0.4;
+            transition: 200ms all;
+            margin-bottom: rem(10);
+        }
 
-      i {
-        color: darken($wb-secondary-text-color, 20%);
-      }
+        border: rem(1) solid lighten($wb-border-color, 12%);
+        transition: 200ms all;
 
-      p {
-        color: darken($wb-secondary-text-color, 20%);
+        &:hover {
+            border: rem(1) solid $wb-border-color;
 
-        &:before {
-          width: 100%;
+            i {
+                color: darken($wb-secondary-text-color, 20%);
+            }
+
+            p {
+                color: darken($wb-secondary-text-color, 20%);
+
+                &:before {
+                    width: 100%;
+                }
+            }
         }
-      }
     }
-  }
 }
 .wb-structure-amplify-search-category {
     .columns {
@@ -4144,191 +4219,194 @@ wb-loader {
     }
 }
 .wb-product-zoom-complete-slider {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
+    //minimum search sized for product - no less needed
+    min-height: rem(380);
 
-  &__stock {
-    width: 100%;
-    background-color: $wb-stock-background;
-    color: $wb-stock-text;
-    font-weight: 600;
-    text-align: center;
-    border-radius: rem(3);
-    padding: rem(5);
-    margin-top: rem(5);
+    &__stock {
+        width: 100%;
+        background-color: $wb-stock-background;
+        color: $wb-stock-text;
+        font-weight: 600;
+        text-align: center;
+        border-radius: rem(3);
+        padding: rem(5);
+        margin-top: rem(5);
 
-    > div {
-      vertical-align: middle;
+        > div {
+            vertical-align: middle;
 
-      span {
-        margin-left: rem(10);
-      }
+            span {
+                margin-left: rem(10);
+            }
+        }
     }
-  }
 
-  .ql-editor {
-    padding: rem(5) 0;
-  }
+    .ql-editor {
+        padding: rem(5) 0;
+    }
 
-  &__selected {
-    padding: rem(30);
-    position: relative;
-    z-index: 34;
+    &__selected {
+        padding: rem(30);
+        position: relative;
+        z-index: 34;
 
-    &__container-image {
-      text-align: center;
-      position: relative;
+        &__container-image {
+            text-align: center;
+            position: relative;
 
-      img {
-        margin-bottom: rem(30);
-        width: rem(500);
-        position: relative;
-        z-index: 1;
-        opacity: 0;
-        left: -#{rem(50)};
-        @include simple_transition();
+            img {
+                margin-bottom: rem(30);
+                width: rem(500);
+                position: relative;
+                z-index: 1;
+                opacity: 0;
+                left: -#{rem(50)};
+                @include simple_transition();
 
-        &.is-active {
-          z-index: 2;
-          opacity: 1;
-          left: 0;
+                &.is-active {
+                    z-index: 2;
+                    opacity: 1;
+                    left: 0;
+                }
+
+                &:not(:first-child) {
+                    position: absolute;
+                    right: 0;
+                    margin: auto;
+                }
+            }
         }
 
-        &:not(:first-child) {
-          position: absolute;
-          right: 0;
-          margin: auto;
-        }
-      }
-    }
+        &__container-selector {
+            position: absolute;
+            text-align: center;
+            z-index: 10;
+            left: 0;
+            right: 0;
+            margin: auto;
 
-    &__container-selector {
-      position: absolute;
-      text-align: center;
-      z-index: 10;
-      left: 0;
-      right: 0;
-      margin: auto;
+            bottom: 50px;
 
-      bottom: 50px;
+            span {
+                width: rem(15);
+                height: rem(15);
+                background-color: $wb-border-color;
+                opacity: 0.8;
+                display: inline-block;
+                border-radius: 50%;
+                cursor: pointer;
+                margin-right: rem(7);
+                @include simple_transition();
 
-      span {
-        width: rem(15);
-        height: rem(15);
-        background-color: $wb-border-color;
-        opacity: 0.8;
-        display: inline-block;
-        border-radius: 50%;
-        cursor: pointer;
-        margin-right: rem(7);
-        @include simple_transition();
+                &:last-child {
+                    margin-right: 0;
+                }
 
-        &:last-child {
-          margin-right: 0;
+                &.is-active,
+                &:hover {
+                    opacity: 0.8;
+                    background-color: $wb-button-color;
+                }
+            }
         }
 
-        &.is-active,
-        &:hover {
-          opacity: 0.8;
-          background-color: $wb-button-color;
-        }
-      }
-    }
+        .columns {
+            > .column:first-child {
+                margin-right: 20px;
 
-    .columns {
-      > .column:first-child {
-        margin-right: 20px;
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(45);
+                    font-weight: 600;
+                    line-height: rem(45);
+                    margin-bottom: 30px;
+                }
 
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(45);
-          font-weight: 600;
-          line-height: rem(45);
-          margin-bottom: 30px;
-        }
+                > p {
+                    margin: rem(30) 0;
+                    font-weight: 500;
+                    font-size: rem(35);
 
-        > p {
-          margin: rem(30) 0;
-          font-weight: 500;
-          font-size: rem(35);
+                    &.is-variant {
+                        margin: 0 0 rem(30);
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
+                        font-size: rem(16);
 
-          &.is-variant {
-            margin: 0 0 rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
-            font-size: rem(16);
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
+                > a {
+                    display: flex;
+                    text-transform: uppercase;
+                    color: $wb-white;
+                    font-weight: 600;
+                    padding: rem(15) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    width: 100%;
+                    margin-bottom: rem(20);
+                    text-align: center;
+                    justify-content: center;
+                    i {
+                        margin-right: 20px;
+                        transform: translateY(2px);
+                    }
+                }
             }
-          }
-        }
-
-        > a {
-          display: flex;
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          width: 100%;
-          margin-bottom: rem(20);
-          text-align: center;
-          justify-content: center;
-          i {
-            margin-right: 20px;
-            transform: translateY(2px);
-          }
         }
-      }
     }
-  }
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
+    }
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
-    wb-structure-search-product {
-      width: 100%;
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
 
-  .is-bottom-content {
-    margin-top: 10px;
-    strong {
-      font-size: rem(20);
+    .is-bottom-content {
+        margin-top: 10px;
+        strong {
+            font-size: rem(20);
+        }
     }
-  }
 }
 .wb-container {
     .ql-container.ql-bubble:not(.ql-disabled) a::after,
@@ -4835,147 +4913,151 @@ html .ql-bubble {
 
 wb-editorjs {
     display: block;
+    width: 100%;
 }
 .wb-product-zoom-more {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
-
-  .ql-editor {
-    padding: rem(5) 0;
-  }
-
-  &__selected {
-    padding: rem(30);
-    position: relative;
-    z-index: 34;
-
-    &__container-selector {
-      position: absolute;
-      text-align: center;
-      z-index: 10;
-      left: 0;
-      right: 0;
-      margin: auto;
-
-      bottom: 50px;
-
-      span {
-        width: rem(15);
-        height: rem(15);
-        background-color: $wb-border-color;
-        opacity: 0.8;
-        display: inline-block;
-        border-radius: 50%;
-        cursor: pointer;
-        margin-right: rem(7);
-        @include simple_transition();
-
-        &:last-child {
-          margin-right: 0;
-        }
+    //minimum search sized for product - no less needed
+    min-height: rem(380);
 
-        &.is-active,
-        &:hover {
-          opacity: 0.8;
-          background-color: $wb-button-color;
-        }
-      }
+    .ql-editor {
+        padding: rem(5) 0;
     }
-    &__container-image {
-      position: relative;
 
-      img {
-        margin-bottom: rem(30);
-        width: 100%;
+    &__selected {
+        padding: rem(30);
         position: relative;
-        z-index: 1;
-        opacity: 1;
-        left: 0;
-        @include simple_transition();
-        margin-right: rem(30);
+        z-index: 34;
 
-        &:last-child {
-          margin-right: rem(0);
-        }
-      }
-    }
+        &__container-selector {
+            position: absolute;
+            text-align: center;
+            z-index: 10;
+            left: 0;
+            right: 0;
+            margin: auto;
 
-    &__container-other {
-      .column {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(30);
-          font-weight: 600;
-          line-height: 30px;
-          margin-bottom: 25px;
-        }
+            bottom: 50px;
 
-        > p {
-          margin: rem(10) 0 rem(30);
-          font-weight: 600;
+            span {
+                width: rem(15);
+                height: rem(15);
+                background-color: $wb-border-color;
+                opacity: 0.8;
+                display: inline-block;
+                border-radius: 50%;
+                cursor: pointer;
+                margin-right: rem(7);
+                @include simple_transition();
 
-          &.is-variant {
-            margin: 0 0 rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
+                &:last-child {
+                    margin-right: 0;
+                }
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
+                &.is-active,
+                &:hover {
+                    opacity: 0.8;
+                    background-color: $wb-button-color;
+                }
             }
-          }
-        }
-
-        > a {
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          display: inline-block;
-          float: right;
         }
-      }
-    }
-  }
+        &__container-image {
+            position: relative;
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+            img {
+                margin-bottom: rem(30);
+                width: 100%;
+                position: relative;
+                z-index: 1;
+                opacity: 1;
+                left: 0;
+                @include simple_transition();
+                margin-right: rem(30);
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+                &:last-child {
+                    margin-right: rem(0);
+                }
+            }
+        }
 
-    wb-structure-search-product {
-      width: 100%;
+        &__container-other {
+            .column {
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(30);
+                    font-weight: 600;
+                    line-height: 30px;
+                    margin-bottom: 25px;
+                }
+
+                > p {
+                    margin: rem(10) 0 rem(30);
+                    font-weight: 600;
+
+                    &.is-variant {
+                        margin: 0 0 rem(30);
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
+
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
+
+                > a {
+                    text-transform: uppercase;
+                    color: $wb-white;
+                    font-weight: 600;
+                    padding: rem(15) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    display: inline-block;
+                    float: right;
+                }
+            }
+        }
+    }
+
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
+    }
+
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
+
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
 }
 .ce-paragraph {
     font-size: 14px;
@@ -4986,6 +5068,10 @@ wb-editorjs {
         min-height: 20px;
     }
 
+    & > span {
+        margin: 10px 0;
+    }
+
     h1 {
         font-size: 40px;
         font-weight: 600;
@@ -5325,13 +5411,11 @@ wb-editorjs {
     }
 
     p {
+        font-size: 14px;
+        line-height: 21px;
         color: inherit;
         margin: 12px 0;
 
-        &:empty {
-            min-height: 22.39px;
-        }
-
         &:first-of-type,
         &:last-of-type {
             margin: 12px 0 !important;
@@ -5353,6 +5437,26 @@ wb-editorjs {
         }
     }
 
+    li {
+        font-size: 14px;
+        line-height: 21px;
+
+        .we-size-small {
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .we-size-large {
+            font-size: 19px;
+            line-height: 29px;
+        }
+
+        .we-size-huge {
+            font-size: 28px;
+            line-height: 42px;
+        }
+    }
+
     span,
     li {
         color: inherit;
@@ -5610,9 +5714,12 @@ wb-editorjs {
         align-content: center;
         align-items: center;
         width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
         wb-structure-search-product {
             width: 100%;
+            display: flex;
+            justify-content: center;
         }
     }
 }
@@ -5624,6 +5731,7 @@ wb-editorjs {
         padding: rem(60) rem(12) rem(12);
         border-radius: 3px;
         position: relative;
+        z-index: 1;
     }
 
     .wb-structure-tools {
@@ -5688,140 +5796,143 @@ wb-editorjs {
     }
 }
 .wb-product-zoom-simple {
-  //minimum search sized for product - no less needed
-  min-height: rem(230);
+    //minimum search sized for product - no less needed
+    min-height: rem(230);
 
-  &__stock {
-    width: 100%;
-    background-color: $wb-stock-background;
-    color: $wb-stock-text;
-    font-weight: 600;
-    text-align: center;
-    border-radius: rem(3);
-    padding: rem(5);
-    margin-top: rem(5);
+    &__stock {
+        width: 100%;
+        background-color: $wb-stock-background;
+        color: $wb-stock-text;
+        font-weight: 600;
+        text-align: center;
+        border-radius: rem(3);
+        padding: rem(5);
+        margin-top: rem(5);
 
-    > div {
-      vertical-align: middle;
+        > div {
+            vertical-align: middle;
 
-      span {
-        margin-left: rem(10);
-      }
+            span {
+                margin-left: rem(10);
+            }
+        }
     }
-  }
-
-  .ql-editor {
-    padding: rem(5) 0;
-  }
-
-  &__selected {
-    padding: rem(30);
-    position: relative;
-    z-index: 34;
 
-    img {
-      display: block;
-      padding-right: rem(20);
-      margin-bottom: rem(30);
+    .ql-editor {
+        padding: rem(5) 0;
     }
 
-    .columns {
-      .column {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(45);
-          font-weight: 600;
-          line-height: rem(45);
-          margin-bottom: 30px;
+    &__selected {
+        padding: rem(30);
+        position: relative;
+        z-index: 34;
+
+        img {
+            display: block;
+            padding-right: rem(20);
+            margin-bottom: rem(30);
         }
 
-        > p {
-          margin: rem(30) 0;
-          font-weight: 500;
-          font-size: rem(35);
+        .columns {
+            .column {
+                > h3 {
+                    color: $wb-main-text-color;
+                    font-size: rem(45);
+                    font-weight: 600;
+                    line-height: rem(45);
+                    margin-bottom: 30px;
+                }
 
-          &.is-variant {
-            margin: 0 0 rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
-            font-size: rem(16);
+                > p {
+                    margin: rem(30) 0;
+                    font-weight: 500;
+                    font-size: rem(35);
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
-            }
-          }
-        }
+                    &.is-variant {
+                        margin: 0 0 rem(30);
+                        padding: rem(20) rem(20);
+                        font-weight: 400;
+                        background-color: lighten($wb-border-color, 10%);
+                        border-radius: rem(3);
+                        position: relative;
+                        user-select: none;
+                        cursor: pointer;
+                        font-size: rem(16);
 
-        > a {
-          color: $wb-white;
-          font-weight: 500;
-          padding: rem(20) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          width: 100%;
-          text-align: center;
-          margin-bottom: rem(20);
-          display: flex;
-          text-transform: uppercase;
-          font-size: rem(24);
+                        &:before {
+                            position: absolute;
+                            content: '\f078';
+                            right: rem(20);
+                            top: 0;
+                            bottom: 0;
+                            font-family: 'Font Awesome 5 Pro';
+                            color: $wb-main-text-color;
+                            display: block;
+                            margin: auto;
+                            height: rem(20);
+                        }
+                    }
+                }
 
-          span {
-            flex: 1;
-            text-transform: uppercase;
+                > a {
+                    color: $wb-white;
+                    font-weight: 500;
+                    padding: rem(20) rem(30);
+                    background-color: $wb-button-color;
+                    border-radius: rem(3);
+                    cursor: pointer;
+                    width: 100%;
+                    text-align: center;
+                    margin-bottom: rem(20);
+                    display: flex;
+                    text-transform: uppercase;
+                    font-size: rem(24);
 
-            &:first-child {
-              border-right: rem(1) solid $wb-white;
-              padding: 0 30px;
-              flex: 0;
-            }
+                    span {
+                        flex: 1;
+                        text-transform: uppercase;
 
-            &:last-child {
-              white-space: nowrap;
-              padding: 0 30px;
+                        &:first-child {
+                            border-right: rem(1) solid $wb-white;
+                            padding: 0 30px;
+                            flex: 0;
+                        }
+
+                        &:last-child {
+                            white-space: nowrap;
+                            padding: 0 30px;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+    &__product-config {
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        position: absolute;
+        z-index: 35;
+        pointer-events: none;
+    }
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+    &__noproduct {
+        min-height: rem(380);
+        height: 100%;
+        padding: 0 rem(50);
+        display: flex;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
-    wb-structure-search-product {
-      width: 100%;
+        wb-structure-search-product {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
 }
 .wb-structure-select {
     display: inline-block;
@@ -5857,7 +5968,7 @@ wb-editorjs {
             vertical-align: middle;
 
             &:first-child {
-                max-width: rem(200);
+                max-width: rem(250);
                 text-overflow: ellipsis;
                 overflow: hidden;
                 display: inline-block;
@@ -6097,9 +6208,12 @@ $color-bd: #dddddd;
         align-content: center;
         align-items: center;
         width: 100%;
+        background-color: rgba(0, 0, 0, 0.45);
 
         wb-structure-search-product {
             width: 100%;
+            display: flex;
+            justify-content: center;
         }
     }
 }
@@ -14177,6 +14291,24 @@ $color-size-choose: #6c6c6c;
         }
     }
 }
+
+.column.is-3-fullhd.is-3-desktop {
+    &:nth-child(3) {
+        .wb-structure-config__content {
+            transform: translateX(-25%);
+        }
+    }
+    &:nth-child(4) {
+        .wb-structure-config__content {
+            transform: translateX(-50%);
+        }
+    }
+    &:nth-child(5) {
+        .wb-structure-config__content {
+            transform: translateX(-75%);
+        }
+    }
+}
 .wb-previews {
   &__iframe {
     opacity: 0;
@@ -16045,6 +16177,19 @@ html {
         }
     }
 }
+
+.column.is-4-fullhd.is-4-desktop {
+    &:nth-child(3) {
+        .wb-structure-config__content {
+            transform: translateX(-33.33%);
+        }
+    }
+    &:nth-child(4) {
+        .wb-structure-config__content {
+            transform: translateX(-66.66%);
+        }
+    }
+}
 /*!
  * Quill Editor v1.3.6
  * https://quilljs.com/
@@ -18209,6 +18354,14 @@ wb-quill {
         }
     }
 }
+
+.column.is-6-fullhd.is-6-desktop {
+    &:nth-child(3) {
+        .wb-structure-config__content {
+            transform: translateX(-50%);
+        }
+    }
+}
 .wb-structure-tools {
     position: relative;
     z-index: 9;
@@ -21330,6 +21483,10 @@ $color-bd: #dddddd;
         }
     }
 }
+
+.transform-editor {
+    padding: 0 0 0 25px;
+}
 $color-size-choose: #6c6c6c;
 .wb-launch-videos-button {
   overflow: hidden;
@@ -22044,286 +22201,306 @@ $color-size-choose: #6c6c6c;
   }
 }
 .wb-timer-airport {
-  width: 100%;
-
-  &__wrapGlobal {
     width: 100%;
     position: relative;
-    min-height: 680px;
-  }
 
-  &__calendar {
-    &__text {
-      font-size: rem(16);
-      text-align: center;
-      padding: 12px 20px;
-      margin: 0 0 20px 0 !important;
-      text-transform: none !important;
-      font-weight: 500 !important;
-      width: 100% !important;
-    }
-    &__wrapper {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      @include align-content(center);
-      @include align-items(center);
+    &__wrapGlobal {
+        width: 100%;
+        position: relative;
+        min-height: 680px;
     }
-  }
 
-  &__switch {
-    @include flexbox();
-    @include flex-wrap(nowrap);
-    @include justify-content(space-between);
-    @include align-content(center);
-    @include align-items(center);
-    padding: 20px;
-    & > div {
-      width: 49px;
-      height: 24px;
-      margin: 0 15px;
-    }
-    & > span {
-      display: block;
-      width: 100%;
-      text-transform: uppercase;
-      font-weight: 500;
-      &.active {
-        color: $wizishop-blue;
-      }
-    }
-    .switch[type='checkbox'] + label {
-      height: 17px;
-    }
-    & > span:nth-child(1) {
-      text-align: right;
+    &__calendar {
+        &__text {
+            font-size: rem(16);
+            text-align: center;
+            padding: 12px 20px;
+            margin: 0 0 20px 0 !important;
+            text-transform: none !important;
+            font-weight: 500 !important;
+            width: 100% !important;
+        }
+        &__wrapper {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            @include align-content(center);
+            @include align-items(center);
+        }
     }
-  }
 
-  &__valid {
-    margin-top: 60px;
-    width: 100%;
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    @include align-content(center);
-    button {
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      height: 40px;
-      line-height: 40px;
-      padding: 0px 40px;
-    }
-    &--calendar {
-      margin: 20px 0;
+    &__nodate {
+        &--edit {
+            .wb-timer-airport {
+                &__switch {
+                    & > span {
+                        color: $wb-white;
+                    }
+                }
+            }
+            .wb-timer-simple__calendar__text,
+            .wb-timer-airport__time__input input {
+                color: $wb-white;
+            }
+            .wb-timer-airport__time__text p {
+                color: $wb-white;
+            }
+        }
     }
-  }
 
-  &__time {
-    width: 100%;
-    margin: 0;
-    &__wrapper,
-    &__text {
-      width: 100%;
-      @include flexbox();
-      @include justify-content(center);
-      @include align-items(center);
-      @include align-content(center);
-    }
-    &__input {
-      width: 100px;
-      border-radius: 50%;
-      border: 1px solid $wb-border-color;
-      height: 100px;
-      line-height: 106px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
-      input {
-        padding: 0;
-        text-align: center;
-        height: 45px;
-        font-size: rem(30);
-        border: none;
-        background-color: transparent;
-        color: $wb-secondary-text-color;
-        width: 50%;
-        min-width: 50%;
-        max-width: 50%;
-        margin-left: 25%;
-        border-bottom: 2px dashed $wb-border-color;
-      }
-    }
-    p {
-      width: 100px;
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      margin-top: 10px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
+    &__switch {
+        @include flexbox();
+        @include flex-wrap(nowrap);
+        @include justify-content(space-between);
+        @include align-content(center);
+        @include align-items(center);
+        padding: 20px;
+        & > div {
+            width: 49px;
+            height: 24px;
+            margin: 0 15px;
+        }
+        & > span {
+            display: block;
+            width: 100%;
+            text-transform: uppercase;
+            font-weight: 500;
+            &.active {
+                color: $wizishop-blue;
+            }
+        }
+        .switch[type='checkbox'] + label {
+            height: 17px;
+        }
+        & > span:nth-child(1) {
+            text-align: right;
+        }
     }
-  }
 
-  &__container {
-    width: 100%;
-    padding: 60px;
-    @include flexbox();
-    @include flex-wrap(nowrap);
-    @include justify-content(center);
-    @include align-content(center);
-    @include align-items(center);
-    min-height: 680px;
-    @include media('<desktop') {
-      margin-bottom: 30px;
-    }
-    &__timer {
-      width: 100%;
-      max-width: 100%;
-      @include flexbox();
-      @include flex-wrap(wrap);
-      @include justify-content(center);
-      & > div {
+    &__valid {
+        margin-top: 60px;
         width: 100%;
-        padding: 0 20px;
-        &:nth-child(2) {
-          margin-bottom: 30px;
+        @include flexbox();
+        @include justify-content(center);
+        @include align-items(center);
+        @include align-content(center);
+        button {
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            height: 40px;
+            line-height: 40px;
+            padding: 0px 40px;
+        }
+        &--calendar {
+            margin: 20px 0;
         }
-      }
     }
 
-    ul {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      width: 100%;
-      max-width: 420px;
-      list-style-type: none;
-      padding: 0;
-      font-family: 'Helvetica Neue', sans-serif;
-      transform: scale(1.5) translate3d(0, 0, 0) perspective(1px);
-      margin-top: 20px;
-      li {
+    &__time {
         width: 100%;
-        position: relative;
-        & > div:first-child {
-          @include flexbox();
-          @include flex-wrap(nowrap);
-          width: 100%;
-          text-align: center;
-          font-weight: 600;
-          line-height: 1;
-          font-size: rem(50);
-          span {
+        margin: 0;
+        &__wrapper,
+        &__text {
+            width: 100%;
             @include flexbox();
-            @include flex-wrap(wrap);
             @include justify-content(center);
             @include align-items(center);
             @include align-content(center);
-            min-height: 60px;
-            width: 40px;
-            text-align: center;
-            position: relative;
-            background: #23272b;
-            color: $wb-white;
-            border-radius: 3px;
-            box-shadow: 0px 0px 20px 0px rgba(35, 39, 43, 0.5);
-            &:after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              left: 0;
-              width: 100%;
-              background: #000;
-              transform: translateY(-50%);
-              height: 1px;
-              display: block;
+        }
+        &__input {
+            width: 100px;
+            border-radius: 50%;
+            border: 1px solid $wb-border-color;
+            height: 100px;
+            line-height: 106px;
+            &:not(:first-child) {
+                margin-left: 30px;
             }
-            &:first-child {
-              margin-right: 5px;
+            input {
+                padding: 0;
+                text-align: center;
+                height: 45px;
+                font-size: rem(30);
+                border: none;
+                background-color: transparent;
+                color: $wb-secondary-text-color;
+                width: 50%;
+                min-width: 50%;
+                max-width: 50%;
+                margin-left: 25%;
+                border-bottom: 2px dashed $wb-border-color;
             }
-          }
         }
-
-        & > span {
-          display: block;
-          width: 100%;
-          text-align: center;
-          font-weight: 400;
-          line-height: 1;
-          font-size: rem(18);
-          margin-top: 7.5px;
-          max-width: 85px;
+        p {
+            width: 100px;
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            margin-top: 10px;
+            &:not(:first-child) {
+                margin-left: 30px;
+            }
         }
+    }
 
-        &:not(:last-child) {
-          span {
-            &:nth-child(3) {
-              &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: 6px;
-                border-radius: 1px;
-              }
-
-              &:after {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: -6px;
-                border-radius: 1px;
-              }
+    &__container {
+        width: 100%;
+        padding: 60px;
+        @include flexbox();
+        @include flex-wrap(nowrap);
+        @include justify-content(center);
+        @include align-content(center);
+        @include align-items(center);
+        min-height: 680px;
+        @include media('<desktop') {
+            margin-bottom: 30px;
+        }
+        &__timer {
+            width: 100%;
+            max-width: 100%;
+            @include flexbox();
+            @include flex-wrap(wrap);
+            @include justify-content(center);
+            & > div {
+                width: 100%;
+                padding: 0 20px;
+                &:nth-child(2) {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
+        ul {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            width: 100%;
+            max-width: 420px;
+            list-style-type: none;
+            padding: 0;
+            font-family: 'Helvetica Neue', sans-serif;
+            transform: scale(1.5) translate3d(0, 0, 0) perspective(1px);
+            margin-top: 20px;
+            li {
+                width: 100%;
+                position: relative;
+                & > div:first-child {
+                    @include flexbox();
+                    @include flex-wrap(nowrap);
+                    width: 100%;
+                    text-align: center;
+                    font-weight: 600;
+                    line-height: 1;
+                    font-size: rem(50);
+                    span {
+                        @include flexbox();
+                        @include flex-wrap(wrap);
+                        @include justify-content(center);
+                        @include align-items(center);
+                        @include align-content(center);
+                        min-height: 60px;
+                        width: 40px;
+                        text-align: center;
+                        position: relative;
+                        background: #23272b;
+                        color: $wb-white;
+                        border-radius: 3px;
+                        box-shadow: 0px 0px 20px 0px rgba(35, 39, 43, 0.5);
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            left: 0;
+                            width: 100%;
+                            background: #000;
+                            transform: translateY(-50%);
+                            height: 1px;
+                            display: block;
+                        }
+                        &:first-child {
+                            margin-right: 5px;
+                        }
+                    }
+                }
+
+                & > span {
+                    display: block;
+                    width: 100%;
+                    text-align: center;
+                    font-weight: 400;
+                    line-height: 1;
+                    font-size: rem(18);
+                    margin-top: 7.5px;
+                    max-width: 85px;
+                }
+
+                &:not(:last-child) {
+                    span {
+                        &:nth-child(3) {
+                            &:before {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: 6px;
+                                border-radius: 1px;
+                            }
+
+                            &:after {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: -6px;
+                                border-radius: 1px;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-  .wb-structure-config__content {
-    width: 70%;
-  }
-  .datetimepicker-footer-validate {
-    background-color: $primary-button !important;
-    color: $wb-white !important;
-    line-height: 40px;
-    padding: 0px 40px;
-    font-size: 1rem;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    font-weight: 500;
-  }
-  .wb-structure-config__content .timepicker-hours,
-  .timepicker-minutes {
-    max-width: 90px;
-  }
-  .datetimepicker-footer {
-    display: none;
-  }
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+    .wb-structure-config__content {
+        width: 70%;
+    }
+    .datetimepicker-footer-validate {
+        background-color: $primary-button !important;
+        color: $wb-white !important;
+        line-height: 40px;
+        padding: 0px 40px;
+        font-size: 1rem;
+        margin-bottom: 20px;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+    .wb-structure-config__content .timepicker-hours,
+    .timepicker-minutes {
+        max-width: 90px;
+    }
+    .datetimepicker-footer {
+        display: none;
+    }
 }
 .wb-star {
   position: relative;
@@ -22360,359 +22537,379 @@ $color-size-choose: #6c6c6c;
   }
 }
 .wb-timer-background {
-  width: 100%;
-  position: relative;
-  min-height: 400px;
-
-  &__wrapGlobal {
     width: 100%;
     position: relative;
-    min-height: 680px;
-  }
+    min-height: 400px;
 
-  &__calendar {
-    &__text {
-      font-size: rem(16);
-      text-align: center;
-      padding: 12px 20px;
-      margin: 0 0 20px 0 !important;
-      text-transform: none !important;
-      font-weight: 500 !important;
-      width: 100% !important;
-    }
-    &__wrapper {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      @include align-content(center);
-      @include align-items(center);
+    &__wrapGlobal {
+        width: 100%;
+        position: relative;
+        min-height: 680px;
     }
-  }
 
-  &__switch {
-    @include flexbox();
-    @include flex-wrap(nowrap);
-    @include justify-content(space-between);
-    @include align-content(center);
-    @include align-items(center);
-    padding: 20px;
-    & > div {
-      width: 49px;
-      height: 24px;
-      margin: 0 15px;
-    }
-    & > span {
-      display: block;
-      width: 100%;
-      text-transform: uppercase;
-      font-weight: 500;
-      &.active {
-        color: $wizishop-blue;
-      }
-    }
-    .switch[type='checkbox'] + label {
-      height: 17px;
-    }
-    & > span:nth-child(1) {
-      text-align: right;
+    &__calendar {
+        &__text {
+            font-size: rem(16);
+            text-align: center;
+            padding: 12px 20px;
+            margin: 0 0 20px 0 !important;
+            text-transform: none !important;
+            font-weight: 500 !important;
+            width: 100% !important;
+        }
+        &__wrapper {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            @include align-content(center);
+            @include align-items(center);
+        }
     }
-  }
 
-  &__valid {
-    margin-top: 60px;
-    width: 100%;
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    @include align-content(center);
-    button {
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      height: 40px;
-      line-height: 40px;
-      padding: 0px 40px;
-    }
-    &--calendar {
-      margin: 20px 0;
+    &__nodate {
+        &--edit {
+            .wb-timer-background {
+                &__switch {
+                    & > span {
+                        color: $wb-white;
+                    }
+                }
+            }
+            .wb-timer-simple__calendar__text,
+            .wb-timer-background__time__input input {
+                color: $wb-white;
+            }
+            .wb-timer-background__time__text p {
+                color: $wb-white;
+            }
+        }
     }
-  }
 
-  &__time {
-    width: 100%;
-    margin: 0;
-    &__wrapper,
-    &__text {
-      width: 100%;
-      @include flexbox();
-      @include justify-content(center);
-      @include align-items(center);
-      @include align-content(center);
-    }
-    &__input {
-      width: 100px;
-      border-radius: 50%;
-      border: 1px solid $wb-border-color;
-      height: 100px;
-      line-height: 106px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
-      input {
-        padding: 0;
-        text-align: center;
-        height: 45px;
-        font-size: rem(30);
-        border: none;
-        background-color: transparent;
-        color: $wb-secondary-text-color;
-        width: 50%;
-        min-width: 50%;
-        max-width: 50%;
-        margin-left: 25%;
-        border-bottom: 2px dashed $wb-border-color;
-      }
+    &__switch {
+        @include flexbox();
+        @include flex-wrap(nowrap);
+        @include justify-content(space-between);
+        @include align-content(center);
+        @include align-items(center);
+        padding: 20px;
+        & > div {
+            width: 49px;
+            height: 24px;
+            margin: 0 15px;
+        }
+        & > span {
+            display: block;
+            width: 100%;
+            text-transform: uppercase;
+            font-weight: 500;
+            &.active {
+                color: $wizishop-blue;
+            }
+        }
+        .switch[type='checkbox'] + label {
+            height: 17px;
+        }
+        & > span:nth-child(1) {
+            text-align: right;
+        }
     }
-    p {
-      width: 100px;
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      margin-top: 10px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
+
+    &__valid {
+        margin-top: 60px;
+        width: 100%;
+        @include flexbox();
+        @include justify-content(center);
+        @include align-items(center);
+        @include align-content(center);
+        button {
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            height: 40px;
+            line-height: 40px;
+            padding: 0px 40px;
+        }
+        &--calendar {
+            margin: 20px 0;
+        }
     }
-  }
 
-  &__noimages {
-    background-color: lighten($wb-border-color, 12%);
-    cursor: pointer;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
+    &__time {
+        width: 100%;
+        margin: 0;
+        &__wrapper,
+        &__text {
+            width: 100%;
+            @include flexbox();
+            @include justify-content(center);
+            @include align-items(center);
+            @include align-content(center);
+        }
+        &__input {
+            width: 100px;
+            border-radius: 50%;
+            border: 1px solid $wb-border-color;
+            height: 100px;
+            line-height: 106px;
+            &:not(:first-child) {
+                margin-left: 30px;
+            }
+            input {
+                padding: 0;
+                text-align: center;
+                height: 45px;
+                font-size: rem(30);
+                border: none;
+                background-color: transparent;
+                color: $wb-secondary-text-color;
+                width: 50%;
+                min-width: 50%;
+                max-width: 50%;
+                margin-left: 25%;
+                border-bottom: 2px dashed $wb-border-color;
+            }
+        }
+        p {
+            width: 100px;
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            margin-top: 10px;
+            &:not(:first-child) {
+                margin-left: 30px;
+            }
+        }
+    }
 
-    position: absolute;
-    width: 100%;
-    top: 0;
+    &__noimages {
+        background-color: lighten($wb-border-color, 12%);
+        cursor: pointer;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
 
-    z-index: 4;
+        position: absolute;
+        width: 100%;
+        top: 0;
 
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      font-size: rem(14);
-      color: $wb-secondary-text-color;
-      width: auto;
-      white-space: nowrap;
+        z-index: 4;
 
-      &:before {
-        position: absolute;
-        width: 0;
-        bottom: -(#{rem(3)});
-        height: rem(2);
-        transition: 200ms all;
-        background-color: $wb-border-color;
-        content: ' ';
-        left: 0;
-      }
-    }
+        p {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            font-size: rem(14);
+            color: $wb-secondary-text-color;
+            width: auto;
+            white-space: nowrap;
 
-    i {
-      color: $wb-secondary-text-color;
-      text-align: center;
-      display: block;
-      font-size: rem(45);
-      opacity: 0.4;
-      transition: 200ms all;
-      margin-bottom: rem(10);
-    }
+            &:before {
+                position: absolute;
+                width: 0;
+                bottom: -(#{rem(3)});
+                height: rem(2);
+                transition: 200ms all;
+                background-color: $wb-border-color;
+                content: ' ';
+                left: 0;
+            }
+        }
 
-    border: rem(1) solid lighten($wb-border-color, 12%);
-    transition: 200ms all;
+        i {
+            color: $wb-secondary-text-color;
+            text-align: center;
+            display: block;
+            font-size: rem(45);
+            opacity: 0.4;
+            transition: 200ms all;
+            margin-bottom: rem(10);
+        }
 
-    &:hover {
-      border: rem(1) solid $wb-border-color;
+        border: rem(1) solid lighten($wb-border-color, 12%);
+        transition: 200ms all;
 
-      i {
-        color: darken($wb-secondary-text-color, 20%);
-      }
+        &:hover {
+            border: rem(1) solid $wb-border-color;
 
-      p {
-        color: darken($wb-secondary-text-color, 20%);
+            i {
+                color: darken($wb-secondary-text-color, 20%);
+            }
 
-        &:before {
-          width: 100%;
-        }
-      }
-    }
-  }
+            p {
+                color: darken($wb-secondary-text-color, 20%);
 
-  &__container {
-    width: 100%;
-    padding: 60px 20px;
-    position: relative;
-    @include flexbox();
-    @include flex-wrap(wrap);
-    @include justify-content(center);
-    @include align-content(center);
-    @include align-items(center);
-    min-height: 680px;
-    @include media('<desktop') {
-      margin-bottom: 30px;
-    }
-    & > div:nth-child(3),
-    & > div:nth-child(2) {
-      width: 100%;
-      padding: 0;
-      z-index: 2;
-      &:nth-child(2) {
-        z-index: 4;
-      }
-      &:nth-child(3) {
-        margin-bottom: 30px;
-        z-index: 3;
-      }
-    }
-    &__image {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 2;
-      background-size: cover;
-      background-position: center center;
-      background-repeat: no-repeat;
-    }
-    &__timer {
-      width: 100%;
-      max-width: 800px;
-      z-index: 2;
-      position: relative;
-      padding: 30px 60px;
-      border: 4px solid #fff;
+                &:before {
+                    width: 100%;
+                }
+            }
+        }
     }
 
-    ul {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      width: 100%;
-      max-width: 800px;
-      list-style-type: none;
-      padding: 0;
-
-      li {
+    &__container {
         width: 100%;
+        padding: 60px 20px;
         position: relative;
-
-        .tiret {
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          right: 0;
-          margin-left: 10px;
-          background: #fff;
-          width: 2px;
-          height: 50%;
+        @include flexbox();
+        @include flex-wrap(wrap);
+        @include justify-content(center);
+        @include align-content(center);
+        @include align-items(center);
+        min-height: 680px;
+        @include media('<desktop') {
+            margin-bottom: 30px;
         }
-
-        span:not(.tiret) {
-          display: block;
-          width: 100%;
-          text-align: center;
-          font-weight: 400;
-          line-height: 1;
-
-          &:first-child {
-            font-size: rem(54);
-            @include mobile {
-              font-size: rem(28);
+        & > div:nth-child(3),
+        & > div:nth-child(2) {
+            width: 100%;
+            padding: 0;
+            z-index: 2;
+            &:nth-child(2) {
+                z-index: 4;
             }
-          }
-
-          &:nth-child(2) {
-            font-size: rem(24);
-            @include mobile {
-              font-size: rem(14);
+            &:nth-child(3) {
+                margin-bottom: 30px;
+                z-index: 3;
             }
-          }
+        }
+        &__image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            background-size: cover;
+            background-position: center center;
+            background-repeat: no-repeat;
+        }
+        &__timer {
+            width: 100%;
+            max-width: 800px;
+            z-index: 2;
+            position: relative;
+            padding: 30px 60px;
+            border: 4px solid #fff;
         }
 
-        &:not(:last-child) {
-          span {
-            &:nth-child(3) {
-              &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: 6px;
-                border-radius: 1px;
-              }
-
-              &:after {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: -6px;
-                border-radius: 1px;
-              }
+        ul {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            width: 100%;
+            max-width: 800px;
+            list-style-type: none;
+            padding: 0;
+
+            li {
+                width: 100%;
+                position: relative;
+
+                .tiret {
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    right: 0;
+                    margin-left: 10px;
+                    background: #fff;
+                    width: 2px;
+                    height: 50%;
+                }
+
+                span:not(.tiret) {
+                    display: block;
+                    width: 100%;
+                    text-align: center;
+                    font-weight: 400;
+                    line-height: 1;
+
+                    &:first-child {
+                        font-size: rem(54);
+                        @include mobile {
+                            font-size: rem(28);
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        font-size: rem(24);
+                        @include mobile {
+                            font-size: rem(14);
+                        }
+                    }
+                }
+
+                &:not(:last-child) {
+                    span {
+                        &:nth-child(3) {
+                            &:before {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: 6px;
+                                border-radius: 1px;
+                            }
+
+                            &:after {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: -6px;
+                                border-radius: 1px;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-  .wb-structure-config__content {
-    width: 70%;
-  }
-  .datetimepicker-footer-validate {
-    background-color: $primary-button !important;
-    color: $wb-white !important;
-    line-height: 40px;
-    padding: 0px 40px;
-    font-size: 1rem;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    font-weight: 500;
-  }
-  .wb-structure-config__content .timepicker-hours,
-  .timepicker-minutes {
-    max-width: 90px;
-  }
-  .datetimepicker-footer {
-    display: none;
-  }
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+    .wb-structure-config__content {
+        width: 70%;
+    }
+    .datetimepicker-footer-validate {
+        background-color: $primary-button !important;
+        color: $wb-white !important;
+        line-height: 40px;
+        padding: 0px 40px;
+        font-size: 1rem;
+        margin-bottom: 20px;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+    .wb-structure-config__content .timepicker-hours,
+    .timepicker-minutes {
+        max-width: 90px;
+    }
+    .datetimepicker-footer {
+        display: none;
+    }
 }
 .wb-structure-search-product {
+    min-width: 400px;
     &__input {
         position: relative;
     }
@@ -22729,6 +22926,8 @@ $color-size-choose: #6c6c6c;
         position: absolute;
         z-index: 1;
         width: 150%;
+        top: 105px;
+        left: 0;
 
         p {
             border: rem(1) solid $wb-border-color;
@@ -22738,6 +22937,7 @@ $color-size-choose: #6c6c6c;
             cursor: pointer;
             border-radius: rem(2);
             color: $wb-secondary-text-color;
+            background-color: $wb-white;
             display: inline-flex;
             align-items: center;
             @include simple_transition();
@@ -22892,6 +23092,25 @@ $color-size-choose: #6c6c6c;
         }
     }
 
+    &__nodate {
+        &--edit {
+            .wb-timer-clock {
+                &__switch {
+                    & > span {
+                        color: $wb-white;
+                    }
+                }
+            }
+            .wb-timer-simple__calendar__text,
+            .wb-timer-clock__time__input input {
+                color: $wb-white;
+            }
+            .wb-timer-clock__time__text p {
+                color: $wb-white;
+            }
+        }
+    }
+
     &__switch {
         @include flexbox();
         @include flex-wrap(nowrap);
@@ -23371,6 +23590,7 @@ $color-size-choose: #6c6c6c;
 .wb-timer-multiple-img {
     overflow: hidden;
     position: relative;
+    width: 100%;
 
     &.is-active {
         z-index: 40;
@@ -23770,7 +23990,6 @@ $color-size-choose: #6c6c6c;
 
             > div {
                 position: relative;
-                overflow: hidden;
 
                 > div {
                     background-size: cover;
@@ -23869,6 +24088,25 @@ $color-size-choose: #6c6c6c;
         }
     }
 
+    &__nodate {
+        &--edit {
+            .wb-timer-multiple-img {
+                &__switch {
+                    & > span {
+                        color: $wb-white;
+                    }
+                }
+            }
+            .wb-timer-simple__calendar__text,
+            .wb-timer-multiple-img__time__input input {
+                color: $wb-white;
+            }
+            .wb-timer-multiple-img__time__text p {
+                color: $wb-white;
+            }
+        }
+    }
+
     &__switch {
         @include flexbox();
         @include flex-wrap(nowrap);
@@ -24380,341 +24618,361 @@ $color-size-choose: #6c6c6c;
             }
         }
 
-        &__content {
-            padding-bottom: 1rem;
+        &__content {
+            padding-bottom: 1rem;
+
+            > div {
+                position: relative;
+                padding: rem(15);
+                width: calc(100% - #{rem(80)});
+                background-color: lighten($wb-border-color, 8%);
+                margin: 0 rem(40) rem(30);
+                min-height: rem(60);
+                box-sizing: border-box;
+
+                &:last-child {
+                    margin: 0 rem(40);
+                    background-color: transparent;
+                    text-align: right;
+                    padding: 0;
+                }
+
+                p {
+                    position: absolute;
+                    font-size: rem(12);
+                    color: $wb-main-text-color;
+
+                    &:first-child {
+                        top: rem(5);
+                        left: rem(10);
+                        font-size: rem(16);
+                        font-weight: 300;
+                    }
+                    &:last-child {
+                        bottom: rem(2);
+                        right: rem(5);
+                    }
+                }
+
+                .select {
+                    max-width: 40%;
+                }
+
+                button:not(.is-info) {
+                    background-color: $wb-main-color;
+                    padding: rem(10) rem(15);
+                    border: 0;
+                    color: $wb-white;
+                    text-transform: capitalize;
+                    font-size: rem(14);
+                }
+            }
+        }
+    }
+    &__noForms {
+        min-height: 300px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+            font-size: rem(20);
+            font-weight: 600;
+            a {
+                color: $wb-main-color;
+            }
+        }
+    }
+}
+
+.form-long_answer {
+    min-height: 80px;
+    width: 100%;
+}
+.wb-timer-simple {
+    width: 100%;
+    position: relative;
+
+    &__wrapGlobal {
+        width: 100%;
+        position: relative;
+        min-height: 680px;
+    }
+
+    &__calendar {
+        &__text {
+            font-size: rem(16);
+            text-align: center;
+            padding: 12px 20px;
+            margin: 0 0 20px 0 !important;
+            text-transform: none !important;
+            font-weight: 500 !important;
+            width: 100% !important;
+        }
+        &__wrapper {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            @include align-content(center);
+            @include align-items(center);
+        }
+    }
+
+    &__nodate {
+        &--edit {
+            .wb-timer-simple {
+                &__switch {
+                    & > span {
+                        color: $wb-white;
+                    }
+                }
+            }
+            .wb-timer-simple__calendar__text,
+            .wb-timer-simple__time__input input {
+                color: $wb-white;
+            }
+            .wb-timer-simple__time__text p {
+                color: $wb-white;
+            }
+        }
+    }
+
+    &__switch {
+        @include flexbox();
+        @include flex-wrap(nowrap);
+        @include justify-content(space-between);
+        @include align-content(center);
+        @include align-items(center);
+        padding: 20px;
+        & > div {
+            width: 49px;
+            height: 24px;
+            margin: 0 15px;
+        }
+        & > span {
+            display: block;
+            width: 100%;
+            text-transform: uppercase;
+            font-weight: 500;
+            &.active {
+                color: $wizishop-blue;
+            }
+        }
+        .switch[type='checkbox'] + label {
+            height: 17px;
+        }
+        & > span:nth-child(1) {
+            text-align: right;
+        }
+    }
+
+    &__valid {
+        margin-top: 60px;
+        width: 100%;
+        @include flexbox();
+        @include justify-content(center);
+        @include align-items(center);
+        @include align-content(center);
+        button {
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            height: 40px;
+            line-height: 40px;
+            padding: 0px 40px;
+        }
+        &--calendar {
+            margin: 20px 0;
+        }
+    }
+
+    &__time {
+        width: 100%;
+        margin: 0 0 40px;
+        &__wrapper,
+        &__text {
+            width: 100%;
+            @include flexbox();
+            @include justify-content(center);
+            @include align-items(center);
+            @include align-content(center);
+        }
+        &__input {
+            width: 100px;
+            border-radius: 50%;
+            border: 1px solid $wb-border-color;
+            height: 100px;
+            line-height: 106px;
+            &:not(:first-child) {
+                margin-left: 30px;
+            }
+            input {
+                padding: 0;
+                text-align: center;
+                height: 45px;
+                font-size: rem(30);
+                border: none;
+                background-color: transparent;
+                color: $wb-secondary-text-color;
+                width: 50%;
+                min-width: 50%;
+                max-width: 50%;
+                margin-left: 25%;
+                border-bottom: 2px dashed $wb-border-color;
+            }
+        }
+        p {
+            width: 100px;
+            font-size: rem(16);
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 600;
+            margin-top: 10px;
+            &:not(:first-child) {
+                margin-left: 30px;
+            }
+        }
+    }
+
+    &__container {
+        width: 100%;
+        padding: 60px;
+        @include flexbox();
+        @include flex-wrap(nowrap);
+        @include justify-content(center);
+        @include align-content(center);
+        @include align-items(center);
+        min-height: 680px;
+        @include media('<desktop') {
+            margin-bottom: 30px;
+        }
+        &__timer {
+            width: 100%;
+            max-width: 100%;
+            @include flexbox();
+            @include flex-wrap(wrap);
+            @include justify-content(center);
+            & > div {
+                width: 100%;
+                padding: 0 20px;
+                &:nth-child(2) {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
+        ul {
+            @include flexbox();
+            @include flex-wrap(nowrap);
+            @include justify-content(center);
+            width: 100%;
+            max-width: 460px;
+            list-style-type: none;
+            padding: 0;
 
-            > div {
+            li {
+                width: 100%;
                 position: relative;
-                padding: rem(15);
-                width: calc(100% - #{rem(80)});
-                background-color: lighten($wb-border-color, 8%);
-                margin: 0 rem(40) rem(30);
-                min-height: rem(60);
-                box-sizing: border-box;
-
-                &:last-child {
-                    margin: 0 rem(40);
-                    background-color: transparent;
-                    text-align: right;
-                    padding: 0;
-                }
 
-                p {
-                    position: absolute;
-                    font-size: rem(12);
-                    color: $wb-main-text-color;
+                span {
+                    display: block;
+                    width: 100%;
+                    text-align: center;
+                    font-weight: 600;
+                    line-height: 1;
 
                     &:first-child {
-                        top: rem(5);
-                        left: rem(10);
-                        font-size: rem(16);
-                        font-weight: 300;
+                        font-size: rem(48);
+                        @include mobile {
+                            font-size: rem(28);
+                        }
                     }
-                    &:last-child {
-                        bottom: rem(2);
-                        right: rem(5);
+
+                    &:nth-child(2) {
+                        font-size: rem(24);
+                        @include mobile {
+                            font-size: rem(14);
+                        }
                     }
                 }
 
-                .select {
-                    max-width: 40%;
-                }
+                &:not(:last-child) {
+                    span {
+                        &:nth-child(3) {
+                            &:before {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: 6px;
+                                border-radius: 1px;
+                            }
 
-                button:not(.is-info) {
-                    background-color: $wb-main-color;
-                    padding: rem(10) rem(15);
-                    border: 0;
-                    color: $wb-white;
-                    text-transform: capitalize;
-                    font-size: rem(14);
+                            &:after {
+                                content: '';
+                                display: block;
+                                position: absolute;
+                                right: 0;
+                                top: 50%;
+                                transform: translate(50%, -50%);
+                                width: 6px;
+                                height: 6px;
+                                background: inherit;
+                                margin-top: -6px;
+                                border-radius: 1px;
+                            }
+                        }
+                    }
                 }
             }
         }
     }
-    &__noForms {
-        min-height: 300px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        p {
-            font-size: rem(20);
-            font-weight: 600;
-            a {
-                color: $wb-main-color;
-            }
-        }
-    }
-}
-
-.form-long_answer {
-    min-height: 80px;
-    width: 100%;
-}
-.wb-timer-simple {
-  width: 100%;
-
-  &__wrapGlobal {
-    width: 100%;
-    position: relative;
-    min-height: 680px;
-  }
-
-  &__calendar {
-    &__text {
-      font-size: rem(16);
-      text-align: center;
-      padding: 12px 20px;
-      margin: 0 0 20px 0 !important;
-      text-transform: none !important;
-      font-weight: 500 !important;
-      width: 100% !important;
-    }
-    &__wrapper {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      @include align-content(center);
-      @include align-items(center);
-    }
-  }
-
-  &__switch {
-    @include flexbox();
-    @include flex-wrap(nowrap);
-    @include justify-content(space-between);
-    @include align-content(center);
-    @include align-items(center);
-    padding: 20px;
-    & > div {
-      width: 49px;
-      height: 24px;
-      margin: 0 15px;
-    }
-    & > span {
-      display: block;
-      width: 100%;
-      text-transform: uppercase;
-      font-weight: 500;
-      &.active {
-        color: $wizishop-blue;
-      }
-    }
-    .switch[type='checkbox'] + label {
-      height: 17px;
-    }
-    & > span:nth-child(1) {
-      text-align: right;
-    }
-  }
-
-  &__valid {
-    margin-top: 60px;
-    width: 100%;
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    @include align-content(center);
-    button {
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      height: 40px;
-      line-height: 40px;
-      padding: 0px 40px;
-    }
-    &--calendar {
-      margin: 20px 0;
-    }
-  }
-
-  &__time {
-    width: 100%;
-    margin: 0 0 40px;
-    &__wrapper,
-    &__text {
-      width: 100%;
-      @include flexbox();
-      @include justify-content(center);
-      @include align-items(center);
-      @include align-content(center);
-    }
-    &__input {
-      width: 100px;
-      border-radius: 50%;
-      border: 1px solid $wb-border-color;
-      height: 100px;
-      line-height: 106px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
-      input {
-        padding: 0;
-        text-align: center;
-        height: 45px;
-        font-size: rem(30);
-        border: none;
-        background-color: transparent;
-        color: $wb-secondary-text-color;
-        width: 50%;
-        min-width: 50%;
-        max-width: 50%;
-        margin-left: 25%;
-        border-bottom: 2px dashed $wb-border-color;
-      }
-    }
-    p {
-      width: 100px;
-      font-size: rem(16);
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 600;
-      margin-top: 10px;
-      &:not(:first-child) {
-        margin-left: 30px;
-      }
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
-  }
-
-  &__container {
-    width: 100%;
-    padding: 60px;
-    @include flexbox();
-    @include flex-wrap(nowrap);
-    @include justify-content(center);
-    @include align-content(center);
-    @include align-items(center);
-    min-height: 680px;
-    @include media('<desktop') {
-      margin-bottom: 30px;
+    input[type='number'] {
+        -moz-appearance: textfield;
     }
-    &__timer {
-      width: 100%;
-      max-width: 100%;
-      @include flexbox();
-      @include flex-wrap(wrap);
-      @include justify-content(center);
-      & > div {
-        width: 100%;
-        padding: 0 20px;
-        &:nth-child(2) {
-          margin-bottom: 30px;
-        }
-      }
+    .wb-structure-config__content {
+        width: 70%;
     }
-
-    ul {
-      @include flexbox();
-      @include flex-wrap(nowrap);
-      @include justify-content(center);
-      width: 100%;
-      max-width: 460px;
-      list-style-type: none;
-      padding: 0;
-
-      li {
-        width: 100%;
-        position: relative;
-
-        span {
-          display: block;
-          width: 100%;
-          text-align: center;
-          font-weight: 600;
-          line-height: 1;
-
-          &:first-child {
-            font-size: rem(48);
-            @include mobile {
-              font-size: rem(28);
-            }
-          }
-
-          &:nth-child(2) {
-            font-size: rem(24);
-            @include mobile {
-              font-size: rem(14);
-            }
-          }
-        }
-
-        &:not(:last-child) {
-          span {
-            &:nth-child(3) {
-              &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: 6px;
-                border-radius: 1px;
-              }
-
-              &:after {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translate(50%, -50%);
-                width: 6px;
-                height: 6px;
-                background: inherit;
-                margin-top: -6px;
-                border-radius: 1px;
-              }
-            }
-          }
-        }
-      }
+    .datetimepicker-footer-validate {
+        background-color: $primary-button !important;
+        color: $wb-white !important;
+        line-height: 40px;
+        padding: 0px 40px;
+        font-size: 1rem;
+        margin-bottom: 20px;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+    .wb-structure-config__content .timepicker-hours,
+    .timepicker-minutes {
+        max-width: 90px;
+    }
+    .datetimepicker-footer {
+        display: none;
     }
-  }
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-  .wb-structure-config__content {
-    width: 70%;
-  }
-  .datetimepicker-footer-validate {
-    background-color: $primary-button !important;
-    color: $wb-white !important;
-    line-height: 40px;
-    padding: 0px 40px;
-    font-size: 1rem;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    font-weight: 500;
-  }
-  .wb-structure-config__content .timepicker-hours,
-  .timepicker-minutes {
-    max-width: 90px;
-  }
-  .datetimepicker-footer {
-    display: none;
-  }
 }
 
 .ovh {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  &--decal {
-    height: calc(100% - 24px);
-    top: 12px;
-  }
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    &--decal {
+        height: calc(100% - 24px);
+        top: 12px;
+    }
 }
 .wb-four-images-title {
     position: relative;
@@ -27277,178 +27535,179 @@ $color-size-choose: #6c6c6c;
   }
 }
 .wb-witness-backgroundOne {
-  &__tool {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__container {
-    position: relative;
-    min-height: 300px;
-
-    &__item {
-      width: 100%;
-      padding: 40px;
-      min-height: 300px;
-      display: flex;
-      flex-wrap: wrap;
-      align-content: center;
-      background-size: cover;
-      background-position: center;
-
-      &__figure {
-        display: block;
+    &__tool {
+        overflow: hidden;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        z-index: 2;
-        cursor: pointer;
+    }
 
-        &__noimage {
-          background-color: lighten($wb-border-color, 12%);
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          align-content: center;
-          justify-content: center;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          z-index: 2;
-          p {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            text-align: center;
-            font-size: rem(14);
-            color: $wb-secondary-text-color;
+    &__container {
+        position: relative;
+        min-height: 300px;
 
-            &:before {
-              position: absolute;
-              width: 0;
-              bottom: -(#{rem(3)});
-              height: rem(2);
-              transition: 200ms all;
-              background-color: $wb-border-color;
-              content: ' ';
-              left: 0;
-            }
-          }
+        &__item {
+            width: 100%;
+            padding: 40px;
+            min-height: 300px;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: center;
+            background-size: cover;
+            background-position: center;
 
-          i {
-            color: $wb-secondary-text-color;
-            text-align: center;
-            display: block;
-            font-size: rem(45);
-            opacity: 0.4;
-            transition: 200ms all;
-            margin-bottom: rem(10);
-          }
+            &__figure {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+                cursor: pointer;
 
-          border: rem(1) solid lighten($wb-border-color, 12%);
-          transition: 200ms all;
+                &__noimage {
+                    background-color: lighten($wb-border-color, 12%);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: center;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    z-index: 2;
+                    p {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        text-align: center;
+                        font-size: rem(14);
+                        color: $wb-secondary-text-color;
 
-          &:hover {
-            border: rem(1) solid $wb-border-color;
+                        &:before {
+                            position: absolute;
+                            width: 0;
+                            bottom: -(#{rem(3)});
+                            height: rem(2);
+                            transition: 200ms all;
+                            background-color: $wb-border-color;
+                            content: ' ';
+                            left: 0;
+                        }
+                    }
 
-            i {
-              color: darken($wb-secondary-text-color, 20%);
-            }
+                    i {
+                        color: $wb-secondary-text-color;
+                        text-align: center;
+                        display: block;
+                        font-size: rem(45);
+                        opacity: 0.4;
+                        transition: 200ms all;
+                        margin-bottom: rem(10);
+                    }
 
-            p {
-              color: darken($wb-secondary-text-color, 20%);
+                    border: rem(1) solid lighten($wb-border-color, 12%);
+                    transition: 200ms all;
 
-              &:before {
-                width: 100%;
-              }
-            }
-          }
-        }
+                    &:hover {
+                        border: rem(1) solid $wb-border-color;
 
-        &__image {
-          -webkit-background-size: cover;
-          background-position: center;
-          background-size: cover;
-          background-position: center;
-        }
-      }
+                        i {
+                            color: darken($wb-secondary-text-color, 20%);
+                        }
 
-      &__zindex {
-        position: relative;
-        z-index: 3;
-        @include media('>=desktop') {
-          padding: 0 40px;
-        }
-      }
+                        p {
+                            color: darken($wb-secondary-text-color, 20%);
 
-      &__hr {
-        height: 2px;
-        width: 60%;
-        margin: 0 auto 10px auto;
-      }
+                            &:before {
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
 
-      &__author,
-      &__testimony {
-        text-align: center;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: center;
+                &__image {
+                    -webkit-background-size: cover;
+                    background-position: center;
+                    background-size: cover;
+                    background-position: center;
+                }
+            }
 
-        h2 {
-          width: 100%;
-          font-size: rem(18);
-          line-height: rem(22);
-        }
-      }
+            &__zindex {
+                width: 100%;
+                position: relative;
+                z-index: 3;
+                @include media('>=desktop') {
+                    padding: 0 40px;
+                }
+            }
 
-      &__author {
-        h2 {
-          font-size: rem(14);
-          line-height: rem(18);
-          text-align: center;
-          color: $white;
-        }
-      }
+            &__hr {
+                height: 2px;
+                width: 60%;
+                margin: 0 auto 10px auto;
+            }
 
-      &__testimony {
-        margin-bottom: 10px;
+            &__author,
+            &__testimony {
+                text-align: center;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: center;
 
-        p {
-          font-size: rem(16);
-          line-height: 1.6;
-          text-align: center;
-          color: $white;
-        }
-      }
+                h2 {
+                    width: 100%;
+                    font-size: rem(18);
+                    line-height: rem(22);
+                }
+            }
 
-      &__url {
-        text-align: center;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: center;
+            &__author {
+                h2 {
+                    font-size: rem(14);
+                    line-height: rem(18);
+                    text-align: center;
+                    color: $white;
+                }
+            }
 
-        &__container {
-          position: relative;
-          width: auto;
-          color: $white;
-          font-size: rem(12);
-          line-height: rem(14);
-          font-weight: 500;
-          cursor: pointer;
-          text-decoration: underline;
+            &__testimony {
+                margin-bottom: 10px;
+
+                p {
+                    font-size: rem(16);
+                    line-height: 1.6;
+                    text-align: center;
+                    color: $white;
+                }
+            }
+
+            &__url {
+                text-align: center;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                &__container {
+                    position: relative;
+                    width: auto;
+                    color: $white;
+                    font-size: rem(12);
+                    line-height: rem(14);
+                    font-weight: 500;
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
         }
-      }
     }
-  }
 }
 .wb-witness-backgroundDouble {
   min-height: 370px;