From f71651729ef3a1f34fb2104b43567b49f6966a43 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 25 Feb 2025 14:09:31 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=ED=9C=B4=EA=B0=80css=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                       | 99 ++++++++++++++++++---
 public/vendor/css/core.css                  |  4 +-
 src/components/button/HalfDayButtons.vue    |  3 +-
 src/components/modal/VacationGrantModal.vue | 88 ++----------------
 src/components/modal/VacationModal.vue      | 93 ++-----------------
 src/views/vacation/VacationManagement.vue   | 23 +++--
 6 files changed, 121 insertions(+), 189 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index c4bb01d..af34e46 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -7,42 +7,121 @@
 
 
 /* 휴가 */
-.half-day-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-.half-day-buttons .btn.active {
-  border: 2px solid black;
-}
 
 .fc-daygrid-day-events {
   max-height: 100px !important;
   overflow-y: auto !important;
 }
-
+/* 이벤트 선 없게 */
 .fc-event {
   border: none;
 }
+/* 오전전반차 그래프 */
 .fc-daygrid-event.half-day-am {
   width: calc(50% - 4px) !important;
 }
+/* 오후반차 그래프프 */
 .fc-daygrid-event.half-day-pm {
   width: calc(50% - 4px) !important;
   margin-left: auto !important
 }
+/* 공휴일,일요일 색상 */
 .fc-day-sun .fc-daygrid-day-number,
 .fc-col-header-cell:first-child .fc-col-header-cell-cushion {
   color: #ff4500 !important;
 }
+/* 토요일 색상 */
 .fc-day-sat .fc-daygrid-day-number,
 .fc-col-header-cell:last-child .fc-col-header-cell-cushion {
   color: #6076e0 !important;
 }
+/* 캘린더 날짜 왼쪽 상단 위치하게 */
 .fc-daygrid-day-number {
   margin-right: auto;
 }
+/* 데이트피커 뾰족없게게 */
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+    display: none !important;
+}
+
+/* 본인 모달 */
+
+/* 닫기 버튼 */
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+}
+/* 리스트 아이템 */
+.vacation-item {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
+/* 모달 본문 스크롤 */
+.modal-body {
+  max-height: 130px;
+  overflow-y: auto;
+}
+
+/* 선물하기 모달 */
+
+/* 연차 개수 버튼 */
+.count-btn {
+  font-size: 18px;
+  padding: 2px 10px;
+  border: none;
+  background: #2C3E50;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.count-btn:hover {
+  background: #1d2c44;
+}
+.count-btn:disabled {
+  background: #cccccc;
+  cursor: not-allowed;
+}
+
+/* 버튼 컨테이너 (우측 정렬) */
+.custom-button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+/* 버튼 기본 스타일 */
+.custom-button {
+  background: none; /* 배경색 없음 */
+  border: none; /* 테두리 없음 */
+  padding: 10px; /* 크기 조정 */
+  cursor: pointer; /* 클릭 가능하도록 변경 */
+}
+
+/* 아이콘 색상 변경 (기본) */
+.custom-button i {
+  color: #282538; /* 기본 아이콘 색상 */
+  font-size: 25px; /* 아이콘 크기 */
+}
+
+/* 버튼 호버 효과 */
+.custom-button:hover i {
+  color: #007BFF; /* 호버 시 아이콘 색상 변경 (파란색) */
+}
+
+
+
+
 
   .grayscaleImg {
     filter: grayscale(100%);
diff --git a/public/vendor/css/core.css b/public/vendor/css/core.css
index 48dd4cf..bf84231 100644
--- a/public/vendor/css/core.css
+++ b/public/vendor/css/core.css
@@ -14820,8 +14820,8 @@ body {
   font-size: 1.1em;
   line-height: 1;
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 .ui-star + .ui-star {
   margin-left: -0.1em;
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 83f4c35..8c77ed2 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="half-day-buttons">
+    <div class="menu gap-4 justify-content-center mt-5">
+
       <button
         class="btn btn-info"
         :class="{ active: halfDayType === 'AM' }"
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 333810e..fa4867d 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -1,21 +1,22 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content">
+      <div class="modal-content p-5">
         <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
         <button class="close-btn" @click="closeModal">✖</button>
 
         <div class="modal-body">
           <p>선물할 연차 개수를 선택하세요.</p>
 
-          <div class="vacation-control">
+          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center">
             <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
-            <span class="grant-count">{{ grantCount }}</span>
+            <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
             <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
           </div>
-
-          <button class="gift-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
+          <div class="custom-button-container">
+          <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
             <i class="bx bx-gift"></i>
           </button>
+          </div>
         </div>
       </div>
     </div>
@@ -124,81 +125,4 @@
 
   <style scoped>
 
-  /* 모달 본문 */
-  .modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 300px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-    text-align: center;
-    position: relative;
-  }
-
-  /* 닫기 버튼 */
-  .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-  }
-
-  /* 연차 개수 조정 버튼 */
-  .vacation-control {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    margin-top: 15px;
-  }
-
-  .count-btn {
-    font-size: 18px;
-    padding: 6px 12px;
-    border: none;
-    background: #007bff;
-    color: white;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
-  .count-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-  }
-
-  /* 개수 표시 */
-  .grant-count {
-    font-size: 20px;
-    font-weight: bold;
-    color: #333;
-  }
-
-  /* 선물 아이콘 버튼 */
-  .gift-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    background: #28a745;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 15px;
-    margin-top: 15px;
-    cursor: pointer;
-    transition: 0.3s;
-  }
-
-  .gift-btn:hover {
-    background: #218838;
-  }
-
-  .gift-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-  }
   </style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index d57e482..816940b 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,29 +1,28 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content modal-scroll">
+      <div class="modal-content p-5 modal-scroll">
         <h5 class="modal-title">📅 내 연차 사용 내역</h5>
         <button class="close-btn" @click="closeModal">✖</button>
 
         <!-- 연차 목록 -->
         <div class="modal-body" v-if="mergedVacations.length > 0">
-          <ol class="vacation-list">
+          <ol class="list-group-numbered px-0 mt-4">
             <li
               v-for="(vac, index) in mergedVacations"
               :key="vac._expandIndex"
               class="vacation-item"
             >
               <!-- Used 항목만 인덱스 표시 -->
-              <span v-if="vac.category === 'used'" class="vacation-index">
+              <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
                 {{ usedVacationIndexMap[vac._expandIndex] }})
               </span>
 
-              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+              <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
                 {{ vac.category === 'used' ? '-' : '+' }}
               </span>
 
               <span
                 :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
-                class="vacation-date"
               >
                 {{ formatDate(vac.date) }}
               </span>
@@ -32,7 +31,7 @@
         </div>
 
         <!-- 연차 데이터 없음 -->
-        <p v-else class="no-data">
+        <p v-else class="text-sm-center mt-5 text-gray">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
@@ -139,86 +138,4 @@ const closeModal = () => {
 </script>
 
   <style scoped>
-  /* 모달 본문 */
-  .modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 300px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-    text-align: center;
-    position: relative;
-  }
-
-  /* 닫기 버튼 */
-  .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-  }
-
-  /* 리스트 기본 스타일 */
-  .vacation-list {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: 15px;
-  }
-
-  /* 리스트 아이템 */
-  .vacation-item {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 8px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    background: #f9f9f9;
-  }
-
-  /* 인덱스 (연차 사용 개수) */
-  .vacation-index {
-    font-weight: bold;
-    font-size: 16px;
-    margin-right: 8px;
-    color: #333;
-  }
-
-  /* "-" 빨간색 */
-  .minus-symbol {
-    color: red;
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  /* "+" 파란색 */
-  .plus-symbol {
-    color: blue;
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  /* 날짜 스타일 */
-  .vacation-date {
-    font-size: 16px;
-    color: #333;
-  }
-
-  /* 연차 데이터 없음 */
-  .no-data {
-    text-align: center;
-    font-size: 14px;
-    color: gray;
-    margin-top: 10px;
-  }
-
-  /* 모달 본문 스크롤: 높이가 300px 이상이면 스크롤바 표시 */
-.modal-body {
-  max-height: 130px;
-  overflow-y: auto;
-}
   </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 004c2a0..faa458a 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -150,17 +150,28 @@
       }
     });
 
-    // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
+   // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
     nextTick(() => {
-      const titleEl = document.querySelector('.fc-toolbar-title');
-      if (titleEl) {
+    const titleEl = document.querySelector('.fc-toolbar-title');
+    if (titleEl) {
         titleEl.style.cursor = 'pointer';
         titleEl.addEventListener('click', () => {
-          fpInstance.open();
+        // 화면 중앙 정렬을 위한 스타일 조정
+        const dpEl = calendarDatepicker.value;
+        dpEl.style.display = 'block';
+        dpEl.style.position = 'fixed';
+        dpEl.style.top = '22%';
+        dpEl.style.left = '66%';
+        dpEl.style.transform = 'translate(-50%, -50%)';
+        dpEl.style.zIndex = '9999';
+        dpEl.style.border = 'none';
+        dpEl.style.outline = 'none';
+        dpEl.style.backgroundColor = 'transparent';
+        fpInstance.open();
         });
-      }
+    }
     });
-  });
+  })
 
   // 연차 내역 API (초기 호출용)
   async function fetchVacationHistory(year) {

From 8e0700a659f27ac535bc3fcf2473e36106439a1c Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 25 Feb 2025 15:56:52 +0900
Subject: [PATCH 2/8] =?UTF-8?q?min=20required=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormInput.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 62e3134..806758e 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -14,7 +14,7 @@
                 :placeholder="title"
                 :disabled="disabled"
                 :min="min"
-                @focusout="$emit('focusout', modelValue)" 
+                @focusout="$emit('focusout', modelValue)"
             />
             <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
                 {{ title }}을 확인해주세요.
@@ -78,6 +78,7 @@ const props = defineProps({
     min: {
         type: String,
         default: '',
+        required: false,
     }
 });
 

From bd91e0a72d071c5fa91ba65af0f38ec136e9706b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 25 Feb 2025 16:27:22 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=9B=90=EB=B3=B5?=
 =?UTF-8?q?=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     | 29 +++++++---
 src/components/board/BoardCommentArea.vue | 33 +++++++-----
 src/views/board/BoardView.vue             | 66 +++++++++++++++--------
 3 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 3518e55..3ffa3b2 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <BoardProfile
-            :unknown="unknown"
+            :unknown="comment.author === '익명'"
             :isCommentAuthor="isCommentAuthor"
             :boardId="comment.boardId"
             :profileName="comment.author"
@@ -11,7 +11,7 @@
             :isLike="!isLike"
             :isCommentPassword="comment.isCommentPassword"
             :isCommentProfile="true"
-            @editClick="$emit('editClick', comment)"
+            @editClick="aaaa"
             @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
             />
@@ -29,8 +29,8 @@
             </div>
             <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
         </div>
-        <p>authorId:{{ comment.authorId }}</p>
-        <p>코멘트 비교: {{comment.isCommentAuthor}}</p>
+        <!-- <p>authorId:{{ comment.authorId }}</p>
+        <p>코멘트 비교: {{comment.isCommentAuthor}}</p> -->
 
 
         <div class="mt-6">
@@ -47,20 +47,29 @@
         </div>
 
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
+        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
 
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
-            v-for="child in comment.children"
-            :key="child.commentId"
+                v-for="child in comment.children"
+                :key="child.commentId"
                 class="mt-8 pt-6 ps-10 border-top"
             >
+            <!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
+            <!-- <p>comment child: {{ comment.children }}</p> -->
+            <!-- :unknown="child.author === '익명'" -->
                 <BoardComment
                     :comment="child"
-                    :unknown="unknown"
+                    :unknown="child.author === '익명'"
                     :isPlusButton="false"
                     :isLike="true"
+                    :isCommentProfile="true"
+                    :isCommentAuthor="child.isCommentAuthor"
+                    @editClick="$emit('editClick', $event)"
+                    @deleteClick="$emit('deleteClick', child)"
+                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
+                    @cancelEdit="$emit('cancelEdit', child)"
                     @submitComment="submitComment"
                     @updateReaction="handleUpdateReaction"
                 />
@@ -155,4 +164,8 @@ const submitEdit = () => {
     emit('submitEdit', props.comment, localEditedContent.value);
 };
 
+const aaaa = () => {
+    emit('editClick', props.comment);
+}
+
 </script>
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 76b93b0..11d1d40 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -17,6 +17,7 @@
                         rows="3"
                         v-model="comment"
                     ></textarea>
+                    <span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
                 </div>
             </div>
 
@@ -42,6 +43,7 @@
                             id="basic-default-password"
                             class="form-control flex-grow-1"
                             v-model="password"
+                            placeholder="비밀번호 입력"
                         />
                         <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
                     </div>
@@ -74,28 +76,35 @@ const props = defineProps({
     passwordAlert: {
         type: String,
         default: false
+    },
+    commentAlert: {
+        type: String,
+        default: false
     }
 });
+
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(false);
-const emit = defineEmits(['submitComment']);
+const isCheck = ref(props.unknown);
 
+const emit = defineEmits(['submitComment']);
+const LOCBRDTYP = isCheck.value ? '300102' : null;
 function handleCommentSubmit() {
-    if (props.unknown && isCheck.value && !password.value) {
-        alert('익명 댓글을 작성하려면 비밀번호를 입력해야 합니다.');
-        return;
-    }
-    const LOCBRDTYP = isCheck.value ? '300102' : null;
     emit('submitComment', {
         comment: comment.value,
         password: isCheck.value ? password.value : '',
-        LOCBRDTYP,
+        isCheck: isCheck.value,
+        LOCBRDTYP,  // 익명일 경우 '300102' 설정
         isCheck: isCheck.value
     });
-
-    comment.value = '';
-    password.value = '';
-    isCheck.value = false; // 초기화
 }
+
+watch(() => props.passwordAlert, () => {
+    if (!props.passwordAlert) {
+        comment.value = '';
+        password.value = '';
+    }
+});
+
+
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 8514b98..3662544 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -140,7 +140,6 @@ import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import axios from '@api';
-import { formattedDate } from '@/common/formattedDate.js';
 
 // 게시물 데이터 상태
 const profileName = ref('');
@@ -376,63 +375,77 @@ const fetchComments = async (page  = 1) => {
 };
 
 // 댓글 작성
-const handleCommentSubmit = async (data) => {
+const handleCommentSubmit = async (data, isCheck) => {
+    if (!data) {
+        console.error("handleCommentSubmit: data가 undefined입니다.");
+        return;
+    }
+
     const { comment, password } = data;
-    const LOCBRDTYP = data.LOCBRDTYP || null; // undefined 방지
+    const LOCBRDTYP = data.LOCBRDTYP || null;
+
+    if (!comment || comment.trim() === "") {
+        commentAlert.value = '댓글을 입력해주세요.';
+        return;
+    } else {
+        commentAlert.value = '';
+    }
+
+    if (unknown.value && isCheck && (!password || password.trim() === "")) {
+        passwordAlert.value = "비밀번호를 입력해야 합니다.";
+        return;
+    }
 
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
-            LOCCMTPWD: password,
+            LOCCMTPWD: isCheck ? password : '',
             LOCCMTPNT: 1,
-            LOCBRDTYP // 익명 여부 전달
+            LOCBRDTYP
         });
 
         if (response.status === 200) {
             console.log('댓글 작성 성공:', response.data.message);
+            passwordAlert.value = '';
+            commentAlert.value = '';
             await fetchComments();
         } else {
-            console.log('댓글 작성 실패:', response.data.message);
+            console.error('댓글 작성 실패:', response.data.message);
         }
     } catch (error) {
-        console.log('댓글 작성 중 오류 발생:', error);
+        console.error('댓글 작성 중 오류 발생:', error);
     }
 };
 
-
 // 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
 const handleCommentReply = async (reply) => {
     try {
-        // 익명 여부 체크 (체크박스가 체크되었을 경우 LOCBRDTYP을 300102로 설정)
-
-        const requestBody = {
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: reply.comment,
             LOCCMTPWD: reply.password || null,
             LOCCMTPNT: reply.parentId,
             LOCBRDTYP: reply.isCheck ? "300102" : null
-        };
-        console.log(requestBody)
-        const response = await axios.post(`board/${currentBoardId.value}/comment`, requestBody);
+        });
 
         if (response.status === 200) {
-            if (response.data.code === 200) {
-                console.log('✅ 대댓글 작성 성공:', response.data);
-                await fetchComments();
+            if (response.data.code === 200) {  // 서버 응답 코드도 확인
+                console.log('대댓글 작성 성공:', response.data);
+                await fetchComments();  // 댓글 목록 새로고침
             } else {
-                console.log('❌ 대댓글 작성 실패 - 서버 응답:', response.data);
+                console.log('대댓글 작성 실패 - 서버 응답:', response.data);
                 alert('대댓글 작성에 실패했습니다.');
             }
         }
     } catch (error) {
-        console.error('🚨 대댓글 작성 중 오류 발생:', error);
+        console.error('대댓글 작성 중 오류 발생:', error);
         if (error.response) {
-            console.error('📌 서버 응답 에러:', error.response.data);
+            console.error('서버 응답 에러:', error.response.data);
         }
-        alert('❌ 대댓글 작성 중 오류가 발생했습니다.');
+        alert('대댓글 작성 중 오류가 발생했습니다.');
     }
-};
+}
 
 // 게시글 수정 버튼 클릭
 const editClick = (unknown) => {
@@ -484,6 +497,7 @@ const editComment = (comment) => {
 
     // 익명일 경우 비밀번호 입력창 활성화
     if (unknown.value) {
+        console.log('익명 코멘트인가?')
         toggleCommentPassword(comment, "edit");
     }
 }
@@ -736,6 +750,14 @@ const handleCommentDeleted = (deletedCommentId) => {
     console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
 };
 
+
+// 날짜
+const formattedDate = (dateString) => {
+    if (!dateString) return "날짜 없음";
+    const dateObj = new Date(dateString);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
+};
+
 const formattedBoardDate = computed(() => formattedDate(date.value));
 
 // 컴포넌트 마운트 시 데이터 로드

From bb1715c71b76cc3098b89bb80fc764e7fd04c92f Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 27 Feb 2025 10:33:48 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                       |  46 +++++-
 src/components/button/HalfDayButtons.vue    |  79 ++++++++++-
 src/components/modal/VacationGrantModal.vue |   2 +-
 src/components/modal/VacationModal.vue      |   2 +-
 src/views/vacation/VacationManagement.vue   | 147 ++++++++++++++------
 5 files changed, 223 insertions(+), 53 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index af34e46..af17624 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -44,6 +44,30 @@
 .flatpickr-calendar:after {
     display: none !important;
 }
+ /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
+ .fc-toolbar-title {
+  cursor: pointer;
+}
+/* 클릭 가능한 날짜 (오늘 + 미래) */
+.fc-daygrid-day.clickable {
+cursor: pointer;
+transition: background-color 0.2s ease-in-out;
+}
+/* 마우스를 올렸을 때 효과 */
+.fc-daygrid-day.clickable:hover {
+background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */
+}
+/* 주말 (토요일, 일요일) 및 공휴일 */
+.fc-day-sat-sun {
+cursor: not-allowed !important;
+opacity: 0.6; /* 흐려 보이게 */
+}
+/* 과거 날짜 (오늘 이전) */
+.fc-daygrid-day.past {
+cursor: not-allowed !important;
+opacity: 0.6; /* 흐려 보이게 */
+}
+
 
 /* 본인 모달 */
 
@@ -116,12 +140,32 @@
 
 /* 버튼 호버 효과 */
 .custom-button:hover i {
-  color: #007BFF; /* 호버 시 아이콘 색상 변경 (파란색) */
+  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
 }
 
 
 
 
+/* 모달 배경 투명하게 */
+.modal-dialog {
+  background: none !important;  /* 배경 제거 */
+  box-shadow: none !important;  /* 음영 제거 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* 모달 내용 스타일 */
+.modal-content {
+  background: #fff;  /* 기존 흰색 배경 유지 */
+  border-radius: 8px;
+  box-shadow: none !important;  /* 내부 음영 제거 */
+  padding: 20px;
+  max-width: 500px;
+  width: 100%;
+}
 
   .grayscaleImg {
     filter: grayscale(100%);
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 8c77ed2..f2c5856 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -2,21 +2,21 @@
     <div class="menu gap-4 justify-content-center mt-5">
 
       <button
-        class="btn btn-info"
+        class="btn btn-warning"
         :class="{ active: halfDayType === 'AM' }"
         @click="toggleHalfDay('AM')"
       >
         <i class="bi bi-sun"></i>
       </button>
       <button
-        class="btn btn-warning"
+        class="btn btn-info"
         :class="{ active: halfDayType === 'PM' }"
         @click="toggleHalfDay('PM')"
       >
         <i class="bi bi-moon"></i>
       </button>
       <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests">
+        <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
           ✔
         </button>
       </div>
@@ -26,6 +26,10 @@
 <script setup>
 import { defineEmits, ref } from "vue";
 
+defineProps({
+  isDisabled: Boolean
+});
+
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
 const halfDayType = ref(null);
 
@@ -39,6 +43,73 @@ const addVacationRequests = () => {
 };
 </script>
 
-  <style scoped>
+<style scoped>
+/* 버튼 기본 스타일 */
+.btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
 
+/* 마우스를 올렸을 때 */
+.btn:hover {
+  filter: brightness(90%);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05);
+}
+
+/* 버튼이 눌렸을 때 */
+.btn:active {
+  transform: scale(0.9);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* 선택된 (눌린) 버튼 */
+.btn.active {
+  border: 3px solid #fff; /* 흰색 테두리 강조 */
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+
+/* AM 버튼 (선택된 상태) */
+.btn-warning.active {
+  background-color: #ffca2c !important; /* 진한 노란색 */
+  color: black;
+}
+
+/* PM 버튼 (선택된 상태) */
+.btn-info.active {
+  background-color: #0b5ed7 !important; /* 진한 파란색 */
+  color: white;
+}
+
+/* ✔ 버튼 */
+.btn-success {
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
+
+/* ✔ 버튼 마우스 오버 */
+.btn-success:hover {
+  background-color: #198754;
+  box-shadow: 0px 4px 10px rgba(25, 135, 84, 0.4);
+  transform: scale(1.1);
+}
+
+/* ✔ 버튼 클릭 */
+.btn-success:active {
+  transform: scale(0.95);
+  box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
+}
   </style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index fa4867d..0f724d6 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -7,7 +7,7 @@
         <div class="modal-body">
           <p>선물할 연차 개수를 선택하세요.</p>
 
-          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center">
+          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
             <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
             <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
             <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 816940b..4dbe9ce 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -31,7 +31,7 @@
         </div>
 
         <!-- 연차 데이터 없음 -->
-        <p v-else class="text-sm-center mt-5 text-gray">
+        <p v-else class="text-sm-center mt-10 text-gray">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index faa458a..08b511b 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -9,6 +9,7 @@
                 <HalfDayButtons
                   @toggleHalfDay="toggleHalfDay"
                   @addVacationRequests="saveVacationChanges"
+                  :isDisabled="!hasChanges"
                 />
               </div>
               <ProfileList
@@ -106,6 +107,64 @@
   const calendarDatepicker = ref(null);
   let fpInstance = null;
 
+/** ✅ 변경사항 여부 확인 */
+const hasChanges = computed(() => {
+  return (
+    selectedDates.value.size > 0 ||
+    myVacations.value.some(vac => selectedDates.value.has(vac.date.split("T")[0]))
+  );
+});
+
+
+/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
+watch(
+  () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
+  (newKeys) => {
+  },
+  { deep: true }
+);
+
+function handleDateClick(info) {
+    const clickedDateStr = info.dateStr;
+    const clickedDate = info.date;
+    const todayStr = new Date().toISOString().split("T")[0];
+
+    if (
+      clickedDate.getDay() === 0 ||
+      clickedDate.getDay() === 6 ||
+      holidayDates.value.has(clickedDateStr) ||
+      clickedDateStr < todayStr
+    ) {
+      return;
+    }
+    const isMyVacation = myVacations.value.some(vac => {
+      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+      return vacDate === clickedDateStr && !vac.receiverId;
+    });
+
+    if (isMyVacation) {
+      if (selectedDates.value.get(clickedDateStr) === "delete") {
+        selectedDates.value.delete(clickedDateStr);
+      } else {
+        selectedDates.value.set(clickedDateStr, "delete");
+      }
+      updateCalendarEvents();
+      return;
+    }
+
+    if (selectedDates.value.has(clickedDateStr)) {
+      selectedDates.value.delete(clickedDateStr);
+      updateCalendarEvents();
+      return;
+    }
+    const type = halfDayType.value
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
+      : "700103";
+    selectedDates.value.set(clickedDateStr, type);
+    halfDayType.value = null;
+    updateCalendarEvents();
+  }
+
   const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
@@ -309,47 +368,6 @@
     return "full-day";
   };
 
-  function handleDateClick(info) {
-    const clickedDateStr = info.dateStr;
-    const clickedDate = info.date;
-    const todayStr = new Date().toISOString().split("T")[0];
-
-    if (
-      clickedDate.getDay() === 0 ||
-      clickedDate.getDay() === 6 ||
-      holidayDates.value.has(clickedDateStr) ||
-      clickedDateStr < todayStr
-    ) {
-      return;
-    }
-    const isMyVacation = myVacations.value.some(vac => {
-      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
-      return vacDate === clickedDateStr && !vac.receiverId;
-    });
-
-    if (isMyVacation) {
-      if (selectedDates.value.get(clickedDateStr) === "delete") {
-        selectedDates.value.delete(clickedDateStr);
-      } else {
-        selectedDates.value.set(clickedDateStr, "delete");
-      }
-      updateCalendarEvents();
-      return;
-    }
-
-    if (selectedDates.value.has(clickedDateStr)) {
-      selectedDates.value.delete(clickedDateStr);
-      updateCalendarEvents();
-      return;
-    }
-    const type = halfDayType.value
-      ? (halfDayType.value === "AM" ? "700101" : "700102")
-      : "700103";
-    selectedDates.value.set(clickedDateStr, type);
-    halfDayType.value = null;
-    updateCalendarEvents();
-  }
-
   function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
   }
@@ -392,6 +410,7 @@
   }
 
   async function saveVacationChanges() {
+    if (!hasChanges.value) return;
     const selectedDatesArray = Array.from(selectedDates.value);
     const vacationsToAdd = selectedDatesArray
       .filter(([date, type]) => type !== "delete")
@@ -458,6 +477,46 @@
     await nextTick();
     fullCalendarRef.value.getApi().refetchEvents();
   }
+  /** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */
+function markClickableDates() {
+  nextTick(() => {
+    const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+    const todayObj = new Date(todayStr);
+
+    document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
+      const dateStr = cell.getAttribute("data-date");
+      if (!dateStr) return; // 날짜가 없으면 스킵
+
+      const dateObj = new Date(dateStr);
+
+      // 주말 (토요일, 일요일)
+      if (dateObj.getDay() === 0 || dateObj.getDay() === 6 || holidayDates.value.has(dateStr)) {
+        cell.classList.remove("clickable");
+        cell.classList.add("fc-day-sat-sun");
+      }
+      // 과거 날짜 (오늘 이전)
+      else if (dateObj < todayObj) {
+        cell.classList.remove("clickable");
+        cell.classList.add("past"); // 과거 날짜 비활성화
+      }
+      // 오늘 & 미래 날짜 (클릭 가능)
+      else {
+        cell.classList.add("clickable");
+        cell.classList.remove("past", "fc-day-sat-sun");
+      }
+    });
+  });
+}
+
+/** ✅ onMounted 및 달력 변경 시 실행 */
+onMounted(() => {
+  markClickableDates();
+});
+
+watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
+  markClickableDates();
+});
+
 
   onMounted(async () => {
     await fetchUserList();
@@ -471,10 +530,6 @@
   </script>
 
   <style>
-  /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
-  .fc-toolbar-title {
-    cursor: pointer;
-  }
 
-  /* 데이트피커 인풋은 Flatpickr에서 동적으로 스타일 적용됨 */
+
   </style>

From 3d41dc7730f11c70cfa2c3467b6ca3d99cbf6fcb Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 27 Feb 2025 11:23:56 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/vendor/css/rtl/theme-default.css |  2 +-
 src/components/input/FormInput.vue      |  2 +-
 src/components/wordDict/DictCard.vue    | 36 +++++++++++--------
 src/components/wordDict/DictWrite.vue   | 41 +++++++++++++++++----
 src/stores/writeVisible.js              | 48 +++++++++++++++++++++++++
 src/views/wordDict/wordDict.vue         | 38 +++++++++++---------
 6 files changed, 128 insertions(+), 39 deletions(-)
 create mode 100644 src/stores/writeVisible.js

diff --git a/public/vendor/css/rtl/theme-default.css b/public/vendor/css/rtl/theme-default.css
index d622f3f..18589c5 100644
--- a/public/vendor/css/rtl/theme-default.css
+++ b/public/vendor/css/rtl/theme-default.css
@@ -1 +1 @@
-.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before{content:"";width:100%;height:4.75rem;position:fixed;top:0px;z-index:10}.bg-menu-theme .menu-header{position:relative}.bg-menu-theme .menu-header:before{content:"";position:absolute;inset-inline-start:0;top:50%;width:1rem;height:1px;transition:all .3s ease-in-out}.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link{border-radius:.375rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item>.menu-link{border-radius:.375rem}@media(min-width: 1200px){.layout-horizontal .bg-menu-theme .menu-inner>.menu-item{margin:.625rem 0}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item:not(:first-child){margin-left:.1875rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item:not(:last-child){margin-right:.1875rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item .menu-sub{box-shadow:0 .25rem .75rem 0 rgba(34,48,62,.14);z-index:1}}.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:before{content:"";position:absolute;right:0;width:.25rem;height:2.6845rem;border-radius:.375rem 0 0 .375rem}[dir=rtl] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:before{left:0;right:inherit;border-radius:0 .375rem .375rem 0}.bg-menu-theme .menu-sub>.menu-item>.menu-link:before{content:"";position:absolute;left:1.4375rem;width:.375rem;height:.375rem;border-radius:50%}[dir=rtl] .bg-menu-theme .menu-sub>.menu-item>.menu-link:before{right:1.4375rem;left:inherit}.layout-horizontal .bg-menu-theme .menu-sub>.menu-item>.menu-link:before{inset-inline-start:1rem}.bg-menu-theme .menu-horizontal-wrapper>.menu-inner>.menu-item>.menu-sub>.menu-item>.menu-link:before{display:none}.bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{left:1.1875rem;width:.875rem;height:.875rem}[dir=rtl] .bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{right:1.1875rem;left:inherit}.layout-horizontal .bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{inset-inline-start:.75rem}.layout-menu-hover .layout-menu{box-shadow:0 .25rem .75rem 0 rgba(34,48,62,.14);transition:all .3s ease-in-out}.app-brand .layout-menu-toggle{position:absolute;inset-inline-start:15.2rem;border-radius:50%;opacity:1;z-index:3}.app-brand .layout-menu-toggle i{width:1.375rem;height:1.375rem;transition:all .3s ease-in-out;line-height:1}[dir=rtl] .app-brand .layout-menu-toggle i{transform:scaleX(-1)}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{display:none}.layout-menu-expanded .app-brand .layout-menu-toggle{display:block}}.menu-vertical .menu-item{position:relative}.text-primary{color:#696cff !important}.text-body[href]:hover,.text-heading[href]:hover{color:#5f61e6 !important}.bg-primary{background-color:#696cff !important}a.bg-primary:hover,a.bg-primary:focus{background-color:#6467f2 !important}.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span{background-color:#696cff}.bg-label-primary{background-color:#e7e7ff !important;color:#696cff !important}.border-label-primary{border:3px solid #c3c4ff}.border-light-primary{border:3px solid rgba(105,108,255,.08)}.bg-label-hover-primary{background-color:#e7e7ff !important;color:#696cff !important}.bg-label-hover-primary:hover{background-color:#696cff !important;color:#fff !important}.bg-gradient-primary{background-image:linear-gradient(45deg, #696cff, #b4b6ff) !important}.page-item .page-link:hover,.page-item .page-link:focus,.pagination li>a:not(.page-link):hover,.pagination li>a:not(.page-link):focus{background-color:rgba(105,108,255,.16);color:#696cff}.page-item.active .page-link,.pagination li.active>a:not(.page-link){box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.page-item.active .page-link,.page-item.active .page-link:hover,.page-item.active .page-link:focus,.pagination li.active>a:not(.page-link),.pagination li.active>a:not(.page-link):hover,.pagination li.active>a:not(.page-link):focus{border-color:#696cff;background-color:#696cff;color:#fff}.pagination-outline-primary .page-item.active .page-link,.pagination-outline-primary .page-item.active .page-link:hover,.pagination-outline-primary .page-item.active .page-link:focus,.pagination-outline-primary.pagination li.active>a:not(.page-link),.pagination-outline-primary.pagination li.active>a:not(.page-link):hover,.pagination-outline-primary.pagination li.active>a:not(.page-link):focus{border-color:#696cff !important;color:#696cff !important;background-color:#e7e7ff !important}.progress-bar{background-color:#696cff;color:#fff;box-shadow:0 2px 4px 0 rgba(105,108,255,.4)}.modal-onboarding .carousel-indicators [data-bs-target]{background-color:#696cff}.carousel-control-prev,.carousel-control-next{color:#696cff}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#696cff}.list-group-item-primary{border-color:#696cff;background-color:#e7e7ff;color:#696cff !important}a.list-group-item-primary,button.list-group-item-primary{color:#696cff}a.list-group-item-primary:hover,a.list-group-item-primary:focus,button.list-group-item-primary:hover,button.list-group-item-primary:focus{border-color:#696cff;background-color:#d9d9f0;color:#696cff}a.list-group-item-primary.active,button.list-group-item-primary.active{border-color:#696cff !important;background-color:#696cff !important;color:#fff !important}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background-color:#e7e7ff;color:#696cff}.list-group.list-group-timeline .list-group-timeline-primary:before{border-color:#696cff;background-color:#696cff}.alert-primary{background-color:#e7e7ff;border-color:#e7e7ff;color:#696cff}.alert-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-primary .alert-link{color:#696cff}.alert-primary hr{color:#696cff !important}.alert-primary .alert-icon{background-color:#696cff;box-shadow:0 0 0 .125rem rgba(105,108,255,.16)}.alert-solid-primary{background-color:#696cff;color:#fff}.alert-solid-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-solid-primary .alert-link{color:#fff}.alert-solid-primary hr{color:#fff !important}.alert-solid-primary .alert-icon{color:#696cff !important;box-shadow:0 0 0 .125rem #8789ff}.alert-outline-primary{border-color:#696cff;color:#696cff}.alert-outline-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-outline-primary .alert-link{color:#696cff}.alert-outline-primary hr{color:#696cff !important}.alert-outline-primary .alert-icon{background-color:#696cff !important;box-shadow:0 0 0 .125rem rgba(105,108,255,.16)}.accordion.accordion-header-primary .accordion-item.active .accordion-button{color:#696cff !important}.tooltip-primary .tooltip-inner,.tooltip-primary>.tooltip .tooltip-inner,.ngb-tooltip-primary+ngb-tooltip-window .tooltip-inner{background:#696cff;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.tooltip-primary.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before{border-top-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before{border-left-color:#696cff}[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before{border-right-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before{border-bottom-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before{border-right-color:#696cff}[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before{border-left-color:#696cff}.popover.popover-primary,.popover .popover-primary>.popover,.popover .ngb-popover-primary+ngb-popover-window{border-color:rgba(0,0,0,0);background:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.popover.popover-primary .popover-header,.popover .popover-primary>.popover .popover-header,.popover .ngb-popover-primary+ngb-popover-window .popover-header{border-color:rgba(255,255,255,.2);background:rgba(0,0,0,0);color:#fff}.popover.popover-primary .popover-body,.popover .popover-primary>.popover .popover-body,.popover .ngb-popover-primary+ngb-popover-window .popover-body{background:rgba(0,0,0,0);color:rgba(255,255,255,.8)}.popover.popover-primary>.popover-arrow::before,.popover .popover-primary>.popover>.popover-arrow::before,.popover .ngb-popover-primary+ngb-popover-window>.popover-arrow::before{border-color:rgba(0,0,0,0)}.popover.popover-primary.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after{border-top-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after{border-right-color:#696cff !important}[dir=rtl] .popover.popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,[dir=rtl] .popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,[dir=rtl] .popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after{border-left-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after{border-bottom-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after{border-left-color:#696cff !important}[dir=rtl] .popover.popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,[dir=rtl] .popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,[dir=rtl] .popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after{border-right-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=bottom] .popover-header::before,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=bottom] .popover-header::before,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom] .popover-header::before{border-bottom:1px solid rgba(0,0,0,0) !important}.table-primary{--bs-table-bg: #e1e2ff;--bs-table-striped-bg: #d6d7f3;--bs-table-striped-color: #22303e;--bs-table-active-bg: #d2d4f0;--bs-table-active-color: #22303e;--bs-table-hover-bg: #d6d7f3;--bs-table-hover-color: #22303e;color:#22303e;border-color:#cacde8}.table-primary .btn-icon,.table-primary .btn{color:#22303e}.btn-primary{color:#fff;background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.btn-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-check:focus+.btn-primary,.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}.btn-check:checked+.btn-primary,.btn-check:active+.btn-primary,.btn-primary:active,.btn-primary.active,.btn-primary.show.dropdown-toggle,.show>.btn-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-primary.disabled,.btn-primary:disabled{color:#fff !important;background-color:#696cff !important;border-color:#696cff !important}.btn-group .btn-primary,.input-group .btn-primary{border-right:var(--bs-border-width) solid #5f61e6;border-left:var(--bs-border-width) solid #5f61e6}.btn-group-vertical .btn-primary{border-top-color:#5f61e6;border-bottom-color:#5f61e6}.btn-label-primary{color:#696cff !important;border-color:rgba(0,0,0,0);background:#e7e7ff}.btn-label-primary:hover{border-color:rgba(0,0,0,0) !important;background:#5f61e6 !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4) !important}.btn-label-primary:focus,.btn-label-primary.focus{color:#fff !important;background:#5f61e6}.btn-label-primary:active,.btn-label-primary.active,.btn-label-primary.show.dropdown-toggle,.show>.btn-label-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:rgba(0,0,0,0) !important}.btn-label-primary.disabled,.btn-label-primary:disabled{color:#696cff !important;border-color:rgba(0,0,0,0) !important;background:#e7e7ff !important}.btn-group .btn-label-primary,.input-group .btn-label-primary{border-right:var(--bs-border-width) solid #cfd0ff !important;border-left:var(--bs-border-width) solid #cfd0ff !important}.btn-group-vertical .btn-label-primary{border-top:var(--bs-border-width) solid #cfd0ff !important;border-bottom:var(--bs-border-width) solid #cfd0ff !important}.btn-text-primary{color:#696cff}.btn-text-primary:hover{background:#f3f3ff;color:#696cff}.btn-text-primary:focus,.btn-text-primary.focus{color:#696cff;background:#f3f3ff}.btn-text-primary:active,.btn-text-primary.active,.btn-text-primary-check:checked+.btn-text-primary,:not(.btn-text-primary-check)+.btn-text-primary:active,.btn-text-primary:first-child:active,.btn-text-primary.show.dropdown-toggle,.show>.btn-text-primary.dropdown-toggle{color:#696cff;background:#f3f3ff !important}.btn-text-primary:disabled,.btn-text-primary.disabled{color:#696cff}.btn-group .btn-text-primary,.input-group .btn-text-primary{border-right:var(--bs-border-width) solid #696cff !important;border-left:var(--bs-border-width) solid #696cff !important}.btn-group-vertical .btn-text-primary{border-top:var(--bs-border-width) solid #696cff !important;border-bottom:var(--bs-border-width) solid #696cff !important}.btn-outline-primary{color:#696cff;border-color:#696cff;background:rgba(0,0,0,0)}.btn-outline-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4) !important}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary,.btn-outline-primary:active,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#696cff !important;border-color:#696cff !important}.btn-outline-primary .badge{background:#696cff;border-color:#696cff;color:#fff}.btn-outline-primary:hover .badge,.btn-outline-primary:focus:hover .badge,.btn-outline-primary:active .badge,.btn-outline-primary.active .badge,.show>.btn-outline-primary.dropdown-toggle .badge{background:#fff;border-color:#fff}.dropdown-item:not(.disabled).active,.dropdown-item:not(.disabled):active{background-color:rgba(105,108,255,.16);color:#696cff !important}.dropdown-menu>li:not(.disabled)>a:not(.dropdown-item):active,.dropdown-menu>li.active:not(.disabled)>a:not(.dropdown-item){background-color:rgba(105,108,255,.16);color:#696cff !important}.dt-button-collection .dropdown-item:not(.disabled):active{background-color:rgba(105,108,255,.16)}.nav-pills .nav-link.active{box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.nav-pills .nav-link.active,.nav-pills .nav-link.active:hover,.nav-pills .nav-link.active:focus{background-color:#696cff;color:#fff}.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-link.active:focus{box-shadow:0 -2px 0 #696cff inset}.nav-align-bottom .nav-tabs .nav-link.active,.nav-align-bottom .nav-tabs .nav-link.active:hover,.nav-align-bottom .nav-tabs .nav-link.active:focus,.nav-align-bottom .nav-tabs .nav-link.active,.nav-align-bottom .nav-tabs .nav-link.active:hover,.nav-align-bottom .nav-tabs .nav-link.active:focus{box-shadow:0 2px 0 #696cff inset}.nav-align-left .nav-tabs .nav-link.active,.nav-align-left .nav-tabs .nav-link.active:hover,.nav-align-left .nav-tabs .nav-link.active:focus,.nav-align-left .nav-tabs .nav-link.active,.nav-align-left .nav-tabs .nav-link.active:hover,.nav-align-left .nav-tabs .nav-link.active:focus{box-shadow:-2px 0px 0 #696cff inset}.nav-align-right .nav-tabs .nav-link.active,.nav-align-right .nav-tabs .nav-link.active:hover,.nav-align-right .nav-tabs .nav-link.active:focus,.nav-align-right .nav-tabs .nav-link.active,.nav-align-right .nav-tabs .nav-link.active:hover,.nav-align-right .nav-tabs .nav-link.active:focus{box-shadow:2px 0px 0 #696cff inset}[dir=rtl] .nav-align-left .nav-tabs .nav-link.active,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:focus,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:focus{box-shadow:2px 0px 0 #696cff inset}[dir=rtl] .nav-align-right .nav-tabs .nav-link.active,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:focus,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:focus{box-shadow:-2px 0px 0 #696cff inset}.form-control:focus,.form-select:focus{border-color:#696cff !important}.input-group:focus-within .form-control,.input-group:focus-within .input-group-text{border-color:#696cff !important}.form-check-input:checked{background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.form-check-input[type=checkbox]:indeterminate{background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.custom-option.checked{border:2px solid #696cff !important;margin:0}.custom-option.checked .custom-option-body i,.custom-option.checked .custom-option-header i{color:#696cff}.custom-option.custom-option-label.checked{background-color:rgba(105,108,255,.12);color:#696cff}.custom-option.custom-option-label.checked .custom-option-header span,.custom-option.custom-option-label.checked .custom-option-title{color:#696cff}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url%28%23a%29'%3e%3ccircle cx='12' cy='11' r='8.5' fill='%23fff'/%3e%3c/g%3e%3cdefs%3e%3cfilter id='a' x='0' y='0' width='22' height='22' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='2'/%3e%3cfeGaussianBlur stdDeviation='2'/%3e%3cfeColorMatrix values='0 0 0 0 0.180392 0 0 0 0 0.14902 0 0 0 0 0.239216 0 0 0 0.16 0'/%3e%3cfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_6488_3264'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_dropShadow_6488_3264' result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-image:url("data:image/svg+xml,%3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url%28%23a%29'%3e%3ccircle cx='12' cy='11' r='8.5' fill='%23fff'/%3e%3c/g%3e%3cdefs%3e%3cfilter id='a' x='0' y='0' width='22' height='22' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='2'/%3e%3cfeGaussianBlur stdDeviation='2'/%3e%3cfeColorMatrix values='0 0 0 0 0.180392 0 0 0 0 0.14902 0 0 0 0 0.239216 0 0 0 0.16 0'/%3e%3cfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_6488_3264'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_dropShadow_6488_3264' result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e")}.form-control:focus~.form-label{border-color:#696cff}.form-control:focus~.form-label::after{border-color:inherit}.switch-input:checked~.switch-toggle-slider{background:#696cff;color:#fff;box-shadow:0 2px 6px 0 rgba(105,108,255,.3)}.switch-primary.switch .switch-input:checked~.switch-toggle-slider{background:#696cff;color:#fff;box-shadow:0 2px 6px 0 rgba(105,108,255,.3)}.avatar .avatar-shadow-primary{color:#696cff;background-color:rgba(105,108,255,.16);box-shadow:0 0 0 .25rem rgba(105,108,255,.06)}.timeline .timeline-point-primary{background-color:#696cff !important;outline:3px solid rgba(105,108,255,.12)}.timeline.timeline-outline .timeline-point-primary{border:2px solid #696cff !important}.timeline .timeline-indicator-primary{background-color:rgba(105,108,255,.16)}.timeline .timeline-indicator-primary i{color:#696cff !important}.divider.divider-primary .divider-text:before,.divider.divider-primary .divider-text:after{border-color:#696cff}.navbar.bg-primary{background-color:rgba(105,108,255,.88) !important;color:#e0e1ff}.navbar.bg-primary .navbar-brand,.navbar.bg-primary .navbar-brand a{color:#fff}.navbar.bg-primary .navbar-brand:hover,.navbar.bg-primary .navbar-brand:focus,.navbar.bg-primary .navbar-brand a:hover,.navbar.bg-primary .navbar-brand a:focus{color:#fff}.navbar.bg-primary .navbar-search-wrapper .navbar-search-icon,.navbar.bg-primary .navbar-search-wrapper .search-input{color:#e0e1ff}.navbar.bg-primary .search-input-wrapper .search-input,.navbar.bg-primary .search-input-wrapper .search-toggler{background-color:#696cff !important;color:#e0e1ff}.navbar.bg-primary .navbar-nav>.nav-link,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link{color:#e0e1ff}.navbar.bg-primary .navbar-nav>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav-link:focus,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link:focus,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link:focus{color:#fff}.navbar.bg-primary .navbar-nav>.nav-link.disabled,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link.disabled,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link.disabled{color:#b0b2ff !important}.navbar.bg-primary .navbar-nav .show>.nav-link,.navbar.bg-primary .navbar-nav .active>.nav-link,.navbar.bg-primary .navbar-nav .nav-link.show,.navbar.bg-primary .navbar-nav .nav-link.active{color:#fff}.navbar.bg-primary .navbar-toggler{color:#e0e1ff;border-color:rgba(255,255,255,.15)}.navbar.bg-primary .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.navbar.bg-primary .navbar-text{color:#e0e1ff}.navbar.bg-primary .navbar-text a{color:#fff}.navbar.bg-primary .navbar-text a:hover,.navbar.bg-primary .navbar-text a:focus{color:#fff}.navbar.bg-primary hr{border-color:rgba(255,255,255,.15)}.menu.bg-primary{background-color:#696cff !important;color:#e0e1ff}.menu.bg-primary.menu-horizontal{background-color:rgba(105,108,255,.95) !important}.menu.bg-primary .menu-link,.menu.bg-primary .menu-horizontal-prev,.menu.bg-primary .menu-horizontal-next{color:#e0e1ff}.menu.bg-primary .menu-link:hover,.menu.bg-primary .menu-link:focus,.menu.bg-primary .menu-horizontal-prev:hover,.menu.bg-primary .menu-horizontal-prev:focus,.menu.bg-primary .menu-horizontal-next:hover,.menu.bg-primary .menu-horizontal-next:focus{color:#fff}.menu.bg-primary .menu-link.active,.menu.bg-primary .menu-horizontal-prev.active,.menu.bg-primary .menu-horizontal-next.active{color:#fff}.menu.bg-primary .menu-item.disabled .menu-link,.menu.bg-primary .menu-horizontal-prev.disabled,.menu.bg-primary .menu-horizontal-next.disabled{color:#b0b2ff !important}.menu.bg-primary .menu-item.open:not(.menu-item-closing)>.menu-toggle,.menu.bg-primary .menu-item.active>.menu-link{color:#fff}.menu.bg-primary .menu-item.active>.menu-link:not(.menu-toggle){background-color:#6d70ff}.menu.bg-primary.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle){background-color:#7174ff}.menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing)>.menu-sub,.menu.bg-primary.menu-horizontal .menu-inner .menu-item.open>.menu-toggle{background:#6d70ff}.menu.bg-primary .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-sub,.menu.bg-primary .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-toggle{background:rgba(0,0,0,0);color:#e0e1ff}.menu.bg-primary .menu-inner-shadow{background:linear-gradient(#696cff 41%, rgba(105, 108, 255, 0.11) 95%, rgba(105, 108, 255, 0))}.menu.bg-primary .menu-text{color:#fff}.menu.bg-primary .menu-header{color:#c2c4ff}.menu.bg-primary hr,.menu.bg-primary .menu-divider,.menu.bg-primary .menu-inner>.menu-item.open>.menu-sub::before{border-color:rgba(255,255,255,.15) !important}.menu.bg-primary .menu-block::before{background-color:#c2c4ff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before{background-color:#8385ff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{background-color:#fff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before,.menu.bg-primary .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{box-shadow:0 0 0 1px #6d70ff}.menu.bg-primary .ps__thumb-y,.menu.bg-primary .ps__rail-y.ps--clicking>.ps__thumb-y{background:rgba(255,255,255,.5942917647) !important}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{border:7px solid #696cff !important}}.footer.bg-primary{color:#e0e1ff}.layout-footer-fixed .layout-horizontal .footer.bg-primary{background-color:#696cff !important}.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .footer.bg-primary .footer-container{background-color:#696cff !important}.footer.bg-primary .footer-link{color:#fff}.footer.bg-primary .footer-link:hover,.footer.bg-primary .footer-link:focus{color:#fff}.footer.bg-primary .footer-link.disabled{color:#b0b2ff !important}.footer.bg-primary .footer-text{color:#e0e1ff}.footer.bg-primary .show>.footer-link,.footer.bg-primary .active>.footer-link,.footer.bg-primary .footer-link.show,.footer.bg-primary .footer-link.active{color:#fff}.footer.bg-primary hr{border-color:rgba(255,255,255,.15)}.bg-primary.toast,.bg-primary.bs-toast{color:#fff;background-color:rgba(105,108,255,.85) !important;box-shadow:0 .25rem 1rem rgba(105,108,255,.4)}.bg-primary.toast .toast-header,.bg-primary.bs-toast .toast-header{color:#fff}.bg-primary.toast .toast-header .btn-close,.bg-primary.bs-toast .toast-header .btn-close{background-color:#696cff !important;background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");box-shadow:0 .1875rem .375rem 0 rgba(105,108,255,.4) !important}.form-floating>.form-control:focus~label,.form-floating>.form-control:focus:not(:placeholder-shown)~label,.form-floating>.form-select:focus~label,.form-floating>.form-select:focus:not(:placeholder-shown)~label{color:#696cff}.svg-illustration svg{fill:#696cff}.jstree-default .jstree-wholerow-clicked,.jstree-default .jstree-wholerow-hovered{background:#e9e9ff}.jstree-default-dark .jstree-wholerow-hovered,.jstree-default-dark .jstree-wholerow-clicked{background:#474996}.card.card-border-shadow-primary::after{border-bottom-color:#c3c4ff}.card.card-border-shadow-primary:hover::after{border-bottom-color:#696cff}.card.card-hover-border-primary:hover,.card .card-hover-border-primary:hover{border-color:#c6c7ff}html:not([dir=rtl]) .border-primary,html[dir=rtl] .border-primary{border-color:#696cff !important}a{color:#696cff}a:hover{color:#787bff}.fill-primary{fill:#696cff}.noUi-target:not([disabled]){background:rgba(105,108,255,.16)}.noUi-target:not([disabled]) .noUi-connect{background:#696cff}.noUi-target:not([disabled]) .noUi-handle{border-color:#696cff}.noUi-target:not([disabled]) .noUi-handle:hover{box-shadow:0 0 0 8px rgba(105,108,255,.16)}.noUi-target:not([disabled]) .noUi-handle:active,.noUi-target:not([disabled]) .noUi-handle:focus{box-shadow:0 0 0 13px rgba(105,108,255,.16)}.select2-container--default .select2-results__option[aria-selected=true]{background-color:rgba(105,108,255,.16) !important;color:#696cff !important}.select2-container--default.select2-container--focus .select2-selection,.select2-container--default.select2-container--open .select2-selection{border-width:2px;border-color:#696cff !important}.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice{background:rgba(105,108,255,.16) !important;color:#696cff !important}.tagify--focus{border-color:#696cff !important}.tagify__dropdown__item--active{color:#696cff !important;background:rgba(105,108,255,.16) !important}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{background-color:#696cff;border:2px solid #fff;box-shadow:0 0 3px rgba(34,48,62,.8)}.bootstrap-select .dropdown-menu.inner a[aria-selected=true]{background:rgba(105,108,255,.16) !important;color:#696cff !important}.bootstrap-select .dropdown-menu li.active small,.bootstrap-select .dropdown-menu li:active small{color:#696cff !important}.bootstrap-select .dropdown-menu .dropdown-item.selected span::before{color:#696cff !important}.bootstrap-select .dropdown-toggle.show{border-color:#696cff}.datepicker table tr td .focused,.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td.range-start,.datepicker table tr td.range-end{background:#696cff !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.datepicker table tr td.active,.datepicker table tr td.active.highlighted{color:#696cff;background:#e7e7ff}.datepicker table tr td.range,.datepicker table tr td.range.highlighted,.datepicker table tr td.range.today{color:#696cff !important;background:#e7e7ff !important}.datepicker table tr td.range.focused,.datepicker table tr td.range.highlighted.focused,.datepicker table tr td.range.today.focused{background:#e7e7ff !important}.datepicker table tr td.range.disabled,.datepicker table tr td.range.highlighted.disabled,.datepicker table tr td.range.today.disabled{background:rgba(231,231,255,.5) !important;color:rgba(105,108,255,.5) !important}.datepicker table tr td.today:not(.active){background-color:#696cff !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.flatpickr-day.today,.flatpickr-day.today:hover{color:#fff !important;border-color:#696cff;background-color:#696cff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.flatpickr-day.selected,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange{color:#696cff !important;background:#e7e7ff !important;border-color:#e7e7ff !important}.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.week.selected{color:#fff !important;background:#696cff !important;border-color:#696cff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.daterangepicker table thead th select,.daterangepicker table thead td select{background-color:rgba(0,0,0,0)}.daterangepicker td.active:not(.off){background:#696cff !important;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.daterangepicker .start-date:not(.end-date):not(.off),.daterangepicker .end-date:not(.start-date):not(.off){background-color:#696cff;color:#fff;border:0 !important}.daterangepicker .start-date:not(.end-date):not(.off):hover,.daterangepicker .end-date:not(.start-date):not(.off):hover{background-color:#696cff !important}.daterangepicker .input-mini.active{border-color:#696cff !important}.daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off){color:#696cff !important;background-color:#e7e7ff !important}.ranges li.active{color:#fff !important;background-color:#696cff !important}li.ui-timepicker-selected,.ui-timepicker-list .ui-timepicker-selected:hover{color:#fff !important;background:#696cff !important}.ql-snow.ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar button:hover,.ql-snow .ql-toolbar button:focus,.ql-snow .ql-toolbar button.ql-active,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#696cff !important}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#696cff !important}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#696cff !important}.tt-suggestion:active,.tt-cursor{background:rgba(105,108,255,.08) !important;color:#696cff !important}.dropzone.dz-drag-hover{border-color:#696cff !important}.swiper-pagination-bullet.swiper-pagination-bullet-active,.swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#696cff !important}.sk-primary.sk-plane,.sk-primary .sk-chase-dot:before,.sk-primary .sk-bounce-dot,.sk-primary .sk-wave-rect,.sk-primary.sk-pulse,.sk-primary .sk-swing-dot,.sk-primary .sk-circle-dot:before,.sk-primary .sk-circle-fade-dot:before,.sk-primary .sk-grid-cube,.sk-primary .sk-fold-cube:before{background-color:#696cff}.plyr input[type=range]::-ms-fill-lower{background:#696cff !important}.plyr input[type=range]:active::-webkit-slider-thumb{background:#696cff !important}.plyr input[type=range]:active::-moz-range-thumb{background:#696cff !important}.plyr input[type=range]:active::-ms-thumb{background:#696cff !important}.plyr--video .plyr__control.plyr__control--overlaid,.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__control[aria-expanded=true],.plyr--video .plyr__controls button:hover{background:#696cff !important;color:#fff !important}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__control[aria-expanded=true],.plyr--audio .plyr__controls button:hover{background:#696cff !important;color:#fff !important}.plyr__play-large{background:#696cff !important;color:#fff !important}.plyr__progress--played,.plyr__volume--display{color:#696cff !important}.plyr--full-ui input[type=range]{color:#696cff !important}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{background:#696cff !important}.fc .fc-event-primary:not(.fc-list-event){background-color:#e7e7ff !important;color:#696cff !important}.fc .fc-event-primary.fc-list-event .fc-list-event-dot{border-color:#696cff !important}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button){background-color:rgba(105,108,255,.16) !important;border:0;color:#696cff}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active,.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover{background-color:#696cff !important;border-color:#696cff !important;color:#fff}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover{box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step,.swal2-progress-steps[class] .swal2-progress-step-line,.swal2-progress-steps[class] .swal2-active-progress-step,.swal2-progress-steps[class] .swal2-progress-step{background:#696cff;color:#fff}.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step,.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:#e9e9ff}.pcr-app .pcr-type.active,.pcr-app .pcr-save{background:#696cff !important}.icon-card.active{outline:1px solid #696cff}.icon-card.active i,.icon-card.active svg{color:#696cff}.shepherd-element[data-popper-placement=bottom] .shepherd-arrow:before{background-color:#fff !important;border-color:#fff}.shepherd-element .shepherd-header{color:#fff}.shepherd-element .shepherd-header .shepherd-title,.shepherd-element .shepherd-header .shepherd-cancel-icon{color:#fff !important}.shepherd-element .shepherd-button:not(:disabled).btn-primary{color:#fff;background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.shepherd-element .shepherd-button:not(:disabled).btn-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-check:focus+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.shepherd-element .shepherd-button:not(:disabled).btn-primary:focus,.shepherd-element .shepherd-button:not(:disabled).btn-primary.focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}.btn-check:checked+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.btn-check:active+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.shepherd-element .shepherd-button:not(:disabled).btn-primary:active,.shepherd-element .shepherd-button:not(:disabled).btn-primary.active,.shepherd-element .shepherd-button:not(:disabled).btn-primary.show.dropdown-toggle,.show>.shepherd-element .shepherd-button:not(:disabled).btn-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.shepherd-element .shepherd-button:not(:disabled).btn-primary.disabled,.shepherd-element .shepherd-button:not(:disabled).btn-primary:disabled{color:#fff !important;background-color:#696cff !important;border-color:#696cff !important}.shepherd-element .btn-group .shepherd-button:not(:disabled).btn-primary,.shepherd-element .input-group .shepherd-button:not(:disabled).btn-primary{border-right:var(--bs-border-width) solid #5f61e6;border-left:var(--bs-border-width) solid #5f61e6}.shepherd-element .btn-group-vertical .shepherd-button:not(:disabled).btn-primary{border-top-color:#5f61e6;border-bottom-color:#5f61e6}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary{color:#8592a3 !important;border-color:rgba(0,0,0,0);background:#ebeef0}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:hover{border-color:rgba(0,0,0,0) !important;background:#788393 !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(133,146,163,.4) !important}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:focus,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.focus{color:#fff !important;background:#788393}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:active,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.active,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.show.dropdown-toggle,.show>.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.dropdown-toggle{color:#fff !important;background-color:#788393 !important;border-color:rgba(0,0,0,0) !important}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.disabled,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:disabled{color:#8592a3 !important;border-color:rgba(0,0,0,0) !important;background:#ebeef0 !important}.shepherd-element .btn-group .shepherd-button:not(:disabled).btn-label-secondary,.shepherd-element .input-group .shepherd-button:not(:disabled).btn-label-secondary{border-right:var(--bs-border-width) solid #d8dce2 !important;border-left:var(--bs-border-width) solid #d8dce2 !important}.shepherd-element .btn-group-vertical .shepherd-button:not(:disabled).btn-label-secondary{border-top:var(--bs-border-width) solid #d8dce2 !important;border-bottom:var(--bs-border-width) solid #d8dce2 !important}.bs-stepper .step.active .bs-stepper-circle{background-color:#696cff;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.bs-stepper .step.active .bs-stepper-icon svg{fill:#696cff !important}.bs-stepper .step.active .bs-stepper-icon i,.bs-stepper .step.active .bs-stepper-label{color:#696cff !important}.bs-stepper .step.active .bs-stepper-icon i .bs-stepper-title,.bs-stepper .step.active .bs-stepper-label .bs-stepper-title{color:#696cff}.bs-stepper .step.crossed .step-trigger .bs-stepper-circle{background-color:rgba(105,108,255,.16) !important;color:#696cff !important}.bs-stepper .step.crossed .step-trigger .bs-stepper-icon svg{fill:#696cff !important}.bs-stepper .step.crossed .step-trigger .bs-stepper-icon i{color:#696cff !important}.bs-stepper.wizard-icons .step.crossed .bs-stepper-label{color:#696cff !important}.bs-stepper.wizard-icons .step.crossed+.line i{color:#696cff}.app-chat .sidebar-body .chat-contact-list li.active{background-color:#696cff}.app-chat .app-chat-history .chat-history .chat-message.chat-message-right .chat-message-text{background-color:#696cff !important}.navbar.landing-navbar .navbar-nav .show>.nav-link,.navbar.landing-navbar .navbar-nav .active>.nav-link,.navbar.landing-navbar .navbar-nav .nav-link.show,.navbar.landing-navbar .navbar-nav .nav-link.active,.navbar.landing-navbar .navbar-nav .nav-link:hover{color:#696cff !important}.landing-features .features-icon-wrapper .features-icon-box .features-icon{border:2px solid rgba(105,108,255,.2)}.landing-features .features-icon-wrapper .features-icon-box:hover .features-icon{background-color:rgba(105,108,255,.05)}.bg-navbar-theme{background-color:rgba(255,255,255,.88) !important;color:#384551}.bg-navbar-theme .navbar-brand,.bg-navbar-theme .navbar-brand a{color:#646e78}.bg-navbar-theme .navbar-brand:hover,.bg-navbar-theme .navbar-brand:focus,.bg-navbar-theme .navbar-brand a:hover,.bg-navbar-theme .navbar-brand a:focus{color:#646e78}.bg-navbar-theme .navbar-search-wrapper .navbar-search-icon,.bg-navbar-theme .navbar-search-wrapper .search-input{color:#384551}.bg-navbar-theme .search-input-wrapper .search-input,.bg-navbar-theme .search-input-wrapper .search-toggler{background-color:#fff !important;color:#384551}.bg-navbar-theme .navbar-nav>.nav-link,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link{color:#384551}.bg-navbar-theme .navbar-nav>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:focus{color:#646e78}.bg-navbar-theme .navbar-nav>.nav-link.disabled,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link.disabled,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link.disabled{color:#888f97 !important}.bg-navbar-theme .navbar-nav .show>.nav-link,.bg-navbar-theme .navbar-nav .active>.nav-link,.bg-navbar-theme .navbar-nav .nav-link.show,.bg-navbar-theme .navbar-nav .nav-link.active{color:#646e78}.bg-navbar-theme .navbar-toggler{color:#384551;border-color:rgba(100,110,120,.075)}.bg-navbar-theme .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(34, 48, 62, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(34, 48, 62, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.bg-navbar-theme .navbar-text{color:#384551}.bg-navbar-theme .navbar-text a{color:#646e78}.bg-navbar-theme .navbar-text a:hover,.bg-navbar-theme .navbar-text a:focus{color:#646e78}.bg-navbar-theme hr{border-color:rgba(100,110,120,.075)}.layout-navbar{background-color:rgba(255,255,255,.88) !important;backdrop-filter:saturate(200%) blur(6px)}.layout-horizontal .layout-navbar{box-shadow:0 1px 0 #e4e6e8}.layout-navbar-fixed .layout-page:before{backdrop-filter:saturate(200%) blur(10px);background:linear-gradient(180deg, rgba(245, 245, 249, 0.7) 44%, rgba(245, 245, 249, 0.43) 73%, rgba(245, 245, 249, 0));-webkit-mask:linear-gradient(#f5f5f9, #f5f5f9 18%, transparent 100%);mask:linear-gradient(#f5f5f9, #f5f5f9 18%, transparent 100%)}.bg-menu-theme{background-color:#fff !important;color:#384551}.bg-menu-theme.menu-horizontal{background-color:rgba(255,255,255,.95) !important}.bg-menu-theme .menu-link,.bg-menu-theme .menu-horizontal-prev,.bg-menu-theme .menu-horizontal-next{color:#384551}.bg-menu-theme .menu-link:hover,.bg-menu-theme .menu-link:focus,.bg-menu-theme .menu-horizontal-prev:hover,.bg-menu-theme .menu-horizontal-prev:focus,.bg-menu-theme .menu-horizontal-next:hover,.bg-menu-theme .menu-horizontal-next:focus{color:#384551}.bg-menu-theme .menu-link.active,.bg-menu-theme .menu-horizontal-prev.active,.bg-menu-theme .menu-horizontal-next.active{color:#384551}.bg-menu-theme .menu-item.disabled .menu-link,.bg-menu-theme .menu-horizontal-prev.disabled,.bg-menu-theme .menu-horizontal-next.disabled{color:#888f97 !important}.bg-menu-theme .menu-item.open:not(.menu-item-closing)>.menu-toggle,.bg-menu-theme .menu-item.active>.menu-link{color:#384551}.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle){background-color:#fff}.bg-menu-theme.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle){background-color:#fff}.bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing)>.menu-sub,.bg-menu-theme.menu-horizontal .menu-inner .menu-item.open>.menu-toggle{background:#fff}.bg-menu-theme .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-sub,.bg-menu-theme .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-toggle{background:rgba(0,0,0,0);color:#384551}.bg-menu-theme .menu-inner-shadow{background:linear-gradient(#fff 41%, rgba(255, 255, 255, 0.11) 95%, rgba(255, 255, 255, 0))}.bg-menu-theme .menu-text{color:#384551}.bg-menu-theme .menu-header{color:#6a747d}.bg-menu-theme hr,.bg-menu-theme .menu-divider,.bg-menu-theme .menu-inner>.menu-item.open>.menu-sub::before{border-color:rgba(0,0,0,0) !important}.bg-menu-theme .menu-block::before{background-color:#6a747d}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before{background-color:#fff}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{background-color:#384551}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before,.bg-menu-theme .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{box-shadow:0 0 0 1px #fff}.bg-menu-theme .ps__thumb-y,.bg-menu-theme .ps__rail-y.ps--clicking>.ps__thumb-y{background:rgba(56,69,81,.2) !important}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{border:7px solid #fff !important}}html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open>.menu-link,.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open>.menu-link,html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover{background-color:rgba(34,48,62,.06)}.bg-menu-theme .menu-inner .menu-sub>.menu-item.active>.menu-link.menu-toggle{background-color:rgba(34,48,62,.08) !important}.bg-menu-theme .menu-inner .menu-sub>.menu-item.active:not(:has(.menu-sub)) .menu-icon{color:#696cff}.bg-menu-theme .menu-inner>.menu-item.active>.menu-link,.bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-sub>.menu-item.active:not(:has(.menu-sub))>.menu-link{color:#696cff;background-color:rgba(105,108,255,.16) !important}.bg-menu-theme .menu-inner>.menu-item.active:before{background:#696cff}.bg-menu-theme .menu-sub>.menu-item>.menu-link:before{background-color:#a7acb2 !important}.bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{background-color:#696cff !important;border:3px solid #e7e7ff !important}.app-brand .layout-menu-toggle{background-color:#696cff;border:7px solid #f5f5f9}.app-brand .layout-menu-toggle i{color:#fff}.app-brand .layout-menu-toggle .menu-inner>.menu-header::before{background-color:#a7acb2}.bg-footer-theme{color:#646e78}.layout-footer-fixed .layout-horizontal .bg-footer-theme{background-color:#fff !important}.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .bg-footer-theme .footer-container{background-color:#fff !important}.bg-footer-theme .footer-link{color:#696cff}.bg-footer-theme .footer-link:hover,.bg-footer-theme .footer-link:focus{color:#696cff}.bg-footer-theme .footer-link.disabled{color:#a2a8ae !important}.bg-footer-theme .footer-text{color:#646e78}.bg-footer-theme .show>.footer-link,.bg-footer-theme .active>.footer-link,.bg-footer-theme .footer-link.show,.bg-footer-theme .footer-link.active{color:#696cff}.bg-footer-theme hr{border-color:rgba(105,108,255,.075)}
+.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before{content:"";width:100%;height:4.75rem;position:fixed;top:0px;z-index:10}.bg-menu-theme .menu-header{position:relative}.bg-menu-theme .menu-header:before{content:"";position:absolute;inset-inline-start:0;top:50%;width:1rem;height:1px;transition:all .3s ease-in-out}.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link{border-radius:.375rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item>.menu-link{border-radius:.375rem}@media(min-width: 1200px){.layout-horizontal .bg-menu-theme .menu-inner>.menu-item{margin:.625rem 0}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item:not(:first-child){margin-left:.1875rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item:not(:last-child){margin-right:.1875rem}.layout-horizontal .bg-menu-theme .menu-inner>.menu-item .menu-sub{box-shadow:0 .25rem .75rem 0 rgba(34,48,62,.14);z-index:1}}.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:before{content:"";position:absolute;right:0;width:.25rem;height:2.6845rem;border-radius:.375rem 0 0 .375rem}[dir=rtl] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner>.menu-item.active:before{left:0;right:inherit;border-radius:0 .375rem .375rem 0}.bg-menu-theme .menu-sub>.menu-item>.menu-link:before{content:"";position:absolute;left:1.4375rem;width:.375rem;height:.375rem;border-radius:50%}[dir=rtl] .bg-menu-theme .menu-sub>.menu-item>.menu-link:before{right:1.4375rem;left:inherit}.layout-horizontal .bg-menu-theme .menu-sub>.menu-item>.menu-link:before{inset-inline-start:1rem}.bg-menu-theme .menu-horizontal-wrapper>.menu-inner>.menu-item>.menu-sub>.menu-item>.menu-link:before{display:none}.bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{left:1.1875rem;width:.875rem;height:.875rem}[dir=rtl] .bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{right:1.1875rem;left:inherit}.layout-horizontal .bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{inset-inline-start:.75rem}.layout-menu-hover .layout-menu{box-shadow:0 .25rem .75rem 0 rgba(34,48,62,.14);transition:all .3s ease-in-out}.app-brand .layout-menu-toggle{position:absolute;inset-inline-start:15.2rem;border-radius:50%;opacity:1;z-index:3}.app-brand .layout-menu-toggle i{width:1.375rem;height:1.375rem;transition:all .3s ease-in-out;line-height:1}[dir=rtl] .app-brand .layout-menu-toggle i{transform:scaleX(-1)}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{display:none}.layout-menu-expanded .app-brand .layout-menu-toggle{display:block}}.menu-vertical .menu-item{position:relative}.text-primary{color:#696cff !important}.text-body[href]:hover,.text-heading[href]:hover{color:#5f61e6 !important}.bg-primary{background-color:#696cff !important}a.bg-primary:hover,a.bg-primary:focus{background-color:#6467f2 !important}.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span{background-color:#696cff}.bg-label-primary{background-color:#e7e7ff !important;color:#696cff !important}.border-label-primary{border:3px solid #c3c4ff}.border-light-primary{border:3px solid rgba(105,108,255,.08)}.bg-label-hover-primary{background-color:#e7e7ff !important;color:#696cff !important}.bg-label-hover-primary:hover{background-color:#696cff !important;color:#fff !important}.bg-gradient-primary{background-image:linear-gradient(45deg, #696cff, #b4b6ff) !important}.page-item .page-link:hover,.page-item .page-link:focus,.pagination li>a:not(.page-link):hover,.pagination li>a:not(.page-link):focus{background-color:rgba(105,108,255,.16);color:#696cff}.page-item.active .page-link,.pagination li.active>a:not(.page-link){box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.page-item.active .page-link,.page-item.active .page-link:hover,.page-item.active .page-link:focus,.pagination li.active>a:not(.page-link),.pagination li.active>a:not(.page-link):hover,.pagination li.active>a:not(.page-link):focus{border-color:#696cff;background-color:#696cff;color:#fff}.pagination-outline-primary .page-item.active .page-link,.pagination-outline-primary .page-item.active .page-link:hover,.pagination-outline-primary .page-item.active .page-link:focus,.pagination-outline-primary.pagination li.active>a:not(.page-link),.pagination-outline-primary.pagination li.active>a:not(.page-link):hover,.pagination-outline-primary.pagination li.active>a:not(.page-link):focus{border-color:#696cff !important;color:#696cff !important;background-color:#e7e7ff !important}.progress-bar{background-color:#696cff;color:#fff;box-shadow:0 2px 4px 0 rgba(105,108,255,.4)}.modal-onboarding .carousel-indicators [data-bs-target]{background-color:#696cff}.carousel-control-prev,.carousel-control-next{color:#696cff}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#696cff}.list-group-item-primary{border-color:#696cff;background-color:#e7e7ff;color:#696cff !important}a.list-group-item-primary,button.list-group-item-primary{color:#696cff}a.list-group-item-primary:hover,a.list-group-item-primary:focus,button.list-group-item-primary:hover,button.list-group-item-primary:focus{border-color:#696cff;background-color:#d9d9f0;color:#696cff}a.list-group-item-primary.active,button.list-group-item-primary.active{border-color:#696cff !important;background-color:#696cff !important;color:#fff !important}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background-color:#e7e7ff;color:#696cff}.list-group.list-group-timeline .list-group-timeline-primary:before{border-color:#696cff;background-color:#696cff}.alert-primary{background-color:#e7e7ff;border-color:#e7e7ff;color:#696cff}.alert-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-primary .alert-link{color:#696cff}.alert-primary hr{color:#696cff !important}.alert-primary .alert-icon{background-color:#696cff;box-shadow:0 0 0 .125rem rgba(105,108,255,.16)}.alert-solid-primary{background-color:#696cff;color:#fff}.alert-solid-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-solid-primary .alert-link{color:#fff}.alert-solid-primary hr{color:#fff !important}.alert-solid-primary .alert-icon{color:#696cff !important;box-shadow:0 0 0 .125rem #8789ff}.alert-outline-primary{border-color:#696cff;color:#696cff}.alert-outline-primary .btn-close{background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.alert-outline-primary .alert-link{color:#696cff}.alert-outline-primary hr{color:#696cff !important}.alert-outline-primary .alert-icon{background-color:#696cff !important;box-shadow:0 0 0 .125rem rgba(105,108,255,.16)}.accordion.accordion-header-primary .accordion-item.active .accordion-button{color:#696cff !important}.tooltip-primary .tooltip-inner,.tooltip-primary>.tooltip .tooltip-inner,.ngb-tooltip-primary+ngb-tooltip-window .tooltip-inner{background:#696cff;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.tooltip-primary.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before{border-top-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before{border-left-color:#696cff}[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before{border-right-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before{border-bottom-color:#696cff}.tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,.tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,.ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before{border-right-color:#696cff}[dir=rtl] .tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,[dir=rtl] .tooltip-primary>.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before,[dir=rtl] .ngb-tooltip-primary+ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before{border-left-color:#696cff}.popover.popover-primary,.popover .popover-primary>.popover,.popover .ngb-popover-primary+ngb-popover-window{border-color:rgba(0,0,0,0);background:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.popover.popover-primary .popover-header,.popover .popover-primary>.popover .popover-header,.popover .ngb-popover-primary+ngb-popover-window .popover-header{border-color:rgba(255,255,255,.2);background:rgba(0,0,0,0);color:#fff}.popover.popover-primary .popover-body,.popover .popover-primary>.popover .popover-body,.popover .ngb-popover-primary+ngb-popover-window .popover-body{background:rgba(0,0,0,0);color:rgba(255,255,255,.8)}.popover.popover-primary>.popover-arrow::before,.popover .popover-primary>.popover>.popover-arrow::before,.popover .ngb-popover-primary+ngb-popover-window>.popover-arrow::before{border-color:rgba(0,0,0,0)}.popover.popover-primary.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=top]>.popover-arrow::after{border-top-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after{border-right-color:#696cff !important}[dir=rtl] .popover.popover-primary.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,[dir=rtl] .popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after,[dir=rtl] .popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=right]>.popover-arrow::after{border-left-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow::after{border-bottom-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after{border-left-color:#696cff !important}[dir=rtl] .popover.popover-primary.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,[dir=rtl] .popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after,[dir=rtl] .popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=left]>.popover-arrow::after{border-right-color:#696cff !important}.popover.popover-primary.bs-popover-auto[data-popper-placement=bottom] .popover-header::before,.popover .popover-primary>.popover.bs-popover-auto[data-popper-placement=bottom] .popover-header::before,.popover .ngb-popover-primary+ngb-popover-window.bs-popover-auto[data-popper-placement=bottom] .popover-header::before{border-bottom:1px solid rgba(0,0,0,0) !important}.table-primary{--bs-table-bg: #e1e2ff;--bs-table-striped-bg: #d6d7f3;--bs-table-striped-color: #22303e;--bs-table-active-bg: #d2d4f0;--bs-table-active-color: #22303e;--bs-table-hover-bg: #d6d7f3;--bs-table-hover-color: #22303e;color:#22303e;border-color:#cacde8}.table-primary .btn-icon,.table-primary .btn{color:#22303e}.btn-primary{color:#fff;background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.btn-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-check:focus+.btn-primary,.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}.btn-check:checked+.btn-primary,.btn-check:active+.btn-primary,.btn-primary:active,.btn-primary.active,.btn-primary.show.dropdown-toggle,.show>.btn-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-primary.disabled,.btn-primary:disabled{color:#fff !important;background-color:#696cff !important;border-color:#696cff !important}.btn-group .btn-primary,.input-group .btn-primary{border-right:var(--bs-border-width) solid #5f61e6;border-left:var(--bs-border-width) solid #5f61e6}.btn-group-vertical .btn-primary{border-top-color:#5f61e6;border-bottom-color:#5f61e6}.btn-label-primary{color:#696cff !important;border-color:rgba(0,0,0,0);background:#e7e7ff}.btn-label-primary:hover{border-color:rgba(0,0,0,0) !important;background:#5f61e6 !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4) !important}.btn-label-primary:focus,.btn-label-primary.focus{color:#fff !important;background:#5f61e6}.btn-label-primary:active,.btn-label-primary.active,.btn-label-primary.show.dropdown-toggle,.show>.btn-label-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:rgba(0,0,0,0) !important}.btn-label-primary.disabled,.btn-label-primary:disabled{color:#696cff !important;border-color:rgba(0,0,0,0) !important;background:#e7e7ff !important}.btn-group .btn-label-primary,.input-group .btn-label-primary{border-right:var(--bs-border-width) solid #cfd0ff !important;border-left:var(--bs-border-width) solid #cfd0ff !important}.btn-group-vertical .btn-label-primary{border-top:var(--bs-border-width) solid #cfd0ff !important;border-bottom:var(--bs-border-width) solid #cfd0ff !important}.btn-text-primary{color:#696cff}.btn-text-primary:hover{background:#f3f3ff;color:#696cff}.btn-text-primary:focus,.btn-text-primary.focus{color:#696cff;background:#f3f3ff}.btn-text-primary:active,.btn-text-primary.active,.btn-text-primary-check:checked+.btn-text-primary,:not(.btn-text-primary-check)+.btn-text-primary:active,.btn-text-primary:first-child:active,.btn-text-primary.show.dropdown-toggle,.show>.btn-text-primary.dropdown-toggle{color:#696cff;background:#f3f3ff !important}.btn-text-primary:disabled,.btn-text-primary.disabled{color:#696cff}.btn-group .btn-text-primary,.input-group .btn-text-primary{border-right:var(--bs-border-width) solid #696cff !important;border-left:var(--bs-border-width) solid #696cff !important}.btn-group-vertical .btn-text-primary{border-top:var(--bs-border-width) solid #696cff !important;border-bottom:var(--bs-border-width) solid #696cff !important}.btn-outline-primary{color:#696cff;border-color:#696cff;background:rgba(0,0,0,0)}.btn-outline-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4) !important}/*.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}*/.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary,.btn-outline-primary:active,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#696cff !important;border-color:#696cff !important}.btn-outline-primary .badge{background:#696cff;border-color:#696cff;color:#fff}.btn-outline-primary:hover .badge,.btn-outline-primary:focus:hover .badge,.btn-outline-primary:active .badge,.btn-outline-primary.active .badge,.show>.btn-outline-primary.dropdown-toggle .badge{background:#fff;border-color:#fff}.dropdown-item:not(.disabled).active,.dropdown-item:not(.disabled):active{background-color:rgba(105,108,255,.16);color:#696cff !important}.dropdown-menu>li:not(.disabled)>a:not(.dropdown-item):active,.dropdown-menu>li.active:not(.disabled)>a:not(.dropdown-item){background-color:rgba(105,108,255,.16);color:#696cff !important}.dt-button-collection .dropdown-item:not(.disabled):active{background-color:rgba(105,108,255,.16)}.nav-pills .nav-link.active{box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.nav-pills .nav-link.active,.nav-pills .nav-link.active:hover,.nav-pills .nav-link.active:focus{background-color:#696cff;color:#fff}.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-link.active:focus{box-shadow:0 -2px 0 #696cff inset}.nav-align-bottom .nav-tabs .nav-link.active,.nav-align-bottom .nav-tabs .nav-link.active:hover,.nav-align-bottom .nav-tabs .nav-link.active:focus,.nav-align-bottom .nav-tabs .nav-link.active,.nav-align-bottom .nav-tabs .nav-link.active:hover,.nav-align-bottom .nav-tabs .nav-link.active:focus{box-shadow:0 2px 0 #696cff inset}.nav-align-left .nav-tabs .nav-link.active,.nav-align-left .nav-tabs .nav-link.active:hover,.nav-align-left .nav-tabs .nav-link.active:focus,.nav-align-left .nav-tabs .nav-link.active,.nav-align-left .nav-tabs .nav-link.active:hover,.nav-align-left .nav-tabs .nav-link.active:focus{box-shadow:-2px 0px 0 #696cff inset}.nav-align-right .nav-tabs .nav-link.active,.nav-align-right .nav-tabs .nav-link.active:hover,.nav-align-right .nav-tabs .nav-link.active:focus,.nav-align-right .nav-tabs .nav-link.active,.nav-align-right .nav-tabs .nav-link.active:hover,.nav-align-right .nav-tabs .nav-link.active:focus{box-shadow:2px 0px 0 #696cff inset}[dir=rtl] .nav-align-left .nav-tabs .nav-link.active,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:focus,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-left .nav-tabs .nav-link.active:focus{box-shadow:2px 0px 0 #696cff inset}[dir=rtl] .nav-align-right .nav-tabs .nav-link.active,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:focus,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:hover,[dir=rtl] .nav-align-right .nav-tabs .nav-link.active:focus{box-shadow:-2px 0px 0 #696cff inset}.form-control:focus,.form-select:focus{border-color:#696cff !important}.input-group:focus-within .form-control,.input-group:focus-within .input-group-text{border-color:#696cff !important}.form-check-input:checked{background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.form-check-input[type=checkbox]:indeterminate{background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.custom-option.checked{border:2px solid #696cff !important;margin:0}.custom-option.checked .custom-option-body i,.custom-option.checked .custom-option-header i{color:#696cff}.custom-option.custom-option-label.checked{background-color:rgba(105,108,255,.12);color:#696cff}.custom-option.custom-option-label.checked .custom-option-header span,.custom-option.custom-option-label.checked .custom-option-title{color:#696cff}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url%28%23a%29'%3e%3ccircle cx='12' cy='11' r='8.5' fill='%23fff'/%3e%3c/g%3e%3cdefs%3e%3cfilter id='a' x='0' y='0' width='22' height='22' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='2'/%3e%3cfeGaussianBlur stdDeviation='2'/%3e%3cfeColorMatrix values='0 0 0 0 0.180392 0 0 0 0 0.14902 0 0 0 0 0.239216 0 0 0 0.16 0'/%3e%3cfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_6488_3264'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_dropShadow_6488_3264' result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-image:url("data:image/svg+xml,%3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url%28%23a%29'%3e%3ccircle cx='12' cy='11' r='8.5' fill='%23fff'/%3e%3c/g%3e%3cdefs%3e%3cfilter id='a' x='0' y='0' width='22' height='22' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='2'/%3e%3cfeGaussianBlur stdDeviation='2'/%3e%3cfeColorMatrix values='0 0 0 0 0.180392 0 0 0 0 0.14902 0 0 0 0 0.239216 0 0 0 0.16 0'/%3e%3cfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_6488_3264'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_dropShadow_6488_3264' result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e")}.form-control:focus~.form-label{border-color:#696cff}.form-control:focus~.form-label::after{border-color:inherit}.switch-input:checked~.switch-toggle-slider{background:#696cff;color:#fff;box-shadow:0 2px 6px 0 rgba(105,108,255,.3)}.switch-primary.switch .switch-input:checked~.switch-toggle-slider{background:#696cff;color:#fff;box-shadow:0 2px 6px 0 rgba(105,108,255,.3)}.avatar .avatar-shadow-primary{color:#696cff;background-color:rgba(105,108,255,.16);box-shadow:0 0 0 .25rem rgba(105,108,255,.06)}.timeline .timeline-point-primary{background-color:#696cff !important;outline:3px solid rgba(105,108,255,.12)}.timeline.timeline-outline .timeline-point-primary{border:2px solid #696cff !important}.timeline .timeline-indicator-primary{background-color:rgba(105,108,255,.16)}.timeline .timeline-indicator-primary i{color:#696cff !important}.divider.divider-primary .divider-text:before,.divider.divider-primary .divider-text:after{border-color:#696cff}.navbar.bg-primary{background-color:rgba(105,108,255,.88) !important;color:#e0e1ff}.navbar.bg-primary .navbar-brand,.navbar.bg-primary .navbar-brand a{color:#fff}.navbar.bg-primary .navbar-brand:hover,.navbar.bg-primary .navbar-brand:focus,.navbar.bg-primary .navbar-brand a:hover,.navbar.bg-primary .navbar-brand a:focus{color:#fff}.navbar.bg-primary .navbar-search-wrapper .navbar-search-icon,.navbar.bg-primary .navbar-search-wrapper .search-input{color:#e0e1ff}.navbar.bg-primary .search-input-wrapper .search-input,.navbar.bg-primary .search-input-wrapper .search-toggler{background-color:#696cff !important;color:#e0e1ff}.navbar.bg-primary .navbar-nav>.nav-link,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link{color:#e0e1ff}.navbar.bg-primary .navbar-nav>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav-link:focus,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link:focus,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link:hover,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link:focus{color:#fff}.navbar.bg-primary .navbar-nav>.nav-link.disabled,.navbar.bg-primary .navbar-nav>.nav-item>.nav-link.disabled,.navbar.bg-primary .navbar-nav>.nav>.nav-item>.nav-link.disabled{color:#b0b2ff !important}.navbar.bg-primary .navbar-nav .show>.nav-link,.navbar.bg-primary .navbar-nav .active>.nav-link,.navbar.bg-primary .navbar-nav .nav-link.show,.navbar.bg-primary .navbar-nav .nav-link.active{color:#fff}.navbar.bg-primary .navbar-toggler{color:#e0e1ff;border-color:rgba(255,255,255,.15)}.navbar.bg-primary .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.navbar.bg-primary .navbar-text{color:#e0e1ff}.navbar.bg-primary .navbar-text a{color:#fff}.navbar.bg-primary .navbar-text a:hover,.navbar.bg-primary .navbar-text a:focus{color:#fff}.navbar.bg-primary hr{border-color:rgba(255,255,255,.15)}.menu.bg-primary{background-color:#696cff !important;color:#e0e1ff}.menu.bg-primary.menu-horizontal{background-color:rgba(105,108,255,.95) !important}.menu.bg-primary .menu-link,.menu.bg-primary .menu-horizontal-prev,.menu.bg-primary .menu-horizontal-next{color:#e0e1ff}.menu.bg-primary .menu-link:hover,.menu.bg-primary .menu-link:focus,.menu.bg-primary .menu-horizontal-prev:hover,.menu.bg-primary .menu-horizontal-prev:focus,.menu.bg-primary .menu-horizontal-next:hover,.menu.bg-primary .menu-horizontal-next:focus{color:#fff}.menu.bg-primary .menu-link.active,.menu.bg-primary .menu-horizontal-prev.active,.menu.bg-primary .menu-horizontal-next.active{color:#fff}.menu.bg-primary .menu-item.disabled .menu-link,.menu.bg-primary .menu-horizontal-prev.disabled,.menu.bg-primary .menu-horizontal-next.disabled{color:#b0b2ff !important}.menu.bg-primary .menu-item.open:not(.menu-item-closing)>.menu-toggle,.menu.bg-primary .menu-item.active>.menu-link{color:#fff}.menu.bg-primary .menu-item.active>.menu-link:not(.menu-toggle){background-color:#6d70ff}.menu.bg-primary.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle){background-color:#7174ff}.menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing)>.menu-sub,.menu.bg-primary.menu-horizontal .menu-inner .menu-item.open>.menu-toggle{background:#6d70ff}.menu.bg-primary .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-sub,.menu.bg-primary .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-toggle{background:rgba(0,0,0,0);color:#e0e1ff}.menu.bg-primary .menu-inner-shadow{background:linear-gradient(#696cff 41%, rgba(105, 108, 255, 0.11) 95%, rgba(105, 108, 255, 0))}.menu.bg-primary .menu-text{color:#fff}.menu.bg-primary .menu-header{color:#c2c4ff}.menu.bg-primary hr,.menu.bg-primary .menu-divider,.menu.bg-primary .menu-inner>.menu-item.open>.menu-sub::before{border-color:rgba(255,255,255,.15) !important}.menu.bg-primary .menu-block::before{background-color:#c2c4ff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before{background-color:#8385ff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{background-color:#fff}.menu.bg-primary .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before,.menu.bg-primary .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{box-shadow:0 0 0 1px #6d70ff}.menu.bg-primary .ps__thumb-y,.menu.bg-primary .ps__rail-y.ps--clicking>.ps__thumb-y{background:rgba(255,255,255,.5942917647) !important}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{border:7px solid #696cff !important}}.footer.bg-primary{color:#e0e1ff}.layout-footer-fixed .layout-horizontal .footer.bg-primary{background-color:#696cff !important}.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .footer.bg-primary .footer-container{background-color:#696cff !important}.footer.bg-primary .footer-link{color:#fff}.footer.bg-primary .footer-link:hover,.footer.bg-primary .footer-link:focus{color:#fff}.footer.bg-primary .footer-link.disabled{color:#b0b2ff !important}.footer.bg-primary .footer-text{color:#e0e1ff}.footer.bg-primary .show>.footer-link,.footer.bg-primary .active>.footer-link,.footer.bg-primary .footer-link.show,.footer.bg-primary .footer-link.active{color:#fff}.footer.bg-primary hr{border-color:rgba(255,255,255,.15)}.bg-primary.toast,.bg-primary.bs-toast{color:#fff;background-color:rgba(105,108,255,.85) !important;box-shadow:0 .25rem 1rem rgba(105,108,255,.4)}.bg-primary.toast .toast-header,.bg-primary.bs-toast .toast-header{color:#fff}.bg-primary.toast .toast-header .btn-close,.bg-primary.bs-toast .toast-header .btn-close{background-color:#696cff !important;background-image:url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&amp;-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");box-shadow:0 .1875rem .375rem 0 rgba(105,108,255,.4) !important}.form-floating>.form-control:focus~label,.form-floating>.form-control:focus:not(:placeholder-shown)~label,.form-floating>.form-select:focus~label,.form-floating>.form-select:focus:not(:placeholder-shown)~label{color:#696cff}.svg-illustration svg{fill:#696cff}.jstree-default .jstree-wholerow-clicked,.jstree-default .jstree-wholerow-hovered{background:#e9e9ff}.jstree-default-dark .jstree-wholerow-hovered,.jstree-default-dark .jstree-wholerow-clicked{background:#474996}.card.card-border-shadow-primary::after{border-bottom-color:#c3c4ff}.card.card-border-shadow-primary:hover::after{border-bottom-color:#696cff}.card.card-hover-border-primary:hover,.card .card-hover-border-primary:hover{border-color:#c6c7ff}html:not([dir=rtl]) .border-primary,html[dir=rtl] .border-primary{border-color:#696cff !important}a{color:#696cff}a:hover{color:#787bff}.fill-primary{fill:#696cff}.noUi-target:not([disabled]){background:rgba(105,108,255,.16)}.noUi-target:not([disabled]) .noUi-connect{background:#696cff}.noUi-target:not([disabled]) .noUi-handle{border-color:#696cff}.noUi-target:not([disabled]) .noUi-handle:hover{box-shadow:0 0 0 8px rgba(105,108,255,.16)}.noUi-target:not([disabled]) .noUi-handle:active,.noUi-target:not([disabled]) .noUi-handle:focus{box-shadow:0 0 0 13px rgba(105,108,255,.16)}.select2-container--default .select2-results__option[aria-selected=true]{background-color:rgba(105,108,255,.16) !important;color:#696cff !important}.select2-container--default.select2-container--focus .select2-selection,.select2-container--default.select2-container--open .select2-selection{border-width:2px;border-color:#696cff !important}.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice{background:rgba(105,108,255,.16) !important;color:#696cff !important}.tagify--focus{border-color:#696cff !important}.tagify__dropdown__item--active{color:#696cff !important;background:rgba(105,108,255,.16) !important}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{background-color:#696cff;border:2px solid #fff;box-shadow:0 0 3px rgba(34,48,62,.8)}.bootstrap-select .dropdown-menu.inner a[aria-selected=true]{background:rgba(105,108,255,.16) !important;color:#696cff !important}.bootstrap-select .dropdown-menu li.active small,.bootstrap-select .dropdown-menu li:active small{color:#696cff !important}.bootstrap-select .dropdown-menu .dropdown-item.selected span::before{color:#696cff !important}.bootstrap-select .dropdown-toggle.show{border-color:#696cff}.datepicker table tr td .focused,.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td.range-start,.datepicker table tr td.range-end{background:#696cff !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.datepicker table tr td.active,.datepicker table tr td.active.highlighted{color:#696cff;background:#e7e7ff}.datepicker table tr td.range,.datepicker table tr td.range.highlighted,.datepicker table tr td.range.today{color:#696cff !important;background:#e7e7ff !important}.datepicker table tr td.range.focused,.datepicker table tr td.range.highlighted.focused,.datepicker table tr td.range.today.focused{background:#e7e7ff !important}.datepicker table tr td.range.disabled,.datepicker table tr td.range.highlighted.disabled,.datepicker table tr td.range.today.disabled{background:rgba(231,231,255,.5) !important;color:rgba(105,108,255,.5) !important}.datepicker table tr td.today:not(.active){background-color:#696cff !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.flatpickr-day.today,.flatpickr-day.today:hover{color:#fff !important;border-color:#696cff;background-color:#696cff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.flatpickr-day.selected,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange{color:#696cff !important;background:#e7e7ff !important;border-color:#e7e7ff !important}.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.week.selected{color:#fff !important;background:#696cff !important;border-color:#696cff !important;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.daterangepicker table thead th select,.daterangepicker table thead td select{background-color:rgba(0,0,0,0)}.daterangepicker td.active:not(.off){background:#696cff !important;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.daterangepicker .start-date:not(.end-date):not(.off),.daterangepicker .end-date:not(.start-date):not(.off){background-color:#696cff;color:#fff;border:0 !important}.daterangepicker .start-date:not(.end-date):not(.off):hover,.daterangepicker .end-date:not(.start-date):not(.off):hover{background-color:#696cff !important}.daterangepicker .input-mini.active{border-color:#696cff !important}.daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off){color:#696cff !important;background-color:#e7e7ff !important}.ranges li.active{color:#fff !important;background-color:#696cff !important}li.ui-timepicker-selected,.ui-timepicker-list .ui-timepicker-selected:hover{color:#fff !important;background:#696cff !important}.ql-snow.ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar button:hover,.ql-snow .ql-toolbar button:focus,.ql-snow .ql-toolbar button.ql-active,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#696cff !important}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#696cff !important}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#696cff !important}.tt-suggestion:active,.tt-cursor{background:rgba(105,108,255,.08) !important;color:#696cff !important}.dropzone.dz-drag-hover{border-color:#696cff !important}.swiper-pagination-bullet.swiper-pagination-bullet-active,.swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#696cff !important}.sk-primary.sk-plane,.sk-primary .sk-chase-dot:before,.sk-primary .sk-bounce-dot,.sk-primary .sk-wave-rect,.sk-primary.sk-pulse,.sk-primary .sk-swing-dot,.sk-primary .sk-circle-dot:before,.sk-primary .sk-circle-fade-dot:before,.sk-primary .sk-grid-cube,.sk-primary .sk-fold-cube:before{background-color:#696cff}.plyr input[type=range]::-ms-fill-lower{background:#696cff !important}.plyr input[type=range]:active::-webkit-slider-thumb{background:#696cff !important}.plyr input[type=range]:active::-moz-range-thumb{background:#696cff !important}.plyr input[type=range]:active::-ms-thumb{background:#696cff !important}.plyr--video .plyr__control.plyr__control--overlaid,.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__control[aria-expanded=true],.plyr--video .plyr__controls button:hover{background:#696cff !important;color:#fff !important}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__control[aria-expanded=true],.plyr--audio .plyr__controls button:hover{background:#696cff !important;color:#fff !important}.plyr__play-large{background:#696cff !important;color:#fff !important}.plyr__progress--played,.plyr__volume--display{color:#696cff !important}.plyr--full-ui input[type=range]{color:#696cff !important}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{background:#696cff !important}.fc .fc-event-primary:not(.fc-list-event){background-color:#e7e7ff !important;color:#696cff !important}.fc .fc-event-primary.fc-list-event .fc-list-event-dot{border-color:#696cff !important}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button){background-color:rgba(105,108,255,.16) !important;border:0;color:#696cff}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active,.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover{background-color:#696cff !important;border-color:#696cff !important;color:#fff}.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover{box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step,.swal2-progress-steps[class] .swal2-progress-step-line,.swal2-progress-steps[class] .swal2-active-progress-step,.swal2-progress-steps[class] .swal2-progress-step{background:#696cff;color:#fff}.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step,.swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:#e9e9ff}.pcr-app .pcr-type.active,.pcr-app .pcr-save{background:#696cff !important}.icon-card.active{outline:1px solid #696cff}.icon-card.active i,.icon-card.active svg{color:#696cff}.shepherd-element[data-popper-placement=bottom] .shepherd-arrow:before{background-color:#fff !important;border-color:#fff}.shepherd-element .shepherd-header{color:#fff}.shepherd-element .shepherd-header .shepherd-title,.shepherd-element .shepherd-header .shepherd-cancel-icon{color:#fff !important}.shepherd-element .shepherd-button:not(:disabled).btn-primary{color:#fff;background-color:#696cff;border-color:#696cff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.shepherd-element .shepherd-button:not(:disabled).btn-primary:hover{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.btn-check:focus+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.shepherd-element .shepherd-button:not(:disabled).btn-primary:focus,.shepherd-element .shepherd-button:not(:disabled).btn-primary.focus{color:#fff;background-color:#5f61e6;border-color:#5f61e6}.btn-check:checked+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.btn-check:active+.shepherd-element .shepherd-button:not(:disabled).btn-primary,.shepherd-element .shepherd-button:not(:disabled).btn-primary:active,.shepherd-element .shepherd-button:not(:disabled).btn-primary.active,.shepherd-element .shepherd-button:not(:disabled).btn-primary.show.dropdown-toggle,.show>.shepherd-element .shepherd-button:not(:disabled).btn-primary.dropdown-toggle{color:#fff !important;background-color:#5f61e6 !important;border-color:#5f61e6 !important}.shepherd-element .shepherd-button:not(:disabled).btn-primary.disabled,.shepherd-element .shepherd-button:not(:disabled).btn-primary:disabled{color:#fff !important;background-color:#696cff !important;border-color:#696cff !important}.shepherd-element .btn-group .shepherd-button:not(:disabled).btn-primary,.shepherd-element .input-group .shepherd-button:not(:disabled).btn-primary{border-right:var(--bs-border-width) solid #5f61e6;border-left:var(--bs-border-width) solid #5f61e6}.shepherd-element .btn-group-vertical .shepherd-button:not(:disabled).btn-primary{border-top-color:#5f61e6;border-bottom-color:#5f61e6}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary{color:#8592a3 !important;border-color:rgba(0,0,0,0);background:#ebeef0}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:hover{border-color:rgba(0,0,0,0) !important;background:#788393 !important;color:#fff !important;box-shadow:0 .125rem .25rem 0 rgba(133,146,163,.4) !important}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:focus,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.focus{color:#fff !important;background:#788393}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:active,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.active,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.show.dropdown-toggle,.show>.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.dropdown-toggle{color:#fff !important;background-color:#788393 !important;border-color:rgba(0,0,0,0) !important}.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary.disabled,.shepherd-element .shepherd-button:not(:disabled).btn-label-secondary:disabled{color:#8592a3 !important;border-color:rgba(0,0,0,0) !important;background:#ebeef0 !important}.shepherd-element .btn-group .shepherd-button:not(:disabled).btn-label-secondary,.shepherd-element .input-group .shepherd-button:not(:disabled).btn-label-secondary{border-right:var(--bs-border-width) solid #d8dce2 !important;border-left:var(--bs-border-width) solid #d8dce2 !important}.shepherd-element .btn-group-vertical .shepherd-button:not(:disabled).btn-label-secondary{border-top:var(--bs-border-width) solid #d8dce2 !important;border-bottom:var(--bs-border-width) solid #d8dce2 !important}.bs-stepper .step.active .bs-stepper-circle{background-color:#696cff;color:#fff;box-shadow:0 .125rem .25rem 0 rgba(105,108,255,.4)}.bs-stepper .step.active .bs-stepper-icon svg{fill:#696cff !important}.bs-stepper .step.active .bs-stepper-icon i,.bs-stepper .step.active .bs-stepper-label{color:#696cff !important}.bs-stepper .step.active .bs-stepper-icon i .bs-stepper-title,.bs-stepper .step.active .bs-stepper-label .bs-stepper-title{color:#696cff}.bs-stepper .step.crossed .step-trigger .bs-stepper-circle{background-color:rgba(105,108,255,.16) !important;color:#696cff !important}.bs-stepper .step.crossed .step-trigger .bs-stepper-icon svg{fill:#696cff !important}.bs-stepper .step.crossed .step-trigger .bs-stepper-icon i{color:#696cff !important}.bs-stepper.wizard-icons .step.crossed .bs-stepper-label{color:#696cff !important}.bs-stepper.wizard-icons .step.crossed+.line i{color:#696cff}.app-chat .sidebar-body .chat-contact-list li.active{background-color:#696cff}.app-chat .app-chat-history .chat-history .chat-message.chat-message-right .chat-message-text{background-color:#696cff !important}.navbar.landing-navbar .navbar-nav .show>.nav-link,.navbar.landing-navbar .navbar-nav .active>.nav-link,.navbar.landing-navbar .navbar-nav .nav-link.show,.navbar.landing-navbar .navbar-nav .nav-link.active,.navbar.landing-navbar .navbar-nav .nav-link:hover{color:#696cff !important}.landing-features .features-icon-wrapper .features-icon-box .features-icon{border:2px solid rgba(105,108,255,.2)}.landing-features .features-icon-wrapper .features-icon-box:hover .features-icon{background-color:rgba(105,108,255,.05)}.bg-navbar-theme{background-color:rgba(255,255,255,.88) !important;color:#384551}.bg-navbar-theme .navbar-brand,.bg-navbar-theme .navbar-brand a{color:#646e78}.bg-navbar-theme .navbar-brand:hover,.bg-navbar-theme .navbar-brand:focus,.bg-navbar-theme .navbar-brand a:hover,.bg-navbar-theme .navbar-brand a:focus{color:#646e78}.bg-navbar-theme .navbar-search-wrapper .navbar-search-icon,.bg-navbar-theme .navbar-search-wrapper .search-input{color:#384551}.bg-navbar-theme .search-input-wrapper .search-input,.bg-navbar-theme .search-input-wrapper .search-toggler{background-color:#fff !important;color:#384551}.bg-navbar-theme .navbar-nav>.nav-link,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link{color:#384551}.bg-navbar-theme .navbar-nav>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link:focus,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:hover,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link:focus{color:#646e78}.bg-navbar-theme .navbar-nav>.nav-link.disabled,.bg-navbar-theme .navbar-nav>.nav-item>.nav-link.disabled,.bg-navbar-theme .navbar-nav>.nav>.nav-item>.nav-link.disabled{color:#888f97 !important}.bg-navbar-theme .navbar-nav .show>.nav-link,.bg-navbar-theme .navbar-nav .active>.nav-link,.bg-navbar-theme .navbar-nav .nav-link.show,.bg-navbar-theme .navbar-nav .nav-link.active{color:#646e78}.bg-navbar-theme .navbar-toggler{color:#384551;border-color:rgba(100,110,120,.075)}.bg-navbar-theme .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(34, 48, 62, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(34, 48, 62, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.bg-navbar-theme .navbar-text{color:#384551}.bg-navbar-theme .navbar-text a{color:#646e78}.bg-navbar-theme .navbar-text a:hover,.bg-navbar-theme .navbar-text a:focus{color:#646e78}.bg-navbar-theme hr{border-color:rgba(100,110,120,.075)}.layout-navbar{background-color:rgba(255,255,255,.88) !important;backdrop-filter:saturate(200%) blur(6px)}.layout-horizontal .layout-navbar{box-shadow:0 1px 0 #e4e6e8}.layout-navbar-fixed .layout-page:before{backdrop-filter:saturate(200%) blur(10px);background:linear-gradient(180deg, rgba(245, 245, 249, 0.7) 44%, rgba(245, 245, 249, 0.43) 73%, rgba(245, 245, 249, 0));-webkit-mask:linear-gradient(#f5f5f9, #f5f5f9 18%, transparent 100%);mask:linear-gradient(#f5f5f9, #f5f5f9 18%, transparent 100%)}.bg-menu-theme{background-color:#fff !important;color:#384551}.bg-menu-theme.menu-horizontal{background-color:rgba(255,255,255,.95) !important}.bg-menu-theme .menu-link,.bg-menu-theme .menu-horizontal-prev,.bg-menu-theme .menu-horizontal-next{color:#384551}.bg-menu-theme .menu-link:hover,.bg-menu-theme .menu-link:focus,.bg-menu-theme .menu-horizontal-prev:hover,.bg-menu-theme .menu-horizontal-prev:focus,.bg-menu-theme .menu-horizontal-next:hover,.bg-menu-theme .menu-horizontal-next:focus{color:#384551}.bg-menu-theme .menu-link.active,.bg-menu-theme .menu-horizontal-prev.active,.bg-menu-theme .menu-horizontal-next.active{color:#384551}.bg-menu-theme .menu-item.disabled .menu-link,.bg-menu-theme .menu-horizontal-prev.disabled,.bg-menu-theme .menu-horizontal-next.disabled{color:#888f97 !important}.bg-menu-theme .menu-item.open:not(.menu-item-closing)>.menu-toggle,.bg-menu-theme .menu-item.active>.menu-link{color:#384551}.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle){background-color:#fff}.bg-menu-theme.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle){background-color:#fff}.bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing)>.menu-sub,.bg-menu-theme.menu-horizontal .menu-inner .menu-item.open>.menu-toggle{background:#fff}.bg-menu-theme .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-sub,.bg-menu-theme .menu-inner>.menu-item.menu-item-closing .menu-item.open .menu-toggle{background:rgba(0,0,0,0);color:#384551}.bg-menu-theme .menu-inner-shadow{background:linear-gradient(#fff 41%, rgba(255, 255, 255, 0.11) 95%, rgba(255, 255, 255, 0))}.bg-menu-theme .menu-text{color:#384551}.bg-menu-theme .menu-header{color:#6a747d}.bg-menu-theme hr,.bg-menu-theme .menu-divider,.bg-menu-theme .menu-inner>.menu-item.open>.menu-sub::before{border-color:rgba(0,0,0,0) !important}.bg-menu-theme .menu-block::before{background-color:#6a747d}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before{background-color:#fff}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{background-color:#384551}.bg-menu-theme .menu-inner>.menu-item.open .menu-item.open>.menu-toggle::before,.bg-menu-theme .menu-inner>.menu-item.open .menu-item.active>.menu-link::before{box-shadow:0 0 0 1px #fff}.bg-menu-theme .ps__thumb-y,.bg-menu-theme .ps__rail-y.ps--clicking>.ps__thumb-y{background:rgba(56,69,81,.2) !important}@media(max-width: 1199.98px){.app-brand .layout-menu-toggle{border:7px solid #fff !important}}html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open>.menu-link,.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open>.menu-link,html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover{background-color:rgba(34,48,62,.06)}.bg-menu-theme .menu-inner .menu-sub>.menu-item.active>.menu-link.menu-toggle{background-color:rgba(34,48,62,.08) !important}.bg-menu-theme .menu-inner .menu-sub>.menu-item.active:not(:has(.menu-sub)) .menu-icon{color:#696cff}.bg-menu-theme .menu-inner>.menu-item.active>.menu-link,.bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-sub>.menu-item.active:not(:has(.menu-sub))>.menu-link{color:#696cff;background-color:rgba(105,108,255,.16) !important}.bg-menu-theme .menu-inner>.menu-item.active:before{background:#696cff}.bg-menu-theme .menu-sub>.menu-item>.menu-link:before{background-color:#a7acb2 !important}.bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before{background-color:#696cff !important;border:3px solid #e7e7ff !important}.app-brand .layout-menu-toggle{background-color:#696cff;border:7px solid #f5f5f9}.app-brand .layout-menu-toggle i{color:#fff}.app-brand .layout-menu-toggle .menu-inner>.menu-header::before{background-color:#a7acb2}.bg-footer-theme{color:#646e78}.layout-footer-fixed .layout-horizontal .bg-footer-theme{background-color:#fff !important}.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .bg-footer-theme .footer-container{background-color:#fff !important}.bg-footer-theme .footer-link{color:#696cff}.bg-footer-theme .footer-link:hover,.bg-footer-theme .footer-link:focus{color:#696cff}.bg-footer-theme .footer-link.disabled{color:#a2a8ae !important}.bg-footer-theme .footer-text{color:#646e78}.bg-footer-theme .show>.footer-link,.bg-footer-theme .active>.footer-link,.bg-footer-theme .footer-link.show,.bg-footer-theme .footer-link.active{color:#696cff}.bg-footer-theme hr{border-color:rgba(105,108,255,.075)}
diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 62e3134..0f244bb 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -21,7 +21,7 @@
             </div>
             <!-- 카테고리 중복 -->
             <div class="invalid-feedback" :class="isCateAlert ? 'display-block' : ''">
-                카테고리 중복입니다.
+                카테고리는 중복이거나 공백이면 안됩니다. 확인해주세요.
             </div>
         </div>
     </div>
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 91efd33..bfabc39 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -1,8 +1,8 @@
 <template>
     <li class="mt-5 card p-5">
         <DictWrite 
-            v-if="isWriteVisible" 
-            @close="isWriteVisible = false" 
+            v-if="writeStore.isItemActive(item.WRDDICSEQ)" 
+            @close="writeStore.closeAll();" 
             :dataList="cateList" 
             @addWord="editWord"
             :NumValue="item.WRDDICSEQ"
@@ -35,7 +35,9 @@
                             class="rounded-circle user-avatar"
                             :src="getProfileImage(item.author.profileImage)"
                             alt="최초 작성자"
-                            :style="{ borderColor: item.author.color}"/>
+                            :style="{ borderColor: item.author.color}"
+                            @error="setDefaultImage"
+                        />
                     </div>
                     <div>
                         <p class="mb-0 small fw-medium">{{ formattedDate(item.author.createdAt) }}</p>
@@ -52,7 +54,9 @@
                             class="rounded-circle user-avatar"
                             :src="getProfileImage(item.lastEditor.profileImage)"
                             alt="최근 작성자"
-                            :style="{ borderColor: item.lastEditor.color}"/>
+                            :style="{ borderColor: item.lastEditor.color}"
+                            @error="setDefaultImage"
+                        />
                     </div>
                     <div>
                         <p class="mb-0 small fw-medium">{{ formattedDate(item.lastEditor.updatedAt) }}</p>
@@ -62,7 +66,7 @@
         </div>
 
         <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
-            <EditBtn @click="toggleWriteVisible" />
+            <EditBtn @click="writeStore.toggleItem(item.WRDDICSEQ)" />
         </div>
     </li>
 </template>
@@ -75,8 +79,10 @@ import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
 import { formattedDate } from "@/common/formattedDate";
-
 import { useUserInfoStore } from '@s/useUserInfoStore';
+import { useWriteVisibleStore } from '@s/writeVisible';
+
+const writeStore = useWriteVisibleStore();
 
 // 유저 구분
 const userStore = useUserInfoStore();
@@ -107,13 +113,13 @@ const props = defineProps({
 const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
 
 // 글 수정 상태
-const isWriteVisible = ref(false);
+// const isWriteVisible = ref(false);
 
 
 // 글 수정 toggle
-const toggleWriteVisible = () => {
-    isWriteVisible.value = !isWriteVisible.value;
-};
+// const toggleWriteVisible = () => {
+//     isWriteVisible.value = !isWriteVisible.value;
+// };
 
 //카테고리 등록 수정
 // const addCategory = (data) => {
@@ -176,7 +182,8 @@ const editWord = (data) => {
     .then((res) => {
         if (res.data.data === 1) {
             toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
-            isWriteVisible.value = false;
+            // isWriteVisible.value = false;
+            writeStore.closeAll();
             emit('refreshWordList');
         } else {
             console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
@@ -191,9 +198,6 @@ const editWord = (data) => {
 
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 
-// 날짜 포맷
-// const formatDate = (dateString) => new Date(dateString).toLocaleString();
-
 // 프로필 이미지
 const defaultProfile = "/img/icons/icon.png";
 
@@ -201,6 +205,10 @@ const getProfileImage = (profilePath) => {
     return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 };
 
+const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+};
+
 
 // 체크 상태 변경 시 부모로 전달
 const toggleCheck = (event) => {
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index d952edc..6cb6859 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -65,6 +65,7 @@ import QEditor from '@/components/editor/QEditor.vue';
 import FormInput from '@/components/input/FormInput.vue';
 import FormSelect from '@/components/input/FormSelect.vue';
 import PlusBtn from '../button/PlusBtn.vue';
+// import { clearConfig } from 'dompurify';
 // import { useUserInfoStore } from '@s/useUserInfoStore';
 
 // 유저 구분
@@ -153,20 +154,32 @@ const onChange = (newValue) => {
 //용어 등록
 const saveWord = () => {
     //validation
-    console.log('computedTitle.value', computedTitle.value);
-    
+    let computedTitleTrim;
+
+    if(computedTitle.value != undefined){
+        computedTitleTrim = computedTitle.value.trim()
+    }
     
     // 용어 체크
-    if(computedTitle.value == undefined){
+    if(computedTitleTrim == undefined || computedTitleTrim == ''){
         wordTitleAlert.value = true;
         return;
+    } else {
+        wordTitleAlert.value = false;
+    }
+
+    // 내용 확인
+    let inserts = [];
+    if(inserts.length === 0 && content.value?.ops?.length > 0){
+        inserts = content.value.ops.map(op => op.insert.trim());
     }
 
     // 내용 체크
-    if(content.value == ''){
+    if(content.value == '' || inserts.join('') === ''){
         wordContentAlert.value = true;
         return;
     }
+    
 
     const wordData = {
         id: props.NumValue || null,
@@ -181,12 +194,26 @@ const saveWord = () => {
 
 // 카테고리 focusout 이벤트 핸들러 추가
 const handleCategoryFocusout = (value) => {
+    const valueTrim = value.trim();
 
-    const existingCategory = props.dataList.find(item => item.label === value);
+    const existingCategory = props.dataList.find(item => item.label === valueTrim);
     // console.log('existingCategory', existingCategory);
     
-    if (existingCategory) {
-        // console.log('이미 존재하는 카테고리입니다:', value);
+    // 카테고리 입력시 공백
+    if(valueTrim == ''){
+        //alert('공백 ㄴㄴ');
+        addCategoryAlert.value = true;
+        
+        // 공백시 강제 focus
+        setTimeout(() => {
+            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+            if (inputElement) {
+                inputElement.focus();
+            }
+        }, 0);
+
+        
+    }else if (existingCategory) {
         addCategoryAlert.value = true;
         
         // 중복시 강제 focus
diff --git a/src/stores/writeVisible.js b/src/stores/writeVisible.js
new file mode 100644
index 0000000..d45c164
--- /dev/null
+++ b/src/stores/writeVisible.js
@@ -0,0 +1,48 @@
+/*
+    작성자 : 조대원
+    작성일 : 2025-02-27
+    수정자 :
+    수정일 :
+    설명   : 용어집 작성, 수정 공통관리
+*/
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useWriteVisibleStore = defineStore('writeVisible', () => {
+    // 현재 열려있는 항목의 ID를 저장 (열린 것이 없으면 null)
+    const activeItemId = ref(null);
+
+    // 특정 항목의 열림/닫힘 상태 확인
+    function isItemActive(itemId) {
+        return activeItemId.value === itemId;
+    }
+
+    // 항목 토글 - 현재 열려있으면 닫고, 닫혀있으면 열기
+    function toggleItem(itemId) {
+        if (activeItemId.value === itemId) {
+            // 현재 열려있는 항목을 다시 클릭하면 닫기
+            activeItemId.value = null;
+        } else {
+            // 다른 항목 클릭시 해당 항목을 열고 이전 항목은 자동으로 닫힘
+            activeItemId.value = itemId;
+        }
+    }
+
+    // 특정 항목 강제로 열기 (다른 항목은 닫힘)
+    function setActiveItem(itemId) {
+        activeItemId.value = itemId;
+    }
+
+    // 모든 항목 닫기
+    function closeAll() {
+        activeItemId.value = null;
+    }
+
+    return { 
+        activeItemId, 
+        isItemActive, 
+        toggleItem, 
+        setActiveItem, 
+        closeAll 
+    };
+});
\ No newline at end of file
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 3d71174..1be99ab 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -14,7 +14,7 @@
             <!-- 단어 갯수, 작성하기 -->
             <div class="mt-4">
                 단어 : {{ total }}
-                <WriteButton @click="toggleWriteForm" />
+                <WriteButton @click="writeStore.toggleItem(999999)" />
             </div>
 
             <!-- ㄱ ㄴ ㄷ ㄹ -->
@@ -28,8 +28,8 @@
             </div>
 
             <!-- 작성 -->
-            <div v-if="isWriteVisible" class="mt-5">
-                <DictWrite @close="isWriteVisible = false" :dataList="cateList"  @addWord="addWord"/>
+            <div v-if="writeStore.isItemActive(999999)" class="mt-5">
+                <DictWrite @close="writeStore.closeAll()" :dataList="cateList"  @addWord="addWord"/>
             </div>
         </div>
 
@@ -78,9 +78,13 @@
     import commonApi from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
     import { useUserInfoStore } from '@s/useUserInfoStore';
+    import { useWriteVisibleStore } from '@s/writeVisible';
+
+    // 작성창 구분
+    const writeStore = useWriteVisibleStore();
 
     // 유저 구분
-    const userStore = useUserInfoStore();
+    // const userStore = useUserInfoStore();
 
     const { appContext } = getCurrentInstance();
     const $common = appContext.config.globalProperties.$common;
@@ -118,7 +122,7 @@
     const searchText = ref('');
 
     // 작성
-    const isWriteVisible = ref(false);
+    // const isWriteVisible = ref(false);
 
     // 데이터 로드
     onMounted(() => {
@@ -168,9 +172,9 @@
     }
 
     // 작성 toggle
-    const toggleWriteForm = () => {
-        isWriteVisible.value = !isWriteVisible.value;
-    };
+    // const toggleWriteForm = () => {
+    //     isWriteVisible.value = !isWriteVisible.value;
+    // };
 
     //카테고리 등록
     // const addCategory = (data) =>{
@@ -197,15 +201,14 @@
     const addWord = (wordData, data) => {
         let category = null;
         // 카테고리 체크
-        const existingCategory = cateList.value.find(item => item.label === data);
-        if (existingCategory) {
-            console.log('카테고리 중복');
+        const existingCategory = cateList.value.find(item => item.label === data.trim());
 
+        if (existingCategory) {
             //카테고리 있을시 그냥 저장
             category = existingCategory.label == '' ? wordData.category : existingCategory.value;
         } else {
             //카테고리 없을시 카테고리 와 용어 둘다 저장
-            console.log('카테고리 없음');
+            // console.log('카테고리 없음');
             const lastCategory = cateList.value[cateList.value.length - 1];
             category = lastCategory ? lastCategory.value + 1 : 600101;
         }
@@ -224,7 +227,8 @@
             axios.post('worddict/insertWord', payload).then(res => {
                 if (res.data.status === 'OK') {
                     toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    isWriteVisible.value = false;
+                    // isWriteVisible.value = false;
+                    writeStore.closeAll();
                     getwordList();
                     const newCategory = { label: data, value: category }; // 여기서 data 사용
                     cateList.value = [newCategory, ...cateList.value];
@@ -234,7 +238,8 @@
             axios.post('worddict/insertWord', payload).then(res => {
                 if (res.data.status === 'OK') {
                     toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    isWriteVisible.value = false;
+                    // isWriteVisible.value = false;
+                    writeStore.closeAll();
                     getwordList();
                 }
             });
@@ -268,7 +273,8 @@
         .then(res => {
             if (res.data.status == 'OK') {
                 toastStore.onToast('용어 삭제가 완료되었습니다.', 's');
-                isWriteVisible.value = false;
+                // isWriteVisible.value = false;
+                writeStore.closeAll();
                 getwordList();
 
                 // 삭제 후 초기화
@@ -277,7 +283,7 @@
             }
         })
         .catch(error => {
-            console.error('삭제 요청 중 오류 발생:', error);
+            // console.error('삭제 요청 중 오류 발생:', error);
             toastStore.onToast('오류가 발생했습니다. 다시 시도해주세요.', 'e');
         });
 

From 4e75c988dec190c866b14d4513222ec79d93676c Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 27 Feb 2025 11:37:51 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=EB=A1=9C=EC=BB=AC,=20=EA=B0=9C=EB=B0=9C=20?=
 =?UTF-8?q?=EC=8B=A4=ED=96=89=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                        |  6 +-
 .env.mine                       |  6 ++
 package.json                    | 97 +++++++++++++++++----------------
 src/common/axios-interceptor.js |  2 +-
 src/layouts/TheTop.vue          | 68 ++++++++++++-----------
 vite.config.js                  | 50 +++++++++--------
 6 files changed, 122 insertions(+), 107 deletions(-)
 create mode 100644 .env.mine

diff --git a/.env.dev b/.env.dev
index f608ba3..5702020 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,6 +1,6 @@
-VITE_DOMAIN = http://localhost:5173/
+VITE_DOMAIN = https://192.168.0.251:5173/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
 # VITE_FILE_URL = http://localhost:10325/ms/
-# VITE_API_URL = http://localhost:10325/api/
-VITE_API_URL = http://localhost:10325/test/
+VITE_API_URL = https://192.168.0.251:10325/api/
+VITE_TEST_URL = https://192.168.0.251:10325/test/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492
\ No newline at end of file
diff --git a/.env.mine b/.env.mine
new file mode 100644
index 0000000..6f5a98c
--- /dev/null
+++ b/.env.mine
@@ -0,0 +1,6 @@
+VITE_DOMAIN = http://localhost:5173/
+# VITE_LOGIN_URL = http://localhost:10325/ms/
+# VITE_FILE_URL = http://localhost:10325/ms/
+VITE_API_URL = http://localhost:10325/api/
+VITE_TEST_URL = http://localhost:10325/test/
+VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492
\ No newline at end of file
diff --git a/package.json b/package.json
index 2b5c030..9640429 100644
--- a/package.json
+++ b/package.json
@@ -1,50 +1,51 @@
 {
-  "name": "front",
-  "version": "0.0.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite --host 0.0.0.0 --mode dev",
-    "build": "vite build --mode prod",
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/"
-  },
-  "dependencies": {
-    "@fullcalendar/core": "^6.1.15",
-    "@fullcalendar/daygrid": "^6.1.15",
-    "@fullcalendar/interaction": "^6.1.15",
-    "@fullcalendar/vue3": "^6.1.15",
-    "@popperjs/core": "^2.11.8",
-    "@tinymce/tinymce-vue": "^5.1.1",
-    "@vueup/vue-quill": "^1.2.0",
-    "axios": "^1.7.9",
-    "bootstrap": "^5.3.3",
-    "bootstrap-icons": "^1.11.3",
-    "dayjs": "^1.11.13",
-    "dompurify": "^3.2.3",
-    "flatpickr": "^4.6.13",
-    "front": "file:",
-    "heic2any": "^0.0.4",
-    "pinia": "^2.2.6",
-    "pinia-plugin-persist": "^1.0.0",
-    "quill": "^2.0.3",
-    "upload-images-converter": "^2.0.2",
-    "vite-plugin-mkcert": "^1.17.6",
-    "vue": "^3.5.13",
-    "vue-flatpickr-component": "^11.0.5",
-    "vue-router": "^4.4.5",
-    "vue3-kakao-maps": "^2.3.10"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.14.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "eslint": "^9.14.0",
-    "eslint-plugin-vue": "^9.30.0",
-    "prettier": "^3.3.3",
-    "vite": "^5.4.10",
-    "vite-plugin-inspect": "^0.8.9",
-    "vite-plugin-vue-devtools": "^7.6.5"
-  }
+    "name": "front",
+    "version": "0.0.1",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite --host 0.0.0.0 --mode dev",
+        "mine": "vite --host 0.0.0.0 --mode mine",
+        "build": "vite build --mode prod",
+        "preview": "vite preview",
+        "lint": "eslint . --fix",
+        "format": "prettier --write src/"
+    },
+    "dependencies": {
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/vue3": "^6.1.15",
+        "@popperjs/core": "^2.11.8",
+        "@tinymce/tinymce-vue": "^5.1.1",
+        "@vueup/vue-quill": "^1.2.0",
+        "axios": "^1.7.9",
+        "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
+        "dayjs": "^1.11.13",
+        "dompurify": "^3.2.3",
+        "flatpickr": "^4.6.13",
+        "front": "file:",
+        "heic2any": "^0.0.4",
+        "pinia": "^2.2.6",
+        "pinia-plugin-persist": "^1.0.0",
+        "quill": "^2.0.3",
+        "upload-images-converter": "^2.0.2",
+        "vite-plugin-mkcert": "^1.17.6",
+        "vue": "^3.5.13",
+        "vue-flatpickr-component": "^11.0.5",
+        "vue-router": "^4.4.5",
+        "vue3-kakao-maps": "^2.3.10"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.14.0",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vue/eslint-config-prettier": "^10.1.0",
+        "eslint": "^9.14.0",
+        "eslint-plugin-vue": "^9.30.0",
+        "prettier": "^3.3.3",
+        "vite": "^5.4.10",
+        "vite-plugin-inspect": "^0.8.9",
+        "vite-plugin-vue-devtools": "^7.6.5"
+    }
 }
diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index 3dd170d..46902ec 100644
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useToastStore } from '@s/toastStore';
 
 const $api = axios.create({
-    baseURL: 'https://192.168.0.251:10325/api/',
+    baseURL: import.meta.env.VITE_API_URL,
     timeout: 300000,
     withCredentials: true,
 });
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 9d219e8..9bd7296 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -8,9 +8,8 @@
 
         <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
             <ul class="navbar-nav flex-row align-items-center ms-auto">
-
-                <button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
-                <button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
+                <button class="btn p-1" @click="switchToLightMode"><i class="bx bxs-sun link-warning"></i></button>
+                <button class="btn p-1" @click="switchToDarkMode"><i class="bx bxs-moon"></i></button>
 
                 <i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>
 
@@ -152,7 +151,13 @@
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
                     <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-px-40 rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
+                        <img
+                            v-if="user"
+                            :src="`${baseUrl}upload/img/profile/${user.profile}`"
+                            alt="Profile Image"
+                            class="w-px-40 h-px-40 rounded-circle"
+                            @error="$event.target.src = '/img/icons/icon.png'"
+                        />
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>
@@ -227,40 +232,37 @@
     </nav>
 </template>
 <script setup>
-import { useAuthStore } from '@s/useAuthStore';
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import { useRouter } from 'vue-router';
-import { useThemeStore } from '@s/darkmode';
-import { onMounted, ref } from 'vue';
-import $api from '@api';
+    import { useAuthStore } from '@s/useAuthStore';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { useRouter } from 'vue-router';
+    import { useThemeStore } from '@s/darkmode';
+    import { onMounted, ref } from 'vue';
+    import $api from '@api';
 
-const user = ref(null);
-const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+    const user = ref(null);
+    //const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+    const baseUrl = import.meta.env.BASE_URL;
 
-const authStore = useAuthStore();
-const userStore = useUserInfoStore();
-const router = useRouter();
+    const authStore = useAuthStore();
+    const userStore = useUserInfoStore();
+    const router = useRouter();
 
-const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
+    const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
 
-onMounted(async () => {
-    if (isDarkMode) {
-        switchToDarkMode();
-    } else {
-        switchToLightMode();
-    }
-
-    await userStore.userInfo();
-    user.value = userStore.user;
-});
-
-
-
-const handleLogout = async () => {
-    await authStore.logout();
-    router.push('/login');
-};
+    onMounted(async () => {
+        if (isDarkMode) {
+            switchToDarkMode();
+        } else {
+            switchToLightMode();
+        }
 
+        await userStore.userInfo();
+        user.value = userStore.user;
+    });
 
+    const handleLogout = async () => {
+        await authStore.logout();
+        router.push('/login');
+    };
 </script>
 <style></style>
diff --git a/vite.config.js b/vite.config.js
index 6d58ffd..9ff7390 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,27 +5,33 @@ import vueDevTools from 'vite-plugin-vue-devtools';
 import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        vueDevTools(),
-        // 자신의 로컬 서버에 연결하려면 이부분 주석처리
-        mkcert({
-            // SSL 키 등록
-            keyFile: '/localhost-key.pem',
-            certFile: '/localhost.pem',
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
-            '@a': fileURLToPath(new URL('./src/assets/', import.meta.url)),
-            '@c': fileURLToPath(new URL('./src/components/', import.meta.url)),
-            '@v': fileURLToPath(new URL('./src/views/', import.meta.url)),
-            '@l': fileURLToPath(new URL('./src/layout/', import.meta.url)),
-            '@s': fileURLToPath(new URL('./src/stores/', import.meta.url)),
-            '@p': fileURLToPath(new URL('./src/common/plugin/', import.meta.url)),
-            '@api': fileURLToPath(new URL('./src/common/axios-interceptor.js', import.meta.url)),
+export default defineConfig(({ mode }) => {
+    const plugins = [vue(), vueDevTools()];
+
+    // dev: https, mine: http
+    if (mode === 'dev') {
+        plugins.push(
+            mkcert({
+                // SSL 키 등록
+                keyFile: '/localhost-key.pem',
+                certFile: '/localhost.pem',
+            }),
+        );
+    }
+
+    return {
+        plugins,
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url)),
+                '@a': fileURLToPath(new URL('./src/assets/', import.meta.url)),
+                '@c': fileURLToPath(new URL('./src/components/', import.meta.url)),
+                '@v': fileURLToPath(new URL('./src/views/', import.meta.url)),
+                '@l': fileURLToPath(new URL('./src/layout/', import.meta.url)),
+                '@s': fileURLToPath(new URL('./src/stores/', import.meta.url)),
+                '@p': fileURLToPath(new URL('./src/common/plugin/', import.meta.url)),
+                '@api': fileURLToPath(new URL('./src/common/axios-interceptor.js', import.meta.url)),
+            },
         },
-    },
+    };
 });

From 80e59e43550a6a0ee8a33502a4bfab0bfdf81dd7 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 27 Feb 2025 13:05:10 +0900
Subject: [PATCH 7/8] =?UTF-8?q?vacation=20=EC=88=98=EC=A0=95,=20=EA=B2=8C?=
 =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EA=B8=80=EC=93=B0=EA=B8=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                       | 19 ++++++++++++
 src/components/button/HalfDayButtons.vue    | 32 ++++++++++++++++-----
 src/components/modal/VacationGrantModal.vue | 12 ++++----
 src/views/board/BoardWrite.vue              | 11 +++++--
 src/views/vacation/VacationManagement.vue   | 15 ++++++----
 5 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index af17624..94e4977 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -67,6 +67,25 @@ opacity: 0.6; /* 흐려 보이게 */
 cursor: not-allowed !important;
 opacity: 0.6; /* 흐려 보이게 */
 }
+/* 기본 이벤트 스타일 */
+.fc-daygrid-event {
+  border: none !important;
+  border-radius: 4px;
+}
+/* 오전 반차 (왼쪽 절반) */
+.selected-event.half-day-am {
+  width: 50% !important;
+  left: 0 !important;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+/* 오후 반차 (오른쪽 절반) */
+.selected-event.half-day-pm {
+  width: 50% !important;
+  margin-left: auto !important;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
 
 
 /* 본인 모달 */
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index f2c5856..9bb125f 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="menu gap-4 justify-content-center mt-5">
-
+      <!-- 오전 반차 버튼 -->
       <button
         class="btn btn-warning"
         :class="{ active: halfDayType === 'AM' }"
@@ -8,6 +8,8 @@
       >
         <i class="bi bi-sun"></i>
       </button>
+
+      <!-- 오후 반차 버튼 -->
       <button
         class="btn btn-info"
         :class="{ active: halfDayType === 'PM' }"
@@ -15,32 +17,48 @@
       >
         <i class="bi bi-moon"></i>
       </button>
+
+      <!-- 저장 버튼 -->
       <div class="save-button-container">
         <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
           ✔
         </button>
       </div>
     </div>
-  </template>
+</template>
 
 <script setup>
-import { defineEmits, ref } from "vue";
+import { defineEmits, ref, defineProps } from "vue";
 
-defineProps({
+const props = defineProps({
   isDisabled: Boolean
 });
 
-const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
+const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = halfDayType.value === type ? null : type;
+  halfDayType.value = type;
+
   emit("toggleHalfDay", halfDayType.value);
+
+  // ✅ 버튼 클릭 후 1초 후 자동 비활성화
+  setTimeout(() => {
+    halfDayType.value = null;
+  }, 1000);
+};
+
+// 날짜 선택 후 반차 버튼 상태 초기화
+const resetHalfDay = () => {
+  halfDayType.value = null;
+  emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
   emit("addVacationRequests");
 };
+
+defineExpose({ resetHalfDay });
 </script>
 
 <style scoped>
@@ -112,4 +130,4 @@ const addVacationRequests = () => {
   transform: scale(0.95);
   box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
 }
-  </style>
+</style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 0f724d6..d3baa12 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -25,7 +25,9 @@
   <script setup>
   import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
   import axios from "@api";
+  import { useToastStore } from '@s/toastStore';
 
+  const toastStore = useToastStore();
   const props = defineProps({
     isOpen: Boolean,
     targetUser: Object,
@@ -73,21 +75,18 @@
           count: grantCount.value,
         },
       ];
-      console.log(props.targetUser)
-      console.log(payload)
       const response = await axios.post("vacation", payload);
-        console.log(response)
       if (response.data && response.data.status === "OK") {
-        alert("✅ 연차가 부여되었습니다.");
+        toastStore.onToast('연차가 선물되었습니다.', 's');
         await fetchSentVacationCount();
         emit("updateVacation");
         closeModal();
       } else {
-        alert("🚨 연차 추가 중 오류가 발생했습니다.");
+       toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
       }
     } catch (error) {
       console.error("🚨 연차 추가 실패:", error);
-      alert("연차 추가에 실패했습니다.");
+      toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
   };
 
@@ -99,7 +98,6 @@
     () => props.isOpen,
     async (newVal) => {
       if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
-        console.log("🟢 모달이 열렸습니다. 데이터를 로드합니다.");
         await fetchSentVacationCount();
       }
     }
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index b5f0a45..b337d6c 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -91,7 +91,9 @@ import router from '@/router';
 import axios from '@api';
 import SaveButton from '@c/button/SaveBtn.vue';
 import BackButton from '@c/button/BackBtn.vue'
+import { useToastStore } from '@s/toastStore';
 
+const toastStore = useToastStore();
 const categoryList = ref([]);
 const title = ref('');
 const password = ref('');
@@ -113,6 +115,11 @@ const fetchCategories = async () => {
     try {
         const response = await axios.get('board/categories');
         categoryList.value = response.data.data;
+        // "자유" 카테고리 찾기 (CMNCODNAM이 '자유'인 것 선택)
+        const freeCategory = categoryList.value.find(category => category.CMNCODNAM === '자유');
+        if (freeCategory) {
+            categoryValue.value = freeCategory.CMNCODVAL; // 기본 선택값 설정
+        }
     } catch (error) {
         console.error('카테고리 불러오기 오류:', error);
     }
@@ -167,11 +174,11 @@ const write = async () => {
             }
         }
 
-        alert('게시물이 작성되었습니다.');
+        toastStore.onToast('게시물이 작성되었습니다.', 's');
         goList();
     } catch (error) {
         console.error(error);
-        alert('게시물 작성 중 오류가 발생했습니다.');
+        toastStore.onToast('게시물 작성 중 오류가 발생했습니다.', 'e');
     }
 };
 </script>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 08b511b..6c26514 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -79,7 +79,9 @@
   import { useUserStore } from "@s/userList";
   import { useUserInfoStore } from "@s/useUserInfoStore";
   import { fetchHolidays } from "@c/calendar/holiday.js";
+  import { useToastStore } from '@s/toastStore';
 
+  const toastStore = useToastStore();
   const userStore = useUserInfoStore();
   const userListStore = useUserStore();
   const userList = ref([]);
@@ -102,6 +104,7 @@
   const vacationCodeMap = ref({});
   const holidayDates = ref(new Set());
   const fetchedEvents = ref([]);
+  const halfDayButtonsRef = ref(null);
 
   // 데이트피커 인풋 ref
   const calendarDatepicker = ref(null);
@@ -163,6 +166,10 @@ function handleDateClick(info) {
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
+    // ✅ 날짜 선택 후 버튼 초기화
+    if (halfDayButtonsRef.value) {
+        halfDayButtonsRef.value.resetHalfDay();
+    }
   }
 
   const calendarOptions = reactive({
@@ -342,7 +349,6 @@ function handleDateClick(info) {
     const selectedEvents = Array.from(selectedDates.value)
       .filter(([date, type]) => type !== "delete")
       .map(([date, type]) => ({
-        title: getVacationType(type),
         start: date,
         backgroundColor: "rgb(113 212 243 / 76%)",
         textColor: "#fff",
@@ -435,7 +441,7 @@ function handleDateClick(info) {
         delete: vacationsToDelete
       });
       if (response.data && response.data.status === "OK") {
-        alert("✅ 휴가 변경 사항이 저장되었습니다.");
+        toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
         await fetchRemainingVacation();
         if (isModalOpen.value) {
           await fetchVacationHistory(lastRemainingYear.value);
@@ -445,11 +451,11 @@ function handleDateClick(info) {
         selectedDates.value.clear();
         updateCalendarEvents();
       } else {
-        alert("❌ 휴가 저장 중 오류가 발생했습니다.");
+        toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
       }
     } catch (error) {
       console.error("🚨 휴가 변경 저장 실패:", error);
-      alert("❌ 휴가 저장 요청에 실패했습니다.");
+      toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
     }
   }
 
@@ -531,5 +537,4 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
 
   <style>
 
-
   </style>

From 7f71d5b58952f803300455413d2e1d0128464aa2 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Thu, 27 Feb 2025 13:06:35 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=ED=88=AC=ED=91=9C=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/voteboard/voteCard.vue         | 18 ++---
 src/components/voteboard/voteCardCheck.vue    |  8 ++-
 .../voteboard/voteCompleteUserListCard.vue    |  1 +
 .../voteboard/voteInCompleteUserListCard.vue  |  1 +
 src/components/voteboard/voteLinkInput.vue    | 69 +++++++------------
 src/components/voteboard/voteResultRandom.vue |  4 +-
 src/stores/voteDetail.js                      | 15 ----
 src/views/voteboard/voteBoardList.vue         |  4 --
 src/views/voteboard/voteboardWrite.vue        | 52 +++++++++-----
 9 files changed, 77 insertions(+), 95 deletions(-)
 delete mode 100644 src/stores/voteDetail.js

diff --git a/src/components/voteboard/voteCard.vue b/src/components/voteboard/voteCard.vue
index f7b91ca..aa984a1 100644
--- a/src/components/voteboard/voteCard.vue
+++ b/src/components/voteboard/voteCard.vue
@@ -1,13 +1,15 @@
 <template>
     <div class="card mb-6">
         <div  class="card-body" v-if="!data.localVote.LOCVOTDEL" >
-            <h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
+            <h5 class="card-title mb-1">
+                <div class="list-unstyled users-list d-flex align-items-center gap-1">
                 <img
                 class="rounded-circle user-avatar border border-3 w-px-40"
                 :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
                 :style="`border-color: ${data.localVote.usercolor} !important;`"
                 alt="user"
                 />
+
                 <div class="w-100">
                 <div class="d-flex justify-content-between">
                     <div class="user-info">
@@ -24,7 +26,6 @@
                             class="bx btn btn-danger"
                             @click="endBtn(data.localVote.LOCVOTSEQ)"
                             >종료</button>
-                            <EditBtn  v-if="!data.localVote.LOCVOTDDT" @click="updateVote(data.localVote.LOCVOTSEQ)"/>
                             <DeleteBtn @click="voteDelete(data.localVote.LOCVOTSEQ)" />
                         </div>
                     </div>
@@ -32,10 +33,8 @@
                 </div>
                 </div>
             </h5>
-            <h5>{{ data.localVote.LOCVOTTTL }}</h5>
-            <div class="mb-1">{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</div>
-            <!-- 투표완료시-->
-            <button v-if="data.yesVotetotal > 0 && !data.localVote.LOCVOTDDT" class="btn btn-primary btn-sm" >재투표</button>
+            <h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}</h5>
+            <small >{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</small>
             <!-- 투표안했을시-->
             <div v-if="data.localVote.LOCVOTDDT && data.voteResult.length == 0">
                 <small class="text-primary text-uppercase">투표 결과없음 (😂아무도 투표하지 않았습니다)</small>
@@ -48,13 +47,14 @@
             :data="data.voteDetails"
             :voteInfo="data.localVote"
             :total="data.voteDetails.length "/>
-            <!-- 투표완/미완 인원 -->
-            <vote-user-list v-if="!data.localVote.LOCVOTDDT"
-            :data="data.voteMembers"/>
+
             <!-- 투표 결과 -->
             <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
             <vote-result-list  :data="data.voteResult"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES"/>
             </div>
+            <!-- 투표완/미완 인원 -->
+            <vote-user-list
+            :data="data.voteMembers"/>
             </div>
         </div>
         <div v-else  class="card-body">
diff --git a/src/components/voteboard/voteCardCheck.vue b/src/components/voteboard/voteCardCheck.vue
index a8c8472..c4498ed 100644
--- a/src/components/voteboard/voteCardCheck.vue
+++ b/src/components/voteboard/voteCardCheck.vue
@@ -12,7 +12,7 @@
             />
             <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1" class="d-flex align-items-center">
             <div class="d-flex flex-column gap-2">
-            <div v-for="(item, index) in itemList" :key="index"  class="d-flex align-items-center">
+            <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start">
             <form-input
                 class="flex-grow-1 me-2"
                 :title="'항목 ' + (index + data.length + 1)"
@@ -37,12 +37,13 @@
         </div>
 
     </div>
-    <button class="btn btn-primary btn-sm" @click="selectVote">투표하기</button>
+    <save-btn class="btn-sm mt-2" @click="selectVote"/>
 </template>
 
 <script setup>
 import $api from '@api';
 import PlusBtn from '@c/button/PlusBtn.vue';
+import SaveBtn from '@c/button/SaveBtn.vue'
 import FormInput from '@c/input/FormInput.vue';
 import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
 import { computed, ref } from 'vue';
@@ -78,7 +79,8 @@ const props = defineProps({
 const emit = defineEmits(['addContents','checkedNames']);
 //항목추가
 const addContentSave = (voteId) =>{
-    emit('addContents',itemList.value,voteId);
+    const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
+    emit('addContents',filteredItemList,voteId);
     itemList.value = [{ content: "", url: "" }];
 }
 
diff --git a/src/components/voteboard/voteCompleteUserListCard.vue b/src/components/voteboard/voteCompleteUserListCard.vue
index 08bcb51..465e416 100644
--- a/src/components/voteboard/voteCompleteUserListCard.vue
+++ b/src/components/voteboard/voteCompleteUserListCard.vue
@@ -10,6 +10,7 @@
             class="rounded-circle user-avatar border border-3"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
             :style="`border-color: ${data.usercolor} !important;`"
+            @error="$event.target.src = '/img/icons/icon.png'"
             alt="user"
         />
     </li>
diff --git a/src/components/voteboard/voteInCompleteUserListCard.vue b/src/components/voteboard/voteInCompleteUserListCard.vue
index 8f9bf27..cd4fad1 100644
--- a/src/components/voteboard/voteInCompleteUserListCard.vue
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@@ -10,6 +10,7 @@
         class="rounded-circle user-avatar border border-3"
         :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
         :style="`border-color: ${data.usercolor} !important;`"
+        @error="$event.target.src = '/img/icons/icon.png'"
         alt="user"
     />
     </li>
diff --git a/src/components/voteboard/voteLinkInput.vue b/src/components/voteboard/voteLinkInput.vue
index ebe7332..fb9cd0c 100644
--- a/src/components/voteboard/voteLinkInput.vue
+++ b/src/components/voteboard/voteLinkInput.vue
@@ -1,32 +1,33 @@
 <template>
-<div class="position-relative me-2">
-    <i class="bx bx-link-alt" @click="togglePopover"></i>
-    <!-- 링크 팝업 -->
+<div class="d-flex align-items-center">
+    <!-- 링크 아이콘 -->
+    <i class="bx bx-link-alt me-2" @click="togglePopover"></i>
+
+    <!-- 링크 입력창 (옆으로 나오게) -->
     <div
     v-if="isPopoverVisible"
-    class="popover bs-popover-auto fade show d-flex align-items-center"
-    role="tooltip"
-    :style="popoverStyle"
+    class="popover-container d-flex align-items-center"
     >
-    <div class="popover-arrow"></div>
     <input
         v-model="link"
         placeholder="URL을 입력해주세요"
-        class="form-control me-2 flex-grow-1"
+        class="form-control me-2"
         style="min-width: 200px;"
     />
-    <button type="button" class="btn btn-sm btn-primary ms-2" @click="saveLink">
-        등록
-    </button>
+    <save-btn class="btn-sm" @click="saveLink"/>
+
     </div>
-    <!-- 등록된 링크 표시 -->
-    <div v-if="link" class="mt-1">
+
+    <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
+    <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
     <a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
-    </div>
+    </span>
 </div>
 </template>
 
 <script setup>
+import SaveBtn from '@c/button/SaveBtn.vue'
+
 import { ref, computed } from "vue";
 
 const props = defineProps({
@@ -36,45 +37,27 @@ const emit = defineEmits(["update:modelValue"]);
 
 const isPopoverVisible = ref(false);
 const link = ref(props.modelValue || "");
-const popoverStyle = ref({});
+const isLinkSaved = ref(false);  // Track if the link has been saved
 
 const formattedLink = computed(() => {
-    return link.value.startsWith("http") ? link.value : "http://" + link.value;
+return link.value.startsWith("http") ? link.value : "http://" + link.value;
 });
 
-const togglePopover = (event) => {
-    const buttonRect = event.target.getBoundingClientRect();
-    const parentRect = event.target.parentElement.getBoundingClientRect();
-
-    popoverStyle.value = {
-        position: "absolute",
-        top: `${buttonRect.bottom - parentRect.top + 5}px`,
-        left: `${buttonRect.left - parentRect.left}px`,
-        zIndex: "1050",
-        display: "flex",
-        alignItems: "center",
-    };
-
-    isPopoverVisible.value = !isPopoverVisible.value;
+const togglePopover = () => {
+isPopoverVisible.value = !isPopoverVisible.value;
 };
 
 const saveLink = () => {
-    emit("update:modelValue", link.value);
-    isPopoverVisible.value = false;
+emit("update:modelValue", link.value);
+isLinkSaved.value = true;  // Set the link as saved
+isPopoverVisible.value = false;
 };
 </script>
 
 <style scoped>
-.popover {
-    max-width: 300px;
-    border-radius: 6px;
-    padding: 5px;
-    }
-
-.popover-arrow {
-    position: absolute;
-    top: -5px;
-    left: 50%;
-    transform: translateX(-50%);
+.popover-container {
+display: flex;
+align-items: center;
+gap: 8px; /* 아이콘과 입력창 간격 조정 */
 }
 </style>
diff --git a/src/components/voteboard/voteResultRandom.vue b/src/components/voteboard/voteResultRandom.vue
index 3e63cc6..a1bf519 100644
--- a/src/components/voteboard/voteResultRandom.vue
+++ b/src/components/voteboard/voteResultRandom.vue
@@ -14,10 +14,10 @@
 
     <button v-if="isRandom" class="btn btn-primary" type="button" disabled="">
         <span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
-        랜덤뽑기중..
+        random..
     </button>
     <div class="d-grid w-100 mt-6">
-    <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary">랜덤 1위 뽑기</button>
+    <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
 
     </div>
 </template>
diff --git a/src/stores/voteDetail.js b/src/stores/voteDetail.js
deleted file mode 100644
index 20696d4..0000000
--- a/src/stores/voteDetail.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useVoteStore = defineStore("vote", {
-    state: () => ({
-        selectedVote: {}
-    }),
-    actions: {
-        setVoteData(data) {
-            this.selectedVote = data;
-        },
-        clearVoteData() {
-            this.selectedVote = {};
-        }
-    }
-});
diff --git a/src/views/voteboard/voteBoardList.vue b/src/views/voteboard/voteBoardList.vue
index 8334dd4..ffca12a 100644
--- a/src/views/voteboard/voteBoardList.vue
+++ b/src/views/voteboard/voteBoardList.vue
@@ -50,7 +50,6 @@ import $api from '@api';
 import Quill from 'quill';
 import WriteBtn from '@c/button/WriteBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
-import { useVoteStore } from '@s/voteDetail';
 import { useRouter } from 'vue-router';
 
 const toastStore = useToastStore();
@@ -69,11 +68,8 @@ const router = useRouter();
 onMounted(async () => {
     getvoteList();
 });
-const voteStore = useVoteStore();
 //글작성
 const voteWrite = () => {
-    voteStore.setVoteData(selectedVote.value);
-    console.log("Pinia 상태 업데이트됨:", voteStore.selectedVote);
     router.push('/voteboard/write');
 };
 
diff --git a/src/views/voteboard/voteboardWrite.vue b/src/views/voteboard/voteboardWrite.vue
index 62584b2..efd4f32 100644
--- a/src/views/voteboard/voteboardWrite.vue
+++ b/src/views/voteboard/voteboardWrite.vue
@@ -17,7 +17,8 @@
                     name="title"
                     :is-essential="true"
                     :is-alert="titleAlert"
-                    :v-model="title"
+                    v-model="title"
+                    @keyup="ValidHandler('title')"
                     />
                     <form-input
                     title="종료날짜"
@@ -27,20 +28,25 @@
                     :is-alert="endDateAlert"
                     v-model="endDate"
                     :min="today"
+                    @change="ValidHandlerendDate"
                     />
                     <!-- 항목 입력 반복 -->
-                    <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center mb-2 position-relative">
-                    <form-input
-                        class="flex-grow-1 me-2"
+                    <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start">
+                    <div class="flex-grow-1 me-2 ">
+                        <form-input
                         :title="'항목 ' + (index + 1)"
                         :name="'content' + index"
                         :is-essential="index < 2"
                         :is-alert="contentAlerts[index]"
                         v-model="item.content"
-                    />
-                    <link-input v-model="item.url" />
-                    <delete-btn @click="removeItem(index)" :disabled="index < 2" class="ms-2" />
+                        @keyup="ValidHandler('content' + (index + 1))"
+                        />
+                        <link-input v-model="item.url"  class="mb-1"/>
                     </div>
+                    <!-- delete-btn을 오른쪽으로 정렬 -->
+                    <delete-btn @click="removeItem(index)" :disabled="index < 2" />
+                    </div>
+
                     <plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
                     <div>
                     <label class="list-group-item">
@@ -92,7 +98,6 @@ import LinkInput from "@/components/voteboard/voteLinkInput.vue";
 import { voteCommon } from '@s/voteCommon';
 import { useUserStore } from '@s/userList';
 import { useRoute } from "vue-router";
-import { useVoteStore } from "@s/voteDetail";
 
 const userStore = useUserStore();
 const today = new Date().toISOString().substring(0, 10);
@@ -115,12 +120,6 @@ const userSet = ({ userList, userTotal }) => {
     userListTotal.value = userTotal;
 };
 
-const voteStore = useVoteStore();
-
-onMounted(()=>{
-    console.log('상세데이터',voteStore.selectedVote);
-})
-
 
 const handleUserListUpdate = ({ activeUsers, disabledUsers: updatedDisabledUsers }) => {
     activeUserList.value = activeUsers;
@@ -133,7 +132,7 @@ const saveValid = () => {
     if (disabledUsers.value.length === 0) {
         activeUserList.value = [...userStore.userList];
     }
-    if (title.value === '') {
+    if (title.value.trim() === '') {
         titleAlert.value = true;
         valid = false;
     } else {
@@ -145,13 +144,13 @@ const saveValid = () => {
     } else {
         endDateAlert.value = false;
     }
-    if (itemList.value[0].content === '') {
+    if (itemList.value[0].content.trim() === '') {
         contentAlerts.value[0] = true;
         valid = false;
     } else {
         contentAlerts.value[0] = false;
     }
-    if (itemList.value[1].content === '') {
+    if (itemList.value[1].content.trim() === '') {
         contentAlerts.value[1] = true;
         valid = false;
     } else {
@@ -168,6 +167,7 @@ const saveValid = () => {
     }
 };
 const saveVote = () => {
+    const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
     const unwrappedUserList = toRaw(activeUserList.value);
     const listId = unwrappedUserList.map(item => ({
         id: item.MEMBERSEQ,
@@ -175,9 +175,9 @@ const saveVote = () => {
     $api.post('vote/insertWord',{
         addvoteIs       :addvoteitem.value === false ? '0' :'1'
         ,votemMltiIs: addvotemulti.value === false ? '0' : '1'
-        ,title          :title.value
+        ,title          :title.value.trim()
         ,endDate        :endDate.value
-        ,itemList       :itemList.value
+        ,itemList       :filteredItemList
         ,activeUserList :listId
     }).then((res)=>{
         if(res.data.status == 'OK'){
@@ -186,6 +186,20 @@ const saveVote = () => {
         }
     })
 };
+const ValidHandler = (field) => {
+    if(field == 'title'){
+        titleAlert.value = false;
+    }
+    if(field == 'content1'){
+        contentAlerts.value[0] = false;
+    }
+    if(field == 'content2'){
+        contentAlerts.value[1] = false;
+    }
+}
+const ValidHandlerendDate = () =>{
+    endDateAlert.value = false;
+}
 const goList = () => {
     router.push('/voteboard');
 };