carriera-intern-components 1.1.199 → 1.1.721

package/src/styles/custompickers.scss

@@ -1,816 +1,827 @@
-@import 'variables';
-@import 'review_variables';
+@use "variables" as *;
 
 .datetime-dropdown-holder {
-    position: relative;
-    top: 0px;
+  position: relative;
+  top: 0px;
+  &.datetime-has-stroke {
+    .pickers_holder {
+      border: 1px solid $color-black-200;
+    }
+  }
 }
 
 .datetimepopovermain {
-    border: none !important;
-    .popover-body {
-        padding: 0 !important;
-    }
-
-    .popover-arrow{
-        display: none !important;
-    }
+  z-index: 1200 !important;
+  border: none !important;
+  .popover-body {
+    margin-top: -4px;
+    padding: 0 !important;
+  }
+
+  .popover-arrow {
+    display: none !important;
+  }
 }
 
 .pickers_holder {
-    position: relative;
-    top: 0px !important;
-    width: auto !important;
-    padding: 0;
+  position: relative;
+  top: 0px !important;
+  width: auto !important;
+  padding: 0;
 
-    background-color: $color-text-base-inverse;
-    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
-    z-index: 999;
+  background-color: $color-text-base-inverse;
+  //   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
+  z-index: 999;
 
-    border-radius: 3px;
-    overflow: hidden;
+  border-radius: 3px;
+  overflow: hidden;
 
-    .time_picker {
-        width: 167px;
-    }
+  .time_picker {
+    width: 167px;
+  }
 
-    .date_picker {
-        display: flex;
+  .date_picker {
+    display: flex;
 
-        .month-years-size {
-            position: relative;
-            width: 48px;
+    .month-years-size {
+      position: relative;
+      width: 48px;
 
-            background-color: $color-light-gray;
+      background-color: $color-light-gray;
 
-            .calendar_border {
-                position: absolute;
-                top: 50%;
-                width: 100%;
-                height: 24px;
-                transform: translateY(-50%);
+      .calendar_border {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        height: 24px;
+        transform: translateY(-50%);
 
-                background-color: $color-text-base-inverse;
-            }
+        background-color: $color-text-base-inverse;
+      }
 
-            .month-year-item {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 24px;
+      .month-year-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+
+        font-size: 14px;
+        color: $color-text-base-content;
+        font-weight: $font-regular;
+        text-align: center;
+        text-transform: uppercase;
+
+        .left-year-show {
+          color: $color-text-base-content;
+          font-size: 14px;
+          font-weight: $font-bold;
+        }
 
-                font-size: 14px;
-                color: $color-text-base-content;
-                font-weight: $font-regular;
-                text-align: center;
-                text-transform: uppercase;
+        &:hover {
+          color: $color-text-base-heading;
+          cursor: pointer;
 
-                .left-year-show {
-                    color: $color-text-base-content;
-                    font-size: 14px;
-                    font-weight: $font-bold;
-                }
+          background-color: $color-text-base-content;
+          border-radius: 2px;
+        }
+      }
 
-                &:hover {
-                    color: $color-text-base-heading;
-                    cursor: pointer; 
+      cdk-virtual-scroll-viewport {
+        ::-webkit-scrollbar {
+          display: none;
+        }
 
-                    background-color: $color-text-base-content;
-                    border-radius: 2px;
-                }
-            }
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
 
-            cdk-virtual-scroll-viewport {
-                ::-webkit-scrollbar {
-                    display: none;
-                }
+      .cdk-virtual-scroll-content-wrapper {
+        padding: 133px 2px 0 2px;
+      }
+    }
 
-                &::-webkit-scrollbar {
-                    display: none;
-                }
-            }
+    .full-calendars-list {
+      flex: 1;
+      max-height: 290px;
+      min-width: 264px;
+      overflow: hidden;
 
-            .cdk-virtual-scroll-content-wrapper {
-                padding: 133px 2px 0 2px;
-            }
+      .full_list {
+        height: 100%;
+
+        .selfScroll {
+          width: 100%;
+          height: 100%;
         }
+      }
+    }
+  }
+
+  .time_picker {
+    //width: 150px;
+
+    .time_picker_head {
+      height: 36px;
+      display: flex;
+      padding: 0 12px;
+      align-items: center;
+      justify-content: space-between;
+
+      .selected_time {
+        font-size: 14px;
+        font-weight: $font-extrabold;
+        color: $color-text-base-heading;
+      }
+
+      .sel_now {
+        color: $color-icon-base-positive;
+        font-size: 14px;
+        font-weight: $font-bold;
+
+        &:hover {
+          cursor: pointer;
+          color: $color-surface-input-positive-hover;
+        }
+      }
+    }
 
-        .full-calendars-list {
-            flex: 1;
-            max-height: 290px;
-            min-width: 264px;
-            overflow: hidden;
+    .time_picker_body {
+      .picker_body_head {
+        display: flex;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        background-color: $color-surface-input-neutral;
+        margin: 0 4px 2px 4px;
+        border-radius: 2px;
+
+        div {
+          flex: 0 0 33%;
+          text-align: center;
+
+          font-size: 10px;
+          font-weight: $font-bold;
+          color: $color-text-base-content;
+
+          &.active {
+            color: $color-text-base-content;
+          }
+        }
+      }
 
-            .full_list {
-                height: 100%;
+      .picker_body {
+        position: relative;
+        height: 155px;
+        display: flex;
+        justify-content: center;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 31px;
+          top: -1px;
+          left: 0;
+          pointer-events: none;
+
+          background: linear-gradient(
+            to bottom,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          z-index: 11;
+        }
 
-                .selfScroll {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
+        &::before {
+          content: "";
+          position: absolute;
+          pointer-events: none;
+          width: 100%;
+          height: 31px;
+          bottom: -1px;
+          left: 0;
+          background: linear-gradient(
+            to top,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          z-index: 11;
         }
-    }
 
-    .time_picker {
-        //width: 150px;
+        .picker_line {
+          position: absolute;
+          width: calc(100% - 8px);
+          height: 22px;
+          top: 50%;
+          left: 4px;
+          border-radius: 2px;
+
+          transform: translateY(-50%);
+          background-color: $color-surface-input-neutral;
+
+          span {
+            position: absolute;
+            left: 30%;
+
+            font-size: 14px;
+            font-weight: $font-regular;
+            color: $color-text-base-content;
+          }
+        }
+
+        .scroll_pickers {
+          position: relative;
+          height: 22px;
+          flex: 0 0 33.3%;
+          height: 100%;
+          padding: 67px 0;
+          margin: 0 7px;
+
+          overflow: auto;
+          text-align: center;
+
+          -ms-overflow-style: none;
+          /* Internet Explorer 10+ */
+          scrollbar-width: none;
+          /* Firefox */
+
+          z-index: 10;
+
+          &:first-child {
+            flex: 0 0 28px;
+          }
+
+          &:nth-child(2) {
+            flex: 0 0 36px;
+          }
+
+          &:nth-child(3) {
+            flex: 0 0 38px;
+          }
 
-        .time_picker_head {
-            height: 36px;
+          &::-webkit-scrollbar {
+            display: none;
+            /* Safari and Chrome */
+          }
+
+          .scroll_item {
+            height: 22px;
             display: flex;
-            padding: 0 12px;
             align-items: center;
-            justify-content: space-between;
-
-            .selected_time {
-                font-size: 14px;
-                font-weight: $font-extrabold;
-                color: $color-text-base-heading;
-            }
+            justify-content: center;
 
-            .sel_now {
-                color: $color-icon-base-positive;
-                font-size: 14px;
-                font-weight: $font-bold;
+            font-size: 14px;
+            color: $color-text-base-content;
+            font-weight: $font-regular;
+            user-select: none;
 
-                &:hover {
-                    cursor: pointer;
-                    color: $color-surface-input-positive-hover;
-                }
+            &:hover {
+              color: $color-icon-base-positive;
+              cursor: pointer;
             }
+          }
+
+          &:hover {
+            // background-color: #f3f3f366;
+            // box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
+          }
         }
+      }
+    }
 
-        .time_picker_body {
-            .picker_body_head {
-                display: flex;
-                height: 22px;
-                display: flex;
-                align-items: center;
-                background-color: $color-surface-input-neutral;
-                margin: 0 4px 2px 4px;
-                border-radius: 2px;
-
-                div {
-                    flex: 0 0 33%;
-                    text-align: center;
-
-                    font-size: 10px;
-                    font-weight: $font-bold;
-                    color: $color-text-base-content;
-
-                    &.active {
-                        color: $color-text-base-content;
-                    }
-                }
-            }
+    .picker_buttons {
+      display: flex;
+      padding: 6px;
+      justify-content: space-between;
 
-            .picker_body {
-                position: relative;
-                height: 155px;
-                display: flex;
-                justify-content: center;
-
-                &::after {
-                    content: '';
-                    position: absolute;
-                    width: 100%;
-                    height: 31px;
-                    top: -1px;
-                    left: 0;
-                    pointer-events: none;
-
-                    background: linear-gradient(to bottom,
-                            rgba(255, 255, 255, 1) 0%,
-                            rgba(255, 255, 255, 0) 100%);
-                    z-index: 11;
-                }
+      .pick_button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        padding: 0 12px;
+        text-align: center;
+        border-radius: 2px;
 
-                &::before {
-                    content: '';
-                    position: absolute;
-                    pointer-events: none;
-                    width: 100%;
-                    height: 31px;
-                    bottom: -1px;
-                    left: 0;
-                    background: linear-gradient(to top,
-                            rgba(255, 255, 255, 1) 0%,
-                            rgba(255, 255, 255, 0) 100%);
-                    z-index: 11;
-                }
+        font-size: 12px;
+        font-weight: $font-bold;
+        color: $color-text-base-content-subtle;
 
-                .picker_line {
-                    position: absolute;
-                    width: calc(100% - 8px);
-                    height: 22px;
-                    top: 50%;
-                    left: 4px;
-                    border-radius: 2px;
-
-                    transform: translateY(-50%);
-                    background-color: $color-surface-input-neutral;
-
-                    span {
-                        position: absolute;
-                        left: 30%;
-
-                        font-size: 14px;
-                        font-weight: $font-regular;
-                        color: $color-text-base-content;
-                    }
-                }
+        &:hover {
+          background-color: $color-surface-input-neutral-hover;
+          color: $color-text-base-content;
+          cursor: pointer;
+        }
 
-                .scroll_pickers {
-                    position: relative;
-                    height: 22px;
-                    flex: 0 0 33.3%;
-                    height: 100%;
-                    padding: 67px 0;
-                    margin: 0 7px;
-
-                    overflow: auto;
-                    text-align: center;
-
-                    -ms-overflow-style: none;
-                    /* Internet Explorer 10+ */
-                    scrollbar-width: none;
-                    /* Firefox */
-
-                    z-index: 10;
-
-                    &:first-child {
-                        flex: 0 0 28px;
-                    }
-
-                    &:nth-child(2) {
-                        flex: 0 0 36px;
-                    }
-
-                    &:nth-child(3) {
-                        flex: 0 0 38px;
-                    }
-
-                    &::-webkit-scrollbar {
-                        display: none;
-                        /* Safari and Chrome */
-                    }
-
-                    .scroll_item {
-                        height: 22px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        font-size: 14px;
-                        color: $color-text-base-content;
-                        font-weight: $font-regular;
-                        user-select: none;
-
-                        &:hover {
-                            color: $color-icon-base-positive;
-                            cursor: pointer;
-                        }
-                    }
-
-                    &:hover {
-                        //background-color: #f3f3f366;
-                        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
-                    }
-                }
-            }
+        &.set_button {
+          width: 57px;
+          text-align: center;
+          background-color: $color-icon-base-positive;
+          color: $color-text-base-inverse;
+
+          &:hover {
+            background-color: $color-surface-input-positive-focus;
+          }
         }
+      }
+    }
+  }
 
-        .picker_buttons {
-            display: flex;
-            padding: 6px;
-            justify-content: space-between;
-
-            .pick_button {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 32px;
-                padding: 0 12px;
-                text-align: center;
-                border-radius: 2px;
+  &.dark_picker {
+    background-color: $color-text-base-content;
 
-                font-size: 12px;
-                font-weight: $font-bold;
-                color: $color-text-base-content-subtle;
+    .month-years-size {
+      width: 40px;
+      background-color: $color-text-base-heading;
 
-                &:hover {
-                    background-color: $color-surface-input-neutral-hover;
-                    color: $color-text-base-content;
-                    cursor: pointer;
-                }
+      .calendar_border {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        height: 26px;
+        transform: translateY(-50%);
 
-                &.set_button {
-                    width: 57px;
-                    text-align: center;
-                    background-color: $color-icon-base-positive;
-                    color: $color-text-base-inverse;
+        background-color: $color-text-base-content;
+      }
 
-                    &:hover {
-                        background-color: $color-surface-input-positive-focus;
-                    }
-                }
-            }
+      .month-year-item {
+        height: 22px;
+        color: $color-icon-base-disable;
+        font-size: 11px;
+
+        .left-year-show {
+          color: $color-inverse-icon-base-neutral;
+          font-size: 11px;
+        }
+
+        &.current_month_year {
+          color: $color-text-base-inverse;
+
+          .left-year-show {
+            color: $color-text-base-inverse;
+            font-weight: $font-bold;
+          }
         }
+
+        &:hover {
+          color: $color-text-base-inverse;
+
+          background-color: $color-text-base-content;
+        }
+      }
+
+      .cdk-virtual-scroll-content-wrapper {
+        padding: 133px 4px 0 4px;
+      }
     }
 
-    &.dark_picker {
-        background-color: $color-text-base-content;
+    .date_picker {
+      margin: 4px;
 
-        .month-years-size {
-            width: 40px;
-            background-color: $color-text-base-heading;
+      .full-calendars-list {
+        min-width: 184px;
 
-            .calendar_border {
-                position: absolute;
-                top: 50%;
-                width: 100%;
-                height: 26px;
-                transform: translateY(-50%);
+        .calendar_view {
+          width: 182px;
+          padding-top: 6px;
+          background-color: $color-text-base-content;
 
-                background-color: $color-text-base-content;
-            }
+          .calendar_view_head {
+            padding: 0 6px;
 
-            .month-year-item {
-                height: 22px;
-                color: $color-icon-base-disable;
-                font-size: 11px;
+            .month_name {
+              padding: 0 4px;
 
-                .left-year-show {
-                    color: $color-inverse-icon-base-neutral;
-                    font-size: 11px;
-                }
+              color: $color-text-base-inverse;
+              font-size: 11px;
 
-                &.current_month_year {
-                    color: $color-text-base-inverse;
+              .year_hold {
+                margin-right: 0;
 
-                    .left-year-show {
-                        color: $color-text-base-inverse;
-                        font-weight: $font-bold;
-                    }
-                }
+                color: $color-text-base-inverse;
+              }
+            }
 
-                &:hover {
-                    color: $color-text-base-inverse;
+            .today {
+              padding: 0 4px;
 
-                    background-color: $color-text-base-content;
-                }
+              color: $color-icon-base-positive;
+              font-size: 11px;
+              text-transform: uppercase;
+
+              &:hover {
+                color: $color-text-base-inverse;
+              }
             }
+          }
+
+          .calendars_list_view {
+            .calendar_indicator {
+              margin: 12px 10px;
+
+              color: $color-text-base-content-subtle;
+              font-size: 11px;
+              text-transform: uppercase;
+
+              &.current_year {
+                color: $color-text-base-inverse;
+              }
 
-            .cdk-virtual-scroll-content-wrapper {
-                padding: 133px 4px 0 4px;
+              &.full_calendar {
+                margin-bottom: 4px;
+              }
             }
-        }
 
-        .date_picker {
-            margin: 4px;
-
-            .full-calendars-list {
-                min-width: 184px;
-
-                .calendar_view {
-                    width: 182px;
-                    padding-top: 6px;
-                    background-color: $color-text-base-content;
-
-                    .calendar_view_head {
-                        padding: 0 6px;
-
-                        .month_name {
-                            padding: 0 4px;
-
-                            color: $color-text-base-inverse;
-                            font-size: 11px;
-
-                            .year_hold {
-                                margin-right: 0;
-
-                                color: $color-text-base-inverse;
-                            }
-                        }
-
-                        .today {
-                            padding: 0 4px;
-
-                            color: $color-icon-base-positive;
-                            font-size: 11px;
-                            text-transform: uppercase;
-
-                            &:hover {
-                                color: $color-text-base-inverse;
-                            }
-                        }
-                    }
-
-                    .calendars_list_view {
-                        .calendar_indicator {
-                            margin: 12px 10px;
-
-                            color: $color-text-base-content-subtle;
-                            font-size: 11px;
-                            text-transform: uppercase;
-
-                            &.current_year {
-                                color: $color-text-base-inverse;
-                            }
-
-                            &.full_calendar {
-                                margin-bottom: 4px;
-                            }
-                        }
-
-                        .calendar_month_days {
-                            display: grid;
-                            grid-template-columns: repeat(7, 1fr);
-                            gap: 4px;
-                            margin: 0 6px 4px 6px;
-                            padding: 0;
-
-                            .cal_day {
-                                width: 22px;
-                                height: 22px;
-                                margin: 0;
-
-                                font-size: 9px;
-                                color: $color-inverse-icon-base-neutral;
-                                text-align: center;
-                            }
-                        }
-
-                        .month_list {
-                            display: grid;
-                            grid-template-columns: repeat(3, 1fr);
-                            column-gap: 4px;
-                            row-gap: 12px;
-                            justify-content: unset;
-                            margin: 0 6px;
-
-                            .month_list_item {
-                                margin: 0;
-                                height: 22px;
-
-                                color: $color-text-base-content-subtle;
-                                font-size: 11px;
-
-                                &:hover:not(.current_month) {
-                                    background-color: $color-text-base-heading;
-                                    color: $color-text-base-inverse;
-                                    border-radius: 2px;
-                                    cursor: pointer;
-                                }
-
-                                &.current_month {
-                                    color: $color-text-base-inverse;
-                                    background-color: $color-inverse-surface-input-positive;
-                                    border-radius: 2px;
-                                    cursor: pointer;
-                                }
-                            }
-
-                            &.current_year {
-                                .month_list_item {
-                                    color: $color-text-base-inverse;
-                                }
-                            }
-                        }
-
-                        .calendar_days {
-                            display: grid;
-                            grid-template-columns: repeat(7, 1fr);
-                            gap: 4px;
-                            margin: 0 6px;
-                            padding: 0;
-                            height: auto;
-
-                            .calendar_day {
-                                width: 22px;
-                                height: 22px;
-                                margin: 0;
-                                color: $color-icon-base-neutral;
-                                font-size: 11px;
-
-                                &.current_day {
-                                    color: $color-text-base-inverse;
-                                    background-color: $color-inverse-surface-input-positive;
-                                    border-radius: 2px;
-                                }
-
-                                &.selected_day {
-                                    background-color: $color-inverse-surface-input-positive;
-                                    color: $color-text-base-inverse;
-                                    border-radius: 2px;
-                                }
-
-                                &.day_in_current_month {
-                                    color: $color-text-base-inverse;
-                                }
-
-                                &.weekend_day_in_current_month {
-                                    color: $color-inverse-icon-base-neutral;
-                                }
-
-                                &:not(.empty_day):not(.selected_day):hover {
-                                    background-color: $color-text-base-heading;
-                                    border-radius: 2px;
-
-                                    cursor: pointer;
-                                    color: $color-text-base-inverse;
-                                }
-                            }
-                        }
-                    }
-                }
+            .calendar_month_days {
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 4px;
+              margin: 0 6px 4px 6px;
+              padding: 0;
+
+              .cal_day {
+                width: 22px;
+                height: 22px;
+                margin: 0;
+
+                font-size: 9px;
+                color: $color-inverse-icon-base-neutral;
+                text-align: center;
+              }
             }
-        }
 
-        .time_picker {
-            width: 156px;
-            margin: 4px;
+            .month_list {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              column-gap: 4px;
+              row-gap: 12px;
+              justify-content: unset;
+              margin: 0 6px;
 
-            .time_picker_head {
-                height: 18px;
-                padding: 0 4px;
-                margin-bottom: 4px;
+              .month_list_item {
+                margin: 0;
+                height: 22px;
 
-                .selected_time {
-                    color: $color-text-base-inverse;
-                    font-size: 11px;
-                }
+                color: $color-text-base-content-subtle;
+                font-size: 11px;
 
-                .sel_now {
-                    color: $color-icon-base-positive;
-                    font-size: 11px;
-                    text-transform: uppercase;
+                &:hover:not(.current_month) {
+                  background-color: $color-text-base-heading;
+                  color: $color-text-base-inverse;
+                  border-radius: 2px;
+                  cursor: pointer;
                 }
-            }
 
-            .time_picker_body {
-                .picker_body_head {
-                    display: grid;
-                    grid-template-columns: repeat(3, 1fr);
-                    column-gap: 4px;
-                    margin: 0 0 4px 0;
-                    padding: 2px;
-                    background: none;
-
-                    div {
-                        color: $color-inverse-icon-base-neutral;
-                        font-size: 9px;
-                        text-align: center;
-                        text-transform: uppercase;
-                    }
+                &.current_month {
+                  color: $color-text-base-inverse;
+                  background-color: $color-inverse-surface-input-positive;
+                  border-radius: 2px;
+                  cursor: pointer;
                 }
+              }
 
-                .picker_body {
-                    height: 176px;
-                    display: grid;
-                    grid-template-columns: repeat(3, 1fr);
-                    column-gap: 4px;
-                    padding: 0 2px;
-
-                    &::before {
-                        display: none;
-                    }
-
-                    &::after {
-                        display: none;
-                    }
-
-                    .picker_line {
-                        left: 0;
-                        width: 100%;
-                        background-color: $color-inverse-surface-input-positive;
-
-                        .border_line {
-                            left: 33.3%;
-                            width: 1px;
-                            height: 12px;
-                            margin-top: 5px;
-                            background-color: $color-icon-base-positive;
-                            opacity: 0.4;
-                            border-radius: 2px;
-
-                            &.line_2 {
-                                left: 66.6%;
-                            }
-                        }
-                    }
-
-                    .scroll_pickers {
-                        margin: 0;
-                        padding: 77px 0;
-
-                        .scroll_item {
-                            color: $color-inverse-icon-base-neutral;
-                            font-size: 11px;
-
-                            &.active_item {
-                                color: $color-text-base-inverse;
-                            }
-                        }
-                    }
+              &.current_year {
+                .month_list_item {
+                  color: $color-text-base-inverse;
                 }
+              }
+            }
 
-                .picker_buttons {
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    column-gap: 4px;
+            .calendar_days {
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 4px;
+              margin: 0 6px;
+              padding: 0;
+              height: auto;
 
-                    margin-top: 6px;
-                    padding: 4px 0 0 0;
-                    border-top: 1px solid $color-inverse-surface-input-neutral-focus;
+              .calendar_day {
+                width: 22px;
+                height: 22px;
+                margin: 0;
+                color: $color-icon-base-neutral;
+                font-size: 11px;
 
-                    .pick_button {
-                        height: 18px;
-                        background-color: $color-text-base-heading;
+                &.current_day {
+                  color: $color-text-base-inverse;
+                  background-color: $color-inverse-surface-input-positive;
+                  border-radius: 2px;
+                }
+
+                &.selected_day {
+                  background-color: $color-inverse-surface-input-positive;
+                  color: $color-text-base-inverse;
+                  border-radius: 2px;
+                }
+
+                &.day_in_current_month {
+                  color: $color-text-base-inverse;
+                }
 
-                        color: $color-text-base-inverse;
-                        font-size: 11px;
-                        text-transform: uppercase;
+                &.weekend_day_in_current_month {
+                  color: $color-inverse-icon-base-neutral;
+                }
 
-                        border-radius: 1px;
+                &:not(.empty_day):not(.selected_day):hover {
+                  background-color: $color-text-base-heading;
+                  border-radius: 2px;
 
-                        &.set_button {
-                            width: auto;
-                            background-color: $color-inverse-surface-input-positive-no-percent;
-                        }
-                    }
+                  cursor: pointer;
+                  color: $color-text-base-inverse;
                 }
+              }
             }
+          }
         }
+      }
     }
-}
 
-.calendar_view {
-    width: 260px;
-    padding-top: 12px;
-    background-color: $color-text-base-inverse;
-
-    .calendar_view_head {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 12px;
-        padding: 0 12px;
+    .time_picker {
+      width: 156px;
+      margin: 4px;
 
-        .month_name {
-            font-size: 12px;
-            font-weight: $font-bold;
-            color: $color-text-base-heading;
+      .time_picker_head {
+        height: 18px;
+        padding: 0 4px;
+        margin-bottom: 4px;
 
-            .year_hold {
-                margin-right: 5px;
-                text-transform: uppercase;
-                color: $color-text-base-heading;
+        .selected_time {
+          color: $color-text-base-inverse;
+          font-size: 11px;
+        }
 
-                &:hover {
-                    color: $color-text-base-content;
-                }
+        .sel_now {
+          color: $color-icon-base-positive;
+          font-size: 11px;
+          text-transform: uppercase;
+        }
+      }
+
+      .time_picker_body {
+        .picker_body_head {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          column-gap: 4px;
+          margin: 0 0 4px 0;
+          padding: 2px;
+          background: none;
+
+          div {
+            color: $color-inverse-icon-base-neutral;
+            font-size: 9px;
+            text-align: center;
+            text-transform: uppercase;
+          }
+        }
 
-                cursor: pointer;
+        .picker_body {
+          height: 176px;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          column-gap: 4px;
+          padding: 0 2px;
+
+          &::before {
+            display: none;
+          }
+
+          &::after {
+            display: none;
+          }
+
+          .picker_line {
+            left: 0;
+            width: 100%;
+            background-color: $color-inverse-surface-input-positive;
+
+            .border_line {
+              left: 33.3%;
+              width: 1px;
+              height: 12px;
+              margin-top: 5px;
+              background-color: $color-icon-base-positive;
+              opacity: 0.4;
+              border-radius: 2px;
+
+              &.line_2 {
+                left: 66.6%;
+              }
             }
-        }
+          }
 
-        .today {
-            font-size: 12px;
-            font-weight: $font-bold;
-            color: $color-icon-base-positive;
-            cursor: pointer;
+          .scroll_pickers {
+            margin: 0;
+            padding: 77px 0;
 
-            &:hover {
-                color: $color-surface-input-positive-hover;
+            .scroll_item {
+              color: $color-inverse-icon-base-neutral;
+              font-size: 11px;
+
+              &.active_item {
+                color: $color-text-base-inverse;
+              }
             }
+          }
         }
-    }
 
-    .calendars_list_view {
-        cdk-virtual-scroll-viewport {
-            height: 230px;
-            min-height: 230px;
+        .picker_buttons {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          column-gap: 4px;
 
-            ::-webkit-scrollbar {
-                display: none;
-            }
+          margin-top: 6px;
+          padding: 4px 0 0 0;
+          border-top: 1px solid $color-inverse-surface-input-neutral-focus;
+
+          .pick_button {
+            height: 18px;
+            background-color: $color-text-base-heading;
 
-            &::-webkit-scrollbar {
-                display: none;
+            color: $color-text-base-inverse;
+            font-size: 11px;
+            text-transform: uppercase;
+
+            border-radius: 1px;
+
+            &.set_button {
+              width: auto;
+              background-color: $color-inverse-surface-input-positive-no-percent;
             }
+          }
+        }
+      }
+    }
+  }
+}
 
-            .cdk-virtual-scroll-content-wrapper {}
+.calendar_view {
+  width: 260px;
+  padding-top: 12px;
+  background-color: $color-text-base-inverse;
+
+  .calendar_view_head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding: 0 12px;
+
+    .month_name {
+      font-size: 12px;
+      font-weight: $font-bold;
+      color: $color-text-base-heading;
+
+      .year_hold {
+        margin-right: 5px;
+        text-transform: uppercase;
+        color: $color-text-base-heading;
+
+        &:hover {
+          color: $color-text-base-content;
         }
 
-        .calendar_indicator {
-            margin: 12px;
-            height: 18px;
+        cursor: pointer;
+      }
+    }
 
-            font-size: 12px;
-            color: $color-text-base-content-subtle;
-            font-weight: $font-bold;
-        }
+    .today {
+      font-size: 12px;
+      font-weight: $font-bold;
+      color: $color-icon-base-positive;
+      cursor: pointer;
 
-        .calendar_month_days {
-            padding: 0 3px;
+      &:hover {
+        color: $color-surface-input-positive-hover;
+      }
+    }
+  }
 
-            &.hideVisibility {
-                visibility: hidden;
-            }
+  .calendars_list_view {
+    cdk-virtual-scroll-viewport {
+      height: 230px;
+      min-height: 230px;
 
-            .cal_day {
-                width: 24px;
-                margin: 0 6px;
+      ::-webkit-scrollbar {
+        display: none;
+      }
 
-                font-size: 12px;
-                font-weight: $font-bold;
-                color: $color-text-base-content-subtle;
-            }
-        }
+      &::-webkit-scrollbar {
+        display: none;
+      }
 
-        .calendar_days {
-            height: 140px;
-            display: flex;
-            flex-wrap: wrap;
-            padding: 0 3px;
-
-            .calendar_day {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 24px;
-                width: 24px;
-                height: 24px;
-                margin: 0 6px;
-
-                font-size: 14px;
-                font-weight: $font-regular;
-                color: $color-text-base-content-subtle;
+      .cdk-virtual-scroll-content-wrapper {
+      }
+    }
 
-                &.current_day {
-                    color: $color-text-base-inverse;
-                    background-color: $color-text-base-content;
-                    border-radius: 2px;
-                }
+    .calendar_indicator {
+      margin: 12px;
+      height: 18px;
 
-                &.selected_day {
-                    background-color: $color-text-base-content;
-                    color: $color-text-base-inverse;
-                    border-radius: 2px;
-                }
+      font-size: 12px;
+      color: $color-text-base-content-subtle;
+      font-weight: $font-bold;
+    }
 
-                &:not(.empty_day):not(.selected_day):hover {
-                    background-color: $color-text-base-heading;
-                    border-radius: 2px;
+    .calendar_month_days {
+      padding: 0 3px;
 
-                    cursor: pointer;
-                    color: $color-text-base-content;
-                }
-            }
-        }
+      &.hideVisibility {
+        visibility: hidden;
+      }
+
+      .cal_day {
+        width: 24px;
+        margin: 0 6px;
+
+        font-size: 12px;
+        font-weight: $font-bold;
+        color: $color-text-base-content-subtle;
+      }
     }
 
-    .month_list {
+    .calendar_days {
+      height: 140px;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 3px;
+
+      .calendar_day {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        height: 140px;
-
-        .month_list_item {
-            flex: 0 0 50px;
-            height: 24px;
-            margin: 0px 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 3px;
-            font-size: 12px;
-            color: $color-text-base-content-subtle;
-            font-weight: $font-regular;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 24px;
+        width: 24px;
+        height: 24px;
+        margin: 0 6px;
+
+        font-size: 14px;
+        font-weight: $font-regular;
+        color: $color-text-base-content-subtle;
+
+        &.current_day {
+          color: $color-text-base-inverse;
+          background-color: $color-text-base-content;
+          border-radius: 2px;
+        }
 
-            &:hover:not(.current_month) {
-                background-color: $color-surface-input-disable;
-                color: $color-text-base-content;
-                border-radius: 2px;
-                cursor: pointer;
-            }
+        &.selected_day {
+          background-color: $color-text-base-content;
+          color: $color-text-base-inverse;
+          border-radius: 2px;
+        }
 
-            &.current_month {
-                color: $color-text-base-content;
-                background-color: $color-surface-input-neutral;
-                border-radius: 2px;
-                cursor: pointer;
-            }
+        &:not(.empty_day):not(.selected_day):hover {
+          background-color: $color-text-base-heading;
+          border-radius: 2px;
+
+          cursor: pointer;
+          color: $color-text-base-content;
         }
+      }
     }
+  }
+
+  .month_list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    height: 140px;
+
+    .month_list_item {
+      flex: 0 0 50px;
+      height: 24px;
+      margin: 0px 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 3px;
+      font-size: 12px;
+      color: $color-text-base-content-subtle;
+      font-weight: $font-regular;
+
+      &:hover:not(.current_month) {
+        background-color: $color-surface-input-disable;
+        color: $color-text-base-content;
+        border-radius: 2px;
+        cursor: pointer;
+      }
+
+      &.current_month {
+        color: $color-text-base-content;
+        background-color: $color-surface-input-neutral;
+        border-radius: 2px;
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .dropdown {
-    z-index: 999 !important;
+  z-index: 999 !important;
 }
 
-input[type='date']::-webkit-inner-spin-button,
-input[type='date']::-webkit-calendar-picker-indicator {
-    display: none;
-    -webkit-appearance: none;
-}
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}