1@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
  2
  3body {
  4  overflow: hidden;
  5}
  6
  7.bg-blue-animate {
  8  animation: blur-animate 200ms ease-in;
  9  backdrop-filter: blur(10px);
 10}
 11
 12@keyframes blur-animate {
 13  from {
 14    backdrop-filter: blur(1px);
 15  }
 16
 17  to {
 18    backdrop-filter: blur(10px);
 19  }
 20}
 21
 22.animate-spin {
 23  animation: spin 1s linear infinite;
 24}
 25
 26@keyframes spin {
 27  from {
 28    transform: rotate(0deg);
 29  }
 30
 31  to {
 32    transform: rotate(360deg);
 33  }
 34}
 35
 36table thead {
 37  th:first-of-type {
 38    border-top-left-radius: 8px;
 39  }
 40
 41  th:last-of-type {
 42    border-top-right-radius: 8px;
 43  }
 44}
 45
 46.last-row {
 47  td:first-of-type {
 48    border-bottom-left-radius: 8px;
 49  }
 50
 51  td:last-of-type {
 52    border-bottom-right-radius: 8px;
 53  }
 54}
 55
 56.slick-prev {
 57  left: -40px;
 58}
 59
 60.slick-next {
 61  right: -40px;
 62}
 63
 64.slick-prev,
 65.slick-next {
 66  z-index: 100;
 67}
 68
 69.chakra-popover__popper {
 70  z-index: 9999 !important;
 71}
 72
 73.inbound-item .chakra-checkbox__label {
 74  max-width: 100%;
 75  width: 100%;
 76}
 77
 78// data picker
 79.react-datepicker__navigation.react-datepicker__navigation--previous,
 80.react-datepicker__navigation.react-datepicker__navigation--next {
 81  padding-top: 6px;
 82}
 83
 84.react-datepicker {
 85  background-color: var(--chakra-colors-white) !important;
 86  border: 1px solid var(--chakra-colors-gray-200);
 87  border-radius: var(--chakra-radii-md) !important;
 88  position: relative;
 89}
 90
 91.chakra-ui-dark .react-datepicker {
 92  background-color: var(--chakra-colors-gray-700) !important;
 93  border: 1px solid var(--chakra-colors-gray-600);
 94  border-radius: var(--chakra-radii-md) !important;
 95  position: relative;
 96}
 97
 98.react-datepicker__header {
 99  text-align: center;
100  background-color: unset;
101  position: relative;
102  border-bottom: 1px solid var(--chakra-colors-gray-200);
103}
104
105.chakra-ui-dark .react-datepicker__header {
106  border-bottom: 1px solid var(--chakra-colors-gray-600);
107}
108
109.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
110  border-top: none;
111  border-bottom-color: var(--chakra-colors-white);
112}
113
114.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
115  top: -1px;
116  border-bottom-color: var(--chakra-colors-gray-200);
117}
118
119.chakra-ui-dark .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
120  border-top: none;
121  border-bottom-color: var(--chakra-colors-gray-700);
122}
123
124.chakra-ui-dark .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
125  top: -1px;
126  border-bottom-color: var(--chakra-colors-gray-600);
127}
128
129.react-datepicker__current-month,
130.react-datepicker__day-name,
131.react-datepicker__day {
132  color: var(--chakra-colors-chakra-body-text) !important;
133}
134
135.chakra-ui-dark .react-datepicker__current-month,
136.chakra-ui-dark .react-datepicker__day-name,
137.chakra-ui-dark .react-datepicker__day {
138  color: var(--chakra-colors-gray-300) !important;
139}
140
141.react-datepicker__day:hover {
142  border-radius: 0.3rem;
143  background-color: var(--chakra-colors-primary-300) !important;
144  color: var(--chakra-colors-white) !important;
145}
146
147.chakra-ui-dark .react-datepicker__day:hover {
148  border-radius: 0.3rem;
149  background-color: var(--chakra-colors-primary-500) !important;
150  color: var(--chakra-colors-gray-800) !important;
151}
152
153.react-datepicker__day--disabled {
154  color: var(--chakra-colors-gray-400) !important;
155}
156
157.react-datepicker__day--disabled:hover {
158  background-color: transparent !important;
159  color: var(--chakra-colors-gray-400) !important;
160}
161
162.chakra-ui-dark .react-datepicker__day--disabled {
163  color: var(--chakra-colors-gray-500) !important;
164}
165
166.chakra-ui-dark .react-datepicker__day--disabled:hover {
167  background-color: transparent !important;
168  color: var(--chakra-colors-gray-500) !important;
169}
170
171.react-datepicker__day--keyboard-selected,
172.react-datepicker__day--selected,
173.react-datepicker__day--in-selecting-range,
174.react-datepicker__day--in-range {
175  border-radius: 0.3rem;
176  background-color: var(--chakra-colors-primary-500) !important;
177  color: var(--chakra-colors-white) !important;
178}
179
180.chakra-ui-dark .react-datepicker__day--keyboard-selected,
181.chakra-ui-dark .react-datepicker__day--selected,
182.chakra-ui-dark .react-datepicker__day--in-selecting-range,
183.chakra-ui-dark .react-datepicker__day--in-range {
184  border-radius: 0.3rem;
185  background-color: var(--chakra-colors-primary-200) !important;
186  color: var(--chakra-colors-gray-800) !important;
187}
188
189.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
190  border-radius: 0.3rem;
191  background-color: var(--chakra-colors-primary-400) !important;
192}
193
194.chakra-ui-dark .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
195  border-radius: 0.3rem;
196  background-color: var(--chakra-colors-primary-400) !important;
197}
198
199.react-datepicker__day--outside-month {
200  visibility: hidden;
201}
202
203.datepicker-panel .react-datepicker {
204  background-color: unset;
205  border: unset;
206  border-radius: unset;
207  display: inline-block;
208  position: relative;
209}
210
211.green {
212  background: #66ff99;
213}
214
215.red {
216  background: #e53e3e;
217}
218
219.orange {
220  background: #fbd38d;
221}
222
223.circle {
224  min-width: 10px;
225  min-height: 10px;
226  border-radius: 50%;
227
228  box-shadow: 0px 0px 1px 1px #0000001a;
229}
230
231.pulse {
232  animation: pulse-animation 3s infinite;
233}
234
235.pulse.green {
236  animation: green-pulse-animation 3s infinite;
237}
238
239.pulse.red {
240  animation: red-pulse-animation 3s infinite;
241}
242
243.pulse.orange {
244  animation: orange-pulse-animation 3s infinite;
245}
246
247@keyframes pulse-animation {
248  0% {
249    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
250  }
251
252  100% {
253    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
254  }
255}
256
257@keyframes green-pulse-animation {
258  0% {
259    box-shadow: 0 0 0 0px #66ff9975;
260  }
261
262  100% {
263    box-shadow: 0 0 0 10px #66ff9900;
264  }
265}
266
267@keyframes red-pulse-animation {
268  0% {
269    box-shadow: 0 0 0 0px #e53e3e8c;
270  }
271
272  100% {
273    box-shadow: 0 0 0 10px #e53e3e00;
274  }
275}
276
277@keyframes orange-pulse-animation {
278  0% {
279    box-shadow: 0 0 0 0px #fbd38d85;
280  }
281
282  100% {
283    box-shadow: 0 0 0 10px #fbd38d00;
284  }
285}
286
287.flex-status {
288  display: flex;
289  align-items: center;
290  justify-content: start;
291  gap: .7rem;
292}