sapp-common-package-test-final 1.0.12 → 1.5.0

package/dist/index.css

@@ -1,7 +1,3 @@
-._2hGgU {
-  display: flex
-}
-
 ._3-Pu9 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
@@ -10,10 +6,18 @@
   cursor: pointer
 }
 
+._uCXxT {
+  resize: both
+}
+
 ._3EfQZ {
   border-radius: 0px
 }
 
+._3-abu {
+  border-width: 1px
+}
+
 ._3-NVJ {
   --tw-border-opacity: 1;
   border-color: rgb(245 245 245 / var(--tw-border-opacity, 1))
@@ -58,17 +62,19 @@
   color: rgb(152 161 183 / var(--tw-text-opacity, 1))
 }
 
+._3vIFr {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
+}
+
 ._p0OEu {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
 
 ._18t93 {
-  position: relative;
   display: flex;
   width: 100%;
-  align-items: stretch;
-  -moz-column-gap: 12px;
-       column-gap: 12px
+  -moz-column-gap: 24px;
+       column-gap: 24px
 }
 
 ._18t93 * {
@@ -82,6 +88,10 @@
   border-style: none !important
 }
 
+._18t93 table {
+  border-collapse: collapse !important
+}
+
 ._18t93 ul {
   margin: 0px !important;
   list-style-type: none !important;
@@ -121,14 +131,16 @@
 
 ._3WrnL {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
   color: rgb(120 130 157 / var(--tw-text-opacity, 1))
 }
 
 ._2-qBL {
-  border-color: '#FFB800';
-  background-color: '#FFB800';
+  --tw-border-opacity: 1;
+  border-color: rgb(255 184 0 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
@@ -144,7 +156,7 @@
 ._1oq3N {
   --tw-border-opacity: 1;
   border-color: rgb(236 148 14 / var(--tw-border-opacity, 1));
-  background-color: rgba(236,148,14,0.05);
+  background-color: rgb(236 148 14 / 0.05);
   --tw-text-opacity: 1;
   color: rgb(236 148 14 / var(--tw-text-opacity, 1))
 }
@@ -157,6 +169,14 @@
   color: rgb(7 175 23 / var(--tw-text-opacity, 1))
 }
 
+._30cym {
+  --tw-border-opacity: 1;
+  border-color: rgb(143 111 234 / var(--tw-border-opacity, 1));
+  background-color: rgb(143 111 234 / 0.05);
+  --tw-text-opacity: 1;
+  color: rgb(143 111 234 / var(--tw-text-opacity, 1))
+}
+
 ._1hEJk {
   --tw-border-opacity: 1;
   border-color: rgb(240 25 25 / var(--tw-border-opacity, 1));
@@ -169,7 +189,7 @@
   --tw-bg-opacity: 1;
   background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(120 130 157 / var(--tw-text-opacity, 1))
+  color: rgb(152 161 183 / var(--tw-text-opacity, 1))
 }
 
 ._102cL {
@@ -207,7 +227,8 @@ div._3Yvs5 {
   display: flex;
   align-items: center;
   -moz-column-gap: 16px;
-       column-gap: 16px
+       column-gap: 16px;
+  text-align: center
 }
 
 ._2GTYD:focus-within {
@@ -219,6 +240,7 @@ div._3Yvs5 {
 ._18t93 div._2GTYD input {
   width: 150px !important;
   cursor: pointer !important;
+  text-align: center;
   font-size: 18px !important;
   font-weight: 600 !important;
   --tw-text-opacity: 1 !important;
@@ -248,7 +270,7 @@ div._3kHog {
   border-right-width: 1px !important;
   border-style: solid !important;
   --tw-border-opacity: 1;
-  border-color: rgb(219 223 233 / var(--tw-border-opacity, 1))
+  border-color: rgb(23 108 221 / var(--tw-border-opacity, 1))
 }
 
 ._18t93 thead th,
@@ -332,18 +354,7 @@ div._2hVZ4 {
 div._1uenJ {
   border-top-width: 4px !important;
   --tw-border-opacity: 1;
-  border-color: rgb(31 127 181 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 250 255 / var(--tw-bg-opacity, 1))
-}
-
-div._1uenJ > div {
-  border-top-width: 4px !important;
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 127 181 / var(--tw-bg-opacity, 1));
-  padding: 8px;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+  border-color: rgb(23 108 221 / var(--tw-border-opacity, 1))
 }
 
 ._2hVZ4 > div {
@@ -382,19 +393,37 @@ div._1uenJ > div {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
+  display: none;
+  -moz-column-gap: 4px;
+       column-gap: 4px;
   font-size: 13px;
   font-weight: 500
 }
 
+@media (min-width: 1280px) {
+  ._2gsg7 {
+    display: flex !important
+  }
+}
+
 ._2GtPn {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
+  display: none;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   font-size: 13px;
   font-weight: 400
 }
 
+@media (min-width: 1280px) {
+  ._2GtPn {
+    display: flex
+  }
+}
+
 ._2hVZ4 > ul > div:last-child {
   cursor: pointer;
   font-size: 13px;
@@ -440,14 +469,21 @@ div._1uenJ > div {
 
 ._3lPkV > div {
   position: absolute;
+  left: 5%;
   z-index: 10;
   width: 90%;
   cursor: pointer;
+  border-radius: 0.125rem;
   border-left-width: 2px !important;
   border-style: solid !important;
   padding: 12px
 }
 
+._3lPkV > div._ZZSJH {
+  padding-top: 4px;
+  padding-bottom: 4px
+}
+
 ._hnHem {
   display: flex;
   flex-direction: column;
@@ -455,6 +491,10 @@ div._1uenJ > div {
 }
 
 ._21a0T {
+  display: flex !important;
+  width: 100%;
+  -moz-column-gap: 4px;
+       column-gap: 4px;
   font-size: 14px;
   font-weight: 600
 }
@@ -490,16 +530,21 @@ button._1GA3p {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(161 161 161 / var(--tw-text-opacity, 1))
+  color: rgb(161 161 161 / var(--tw-text-opacity, 1));
+  border-style: none
 }
 
 button._1GA3p:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 184 0 / var(--tw-border-opacity, 1))
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(255 184 0 / var(--tw-border-opacity, 1)) !important
 }
 
-.ant-picker-input > input {
-  text-align: center
+.select-mode {
+  height: 40px !important
+}
+
+.__OFBr {
+  width: 100%
 }
 
 ._1gLzS {
@@ -507,37 +552,44 @@ button._1GA3p:hover {
   color: rgb(255 184 0 / var(--tw-text-opacity, 1))
 }
 
-/* value */
+._1fd_Y {
+  display: flex !important;
+  align-items: center;
+  -moz-column-gap: 12px;
+       column-gap: 12px
+}
 
-.ant-select {
-  border-radius: 0px;
-  font-weight: 400;
-  --tw-text-opacity: 1 !important;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
+.ant-picker-calendar-header .ant-picker-calendar-year-select {
+  border-width: 1px !important;
+  border-style: solid !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
 }
 
-.select-mode {
-  height: 100% !important
+.ant-picker-calendar-header .ant-picker-calendar-month-select {
+  border-width: 1px !important;
+  border-style: solid !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
 }
 
-.select-mode .ant-select-selector {
-  height: 100%;
-  padding-top: 6px !important;
-  padding-bottom: 6px !important;
-  padding-left: 20px !important;
-  padding-right: 20px !important;
-  border-radius: 0px !important;
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)) !important;
-  font-weight: 400;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+._2IWLV ._2jvy8 {
+  display: none
 }
 
-div._12I9I {
-  border-radius: 0px;
+._2IWLV {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start !important;
+  gap: 8px
+}
+
+.select-mode .ant-select-selector {
+  border-radius: 0px !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)) !important;
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
   --tw-text-opacity: 1 !important;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
 }
@@ -547,63 +599,100 @@ div._12I9I {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
 }
 
+/* Hover màu khác */
+
 .ant-select-item-option:hover {
-  background-color: #ec940e0d !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 250 240 / var(--tw-bg-opacity, 1)) !important;
   --tw-text-opacity: 1 !important;
   color: rgb(255 184 0 / var(--tw-text-opacity, 1)) !important
 }
 
-.ant-select-dropdown {
-  width: 100%
+.ant-picker-calendar-date .ant-picker-calendar-date-today {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)) !important
 }
 
-._1ZvuX {
-  width: 100% !important
+.ant-picker-cell-selected .ant-picker-cell-inner {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)) !important;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
+/* Khi được chọn */
+
 .ant-select-item-option-selected {
-  background-color: #ec940e0d !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 250 240 / var(--tw-bg-opacity, 1)) !important;
   --tw-text-opacity: 1 !important;
   color: rgb(255 184 0 / var(--tw-text-opacity, 1)) !important
 }
 
-.ant-select-selector:focus {
-  /* Màu viền vàng, không có shadow */
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(255 184 0 / var(--tw-border-opacity, 1)) !important;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-  /* Màu viền vàng, không có shadow */
-}
-
-.ant-picker-cell-selected > div {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)) !important
+._3im6B:hover {
+  cursor: pointer;
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 184 0 / var(--tw-text-opacity, 1)) !important
 }
 
-.ant-picker-cell-selected > div::before {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(255 184 0 / var(--tw-border-opacity, 1)) !important
+._3OUWM {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px
 }
 
-._1fd_Y {
+._2HhKK {
   display: flex;
   align-items: center;
-  -moz-column-gap: 16px;
-       column-gap: 16px
+  -moz-column-gap: 8px;
+       column-gap: 8px
 }
 
-._1sVO3 {
-  font-weight: 600;
+@media (min-width: 1280px) {
+  ._2HhKK {
+    display: none
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  ._2n63y {
+    position: absolute;
+    top: 10%;
+    z-index: 50;
+    height: 100%;
+    overflow: auto
+  }
+}
+
+._3EfQZ {
+  border-style: none
+}
+
+._3lPkV > div._1uakm {
+  position: absolute;
+  top: 65%;
+  border-width: 0px !important;
+  padding-left: 0px;
+  font-weight: 500;
   --tw-text-opacity: 1;
-  color: rgb(37 47 74 / var(--tw-text-opacity, 1))
+  color: rgb(23 108 221 / var(--tw-text-opacity, 1))
+}
+
+._1QrJs tbody tr:first-child,
+._1QrJs tbody tr:first-child ._3lPkV {
+  height: 150px !important
+}
+
+._1QrJs tbody tr:first-child,
+._1QrJs tbody tr:first-child .__PqI3 {
+  height: 61px !important
 }
 
 @tailwind utilities;
 
 ._2OOkM {
-  @apply w-full relative flex gap-x-3 items-stretch;
+  @apply w-full flex gap-x-6;
 }
 
 ._2OOkM * {
@@ -616,12 +705,16 @@ div._12I9I {
   @apply !border-0 !border-none;
 }
 
+._2OOkM table {
+  @apply !border-collapse;
+}
+
 ._2OOkM ul {
   @apply !m-0 !p-0 !list-none;
 }
 
 ._3EiSs {
-  @apply py-3 px-5 rounded-[6px] text-[14px] hover:bg-primary hover:text-white cursor-pointer;
+  @apply py-3 px-5 rounded-md text-sm hover:bg-[#FFB800] hover:text-white cursor-pointer;
 }
 
 ._3fS4I {
@@ -629,11 +722,11 @@ div._12I9I {
 }
 
 ._3LEeo {
-  @apply bg-white text-gray-2;
+  @apply bg-[#F9F9F9] text-gray-2;
 }
 
 ._1N2aY {
-  @apply border-['#FFB800'] bg-['#FFB800'] text-white;
+  @apply border-[#FFB800] bg-[#FFB800] text-white;
 }
 
 ._2tFGa {
@@ -641,19 +734,22 @@ div._12I9I {
 }
 
 ._3cS4h {
-  @apply border-[#EC940E] bg-[rgba(236,148,14,0.05)] text-[#EC940E];
+  @apply border-[#EC940E] bg-[#EC940E]/5 text-[#EC940E];
 }
 
 ._ubFeJ {
   @apply border-[#07AF17] bg-[#07AF17]/5 text-[#07AF17];
 }
 
+._nqVhB {
+  @apply border-[#8F6FEA] bg-[#8F6FEA]/5 text-[#8F6FEA];
+}
 ._1s2ED {
   @apply border-[#F01919] bg-[#F01919]/5 text-[#F01919];
 }
 
 ._3rwzE {
-  @apply bg-[#F2F4F7] text-[#78829D];
+  @apply bg-[#F2F4F7] text-[#98a1b7];
 }
 
 ._9uloX {
@@ -661,7 +757,7 @@ div._12I9I {
 }
 
 div._2Uj7C {
-  @apply flex justify-between items-center py-4 !border-b-[1px] !border-solid border-[#F1F1F4];
+  @apply flex justify-between items-center py-4 !border-b-0.25 !border-solid border-[#F1F1F4];
 }
 
 ._1NX4k {
@@ -669,11 +765,11 @@ div._2Uj7C {
 }
 
 ._pki6z {
-  @apply flex items-center gap-x-4 focus-within:!shadow-none;
+  @apply flex items-center gap-x-4 focus-within:!shadow-none text-center;
 }
 
 ._2OOkM div._pki6z input {
-  @apply !w-[150px] !text-[18px] !font-semibold !text-black !cursor-pointer focus-within:border-none;
+  @apply !w-[150px] !text-lg !font-semibold !text-black !cursor-pointer focus-within:border-none text-center;
 }
 
 ._3HZUA {
@@ -685,7 +781,7 @@ div._2Uj7C {
 }
 
 div._US4AW {
-  @apply h-8 !border-r-[1px] !border-solid border-[#DBDFE9];
+  @apply h-8 !border-r-0.25 !border-solid border-[#176CDD];
 }
 
 ._2OOkM thead th,
@@ -699,7 +795,7 @@ div._US4AW {
 }
 
 ._2244F {
-  @apply text-center font-semibold text-[12px];
+  @apply text-center font-semibold text-xs;
 }
 
 ._3gTTi
@@ -710,7 +806,7 @@ div._US4AW {
 }
 
 div._1N_J1 {
-  @apply flex flex-col !border-t-[1px] !border-solid border-gray-4;
+  @apply flex flex-col !border-t-0.25 !border-solid border-[#F5F5F5];
 }
 
 ._3bFF2 {
@@ -731,19 +827,15 @@ div._1N_J1 {
 }
 
 div._33-xY {
-  @apply flex flex-col justify-between !border-t-[1px] !border-solid;
+  @apply flex flex-col justify-between !border-t-0.25 !border-solid;
 }
 
-div._30qaU  {
-  @apply border-[#1F7FB5] !border-t-4 bg-[#F5FAFF];
-}
-
-div._30qaU > div  {
-  @apply bg-[#1F7FB5] !border-t-4 text-white p-2;
+div._30qaU {
+  @apply border-[#176CDD] !border-t-4;
 }
 
 ._33-xY > div {
-  @apply w-fit pt-2 px-2 text-[14px] font-normal line-clamp-1;
+  @apply w-fit pt-2 px-2 text-sm font-normal line-clamp-1;
 }
 
 ._33-xY > ul,
@@ -757,11 +849,11 @@ div._30qaU > div  {
 }
 
 ._S-x_L {
-  @apply text-[13px] font-medium line-clamp-1;
+  @apply text-[13px] font-medium line-clamp-1 gap-x-1 xl:!flex hidden;
 }
 
 ._1nF27 {
-  @apply text-[13px] font-normal line-clamp-1;
+  @apply text-[13px] font-normal line-clamp-1 xl:flex hidden gap-x-2;
 }
 
 ._33-xY > ul > div:last-child {
@@ -773,11 +865,11 @@ div._30qaU > div  {
 }
 
 ._3HaWW {
-  @apply flex flex-col gap-y-0.5 text-center font-semibold text-[12px];
+  @apply flex flex-col gap-y-0.5 text-center font-semibold text-xs;
 }
 
 ._1JsGC thead th:first-child > ._3HaWW {
-  @apply w-[100px] text-primary;
+  @apply w-[100px] text-[#FFB800];
 }
 
 ._1JsGC tbody td {
@@ -785,7 +877,7 @@ div._30qaU > div  {
 }
 
 ._1JsGC tbody td:first-child > div {
-  @apply text-center text-[12px];
+  @apply text-center text-xs;
 }
 
 ._1tvYg {
@@ -793,7 +885,11 @@ div._30qaU > div  {
 }
 
 ._1tvYg > div {
-  @apply absolute z-10 w-[90%] !border-l-2 !border-solid p-3 cursor-pointer;
+  @apply absolute z-10 left-[5%] w-[90%] !border-l-2 !border-solid rounded-sm p-3 cursor-pointer;
+}
+
+._1tvYg > div._7Rb_o {
+  @apply py-1;
 }
 
 ._35RRs {
@@ -801,11 +897,11 @@ div._30qaU > div  {
 }
 
 ._1VuQw {
-  @apply text-[14px] font-semibold;
+  @apply text-sm font-semibold !flex gap-x-1 w-full;
 }
 
 ._1D_PH {
-  @apply text-[14px] font-normal;
+  @apply text-sm font-normal;
 }
 
 ._16clH,
@@ -819,129 +915,158 @@ div._30qaU > div  {
 }
 
 button._3-kZ6 {
- @apply bg-white !border text-[#A1A1A1] !border-[#DCDDDD] !border-solid rounded-none hover:border-[#FFB800]
+    @apply bg-white !border text-[#A1A1A1] !border-[#DCDDDD] !border-solid rounded-none hover:!border-[#FFB800];
 }
 
-.ant-picker-input > input {
-  @apply text-center
+.select-mode {
+  @apply !h-[40px]
+}
+
+._23Eoo {
+  @apply w-full;
 }
 
 ._1nh0f {
-  @apply text-[#FFB800];
+  @apply text-[#FFB800]
 }
 
+._1_tsV {
+  @apply !flex items-center gap-x-3;
+}
 
-/* value */
-.ant-select {
-  @apply !text-white  font-normal rounded-none;
+.ant-picker-calendar-header .ant-picker-calendar-year-select {
+  @apply !border !border-solid !border-[#DCDDDD]
 }
 
-.select-mode {
-  @apply !h-full;
- }
+.ant-picker-calendar-header .ant-picker-calendar-month-select {
+  @apply !border !border-solid !border-[#DCDDDD]
+}
 
-.select-mode .ant-select-selector {
- @apply !py-[6px] !px-[20px] h-full;
+._zKw79 ._1pndZ {
+  display: none
+}
+
+._zKw79 {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start !important;
+  gap: 8px
 }
 
 .select-mode .ant-select-selector {
-  @apply !bg-[#FFB800] text-white font-normal !rounded-none;
+  @apply !bg-[#FFB800] !text-white !pt-[10px] !pb-[10px] !rounded-none
  }
 
-div._1dZBN {
-  @apply !bg-[#FFB800] !text-white rounded-none;
-}
-
 .select-mode .ant-select-arrow {
-  @apply !text-white;
+   @apply !text-white
 }
 
+ /* Hover màu khác */
 .ant-select-item-option:hover {
-  @apply !bg-[#ec940e0d] !text-[#ffb800];
+  @apply !bg-[#FFFAF0] !text-[#FFB800]
 }
 
-.ant-select-dropdown {
-  @apply w-full;
+.ant-picker-calendar-date .ant-picker-calendar-date-today {
+  @apply !bg-[#FFB800]
 }
 
-._1n_Gs {
-  @apply !w-full;
+.ant-picker-cell-selected .ant-picker-cell-inner {
+  @apply  !bg-[#FFB800] text-white;
 }
 
+/* Khi được chọn */
 .ant-select-item-option-selected {
-  @apply !bg-[#ec940e0d] !text-[#ffb800];
+  @apply !bg-[#FFFAF0] !text-[#FFB800]
 }
 
-.ant-select-selector:focus {
-  @apply !border-[#FFB800] shadow-none; /* Màu viền vàng, không có shadow */
+._E-LwN {
+  @apply hover:!text-[#FFB800] hover:cursor-pointer;
 }
 
-.ant-select-selector:focus {
-  @apply !border-[#FFB800] shadow-none; /* Màu viền vàng, không có shadow */
+._2QRjm {
+  @apply flex gap-x-2 items-center;
 }
 
-.ant-picker-cell-selected > div {
-  @apply !bg-[#FFB800]
+._17gSw {
+  @apply xl:hidden flex items-center gap-x-2
 }
-.ant-picker-cell-selected > div::before {
-  @apply !border-[#FFB800]
+
+
+@media screen and (max-width: 1024px) {
+  ._3V5lx {
+    @apply absolute top-[10%] z-50 h-full overflow-auto;
+  }
 }
-._1_tsV {
-  @apply flex items-center gap-x-4;
+
+._1EfOI {
+  @apply border-none;
+}
+
+._1tvYg > div._FkAmA {
+  @apply absolute top-[65%] text-[#176CDD] !border-0 font-medium pl-0;
+}
+
+._1JsGC tbody tr:first-child,
+._1JsGC tbody tr:first-child ._1tvYg {
+  @apply !h-[150px];
 }
 
-._3AKUg {
-  @apply text-black font-semibold;
+._1JsGC tbody tr:first-child,
+._1JsGC tbody tr:first-child ._1LJFs {
+  @apply !h-[61px]
 }
 
 ._2Y9jk ._3puh0 {
-  display: none
+  display: none;
 }
 
 ._2Y9jk {
   border-width: 1px !important;
   border-style: solid !important;
   --tw-border-opacity: 1 !important;
-  border-bottom-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
+  border-bottom-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important;
 }
 
 .ant-picker-calendar-header .ant-picker-calendar-year-select {
   border-width: 1px !important;
   border-style: solid !important;
   --tw-border-opacity: 1 !important;
-  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
+  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important;
 }
 
 .ant-picker-calendar-header .ant-picker-calendar-month-select {
   border-width: 1px !important;
   border-style: solid !important;
   --tw-border-opacity: 1 !important;
-  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
+  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important;
 }
 
 .ant-picker-calendar-header .ant-picker-calendar-mode-switch {
-  display: none
+  display: none;
 }
 
 .ant-picker-calendar-header {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start !important;
-  gap: 8px
+  gap: 8px;
 }
 
 ._2Y9jk > ._1b_yY {
   border-width: 1px !important;
   --tw-border-opacity: 1 !important;
-  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important
+  border-color: rgb(220 221 221 / var(--tw-border-opacity, 1)) !important;
 }
 
 ._1K0QG {
   height: 100%;
+  max-height: 1000px;
   max-width: 295px;
+  overflow: auto;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding: 40px
+  padding: 40px;
+  box-shadow: 0px 2px 12px 0px #00000014;
 }
 
 ._1kmo4 {
@@ -949,42 +1074,42 @@ div._1dZBN {
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
-  font-size: 16px
+  font-size: 16px;
 }
 
 ._3yl3q {
   height: 12px;
   width: 12px;
   --tw-bg-opacity: 1;
-  background-color: rgb(23 108 221 / var(--tw-bg-opacity, 1))
+  background-color: rgb(23 108 221 / var(--tw-bg-opacity, 1));
 }
 
 ._dS6FM {
   height: 12px;
   width: 12px;
   --tw-bg-opacity: 1;
-  background-color: rgb(143 111 234 / var(--tw-bg-opacity, 1))
+  background-color: rgb(143 111 234 / var(--tw-bg-opacity, 1));
 }
 
 ._2v-Pp {
   height: 12px;
   width: 12px;
   --tw-bg-opacity: 1;
-  background-color: rgb(15 167 61 / var(--tw-bg-opacity, 1))
+  background-color: rgb(15 167 61 / var(--tw-bg-opacity, 1));
 }
 
 ._1u4J8 {
   height: 12px;
   width: 12px;
   --tw-bg-opacity: 1;
-  background-color: rgb(248 151 7 / var(--tw-bg-opacity, 1))
+  background-color: rgb(248 151 7 / var(--tw-bg-opacity, 1));
 }
 
 ._1RLYM {
   height: 12px;
   width: 12px;
   --tw-bg-opacity: 1;
-  background-color: rgb(240 25 25 / var(--tw-bg-opacity, 1))
+  background-color: rgb(240 25 25 / var(--tw-bg-opacity, 1));
 }
 
 ._29aaM {
@@ -995,22 +1120,25 @@ div._1dZBN {
   justify-content: space-between;
   gap: 8px;
   font-size: 16px;
-  font-weight: 500
+  font-weight: 500;
 }
 
 ._1yCoo:hover {
-  cursor: pointer
+  cursor: pointer;
+}
+
+.ant-picker-calendar .ant-picker-cell-today .ant-picker-cell-inner::before {
+  border: 1px solid #ffb800 !important;
 }
 
 @media screen and (max-width: 1024px) {
   ._1K0QG {
     position: absolute;
-    top: 5%;
+    top: 10%;
     z-index: 999;
-    height: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
     overflow: auto;
-    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+    box-shadow: 0px 2px 4px 0px #70707014;
   }
 }