From fc793eae6ec25f986383d7d5dcf3559e2526d83c Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Fri, 7 Oct 2022 12:54:44 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20?=
 =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20event,=20=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20"=D0=A1=D0=BE=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C"=20=D0=B8=20"=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D1=82=D1=8C"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/variables.css                  |   1 +
 src/assets/icons/down-arrow-2.svg             |   2 +-
 src/components/buttons/AddEventButton.vue     |  21 ++
 src/components/buttons/ButtonPlus.vue         |  22 ++
 .../iconsComponents/ArrowDownIcon.vue         |   5 +
 src/components/iconsComponents/ClockIcon.vue  |   5 +
 src/components/iconsComponents/CloseIcon.vue  |   5 +
 src/components/iconsComponents/MailIcon.vue   |   5 +
 src/components/iconsComponents/PlusIcon.vue   |   5 +
 .../iconsComponents/UserSmallIcon.vue         |   5 +
 .../iconsComponents/basicIcon/BasicIcon.vue   |   7 +-
 .../pages/calendarPages/CalendarPages.vue     |   6 +-
 .../pages/calendarPages/FormChangeEvent.vue   | 216 ++++++++++++++++++
 13 files changed, 301 insertions(+), 4 deletions(-)
 create mode 100644 src/components/buttons/AddEventButton.vue
 create mode 100644 src/components/buttons/ButtonPlus.vue
 create mode 100644 src/components/iconsComponents/ArrowDownIcon.vue
 create mode 100644 src/components/iconsComponents/ClockIcon.vue
 create mode 100644 src/components/iconsComponents/CloseIcon.vue
 create mode 100644 src/components/iconsComponents/MailIcon.vue
 create mode 100644 src/components/iconsComponents/PlusIcon.vue
 create mode 100644 src/components/iconsComponents/UserSmallIcon.vue
 create mode 100644 src/components/pages/calendarPages/FormChangeEvent.vue

diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
index 81efe5b..813b39e 100644
--- a/src/assets/css/variables.css
+++ b/src/assets/css/variables.css
@@ -1,6 +1,7 @@
 :root {
 	--bg-lavender-color: #E9E9F6;
 	--bg-white-color: #F8F8FF;
+	--bg-ligth-blue-color: #E6EAFC;
 	--font-dark-blue-color: #252850;
 	--font-black-color: #090A15;
 	--btn-blue-color: #4169E1;
diff --git a/src/assets/icons/down-arrow-2.svg b/src/assets/icons/down-arrow-2.svg
index 089858b..21171a6 100644
--- a/src/assets/icons/down-arrow-2.svg
+++ b/src/assets/icons/down-arrow-2.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z" fill="#252850"/>
 </svg>
diff --git a/src/components/buttons/AddEventButton.vue b/src/components/buttons/AddEventButton.vue
new file mode 100644
index 0000000..a0d4a48
--- /dev/null
+++ b/src/components/buttons/AddEventButton.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+  button(class="add-button-event") Создать событие
+</template>
+
+<script>
+  export default {
+    name: "AddEventButton"
+  }
+</script>
+
+<style lang="sass">
+  .add-button-event
+    font-family: Raleway
+    font-style: normal
+    font-size: 16px
+    width: fit-content
+    color: var(--bg-white-color)
+    background-color: var(--btn-blue-color)
+    padding: 11px 16px 11px 16px
+    border-radius: 4px
+</style>
diff --git a/src/components/buttons/ButtonPlus.vue b/src/components/buttons/ButtonPlus.vue
new file mode 100644
index 0000000..e5d8875
--- /dev/null
+++ b/src/components/buttons/ButtonPlus.vue
@@ -0,0 +1,22 @@
+<template lang="pug">
+  button(class="button-plus")
+    basic-icon(width="12" height="12" icon-color="#4169E1" )
+      plus-icon
+</template>
+
+<script>
+  import PlusIcon from "../iconsComponents/PlusIcon";
+  import BasicIcon from "../iconsComponents/basicIcon/BasicIcon";
+  export default {
+    name: "ButtonPlus",
+    components: {BasicIcon, PlusIcon}
+  }
+</script>
+
+<style lang="sass">
+  .button-plus
+    width: fit-content
+    background-color: rgba(65, 105, 225, 0.25)
+    padding: 7px 7px 3px 7px
+    border-radius: 50%
+</style>
diff --git a/src/components/iconsComponents/ArrowDownIcon.vue b/src/components/iconsComponents/ArrowDownIcon.vue
new file mode 100644
index 0000000..007e6e5
--- /dev/null
+++ b/src/components/iconsComponents/ArrowDownIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/ClockIcon.vue b/src/components/iconsComponents/ClockIcon.vue
new file mode 100644
index 0000000..41e0aff
--- /dev/null
+++ b/src/components/iconsComponents/ClockIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M10.75 6.5C10.75 6.08579 10.4142 5.75 10 5.75C9.58579 5.75 9.25 6.08579 9.25 6.5H10.75ZM10 10.5H9.25C9.25 10.6989 9.32902 10.8897 9.46967 11.0303L10 10.5ZM11.4697 13.0303C11.7626 13.3232 12.2374 13.3232 12.5303 13.0303C12.8232 12.7374 12.8232 12.2626 12.5303 11.9697L11.4697 13.0303ZM9.25 6.5V10.5H10.75V6.5H9.25ZM9.46967 11.0303L11.4697 13.0303L12.5303 11.9697L10.5303 9.96967L9.46967 11.0303ZM18.25 10.5C18.25 15.0563 14.5563 18.75 10 18.75V20.25C15.3848 20.25 19.75 15.8848 19.75 10.5H18.25ZM10 18.75C5.44365 18.75 1.75 15.0563 1.75 10.5H0.25C0.25 15.8848 4.61522 20.25 10 20.25V18.75ZM1.75 10.5C1.75 5.94365 5.44365 2.25 10 2.25V0.75C4.61522 0.75 0.25 5.11522 0.25 10.5H1.75ZM10 2.25C14.5563 2.25 18.25 5.94365 18.25 10.5H19.75C19.75 5.11522 15.3848 0.75 10 0.75V2.25Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/CloseIcon.vue b/src/components/iconsComponents/CloseIcon.vue
new file mode 100644
index 0000000..c48db87
--- /dev/null
+++ b/src/components/iconsComponents/CloseIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M15.5303 1.53033C15.8232 1.23744 15.8232 0.762563 15.5303 0.46967C15.2374 0.176777 14.7626 0.176777 14.4697 0.46967L15.5303 1.53033ZM0.46967 14.4697C0.176777 14.7626 0.176777 15.2374 0.46967 15.5303C0.762563 15.8232 1.23744 15.8232 1.53033 15.5303L0.46967 14.4697ZM1.53034 0.46967C1.23745 0.176777 0.762577 0.176777 0.469684 0.46967C0.176791 0.762563 0.176791 1.23744 0.469684 1.53033L1.53034 0.46967ZM14.4697 15.5303C14.7626 15.8232 15.2375 15.8232 15.5304 15.5303C15.8232 15.2374 15.8232 14.7626 15.5304 14.4697L14.4697 15.5303ZM14.4697 0.46967L0.46967 14.4697L1.53033 15.5303L15.5303 1.53033L14.4697 0.46967ZM0.469684 1.53033L14.4697 15.5303L15.5304 14.4697L1.53034 0.46967L0.469684 1.53033Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/MailIcon.vue b/src/components/iconsComponents/MailIcon.vue
new file mode 100644
index 0000000..d82c35c
--- /dev/null
+++ b/src/components/iconsComponents/MailIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M8.58579 9.08574L9.11612 8.55541L9.11611 8.55541L8.58579 9.08574ZM11.4142 9.08574L10.8839 8.55541L10.8839 8.55541L11.4142 9.08574ZM2 2.25H18V0.75H2V2.25ZM18.25 2.5V14.5H19.75V2.5H18.25ZM18 14.75H2V16.25H18V14.75ZM1.75 14.5V2.5H0.25V14.5H1.75ZM2 14.75C1.86193 14.75 1.75 14.6381 1.75 14.5H0.25C0.25 15.4665 1.0335 16.25 2 16.25V14.75ZM18.25 14.5C18.25 14.6381 18.1381 14.75 18 14.75V16.25C18.9665 16.25 19.75 15.4665 19.75 14.5H18.25ZM2 0.75C1.51696 0.75 1.07843 0.946697 0.762563 1.26256L1.82322 2.32322C1.86929 2.27716 1.93076 2.25 2 2.25V0.75ZM0.762563 1.26256C0.446697 1.57843 0.25 2.01696 0.25 2.5H1.75C1.75 2.43076 1.77716 2.36929 1.82322 2.32322L0.762563 1.26256ZM18 2.25C18.0692 2.25 18.1307 2.27716 18.1768 2.32322L19.2374 1.26256C18.9216 0.946695 18.483 0.75 18 0.75V2.25ZM18.1768 2.32322C18.2228 2.36928 18.25 2.43076 18.25 2.5H19.75C19.75 2.01696 19.5533 1.57843 19.2374 1.26256L18.1768 2.32322ZM8.05546 9.61607C9.1294 10.69 10.8706 10.69 11.9445 9.61607L10.8839 8.55541C10.3957 9.04357 9.60427 9.04356 9.11612 8.55541L8.05546 9.61607ZM0.762565 2.32323L8.05546 9.61607L9.11611 8.55541L1.82322 1.26256L0.762565 2.32323ZM11.9445 9.61607L19.2374 2.32323L18.1768 1.26256L10.8839 8.55541L11.9445 9.61607Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/PlusIcon.vue b/src/components/iconsComponents/PlusIcon.vue
new file mode 100644
index 0000000..62c9788
--- /dev/null
+++ b/src/components/iconsComponents/PlusIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M6.75 1C6.75 0.585786 6.41421 0.25 6 0.25C5.58579 0.25 5.25 0.585786 5.25 1H6.75ZM5.25 11C5.25 11.4142 5.58579 11.75 6 11.75C6.41421 11.75 6.75 11.4142 6.75 11H5.25ZM1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75V5.25ZM11 6.75C11.4142 6.75 11.75 6.41421 11.75 6C11.75 5.58579 11.4142 5.25 11 5.25V6.75ZM5.25 1V11H6.75V1H5.25ZM1 6.75H11V5.25H1V6.75Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/UserSmallIcon.vue b/src/components/iconsComponents/UserSmallIcon.vue
new file mode 100644
index 0000000..aa9b337
--- /dev/null
+++ b/src/components/iconsComponents/UserSmallIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M17 19.5V20.25C17.4142 20.25 17.75 19.9142 17.75 19.5H17ZM1 19.5H0.25C0.25 19.9142 0.585786 20.25 1 20.25L1 19.5ZM5 14.25H13V12.75H5V14.25ZM16.25 17.5V19.5H17.75V17.5H16.25ZM1.75 19.5V17.5H0.25V19.5H1.75ZM13 14.25C14.7949 14.25 16.25 15.7051 16.25 17.5H17.75C17.75 14.8766 15.6234 12.75 13 12.75V14.25ZM5 12.75C2.37665 12.75 0.25 14.8766 0.25 17.5H1.75C1.75 15.7051 3.20507 14.25 5 14.25V12.75ZM12.25 5.5C12.25 7.29493 10.7949 8.75 9 8.75V10.25C11.6234 10.25 13.75 8.12335 13.75 5.5H12.25ZM9 8.75C7.20507 8.75 5.75 7.29493 5.75 5.5H4.25C4.25 8.12335 6.37665 10.25 9 10.25V8.75ZM5.75 5.5C5.75 3.70507 7.20507 2.25 9 2.25V0.75C6.37665 0.75 4.25 2.87665 4.25 5.5H5.75ZM9 2.25C10.7949 2.25 12.25 3.70507 12.25 5.5H13.75C13.75 2.87665 11.6234 0.75 9 0.75V2.25ZM1 20.25H17V18.75H1V20.25Z"/>
+  </g>
+</template>
diff --git a/src/components/iconsComponents/basicIcon/BasicIcon.vue b/src/components/iconsComponents/basicIcon/BasicIcon.vue
index 450f97c..643f0bc 100644
--- a/src/components/iconsComponents/basicIcon/BasicIcon.vue
+++ b/src/components/iconsComponents/basicIcon/BasicIcon.vue
@@ -2,7 +2,7 @@
   <svg xmlns="http://www.w3.org/2000/svg"
        :width="width"
        :height="height"
-       viewBox="0 0 40 40"
+       :viewBox="viewBox"
        :aria-labelledby="iconName"
        role="presentation"
   >
@@ -34,6 +34,11 @@ export default {
     iconColor: {
       type: String,
       default: 'currentColor'
+    },
+  },
+  computed: {
+    viewBox() {
+      return `0 0 ${this.width} ${this.height}`
     }
   }
 }
diff --git a/src/components/pages/calendarPages/CalendarPages.vue b/src/components/pages/calendarPages/CalendarPages.vue
index 2cf614d..fb7f2ea 100644
--- a/src/components/pages/calendarPages/CalendarPages.vue
+++ b/src/components/pages/calendarPages/CalendarPages.vue
@@ -1,9 +1,11 @@
 <template lang="pug">
-  div CalendarPages
+  form-change-event
 </template>
 
 <script>
+  import FormChangeEvent from "./FormChangeEvent";
   export default {
-    name: "CalendarPages"
+    name: "CalendarPages",
+    components: {FormChangeEvent}
   }
 </script>
diff --git a/src/components/pages/calendarPages/FormChangeEvent.vue b/src/components/pages/calendarPages/FormChangeEvent.vue
new file mode 100644
index 0000000..304c016
--- /dev/null
+++ b/src/components/pages/calendarPages/FormChangeEvent.vue
@@ -0,0 +1,216 @@
+<template lang="pug">
+  div.event-form-change(v-if="formOpen")
+    div.form-item-container
+      div.close-icon-position
+        span.title-form Ответственный
+        basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
+          close-icon
+      div.input-container(@click="openSelectResponsible")
+        div.form-select
+          div.form-item-input.select-container-res {{eventData.responsible}}
+            div.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
+              div.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
+        div.select-form-separator
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          arrow-down-icon
+    div.form-item-container
+      span.title-form Оновная информация
+      div.form-inform-container
+        basic-icon(width="24" height="24" icon-color="#090A15" )
+          clock-icon
+        div.time-input-container
+          div.input-container
+            input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          span —
+          div.input-container
+            input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+      div.form-inform-container
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          user-icon
+        div.input-container
+          input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+    div.form-item-container(class='additional-information')
+      div.form-inform-container
+        span.title-form Дополнительная информация
+        button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
+      div.form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
+        span.number-additional {{info}}
+        div.input-container
+          input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+    div.form-item-container
+      span.title-form Вид события
+      div.input-container(@click="openSelectKindEvent")
+        div.form-select
+          div.form-item-input.select-container-kind {{eventData.kindEvent}}
+            div.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
+              div.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
+        div.select-form-separator
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          arrow-down-icon
+    div.form-item-container
+      div.form-inform-container
+        span.title-form Контакты
+        button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
+      div.form-inform-container(v-for="(contact, index) in listContacts" :key="index")
+        basic-icon(width="24" height="20" icon-color="#090A15")
+          mail-icon
+        div.input-container
+          input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+    add-event-button(@click="createEvent")
+</template>
+
+<script>
+import BasicIcon from "../../iconsComponents/basicIcon/BasicIcon";
+import ArrowDownIcon from "../../iconsComponents/ArrowDownIcon";
+import ClockIcon from  "../../iconsComponents/ClockIcon";
+import UserIcon from "../../iconsComponents/UserSmallIcon";
+import MailIcon from "../../iconsComponents/MailIcon";
+import CloseIcon from "../../iconsComponents/CloseIcon"
+import AddEventButton from "../../buttons/AddEventButton";
+import ButtonPlus from "../../buttons/ButtonPlus";
+export default {
+  name: "FormChangeEvent",
+  components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},
+  props: {
+    listResponsible: {
+      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
+    }
+  },
+  data() {
+    return {
+      formOpen: true,
+      selectResponsibleOpen: false,
+      selectKindEventOpen: false,
+      listFriendInfo: [1],
+      listContacts: [1],
+      kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
+      eventData: {
+        responsible: "Выберите ответственного",
+        eventClient: "",
+        timeEvent: {
+          firstTime: "11:00",
+          secondTime: "12:30",
+        },
+        friendInfo: {},
+        kindEvent: "Вид события",
+        contacts: {}
+      }
+    }
+  },
+  methods: {
+    createEvent() {
+      this.formOpen = !this.formOpen
+    },
+    addFriendInfo(e) {
+      if(e.currentTarget.id === "addInfo") {
+        this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
+      }
+      if(e.currentTarget.id === "addContact") {
+        this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
+      }
+    },
+    closeEventForm() {
+      this.formOpen=!this.formOpen
+    },
+    openSelectResponsible() {
+      this.selectResponsibleOpen = !this.selectResponsibleOpen
+    },
+    openSelectKindEvent() {
+      this.selectKindEventOpen = !this.selectKindEventOpen
+    },
+    chooseOption(event) {
+      if(event.currentTarget.id === "responsible") {
+        this.eventData.responsible=this.listResponsible[event.target.id]
+      }
+      if(event.currentTarget.id === "kind") {
+        this.eventData.kindEvent=this.kindEvents[event.target.id]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="sass">
+  .event-form-change
+    position: relative
+    display: flex
+    flex-direction: column
+    row-gap: 24px
+    min-width: 448px
+    padding: 21px 32px 24px 32px
+    background-color: var(--bg-white-color)
+    box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
+    border-radius: 4px
+  .title-form
+    font-size: 12px
+    line-height: 14px
+    font-style: normal
+    opacity: 0.4
+  .form-item-container
+    display: flex
+    flex-direction: column
+    row-gap: 8px
+  .input-container
+    display: flex
+    column-gap: 8px
+    align-items: center
+    cursor: pointer
+    border-radius: 4px
+    padding: 8px 16px 8px 16px
+    width: fit-content
+    background-color: var(--bg-ligth-blue-color)
+  .form-item-input
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    appearance: none
+    border: none
+    outline: none
+    cursor: pointer
+    color: rgba(9, 10, 21, 0.5)
+    background-color: rgba(9, 10, 21, 0)
+    &::-webkit-calendar-picker-indicator
+      display: none
+      -webkit-appearance: none
+  .select-form-separator
+    background-color: rgba(65, 105, 225, 0.2)
+    height: 24px
+    width: 1px
+    border-radius: 1px
+  .time-input-container
+    display: flex
+    align-items: center
+    column-gap: 8px
+  .form-inform-container
+    display: flex
+    align-items: center
+    column-gap: 16px
+  .number-additional
+    margin-left: 6px
+  .close-icon
+    cursor: pointer
+  .close-icon-position
+    display: flex
+    justify-content: space-between
+    padding-top: 10px
+  .form-select
+    position: relative
+    display: flex
+    flex-direction: column
+  .option-container
+    position: absolute
+    width: max-content
+    background-color: var(--bg-ligth-blue-color)
+    z-index: 3
+  .option-item
+    color: var(--font-black-color)
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    &:hover
+      background-color: var(--btn-blue-color)
+  .select-container-res
+    min-width: 205px
+  .select-container-kind
+    min-width: 119px
+</style>