@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

@tailwind base;

@tailwind components;

@tailwind utilities;

body {
    width: 100%;
    margin: 0 auto;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    scrollbar-gutter: stable;
    font-family: Lexend, sans-serif;
}

.bg-overlay:not(.btn){
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 50;
    display: none;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
    --tw-bg-opacity: 0.5;
}

#sort + .ts-wrapper .ts-control.bg-overlay:not(.btn) {
                min-width: 100%;
                max-width: 100%;
            }

.medisupp-backdrop.bg-overlay:not(.btn) {
        display: none;
    }


    .draft-selfnote.bg-overlay:not(.btn){
    display: none !important;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    border-radius: 30px;
}

::-webkit-scrollbar-thumb {
    background: #0061e6;
    border-radius: 30px;
}

.page-description{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, 1);
    color: rgba(75, 85, 99, var(--tw-text-opacity));
    line-height: 1.6;
    margin-top: 1rem;
}

.page-description:empty{
    display: none !important;
}

/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: #fff;
    border-color: #8B98AA;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 rgba(0,0,0,0);
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #0061E6;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(1px + 0px) #0061E6, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #0061E6;
}

input::-moz-placeholder, textarea::-moz-placeholder{
    color: #8B98AA;
    opacity: 1;
}

input::placeholder,textarea::placeholder{
    color: #8B98AA;
    opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper{
    padding: 0;
}

::-webkit-date-and-time-value{
    min-height: 1.5em;
    text-align: inherit;
}

::-webkit-datetime-edit{
    display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
    padding-top: 0;
    padding-bottom: 0;
}

select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B98AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])){
    background-image: none;
    background-image: initial;
    background-position: 0 0;
    background-position: initial;
    background-repeat: repeat;
    background-repeat: initial;
    background-size: auto auto;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: inherit;
            print-color-adjust: inherit;
}

[type='checkbox'],[type='radio']{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #0061E6;
    background-color: #fff;
    border-color: #8B98AA;
    border-width: 1px;
    --tw-shadow: 0 0 rgba(0,0,0,0);
}

[type='checkbox']{
    border-radius: 0px;
}

[type='radio']{
    border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus{
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #0061E6;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(2px + 2px) #0061E6, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked{
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

[type='checkbox']:checked{
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {

    [type='checkbox']:checked{
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

[type='radio']:checked{
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {

    [type='radio']:checked{
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
    border-color: transparent;
    background-color: currentColor;
}

[type='checkbox']:indeterminate{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {

    [type='checkbox']:indeterminate{
        -webkit-appearance: auto;
           -moz-appearance: auto;
                appearance: auto;
    }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
    border-color: transparent;
    background-color: currentColor;
}

[type='file']{
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

[type='file']:focus{
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
}

*, ::before, ::after{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
    --tw-ring-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
    --tw-ring-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

.\!container{
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 640px){

    .\!container{
        max-width: 640px !important;
    }

    .container{
        max-width: 640px;
    }
}

@media (min-width: 768px){

    .\!container{
        max-width: 768px !important;
    }

    .container{
        max-width: 768px;
    }
}

@media (min-width: 1024px){

    .\!container{
        max-width: 1024px !important;
    }

    .container{
        max-width: 1024px;
    }
}

@media (min-width: 1170px){

    .\!container{
        max-width: 1170px !important;
    }

    .container{
        max-width: 1170px;
    }
}

@media (min-width: 1460px){

    .\!container{
        max-width: 1460px !important;
    }

    .container{
        max-width: 1460px;
    }
}

@media (min-width: 1640px){

    .\!container{
        max-width: 1640px !important;
    }

    .container{
        max-width: 1640px;
    }
}

h1 {
        font-size: 32px;
        line-height: 100%;
    }

@media screen and (max-width: 767.98px) {
    h1 {
            font-size: 26px
    }
        }

@media screen and (max-width: 559.98px) {
    h1 {
            font-size: 22px
    }
        }

h2 {
        font-size: 28px;
        line-height: 120%;
    }

@media screen and (max-width: 767.98px) {

    h2 {
            font-size: 24px
    }
        }

@media screen and (max-width: 559.98px) {

    h2 {
            font-size: 20px
    }
        }

h3 {
        font-size: 24px;
        line-height: 130%;
    }

@media screen and (max-width: 767.98px) {

    h3 {
            font-size: 21px
    }
        }

@media screen and (max-width: 559.98px) {

    h3 {
            font-size: 18px
    }
        }

h4 {
        font-size: 20px;
        line-height: 130%;
    }

@media screen and (max-width: 767.98px) {

    h4 {
            font-size: 18px
    }
        }

@media screen and (max-width: 559.98px) {

    h4 {
            font-size: 16px
    }
        }

h5 {
        font-size: 18px;
        line-height: 140%;
    }

@media screen and (max-width: 767.98px) {

    h5 {
            font-size: 16px
    }
        }

@media screen and (max-width: 559.98px) {

    h5 {
            font-size: 15px
    }
        }

h6 {
        font-size: 16px;
        line-height: 140%;
    }

@media screen and (max-width: 767.98px) {

    h6 {
            font-size: 15px
    }
        }

@media screen and (max-width: 559.98px) {

    h6 {
            font-size: 14px
    }
        }

p {
        font-size: 16px;
        line-height: 160%;
    }

@media screen and (max-width: 767.98px) {

    p {
            font-size: 15px
    }
        }

@media screen and (max-width: 559.98px) {

    p {
            font-size: 14px
    }
        }

img.svg-white {
            filter: brightness(0) invert(1);
        }

img.svg-black {
            filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(162deg) brightness(98%) contrast(106%);
        }

img.svg-primary {
            filter: invert(30%) sepia(90%) saturate(1664%) hue-rotate(211deg) brightness(91%) contrast(102%);
        }

img.\!svg-danger {
            filter: invert(21%) sepia(87%) saturate(4368%) hue-rotate(339deg) brightness(87%) contrast(138%) !important;
        }

/* drawer start */

.\!drawer{
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 60;
    overflow: hidden;
}

.drawer{
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 60;
    overflow: hidden;
}

.\!drawer:not(.show){
    display: none;
}

.medisupp-backdrop.\!drawer:not(.show) {
        display: none;
    }


    .draft-selfnote.\!drawer:not(.show){
    display: none !important;
}

.drawer:not(.show){
    display: none;
}

.medisupp-backdrop.drawer:not(.show) {
        display: none;
    }


    .draft-selfnote.drawer:not(.show){
    display: none !important;
}

/* Drawer overlay için blur ve background - show durumunda */

.\!drawer.show .drawer-overlay {
            background: rgba(0, 0, 0, 0.4) !important;
            backdrop-filter: blur(6px) !important;
            -webkit-backdrop-filter: blur(6px) !important;
        }

.drawer.show .drawer-overlay {
            background: rgba(0, 0, 0, 0.4) !important;
            backdrop-filter: blur(6px) !important;
            -webkit-backdrop-filter: blur(6px) !important;
        }

.drawer-body{
    width: 100%;
    --tw-translate-x: 100%;
    transform: translate(100%, 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));
    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));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

#sort + .ts-wrapper .ts-control.drawer-body {
                min-width: 100%;
                max-width: 100%;
            }

.drawer-body {
            transition-duration: 250ms;
            will-change: transform;
        }

@media screen and (min-width: 640px) {

        .drawer-body {
                transition-duration: 300ms
        }
            }

.\!drawer .bg-overlay {
            display: block !important;
            animation-duration: .2s !important;
            animation-fill-mode: both !important;
        }

.drawer .bg-overlay {
            display: block !important;
            animation-duration: .2s;
            animation-fill-mode: both;
        }

.\!drawer.show .drawer-overlay{
    opacity: 1;
}

.drawer.show .drawer-overlay{
    opacity: 1;
}

.\!drawer.show .drawer-body{
    --tw-translate-x: 0px;
    transform: translate(0px, 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));
    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));
}

.drawer.show .drawer-body{
    --tw-translate-x: 0px;
    transform: translate(0px, 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));
    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));
}

.\!drawer.show .bg-overlay {
                animation-name: fadeInAnim !important;
            }

.drawer.show .bg-overlay {
                animation-name: fadeInAnim;
            }

.\!drawer.show .drawer-container {
                animation-name: fadeInAnim !important;
            }

.drawer.show .drawer-container {
                animation-name: fadeInAnim;
            }

.\!drawer:not(.show) .bg-overlay {
                animation-name: fadeOutAnim !important;
            }

.drawer:not(.show) .bg-overlay {
                animation-name: fadeOutAnim;
            }

.\!drawer .drawer-container{
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow-y: scroll;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.member-table .medicineInfoTable td .\!drawer .drawer-container{
    gap: 0.5rem;
}

.drawer .drawer-container{
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow-y: scroll;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.member-table .medicineInfoTable td .drawer .drawer-container{
    gap: 0.5rem;
}

.\!drawer .drawer-container {
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) !important;
            animation-duration: .25s !important;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
            animation-fill-mode: both !important;
        }

.drawer .drawer-container {
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) !important;
            animation-duration: .25s;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-fill-mode: both;
        }

.\!drawer.drawer__side-right.show {
                display: flex !important;
                flex-wrap: wrap !important;
                align-items: stretch !important;
                justify-content: flex-end !important;
            }

.drawer.drawer__side-right.show {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch;
                justify-content: flex-end;
            }

.\!drawer.drawer__side-right.show .drawer-container {
                    animation-name: fadeInRightAnim !important;
                }

.drawer.drawer__side-right.show .drawer-container {
                    animation-name: fadeInRightAnim;
                }

.\!drawer.drawer__side-right:not(.show) .drawer-container {
                    animation-name: fadeOutRightAnim !important;
                }

.drawer.drawer__side-right:not(.show) .drawer-container {
                    animation-name: fadeOutRightAnim;
                }

.\!drawer.drawer__side-right .bg-overlay {
                background: rgba(0, 0, 0, 0.4) !important;
                backdrop-filter: blur(6px) !important;
                -webkit-backdrop-filter: blur(6px) !important;
                will-change: backdrop-filter !important;
                transform: translateZ(0) !important;
            }

.drawer.drawer__side-right .bg-overlay {
                background: rgba(0, 0, 0, 0.4) !important;
                backdrop-filter: blur(6px) !important;
                -webkit-backdrop-filter: blur(6px) !important;
                will-change: backdrop-filter;
                transform: translateZ(0);
            }

.\!drawer.drawer__side-right .drawer-container {
                width: 512px !important;
                margin-bottom: 0 !important;
                padding: 32px 32px 16px 32px !important;
                border-radius: 0px !important;
                box-shadow: 
                    0 20px 60px rgba(0, 0, 0, 0.3),
                    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
                position: relative !important;
                z-index: 60 !important;
                will-change: transform, opacity !important;
                scrollbar-gutter: stable !important;
            }

.drawer.drawer__side-right .drawer-container {
                width: 512px;
                margin-bottom: 0;
                padding: 32px 32px 16px 32px;
                border-radius: 0px;
                box-shadow: 
                    0 20px 60px rgba(0, 0, 0, 0.3),
                    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
                position: relative;
                z-index: 60;
                will-change: transform, opacity;
                scrollbar-gutter: stable;
            }

.\!drawer.drawer__side-right .drawer-container .drawer-header{
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.member-table .medicineInfoTable td .\!drawer.drawer__side-right .drawer-container .drawer-header{
    gap: 0.5rem;
}

.drawer.drawer__side-right .drawer-container .drawer-header{
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.member-table .medicineInfoTable td .drawer.drawer__side-right .drawer-container .drawer-header{
    gap: 0.5rem;
}

.\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close {
                        min-width: 44px !important;
                        min-height: 44px !important;
                        width: 44px !important;
                        height: 44px !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        background: transparent !important;
                        border: none !important;
                        border-radius: 16px !important;
                        cursor: pointer !important;
                        transition: all 0.2s ease-in-out !important;
                        padding: 0 !important;
                        margin: 0 !important;
                    }

.drawer.drawer__side-right .drawer-container .drawer-header .drawer-close {
                        min-width: 44px;
                        min-height: 44px;
                        width: 44px;
                        height: 44px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: transparent;
                        border: none;
                        border-radius: 16px;
                        cursor: pointer;
                        transition: all 0.2s ease-in-out;
                        padding: 0;
                        margin: 0;
                    }

.\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close:hover {
                            background-color: rgba(87, 99, 115, 0.1) !important;
                        }

.drawer.drawer__side-right .drawer-container .drawer-header .drawer-close:hover {
                            background-color: rgba(87, 99, 115, 0.1);
                        }

.\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close:active {
                            background-color: rgba(0, 97, 230, 0.15) !important;
                        }

.drawer.drawer__side-right .drawer-container .drawer-header .drawer-close:active {
                            background-color: rgba(0, 97, 230, 0.15);
                        }

.\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close svg,
                        .\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close img {
                            pointer-events: none !important;
                            width: 32px !important;
                            height: 32px !important;
                        }

.drawer.drawer__side-right .drawer-container .drawer-header .drawer-close svg,
                        .drawer.drawer__side-right .drawer-container .drawer-header .drawer-close img {
                            pointer-events: none;
                            width: 32px;
                            height: 32px;
                        }

.\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close svg,
                        .\!drawer.drawer__side-right .drawer-container .drawer-header .drawer-close img {
                            pointer-events: none !important;
                            width: 32px !important;
                            height: 32px !important;
                        }

.\!drawer.drawer__side-right .drawer-container h6{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.drawer.drawer__side-right .drawer-container h6{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body{
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
}

.member-table .medicineInfoTable td .\!drawer.drawer__side-right .drawer-container .drawer-alarm-body{
    gap: 0.5rem;
}

.drawer.drawer__side-right .drawer-container .drawer-alarm-body{
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
}

.member-table .medicineInfoTable td .drawer.drawer__side-right .drawer-container .drawer-alarm-body{
    gap: 0.5rem;
}

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body {
                    width: 100% !important;
                    min-height: 0 !important;
                }

.drawer.drawer__side-right .drawer-container .drawer-alarm-body {
                    width: 100%;
                    min-height: 0;
                }

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-list{
    flex: 1 1 0%;
}

.drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-list{
    flex: 1 1 0%;
}

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns{
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.member-table .medicineInfoTable td .\!drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns{
    gap: 0.5rem;
}

.drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns{
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.member-table .medicineInfoTable td .drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns{
    gap: 0.5rem;
}

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns {
                        position: sticky !important;
                        bottom: 0 !important;
                        z-index: 10 !important;
                    }

.drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns {
                        position: sticky;
                        bottom: 0;
                        z-index: 10;
                    }

.\!drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns .btn {
                            min-width: 140px !important;
                            padding: 0.75rem 1.5rem !important;
                            text-align: center !important;
                            display: inline-flex !important;
                            align-items: center !important;
                            justify-content: center !important;
                            font-weight: 500 !important;
                        }

.drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns .btn {
                            min-width: 140px;
                            padding: 0.75rem 1.5rem;
                            text-align: center;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 500;
                        }

.drawer.drawer__side-right .drawer-container .drawer-alarm-body .alarm-action-btns .\!btn {
                            min-width: 140px !important;
                            padding: 0.75rem 1.5rem !important;
                            text-align: center !important;
                            display: inline-flex !important;
                            align-items: center !important;
                            justify-content: center !important;
                            font-weight: 500 !important;
                        }

.\!drawer.drawer__side-right .drawer-container .drawer-body{
    display: flex;
    flex-direction: column;
}

.member-table .medicineInfoTable td .\!drawer.drawer__side-right .drawer-container .drawer-body{
    gap: 0.5rem;
}

.drawer.drawer__side-right .drawer-container .drawer-body{
    display: flex;
    flex-direction: column;
}

.member-table .medicineInfoTable td .drawer.drawer__side-right .drawer-container .drawer-body{
    gap: 0.5rem;
}

.\!drawer.drawer__side-right .drawer-container .drawer-body {
                    width: 100% !important;
                }

.drawer.drawer__side-right .drawer-container .drawer-body {
                    width: 100%;
                }

.\!drawer.drawer__side-right .drawer-container.drawer-sm {
                    width: 384px !important;
                }

.drawer.drawer__side-right .drawer-container.drawer-sm {
                    width: 384px;
                }

.\!drawer.drawer__side-right .drawer-container.drawer-md {
                    width: 640px !important;
                }

.drawer.drawer__side-right .drawer-container.drawer-md {
                    width: 640px;
                }

.\!drawer.drawer__side-right .drawer-container.drawer-xl {
                    width: 720px !important;
                    max-width: 90vw !important;
                }

.drawer.drawer__side-right .drawer-container.drawer-xl {
                    width: 720px;
                    max-width: 90vw;
                }

@media screen and (min-width: 1440px) {

                .\!drawer.drawer__side-right .drawer-container.drawer-xl {
                        max-width: 1200px !important
                }

                .drawer.drawer__side-right .drawer-container.drawer-xl {
                        max-width: 1200px
                }
                    }

.\!drawer.drawer__side-right .drawer-container.drawer-archive {
                    width: 1000px !important;
                    max-width: 95vw !important;
                }

.drawer.drawer__side-right .drawer-container.drawer-archive {
                    width: 1000px;
                    max-width: 95vw;
                }

@media screen and (max-width: 1200px) {
                
                .\!drawer.drawer__side-right .drawer-container.drawer-archive {
                        width: 900px !important
                }
                
                .drawer.drawer__side-right .drawer-container.drawer-archive {
                        width: 900px
                }
                    }

@media screen and (max-width: 1024px) {
                
                .\!drawer.drawer__side-right .drawer-container.drawer-archive {
                        width: 85vw !important
                }
                
                .drawer.drawer__side-right .drawer-container.drawer-archive {
                        width: 85vw
                }
                    }

@media screen and (max-width: 767.98px) {
                .\!drawer.drawer__side-right .drawer-container {
                    padding: 16px 16px 32px 16px !important;
                    border-radius: 0px !important;
                    overflow: hidden !important;
                }
                .drawer.drawer__side-right .drawer-container {
                    padding: 16px 16px 32px 16px;
                    border-radius: 0px;
                    overflow: hidden;
                }
            }

/* drawer end */

textarea{
    margin-top: 0.25rem;
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

#sort + .ts-wrapper textarea.ts-control {
                min-width: 100%;
                max-width: 100%;
            }

textarea:focus{
    --tw-border-opacity: 1;
    border-color: rgba(59, 130, 246, 1);
    border-color: rgba(59, 130, 246, var(--tw-border-opacity));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

@media (min-width: 640px){

    textarea{
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

.form-label{
    margin-bottom: 0.5rem;
    display: block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.form-text{
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.text-link{
    cursor: pointer;
    text-decoration-line: underline;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.text-link:hover{
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.dashboard-menu{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    overflow: visible;
    border-radius: 40px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(241, 245, 249, 1);
    border-color: rgba(241, 245, 249, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(248, 250, 252, 1);
    background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
    padding: 0.75rem;
}

.member-table .medicineInfoTable td .dashboard-menu{
    gap: 0.5rem;
}

.context-menu-item{
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(31, 41, 55, var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-timing-function: linear;
}

#sort + .ts-wrapper .ts-control.context-menu-item {
                min-width: 100%;
                max-width: 100%;
            }

.context-menu-item:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, 1);
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.pointer-events-none{
    pointer-events: none;
}

.visible{
    visibility: visible;
}

.\!invisible{
    visibility: hidden !important;
}

.collapse{
    visibility: collapse;
}

.fixed{
    position: fixed;
}

.absolute{
    position: absolute;
}

.relative{
    position: relative;
}

.sticky{
    position: sticky;
}

.inset-0{
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.\!-top-2{
    top: -0.5rem !important;
}

.-top-11{
    top: -2.75rem;
}

.bottom-0{
    bottom: 0px;
}

.left-0{
    left: 0px;
}

.left-4{
    left: 1rem;
}

.right-0{
    right: 0px;
}

.right-2{
    right: 0.5rem;
}

.right-3{
    right: 0.75rem;
}

.right-\[10px\]{
    right: 10px;
}

.top-0{
    top: 0px;
}

.top-1\/2{
    top: 50%;
}

.top-7{
    top: 1.75rem;
}

.top-\[10px\]{
    top: 10px;
}

.z-10{
    z-index: 10;
}

.z-30{
    z-index: 30;
}

.z-50{
    z-index: 50;
}

.z-\[100\]{
    z-index: 100;
}

.z-\[101\]{
    z-index: 101;
}

.z-\[10\]{
    z-index: 10;
}

.z-\[49\]{
    z-index: 49;
}

.z-\[51\]{
    z-index: 51;
}

.order-1{
    order: 1;
}

.order-5{
    order: 5;
}

.order-last{
    order: 9999;
}

.\!col-span-2{
    grid-column: span 2 / span 2 !important;
}

.col-span-12{
    grid-column: span 12 / span 12;
}

.col-span-6{
    grid-column: span 6 / span 6;
}

.\!m-0{
    margin: 0px !important;
}

.m-8{
    margin: 2rem;
}

.m-auto{
    margin: auto;
}

.-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.mx-1{
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.my-5{
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.my-6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-\[32px\]{
    margin-top: 32px;
    margin-bottom: 32px;
}

.\!mb-0{
    margin-bottom: 0px !important;
}

.\!ml-0{
    margin-left: 0px !important;
}

.\!mt-0{
    margin-top: 0px !important;
}

.\!mt-3{
    margin-top: 0.75rem !important;
}

.\!mt-\[29px\]{
    margin-top: 29px !important;
}

.mb-0{
    margin-bottom: 0px;
}

.mb-1{
    margin-bottom: 0.25rem;
}

.mb-2{
    margin-bottom: 0.5rem;
}

.mb-2\.5{
    margin-bottom: 0.625rem;
}

.mb-3{
    margin-bottom: 0.75rem;
}

.mb-4{
    margin-bottom: 1rem;
}

.mb-5{
    margin-bottom: 1.25rem;
}

.mb-6{
    margin-bottom: 1.5rem;
}

.mb-8{
    margin-bottom: 2rem;
}

.mb-\[12px\]{
    margin-bottom: 12px;
}

.mb-\[16px\]{
    margin-bottom: 16px;
}

.ml-2{
    margin-left: 0.5rem;
}

.ml-3{
    margin-left: 0.75rem;
}

.ml-auto{
    margin-left: auto;
}

.mr-1{
    margin-right: 0.25rem;
}

.mr-2{
    margin-right: 0.5rem;
}

.mr-auto{
    margin-right: auto;
}

.mt-1{
    margin-top: 0.25rem;
}

.mt-12{
    margin-top: 3rem;
}

.mt-16{
    margin-top: 4rem;
}

.mt-2{
    margin-top: 0.5rem;
}

.mt-3{
    margin-top: 0.75rem;
}

.mt-4{
    margin-top: 1rem;
}

.mt-5{
    margin-top: 1.25rem;
}

.mt-6{
    margin-top: 1.5rem;
}

.mt-8{
    margin-top: 2rem;
}

.mt-\[16px\]{
    margin-top: 16px;
}

.mt-\[26px\]{
    margin-top: 26px;
}

.mt-\[32px\]{
    margin-top: 32px;
}

.mt-\[92px\]{
    margin-top: 92px;
}

.line-clamp-1{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.\!block{
    display: block !important;
}

.block{
    display: block;
}

.inline-block{
    display: inline-block;
}

.inline{
    display: inline;
}

.\!flex{
    display: flex !important;
}

.flex{
    display: flex;
}

.\!inline-flex{
    display: inline-flex !important;
}

.inline-flex{
    display: inline-flex;
}

.table{
    display: table;
}

.grid{
    display: grid;
}

.\!hidden{
    display: none !important;
}

.hidden{
    display: none;
}

.aspect-square{
    aspect-ratio: 1 / 1;
}

.h-10{
    height: 2.5rem;
}

.h-12{
    height: 3rem;
}

.h-14{
    height: 3.5rem;
}

.h-16{
    height: 4rem;
}

.h-3{
    height: 0.75rem;
}

.h-4{
    height: 1rem;
}

.h-5{
    height: 1.25rem;
}

.h-7{
    height: 1.75rem;
}

.h-8{
    height: 2rem;
}

.h-9{
    height: 2.25rem;
}

.h-\[200px\]{
    height: 200px;
}

.h-\[36px\]{
    height: 36px;
}

.h-\[50px\]{
    height: 50px;
}

.h-auto{
    height: auto;
}

.h-full{
    height: 100%;
}

.max-h-\[calc\(100vh_-_120px\)\]{
    max-height: calc(100vh - 120px);
}

.\!min-h-3{
    min-height: 0.75rem !important;
}

.min-h-full{
    min-height: 100%;
}

.\!w-1\/12{
    width: 8.333333% !important;
}

.\!w-10\/12{
    width: 83.333333% !important;
}

.\!w-\[100\.15\%\]{
    width: 100.15% !important;
}

.\!w-\[100\.35\%\]{
    width: 100.35% !important;
}

.\!w-auto{
    width: auto !important;
}

.\!w-full{
    width: 100% !important;
}

.w-1\/12{
    width: 8.333333%;
}

.w-10{
    width: 2.5rem;
}

.w-12{
    width: 3rem;
}

.w-14{
    width: 3.5rem;
}

.w-16{
    width: 4rem;
}

.w-2\/12{
    width: 16.666667%;
}

.w-3{
    width: 0.75rem;
}

.w-3\/12{
    width: 25%;
}

.w-4{
    width: 1rem;
}

.w-4\/12{
    width: 33.333333%;
}

.w-5{
    width: 1.25rem;
}

.w-6\/12{
    width: 50%;
}

.w-7{
    width: 1.75rem;
}

.w-8{
    width: 2rem;
}

.w-9{
    width: 2.25rem;
}

.w-9\/12{
    width: 75%;
}

.w-\[126px\]{
    width: 126px;
}

.w-\[20\%\]{
    width: 20%;
}

.w-\[200px\]{
    width: 200px;
}

.w-\[25\%\]{
    width: 25%;
}

.w-\[30\%\]{
    width: 30%;
}

.w-\[36px\]{
    width: 36px;
}

.w-auto{
    width: auto;
}

.w-full{
    width: 100%;
}

.w-screen{
    width: 100vw;
}

.min-w-4{
    min-width: 1rem;
}

.min-w-40{
    min-width: 10rem;
}

.min-w-\[120px\]{
    min-width: 120px;
}

.max-w-\[400px\]{
    max-width: 400px;
}

.\!flex-none{
    flex: none !important;
}

.flex-1{
    flex: 1 1 0%;
}

.flex-shrink{
    flex-shrink: 1;
}

.flex-shrink-0{
    flex-shrink: 0;
}

.shrink-0{
    flex-shrink: 0;
}

.flex-grow{
    flex-grow: 1;
}

.border-collapse{
    border-collapse: collapse;
}

.-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    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));
}

.transform{
    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));
}

.\!cursor-default{
    cursor: default !important;
}

.\!cursor-text{
    cursor: text !important;
}

.cursor-help{
    cursor: help;
}

.cursor-pointer{
    cursor: pointer;
}

.resize{
    resize: both;
}

.list-inside{
    list-style-position: inside;
}

.list-disc{
    list-style-type: disc;
}

.grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.\!flex-row{
    flex-direction: row !important;
}

.flex-col{
    flex-direction: column;
}

.flex-wrap{
    flex-wrap: wrap;
}

.\!items-start{
    align-items: flex-start !important;
}

.items-start{
    align-items: flex-start;
}

.items-end{
    align-items: flex-end;
}

.\!items-center{
    align-items: center !important;
}

.items-center{
    align-items: center;
}

.\!justify-start{
    justify-content: flex-start !important;
}

.justify-start{
    justify-content: flex-start;
}

.\!justify-end{
    justify-content: flex-end !important;
}

.justify-end{
    justify-content: flex-end;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}

.gap-1{
    gap: 0.25rem;
}

.gap-2{
    gap: 0.5rem;
}

.gap-2\.5{
    gap: 0.625rem;
}

.gap-3{
    gap: 0.75rem;
}

.gap-4{
    gap: 1rem;
}

.gap-5{
    gap: 1.25rem;
}

.gap-6{
    gap: 1.5rem;
}

.gap-8{
    gap: 2rem;
}

.gap-\[4px\]{
    gap: 4px;
}

.gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}

.gap-y-6{
    row-gap: 1.5rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * 0);
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * (1 - 0));
    margin-left: calc(0.25rem * (1 - var(--tw-space-x-reverse)));
    margin-left: calc(0.25rem * calc(1 - 0));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * 0);
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * (1 - 0));
    margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
    margin-left: calc(0.75rem * calc(1 - 0));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * 0);
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * (1 - 0));
    margin-left: calc(1.5rem * (1 - var(--tw-space-x-reverse)));
    margin-left: calc(1.5rem * calc(1 - 0));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * (1 - 0));
    margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(0.25rem * calc(1 - 0));
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * 0);
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * (1 - 0));
    margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(0.5rem * calc(1 - 0));
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * 0);
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * (1 - 0));
    margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(0.75rem * calc(1 - 0));
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * 0);
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * (1 - 0));
    margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(1rem * calc(1 - 0));
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * 0);
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * (1 - 0));
    margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(1.5rem * calc(1 - 0));
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * 0);
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * (1 - 0));
    margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
    margin-top: calc(2rem * calc(1 - 0));
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * 0);
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden{
    overflow: hidden;
}

.overflow-visible{
    overflow: visible;
}

.overflow-x-auto{
    overflow-x: auto;
}

.overflow-y-auto{
    overflow-y: auto;
}

.overflow-x-hidden{
    overflow-x: hidden;
}

.overflow-y-hidden{
    overflow-y: hidden;
}

.truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-nowrap{
    white-space: nowrap;
}

.text-nowrap{
    text-wrap: nowrap;
}

.rounded{
    border-radius: 0.25rem;
}

.rounded-3xl{
    border-radius: 1.5rem;
}

.rounded-full{
    border-radius: 9999px;
}

.rounded-lg{
    border-radius: 0.5rem;
}

.rounded-md{
    border-radius: 0.375rem;
}

.rounded-xl{
    border-radius: 0.75rem;
}

.rounded-l-lg{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.\!border-0{
    border-width: 0px !important;
}

.\!border-\[2px\]{
    border-width: 2px !important;
}

.border{
    border-width: 1px;
}

.border-2{
    border-width: 2px;
}

.\!border-b-0{
    border-bottom-width: 0px !important;
}

.border-b{
    border-bottom-width: 1px;
}

.border-l-\[1px\]{
    border-left-width: 1px;
}

.border-t{
    border-top-width: 1px;
}

.border-solid{
    border-style: solid;
}

.border-none{
    border-style: none;
}

.\!border-gray-300{
    --tw-border-opacity: 1 !important;
    border-color: rgba(222, 228, 236, 1) !important;
    border-color: rgba(222, 228, 236, var(--tw-border-opacity)) !important;
}

.\!border-gray-351{
    --tw-border-opacity: 1 !important;
    border-color: rgba(240, 243, 246, 1) !important;
    border-color: rgba(240, 243, 246, var(--tw-border-opacity)) !important;
}

.border-blue-400{
    --tw-border-opacity: 1;
    border-color: rgba(96, 165, 250, 1);
    border-color: rgba(96, 165, 250, var(--tw-border-opacity));
}

.border-gray-100{
    --tw-border-opacity: 1;
    border-color: rgba(243, 244, 246, 1);
    border-color: rgba(243, 244, 246, var(--tw-border-opacity));
}

.border-gray-200{
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, 1);
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

.border-gray-300{
    --tw-border-opacity: 1;
    border-color: rgba(222, 228, 236, 1);
    border-color: rgba(222, 228, 236, var(--tw-border-opacity));
}

.border-gray-351{
    --tw-border-opacity: 1;
    border-color: rgba(240, 243, 246, 1);
    border-color: rgba(240, 243, 246, var(--tw-border-opacity));
}

.border-purple-700{
    --tw-border-opacity: 1;
    border-color: rgba(126, 34, 206, 1);
    border-color: rgba(126, 34, 206, var(--tw-border-opacity));
}

.border-b-\[\#DEE4EC\]{
    --tw-border-opacity: 1;
    border-bottom-color: rgba(222, 228, 236, 1);
    border-bottom-color: rgba(222, 228, 236, var(--tw-border-opacity));
}

.bg-blue-100{
    --tw-bg-opacity: 1;
    background-color: rgba(219, 234, 254, 1);
    background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
}

.bg-blue-50{
    --tw-bg-opacity: 1;
    background-color: rgba(239, 246, 255, 1);
    background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
}

.bg-blue-500{
    --tw-bg-opacity: 1;
    background-color: rgba(59, 130, 246, 1);
    background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.bg-blue-600{
    --tw-bg-opacity: 1;
    background-color: rgba(0, 97, 230, 1);
    background-color: rgba(0, 97, 230, var(--tw-bg-opacity));
}

.bg-gray-100{
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}

.bg-gray-200{
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, 1);
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}

.bg-gray-350{
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.bg-gray-50{
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.bg-green-100{
    --tw-bg-opacity: 1;
    background-color: rgba(220, 252, 231, 1);
    background-color: rgba(220, 252, 231, var(--tw-bg-opacity));
}

.bg-purple-200{
    --tw-bg-opacity: 1;
    background-color: rgba(233, 213, 255, 1);
    background-color: rgba(233, 213, 255, var(--tw-bg-opacity));
}

.bg-purple-700{
    --tw-bg-opacity: 1;
    background-color: rgba(126, 34, 206, 1);
    background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
}

.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.object-cover{
    -o-object-fit: cover;
       object-fit: cover;
}

.object-center{
    -o-object-position: center;
       object-position: center;
}

.\!p-2{
    padding: 0.5rem !important;
}

.\!p-4{
    padding: 1rem !important;
}

.p-4{
    padding: 1rem;
}

.p-6{
    padding: 1.5rem;
}

.p-8{
    padding: 2rem;
}

.\!px-0{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.\!py-2{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4{
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8{
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.\!pb-0{
    padding-bottom: 0px !important;
}

.\!pb-6{
    padding-bottom: 1.5rem !important;
}

.\!pl-0{
    padding-left: 0px !important;
}

.\!pr-0{
    padding-right: 0px !important;
}

.\!pt-0{
    padding-top: 0px !important;
}

.pb-0{
    padding-bottom: 0px;
}

.pb-0\.5{
    padding-bottom: 0.125rem;
}

.pb-2{
    padding-bottom: 0.5rem;
}

.pb-20{
    padding-bottom: 5rem;
}

.pb-24{
    padding-bottom: 6rem;
}

.pb-3{
    padding-bottom: 0.75rem;
}

.pb-4{
    padding-bottom: 1rem;
}

.pb-5{
    padding-bottom: 1.25rem;
}

.pb-8{
    padding-bottom: 2rem;
}

.pb-\[32px\]{
    padding-bottom: 32px;
}

.pl-4{
    padding-left: 1rem;
}

.pr-0{
    padding-right: 0px;
}

.pr-10{
    padding-right: 2.5rem;
}

.pr-2{
    padding-right: 0.5rem;
}

.pr-8{
    padding-right: 2rem;
}

.pt-3{
    padding-top: 0.75rem;
}

.pt-4{
    padding-top: 1rem;
}

.pt-6{
    padding-top: 1.5rem;
}

.pt-8{
    padding-top: 2rem;
}

.text-left{
    text-align: left;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.\!text-sm{
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-base{
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold{
    font-weight: 700;
}

.font-medium{
    font-weight: 500;
}

.font-normal{
    font-weight: 400;
}

.font-semibold{
    font-weight: 600;
}

.uppercase{
    text-transform: uppercase;
}

.lowercase{
    text-transform: lowercase;
}

.not-italic{
    font-style: normal;
}

.\!leading-\[inherit\]{
    line-height: inherit !important;
}

.leading-\[51px\]{
    line-height: 51px;
}

.leading-relaxed{
    line-height: 1.625;
}

.tracking-wide{
    letter-spacing: 0.025em;
}

.\!text-\[\#a8b3c2\]{
    --tw-text-opacity: 1 !important;
    color: rgba(168, 179, 194, 1) !important;
    color: rgba(168, 179, 194, var(--tw-text-opacity)) !important;
}

.text-\[\#2E3948\]{
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.text-blue-600{
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.text-gray-400{
    --tw-text-opacity: 1;
    color: rgba(156, 163, 175, 1);
    color: rgba(156, 163, 175, var(--tw-text-opacity));
}

.text-gray-500{
    --tw-text-opacity: 1;
    color: rgba(139, 152, 170, 1);
    color: rgba(139, 152, 170, var(--tw-text-opacity));
}

.text-gray-600{
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, 1);
    color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.text-gray-700{
    --tw-text-opacity: 1;
    color: rgba(51, 51, 51, 1);
    color: rgba(51, 51, 51, var(--tw-text-opacity));
}

.text-gray-800{
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(31, 41, 55, var(--tw-text-opacity));
}

.text-gray-900{
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, 1);
    color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.text-green-600{
    --tw-text-opacity: 1;
    color: rgba(22, 163, 74, 1);
    color: rgba(22, 163, 74, var(--tw-text-opacity));
}

.text-green-800{
    --tw-text-opacity: 1;
    color: rgba(22, 101, 52, 1);
    color: rgba(22, 101, 52, var(--tw-text-opacity));
}

.text-orange-500{
    --tw-text-opacity: 1;
    color: rgba(249, 115, 22, 1);
    color: rgba(249, 115, 22, var(--tw-text-opacity));
}

.text-red-500{
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, 1);
    color: rgba(239, 68, 68, var(--tw-text-opacity));
}

.text-red-600{
    --tw-text-opacity: 1;
    color: rgba(220, 38, 38, 1);
    color: rgba(220, 38, 38, var(--tw-text-opacity));
}

.text-white{
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.underline{
    text-decoration-line: underline;
}

.shadow{
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.shadow-sm{
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.shadow-xl{
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.invert{
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    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);
}

.sepia{
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) sepia(100%) var(--tw-drop-shadow);
    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);
}

.filter{
    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);
}

.transition{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

@keyframes fadeInRightAnim {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeOutRightAnim {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeInAnim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutAnim {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInUpAnim {
    0% {
        opacity: 0;
        transform: translate3d(0, 60%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translate(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.loader, .page-loader {
    position: relative !important;
    overflow: hidden !important;
    min-height: 300px;
}

.loader:after, .page-loader:after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 998;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.loader:before, .page-loader:before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: 64px;
        border: 4px solid rgba(0, 97, 230, 0.1);
        border-top-color: #0061E6;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        z-index: 999;
    }

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.loader-circle {
    opacity: 0;
    display: none;
    position: fixed;
    bottom: 50px;
    transition: opacity 0.3s ease-in;
}

.loader-circle.show {
        opacity: 1;
        display: flex;
    }

.loader-circle .circle {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #2563eb;
        margin: 5px;
        animation: bounce 0.5s infinite ease-in-out;
    }

.loader-circle .circle:nth-child(2) {
            animation-delay: 0.1s;
        }

.loader-circle .circle:nth-child(3) {
            animation-delay: 0.2s;
        }

@media screen and (prefers-reduced-motion) {
    .circle {
        animation: none;
    }
}

.accordion .accordion-item {
        border-bottom: 1px solid #DEE4EC;
    }

.accordion .accordion-item .accordion-item__title {
            color: #2E3948;
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 24px;
            padding-bottom: 24px;
            position: relative;
            cursor: pointer;
        }

.accordion .accordion-item .accordion-item__title::after {
                content: '+';
                font-size: 24px;
                font-weight: 300;
                position: absolute;
                top: 50%;
                right: 0px;
                transform: translateY(-50%);
                pointer-events: none;
            }

.accordion .accordion-item .accordion-item__body {
            display: none;
            margin-top: 8px;
            padding-bottom: 24px;
        }

.accordion .accordion-item.accordion-item--active .accordion-item__title {
                color: #0061E6;
            }

.accordion .accordion-item.accordion-item--active .accordion-item__title::after {
                    content: '-';
                }

.accordion .accordion-item.accordion-item--active .accordion-item__body {
                display: block;
            }

.accordion > .accordion-item:first-child {
        border-top: 1px solid #DEE4EC;
    }

.note {
    background-color: #FFFFFF;
    color: #000;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 8px;
    border-left: 3px solid #2DB4FF;
    margin-top: 12px;
    text-align: left !important;
    width: 100%;
}

.note.doctor {
        background: #def6e8 url('/assets/img/icon/doctor.svg') 10px center no-repeat !important;
        padding-left: 34px !important;
    }

.note.user {
        background: #def6e8 url('/assets/img/icon/user-alt.svg') 10px center no-repeat !important;
        padding-left: 34px !important;
    }

.note.blue {
        border-color: #2DB4FF;
    }

.note.dark {
        border-color: #2E3948;
        background-color: #ffe2e2;
    }

.note.end-note {
        background-color: #FFF4F1 !important;
    }

.note:has(button) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

.note:has(button) button{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(110, 231, 183, 1);
    border-color: rgba(110, 231, 183, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(167, 243, 208, 1);
    background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(6, 95, 70, 1);
    color: rgba(6, 95, 70, var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.note:has(button) button:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(110, 231, 183, 1);
    background-color: rgba(110, 231, 183, var(--tw-bg-opacity));
}

.note:has(button).end-note button{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(254, 215, 170, 1);
    border-color: rgba(254, 215, 170, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(255, 237, 213, 1);
    background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(194, 65, 12, 1);
    color: rgba(194, 65, 12, var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.note:has(button).end-note button:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(254, 215, 170, 1);
    background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
}

.page-top{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

#sort + .ts-wrapper .ts-control.page-top {
                min-width: 100%;
                max-width: 100%;
            }

.member-table .medicineInfoTable td .page-top{
    gap: 0.5rem;
}

@media screen and (max-width: 1023.98px) {

.page-top.mobile-flex {
            flex-wrap: wrap;
            flex-direction: column;
            align-items: stretch;
            justify-content: stretch;
    }

            .page-top.mobile-flex h1 {
                margin-bottom: 18px;
            }
    }

.page-top h1{
    display: flex;
    align-items: center;
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, 1);
    color: rgba(17, 24, 39, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .page-top h1{
    gap: 0.5rem;
}

.page-top h1 {
        font-size: 32px;
        line-height: 100%;
        font-weight: 300;
    }

@media screen and (max-width: 767.98px) {

.page-top h1 {
            font-size: 26px;
    }
    }

@media screen and (max-width: 559.98px) {

.page-top h1 {
            font-size: 22px;
    }
    }

.page-top .page-top-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.member-table .medicineInfoTable td .page-top .page-top-title{
    gap: 0.5rem;
}

@media screen and (max-width: 1023.98px) {

.page-top .page-top-title {
            margin-bottom: 18px;
    }

            .page-top .page-top-title h1 {
                margin-bottom: 0px;
            }
    }

.page-top .page-top-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        display: grid;
        align-items: center;
        justify-items: center;
        place-items: center;
        border-radius: 18px;
        border: 1px solid #8B98AA;
    }

@media (min-width: 1024px){

    .page-top .page-top-btn{
        display: none !important;
    }
}

.page-top .page-top__right-bar{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.member-table .medicineInfoTable td .page-top .page-top__right-bar{
    gap: 0.5rem;
}

@media (min-width: 1024px){

    .page-top .page-top__right-bar{
        gap: 1rem;
    }
}

.page-top .page-top__filter-bar .page-top-filter-body{
    display: flex;
    align-items: center;
    gap: 1rem;
    text-wrap: nowrap;
}

.member-table .medicineInfoTable td .page-top .page-top__filter-bar .page-top-filter-body{
    gap: 0.5rem;
}

.page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 0px;
}

.member-table .medicineInfoTable td .page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs{
    gap: 0.5rem;
}

@media (min-width: 640px){

    .page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px){

    .page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs{
        padding-left: 2rem;
        padding-right: 0px;
    }
}

@media screen and (min-width: 1170px) {
            .page-top .page-top__filter-bar .page-top-filter-header{
        display: none !important;
    }
        }

@media screen and (max-width: 1169.98px) {
            .page-top .page-top__filter-bar .page-top-filter-wrapper {
                width: 100%;
                height: 65%;
                position: fixed;
                bottom: -90px;
                left: 0px;
                z-index: 49;
                opacity: 0;
                visibility: hidden;
                transition: all .2s ease-in-out;
            }

                .page-top .page-top__filter-bar .page-top-filter-wrapper:has(.page-top-filter-stripe),
                .page-top .page-top__filter-bar .page-top-filter-wrapper.page-top-filter-wrapper--h-auto {
                    height: auto;
                }

            .page-top .page-top__filter-bar .page-top-filter-overlay {
                background-color: rgba(0, 0, 0, 0.34);
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 48;
                opacity: 0;
                visibility: hidden;
                transition: all .2s ease-in-out;
            }

            .page-top .page-top__filter-bar .page-top-filter-header {
                background-color: #FFFFFF;
                padding: 16px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom: 1px solid #DEE4EC;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .page-top .page-top__filter-bar .page-top-filter-header + .page-top-filter-body {
                    border-top-left-radius: 0px;
                    border-top-right-radius: 0px;
                }

            .page-top .page-top__filter-bar .page-top-filter-body {
                background-color: #FFFFFF;
                padding: 24px 16px;
                height: 100%;
                border-radius: 16px 16px 0px 0px;
                flex-direction: column;
                align-items: stretch;
                justify-content: stretch;
            }
                    .page-top .page-top__filter-bar .page-top-filter-body .ts-wrapper .ts-control {
                        width: 100% !important;
                        max-width: 100% !important;
                    }

                .page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs {
                    padding-left: 0px;
                    gap: 10px;
                    order: 2;
                }

                    .page-top .page-top__filter-bar .page-top-filter-body .page-top-filter-inputs > label {
                        flex: 1 0 0%;
                    }

                .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe {
                    gap: 0px;
                }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .page-top-filter-inputs {
                        order: initial;
                        padding-bottom: 18px;
                        border-bottom: 1px solid #DEE4EC;
                    }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .ts-control:after {
                        display: none;
                    }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .ts-control, .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .btn:not(.page-top-filter-close-btn) {
                        border-radius: 0px;
                        border-width: 0px 0px 1px 0px;
                        border-color: #DEE4EC;
                    }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .ts-control .item, .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .btn:not(.page-top-filter-close-btn) {
                        color: #2E3948;
                        font-size: 16px;
                        font-weight: 400;
                    }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .ts-dropdown {
                        position: fixed;
                        top: auto;
                        left: 0px;
                        bottom: 0px;
                        width: 100%;
                        height: 60%;
                        border-top-left-radius: 16px;
                        border-top-right-radius: 16px;
                        border: 1px solid #DEE4EC;
                        padding-top: 16px;
                        padding-bottom: 16px;
                    }

                    .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe .btn.page-top-filter-close-btn {
                        justify-content: center;
                        text-align: center;
                        margin-top: 10px;
                    }
                        .page-top .page-top__filter-bar .page-top-filter-body.page-top-filter-stripe:has(.btn.page-top-filter-close-btn) > *:nth-last-child(2) {
                            border-bottom: 0px;
                        }
                .page-top .page-top__filter-bar.is-open .page-top-filter-wrapper {
                    bottom: 0px;
                    opacity: 1;
                    visibility: visible;
                }

                .page-top .page-top__filter-bar.is-open .page-top-filter-overlay {
                    opacity: 1;
                    visibility: visible;
                }
        }

@media screen and (min-width: 1024px) and (max-width: 1169.98px) {
            .page-top .page-top__filter-bar .page-top__filter-icon{
        display: flex;
        align-items: center;
        border-radius: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgba(0, 97, 230, 1);
        color: rgba(0, 97, 230, var(--tw-text-opacity));
    }

.member-table .medicineInfoTable td .page-top .page-top__filter-bar .page-top__filter-icon{
        gap: 0.5rem;
    }
            .page-top .page-top__filter-bar .page-top__filter-icon {
                background-image: url('/assets/img/icon/filter.svg');
                background-position: 16px center;
                background-repeat: no-repeat;
                height: 50px;
                padding-left: 40px;
                border: 1px solid #8b98aa;
                cursor: pointer;
            }

                .page-top .page-top__filter-bar .page-top__filter-icon::before {
                    content: attr(title);
                }
                .page-top .page-top__filter-bar .page-top-filter-body .btn-group {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
        }

@media screen and (max-width: 1023.98px) {
            .page-top .page-top__filter-bar .page-top__filter-icon {
                background: transparent url('/assets/img/icon/filter.svg') center center no-repeat;
                width: 32px;
                min-width: 32px;
                height: 32px;
                padding: 0px;
                display: grid;
                align-items: center;
                justify-items: center;
                align-items: center;
                justify-items: center;
                place-items: center;
                border-radius: 18px;
                border: 1px solid #8B98AA;
                overflow: hidden;
                position: relative;
                cursor: pointer;
            }

                .page-top .page-top__filter-bar .page-top__filter-icon.icon-dots {
                    background-image: url('/assets/img/icon/dots-horizontal.svg');
                }
                .page-top .page-top__filter-bar .page-top-filter-body .btn-group {
                    flex-direction: column;
                    align-items: stretch;
                }
        }

.page-top .btn-group{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-table .medicineInfoTable td .page-top .btn-group{
    gap: 0.5rem;
}

.page-top .btn-group .btn{
    align-content: center;
    justify-content: center;
    place-content: center;
    text-wrap: nowrap;
    text-align: center;
}

.page-top .btn-group.btn-quartet{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px){

    .page-top .btn-group.btn-quartet{
        grid-auto-flow: column;
        grid-template-columns: none;
    }
}

@media (min-width: 768px) and (max-width: 1023.99px){

    .page-top .btn-group.btn-quartet.btn-tablet-triple{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767.98px) {

.page-top .btn-group.btn-quartet .btn.grid-full-btn {
                    grid-column: 2 span;
            }
    }

@media screen and (max-width: 1023.98px) {

.page-top .btn-group-mobile-circle {
            gap: 10px;
    }

            .page-top .btn-group-mobile-circle .btn {
                background-color: transparent;
                width: 32px;
                min-width: 32px;
                height: 32px;
                padding: 0px;
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                border-radius: 18px;
                border: 1px solid #8B98AA;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
                font-size: 0;
                line-height: 0;
            }

                .page-top .btn-group-mobile-circle .btn span, .page-top .btn-group-mobile-circle .btn > :not(img) {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border-width: 0;
                }

                .page-top .btn-group-mobile-circle .btn img {
                    width: 18px;
                    height: 18px;
                    margin: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: filter 0.2s ease;
                    font-size: medium;
                    font-size: initial;
                    line-height: normal;
                    line-height: initial;
                }
                    .page-top .btn-group-mobile-circle .btn:not(.filled) img {
                        filter: none;
                    }

                .page-top .btn-group-mobile-circle .btn.filled {
                    background-color: #0061E6;
                    border-color: #0061E6;
                }

                    .page-top .btn-group-mobile-circle .btn.filled img {
                        filter: brightness(0) invert(1);
                    }

                .page-top .btn-group-mobile-circle .btn:hover:not(:disabled) {
                    background-color: rgba(0, 97, 230, 0.1);
                    border-color: #0061E6;
                    transform: scale(1.05);
                }

                .page-top .btn-group-mobile-circle .btn:active:not(:disabled) {
                    transform: scale(0.95);
                }

                .page-top .btn-group-mobile-circle .btn:focus-visible {
                    outline: 2px solid #0061E6;
                    outline-offset: 2px;
                }

                .page-top .btn-group-mobile-circle .btn:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                    pointer-events: none;
                }
                .page-top .btn-group-mobile-circle .ts-wrapper .ts-control {
                    background: transparent url('/assets/img/icon/filter.svg') center center no-repeat;
                    width: 32px;
                    min-width: 32px !important;
                    max-width: 32px !important;
                    height: 32px;
                    min-height: auto;
                    padding: 0px;
                    border-radius: 18px;
                    border-color: #8B98AA;
                    cursor: pointer;
                    transition: background-color 0.2s ease, border-color 0.2s ease;
                }

                    .page-top .btn-group-mobile-circle .ts-wrapper .ts-control > div, .page-top .btn-group-mobile-circle .ts-wrapper .ts-control::after {
                        display: none;
                    }

                    .page-top .btn-group-mobile-circle .ts-wrapper .ts-control:hover {
                        background-color: rgba(0, 97, 230, 0.1);
                        border-color: #0061E6;
                    }

                    .page-top .btn-group-mobile-circle .ts-wrapper .ts-control:focus-visible {
                        outline: 2px solid #0061E6;
                        outline-offset: 2px;
                    }

                .page-top .btn-group-mobile-circle .ts-wrapper .ts-dropdown {
                    min-width: 180px;
                    margin-top: -1px;
                    border: 1px solid #8B98AA;
                    border-radius: 8px;
                    left: auto;
                    right: 0px;
                    z-index: 50;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                    .page-top .btn-group-mobile-circle .ts-wrapper.dropdown-active .ts-control {
                        border-bottom-left-radius: 0px;
                        border-bottom-right-radius: 0px;
                        background-color: rgba(0, 97, 230, 0.1);
                        border-color: #0061E6;
                    }

                    .page-top .btn-group-mobile-circle .ts-wrapper.dropdown-active .ts-dropdown {
                        border-top-right-radius: 0px;
                    }
    }

/* Global blur effect for all SweetAlert2 modals */

/* SweetAlert2'de backdrop container'ın kendisi olduğu için blur'u container'a uyguluyoruz */

/* Best practice: 5-8px arası blur değerleri hem performanslı hem de görsel olarak etkili */

.swal2-container.swal2-backdrop-show:not(.swal2-no-backdrop) {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    will-change: backdrop-filter;
    transform: translateZ(0);
}

/* Tüm SweetAlert2 modalları için backdrop background */

.swal2-container.swal2-backdrop-show:not(.swal2-no-backdrop) {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Tüm SweetAlert2 modallarına shadow ekle - blur'dan ayrışması için */

.swal2-container.swal2-backdrop-show .swal2-popup {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

@keyframes modalFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-0.5rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes backdropFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes backdropFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes modalFadeOutScale {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(-0.5rem);
    }
}

.swal2-container.direcd-pop-confirm-swal.swal2-backdrop-show {
    animation: backdropFadeIn 0.2s ease-out;
}

.swal2-container.direcd-pop-confirm-swal.swal2-backdrop-show .swal2-backdrop {
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%
        ) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 
            0 8px 32px 0 rgba(0, 0, 0, 0.1),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

.swal2-container.direcd-pop-confirm-swal.swal2-backdrop-hide {
    animation: backdropFadeOut 0.15s ease-in forwards;
}

.direcd-pop-confirm-swal .swal2-popup.swal2-show {
        animation: modalFadeInScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

.direcd-pop-confirm-swal .swal2-popup.swal2-hide {
        animation: modalFadeOutScale 0.2s ease-in forwards !important;
    }

.direcd-pop-confirm-swal .swal2-popup {
        width: 700px;
        padding: 2.5rem 1.5rem;
        border-radius: 1rem;
    }

.direcd-pop-confirm-swal .swal2-icon {
        margin-top: 0;
        margin-bottom: 1rem;
    }

.direcd-pop-confirm-swal .swal2-title {
        color: #000;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.5;
        padding-top: 0;
        margin-top: 0;
    }

.direcd-pop-confirm-swal:has(.medicine-popup) .swal2-popup, .direcd-pop-confirm-swal.has-medicine-popup .swal2-popup {
            width: min(1400px, calc(100dvw - 2rem));
        }

.direcd-pop-confirm-swal .swal2-html-container {
        margin: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }

.direcd-pop-confirm-swal .swal2-content {
        text-align: center !important;
    }

.direcd-pop-confirm-swal .swal2-validation-message {
        margin: 1rem auto 0;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        line-height: 1.3;
        background-color: rgba(220, 53, 69, 0.12);
        color: #B42318;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
    }

.direcd-pop-confirm-swal .swal2-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.direcd-pop-confirm-swal .swal2-actions button {
            background-image: none !important;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.5;
            text-align: center;
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            border: 1px solid transparent;
            box-shadow: none !important;
            margin: 0;
            transition: all 0.2s ease;
            cursor: pointer;
        }

.direcd-pop-confirm-swal .swal2-actions button.direcd-popup-cancel-btn {
                background-color: #ffffff;
                color: #0061E6;
                border-color: #8B98AA;
            }

.direcd-pop-confirm-swal .swal2-actions button.direcd-popup-cancel-btn:hover {
                    background-color: #F0F3F6;
                    border-color: #0061E6;
                }

.direcd-pop-confirm-swal .swal2-actions button.direcd-popup-confirm-btn {
                background-color: #0061E6;
                color: #ffffff;
            }

.direcd-pop-confirm-swal .swal2-actions button.direcd-popup-confirm-btn:hover {
                    background-color: #0052CC;
                }

.direcd-pop-confirm-swal .swal2-textarea {
        margin-left: 2rem;
        margin-right: 2rem;
    }

.direcd-pop-confirm-swal .swal2-input-label {
        width: 100%;
        color: #2E3948;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        text-align: left;
        display: block;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-top: 0;
    }

.direcd-pop-confirm-swal .direct-popup-close-btn {
        background: transparent url('/assets/img/icon/round-close-btn.svg') center center no-repeat;
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        text-indent: -9999999rem;
    }

.direcd-pop-confirm-swal.blog-popup .swal2-popup {
            width: 1000px;
            padding: 2rem;
        }

.direcd-pop-confirm-swal.blog-popup .swal2-title {
            text-align: left;
            padding-left: 0;
            margin-bottom: 2rem;
        }

.direcd-pop-confirm-swal.blog-popup .swal2-html-container {
            padding: 0;
            text-align: left;
        }

.direcd-pop-confirm-swal.blog-popup .swal2-html-container .video-embed {
                position: relative;
                width: 100%;
                overflow: hidden;
                padding-bottom: 56.67%;
            }

.direcd-pop-confirm-swal.blog-popup .swal2-html-container .video-embed iframe {
                    width: 100%;
                    height: 100%;
                    display: block;
                    margin: 0;
                    padding: 0;
                    outline: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                }

.direcd-pop-confirm-swal.blog-popup .swal2-html-container picture {
                width: 100%;
                display: block;
            }

.direcd-pop-confirm-swal.blog-popup .swal2-html-container picture img {
                    width: 100%;
                    height: auto;
                    display: block;
                }

.direcd-pop-confirm-swal.blog-popup{

        @include for-tablet-down {
            .swal2-popup {
                padding: 1rem;
            }

            .swal2-title {
                font-size: 1.125rem;
                margin-bottom: 1rem;
            }
        }
}

.direcd-pop-confirm-swal .medicine-popup {
        margin-left: auto;
        margin-right: auto;
        max-width: 1300px;
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: #F9FAFB;
    }

.direcd-pop-confirm-swal .medicine-popup .rounded-tabs {
            max-height: 24px;
        }

.direcd-pop-confirm-swal .medicine-popup .rounded-tabs .rounded-tabs_item {
                height: 24px;
                line-height: 24px;
                padding-top: 0;
                padding-bottom: 0;
                transition: opacity 0.2s ease;
            }

.direcd-pop-confirm-swal .medicine-popup .rounded-tabs .rounded-tabs_item:hover {
                    opacity: 0.8;
                    cursor: pointer;
                }

.direcd-pop-confirm-swal:has(.medicine-popup) .swal2-actions, .direcd-pop-confirm-swal.has-medicine-popup .swal2-actions {
            justify-content: flex-end;
            gap: 0.75rem;
        }

.direcd-pop-confirm-swal:has(.medicine-popup) .swal2-actions button, .direcd-pop-confirm-swal.has-medicine-popup .swal2-actions button {
                min-width: 160px;
                padding: 0.75rem 2.5rem;
            }

.direcd-pop-confirm-swal.direcd-pop-fullwidth .swal2-popup {
            width: calc(100dvw - 2.5rem);
            min-height: calc(100dvh - 2.5rem);
            display: block !important;
            padding: 2rem 1.5rem;
        }

.direcd-pop-confirm-swal.direcd-pop-fullwidth .swal2-popup .swal2-html-container {
                padding: 0;
            }

.direcd-pop-confirm-swal.direcd-pop-fullwidth .swal2-popup .swal2-close {
                position: relative;
                margin-bottom: -1.875rem;
                z-index: 2;
            }

.footer-buttons {
    background: #ffffff;
    width: 100%;
    padding: 16px 32px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: end;
    gap: 16px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
}

@media screen and (max-width: 767.98px) {
        .footer-buttons.footer-buttons__grid {
            gap: 0px;
        }

            .footer-buttons.footer-buttons__grid > * {
                font-size: 14px;
                padding-left: 10px;
                padding-right: 10px;
            }

                .footer-buttons.footer-buttons__grid > *:not(:first-child) {
                    border-top-left-radius: 0px;
                    border-bottom-left-radius: 0px;
                    border-left: 0px;
                }

                .footer-buttons.footer-buttons__grid > *:not(:last-child) {
                    border-top-right-radius: 0px;
                    border-bottom-right-radius: 0px;
                }

                .footer-buttons.footer-buttons__grid > *#delete-guide {
                    max-width: 60px;
                }
    }

@media screen and (max-width: 1023.98px) {

.footer-buttons {
        padding: 16px;
}

        .footer-buttons > * {
            flex: 1 1 0%;
            text-align: center;
            justify-content: center;
        }
    }

.recipe-block {
    border-bottom: 1px solid #DEE4EC;
    padding-bottom: 16px;
}

.recipe-block:not(:last-child) {
        margin-bottom: 32px;
    }

.recipe-block .recipe-block-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        margin-bottom: 16px;
    }

.recipe-block .recipe-block-bar > * {
        height: 16px;
        display: inline-block;
        border-radius: 4px;
    }

.recipe-block .recipe-block-bar > *[style*="width:0.00"] {
            display: none;
        }

.recipe-block .recipe-block-bar_carb {
        background: #FF961C;
    }

.recipe-block .recipe-block-bar_protein {
        background: #19ACFF;
    }

.recipe-block .recipe-block-bar_oil {
        background: #EB5757;
    }

.recipe-block .recipe-block-macro-info {
        display: flex;
        justify-content: space-between;
    }

.recipe-block .recipe-block-macro-info .total-kcal {
            color: #2E3948;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
        }

.recipe-block .recipe-block-macro-info .other-prop {
            display: flex;
            justify-content: space-between;
        }

.recipe-block .recipe-block-macro-info .other-prop .other-prop-item {
                color: #6C7A8D;
                font-size: 14px;
                font-weight: 400;
                line-height: 28px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

.recipe-block .recipe-block-macro-info .other-prop .other-prop-item:before {
                content: '';
                width: 18px;
                height: 18px;
                float: left;
                border-radius: 30px;
            }

.recipe-block .recipe-block-macro-info .other-prop .other-prop_protein:before {
                background: #19ACFF;
            }

.recipe-block .recipe-block-macro-info .other-prop .other-prop_oil:before {
                background: #EB5757;
            }

.recipe-block .recipe-block-macro-info .other-prop .other-prop_carb:before {
                background: #FF961C;
            }

@media screen and (max-width: 767.98px) {

.recipe-block .recipe-block-macro-info .other-prop{
                flex-direction: column;
                gap: 8px;
                justify-content: stretch !important;
    }
    }

.recipe-block .recipe-block-content .other-prop-item, .recipe-block .recipe-block-micro-info .other-prop-item {
            color: #6C7A8D;
            font-size: 14px;
            font-weight: 400;
            line-height: 28px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

.recipe-block .recipe-block-content .other-prop-item span, .recipe-block .recipe-block-micro-info .other-prop-item span {
            width: 18px;
            height: 18px;
            float: left;
            border-radius: 30px;
            background: #FFFFFF;
        }

.recipe-block .recipe-block-content .other-prop-item span[style="background-color:"], .recipe-block .recipe-block-micro-info .other-prop-item span[style="background-color:"] {
                border: 1px solid #A8B3C2;
            }

.recipe-block .recipe-block-macro-kcal {
        color: #2E3948;
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
    }

.recipe-block-not-contains .new-recipe-options_item{
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgba(240, 243, 246, 1);
    background-color: rgba(240, 243, 246, var(--tw-bg-opacity));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(108, 122, 141, 1);
    color: rgba(108, 122, 141, var(--tw-text-opacity));
}

.block-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(240, 243, 246, 1);
    border-color: rgba(240, 243, 246, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    padding: 1rem;
}

.member-table .medicineInfoTable td .block-item{
    gap: 0.5rem;
}

.block-item:not(.nutrition-popular-item) {
        height: 80px;
    }

.block-item:hover {
        border-color: #DEE4EC;
        box-shadow: 0 1px 4px rgba(41, 39, 39, 0.04);
    }

.block-item:hover .block-item_title>div:first-of-type {
            color: #000000;
        }

.block-item_title {
        color: #2E3948;
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        letter-spacing: 0.6px;
        transition: all .2s ease;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.block-item_membership-status {
        font-size: 13px;
        font-weight: 300;
        line-height: 14px;
        letter-spacing: 0.3px;
        opacity: 0.6;
    }

.block-item_icon {
        display: flex;
        height: 48px;
        width: 48px;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        border-width: 1px;
        border-color: #ddd;
        position: relative;
    }

.block-item_icon img {
            border-radius: 48px;
            overflow: hidden;
        }

.block-item_icon.fill {
            align-items: center;
            justify-content: center;
            border: none;
        }

.block-item_icon.fill img {
                height: 100%;
                width: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
                border-radius: 100%;
            }

.block-item_icon .plan-type-tooltip {
            background: #FFFFFF;
            color: #6C7A8D;
            font-size: 14px;
            line-height: 20px;
            white-space: nowrap;
            padding: 10px 16px;
            border: 1px solid #DEE4EC;
            border-radius: 4px;
            position: absolute;
            top: 100%;
            left: 0px;
            z-index: 2;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all .2s ease-in-out;
        }

.block-item_icon .plan-type-tooltip::before {
                content: '';
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 4px solid #DEE4EC;
                position: absolute;
                left: 16px;
                bottom: 100%;
            }

.block-item_icon--admin {
            border-color: #C4CDDA;
            position: relative;
        }

.block-item_icon--admin::before {
                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M15.75 9.30738H14.3855H13.2769L12.1683 12.75L9.69519 5.25L7.39265 12.75L5.68707 6.08866L4.25777 9.30738H2.25" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
                position: absolute;
                top: -0.5rem;
                left: -0.5rem;
                height: 1.25rem;
                width: 1.25rem;
                border-radius: 9999px;
                --tw-bg-opacity: 1;
                background-color: rgba(46, 57, 72, 1);
                background-color: rgba(46, 57, 72, var(--tw-bg-opacity));
                text-align: center;
            }

.block-item_icon:hover .plan-type-tooltip {
                opacity: 1;
                visibility: visible;
                margin-top: 10px;
            }

.block-item_status {
        position: absolute;
        top: -7px;
        left: -4px;
        display: block;
        height: 20px;
        width: 20px;
        border-radius: 30px;
        border: 2px solid #fff;
        background: url('/assets/img/icon/is-active-member.svg') no-repeat center;
    }

.block-item_props {
        color: #6C7A8D;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

@media screen and (max-width: 767.98px) {

.block-item_props {
            font-size: 12px;
            line-height: 16px;
    }
    }

.block-item.block-item-doctor .block-item_icon {
            border-color: #2DB4FF;
        }

.block-item__comment {
        color: #8B98AA;
        font-size: 12px;
        line-height: 16px;
        display: flex;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
    }

#planListEl .block-item{
    height: auto !important;
}

.error-404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    text-align: center;
    padding-top: 48px;
}

.error-404 h1 {
        color: #0061E6;
        font-size: 32px;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.64px;
    }

@media screen and (max-width: 767.98px) {

.error-404 h1 {
            font-size: 26px;
    }
    }

@media screen and (max-width: 559.98px) {

.error-404 h1 {
            font-size: 22px;
    }
    }

.error-404 .description {
        color: #2E3948;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.error-404 .text {
        color: #6C7A8D;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

.result-not-found{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    border-radius: 0.5rem;
    padding-top: 48px;
    padding-bottom: 48px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

#sort + .ts-wrapper .ts-control.result-not-found {
                min-width: 100%;
                max-width: 100%;
            }

.member-table .medicineInfoTable td .result-not-found{
    gap: 0.5rem;
}

.result-not-found {

    /*&:hover {
        @apply !bg-[#F9FAFB] !text-[#2E3948] !cursor-default;
    }*/
}

.result-not-found__text {
        font-size: 16px;
        color: #2E3948;
        font-weight: 400;
        line-height: 26px;    
        padding: 0 30px;
        text-align: center;
        max-width: 700px;
    }

.search-autocomplete {
    position: absolute;
    width: 100.1%;
    max-height: 280px;
    left: -1px;
    right: 0;
    top: 89%;
    border: 1px solid #0061e6;
    border-top-color: #F0F3F6;
    background: #ffffff;
    border-radius: 0px 0px 8px 8px;
    padding: 14px 53px;
    overflow-y: auto;
    z-index: 9;
}

.search-autocomplete .search-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #2E3948;
        font-size: 16px;
        font-weight: 400;
        border-bottom: 1px solid #ddd;
        line-height: 50px;
        padding: 0;
    }

.search-autocomplete .search-item .search-item_cat {
            color: #8B98AA;
        }

.search-autocomplete .search-item:last-child {
        border: none;
    }

.search-autocomplete .search-item-add {
        border-radius: 8px;
        background: #F0F3F6;
        padding: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
        color: #0061E6;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        cursor: pointer;
    }

.search-autocomplete:has(.result-not-found) {
        padding-left: 14px;
        padding-right: 14px;
    }

.notify-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 70px;
    padding-right: 30px;
}

.notify-list .notify-title {
        border-top: 1px solid #DEE4EC;
        text-align: left;
        background-color: #F0F3F6;
        padding: 8px;
        color: #2E3948;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }

.notify-list .notify-list_item {
        display: flex;
        gap: 16px;
    }

.notify-list .notify-list_item .notify-read {
            min-width: 40px;
            height: 40px;
        }

.notify-list .message {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
    }

.notify-list .time {
        color: #6C7A8D;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-align: left;
    }

@media screen and (max-width: 767.98px) {

.notify-list{
        padding-right: 0px;
        padding-bottom: 90px;
    }
    }

.rounded-tabs {
    border-radius: 30px;
    border: 1px solid #DEE4EC;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.rounded-tabs .rounded-tabs_item {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        padding-left: 16px;
        padding-right: 16px;
        cursor: pointer;
        color: #6C7A8D;
        transition: opacity 0.2s ease;
    }

.rounded-tabs .rounded-tabs_item:hover {
            opacity: 0.8;
        }

.rounded-tabs .rounded-tabs_item.active {
            background-color: #166fe8;
            border-radius: 16px;
            color: #ffffff;
        }

@media screen and (max-width: 767.98px) {
            .rounded-tabs .rounded-tabs .rounded-tabs_item {
                font-size: 11px;
            }

        .rounded-tabs .rounded-tabs_close {
            position: absolute;
            right: 0px;
            bottom: 60%;
        }
    }

/* General Frequency Options Container */

.general-frequency-options {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 42px;
}

/* General Frequency Button Styles */

.general-freq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: auto;
    padding: 0 12px;
    border-radius: 24px;
    border: 1px solid #DEE4EC;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 400;
    color: #6C7A8D;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.general-freq-btn input[type="radio"] {
        display: none;
    }

.general-freq-btn span {
        pointer-events: none;
        line-height: 1;
    }

.general-freq-btn:hover {
        border-color: #0082FF;
        color: #0082FF;
    }

.general-freq-btn.active {
        background-color: #0082FF;
        border-color: #0082FF;
        color: #ffffff;
    }

/* Days Input Container & Button Styles */

.days-input {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 42px;
}

.days-input label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        min-width: auto;
        padding: 0 12px;
        border-radius: 24px;
        border: 1px solid #DEE4EC;
        background-color: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 12px;
        font-weight: 400;
        color: #6C7A8D;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        margin: 0;
    }

.days-input label input[type="checkbox"] {
            display: none;
        }

.days-input label span {
            pointer-events: none;
            line-height: 1;
            margin: 0;
        }

.days-input label:hover {
            border-color: #0082FF;
            color: #0082FF;
        }

.days-input label:has(input:checked) {
            background-color: #0082FF;
            border-color: #0082FF;
            color: #ffffff;
        }

/* Time Buttons Container */

.time-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 42px;
}

/* Time Button Styles */

.time-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: auto;
    padding: 0 12px;
    border-radius: 24px;
    border: 1px solid #DEE4EC;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 400;
    color: #6C7A8D;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.time-btn span {
        pointer-events: none;
        line-height: 1;
    }

.time-btn:hover {
        border-color: #0082FF;
        color: #0082FF;
    }

.time-btn.active {
        background-color: #0082FF;
        border-color: #0082FF;
        color: #ffffff;
    }

.time-btn.whenever-btn {
        border-style: dashed;
    }

.time-btn.whenever-btn.active {
            border-style: solid;
        }

/* Method Buttons Container */

.method-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 42px;
}

/* Method Button Styles */

.method-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: auto;
    padding: 0 12px;
    border-radius: 24px;
    border: 1px solid #DEE4EC;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 400;
    color: #6C7A8D;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.method-btn span {
        pointer-events: none;
        line-height: 1;
    }

.method-btn:hover {
        border-color: #0082FF;
        color: #0082FF;
    }

.method-btn.active {
        background-color: #0082FF;
        border-color: #0082FF;
        color: #ffffff;
    }

/* Dose + Unit Group Styles */

.dose-unit-group {
    display: flex;
    align-items: stretch;
}

.dose-unit-group .dose-input {
        flex: 1;
        min-width: 100px;
    }

.dose-unit-group .dose-input input {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-right: none !important;
        }

.dose-unit-group .unit-select {
        min-width: 90px;
    }

.dose-unit-group .unit-select .ts-wrapper .ts-control {
                border-top-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                min-width: 90px !important;
            }

.dose-unit-group .unit-select select {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

.toggle-button {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
}

.toggle-button.phone-show {
        content: '';
        background: url('../img/icon/mobile-alt.svg') no-repeat left center;
        width: 50px;
    }

.toggle-button input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-button input:checked + .slider {
            background-color: #0061e6;
        }

.toggle-button input:checked + .slider:before {
                transform: translateX(15px);
            }

.toggle-button input :focus + .slider {
            box-shadow: 0 0 1px #0061e6;
        }

.toggle-button .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background-color: #ccc;
        transition: .4s;
    }

.toggle-button .slider.round {
            border-radius: 34px;
        }

.toggle-button .slider.round:before {
                border-radius: 50%;
            }

.toggle-button .slider:before {
            position: absolute;
            content: "";
            height: 8px;
            width: 8px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

.toggle-button.toggle-md {
        width: 40px;
        height: 24px;
    }

.toggle-button.toggle-md .slider {
            width: 40px;
        }

.toggle-button.toggle-md .slider::before {
                width: 16px;
                height: 16px;
            }

.table {
    margin-top: 32px;
    width: 100%;
    display: block;
}

.table-main {
        overflow-x: auto;
    }

.table__head {
        background: #F0F3F6;
    }

.table__head > div {
            font-weight: 400;
        }

.table__body-col > div {
                font-weight: 300;
            }

.table__head,
    .table__body-col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 1200px;
    }

.table__head > div, .table__body-col > div {
            padding: 16px;
            text-align: center;
            font-size: 16px;
            line-height: 26px;
        }

.table__head > div:first-child, .table__body-col > div:first-child {
                text-align: left;
            }

.table__head > div:last-child, .table__body-col > div:last-child {
                text-align: right;
            }

.table.payment .table__footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 2px solid #6C7A8D;
            border-bottom: 1px solid #DEE4EC;
        }

.table.payment .table__footer > div {
                padding: 16px;
                font-size: 16px;
                line-height: 26px;
                font-weight: 400;
            }

.btn{
    display: flex;
    height: 48px;
    align-items: center;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(139, 152, 170, 1);
    border-color: rgba(139, 152, 170, var(--tw-border-opacity));
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.member-table .medicineInfoTable td .btn{
    gap: 0.5rem;
}

.btn.btn-disabled {
        background: #e7e7e7 !important;
        color: #000 !important;
        border-color: #000 !important;
    }

.btn.btn-primary {
        color: #0061E6;
        min-width: 120px;
        justify-content: center;
    }

.btn.btn-primary.filled {
            background: #0061E6;
            color: white;
            border-color: #0061E6;
        }

.btn.btn-primary.filled:not(.no-hover):hover {
                background-color: #004AAF;
                border-color: #004AAF;
            }

.btn.btn-primary:not(.filled):not(.no-hover):hover {
            border-color: #0061E6;
            color: #0061E6;
            box-shadow: inset 0 0 0 1px #0061E6;
            background-color: transparent !important;
        }

.btn.btn-danger {
        color: #FF001F;
        border-color: #FF001F;
    }

.btn.btn-danger.filled {
            background: #FF001F;
            color: white;
        }

.btn.btn-danger.filled:not(.no-hover):hover {
                background-color: #c70c23;
                border-color: #c70c23;
            }

.btn.btn-danger:not(.filled):not(.no-hover):hover {
            background-color: #FF001F;
            color: #ffffff;
        }

.btn svg {
        margin-right: 10px;
    }

.btn-loading {
        overflow: hidden;
        color: transparent !important;
        position: relative;
        pointer-events: none !important;
    }

.btn-loading * {
            opacity: 0;
            visibility: hidden;
        }

.btn-loading::before {
            content: '';
            width: 32px;
            height: 32px;
            animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
            border-width: .25em;
            border-style: solid;
            border-radius: 100%;
            border-color: #ffffff rgba(0,0,0,0) #ffffff rgba(0,0,0,0);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -16px;
            margin-left: -16px;
        }

.item-add-remove-btn {
    color: #0061E6;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 55px;
    padding-left: 25px;
    cursor: pointer;
    text-wrap-mode: nowrap;
}

.item-add-remove-btn.remove {
        background: url('/assets/img/icon/rounded-minus.svg') no-repeat left center;
    }

.item-add-remove-btn.trash {
        background: url('/assets/img/icon/trash.svg') no-repeat left center;
    }

.item-add-remove-btn.add,
    .item-add-remove-btn.add-medisupp {
        background: url('/assets/img/icon/rounded-plus.svg') no-repeat left center;
        order: 1;
    }

.item-add-remove-btn.edit {
        background: url('/assets/img/icon/edit-pen-blue.svg') no-repeat left center;
    }

.item-add-remove-btn.cancel {
        background: url('/assets/img/icon/close.svg') no-repeat left center;
    }

.item-add-remove-btn.medisupp-template {
        background: url('/assets/img/icon/medicine-supplement.svg') no-repeat left center;
        padding-left: 30px;
    }

input{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

input:focus{
    outline: 2px solid transparent;
    outline-offset: 2px;
}

input[readonly] {
        background-color: #e7e7e7;
        border-color: #8B98AA;
    }

input[readonly]:focus {
            border-color: #8B98AA;
            box-shadow: none;
        }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:-webkit-autofill {
    background-color: white !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #2E3948 !important;
    -webkit-transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
    transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
}

label {
    cursor: pointer;
    font-size: 14px;
    color: black;
    font-weight: 400;
}

label [type=checkbox] {
        margin-right: 8px;
    }

label{

    @add-mixin for-tablet-down {

    }
}

.toggle-label{
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(51, 51, 51, 1);
    color: rgba(51, 51, 51, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .toggle-label{
    gap: 0.5rem;
}

[type=checkbox] {
    border-radius: 4px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

[type=checkbox]:hover:not(:disabled) {
    border-color: #0061E6;
    cursor: pointer;
}

[type=checkbox]:checked:hover:not(:disabled) {
    border-color: transparent;
    background-color: #004AAF;
    cursor: pointer;
}

[type=checkbox]:focus,
[type=checkbox]:checked:focus,
[type=checkbox]:indeterminate,
[type=radio]:focus,
[type=radio]:checked:focus,
[type=radio]:hover,
[type=radio]:checked:hover {
    outline: 0px;
    outline-color: transparent;
    box-shadow: none;
    cursor: pointer;
}

[multiple], [type=date],
[type=datetime-local],
[type=email], [type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
input:where(:not([type])),
select,
textarea{
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #8B98AA !important;
    min-height: 48px !important;
    transition: all 0.2s ease;
    color: #2E3948;
    background-color: #fff;
}

[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:where(:not([type])):focus, select:focus, textarea:focus {
        outline: none;
        border-color: #0061E6 !important;
        box-shadow: 0 0 0 3px rgba(0, 97, 230, 0.1);
    }

[multiple]::-moz-placeholder, [type=date]::-moz-placeholder, [type=datetime-local]::-moz-placeholder, [type=email]::-moz-placeholder, [type=month]::-moz-placeholder, [type=number]::-moz-placeholder, [type=password]::-moz-placeholder, [type=search]::-moz-placeholder, [type=tel]::-moz-placeholder, [type=text]::-moz-placeholder, [type=time]::-moz-placeholder, [type=url]::-moz-placeholder, [type=week]::-moz-placeholder, input:where(:not([type]))::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
        color: #8B98AA;
    }

[multiple]::placeholder, [type=date]::placeholder, [type=datetime-local]::placeholder, [type=email]::placeholder, [type=month]::placeholder, [type=number]::placeholder, [type=password]::placeholder, [type=search]::placeholder, [type=tel]::placeholder, [type=text]::placeholder, [type=time]::placeholder, [type=url]::placeholder, [type=week]::placeholder, input:where(:not([type]))::placeholder, select::placeholder, textarea::placeholder {
        color: #8B98AA;
    }

[multiple]:disabled, [type=date]:disabled, [type=datetime-local]:disabled, [type=email]:disabled, [type=month]:disabled, [type=number]:disabled, [type=password]:disabled, [type=search]:disabled, [type=tel]:disabled, [type=text]:disabled, [type=time]:disabled, [type=url]:disabled, [type=week]:disabled, input:where(:not([type])):disabled, select:disabled, textarea:disabled {
        background-color: #F0F3F6;
        cursor: not-allowed;
        opacity: 0.6;
    }

.phone-wrapper {
    display: flex;
    min-height: 48px;
    height: 100%;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #8B98AA;
    width: 100% !important;
    color: #2E3948;
    outline: none !important;
}

.phone-wrapper .ts-control {
        max-width: 70px !important;
        min-width: 100px!important;
        border: 0 !important;
        border-right: 1px solid #8b98aa !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

.phone-wrapper .ts-control:after {
            display: none !important;
        }

.phone-wrapper .country-select {
        border: 0 !important;
        padding-right: 0 !important;
        width: 100px;    
    }

.phone-wrapper .phone-number-input {
        border: 0 !important;
        padding-left: 15px !important;
    }

.phone-wrapper .phone-number-input:focus, .phone-wrapper .phone-number-input:active {
            border: 0 !important;
            box-shadow: none;
        }

.iti {
    width: 100%;
}

.input-group.icon {
        position: relative;
    }

.input-group.icon svg, .input-group.icon img {
            position: absolute;
            left: 16px;
            top: 15px;
        }

.input-group.icon input {
            text-indent: 34px;
        }

.form-group:has(.ts-wrapper) {
        position: relative;
    }

.form-group label {
        color: #2E3948;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        display: block;
    }

.form-group.has-danger input, .form-group.has-danger textarea, .form-group.has-danger select{
    border-width: 2px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgba(244, 63, 94, 1) !important;
    border-color: rgba(244, 63, 94, var(--tw-border-opacity)) !important;
            border-color: #EB5757 !important;
}

.form-group.has-danger input:focus, .form-group.has-danger textarea:focus, .form-group.has-danger select:focus {
                border-color: #EB5757 !important;
                box-shadow: 0 0 0 3px rgba(235, 87, 87, 0.1);
            }

.form-group.has-danger .text-help,
        .form-group.has-danger .pristine-error{
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(244, 63, 94, 1);
    color: rgba(244, 63, 94, var(--tw-text-opacity));
            color: #EB5757;
            font-size: 0.75rem;
            line-height: 1.5;
            margin-top: 0.25rem;
            display: block;
}

.form-group.has-danger .ts-control {
            border: 2px solid #f43f5e;
        }

.form-group .iti__country-container {
        max-height: 48px;
    }

.ts-wrapper {
    padding: 0 !important;
}

.ts-wrapper .ts-control,
    .ts-wrapper select {
        display: flex;
        min-height: 3rem;
        height: 100%;
        align-items: center;
        border-radius: 0.5rem;
        border: 1px solid #8B98AA;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: 400;
        width: 100% !important;
        min-width: 9.375rem;
        color: #2E3948;
        background-color: #fff;
        outline: none !important;
        transition: all 0.2s ease;
    }

.ts-wrapper .ts-control:focus, .ts-wrapper select:focus {
            outline: none;
            border-color: #0061E6 !important;
            box-shadow: 0 0 0 3px rgba(0, 97, 230, 0.1);
        }

.ts-wrapper .ts-control:after, .ts-wrapper select:after {
            content: '';
            background: url(../img/icon/chevron_down.svg) no-repeat right center;
            width: 1.5rem;
            height: 1.5rem;
            position: absolute;
            z-index: 999;
            right: 0.3125rem;
            transition: all 0.2s ease;
        }

.ts-wrapper .ts-control .item, .ts-wrapper select .item {
            color: #2E3948;
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.5;
        }

.ts-wrapper .ts-control .item.default-option, .ts-wrapper select .item.default-option {
                color: #8B98AA !important;
                font-size: 0.8125rem !important;
            }

.ts-wrapper .ts-control.ts-plan-template, .ts-wrapper select.ts-plan-template {
            padding-right: 1.875rem !important;
        }

.ts-wrapper .ts-control.ts-plan-template > div, .ts-wrapper select.ts-plan-template > div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.ts-wrapper.dropdown-active .ts-control:after, .ts-wrapper.dropdown-active select:after {
                transform: rotate(180deg)
            }

.ts-wrapper.disabled .ts-control {
            background-color: #F0F3F6;
            cursor: not-allowed;
            opacity: 0.6;
        }

.ts-wrapper .ts-dropdown {
        border-color: #8B98AA;
        margin-top: -0.4375rem;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        overflow: hidden;
    }

.ts-wrapper .ts-dropdown-content {
            display: flex;
            flex-wrap: wrap;
        }

.ts-wrapper .ts-dropdown-content .option {
                padding-left: 1rem;
                order: 1;
                width: 100%;
                white-space: normal;
            }

.ts-wrapper .ts-dropdown-content .option[data-value="0"], .ts-wrapper .ts-dropdown-content .option[data-value=""] {
                    order: 0 !important;
                }

#sort + .ts-wrapper .ts-control {
            min-width: 11.25rem;
            max-width: 11.25rem;
        }

#sort + .ts-wrapper .ts-control .item {
                font-size: 1rem;
            }

#sort + .ts-wrapper .ts-control.w-full {
                min-width: 100%;
                max-width: 100%;
            }

#sort + .ts-wrapper .ts-dropdown .option {
                font-size: 1rem;
                line-height: 1.875rem;
            }

#brand-logo-title{
    margin-left: 1.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding-left: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

#brand-logo-title:not(:empty) {
        border-left: 1px solid #3381EB;
    }

.mobile-menu-btn{
    margin-left: 1rem;
    display: flex;
    height: 2rem;
    width: 2.5rem;
    align-items: center;
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(96, 165, 250, 1);
    border-color: rgba(96, 165, 250, var(--tw-border-opacity));
    padding-left: 1rem;
}

.member-table .medicineInfoTable td .mobile-menu-btn{
    gap: 0.5rem;
}

@media (min-width: 1024px){

    .mobile-menu-btn{
        display: none !important;
    }
}

.mobile-menu-btn span{
    position: relative;
    display: block;
    height: 0.125rem;
    width: 1rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.mobile-menu-btn span::before, .mobile-menu-btn span::after{
    position: absolute;
    height: 0.125rem;
    width: 100%;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

#sort + .ts-wrapper .ts-control.mobile-menu-btn span::before,#sort + .ts-wrapper .ts-control .mobile-menu-btn span::after {
                min-width: 100%;
                max-width: 100%;
            }

.mobile-menu-btn span::before, .mobile-menu-btn span::after {
            content: "";
        }

.mobile-menu-btn span::before{
    top: -0.375rem;
}

.mobile-menu-btn span::after{
    bottom: -0.375rem;
}

#search-field{
    display: block;
    height: 2.75rem;
    width: 100%;
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

#sort + .ts-wrapper .ts-control#search-field {
                min-width: 100%;
                max-width: 100%;
            }

#search-field::-moz-placeholder{
    color: hsla(0, 0%, 100%, 0.8);
}

#search-field::placeholder{
    color: hsla(0, 0%, 100%, 0.8);
}

#search-field {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

#search-field::-webkit-search-decoration,
    #search-field::-webkit-search-cancel-button,
    #search-field::-webkit-search-results-button,
    #search-field::-webkit-search-results-decoration {
        -webkit-appearance:none;
        appearance:none;
    }

.header-quick-links{
    display: flex;
    align-items: center;
}

.member-table .medicineInfoTable td .header-quick-links{
    gap: 0.5rem;
}

@media (min-width: 1024px){

    .header-quick-links > :not([hidden]) ~ :not([hidden]){
        --tw-space-x-reverse: 0;
        margin-right: calc(0.75rem * 0);
        margin-right: calc(0.75rem * var(--tw-space-x-reverse));
        margin-left: calc(0.75rem * (1 - 0));
        margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
        margin-left: calc(0.75rem * calc(1 - 0));
        margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
    }
}

.header-quick-links .btn-link{
    border-radius: 9999px;
    padding: 0.375rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
        transition: background-color 0.2s ease;
        outline: none;
        border: none;
}

.header-quick-links .btn-link:focus,
        .header-quick-links .btn-link:focus-visible,
        .header-quick-links .btn-link:active {
            outline: none;
            box-shadow: none;
        }

.header-quick-links .btn-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

.header-quick-links .btn-link:active {
            background-color: rgba(255, 255, 255, 0.15);
        }

@media screen and (max-width:1023.98px) {
    .hamburger-menu{
        display: none;
    }

.medisupp-backdrop.hamburger-menu {
        display: none;
    }


    .draft-selfnote.hamburger-menu{
        display: none !important;
    }

    .header-quick-links{
        gap: 0.5rem;
    }

        .header-quick-links > *:not(.logged-user-bar){
        display: none;
    }

.medisupp-backdrop.header-quick-links > *:not(.logged-user-bar) {
        display: none;
    }


    .draft-selfnote.header-quick-links > *:not(.logged-user-bar){
        display: none !important;
    }

    .logged-user-bar{
        order: -1;
        margin-left: 0px !important;
    }

        .logged-user-bar img{
        height: 2rem !important;
        width: 2rem !important;
    }

        .logged-user-bar .user-fullname{
        display: none;
    }

.medisupp-backdrop.logged-user-bar .user-fullname {
        display: none;
    }


    .draft-selfnote.logged-user-bar .user-fullname{
        display: none !important;
    }

        .logged-user-bar .notify-count{
        position: absolute;
        top: 0px;
        left: -0.375rem;
        z-index: 2;
        height: 1rem;
        width: 1rem;
        border-radius: 9999px;
        --tw-bg-opacity: 1;
        background-color: rgba(250, 204, 21, 1);
        background-color: rgba(250, 204, 21, var(--tw-bg-opacity));
        text-align: center;
        font-size: 0.75rem;
        line-height: 1rem;
        --tw-text-opacity: 1;
        color: rgba(0, 97, 230, 1);
        color: rgba(0, 97, 230, var(--tw-text-opacity));
    }

    .hamburger-menu-nav{
        margin-top: 1rem;
        display: none;
    }

.medisupp-backdrop.hamburger-menu-nav {
        display: none;
    }


    .draft-selfnote.hamburger-menu-nav{
        display: none !important;
    }

        .hamburger-menu-nav nav{
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

.member-table .medicineInfoTable td .hamburger-menu-nav nav{
        gap: 0.5rem;
    }

            .hamburger-menu-nav nav a{
        height: auto;
        width: 100%;
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-text-opacity: 1;
        color: rgba(0, 97, 230, 1);
        color: rgba(0, 97, 230, var(--tw-text-opacity));
    }

#sort + .ts-wrapper .ts-control.hamburger-menu-nav nav a {
                min-width: 100%;
                max-width: 100%;
            }

            .hamburger-menu-nav nav a {
                border-radius: 50px;
                padding-top: 15px;
                padding-bottom: 15px;
                padding-left: 16px;
                padding-right: 24px;
            }

                .hamburger-menu-nav nav a::after {
                    content: attr(data-title);
                    margin-left: 16px !important;
                    display: block;
                }

                .hamburger-menu-nav nav a img {
                    margin-left: 0px;
                }

                .hamburger-menu-nav nav a.active, .hamburger-menu-nav nav a:hover {
                    background-color: #ffffff;
                    color: #0061E6;
                    width: 100% !important;
                }

                    .hamburger-menu-nav nav a.active img, .hamburger-menu-nav nav a:hover img {
                        filter: none;
                    }

    body:has(.open-menu) {
        overflow: hidden !important;
    }
            .open-menu .mobile-menu-btn span {
                background-color: transparent;
            }

                .open-menu .mobile-menu-btn span::before {
                    transform: rotate(45deg);
                    top: 0px;
                }

                .open-menu .mobile-menu-btn span::after {
                    transform: rotate(-45deg);
                    bottom: 0px;
                }
            .open-menu .header-quick-links > *:not(.logged-user-bar){
        display: block;
    }

        .open-menu .hamburger-menu {
            background-color: #0061E6;
            width: 100vw;
            height: calc(100vh - 64px);
            display: block;
            padding: 16px;
            overflow-x: hidden;
            overflow-y: auto;
            overflow: hidden auto;
            position: fixed;
            top: 56px;
            left: 0px;
            z-index: 9999;
        }

            .open-menu .hamburger-menu .hamburger-menu-nav {
                display: block;
            }
}

.menu-item {
    display: flex;
    height: 56px;
    width: 56px;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid #2563eb;
    padding: 8px;
    transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-right: 20px;
    transform-origin: left center;
    overflow: hidden;
}

.menu-item[disabled],
    .menu-item[disabled]:hover {
        background: #d9d9d9 !important;
        border-color: #d9d9d9 !important;
        pointer-events: none;
        box-shadow: none !important;
    }

.menu-item[disabled] img, .menu-item[disabled]:hover img {
            filter: invert(0%) sepia(100%) saturate(7404%) hue-rotate(233deg) brightness(87%) contrast(94%);
        }

.menu-item img {
        margin-left: 7px;
        height: 24px;
        width: 24px;
        flex-shrink: 0;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

.menu-item::after {
        content: '';
        display: inline-block;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
        white-space: nowrap;
    }

.menu-item.active,
    .menu-item:hover {
        background-color: #0061E6;
        box-shadow: 0 2px 8px rgba(0, 97, 230, 0.25);
    }

.menu-item.active img, .menu-item:hover img {
            filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(329deg) brightness(107%) contrast(101%);
            color: #ffffff;
            transform: scale(1.05);
        }

.menu-item:not([disabled]):hover {
    width: -moz-min-content;
    width: min-content;
}

.menu-item:not([disabled]):hover::after {
        content: attr(data-title);
        max-width: 200px;
        opacity: 1;
        margin-left: 1.25rem;
        white-space: nowrap;
        padding-right: 30px;
    }

/* Page blur effect on menu hover */

body::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease, opacity 0.15s ease;
}

body:has(.dashboard-menu .menu-item:hover)::after {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 1;
}

.alert-btn {
    align-items: center;
    position: relative;
    display: none;
}

.medisupp-backdrop.alert-btn {
        display: none;
    }


    .draft-selfnote.alert-btn{
    display: none !important;
}

@media (min-width: 1024px){

    .alert-btn{
        display: flex;
    }
}

.alert-btn img {
        width: 24px;
        height: 24px;
        display: inline-block;
    }

.alert-btn .alert-count {
        min-width: 16px;
        padding: 0 2px;
        height: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        display: flex;
        border-radius: 16px;
        background: #FFD600;
        color: #0061E6;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        position: absolute;
        top: 0px;
        right: -2px;
    }

.notify-modal #swal2-html-container {
        --swal-modal-gutter: 110px;
        height: calc( 100vh - 110px);
        height: calc( 100vh - var(--swal-modal-gutter));
        overflow: hidden;
    }

@media screen and (min-width:1024px) {

.notify-modal #swal2-html-container {
            --swal-modal-gutter: 148px
    }
        }

@media screen and (max-width: 767.98px) {

.notify-modal #swal2-html-container{
            margin: 16px 16px 0px 16px;
    }
    }

.notify-modal #swal2-html-container:before {
        content: '';
        width: 20px;
        height: 20px;
        background: #ffffff;
        position: absolute;
        top: -10px;
        border-radius: 30px;
        right: 77px;
    }

@media screen and (min-width:1024px) {

.notify-modal #swal2-html-container:before {
            right: 45px
    }
        }

.notify-modal .swal2-close {
        display: none !important;
    }

.notify-modal .modal-top {
        position: relative;
        margin-bottom: 32px;
    }

.notify-modal .modal-top .title {
            font-size: 24px;
            font-weight: 500;
            line-height: normal;
        }

@media screen and (max-width: 767.98px) {

.notify-modal .modal-top{
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 12px;
            position: relative;
            margin-bottom: 24px;
    }
    }

.settings .settings-item {
        border-radius: 8px;
        background: #F9FAFB;
        padding: 24px;
        margin-top: 32px;
    }

.settings .settings-item .settings-item_title {
            font-size: 16px;
            font-weight: 600;
            line-height: 26px;
            margin-bottom: 32px;
            color: #0061E6;
        }

.auth-page {
    background: #fff center center no-repeat;
    background-size: cover;
    width: 100vw;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.auth-page.login-page,
    .auth-page.forgotpassword-page,
    .auth-page.reset-password-page,
    .auth-page.confirm-email-page {
        background-image: url('/assets/img/banner/login-page.jpg');
    }

.auth-page h1 {
        font-size: 2rem;
        line-height: 1.5;
        margin-bottom: 2rem;
    }

@media screen and (max-width: 767.98px) {

.auth-page h1 {
            font-size: 1.625rem;
    }
    }

@media screen and (max-width: 559.98px) {

.auth-page h1 {
            font-size: 1.375rem;
    }
    }

.auth-page h1 img {
            max-height: 5.625rem;
            text-align: left;
            display: flex;
            justify-content: start;
            width: auto;
        }

.auth-page .auth-form-wrapper{
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

@media screen and (max-width: 1023.98px) {

.auth-page .auth-form-wrapper{
                --tw-bg-opacity: .9;
                -webkit-backdrop-filter: blur(0.3125rem);
                        backdrop-filter: blur(0.3125rem);
                padding: 2rem;
                border-radius: 3rem;
                border: 1px solid #F0F3F6;
    }
    }

.auth-page .auth-form-title{
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
            font-size: 2rem;
            line-height: 1.5;
            letter-spacing: -0.02rem;
            margin-bottom: 2rem;
}

@media screen and (max-width: 1023.98px) {

.auth-page .auth-form-title{
                font-size: 1.75rem;
                line-height: 1.5;
                margin-bottom: 1rem;
    }
    }

.auth-page .forgotpassword {
        color: #0061E6;
        font-size: 0.875rem;
        line-height: 1.5;
        -webkit-text-decoration: none;
        text-decoration: none;
        transition: color 0.2s ease;
    }

.auth-page .forgotpassword:hover {
            color: #0052CC;
            -webkit-text-decoration: underline;
            text-decoration: underline;
        }

.auth-page .timer-text {
        color: #2E3948;
        font-size: 0.875rem;
        line-height: 1.5;
    }

.auth-page .timeout-text {
        color: #EB5757;
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: 500;
    }

.register {
    background-image: url('/assets/img/banner/login-page.jpg');
}

.register .register-success {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 24px;
        color: #4B5869;
    }

.register .register-success > *{
    margin: 0px !important;
}

.register .register-success p, .register .register-success strong{
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.dashboard .blocks #announcement {
            background: #FFF8F6;
        }

.dashboard .blocks #announcement .blocks-content-title {
                color: #FF5722;
                background: url(/assets/img/icon/dashboard-announcement-title.svg) no-repeat right center;
            }

.dashboard .blocks #announcement .swiper-slide {
                padding-left: 24px;
                position: relative;
            }

.dashboard .blocks #announcement .swiper-slide:after {
                    content: '';
                    width: 14px;
                    height: 10px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: #FF5722;
                    -webkit-mask: url(/assets/img/icon/dashboard-blocks-item.svg) no-repeat;
                            mask: url(/assets/img/icon/dashboard-blocks-item.svg) no-repeat;
                    mask-size: contain;
                    -webkit-mask: url(/assets/img/icon/dashboard-blocks-item.svg) no-repeat;
                    -webkit-mask-size: contain;
                }

.dashboard .blocks #announcement .modal-btn {
                position: absolute;
                right: 24px;
                bottom: 24px;
                z-index: 9;
            }

.dashboard .blocks #private-days {
            background: #F3FFF4;
        }

.dashboard .blocks #private-days .blocks-content-title {
                color: #4CAF50;
                background: url(/assets/img/icon/dashboard-privateday-title.svg) no-repeat right center;
            }

.dashboard .blocks #private-days .blocks-content_item:after {
                background: url(/assets/img/icon/dashboard-blocks-item.svg) no-repeat;
                filter: invert(58%) sepia(68%) saturate(390%) hue-rotate(73deg) brightness(89%) contrast(90%);
            }

.dashboard .blocks #birth-days {
            background: #FDF3FF;
        }

.dashboard .blocks #birth-days .blocks-content-title {
                color: #9C27B0;
                background: url(/assets/img/icon/dashboard-birthday-title.svg) no-repeat right center;
            }

.dashboard .blocks #birth-days .blocks-content_item:after {
                background: url(/assets/img/icon/dashboard-blocks-item.svg) no-repeat;
            }

.dashboard .blocks .blocks-content {
            width: 100%;
            padding: 24px;
            margin-bottom: 24px;
            border-radius: 8px;
            position: relative;
        }

.dashboard .blocks .blocks-content .blocks-content-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 18px;
                font-weight: 400;
            }

.dashboard .blocks .blocks-content .blocks-content_item {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                margin-bottom: 8px;
                padding-left: 24px;
                position: relative;
            }

.dashboard .blocks .blocks-content .blocks-content_item:nth-child(n+4) {
                    display: none;
                }

.dashboard .blocks .blocks-content .blocks-content_item:after {
                content: '';
                width: 14px;
                height: 10px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

.dashboard .blocks .swiper.mySwiper {
            text-align: left;
            margin-right: 0;
            padding-bottom: 40px;
        }

.dashboard .blocks .swiper.mySwiper .swiper-slide {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                height: -moz-fit-content;
                height: fit-content;
                cursor: pointer;
            }

.dashboard .blocks .swiper.mySwiper .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
                width: auto;
                bottom: -5px;
            }

.dashboard .blocks .swiper.mySwiper .swiper-pagination-bullet-active {
                background: #FF5722;
            }

.dashboard .blocks .modal-btn {
            font-size: 14px;
            font-weight: 600;
            line-height: 24px;
            color: #4B5869;
            width: 100%;
            text-align: right;
            cursor: pointer;
            transition: color 0.2s ease;
        }

.dashboard .blocks .modal-btn:hover {
                color: #2E3948;
            }

.dashboard .blocks .btn {
            padding-left: 26px;
            color: #0061E6;
        }

.dashboard .blocks .write-onwall {
            background: url("/assets/img/icon/edit-pen-blue.svg") no-repeat left center;
        }

.dashboard .blocks .write-message {
            background: url("/assets/img/icon/menu-message.svg") no-repeat left center;
        }

@media screen and (max-width: 991px) {
        .dashboard .dashboard-title {
            margin-bottom: 0 !important;
        }

        .dashboard .tabs {
            order: 1;
        }

        .dashboard .blocks {
            order: 0;
            margin-bottom: 16px;
        }

            .dashboard .blocks .blocks-content-wrapper {
                display: flex;
                gap: 8px;
            }

            .dashboard .blocks .blocks-content {
                padding: 16px;
                margin: 0px;
                display: flex;
                justify-content: center;
            }

                .dashboard .blocks .blocks-content .blocks-content-title {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                    padding-top: 30px;
                    background-position: top center !important;
                    justify-content: center;
                    text-align: center;
                }
    }

@media screen and (max-width: 767.98px) {
        .dashboard .blocks {
            order: 0;
            margin-bottom: 0;
        }

            .dashboard .blocks .blocks-content-wrapper {
                display: flex;
                gap: 8px;
            }

            .dashboard .blocks .blocks-content {
                padding: 16px;
                margin: 0px;
            }

                .dashboard .blocks .blocks-content .blocks-content-title {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                    padding-top: 30px;
                    background-position: top center !important;
                    justify-content: center;
                    text-align: center;
                }
    }

.block-modal .modal-list {
        gap: 0;
    }

.block-modal .modal-list .notify-list_item {
            padding: 16px 0;
        }

.block-modal .modal-list .notify-list_item:not(:last-child) {
                border-bottom: 1px solid #dce2e9;
            }

.block-modal .modal-list .notify-list_item:last-child {
                margin-bottom:16px;
            }

.block-modal .modal-list .notify-list_item .notify-read {
                border-radius: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #C4CDDA;
            }

.block-modal .modal-list .notify-list_item .btn {
                padding-left: 26px;
                color: #0061E6;
            }

.block-modal .modal-list .notify-list_item .write-onwall {
                background: url("/assets/img/icon/edit-pen-blue.svg") no-repeat left center;
            }

.block-modal .modal-list .notify-list_item .write-message {
                background: url("/assets/img/icon/menu-message.svg") no-repeat left center;
            }

.dashboard.alarm-archive-page .data-content-item_data [type="checkbox"] {
                        display: none;
                    }

.dashboard .loader-circle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(165,165,165,0.25098);
        align-items: center;
        justify-content: center;
    }

.dashboard-title {
        color: #2E3948;
        font-size: 32px;
        font-weight: 400;
        line-height: 100%;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
    }

.dashboard-title .dashboard-greeting {
            font-size: 20px;
            font-weight: 400;
            line-height: 28px;
            margin-bottom: 4px;
        }

.dashboard-title .dashboard-doctor-name {
            font-size: 32px;
            font-weight: 400;
            line-height: 100%;
        }

.dashboard-description {
        color: #6B7280;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 24px;
    }

.dashboard .category-lists-slider {
        position: relative;
        margin-bottom: 16px;
    }

.dashboard .category-lists-slider #category-slider {
            display: flex;
            align-items: center;
            gap: 6px;
        }

.dashboard .category-lists-slider #category-slider .category-button {
                border: 1px solid #ededed;
                padding: 16px 8px;
                display: inline-block;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                font-size: 13px;
                letter-spacing: 0.5px;
                font-weight: 300;
                line-height: 11px;
                color: #2563eb;
                text-align: center;
                border-radius: 8px;
                position: relative;
                width: 100%;
                white-space: nowrap;
                transition: all .2s ease;
            }

.dashboard .category-lists-slider #category-slider .category-button:after {
                    content: attr(data-count);
                    color: #4B5869;
                    background: #ededed;
                    padding: 6px;
                    margin-left: 0;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 8px;
                    max-width: 45px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    position: absolute;
                    top: -11px;
                    left: 8px;
                    border: 1px solid #ededed;
                    min-width: 16px;
                    transition: all .2s ease;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                }

.dashboard .category-lists-slider #category-slider .category-button:hover {
                    background: #E6F2FF;
                    color: #0061E6;
                }

.dashboard .category-lists-slider #category-slider .category-button.active {
                    background: #0061E6;
                    color: #ffffff;
                }

.dashboard .category-lists-slider #category-slider .category-button.active:after {
                        background: #ffffff;
                        border-color: #0061e6;
                        color: #4B5869;
                    }

.dashboard .category-lists-slider #category-slider .category-button.active:hover {
                        background: #0052CC;
                        color: #ffffff;
                    }

.dashboard .category-lists-slider #category-slider .category-button.active:hover:after {
                            background: #ffffff;
                            border-color: #0052CC;
                            color: #4B5869;
                        }

.dashboard .category-lists-slider #category-slider .category-button.passive:after {
                        display: none;
                    }

.dashboard .content-wrapper_filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        border-radius: 8px;
        background: #F9FAFB;
    }

.dashboard .content-wrapper_filter .btn {
            padding: 13px 16px;
            height: 36px;
            font-size: 14px;
        }

.dashboard .content-wrapper_filter .btn.selected-archive {
                background: #0061E6;
                color: #ffffff;
                border: 0;
            }

.dashboard .content-wrapper_filter .btn.selected-archive:hover:not(.btn-disabled) {
                    background: #0052CC;
                }

.dashboard .content-wrapper_filter .btn.selected-archive.btn-disabled {
                    background: #E5E7EB;
                    color: #9CA3AF;
                    cursor: not-allowed;
                }

.dashboard .content-wrapper_filter .input-group.icon svg {
            top: 6px;
            left: 8px;
        }

.dashboard .content-wrapper_filter #tab-search {
            padding: 14px 8px !important;
            height: 36px !important;
            min-height: 36px !important;
            border-color: #DEE4EC !important;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

.dashboard .data-content {
        display: none;
        position: relative;
    }

.dashboard .data-content-mobile-wrapper {
            max-height: calc(100vh - 350px);
            overflow: auto;
            margin-top: 1rem;
            display: flex;
            flex-wrap: wrap;
        }

.dashboard .data-content.active {
            display: block;
        }

.dashboard .data-content .btn-group .btn.selected-archive {
                background: #0061E6;
                color: #ffffff;
                border: 0;
            }

.dashboard .data-content .btn-group .btn.selected-archive:hover:not(.btn-disabled) {
                    background: #0052CC;
                }

.dashboard .data-content .btn-group .btn.selected-archive.btn-disabled {
                    background: #E5E7EB;
                    color: #9CA3AF;
                    cursor: not-allowed;
                }

.dashboard .data-content-item {
            padding: 0 6px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.dashboard .data-content-item_data {
                display: flex;
                justify-content: space-between;
                width: 100%;
                color: #2E3948;
                font-weight: 400;
                line-height: 20px;
                gap: 16px;
                border: 1px solid #F0F3F6;
                border-radius: 8px;
                padding: 12px 16px;
                transition: all 0.1s ease;
                cursor: pointer;
            }

.dashboard .data-content-item_data:hover {
                    border-color: #d0def1;
                    background-color: #F0F7FF;
                }

.dashboard .data-content-item_data > * {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 13px;
                    display: block;
                    color: #4B5869;
                    font-weight: 300;
                }

.dashboard .data-content-item_data label {
                    color: #2E3948;
                }

.dashboard .data-content-item_data-title {
                    font-size: 16px;
                    line-height: 27px;
                    font-weight: 400;
                }

.dashboard .data-content-item_data .alert img {
                    filter: invert(50%) sepia(15%) saturate(511%) hue-rotate(175deg) brightness(92%) contrast(89%);
                    float: left;
                }

.dashboard .data-content-item_data .condition:before {
                        content: '';
                        width: 14px;
                        height: 14px;
                        float: left;
                        border: 2px solid;
                        border-radius: 30px;
                        margin-top: 3px;
                        margin-right: 10px;
                        margin-left: 2px;
                    }

.dashboard .data-content-item_data .condition.low:before {
                        border-color: #00AC64;
                    }

.dashboard .data-content-item_data .condition.midd:before {
                        border-color: #FFA800;
                    }

.dashboard .data-content-item_data .condition.high:before {
                        border-color: #EB5757;
                    }

.dashboard .data-content-item.unread .data-content-item_data {
                    border-width: 2px;
                    border-color: #5e7eab;
                }

@media (max-width: 768px) and (max-width: 991px) {
        .dashboard #category-slider {
            overflow: auto;
            width: 100%;
            display: flex;
            padding-top: 10px;
        }

            .dashboard #category-slider::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }

        .dashboard .category-button {
            min-width: -moz-max-content;
            min-width: max-content;
        }
    }

@media screen and (max-width: 767.98px) {
        .dashboard .dashboard-title {
            font-size: 18px;
            margin: 0;
            line-height: 36px;
        }

            .dashboard .dashboard-title .dashboard-greeting {
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
                margin-bottom: 4px;
            }

            .dashboard .dashboard-title .dashboard-doctor-name {
                display: block;
                font-size: 18px;
                font-weight: 700;
                line-height: normal;
            }

        .dashboard .dashboard-description {
            color: #6B7280;
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            margin-bottom: 16px;
        }

        .dashboard .content-wrapper {
            border: none;
            border-radius: 0px;
        }

            .dashboard .content-wrapper_title {
                color: #0061e6;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 22px;
                margin-bottom: 32px;
            }

            .dashboard .content-wrapper_filter {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 999;
                background: #ffffff;
                border: 0;
                border-top: 1px solid #DEE4EC;
                padding: 16px !important;
            }

            .dashboard .content-wrapper .btn-group {
                justify-content: space-between;
                padding: 16px 16px 16px 8px;
            }

            .dashboard .content-wrapper .data-content-mobil-title {
                display: flex;
                padding: 16px;
                align-items: flex-start;
                gap: 16px;
                border-radius: 8px;
                border: 1px solid #F0F3F6;
                background: #F9FAFB;
                position: relative;
            }

                .dashboard .content-wrapper .data-content-mobil-title:after {
                    content: '';
                    background: url(/assets/img/icon/plus-accordeon.svg) no-repeat center;
                    position: absolute;
                    right: 16px;
                    width: 24px;
                    height: 24px;
                    transition: all .2s ease-in-out;
                }

            .dashboard .content-wrapper .data-content {
                max-height: none;
                display: block;
                margin-top: 8px;
            }

                .dashboard .content-wrapper .data-content.active {
                    border: 1px solid #2DB4FF;
                    border-radius: 8px;
                }
                        .dashboard .content-wrapper .data-content.active .data-content-mobil-title {
                            background: #fff;
                            border: 0px;
                        }

                            .dashboard .content-wrapper .data-content.active .data-content-mobil-title:after {
                                background: url(/assets/img/icon/minus.svg) no-repeat center;
                            }

                        .dashboard .content-wrapper .data-content.active .data-content_acc {
                            display: block;
                        }
                            .dashboard .content-wrapper .data-content.active .data-content-mobile-wrapper .data-content-item {
                                display: flex;
                                width: 900px;
                            }

                .dashboard .content-wrapper .data-content_acc {
                    display: none;
                }

                .dashboard .content-wrapper .data-content-mobile-wrapper {
                    overflow: auto;
                    margin: 0;
                }

                    .dashboard .content-wrapper .data-content-mobile-wrapper .data-content-item {
                        display: none;
                    }
    }

.member-top-menu{
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.member-table .medicineInfoTable td .member-top-menu{
    gap: 0.5rem;
}

.member-top-menu {
    background: #F9FAFB;
    padding: 8px 12px;
    border: 1px solid #F0F3F6;
    border-radius: 8px;
}

.member-top-menu .member-card{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-table .medicineInfoTable td .member-top-menu .member-card{
    gap: 0.5rem;
}

.member-top-menu .member-card .member-card__picture {
            width: 56px;
            height: 56px;
            overflow: hidden;
        }

.member-top-menu .member-card .member-card__picture img {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 100%;
                -o-object-fit: contain;
                   object-fit: contain;
                aspect-ratio: 1 / 1;
            }

.member-top-menu .member-card .member-card__picture div {
                background-color: #F0F3F6;
                color: #0061e6;
                font-size: 20px;
                font-weight: 600;
                letter-spacing: -2px;
                aspect-ratio: 1 / 1;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.member-table .medicineInfoTable td .member-top-menu .member-card .member-card__picture div{
    gap: 0.5rem;
}

.member-top-menu .member-card .member-card__info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.member-table .medicineInfoTable td .member-top-menu .member-card .member-card__info{
    gap: 0.5rem;
}

.member-top-menu .member-card .member-card__info .name {
                color: #2E3948;
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                text-transform: capitalize;
            }

.member-top-menu .member-card .member-card__info a {
                color: #0061E6;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }

.member-top-menu .member-card .member-card__info a:hover {
                    -webkit-text-decoration: underline;
                    text-decoration: underline;
                    -webkit-text-decoration-skip-ink: none;
                            text-decoration-skip-ink: none;
                }

.member-top-menu .member-nav .member-nav__mobile-header {
            background-color: #FFFFFF;
            padding: 16px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border-bottom: 1px solid #DEE4EC;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }

@media (min-width: 1170px){

    .member-top-menu .member-nav .member-nav__mobile-header{
        display: none !important;
    }
}

.member-top-menu .member-nav .member-nav__mobile-header:hover {
                background-color: #F9FAFB;
            }

.member-top-menu .member-nav .member-nav__mobile-header:active {
                background-color: #F0F3F6;
            }

.member-top-menu .member-nav .member-nav__mobile-header .mobile-header-close-btn {
                transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
                cursor: pointer;
                padding: 4px;
                border-radius: 4px;
            }

.member-top-menu .member-nav .member-nav__mobile-header .mobile-header-close-btn:hover {
                    background-color: rgba(0, 0, 0, 0.05);
                    opacity: 0.8;
                }

.member-top-menu .member-nav .member-nav__mobile-header .mobile-header-close-btn:active {
                    transform: scale(0.9);
                    background-color: rgba(0, 0, 0, 0.1);
                }

.member-top-menu .member-nav ul{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-table .medicineInfoTable td .member-top-menu .member-nav ul{
    gap: 0.5rem;
}

.member-top-menu .member-nav ul li a, .member-top-menu .member-nav ul li span {
                    font-size: 14px;
                    line-height: 20px;
                    padding: 2px 16px;
                    border-radius: 20px;
                    display: block;
                    min-height: 24px;
                }

.member-top-menu .member-nav ul li a {
                    background-color: transparent;
                    color: #2E3948;
                    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
                    cursor: pointer;
                }

.member-top-menu .member-nav ul li a:hover {
                        background-color: rgba(0, 0, 0, 0.05);
                        padding-top: 6px;
                        padding-bottom: 6px;
                        margin-top: -4px;
                        margin-bottom: -4px;
                    }

.member-top-menu .member-nav ul li a:active {
                        background-color: rgba(0, 0, 0, 0.08);
                    }

.member-top-menu .member-nav ul li a:focus-visible {
                        outline: 2px solid #0061E6;
                        outline-offset: 2px;
                        border-radius: 20px;
                    }

.member-top-menu .member-nav ul li span {
                    color: #c5c5c5;
                    position: relative;
                    cursor: not-allowed;
                }

.member-top-menu .member-nav ul li span em {
                        color: #0061E6;
                        font-style: normal;
                        font-size: 10px;
                        line-height: 1;
                        position: absolute;
                        top: -6px;
                        right: 16px;
                    }

.member-top-menu .member-nav ul li.active a {
                        background: #0061E6;
                        color: #FFFFFF;
                        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
                        padding-top: 6px;
                        padding-bottom: 6px;
                        margin-top: -4px;
                        margin-bottom: -4px;
                    }

.member-top-menu .member-nav ul li.active a:hover {
                            background-color: #004AAF;
                        }

.member-top-menu .member-nav ul li.active a:active {
                            background-color: #003D8F;
                        }

@media screen and (max-width: 1169.98px) {

.member-top-menu .member-nav{
            width: 100%;
            display: none;
            position: fixed;
            left: 0px;
            bottom: 0px;
            z-index: 42;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
            opacity: 0;
    }

            .member-top-menu .member-nav.is-open {
                display: block;
                transform: translateY(0);
                opacity: 1;
            }

                .member-top-menu .member-nav.is-open .member-nav__overlay {
                    background-color: rgba(0, 0, 0, 0.12);
                    width: 100vw;
                    height: 100vh;
                    position: fixed;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    z-index: 41;
                    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
                    opacity: 0;
                    animation: fadeIn 0.3s ease-in-out forwards;
                }

            .member-top-menu .member-nav ul {
                background-color: #fff;
                display: flex;
                flex-direction: column;
                gap: 0px;
                padding-left: 16px;
                padding-right: 16px;
                padding-top: 16px;
                padding-bottom: 70px;
                border-top-left-radius: 16px;
                border-top-right-radius: 16px;
            }

                .member-top-menu .member-nav ul li {
                    width: 100%;
                    min-height: 44px;
                }

                    .member-top-menu .member-nav ul li a, .member-top-menu .member-nav ul li span {
                        padding: 12px 0px 12px 30px;
                        border-bottom: 1px solid #DEE4EC;
                        border-radius: 0px;
                        min-height: 44px;
                        display: flex;
                        align-items: center;
                    }

                    .member-top-menu .member-nav ul li a {
                        color: #2E3948;
                        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
                        position: relative;
                    }

                        .member-top-menu .member-nav ul li a:hover {
                            background-color: #F9FAFB;
                            padding-top: 16px;
                            padding-bottom: 16px;
                            margin-top: -4px;
                            margin-bottom: -4px;
                        }

                        .member-top-menu .member-nav ul li a:active {
                            background-color: #F0F3F6;
                        }

                        .member-top-menu .member-nav ul li a:focus-visible {
                            outline: 2px solid #0061E6;
                            outline-offset: -2px;
                        }

                    .member-top-menu .member-nav ul li span {
                        cursor: not-allowed;
                    }
                        .member-top-menu .member-nav ul li:last-child a, .member-top-menu .member-nav ul li:last-child span {
                            border-bottom: none;
                        }
                        .member-top-menu .member-nav ul li span em {
                            background: #0061E6;
                            color: #FFFFFF;
                            padding: 4px 7px;
                            border-radius: 30px;
                            top: 50%;
                            right: 16px;
                            transform: translateY(-50%);
                        }
                        .member-top-menu .member-nav ul li.active a {
                            background: transparent url('/assets/img/icon/menu-right-filled.svg') left center no-repeat;
                            color: #0061E6;
                            font-weight: 600;
                            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
                            padding-top: 16px;
                            padding-bottom: 16px;
                            margin-top: -4px;
                            margin-bottom: -4px;
                        }
    }

@keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

.member-create .steps, .member-edit .steps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #DEE4EC;
        padding-bottom: 24px;
    }

@media screen and (max-width: 1023.98px) {

.member-create .steps, .member-edit .steps {
            width: 100%;
            overflow-x: auto;
            gap: 20px;
    }

            .member-create .steps::-webkit-scrollbar, .member-edit .steps::-webkit-scrollbar {
                display: none;
            }
    }

.member-create .steps .step, .member-edit .steps .step {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            font-size: 18px;
            font-weight: 400;
            line-height: normal;
            cursor: pointer;
            white-space: nowrap;
        }

.member-create .steps .step .step-number, .member-edit .steps .step .step-number {
                color: #2E3948;
                font-size: 18px;
                font-weight: 500;
                display: flex;
                min-width: 56px;
                height: 56px;
                justify-content: center;
                align-items: center;
                border-radius: 28px;
                border: 2px solid #6C7A8D;
                background: #FFF;
                transition: background-color .2s ease, border-color .2s ease, color .2s ease;
            }

.member-create .steps .step.disabled, .member-edit .steps .step.disabled {
                color: #8f8f8f;
                cursor: not-allowed;
            }

.member-create .steps .step.disabled .step-number, .member-edit .steps .step.disabled .step-number {
                    background: #8f8f8f;
                    color: #ffffff;
                    border-color: #8f8f8f;
                }

.member-create .steps .step.checked:not(.active), .member-edit .steps .step.checked:not(.active) {
                color: #2E3948;
            }

.member-create .steps .step.checked:not(.active) .step-number, .member-edit .steps .step.checked:not(.active) .step-number {
                    font-size: 0px;
                    background: url('../img/icon/step-checked.svg') no-repeat center center;
                    border: 2px solid #16D261;
                }

.member-create .steps .step.active,
            .member-create .steps .step:not(.disabled):hover,
            .member-edit .steps .step.active,
            .member-edit .steps .step:not(.disabled):hover {
                color: #0061E6;
                transition: color .2s ease;
            }

.member-create .steps .step.active .step-number, .member-create .steps .step:not(.disabled):hover .step-number, .member-edit .steps .step.active .step-number, .member-edit .steps .step:not(.disabled):hover .step-number {
                    background-color: #0061E6;
                    border-color: #0061E6;
                    color: #ffffff;
                }

.member-create .step-content, .member-edit .step-content {
        display: none;
        transition: display .2s ease; 
    }

.member-create .step-content.active, .member-edit .step-content.active {
            display: block;
        }

@media screen and (max-width: 1023.98px) {
            .member-create .step-content .added-item:not(:first-child),
            .member-edit .step-content .added-item:not(:first-child),
            .member-create .step-content .drinks-item,
            .member-edit .step-content .drinks-item {
                margin-top: 0;
                border-top: 1px solid #b0b0b0;
                padding-top: 12px;
            }
    }

.member-create .step-content .form-group.has-danger .text-help, .member-edit .step-content .form-group.has-danger .text-help {
                font-size: 12px;
                position: absolute;
            }

.member-create .ts-wrapper .ts-control, 
    .member-create .ts-wrapper select, 
    .member-edit .ts-wrapper .ts-control, 
    .member-edit .ts-wrapper select {
        min-width: 100%;
    }

.member-create [data-step="0"] .center-block, .member-edit [data-step="0"] .center-block{
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

.member-table .medicineInfoTable td .member-create [data-step="0"] .center-block,.member-table .medicineInfoTable td  .member-edit [data-step="0"] .center-block{
    gap: 0.5rem;
}

@media (min-width: 1170px){

    .member-create [data-step="0"] .center-block, .member-edit [data-step="0"] .center-block{
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 1023.98px) {

.member-create [data-step="0"] .center-block, .member-edit [data-step="0"] .center-block {
                flex-wrap: wrap;
        }
    }

@media screen and (max-width: 1023.98px) {

.member-create [data-step="0"] .kids .kids-item, .member-edit [data-step="0"] .kids .kids-item {
                    margin-bottom: 12px;
            }
    }

@media screen and (min-width: 1023.98px) {
                        .member-create [data-step="0"] .kids .kids-item:not(:first-child) label, .member-edit [data-step="0"] .kids .kids-item:not(:first-child) label {
                            display: none;
                        }
                        .member-create [data-step="0"] .kids .kids-item:first-child .item-add-remove-btn, .member-edit [data-step="0"] .kids .kids-item:first-child .item-add-remove-btn {
                            margin-top: 27px;
                        }
    }

.member-create [data-step="0"] .kids .kids-item:last-child, .member-edit [data-step="0"] .kids .kids-item:last-child {
                    margin-bottom: 32px;
                }

@media screen and (max-width: 1023.98px) {
            .member-create [data-step="3"] .medisupp, .member-edit [data-step="3"] .medisupp {
                min-width: 100%;
                overflow-x: auto;
            }

                .member-create [data-step="3"] .medisupp::-webkit-scrollbar, .member-edit [data-step="3"] .medisupp::-webkit-scrollbar {
                    display: none;
                }

            .member-create [data-step="3"] .medisupp-titles,
            .member-edit [data-step="3"] .medisupp-titles,
            .member-create [data-step="3"] .medisupp-item,
            .member-edit [data-step="3"] .medisupp-item {
                min-width: 1270px;
            }
    }

.member-create [data-step="3"] .medicine-type-icon, .member-edit [data-step="3"] .medicine-type-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border: 1px solid;
            border-radius: 30px;
            width: 18px;
            height: 18px;
            font-size: 11px;
            cursor: pointer;
        }

.member-create [data-step="3"] .medicine-type-icon:hover:after, .member-create [data-step="3"] .medicine-type-icon:hover:before, .member-edit [data-step="3"] .medicine-type-icon:hover:after, .member-edit [data-step="3"] .medicine-type-icon:hover:before {
                    opacity: 1;
                    visibility: visible;
                }

.member-create [data-step="3"] .medicine-type-icon:before, .member-edit [data-step="3"] .medicine-type-icon:before {
                content: '';
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 4px solid #0061e6;
                position: absolute;
                left: 8px;
                bottom: 105%;
                transform: translateX(-50%) rotate(180deg);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: all .2s ease-in-out;
            }

.member-create [data-step="3"] .medicine-type-icon:after, .member-edit [data-step="3"] .medicine-type-icon:after {
                content: attr(data-tooltip);
                background: #FFFFFF;
                color: #6C7A8D;
                font-size: 13px;
                line-height: 20px;
                white-space: nowrap;
                padding: 7px 14px;
                border: 1px solid #0061e6;
                border-radius: 4px;
                position: absolute;
                bottom: 118%;
                left: 0;
                transform: none;
                transform: initial;
                z-index: 2;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: all .2s ease-in-out;
            }

.member-create [data-step="3"] .medisupp-titles, .member-edit [data-step="3"] .medisupp-titles {
            background: #F0F3F6;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            gap: 8px;
            padding: 8px;
            margin-top: 24px;
            align-items: center;
        }

.member-create [data-step="3"] .medisupp-titles .medisupp-titles_item, .member-edit [data-step="3"] .medisupp-titles .medisupp-titles_item {
                color: #6C7A8D;
                font-size: 11px;
                font-weight: 400;
                line-height: 16px;
            }

.member-create [data-step="3"] .medisupp-titles .medisupp-titles_item:not(:first-child), .member-edit [data-step="3"] .medisupp-titles .medisupp-titles_item:not(:first-child) {
                    text-align: center;
                }

.member-create [data-step="3"] .medisupp-titles .medisupp-titles_item:last-child, .member-edit [data-step="3"] .medisupp-titles .medisupp-titles_item:last-child {
                    width: 80px
                }

.member-create [data-step="3"] .medisupp-item, .member-edit [data-step="3"] .medisupp-item {
            color: #6C7A8D;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }

.member-create [data-step="3"] .medisupp-item .medicine-item, .member-edit [data-step="3"] .medisupp-item .medicine-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding: 8px 0;
                border-top: 1px solid #f0f3f6;
            }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell .select-item, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell .select-item {
                    display: inline-block;
                }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell .select-item:after, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell .select-item:after {
                        content: ',';
                        margin-right: 5px;
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell .select-item:last-child:after, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell .select-item:last-child:after {
                        display: none;
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name {
                    padding-left: 21px;
                    background-position: left center;
                    background-repeat: no-repeat;
                    color: #2E3948;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.user, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.user {
                        background-image: url('/assets/img/icon/user-alt.svg');
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.doctor, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.doctor {
                        background-image: url('/assets/img/icon/doctor.svg');
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.assistant, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-name.assistant {
                        background-image: url('/assets/img/icon/assistant.svg');
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell:not(:first-child), .member-edit [data-step="3"] .medisupp-item .medicine-item_cell:not(:first-child) {
                    text-align: center;
                }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-btns, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-btns {
                    width: 80px;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    padding: 0 12px;
                }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.medicine-btns > div, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.medicine-btns > div {
                        cursor: pointer;
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.note, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.note {
                    margin-top: 10px;
                    padding: 8px;
                    padding-left: 30px;
                    font-size: 14px;
                }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.note.template-note, .member-edit [data-step="3"] .medisupp-item .medicine-item_cell.note.template-note {
                        background: #FFF4F1;
                        border-left-color: red;
                        padding-left: 8px;
                        display: flex;
                        align-items: center;
                        gap: 3px;
                    }

.member-create [data-step="3"] .medisupp-item .medicine-item_cell.note.template-note:before,.member-edit [data-step="3"] .medisupp-item .medicine-item_cell.note.template-note:before{
                            content: '';
                            display: inline-block;
                            -webkit-mask-size: cover;
                            mask-size: cover;
                            -webkit-mask-image: url(https://url.of.svg/....svg);
                            mask-image: url(/assets/img/icon/circle-information.svg);
                            background-color: #ff0000;
                            width: 17px;
                            height: 17px;
                        }

@media (min-width: 559.98px) and (max-width: 1024px) {

.member-create [data-step="4"] .tabacco-item > *, .member-create [data-step="4"] .alchol-item > *, .member-edit [data-step="4"] .tabacco-item > *, .member-edit [data-step="4"] .alchol-item > * {
                    width: 48.5%
            }
                }

@media screen and (max-width: 559.98px) {

.member-create [data-step="4"] .tabacco-item > *, .member-create [data-step="4"] .alchol-item > *, .member-edit [data-step="4"] .tabacco-item > *, .member-edit [data-step="4"] .alchol-item > *{
                    width: 100%;
    }
    }

.member-create [data-step="5"] .last-dropdowns .ts-wrapper .ts-control, .member-create [data-step="5"] .last-dropdowns .ts-wrapper select, .member-edit [data-step="5"] .last-dropdowns .ts-wrapper .ts-control, .member-edit [data-step="5"] .last-dropdowns .ts-wrapper select {
                min-width: auto;
            }

@media screen and (max-width: 767.98px) {

.member-create [data-step="5"] .drinks-item, .member-edit [data-step="5"] .drinks-item {
                border: 0;
                margin-bottom: 0;
                padding: 16px 0 4px;
        }
    }

#form-medisupp .ts-wrapper .ts-control,
    #form-medisupp .ts-wrapper select {
        min-width: auto;
    }

#form-medisupp .pristine-error{
        display: none;
    }

#form-medisupp .enddate-wrapper input, #form-medisupp .startdate-wrapper input {
            padding: 8px!important;
        }

#form-medisupp [for="durationAmount"] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

#form-medisupp [for="durationAmount"] .block-item_icon {
            width: 16px;
            height: 14px;
            border: 0;
            display: inline-flex;
            align-items: end;
        }

#form-medisupp [for="durationAmount"] .block-item_icon img {
                filter: invert(34%) sepia(90%) saturate(7495%) hue-rotate(209deg) brightness(99%) contrast(101%);
            }

.direcd-pop-confirm-swal .swal2-html-container {
        overflow: inherit;
    }

.direcd-pop-confirm-swal .swal2-actions {
        z-index:0;
    }

#form-template .ts-wrapper .ts-control .item span {
                    display: none;
                }

#form-template .ts-wrapper .ts-dropdown .option span {
                    color: #8B98AA;
                    display: block;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                }

#form-template .ts-wrapper .ts-dropdown .option[data-value="0"] span {
                        display: none;
                    }

/* Medicine/Supplement Drawer Styles */

.medisupp-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.medisupp-backdrop.visible {
        opacity: 1;
        visibility: visible;
    }

.medisupp-backdrop.hidden {
        display: none;
    }

.medisupp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 55%;
    min-width: 700px;
    max-width: 900px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.medisupp-drawer.open {
        transform: translateX(0);
    }

@media screen and (max-width: 1023.98px) {

.medisupp-drawer{
        width: 100%;
        min-width: 0;
        min-width: initial;
        max-width: none;
        max-width: initial;
    }
    }

.medisupp-drawer .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        background-color: #ffffff;
        flex-shrink: 0;
    }

.medisupp-drawer .drawer-header .drawer-title {
            font-size: 20px;
            font-weight: 600;
            color: #2E3948;
        }

.medisupp-drawer .drawer-header .drawer-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s ease;
            background-color: transparent;
            border: none;
        }

.medisupp-drawer .drawer-header .drawer-close:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }

.medisupp-drawer .drawer-header .drawer-close:active {
                background-color: rgba(0, 0, 0, 0.1);
            }

.medisupp-drawer .drawer-header .drawer-close img {
                width: 16px;
                height: 16px;
            }

.medisupp-drawer .drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 24px 24px 24px;
        transform: none !important;
    }

/* Section Group - simple title, no background */

.medisupp-drawer .drawer-body .section-group {
            margin-bottom: 24px;
        }

.medisupp-drawer .drawer-body .section-group:last-child {
                margin-bottom: 0;
            }

.medisupp-drawer .drawer-body .section-group .group-title {
                font-size: 11px;
                font-weight: 600;
                color: #9CA3AF;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 12px;
            }

.medisupp-drawer .drawer-body .form-section {
            margin-bottom: 20px;
        }

.medisupp-drawer .drawer-body .form-section:last-child {
                margin-bottom: 0;
            }

.medisupp-drawer .drawer-body .form-section .section-title {
                font-size: 13px;
                font-weight: 600;
                color: #2E3948;
                margin-bottom: 10px;
            }

.medisupp-drawer .drawer-body .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }

@media screen and (max-width: 767.98px) {

.medisupp-drawer .drawer-body .form-row {
                flex-wrap: wrap;
        }
    }

.medisupp-drawer .drawer-body .form-row:last-child {
                margin-bottom: 0;
            }

.medisupp-drawer .drawer-body .form-field {
            flex: 1;
            min-width: 0;
        }

.medisupp-drawer .drawer-body .form-field.full-width {
                flex: 1 1 100%;
            }

.medisupp-drawer .drawer-body .form-field label {
                display: block;
                font-size: 13px;
                font-weight: 500;
                color: #374151;
                margin-bottom: 6px;
            }

/* Toggle sections side-by-side container */

.medisupp-drawer .drawer-body .toggle-row {
            display: flex;
            gap: 1rem;
        }

@media screen and (max-width: 767.98px) {

.medisupp-drawer .drawer-body .toggle-row {
                flex-direction: column;
                gap: 0.5rem;
        }
    }

.medisupp-drawer .drawer-body .toggle-row .toggle-section {
                flex: 1;
                min-width: 0;
            }

/* Status radio group styled as pills */

.medisupp-drawer .drawer-body .status-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

.medisupp-drawer .drawer-body .status-pills .status-pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 8px 16px;
                border-radius: 20px;
                border: 1px solid #DEE4EC;
                background-color: #ffffff;
                cursor: pointer;
                transition: all 0.2s ease;
                font-size: 13px;
                font-weight: 500;
                color: #374151;
            }

.medisupp-drawer .drawer-body .status-pills .status-pill input[type="radio"] {
                    display: none;
                }

.medisupp-drawer .drawer-body .status-pills .status-pill span {
                    display: inline;
                }

.medisupp-drawer .drawer-body .status-pills .status-pill .pill-text-secondary {
                    font-size: 11px;
                    font-weight: 400;
                    color: #9CA3AF;
                }

.medisupp-drawer .drawer-body .status-pills .status-pill:hover {
                    border-color: #0082FF;
                    background-color: #F0F7FF;
                }

.medisupp-drawer .drawer-body .status-pills .status-pill.active {
                    background-color: #0082FF;
                    border-color: #0082FF;
                    color: #ffffff;
                }

.medisupp-drawer .drawer-body .status-pills .status-pill.active .pill-text-secondary {
                        color: rgba(255, 255, 255, 0.75);
                    }

/* Frequency section improvements */

.medisupp-drawer .drawer-body .frequency-header {
            margin-bottom: 12px;
        }

.medisupp-drawer .drawer-body .frequency-header .section-title {
                margin-bottom: 8px;
            }

/* Notes section - smaller */

.medisupp-drawer .drawer-body .notes-section textarea {
                min-height: 60px;
                resize: vertical;
            }

.medisupp-drawer .drawer-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-bottom: 16px;
        margin-top: 4px;
        margin-right: 24px;
        background-color: #ffffff;
        flex-shrink: 0;
    }

.member-detail-card {
    background: #F9FAFB;
    padding: 12px 16px;
    border: 1px solid #F0F3F6;
    border-radius: 8px;
}

.member-detail-card__title{
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .member-detail-card__title{
    gap: 0.5rem;
}

.member-detail-card__title {
        font-size: 18px;
        flex-wrap: wrap;
    }

.member-detail-card__title a {
            transition: all 0.3s ease;
        }

.member-detail-card__title a:hover {
                background-color: #F5F9FF !important;
                border-color: #93C5FD !important;
            }

.member-detail-card__title .medicine-tabs-wrapper,
        .member-detail-card__title .supplements-tabs-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-left: auto;
            flex-wrap: wrap;
        }

@media screen and (max-width: 1023.98px) {

.member-detail-card__title .medicine-tabs-wrapper,
        .member-detail-card__title .supplements-tabs-wrapper {
                width: 100%;
                margin-left: 0;
                margin-top: 12px;
                justify-content: flex-start;
        }
    }

.member-detail-card__title .medicine-tabs-wrapper .medicine-tabs,
            .member-detail-card__title .medicine-tabs-wrapper .supplements-tabs,
            .member-detail-card__title .supplements-tabs-wrapper .medicine-tabs,
            .member-detail-card__title .supplements-tabs-wrapper .supplements-tabs {
                margin: 0;
                padding: 2px;
            }

.member-detail-card__title .medicine-tabs-wrapper .medicine-tabs > li a, .member-detail-card__title .medicine-tabs-wrapper .supplements-tabs > li a, .member-detail-card__title .supplements-tabs-wrapper .medicine-tabs > li a, .member-detail-card__title .supplements-tabs-wrapper .supplements-tabs > li a {
                        padding-top: 0.375rem;
                        padding-bottom: 0.375rem;
                        min-height: auto;
                        font-size: 0.8125rem;
                    }

.member-detail-card__title .medicine-tabs-wrapper .medicine-tabs > li.active a:hover, .member-detail-card__title .medicine-tabs-wrapper .supplements-tabs > li.active a:hover, .member-detail-card__title .supplements-tabs-wrapper .medicine-tabs > li.active a:hover, .member-detail-card__title .supplements-tabs-wrapper .supplements-tabs > li.active a:hover {
                            background-color: rgba(0, 97, 230, 1) !important;
                            color: rgba(255, 255, 255, 1) !important;
                        }

.member-detail-card__title .medicine-tabs-wrapper .medicine-archive-btn,
            .member-detail-card__title .medicine-tabs-wrapper .supplements-archive-btn,
            .member-detail-card__title .supplements-tabs-wrapper .medicine-archive-btn,
            .member-detail-card__title .supplements-tabs-wrapper .supplements-archive-btn {
                transition: all 0.2s ease;
            }

.member-detail-card__title .medicine-tabs-wrapper .medicine-archive-btn:hover, .member-detail-card__title .medicine-tabs-wrapper .supplements-archive-btn:hover, .member-detail-card__title .supplements-tabs-wrapper .medicine-archive-btn:hover, .member-detail-card__title .supplements-tabs-wrapper .supplements-archive-btn:hover {
                    -webkit-text-decoration: underline !important;
                    text-decoration: underline !important;
                }

.drawer__side-right.show {
                align-items: center;
            }

.member-detail [data-drawer="#archiveModal"], 
    .member-detail .mobiledata-router, 
    .member-detail .doctor-icon, 
    .member-detail .assistant-icon, 
    .member-detail .user-icon, 
    .member-detail .doctor, 
    .member-detail .assistant, 
    .member-detail .user {
        display: flex;
        align-items: center;
        justify-content: start;
        position: relative;
    }

.member-detail [data-drawer="#archiveModal"]:hover:after, .member-detail [data-drawer="#archiveModal"]:hover:before, .member-detail .mobiledata-router:hover:after, .member-detail .mobiledata-router:hover:before, .member-detail .doctor-icon:hover:after, .member-detail .doctor-icon:hover:before, .member-detail .assistant-icon:hover:after, .member-detail .assistant-icon:hover:before, .member-detail .user-icon:hover:after, .member-detail .user-icon:hover:before, .member-detail .doctor:hover:after, .member-detail .doctor:hover:before, .member-detail .assistant:hover:after, .member-detail .assistant:hover:before, .member-detail .user:hover:after, .member-detail .user:hover:before {
                opacity: 1;
                visibility: visible;
            }

.member-detail [data-drawer="#archiveModal"]:before, .member-detail .mobiledata-router:before, .member-detail .doctor-icon:before, .member-detail .assistant-icon:before, .member-detail .user-icon:before, .member-detail .doctor:before, .member-detail .assistant:before, .member-detail .user:before {
            content: '';
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #1E293B;
            position: absolute;
            left: 8px;
            bottom: calc(100% + 4px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all .2s ease-in-out;
            z-index: 3;
        }

.member-detail [data-drawer="#archiveModal"]:after, .member-detail .mobiledata-router:after, .member-detail .doctor-icon:after, .member-detail .assistant-icon:after, .member-detail .user-icon:after, .member-detail .doctor:after, .member-detail .assistant:after, .member-detail .user:after {
            content: attr(data-tooltip);
            background: #1E293B;
            color: #FFFFFF;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            white-space: nowrap;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            position: absolute;
            bottom: calc(100% + 9px);
            left: 0;
            z-index: 2;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all .2s ease-in-out;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.member-accordion-label .title {
        color: #6C7A8D;
        font-size: 11px;
        line-height: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.member-accordion-label .title a {
            display: inline-flex;
            cursor: pointer;
            margin: 0;
        }

.member-accordion-label .title a img {
                width: 14px;
                height: 14px;
                margin: 0;
            }

.member-accordion-label .value {
        background: url('/assets/img/icon/list-shape.svg') left 5px no-repeat;
        color: #2E3948;
        height: calc(100% - 1.75rem);
        border-bottom: 1px dashed #DEE4EC;
        margin-top: 0.375rem;
        min-height: 1.875rem;
        padding-bottom: 0.375rem;
        padding-left: 1.5rem;
        font-size: 0.875rem;
        line-height: 1.5rem;
        padding-right: 0.5rem;
        word-wrap: break-word;
        word-wrap: break-word;
        overflow: hidden;
    }

.member-accordion-label .value.doctor-icon {
            background-image: url(/assets/img/icon/doctor.svg);
        }

.member-accordion-label .value.assistant-icon {
            background-image: url(/assets/img/icon/assistant.svg);
        }

.member-accordion-label .value.user-icon {
            background-image: url(/assets/img/icon/user-alt.svg);
        }

.member-accordion-label .value.no-icon {
            background-image: none;
            padding-left: 0px;
            padding-right: 0.5rem;
            word-wrap: break-word;
            word-wrap: break-word;
            overflow: hidden;
        }

.member-accordion-label .value.no-icon > p.user {
                background: url('/assets/img/icon/user-alt.svg') left 5px no-repeat;
                padding-left: 24px;
            }

.member-accordion-label .value.no-icon > p.assistant {
                background: url('/assets/img/icon/assistant.svg') left 5px no-repeat;
                padding-left: 24px;
            }

.member-accordion-label .value.no-icon > p.doctor {
                background: url('/assets/img/icon/doctor.svg') left 5px no-repeat;
                padding-left: 24px;
            }

.member-accordion-label .value:has(a) {
            display: flex;
            align-items: center;
            gap: 6px;
        }

.member-labels-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
}

.member-labels-grid.col-1fr {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

.member-labels-grid.col-2fr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.member-labels-grid.col-2fr .member-accordion-label {
            min-width: 0;
            overflow: hidden;
        }

.member-labels-grid.col-3fr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

@media screen and (max-width: 1169.98px) {

.member-labels-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .member-labels-grid.col-3fr {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

@media screen and (max-width: 1023.98px) {

.member-labels-grid{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

        .member-labels-grid.col-2fr, .member-labels-grid.col-3fr {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }

.member-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow: auto hidden;
}

.member-table::-webkit-scrollbar {
        height: 4px;
    }

@media screen and (max-width: 1023.98px) {
        .member-table::-webkit-scrollbar {
            display: none;
        }
    }

.member-table table {
        width: 100%;
        border-bottom: 1px solid #DEE4EC;
        table-layout: fixed;
    }

.member-table table thead th {
                background-color: #F0F3F6;
                color: #6C7A8D;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                text-align: left;
                padding: 10px 8px;
                vertical-align: middle;
                white-space: nowrap;
            }

.member-table table thead th:first-child {
                    width: 400px;
                    white-space: normal;
                }

.member-table table thead th:nth-child(2) {
                    width: 100px;
                }

.member-table table thead th:nth-child(3) {
                    width: 100px;
                }

.member-table table thead th:nth-child(4) {
                    width: 70px;
                }

.member-table table thead th:nth-child(5) {
                    width: 180px;
                }

.member-table table thead th:nth-child(6) {
                    width: 120px;
                }

.member-table table thead th:nth-child(7) {
                    width: 220px;
                }

.member-table table thead th:nth-child(8) {
                    width: 100px;
                    text-align: left;
                }

.member-detail .member-table table {
            table-layout: auto;
            min-width: 100%;
        }

.member-detail .member-table table thead th {
                width: auto !important;
                min-width: -moz-fit-content;
                min-width: fit-content;
            }

.member-detail .member-table table thead th:first-child,
                .member-detail .member-table table thead th:nth-child(2),
                .member-detail .member-table table thead th:nth-child(3),
                .member-detail .member-table table thead th:nth-child(4),
                .member-detail .member-table table thead th:nth-child(5),
                .member-detail .member-table table thead th:nth-child(6),
                .member-detail .member-table table thead th:nth-child(7),
                .member-detail .member-table table thead th:nth-child(8),
                .member-detail .member-table table thead th:nth-child(9),
                .member-detail .member-table table thead th:nth-child(10),
                .member-detail .member-table table thead th:nth-child(11) {
                    width: auto !important;
                }

.member-detail .member-table table thead th:first-child {
                    white-space: normal;
                }

.member-detail .member-table table tbody td {
                width: auto !important;
                min-width: -moz-fit-content;
                min-width: fit-content;
            }

.member-detail .member-table table tbody td:first-child,
                .member-detail .member-table table tbody td:nth-child(2),
                .member-detail .member-table table tbody td:nth-child(3),
                .member-detail .member-table table tbody td:nth-child(4),
                .member-detail .member-table table tbody td:nth-child(5),
                .member-detail .member-table table tbody td:nth-child(6),
                .member-detail .member-table table tbody td:nth-child(7),
                .member-detail .member-table table tbody td:nth-child(8),
                .member-detail .member-table table tbody td:nth-child(9),
                .member-detail .member-table table tbody td:nth-child(10),
                .member-detail .member-table table tbody td:nth-child(11) {
                    width: auto !important;
                }

.member-detail .member-table table tbody td:first-child {
                    white-space: normal;
                }

.member-table table tbody {
            border-bottom: 1px solid #dee4ec;
        }

.member-table table tbody tr {
                min-height: 36px;
            }

.member-table table tbody tr td {
                    color: #445066;
                    text-align: left;
                    font-size: 14px;
                    line-height: 20px;
                    padding: 10px;
                    vertical-align: middle;
                }

.member-table table tbody tr td:first-child {
                        width: 400px;
                        word-wrap: break-word;
                        word-break: break-word;
                        white-space: normal;
                        line-height: 1.4;
                    }

.member-table table tbody tr td:nth-child(2) {
                        width: 100px;
                    }

.member-table table tbody tr td:nth-child(3) {
                        width: 100px;
                    }

.member-table table tbody tr td:nth-child(4) {
                        width: 70px;
                    }

.member-table table tbody tr td:nth-child(5) {
                        width: 180px;
                        word-wrap: break-word;
                        word-break: break-word;
                        white-space: normal;
                    }

.member-table table tbody tr td:nth-child(6) {
                        width: 120px;
                    }

.member-table table tbody tr td:nth-child(7) {
                        width: 220px;
                    }

.member-table table tbody tr td:nth-child(8) {
                        width: 100px;
                        text-align: left;
                    }

.member-table table tbody tr td:nth-child(8) .medicine-action-btn {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 36px;
                            height: 36px;
                            padding: 0;
                            border-radius: 50%;
                            transition: all 0.2s ease;
                            cursor: pointer;
                        }

.member-table table tbody tr td:nth-child(8) .medicine-action-btn:hover {
                                background-color: #F3F4F6;
                                filter: drop-shadow(0 0 1px rgba(138,214,255,0.33333));
                                transform: scale(1.02);
                            }

.member-table table tbody tr td:nth-child(8) .medicine-action-btn:active {
                                background-color: #E5E7EB;
                            }

.member-table table tbody tr td.end-medicine-btn {
                        transition: all 0.2s ease;
                    }

.member-table table tbody tr td.end-medicine-btn:hover {
                            color: #2563eb !important;
                            -webkit-text-decoration: underline;
                            text-decoration: underline;
                        }

.member-table table tbody tr td > .medicine {
                        background-position: left center;
                        background-repeat: no-repeat;
                        color: #2E3948;
                        padding-left: 21px;
                    }

.member-table table tbody tr td > .medicine.user {
                            background-image: url('/assets/img/icon/user-alt.svg');
                        }

.member-table table tbody tr td > .medicine.doctor {
                            background-image: url('/assets/img/icon/doctor.svg');
                        }

.member-table table tbody tr td > .medicine.assistant {
                            background-image: url('/assets/img/icon/assistant.svg');
                        }

.member-table table tbody tr td > .note {
                        background: #F9FAFB;
                        font-size: 14px;
                        line-height: 20px;
                        padding-top: 4px;
                        padding-bottom: 4px;
                        white-space: normal;
                    }

.member-table table tbody tr td > .note.blue {
                            border-left: 3px solid #2DB4FF;
                        }

.member-table table tbody tr td > .note.black {
                            border-left: 3px solid #2E3948;
                        }

.member-table table tbody tr td > .note.doctor, .member-table table tbody tr td > .note.user, .member-table table tbody tr td > .note.assistant {
                            background-position: 3px center;
                            background-repeat: no-repeat;
                            padding-left: 24px;
                            text-align: left;
                        }

.member-table table tbody tr td > .note.doctor {
                            background-image: url('/assets/img/icon/doctor.svg');
                            font-size: 12px;
                            line-height: 20px;
                            margin-top: -2px;
                            margin-bottom: 2px;
                        }

.member-table table tbody tr td > .note.user {
                            background-image: url('/assets/img/icon/user-alt.svg');
                        }

.member-table table tbody tr td > .note.assistant {
                            background-image: url('/assets/img/icon/assistant.svg');
                        }

.member-table table tbody tr.note-row td {
                    padding-top: 4px;
                    padding-bottom: 8px;
                }

.member-table table tbody.medicine-empty-state tr td, .member-table table tbody.supplements-empty-state tr td {
                        border: none;
                        padding: 40px 20px;
                        white-space: normal;
                    }

.member-table table tbody + tbody tr:first-child td {
                    border-top: 1px solid #DEE4EC;
                }

.member-table .medicine-empty-state__cell, .member-table .supplements-empty-state__cell {
            border: none !important;
            padding: 40px 20px !important;
        }

.member-table .medicine-empty-state__content, .member-table .supplements-empty-state__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.member-table .medicine-empty-state__text, .member-table .supplements-empty-state__text {
            color: #6C7A8D;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            margin: 0;
        }

.medicine-cards-container,
.supplements-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    width: 100%;
}

@media screen and (max-width: 1023.98px) {

.medicine-cards-container,
.supplements-cards-container {
        grid-template-columns: 1fr;
        gap: 10px;
}
    }

.medicine-card {
    background: #FFFFFF;
    border: 1px solid #F0F3F6;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    position: relative;
}

.medicine-card:hover {
        border-color: #93C5FD;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.medicine-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
        flex-shrink: 0;
    }

.medicine-card__name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

.medicine-card__name .medicine {
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            color: #2E3948;
            padding-left: 22px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.5;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

.medicine-card__name .medicine.user {
                background-image: url('/assets/img/icon/user-alt.svg');
            }

.medicine-card__name .medicine.doctor {
                background-image: url('/assets/img/icon/doctor.svg');
            }

.medicine-card__name .medicine.assistant {
                background-image: url('/assets/img/icon/assistant.svg');
            }

.medicine-card__summary {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 0;
    }

.medicine-card__field {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 0;
    }

.medicine-card__field-label {
            color: #6C7A8D;
            font-weight: 500;
            min-width: 110px;
            flex-shrink: 0;
            text-align: left;
        }

.medicine-card__field-value {
        color: #2E3948;
        flex: 1;
        min-width: 0;
        word-break: break-word;
        text-align: left;
    }

.medicine-card__field-value em {
            color: #9CA3AF;
            font-style: italic;
        }

.medicine-card__note {
        margin-top: 8px;
        padding: 10px 12px 10px 32px;
        border-top: 1px solid #F0F3F6;
        flex-shrink: 0;
        background: #F3F4F6;
        font-size: 12px;
        line-height: 18px;
        border-radius: 6px;
        white-space: normal;
        border-left: 3px solid #6B7280;
        background-position: 10px center;
        background-repeat: no-repeat;
        text-align: left;
        color: #2E3948;
    }

.medicine-card__note.doctor {
            background-image: url('/assets/img/icon/doctor.svg');
        }

.medicine-card__note.user {
            background-image: url('/assets/img/icon/user-alt.svg');
        }

.medicine-card__note.assistant {
            background-image: url('/assets/img/icon/assistant.svg');
        }

.medicine-card__note.end-note.dark {
            background-color: #F3F4F6;
            border-left-color: #6B7280;
        }

.medicine-card__actions {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #F0F3F6;
        flex-shrink: 0;
    }

.medicine-card__actions .end-medicine-btn {
            color: #2563EB;
            font-size: 13px;
            font-weight: 500;
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
            width: 100%;
        }

.medicine-card__actions .end-medicine-btn:hover {
                color: #1D4ED8;
                -webkit-text-decoration: underline;
                text-decoration: underline;
            }

.medicine-card__actions .end-medicine-btn:focus {
                outline: 2px solid #93C5FD;
                outline-offset: 2px;
                border-radius: 4px;
            }

.medicine-empty-state,
.supplements-empty-state {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.medicine-empty-state__content, .supplements-empty-state__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

.medicine-empty-state__text, .supplements-empty-state__text {
        color: #6C7A8D;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin: 0;
    }

#medicineDetailModal .drawer-container {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

#medicineDetailModal .drawer-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

#medicineDetailModal .drawer-header h6 .medicine {
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 21px;
        display: inline-block;
    }

#medicineDetailModal .drawer-header h6 .medicine.user {
            background-image: url('/assets/img/icon/user-alt.svg');
        }

#medicineDetailModal .drawer-header h6 .medicine.doctor {
            background-image: url('/assets/img/icon/doctor.svg');
        }

#medicineDetailModal .drawer-header h6 .medicine.assistant {
            background-image: url('/assets/img/icon/assistant.svg');
        }

.medicine-detail-modal__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
}

.medicine-detail-modal__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.medicine-detail-modal__group-title,
.medicine-detail-modal__group-title h6,
h6.medicine-detail-modal__group-title {
    color: #9CA3AF !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.medicine-detail-modal__group-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    gap: 12px;
}

@media (max-width: 640px) {

.medicine-detail-modal__group-fields {
        grid-template-columns: 1fr
}
    }

.medicine-detail-modal__field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #F0F3F6;
}

.medicine-detail-modal__field-label {
        color: #6C7A8D;
        font-size: 14px;
        font-weight: 500;
        min-width: 120px;
        flex-shrink: 0;
    }

.medicine-detail-modal__field-value {
        color: #2E3948;
        font-size: 14px;
        line-height: 20px;
        flex: 1;
        word-break: break-word;
    }

.medicine-detail-modal__field-value em {
            color: #9CA3AF;
            font-style: italic;
        }

.medicine-detail-modal__field-value .medicine {
            background-position: left center;
            background-repeat: no-repeat;
            padding-left: 21px;
        }

.medicine-detail-modal__field-value .medicine.user {
                background-image: url('/assets/img/icon/user-alt.svg');
            }

.medicine-detail-modal__field-value .medicine.doctor {
                background-image: url('/assets/img/icon/doctor.svg');
            }

.medicine-detail-modal__field-value .medicine.assistant {
                background-image: url('/assets/img/icon/assistant.svg');
            }

.medicine-detail-modal__notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.medicine-detail-modal__note {
    background: #F9FAFB;
    font-size: 14px;
    line-height: 20px;
    padding: 12px;
    border-radius: 6px;
    white-space: normal;
}

.medicine-detail-modal__note.blue {
        border-left: 3px solid #2DB4FF;
    }

.medicine-detail-modal__note.black {
        border-left: 3px solid #2E3948;
    }

.medicine-detail-modal__note.doctor, .medicine-detail-modal__note.user, .medicine-detail-modal__note.assistant {
        background-position: 12px center;
        background-repeat: no-repeat;
        padding-left: 36px;
        text-align: left;
    }

.medicine-detail-modal__note.doctor {
        background-image: url('/assets/img/icon/doctor.svg');
        font-size: 12px;
        line-height: 20px;
    }

.medicine-detail-modal__note.user {
        background-image: url('/assets/img/icon/user-alt.svg');
    }

.medicine-detail-modal__note.assistant {
        background-image: url('/assets/img/icon/assistant.svg');
    }

.medicine-detail-modal__note.end-note.dark {
        background-color: #F3F4F6;
        border-left-color: #6B7280;
    }

.medicine-detail-modal__actions {
    margin-top: auto;
    padding-top: 24px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    flex-shrink: 0;
}

.medicine-detail-modal__actions .medicine-detail-modal__action-message {
        margin-bottom: 12px;
        padding: 10px 12px;
        background: #FEF3C7;
        border: 1px solid #FCD34D;
        border-radius: 6px;
    }

.medicine-detail-modal__actions .medicine-detail-modal__action-message-text {
            margin: 0;
            font-size: 13px;
            line-height: 18px;
            color: #92400E;
        }

.medicine-detail-modal__actions .end-medicine-btn {
        width: 100%;
        background: transparent;
        border: 1px solid #0061E6;
        color: #0061E6;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

.medicine-detail-modal__actions .end-medicine-btn:hover:not(:disabled):not(.disabled) {
            background: #0061E6;
            color: #FFFFFF;
        }

.medicine-detail-modal__actions .end-medicine-btn:disabled,
        .medicine-detail-modal__actions .end-medicine-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #9CA3AF;
            color: #6B7280;
        }

.medicine-detail-modal__actions .end-medicine-btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 97, 230, 0.1);
        }

.archive-list{
    position: relative;
}

.archive-list__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #BDBDBD;
    }

.archive-list__item .title, .archive-list__item .date {
            color: #6C7A8D;
            font-size: 14px;
            line-height: 24px;
        }

.archive-list__item.user .title {
                background: url(/assets/img/icon/user-alt.svg) left center no-repeat;
                padding-left: 26px;
            }

.archive-list__item.doctor .title {
                background: url(/assets/img/icon/doctor.svg) left center no-repeat;
                padding-left: 26px;
            }

.archive-list__item.assistant .title {
                background: url('/assets/img/icon/assistant.svg') left center no-repeat;
                padding-left: 26px;
            }

.pagination-container .pagination-btn {
        transition: all 0.2s ease;
    }

.pagination-container .pagination-btn:hover {
            background-color: #f3f4f6;
        }

.pagination-container .pagination-btn.bg-blue-500 {
            background-color: #3b82f6 !important;
            color: white !important;
        }

.medicine-archive-wrapper .result-not-found {
        background-color: #fff !important;
        min-height: calc(100dvh - 200px);
        border-radius: 0px;
    }

.medicine-archive-wrapper .result-not-found__img {
            background-color: #F9FAFB;
            width: 144px;
            height: 144px;
            border-radius: 100%;
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

.medicine-archive-wrapper .medicine-btns {
        width: 80px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.medicine-archive-wrapper .medicine-btns > span {
            cursor: pointer;
        }

#mobileMembershipModal .alarm-list .alarm-item {
            justify-content: start;
        }

#mobileMembershipModal .alarm-list .alarm-item > * {
                width: 50%;
            }

#mobileMembershipModal .ms-status {
        padding: 16px;
        display: flex;
        align-items: end;
        flex-direction: column;
        gap: 16px;
        border-radius: 16px;
    }

#mobileMembershipModal .ms-status.ms-status__active {
            background: #E8F8EE;
        }

#mobileMembershipModal .ms-status.ms-status__active .ms-status__top-icon .ms-active-icon {
                        display: block;
                    }

#mobileMembershipModal .ms-status.ms-status__freeze {
            background: #FFF7E6;
        }

#mobileMembershipModal .ms-status.ms-status__freeze .ms-status__top-icon .ms-freeze-icon {
                        display: block;
                    }

#mobileMembershipModal .ms-status__top {
            display: flex;
            justify-content: space-between;
            width: 100%;
            gap: 16px;
        }

#mobileMembershipModal .ms-status__top-icon {
                width: 104px;
            }

#mobileMembershipModal .ms-status__top-icon img {
                    display: none;
                }

#mobileMembershipModal .ms-status__bottom {
            font-size: 16px;
            color: #2E3948;
            font-weight: 400;
            line-height: 24px;
        }

#mobileMembershipModal .ms-status__bottom span {
                font-weight: 600;
            }

#mobileMembershipModal .ms-status__list {
            width: 100%;
            display: flex;
            flex-direction: column;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            overflow-y: auto;
            max-height: 500px;
        }

#mobileMembershipModal .ms-status__list > * {
                padding: 14px 16px;
                padding-left: 43px;
                border-bottom: 2px solid #e8f8ee;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-position: 16px center;
                background-repeat: no-repeat;
                background-color: #ffffff;
            }

#mobileMembershipModal .ms-status__list-start {
                background-image: url('/assets/img/icon/ms-list-start.svg');
            }

#mobileMembershipModal .ms-status__list-freeze {
                background-image: url('/assets/img/icon/ms-list-freeze.svg');
            }

#mobileMembershipModal .ms-status__list-finish {
                background-image: url('/assets/img/icon/ms-list-finish.svg');
            }

#mobileMembershipModal .drawer-body p {
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                color: #2E3948;
                margin-bottom: 24px;
            }

#mobileMembershipModal .drawer-note {
            background: #E8F7FF;
            border-radius: 16px;
            padding: 32px;
        }

#mobileMembershipModal .drawer-action-btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 24px;
        }

#mobileMembershipModal .drawer-action-btns > * {
                display: flex;
                gap: 8px;
                align-items: center;
            }

.custom-notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 16px;
    z-index: 999999;
    transition: top 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.custom-notification.show {
        top: 20px;
        opacity: 1;
    }

.custom-notification.custom-notification-success {
        border-left: 4px solid #10b981;
    }

.custom-notification.custom-notification-success .notification-icon {
            color: #10b981;
        }

.custom-notification.custom-notification-success .notification-timer-circle-progress {
            stroke: #10b981;
        }

.custom-notification.custom-notification-error {
        border-left: 4px solid #ef4444;
    }

.custom-notification.custom-notification-error .notification-icon {
            color: #ef4444;
        }

.custom-notification.custom-notification-error .notification-timer-circle-progress {
            stroke: #ef4444;
        }

.custom-notification .notification-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.custom-notification .notification-message {
        font-size: 14px;
        color: #374151;
        font-weight: 500;
    }

.custom-notification .notification-timer-wrapper {
        position: relative;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.custom-notification .notification-timer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        color: #374151;
        font-weight: 700;
    }

.custom-notification .notification-timer-circle {
        position: absolute;
        width: 32px;
        height: 32px;
        transform: rotate(-90deg);
    }

.custom-notification .notification-timer-circle-bg {
            fill: none;
            stroke: #e5e7eb;
            stroke-width: 2;
        }

.custom-notification .notification-timer-circle-progress {
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 100;
            stroke-dashoffset: 0;
        }

@keyframes notificationCircleProgress {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 100;
    }
}

.medicine-footer-btns .medicine-archive-btn,
    .medicine-footer-btns .supplements-archive-btn {
        transition: all 0.2s ease;
    }

.medicine-footer-btns .medicine-archive-btn:hover, .medicine-footer-btns .supplements-archive-btn:hover {
            -webkit-text-decoration: underline !important;
            text-decoration: underline !important;
        }

#medicineArchiveDrawer .drawer-container {
        padding: 32px;
        display: flex;
        flex-direction: column;
        max-height: 100vh;
        overflow: hidden;
    }

#medicineArchiveDrawer .drawer-header {
        margin-bottom: 24px;
        flex-shrink: 0;
    }

#medicineArchiveDrawer .drawer-header h6 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 600;
            color: #2E3948;
        }

#medicineArchiveDrawer .drawer-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1;
        overflow: hidden;
    }

#medicineArchiveDrawer .drawer-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

#medicineArchiveDrawer .drawer-back-btn:hover {
            opacity: 0.7;
        }

#medicineArchiveDrawer .drawer-back-btn img {
            display: block;
        }

#medicineArchiveDrawer .medicine-archive-list-view,
    #medicineArchiveDrawer .medicine-archive-detail-view {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

#medicineArchiveDrawer .medicine-archive-list-view {
        opacity: 1;
        transform: translateX(0);
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

#medicineArchiveDrawer .medicine-archive-list-view .medicine-archive-tabs {
            margin-bottom: 24px;
            flex-shrink: 0;
        }

#medicineArchiveDrawer .medicine-archive-detail-view {
        opacity: 1;
        transform: translateX(0);
        padding-top: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1;
        height: 100%;
        overflow: hidden;
    }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-detail-modal__content {
            gap: 32px;
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 4px;
            margin-right: -4px;
            min-height: 0;
        }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-detail-modal__group {
            gap: 16px;
        }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-detail-modal__group-fields {
            gap: 16px;
        }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-detail-modal__field {
            padding-bottom: 8px;
        }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions {
            margin-top: auto;
            padding-top: 24px;
            flex-shrink: 0;
        }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions .delete-medicine-btn {
                width: 100%;
                background: transparent;
                border: 1px solid #EF4444;
                color: #EF4444;
                font-size: 14px;
                font-weight: 500;
                padding: 10px 20px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions .delete-medicine-btn:hover:not(:disabled):not(.disabled) {
                    background: #EF4444;
                    color: #FFFFFF;
                }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions .delete-medicine-btn:disabled,
                #medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions .delete-medicine-btn.disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                    border-color: #9CA3AF;
                    color: #6B7280;
                }

#medicineArchiveDrawer .medicine-archive-detail-view .medicine-archive-detail-actions .delete-medicine-btn:focus {
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
                }

#medicineArchiveDrawer .medicine-archive-cards-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 16px;
        gap: 16px;
        width: 100%;
    }

@media (max-width: 767px) {

#medicineArchiveDrawer .medicine-archive-cards-container {
            grid-template-columns: 1fr;
            gap: 12px
    }
        }

#medicineArchiveDrawer .medicine-archive-cards-container .medicine-card {
            max-width: 100%;
            min-width: 0;
        }

#medicineArchiveDrawer .medicine-archive-cards-container .medicine-card__header {
                min-width: 0;
            }

#medicineArchiveDrawer .medicine-archive-cards-container .medicine-card__name {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

#medicineArchiveDrawer .medicine-archive-cards-container .medicine-card__name .medicine {
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

#medicineArchiveDrawer .medicine-archive-cards-container .result-not-found {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 64px 24px;
            text-align: center;
        }

#medicineArchiveDrawer .medicine-archive-cards-container .result-not-found__img {
                margin-bottom: 20px;
            }

#medicineArchiveDrawer .medicine-archive-cards-container .result-not-found__img img {
                    width: 120px;
                    height: auto;
                }

#medicineArchiveDrawer .medicine-archive-cards-container .result-not-found h3 {
                font-size: 18px;
                font-weight: 600;
                color: #2E3948;
                margin-bottom: 12px;
            }

#medicineArchiveDrawer .medicine-archive-cards-container .result-not-found__text {
                font-size: 14px;
                color: #6C7A8D;
                max-width: 400px;
                line-height: 1.5;
            }

.recipe-edit-page .recipe-item-btn, .recipe-create-page .recipe-item-btn {
        display: flex;
        align-items: center;
        color: #0061E6;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        cursor: pointer;
        order: 9;
        height: 100%;
        padding-top: 28px;
    }

@media screen and (max-width: 767.98px) {
            .recipe-edit-page .recipe-item-btn.material-item-remove, .recipe-create-page .recipe-item-btn.material-item-remove {
                line-height: 20px;
                padding-top: 0px;
                padding-bottom: 0px;
                margin-bottom: 12px;
            }
    }

.recipe-edit-page .recipe-unit, .recipe-create-page .recipe-unit {
        width: 100%;
    }

.recipe-edit-page .helper-recipes, .recipe-create-page .helper-recipes {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.recipe-edit-page .helper-recipes .helper-recipes_item, .recipe-create-page .helper-recipes .helper-recipes_item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #F0F3F6;
            padding: 4px 10px;
            border-radius: 30px;
            color: #6C7A8D;
            font-size: 14px;
        }

.recipe-edit-page .helper-recipes .helper-recipes_detail, .recipe-create-page .helper-recipes .helper-recipes_detail {
            margin-left: 10px;
        }

.recipe-edit-page .helper-recipes .helper-recipes_remove, .recipe-create-page .helper-recipes .helper-recipes_remove {
            width: 19px;
        }

.recipe-block-title {
    color: #2E3948;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.recipe-left {
    border-radius: 8px;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (min-width: 1170px){

    .recipe-left{
        max-height: calc(100vh - 270px);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgba(222, 228, 236, 1);
        border-color: rgba(222, 228, 236, var(--tw-border-opacity));
        padding: 1.5rem;
    }
}

.recipe-left .recipe-left-detail {
        height: 100%;
        overflow-y: auto;
        display: flex;
        gap: 16px;
        flex-direction: column;
    }

.note-block {
    border-radius: 4px;
    padding: 16px;
}

.note-block.trick-note {
        background: rgba(45, 180, 255, 0.10);
    }

.note-block.notes-note {
        background: #FFF7E1;
    }

.note-block .new-recipe-options {
        color: #4F4F4F;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
    }

.new-recipe-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #8B98AA;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.new-recipe-options .new-recipe-options_item {
        border-radius: 16px;
        background: #F0F3F6;
        color: #6C7A8D;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 4px 8px;
    }

.new-recipe-options.preparation p, .new-recipe-options.materials p {
            color: #4F4F4F;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            width: 100%;
        }

#recipe-detail-modal {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    background: #fff;
    padding: 0;
    border-radius: 12px;
    height: 0;
    opacity: 0;
    transition: all .2s ease-in-out;
}

#recipe-detail-modal.open {
        height: 750px;
        padding: 20px 0;
        opacity: 1;
    }

.recipe-add-modal.medicine-modal .title {
            color: #333;
            font-size: 24px;
            font-weight: 500;
            padding-bottom: 24px;
            padding-top: 12px;
            margin-bottom: 16px;
            border-bottom: 1px solid #ddd;
        }

.recipe-add-modal.medicine-modal .radios-group {
            border-bottom: 1px solid #ddd;
            padding-bottom: 16px;
            display: flex;
        }

.recipe-add-modal.medicine-modal .radios-group span {
                font-size: 16px;
                font-weight: 400;
                line-height: 26px;
            }

@media screen and (max-width: 1023.98px) {

.recipe-add-modal.medicine-modal .swal2-close {
                top: 15px;
                right: 15px;
        }
    }

.recipe-add-modal.medicine-modal .swal2-modal {
            padding-top: 20px;
            height: 830px;
        }

@media screen and (max-width: 1023.98px) {

.recipe-add-modal.medicine-modal .swal2-modal {
                padding-top: 50px;
        }
    }

.recipe-add-modal.medicine-modal .swal2-modal .swal2-html-container {
                padding: 0 40px;
            }

@media screen and (max-width: 1023.98px) {

.recipe-add-modal.medicine-modal .swal2-modal .swal2-html-container {
                    padding: 0;
            }
    }

.recipe-add-modal.medicine-modal .swal2-modal .swal2-html-container .medicine-time__days {
                        display: flex;
                        align-items: center;
                        gap: 17px;
                        border-radius: 8px;
                        background: #F9FAFB;
                        background: var(--Grey-11, #F9FAFB);
                        padding: 16px;
                        width: 100%;
                        justify-content: space-between;
                        position: relative;
                        overflow: hidden;
                    }

.recipe-add-modal .swal2-modal {
        height: 750px;
    }

@media screen and (max-width: 1023.98px) {

.recipe-add-modal .swal2-modal {
            height: calc(100vh - 20px);
            padding-top: 0px;
    }

            .recipe-add-modal .swal2-modal .title, .recipe-add-modal .swal2-modal .swal2-close {
                display: none !important;
            }

            .recipe-add-modal .swal2-modal .swal2-html-container {
                margin: 16px;
                padding: 180px 0px 0px 0px;
                position: relative;
            }

                .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add-right {
                    width: 100%;
                    height: 160px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    overflow: hidden auto;
                }

                    .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add-right::-webkit-scrollbar-thumb {
                        background: rgba(255, 255, 255, 0.42);
                    }

                .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add-checkbox {
                    margin-top: 0px;
                }

                .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add-search {
                    margin-top: 16px;
                }

                .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add {
                    flex-wrap: wrap;
                    flex-direction: column;
                    gap: 16px;
                    margin-top: 16px;
                    height: auto;
                }

                    .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-left {
                        background: url('../img/icon/chevron_down.svg') calc(100% - 16px) center no-repeat;
                        width: 100%;
                        height: 56px;
                        padding-top: 38px;
                        padding-right: 50px;
                        position: relative;
                        border-radius: 8px;
                        border: 1px solid #8B98AA;
                    }

                    .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-center {
                        width: 100%;
                        flex-basis: 100%;
                        padding: 0px;
                        border: 0px;
                    }

                    .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-categories {
                        width: calc(100% + 2px);
                        border: 1px solid transparent;
                        border-top: 0px;
                        overflow: hidden;
                        position: absolute;
                        top: 0px;
                        left: -1px;
                        z-index: 1000;
                    }

                        .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-categories.opened {
                            background-color: #fff;
                            height: 280px;
                            border-color: #8B98AA;
                            border-radius: 8px;
                            overflow-y: auto;
                            top: 2px;
                        }

                            .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-categories.opened .recipe-add-items_cat {
                                display: flex !important;
                            }
                            .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-categories:not(:has(.selected)) .recipe-add-items_cat:first-child {
                                display: flex !important;
                                padding-top: 15px;
                                padding-bottom: 15px;
                                pointer-events: none;
                                order: -1;
                            }

                    .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-items_cat {
                        background-color: transparent !important;
                        color: #2E3948 !important;
                        font-size: 16px !important;
                        font-weight: 400 !important;
                        line-height: 24px !important;
                        border: 0px !important;
                        padding: 7px 16px;
                    }

                        .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-items_cat.selected {
                            padding-top: 15px;
                            padding-bottom: 15px;
                            pointer-events: none;
                            order: -1;
                        }

                        .recipe-add-modal .swal2-modal .swal2-html-container .recipe-add .recipe-add-items_cat:not(.selected) {
                            display: none !important;
                        }

            .recipe-add-modal .swal2-modal .swal2-actions {
                padding: 0px 16px;
                gap: 8px;
            }

                .recipe-add-modal .swal2-modal .swal2-actions button {
                    margin: 0px;
                    flex: 1 1 0%;
                }
                .recipe-add-modal .swal2-modal .recipe-add-search input {
                    box-shadow: none;
                    outline: 0px;
                }

                    .recipe-add-modal .swal2-modal .recipe-add-search input:focus {
                        border-color: #0061E6;
                    }

            .recipe-add-modal .swal2-modal .search-autocomplete {
                width: 100%;
                padding: 14px 16px;
                left: 0px;
                z-index: 1001;
            }

                .recipe-add-modal .swal2-modal .search-autocomplete .search-item-add {
                    position: relative;
                    width: 28px;
                    height: 28px;
                    text-indent: -999999999rem;
                }

                    .recipe-add-modal .swal2-modal .search-autocomplete .search-item-add img {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
    }

.recipe-add-modal .swal2-html-container {
        padding: 0 3px;
    }

.recipe-add-modal .recipe-add-checkbox {
        margin-top: 32px;
    }

.recipe-add-modal .recipe-add {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        height: 424px;
        margin-top: 32px;
    }

.recipe-add-modal .recipe-add-search input {
            border: 1px solid #F0F3F6;
        }

.recipe-add-modal .recipe-add-block {
        text-align: left;
        border-radius: 8px;
        border: 1px solid #F0F3F6;
        padding: 8px;
        height: 100%;
    }

.recipe-add-modal .recipe-add-items {
        display: flex;
        flex-flow: column;
        gap: 8px;
        height: 100%;
        overflow-y: auto;
        padding-right: 8px;
    }

.recipe-add-modal .recipe-add-items_cat,
    .recipe-add-modal .recipe-add-items_item {
        border-radius: 30px;
        border: 1px solid #DEE4EC;
        background: #FFF;
        padding: 8px 16px;
        width: 100%;
        transition: all .2s ease;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.recipe-add-modal .recipe-add-items_cat:hover,
        .recipe-add-modal .recipe-add-items_cat.selected,
        .recipe-add-modal .recipe-add-items_item:hover,
        .recipe-add-modal .recipe-add-items_item.selected {
            color: #FFFFFF;
            background: #0061E6;
        }

.recipe-add-modal .recipe-add-items_cat:hover span:before, .recipe-add-modal .recipe-add-items_cat.selected span:before, .recipe-add-modal .recipe-add-items_item:hover span:before, .recipe-add-modal .recipe-add-items_item.selected span:before {
                content: '\2713';
                font-size: 16px;
            }

.recipe-add-modal .recipe-add-items_cat:hover a img, .recipe-add-modal .recipe-add-items_cat.selected a img, .recipe-add-modal .recipe-add-items_item:hover a img, .recipe-add-modal .recipe-add-items_item.selected a img {
                filter: brightness(100)
            }

.recipe-add-modal .recipe-add-items_cat:hover .get-recipe-detail img, .recipe-add-modal .recipe-add-items_cat.selected .get-recipe-detail img, .recipe-add-modal .recipe-add-items_item:hover .get-recipe-detail img, .recipe-add-modal .recipe-add-items_item.selected .get-recipe-detail img {
                filter: brightness(0) invert(1);
            }

.recipe-add-modal .recipe-add-items_item span {
        display: flex;
        align-items: center;
    }

.recipe-add-modal .recipe-add-items_item span:before {
            content: "+";
            margin-right: 10px;
            font-size: 22px;
            font-weight: 300;
            width: 14px;
            height: 20px;
            display: block;
        }

.recipe-add-modal .recipe-add-right {
        background: #0061E6;
        padding: 16px;
    }

.recipe-add-modal .recipe-add-list {
        border-radius: 8px;
        overflow: hidden;
        padding: 0;
        height: auto;
        gap: 0;
    }

.recipe-add-modal .recipe-add-list-item {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 6px 10px;
        color: #6C7A8D;
        border: 1px solid #E8EBF0;
        border-top: none;
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
    }

.recipe-add-modal .swal2-actions {
        justify-content: end !important;
        align-items: end !important;
        float: right;
        width: 100%;
        padding-right: 20px;
    }

.recipe-add-modal .swal2-actions button {
            display: flex;
            height: 3.5rem;
            align-items: center;
            border-radius: 0.5rem !important;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 600;
        }

.recipe-add-modal .swal2-close {
        font-size: 23px;
        border: 2px solid #0061E6 !important;
        height: 26px;
        width: 26px;
        border-radius: 30px;
        position: absolute;
        top: 34px;
        right: 32px;
        padding: 0;
    }

.recipe-add-modal .swal2-cancel, .recipe-add-modal .swal2-deny {
        color: #0061E6;
        background-color: transparent !important;
        border: 1px solid #8b98aa;
    }

.recipe-add-modal .swal2-deny {
        left: 28px;
        text-align: left;
        position: absolute;
    }

.recipe-add-modal .swal2-confirm {
        background: #0061E6 !important;
        color: #ffffff;
    }

.recipe-add-modal.profile-modal .swal2-html-container {
            margin: 64px;
            margin-bottom: 0px;
        }

.recipe-add-modal.profile-modal .swal2-modal {
            height: auto;
            padding-bottom: 64px;
        }

.recipe-add-modal.profile-modal .swal2-actions {
            padding-right: 64px;
        }

.recipe-add-modal.profile-modal .swal2-deny {
            left: 64px;
        }

@media screen and (max-width: 1023.98px) {
                .recipe-add-modal.profile-modal .swal2-html-container {
                    padding: 0;
                    margin: 32px;
                }

                .recipe-add-modal.profile-modal .swal2-modal {
                    padding-bottom: 32px;
                }

                .recipe-add-modal.profile-modal .swal2-actions {
                    padding: 0 32px;
                    margin: 0;
                }

                .recipe-add-modal.profile-modal .swal2-deny {
                    position: relative;
                    left: auto;
                    text-align: center;
                }
    }

.recipe-category-detail-page .eatAddModal.show .eatAddModal-container {
                bottom: 0;
            }

.recipe-category-detail-page .eatAddModal.recipeDetailModal.show .eatAddModal-container {
                bottom: 0;
            }

.recipe-category-detail-page .eatAddModal #slide-over-title {
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

.recipe-category-detail-page .eatAddModal .eatAddModal-container {
            left: 0;
            right: 0;
            width: 100vw;
            padding: 0;
            height: 700px;
            bottom: -100%;
            top: auto;
            border-radius: 16px 16px 0px 0px;
            z-index: 51;
            overflow: hidden;
            transition: all .2s ease;
            pointer-events: none;
            display: flex;
            position: fixed;
        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content {
            pointer-events: auto;
            max-height: 100%;
            position: relative;
            width: 100vw;
        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container {
                -moz-column-gap: 1.5rem;
                column-gap: 1.5rem;
                justify-content: space-between;
                align-items: flex-start;
                display: flex;
                margin-top: 26px;
            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left {
                    --title-space: 35px;
                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper {
                        position: relative;
                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results {
                            background-color: #FFF;
                            width: 100%;
                            border: 1px solid #0061E6;
                            border-bottom-left-radius: 8px;
                            border-bottom-right-radius: 8px;
                            border-top: 0px;
                            padding: 14px 16px 14px 48px;
                            display: none;
                            max-height: 232px;
                            position: absolute;
                            top: 100%;
                            left: 0px;
                            z-index: 100;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.member-table .medicineInfoTable td .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item{
    gap: 0.5rem;
}

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item {
                                border-bottom: 1px solid #DEE4EC;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name {
                                    color: #2E3948;
                                    font-size: 16px;
                                    line-height: 24px;
                                    flex: 1 1 0%;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name span {
                                        color: #8B98AA;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group{
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.member-table .medicineInfoTable td .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group{
    gap: 0.5rem;
}

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a {
                                        background-color: #F0F3F6;
                                        color: #0061E6;
                                        font-size: 12px;
                                        line-height: 16px;
                                        display: block;
                                        padding: 4px 6px;
                                        border-radius: 8px;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item::before {
                                                content: '+ \00a0';
                                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item.added {
                                                background: #dee4ec;
                                                color: #000;
                                                cursor: default;
                                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item.added::before {
                                                    content: '\2713 \00a0';
                                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group svg {
                                        position: static !important;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .result-not-found {
                                padding-top: 34px;
                                padding-bottom: 34px;
                                gap: 12px;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .result-not-found img {
                                    position: static !important;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results:has(.result-not-found) {
                                padding: 0px;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper.search-active .recipe-dynamic-search-results {
                                display: block;
                                overflow-y: auto;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper.search-active #recipeSearchInput {
                                border-bottom-left-radius: 0px;
                                border-bottom-right-radius: 0px;
                                border-color: #0061E6 #0061E6 #DEE4EC #0061E6;
                            }

@media screen and (max-width: 767.98px) {
                            .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results {
                                padding: 8px 16px;
                            }

                                .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item {
                                    gap: 10px;
                                }

                                    .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name {
                                        font-size: 13px;
                                        line-height: 1.3;
                                    }
    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select {
                        -moz-column-gap: 1.5rem;
                        column-gap: 1.5rem;
                        justify-content: space-between;
                        align-items: flex-start;
                        display: flex;
                        margin-top: 26px;
                        height: 424px;
                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div {
                            border-radius: 8px;
                            border: 1px solid #F0F3F6;
                            padding: 8px;
                            height: 100%;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items {
                                display: flex;
                                flex-flow: column;
                                gap: 8px;
                                height: calc(100% - var(--title-space));
                                overflow-y: auto;
                                padding-right: 8px;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div {
                                    border-radius: 30px;
                                    border: 1px solid #DEE4EC;
                                    background: #FFF;
                                    padding: 8px 16px;
                                    width: 100%;
                                    transition: all .2s ease;
                                    font-size: 16px;
                                    font-weight: 400;
                                    line-height: 20px;
                                    cursor: pointer;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div:hover,
                                    .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div.selected {
                                        color: #FFFFFF;
                                        background: #0061E6;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item span {
                                        display: flex;
                                        align-items: center;
                                        cursor: pointer;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item span:before {
                                            content: "+";
                                            margin-right: 10px;
                                            font-size: 22px;
                                            font-weight: 300;
                                            width: 14px;
                                            height: 20px;
                                            display: block;
                                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item svg path {
                                        transition: stroke .2s ease-in-out;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.selected span:before, .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item:hover span:before {
                                            content: '\2713';
                                            font-size: 16px;
                                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.selected svg path, .recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item:hover svg path {
                                            stroke: #fff;
                                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added {
                                        background: #dee4ec;
                                        color: #000;
                                        cursor: default;
                                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added > span {
                                            pointer-events: none;
                                            cursor: not-allowed;
                                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added > span::before {
                                                content: '\2713';
                                                font-size: 16px;
                                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select__title {
                            color: #2E3948;
                            font-size: 20px;
                            line-height: 25px;
                            margin-bottom: 10px;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-left:has(.recipe-select-items_cat.selected) .recipe-select-right .recipe-select__title {
                            display: block;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right {
                    border-radius: 20px;
                    background: #0061E6;
                    padding: 16px;
                    height: 550px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart {
                        border-radius: 8px;
                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart .week-cart-btns {
                            display: none;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart-added-list {
                        max-height: 410px;
                    }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item {
                            background-color: #ffffff;
                            max-height: calc(100% - 66px);
                            overflow-y: auto;
                            border-radius: 8px;
                        }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart {
                                height: 100%;
                            }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart .week-cart-list-item:last-child {
                                    border-bottom-left-radius: 8px;
                                    border-bottom-right-radius: 8px;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart .cat-settings__menu {
                                    display: none !important;
                                }

.recipe-category-detail-page .eatAddModal .eatAddModal-content-bg{
    display: flex;
    height: 100%;
    width: 100vw;
    flex-direction: column;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-bottom: 1rem;
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.member-table .medicineInfoTable td .recipe-category-detail-page .eatAddModal .eatAddModal-content-bg{
    gap: 0.5rem;
}

.recipe-category-detail-page .eatAddModal .eatAddModal-title{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 30;
    width: 100vw;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    text-align: center;
}

@media (min-width: 640px){

    .recipe-category-detail-page .eatAddModal .eatAddModal-title{
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (max-width: 1023.98px) {
            .recipe-category-detail-page .eatAddModal .eatAddModal-container {
                height: 100vh;
            }
                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .eatAddModal-content-bg {
                        height: 100vh;
                        padding-top: 234px;
                        position: relative;
                    }

                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .eatAddModal-title {
                        display: none !important;
                    }

                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container {
                        margin-top: 20px;
                    }

                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left {
                            width: 100%;
                        }

                            .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper {
                                position: relative;
                            }
                                
                                .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results {
                                    padding: 8px 16px;
                                    max-height: 250px;
                                }

                                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item {
                                        gap: 10px;
                                    }

                                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name {
                                            font-size: 13px;
                                            line-height: 1.3;
                                        }

                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right {
                            width: calc(100% - 32px);
                            height: 200px !important;
                            position: absolute;
                            left: 16px;
                            bottom: 100%;
                            margin-bottom: 21px;
                            overflow-x: hidden;
                            overflow-y: auto;
                            overflow: hidden auto;
                        }

                            .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .recipe-fixed-buttons {
                                background-color: #fff;
                                width: 100%;
                                padding: 16px;
                                border-top: 1px solid #8B98AA;
                                display: flex;
                                gap: 10px;
                                position: fixed;
                                left: 0px;
                                bottom: 0px;
                            }

                                .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .recipe-fixed-buttons .recipe-right-btn {
                                    background-color: #0061E6;
                                    color: #fff;
                                }

                            .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .week-cart-added-list {
                                max-height: 130px;
                            }

                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select {
                            flex-direction: column;
                            justify-content: flex-start;
                            margin-top: 16px;
                            height: auto;
                        }

                            .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left {
                                background: url('../img/icon/chevron_down.svg') calc(100% - 16px) center no-repeat;
                                width: 100%;
                                height: 56px;
                                padding-top: 38px;
                                padding-right: 50px;
                                position: relative;
                                border-radius: 8px;
                                border: 1px solid #8B98AA;
                            }

                                .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories {
                                    width: calc(100% + 2px);
                                    border: 1px solid transparent;
                                    border-top: 0px;
                                    overflow: hidden;
                                    position: absolute;
                                    top: 0px;
                                    left: -1px;
                                    z-index: 1000;
                                }

                                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories.opened {
                                        background-color: #fff;
                                        height: 280px;
                                        border-color: #8B98AA;
                                        border-radius: 8px;
                                        overflow-y: auto;
                                        top: 2px;
                                    }

                                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories.opened .recipe-select-items_cat {
                                            display: flex !important;
                                        }
                                        .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories:not(:has(.selected)) .recipe-select-items_cat:first-child {
                                            display: flex !important;
                                            padding-top: 15px;
                                            padding-bottom: 15px;
                                            pointer-events: none;
                                            order: -1;
                                        }

                                .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat {
                                    background-color: transparent !important;
                                    color: #2E3948 !important;
                                    font-size: 16px !important;
                                    font-weight: 400 !important;
                                    line-height: 24px !important;
                                    border: 0px !important;
                                    padding: 7px 16px;
                                }

                                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat.selected {
                                        padding-top: 15px;
                                        padding-bottom: 15px;
                                        pointer-events: none;
                                        order: -1;
                                    }

                                    .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat:not(.selected) {
                                        display: none !important;
                                    }

                            .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-right {
                                width: 100%;
                                margin-top: 16px;
                                border: 0px;
                                padding: 0px;
                                height: auto;
                            }

                                .recipe-category-detail-page .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-right > .recipe-select-recipes {
                                    padding: 0px;
                                    height: auto;
                                }
    }

.recipe-category-detail-page .week-cart-list .week-cart-list-item {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            padding: 6px 10px;
            color: #6C7A8D;
            border: 1px solid #E8EBF0;
            border-top: none;
            display: flex;
            justify-content: space-between;
        }

.recipe-category-detail-page .week-cart-list .week-cart-list-item.not-contain {
                color: red;
            }

.recipe-category-detail-page .week-cart-list .week-cart-list-item span {
                cursor: pointer;
            }

.recipe-category-detail-page .week-cart-list .week-cart-list-item span.cat-settings {
                    margin-right: -8px;
                }

.recipe-category-detail-page .week-cart-list .week-cart-list-item span em {
                    font-style: normal;
                }

.recipe-category-detail-page .week-cart-list .week-cart-list-item span em.not-contain {
                        color: red;
                    }

.recipe-info-page .note-block {
        border-radius: 4px;
        padding: 16px;
    }

.recipe-info-page .note-block.trick-note {
            background: rgba(45, 180, 255, 0.10);
        }

.recipe-info-page .note-block.notes-note {
            background: #FFF7E1;
        }

.recipe-info-page .note-block .new-recipe-options {
            color: #4F4F4F;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
        }

.recipe-info-page details {
        background: #F9FAFB;
    }

.recipe-info-page details[open] summary:after {
                content: '-';
            }

.recipe-info-page .helper-item-list summary {
            border-radius: 4px;
            background: #F9FAFB;
            padding: 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;
            color: #000000;
        }

.recipe-info-page .helper-item-list summary::marker {
                display: none;
                width: 0;
                content: '';
                font-size: 0;
            }

.recipe-info-page .helper-item-list summary:after {
                content: '+';
                float: right;
                color: #4F4F4F;
                font-size: 26px;
                font-weight: 400;
            }

.recipe-info-page .helper-item-list .helper-item-info {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

.recipe-info-page .helper-item-list .helper-materials p,
        .recipe-info-page .helper-item-list .helper-preparation p {
            color: #4F4F4F;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            width: 100%;
        }

#photoModal .photo-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

#photoModal .photo-list__item {
                border-radius: 16px;
                overflow: hidden;
                width: 19.9%;
                cursor: pointer;
                border: 5px solid #fff;
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                transition: all .2s ease-in-out;
            }

#photoModal .photo-list__item img {
                    height: 100%;
                    width: 100%;
                    -o-object-fit: cover;
                       object-fit: cover;
                }

#photoModal .photo-list__item.selected, #photoModal .photo-list__item:hover {
                    border-color: #0061e6;
                }

#photoModal .drawer-container {
        padding-bottom: 0;
    }

#photoModal .alarm-action-btns {
        position: sticky;
        background: #fff;
        padding: 20px 0;
        padding-left: 8px;
        left: 0;
        right: 0;
        bottom: 0;
    }

.filtre-modal .title {
        padding: 17px 0;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.filtre-modal #filter-items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 56px;
        border-bottom: 1px solid #DEE4EC;
    }

.filtre-modal .filter-item {
        border-radius: 16px;
        border: 1px solid #DEE4EC;
        color: #000;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        padding: 4px 16px;
        cursor: pointer;
        transition: all .05s ease-in-out;
    }

.filtre-modal .filter-item.disabled,
    .filtre-modal .filter-item:hover {
        background: #F2F2F2;
        color: #6C7A8D;
        -webkit-text-decoration: line-through;
        -webkit-text-decoration: line-through;
        text-decoration: line-through;
    }

.filtre-modal .swal2-actions {
        justify-content: end !important;
        align-items: end !important;
        float: right;
        width: 100%;
        padding-right: 20px;
    }

.filtre-modal .swal2-actions button {
            display: flex;
            height: 3.5rem;
            align-items: center;
            border-radius: 0.5rem !important;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 600;
        }

.filtre-modal .swal2-close {
        font-size: 23px;
        border: 2px solid #0061E6 !important;
        height: 26px;
        width: 26px;
        border-radius: 30px;
        position: absolute;
        top: 34px;
        right: 32px;
        padding: 0;
    }

.filtre-modal .swal2-cancel {
        color: #0061E6;
        background-color: transparent !important;
        border: 1px solid #8b98aa;
    }

.filtre-modal .swal2-confirm {
        background: #0061E6 !important;
        color: #ffffff;
    }

@media screen and (max-width: 767.98px) {
        .filtre-modal .swal2-html-container {
            margin: 32px 24px;
        }

        .filtre-modal .title {
            color: #333333;
            padding: 0px;
            margin-bottom: 24px;
        }

        .filtre-modal .swal2-close {
            display: none !important;
        }

        .filtre-modal #filter-items {
            padding-bottom: 0px;
            border-bottom: 0px;
        }

        .filtre-modal .swal2-actions {
            padding: 0px 24px 8px 24px;
            margin: 0px;
            gap: 8px;
        }

            .filtre-modal .swal2-actions button {
                width: auto;
                flex: 1 1 0%;
                margin: 0px;
            }
    }

.guide-detail .guide-item {
        border-radius: 8px;
        background: #F9FAFB;
        padding: 32px;
        margin-bottom: 32px
    }

.guide-detail .guide-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        margin-bottom: 16px;
        color: #0061E6;
    }

.guide-detail .guide-text {
        font-size: 16px;
        font-weight: 300;
        line-height: 26px;
    }

.payment-page .chart__info-item {
        position: relative;
    }

.payment-page .chart__info-item:before {
            content: '';
            width: 12px;
            height: 12px;
            border-radius: 30px;
            background: #7000FF;
            display: inline-block;
            margin-right: 6px;
        }

.payment-page .payment-info {
        margin-top: 20px;
        border-bottom: 1px dotted #E0E0E0;
        padding-bottom: 20px;
    }

.payment-page .payment-info__block-title {
                font-size: 12px;
                font-weight: 300;
                line-height: 24px;
                color: #828282;
            }

.payment-page .payment-info__block-amount {
                font-size: 16px;
                font-weight: 400;
                line-height: 26px;
            }

.payment-page .drawer-container {
            max-width: 450px;
        }

.payment-page .drawer-container label {
                margin-bottom: 8px;
                display: block;
            }

.food-create-page .food-main-cat .remove, .food-edit-page .food-main-cat .remove {
            display: none !important;
        }

.food-create-page .food-item-btn, .food-edit-page .food-item-btn {
        display: flex;
        align-items: center;
        color: #0061E6;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        cursor: pointer;
    }

.food-create-page .food-item-remove, .food-edit-page .food-item-remove {
        margin-top: 20px;
    }

.food-create-page .input-list, .food-edit-page .input-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

.food-create-page .input-list .input-list_item, .food-edit-page .input-list .input-list_item {
            position: relative;
            padding-left: 20px;
            margin-bottom: 30px;
        }

.food-create-page .input-list .input-list_item label, .food-edit-page .input-list .input-list_item label {
                color: #6C7A8D;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }

.food-create-page .input-list .input-list_item input, .food-edit-page .input-list .input-list_item input {
                height: 36px;
                box-shadow: 0 0 rgba(0, 0, 0, 0);
                display: block;
                margin-top: 0.25rem;
            }

@media screen and (max-width: 1023.98px) {

.food-create-page .input-list .input-list_item, .food-edit-page .input-list .input-list_item{
                display: flex;
                align-items: flex-start;
                gap: 16px;
    }

                .food-create-page .input-list .input-list_item label, .food-edit-page .input-list .input-list_item label, .food-create-page .input-list .input-list_item .form-group, .food-edit-page .input-list .input-list_item .form-group {
                    flex: 1 1 0%;
                }

                .food-create-page .input-list .input-list_item label, .food-edit-page .input-list .input-list_item label, .food-create-page .input-list .input-list_item:after, .food-edit-page .input-list .input-list_item:after {
                    margin-top: 15px;
                }

                .food-create-page .input-list .input-list_item .form-group input, .food-edit-page .input-list .input-list_item .form-group input {
                    width: 100%;
                    margin-top: 0px;
                }
    }

.food-create-page .input-list_item:after, .food-edit-page .input-list_item:after {
        content: '';
        background-color: var(--circleColor);
        width: 16px;
        height: 16px;
        position: absolute;
        border-radius: 30px;
        top: 2px;
        left: 0;
    }

.food-items:has(.result-not-found) {
        display: block;
    }

.food-edit-page .food-unit-item {
        position: relative;
        margin: 0;
    }

.food-edit-page .food-unit-item:not(:first-child) {
            margin-top: 16px;
        }

.food-edit-page .food-unit-item:not(:first-child) label {
                display: none;
            }

.food-edit-page .food-unit-item .food-item-remove {
            position: absolute;
            margin: 0;
            bottom: 14px;
        }

@media screen and (max-width: 767.98px) {
            .food-edit-page .food-unit-item > div {
                flex-wrap: wrap;
                row-gap: 12px;
            }
                    .food-edit-page .food-unit-item > div > div:not(.w-12) {
                        flex: 1 1 0%;
                    }

                    .food-edit-page .food-unit-item > div > div:last-child {
                        width: 100%;
                        flex-basis: 100%;
                    }

                .food-edit-page .food-unit-item > div .food-item-remove {
                    position: static;
                    margin-bottom: 10px;
                }
    }

.week-item {
    width: 14%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.week-item.is-cheatday .draggable-container,
        .week-item.is-cheatday .add-week-cart {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
        }

.week-item .add-week-cart {
        background: #FFF;
        color: #0061E6;
        font-size: 12px;
        font-weight: 600;
        line-height: 24px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #8B98AA;
        cursor: pointer;
    }

.week-item .week-title {
        border-radius: 8px 8px 2px 2px;
        border-bottom: 2px solid #6C7A8D;
        background: #6C7A8D;
        color: #FFF;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
    }

.week-item .draggable-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

.week-item .draggable-container .week-cart-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.week-item .draggable-container .week-cart-title label {
                display: inline-block;
            }

.week-item .draggable-container .week-cart-title label input {
                    display: none;
                }

.week-item .draggable-container .week-cart-list-item .detail {
                display: none !important;
            }

.week-item .week-actions{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 0.25rem;
    gap: 0.25rem;
}

@media (min-width: 1640px){

    .week-item .week-actions{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.week-item .cheatday-btn {
        background: #FFF;
        color: #0061E6;
        font-size: 12px;
        font-weight: 600;
        line-height: 24px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #8B98AA;
        cursor: pointer;
    }

.week-item .cheatday-btn input{
    margin-right: 0.25rem;
}

.week-cart > div:not(.week-cart-btns) {
        background-color: #FFFFFF;
    }

.week-cart > .week-cart-added-list {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        display: block;
    }

.week-cart > .week-cart-added-list .week-cart-list-item {
            border-radius: inherit;
        }

.week-cart.highlight > div:not(.week-cart-btns) {
        background: #caffc3;
    }

.week-cart.sortable-chosen > div:not(.week-cart-btns) {
        background: #b8ceff;
    }

.week-cart .week-cart-title {
        border: 1px solid #E8EBF0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        color: #0061E6;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        padding: 6px 10px;
        overflow: hidden;
    }

.week-cart .week-cart-title label {
            display: none;
        }

.week-cart .week-cart-list .week-cart-list-item {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            padding: 6px 10px;
            color: #6C7A8D;
            border: 1px solid #E8EBF0;
            border-top: none;
            display: flex;
            justify-content: space-between;
        }

.week-cart .week-cart-list .week-cart-list-item.not-contain {
                color: red;
            }

.week-cart .week-cart-list .week-cart-list-item span {
                cursor: pointer;
            }

.week-cart .week-cart-list .week-cart-list-item span.cat-settings {
                    margin-right: -8px;
                }

.week-cart .week-cart-list .week-cart-list-item span em {
                    font-style: normal;
                }

.week-cart .week-cart-list .week-cart-list-item span em.not-contain {
                        color: red;
                    }

.week-cart .week-cart-btns {
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }

.week-cart .week-cart-btns .week-cart-btns-item {
            border-radius: 0px 0px 8px 8px;
            background: #F0F3F6;
            padding: 4px 10px;
            height: 25px;
            line-height: 25px;
            cursor: pointer;
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-wrap: nowrap;
        }

.member-table .medicineInfoTable td .week-cart .week-cart-btns .week-cart-btns-item{
    gap: 0.5rem;
}

.week-cart .week-cart-btns .week-cart-btns-item.eat-add {
                width: 60%;
                color: #0061E6;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
            }

.donot-include {
    position: relative;
}

.donot-include .donot-include_item{
    font-size: 0.875rem;
    line-height: 1.25rem;
        padding-left: 16px;
        padding-right: 8px;
        height: 50px;
        border-radius: 8px;
        border: 1px solid #8B98AA;
        position: relative;
        z-index: 41;
}

.donot-include.active .bg-overlay {
            display: block;
            z-index: 100;
        }

.donot-include.active .donot-include_item {
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            border-bottom-color: #fff;
            z-index: 51;
        }

.donot-include.active body {
            overflow: hidden;
        }

.donot-include.active .donot-include-popup {
            display: block;
            width: 100vw;
            max-width: 100%;
            top: 168px;
            right: 0;
            z-index: 101;
            left: auto;
            padding: 32px;
            position: fixed;
            border-radius: 16px;
            height: calc(100vh - 170px);
            overflow-y: auto;
        }

.donot-include.active .donot-include-popup .tabs{
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.member-table .medicineInfoTable td .donot-include.active .donot-include-popup .tabs{
    gap: 0.5rem;
}

.donot-include.active .donot-include-popup .type-flex-list{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 2rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    grid-row-gap: 0.5rem;
    row-gap: 0.5rem;
}

#sort + .ts-wrapper .ts-control.donot-include.active .donot-include-popup .type-flex-list {
                min-width: 100%;
                max-width: 100%;
            }

@media (min-width: 1460px){

    .donot-include.active .donot-include-popup .type-flex-list{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.donot-include.active .donot-include-popup .type-flex-list .donot-include-popup-item{
    display: inline-block;
}

.donot-include.active .donot-include-popup .donot-include-popup-items {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

.donot-include.active .donot-include-popup .donot-include-popup-items .donot-include-popup-item,
                .donot-include.active .donot-include-popup .donot-include-popup-items .donot-diet-cat-item {
                    border-radius: 16px;
                    border: 1px solid #DEE4EC;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 20px;
                    padding: 4px 16px;
                    cursor: pointer;
                    transition: all .05s ease-in-out;
                }

.donot-include.active .donot-include-popup .donot-include-popup-items .donot-include-popup-item.disabled,
                    .donot-include.active .donot-include-popup .donot-include-popup-items .donot-include-popup-item:hover,
                    .donot-include.active .donot-include-popup .donot-include-popup-items .donot-diet-cat-item.disabled,
                    .donot-include.active .donot-include-popup .donot-include-popup-items .donot-diet-cat-item:hover {
                        background: #F2F2F2;
                        color: #6C7A8D;
                        -webkit-text-decoration: line-through;
                        text-decoration: line-through;
                    }

.donot-include.active .donot-include-popup .donot-include-popup-items h3 {
                    font-weight: 400;
                    margin-bottom: 10px;
                }

.donot-include.active .donot-include-popup .donot-include-popup-items hr {
                    width: 100%;
                    display: block;
                    margin-top: 1rem;
                    margin-bottom: .5rem;
                }

.donot-include.active .donot-include-popup .donot-include-popup-items .donot-diet-cat-item:hover {
                        color: #000;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                    }

.donot-include.active .donot-include-popup .donot-include-popup-items .donot-diet-cat-item.disabled {
                        background: #0061e6;
                        color: #ffffff;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                        border-color: #0061e6;
                    }

.donot-include.active .donot-include-popup .all-week-input-wrapper{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: none;
    width: 100%;
}

#sort + .ts-wrapper .ts-control.donot-include.active .donot-include-popup .all-week-input-wrapper {
                min-width: 100%;
                max-width: 100%;
            }

.medisupp-backdrop.donot-include.active .donot-include-popup .all-week-input-wrapper {
        display: none;
    }


    .draft-selfnote.donot-include.active .donot-include-popup .all-week-input-wrapper{
    display: none !important;
}

.donot-include.active .donot-include-popup .donot-include-popup-actions{
    position: sticky;
    bottom: -2rem;
    left: 0px;
    z-index: 10;
    margin-top: auto;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

#sort + .ts-wrapper .ts-control.donot-include.active .donot-include-popup .donot-include-popup-actions {
                min-width: 100%;
                max-width: 100%;
            }

.member-table .medicineInfoTable td .donot-include.active .donot-include-popup .donot-include-popup-actions{
    gap: 0.5rem;
}

.eatAddModal.show .eatAddModal-container {
            bottom: 0;
        }

.eatAddModal #slide-over-title {
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.eatAddModal .eatAddModal-container {
        left: 0;
        right: 0;
        width: 100vw;
        padding: 0;
        height: 700px;
        bottom: -100%;
        top: auto;
        border-radius: 16px 16px 0px 0px;
        z-index: 51;
        overflow: hidden;
        transition: all .2s ease;
        pointer-events: none;
        display: flex;
        position: fixed;
    }

.eatAddModal .eatAddModal-content {
        pointer-events: auto;
        max-height: 100%;
        position: relative;
        width: 100vw;
    }

.eatAddModal .eatAddModal-content .recipe-container {
            -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
            justify-content: space-between;
            align-items: flex-start;
            display: flex;
            margin-top: 26px;
        }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left {
                --title-space: 35px;
            }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select {
                    -moz-column-gap: 1.5rem;
                    column-gap: 1.5rem;
                    justify-content: space-between;
                    align-items: flex-start;
                    display: flex;
                    margin-top: 26px;
                    height: 424px;
                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div {
                        border-radius: 8px;
                        border: 1px solid #F0F3F6;
                        padding: 8px;
                        height: 100%;
                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items {
                            display: flex;
                            flex-flow: column;
                            gap: 8px;
                            height: calc(100% - var(--title-space));
                            overflow-y: auto;
                            padding-right: 8px;
                        }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div {
                                border-radius: 30px;
                                border: 1px solid #DEE4EC;
                                background: #FFF;
                                padding: 8px 16px;
                                width: 100%;
                                transition: all .2s ease;
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 20px;
                                cursor: pointer;
                            }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div:hover,
                                .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select > div .recipe-select-items > div.selected {
                                    color: #FFFFFF;
                                    background: #0061E6;
                                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item span {
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item span:before {
                                        content: "+";
                                        margin-right: 10px;
                                        font-size: 22px;
                                        font-weight: 300;
                                        width: 14px;
                                        height: 20px;
                                        display: block;
                                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item[data-cat-id] {
                                    border-color: #FFA800;
                                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item[data-cat-id] span:before {
                                            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><g clip-path="url(%23clip0_2442_20614)"><path d="M7.5 3.97237H11.5M9.5 2V6M5.03137 3.53137L4.96863 3.46863C4.79568 3.29568 4.7092 3.2092 4.60828 3.14736C4.51881 3.09253 4.42127 3.05213 4.31923 3.02763C4.20414 3 4.08185 3 3.83726 3H2.1C1.53995 3 1.25992 3 1.04601 3.10899C0.857847 3.20487 0.704867 3.35785 0.608993 3.54601C0.5 3.75992 0.5 4.03995 0.5 4.6V8.4C0.5 8.96005 0.5 9.24008 0.608993 9.45399C0.704867 9.64215 0.857847 9.79513 1.04601 9.891C1.25992 10 1.53995 10 2.1 10H7.9C8.46005 10 8.74008 10 8.95399 9.891C9.14215 9.79513 9.29513 9.64215 9.39101 9.45399C9.5 9.24008 9.5 8.96005 9.5 8.4" stroke="%232E3948" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_2442_20614"><rect width="12" height="12" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
                                        }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item svg path {
                                    transition: stroke .2s ease-in-out;
                                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.selected span:before, .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item:hover span:before {
                                        content: '\2713';
                                        font-size: 16px;
                                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.selected svg path, .eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item:hover svg path {
                                        stroke: #fff;
                                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added {
                                    background: #dee4ec;
                                    color: #000;
                                    cursor: default;
                                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added > span {
                                        pointer-events: none;
                                        cursor: not-allowed;
                                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select .recipe-select-right .recipe-select-items .recipe-select-items_item.added > span::before {
                                            content: '\2713';
                                            font-size: 16px;
                                        }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left .recipe-select__title {
                        color: #2E3948;
                        font-size: 20px;
                        line-height: 25px;
                        margin-bottom: 10px;
                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-left:has(.recipe-select-items_cat.selected) .recipe-select-right .recipe-select__title {
                        display: block;
                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right {
                border-radius: 20px;
                background: #0061E6;
                padding: 16px;
                height: 550px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart {
                    border-radius: 8px;
                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart .week-cart-btns {
                        display: none;
                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right .week-cart-added-list {
                    max-height: 410px;
                }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item {
                        background-color: #ffffff;
                        max-height: calc(100% - 66px);
                        overflow-y: auto;
                        border-radius: 8px;
                    }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart {
                            height: 100%;
                        }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart .week-cart-list-item:last-child {
                                border-bottom-left-radius: 8px;
                                border-bottom-right-radius: 8px;
                            }

.eatAddModal .eatAddModal-content .recipe-container .recipe-right__scrollbar .recipe-right-week-item .week-cart .cat-settings__menu {
                                display: none !important;
                            }

.eatAddModal .eatAddModal-content-bg{
    display: flex;
    height: 100%;
    width: 100vw;
    flex-direction: column;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-bottom: 1rem;
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.member-table .medicineInfoTable td .eatAddModal .eatAddModal-content-bg{
    gap: 0.5rem;
}

.eatAddModal .eatAddModal-title{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 30;
    width: 100vw;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    text-align: center;
}

@media (min-width: 640px){

    .eatAddModal .eatAddModal-title{
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (max-width: 1023.98px) {
        .eatAddModal .eatAddModal-container {
            height: 100vh;
        }
                .eatAddModal .eatAddModal-container .eatAddModal-content .eatAddModal-content-bg {
                    height: 100vh;
                    padding-top: 234px;
                    position: relative;
                }

                .eatAddModal .eatAddModal-container .eatAddModal-content .eatAddModal-title {
                    display: none !important;
                }

                .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container {
                    margin-top: 20px;
                }

                    .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-left {
                        width: 100%;
                    }

                    .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right {
                        width: calc(100% - 32px);
                        height: 200px !important;
                        position: absolute;
                        left: 16px;
                        bottom: 100%;
                        margin-bottom: 21px;
                        overflow-x: hidden;
                        overflow-y: auto;
                        overflow: hidden auto;
                    }

                        .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .recipe-fixed-buttons {
                            background-color: #fff;
                            width: 100%;
                            padding: 16px;
                            border-top: 1px solid #8B98AA;
                            display: flex;
                            gap: 10px;
                            position: fixed;
                            left: 0px;
                            bottom: 0px;
                        }

                            .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .recipe-fixed-buttons .recipe-right-btn {
                                background-color: #0061E6;
                                color: #fff;
                            }

                        .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-right .week-cart-added-list {
                            max-height: 130px;
                        }

                    .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select {
                        flex-direction: column;
                        justify-content: flex-start;
                        margin-top: 16px;
                        height: auto;
                    }

                        .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left {
                            background: url('../img/icon/chevron_down.svg') calc(100% - 16px) center no-repeat;
                            width: 100%;
                            height: 56px;
                            padding-top: 38px;
                            padding-right: 50px;
                            position: relative;
                            border-radius: 8px;
                            border: 1px solid #8B98AA;
                        }

                            .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories {
                                width: calc(100% + 2px);
                                border: 1px solid transparent;
                                border-top: 0px;
                                overflow: hidden;
                                position: absolute;
                                top: 0px;
                                left: -1px;
                                z-index: 1000;
                            }

                                .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories.opened {
                                    background-color: #fff;
                                    height: 280px;
                                    border-color: #8B98AA;
                                    border-radius: 8px;
                                    overflow-y: auto;
                                    top: 2px;
                                }

                                    .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories.opened .recipe-select-items_cat {
                                        display: flex !important;
                                    }
                                    .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-categories:not(:has(.selected)) .recipe-select-items_cat:first-child {
                                        display: flex !important;
                                        padding-top: 15px;
                                        padding-bottom: 15px;
                                        pointer-events: none;
                                        order: -1;
                                    }

                            .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat {
                                background-color: transparent !important;
                                color: #2E3948 !important;
                                font-size: 16px !important;
                                font-weight: 400 !important;
                                line-height: 24px !important;
                                border: 0px !important;
                                padding: 7px 16px;
                            }

                                .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat.selected {
                                    padding-top: 15px;
                                    padding-bottom: 15px;
                                    pointer-events: none;
                                    order: -1;
                                }

                                .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-left .recipe-select-items_cat:not(.selected) {
                                    display: none !important;
                                }

                        .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-right {
                            width: 100%;
                            margin-top: 16px;
                            border: 0px;
                            padding: 0px;
                            height: auto;
                        }

                            .eatAddModal .eatAddModal-container .eatAddModal-content .recipe-container .recipe-select .recipe-select-right > .recipe-select-recipes {
                                padding: 0px;
                                height: auto;
                            }
    }

.food-cat-item input {
        display: none;
    }

.food-cat-item label {
        background-color: #FFF;
        color: #000;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        display: flex;
        padding: 8px 16px;
        align-items: center;
        gap: 8px;
        border: 1px solid #DEE4EC;
        border-radius: 16px;
    }

.food-cat-item label::before {
            content: "+";
        }

.food-cat-item input:checked + label {
        background-color: #0061E6;
        color: #FFF;
    }

.food-cat-item input:checked + label::before {
            content: '\2713';
        }

.food-cat-item:not(:first-child) {
        margin-top: 4px;
    }

.guide-details .comment-rate, .recipe-info-page .comment-rate {
        color: #8B98AA;
        font-size: 16px;
        line-height: 24px;
        white-space: nowrap;
        align-self: center;
        display: flex;
        align-items: center;
    }

.nutrition-plan-item .block-item_icon{
    margin-top: 0.25rem;
    min-width: 2.5rem;
}

.nutrition-plan-item .nutrition-plan-item__description {
        color: #2E3948;
        font-size: 14px;
        line-height: 20px;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.nutrition-plan-item .block-item_props {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

@media screen and (max-width: 767.98px) {

.nutrition-plan-item .block-item_props {
            gap: 12px;
    }
    }

.nutrition-plan-item .block-item_props-item {
        display: flex;
        align-items: center;
        gap: 2px;
    }

.nutrition-plan-item:hover .block-item_title {
            -webkit-text-decoration: underline;
            text-decoration: underline;
        }

.plan-details .top-right-bar .show-mobile {
            min-width: 16px;
            width: 16px;
            height: auto;
            align-self: center;
        }

.plan-details .top-right-bar .comment-rate {
            color: #8B98AA;
            font-size: 16px;
            line-height: 24px;
            white-space: nowrap;
            align-self: center;
            display: flex;
            align-items: center;
            min-width: -moz-max-content;
            min-width: max-content;
        }

@media screen and (max-width: 767.98px) {
        .plan-details .sub-tab-btns {
            gap: 8px;
        }

            .plan-details .sub-tab-btns a {
                font-size: 12px;
                padding-left: 16px;
                padding-right: 16px;
            }
    }

@media screen and (max-width: 1169.98px) {
        .nutrition-plan-wrapper .page-top__filter-icon {
            background-image: url('/assets/img/icon/gear-blue.svg') !important;
        }
            .nutrition-plan-wrapper .page-top-filter-body.flex-wrap {
                row-gap: 0;
                flex-direction: row;
            }

            .nutrition-plan-wrapper .page-top-filter-body > .btn {
                display: none;
            }

                .nutrition-plan-wrapper .page-top-filter-body > #deleteNutritionPlan.btn, .nutrition-plan-wrapper .page-top-filter-body > .btn.plan-demo:not(#does-not-exist) {
                    height: 46px;
                    display: flex;
                    flex: 1 0 0%;
                    order: -2;
                    justify-content: center;
                }

            .nutrition-plan-wrapper .page-top-filter-body .donot-include_item {
                pointer-events: none;
            }

        .nutrition-plan-wrapper .page-top-filter-wrapper {
            height: 90% !important;
        }
            .nutrition-plan-wrapper .top-right-bar .btn {
                display: none !important;
            }

            .nutrition-plan-wrapper .top-right-bar .comment-rate {
                width: 100%;
                padding-bottom: 10px;
                border-bottom: 1px solid #DEE4EC;
            }

        .nutrition-plan-wrapper .donot-include {
            width: 100%;
            height: calc(100% - 94px);
        }

            .nutrition-plan-wrapper .donot-include .donot-include_item {
                color: #0061E6;
                font-size: 18px;
                font-weight: 500;
                line-height: normal;
                height: auto;
                border: 0px;
                padding: 0px;
            }

                .nutrition-plan-wrapper .donot-include .donot-include_item svg {
                    display: none;
                }

            .nutrition-plan-wrapper .donot-include .donot-include-popup {
                display: block;
                height: calc(100% - 23px);
            }

                .nutrition-plan-wrapper .donot-include .donot-include-popup .tabs {
                    height: 100%;
                }
                        .nutrition-plan-wrapper .donot-include .donot-include-popup .tabs .tab-nav li {
                            width: auto;
                        }

                            .nutrition-plan-wrapper .donot-include .donot-include-popup .tabs .tab-nav li a {
                                padding-left: 10px;
                                padding-right: 10px;
                            }

                    .nutrition-plan-wrapper .donot-include .donot-include-popup .tabs .tab-content {
                        height: calc(100% - 106px);
                        overflow-x: hidden;
                        overflow-y: auto;
                        overflow: hidden auto;
                    }

                .nutrition-plan-wrapper .donot-include .donot-include-popup .tab-nav-scrollbar {
                    border-top: 0px;
                }

                .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                }

                    .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items hr {
                        width: 100%;
                        display: block;
                        margin-top: 1rem;
                        margin-bottom: .5rem;
                    }

                    .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items h3 {
                        color: #000;
                        font-size: 16px;
                        font-weight: 500;
                    }

                    .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items .donot-include-popup-item,
                    .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items .donot-diet-cat-item {
                        border-radius: 16px;
                        border: 1px solid #DEE4EC;
                        color: #000;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 20px;
                        padding: 4px 16px;
                        cursor: pointer;
                    }

                        .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items .donot-include-popup-item.disabled, .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items .donot-diet-cat-item.disabled {
                            background: #F2F2F2;
                            color: #6C7A8D;
                            -webkit-text-decoration: line-through;
                            text-decoration: line-through;
                        }

                    .nutrition-plan-wrapper .donot-include .donot-include-popup .donot-include-popup-items .type-flex-list {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;
                    }
            .nutrition-plan-wrapper.plan-details .all-week-input-wrapper {
                display: none;
            }

        .nutrition-plan-wrapper .plan-form-wrapper, .nutrition-plan-wrapper .new-week-plan-create {
            padding-top: 10px;
        }

            .nutrition-plan-wrapper .plan-form-wrapper .tab-nav, .nutrition-plan-wrapper .new-week-plan-create .tab-nav {
                border-top: 0px;
            }

                .nutrition-plan-wrapper .plan-form-wrapper .tab-nav li, .nutrition-plan-wrapper .new-week-plan-create .tab-nav li {
                    width: auto;
                    min-width: 130px;
                }

                    .nutrition-plan-wrapper .plan-form-wrapper .tab-nav li > a, .nutrition-plan-wrapper .new-week-plan-create .tab-nav li > a {
                        padding-top: 7px;
                        padding-bottom: 7px;
                        padding-right: 26px;
                        border-bottom-width: 2px;
                    }

                .nutrition-plan-wrapper .plan-form-wrapper .tab-nav .new-week-add, .nutrition-plan-wrapper .new-week-plan-create .tab-nav .new-week-add {
                    height: 42px;
                }

            .nutrition-plan-wrapper .plan-form-wrapper .plans, .nutrition-plan-wrapper .plan-form-wrapper .week-plans, .nutrition-plan-wrapper .new-week-plan-create .plans, .nutrition-plan-wrapper .new-week-plan-create .week-plans {
                flex-direction: column;
            }

                .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item {
                    width: 100%;
                    text-align: left;
                }

                    .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .week-title, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .week-title, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .week-title, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .week-title {
                        line-height: 38px;
                        text-align: left;
                        padding-left: 16px;
                        padding-right: 16px;
                        position: relative;
                        border-radius: 8px;
                    }

                        .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .week-title::after {
                            content: '+';
                            font-size: 20px;
                            font-weight: 300;
                            text-align: center;
                            width: 12px;
                            position: absolute;
                            right: 16px;
                            top: 50%;
                            transform: translateY(-50%);
                        }

                        .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .week-title::after {
                            content: '+';
                            font-size: 20px;
                            font-weight: 300;
                            text-align: center;
                            width: 12px;
                            position: absolute;
                            right: 16px;
                            top: 50%;
                            transform: translateY(-50%);
                        }

                        .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .week-title::after {
                            content: '+';
                            font-size: 20px;
                            font-weight: 300;
                            text-align: center;
                            width: 12px;
                            position: absolute;
                            right: 16px;
                            top: 50%;
                            transform: translateY(-50%);
                        }

                        .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .week-title::after {
                            content: '+';
                            font-size: 20px;
                            font-weight: 300;
                            text-align: center;
                            width: 12px;
                            position: absolute;
                            right: 16px;
                            top: 50%;
                            transform: translateY(-50%);
                        }

                    .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .draggable-container, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .draggable-container {
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                        border-width: 0px 1px 1px 1px;
                        border-color: #6C7A8D;
                        display: none;
                    }

                        .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .draggable-container .week-cart, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .draggable-container .week-cart, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .draggable-container .week-cart, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .draggable-container .week-cart {
                            padding: 10px 6px;
                        }

                            .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .draggable-container .week-cart .week-cart-title, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .draggable-container .week-cart .week-cart-title, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .draggable-container .week-cart .week-cart-title, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .draggable-container .week-cart .week-cart-title, .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item .draggable-container .week-cart .week-cart-list-item, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .draggable-container .week-cart .week-cart-list-item, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item .draggable-container .week-cart .week-cart-list-item, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .draggable-container .week-cart .week-cart-list-item {
                                justify-content: space-between;
                            }
                        .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item.active .week-title, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item.active .week-title, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item.active .week-title, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item.active .week-title {
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }

                            .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item.active .week-title::after {
                                content: '-';
                            }

                            .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item.active .week-title::after {
                                content: '-';
                            }

                            .nutrition-plan-wrapper .new-week-plan-create .plans .week-item.active .week-title::after {
                                content: '-';
                            }

                            .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item.active .week-title::after {
                                content: '-';
                            }

                        .nutrition-plan-wrapper .plan-form-wrapper .plans .week-item.active .draggable-container, .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item.active .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .plans .week-item.active .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item.active .draggable-container {
                            display: block;
                        }
                    .nutrition-plan-wrapper .plan-form-wrapper .plan-demo.week-plans .week-item .week-title, .nutrition-plan-wrapper .new-week-plan-create .plan-demo.week-plans .week-item .week-title {
                        justify-content: flex-start;
                    }

                    .nutrition-plan-wrapper .plan-form-wrapper .plan-demo.week-plans .week-item .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .plan-demo.week-plans .week-item .draggable-container {
                        padding-top: 0px;
                        border-bottom: 1px solid #6C7A8D;
                        border-radius: 0px 0px 8px 8px;
                    }
                .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item {
                    gap: 0px;
                }

                    .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .draggable-container, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .draggable-container {
                        padding-top: 12px;
                        border-bottom: 0px;
                        border-bottom-left-radius: 0px;
                        border-bottom-right-radius: 0px;
                    }

                    .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .week-actions, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .week-actions {
                        padding: 0px 6px 10px 6px;
                        display: none;
                        border-width: 0px 1px 1px 1px;
                        border-color: #6C7A8D;
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                    }

                    .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item .add-week-cart, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item .add-week-cart {
                        padding-top: 11px;
                        padding-bottom: 11px;
                    }
                        .nutrition-plan-wrapper .plan-form-wrapper .week-plans .week-item.active .week-actions, .nutrition-plan-wrapper .new-week-plan-create .week-plans .week-item.active .week-actions {
                            display: grid;
                        }
            #nutritionCreatePlan.nutrition-plan-wrapper label[for="all-week-checked"] {
                padding-top: 15px;
                padding-bottom: 15px;
            }
                #nutritionCreatePlan.nutrition-plan-wrapper .donot-include .donot-include-popup {
                    height: calc(100% - 125px);
                }

                #nutritionCreatePlan.nutrition-plan-wrapper .donot-include .donot-include-popup-actions {
                    display: flex;
                    gap: 8px;
                }

                    #nutritionCreatePlan.nutrition-plan-wrapper .donot-include .donot-include-popup-actions .btn {
                        flex: 1 0 0%;
                        text-align: center;
                        justify-content: center;
                    }

        .nutrition-plan-wrapper .sticky-buttons {
            background: #FFF;
            width: 100%;
            padding: 16px;
            display: flex;
            gap: 10px;
            border-top: 1px solid #DEE4EC;
            position: fixed;
            left: 0px;
            bottom: 0px;
            z-index: 40;
        }

            .nutrition-plan-wrapper .sticky-buttons .btn {
                flex: 1 0 0%;
                gap: 10px;
                justify-content: center;
            }
    }

.nutrition-popular-item {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}

.nutrition-popular-item .nutrition-popular-item__title {
        color: #0061E6;
        font-size: 18px;
        line-height: normal;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

.nutrition-popular-item .nutrition-popular-item__title a {
            color: #0061E6;
            font-size: 12px;
            font-weight: normal;
        }

.nutrition-popular-item .nutrition-popular-item__title a:hover {
                -webkit-text-decoration: underline;
                text-decoration: underline;
            }

.nutrition-popular-item .nutrition-popular-item__body {
        margin-top: 16px;
    }

.nutrition-popular-item .nutrition-popular-item__option {
        display: flex;
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 8px;
        padding-right: 8px;
        margin-left: -8px;
        margin-right: -8px;
        border-radius: 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        border: 1px solid transparent;
    }

.nutrition-popular-item .nutrition-popular-item__option:hover {
            background-color: #ffffff;
            border-color: #eeeeee;
        }

.nutrition-popular-item .nutrition-popular-item__option:not(:last-child) {
            margin-bottom: 8px;
        }

.nutrition-popular-item .nutrition-popular-item__option.blue .block-item_icon {
                border-color: #2DB4FF;
            }

.nutrition-popular-item .nutrition-popular-item__option .nutrition-popular-item__option-title {
            color: #2E3948;
            font-size: 16px;
            line-height: 24px;
        }

.nutrition-popular-item .nutrition-popular-item__option .nutrition-popular-item__option-contains {
            color: #8B98AA;
            font-size: 12px;
            line-height: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 4px;
        }

.nutrition-popular-item .nutrition-popular-item__option .nutrition-popular-item__option-contains .comment-rate {
                display: flex;
                align-items: center;
                gap: 2px;
                white-space: nowrap;
            }

.plans .week-item {
        gap: 0px;
        text-align: center;
    }

.plans .week-item:nth-child(even) {
            background-color: #F9FAFB;
        }

.plans .week-item:nth-child(even) .week-cart > div:not(.week-cart-btns) {
                background-color: transparent;
            }

.plans .week-item .week-cart .week-cart-title {
                color: #2E3948;
                border: 0px;
                justify-content: center;
            }

.plans .week-item .week-cart-list .week-cart-list-item {
                border: 0px;
                justify-content: center;
            }

.plan-demo .week-item {
        gap: 0px;
        text-align: center;
    }

.plan-demo .week-item:nth-child(even) {
            background-color: #F9FAFB;
        }

.plan-demo .week-item:nth-child(even) .week-cart > div:not(.week-cart-btns) {
                background-color: transparent;
            }

.plan-demo .week-item .week-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .plan-demo .week-item .week-title{
    gap: 0.5rem;
}

.plan-demo .week-item .week-cart .week-cart-title {
                color: #2E3948;
                border: 0px;
                justify-content: space-between;
                border-bottom: 1px solid #8B98AA;
            }

.plan-demo .week-item .week-cart > .week-cart-added-list {
                border-radius: 0px;
            }

.plan-demo .week-item .week-cart-list .week-cart-list-item {
                text-align: left;
                border: 0px;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                border-bottom: 1px solid #DEE4EC;
            }

.plan-demo .week-item .week-cart-list .week-cart-list-item > a {
                    min-width: 16px;
                }

.food-categories-wrapper {
    flex-direction: column;
    gap: 24px;
}

.food-categories-wrapper .food-categories-chart{
    display: none;
}

.medisupp-backdrop.food-categories-wrapper .food-categories-chart {
        display: none;
    }


    .draft-selfnote.food-categories-wrapper .food-categories-chart{
    display: none !important;
}

@media (min-width: 768px){

    .food-categories-wrapper .food-categories-chart{
        display: flex;
    }
}

.food-categories-wrapper .food-categories-chart {
        gap: 2px;
    }

.food-categories-wrapper .food-categories-chart .chart-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 90px;
            padding-left: 15px;
            padding-right: 15px;
            border-radius: 2px;
            flex: 1 0 0%;
        }

.food-categories-wrapper .food-categories-chart .chart-item .chart-item-name {
                color: #fff;
                font-size: 14px;
                line-height: 20px;
            }

.food-categories-wrapper .food-categories-chart .chart-item .chart-item-rate {
                color: #fff;
                font-size: 32px;
                font-weight: 600;
                line-height: normal;
            }

.food-categories-wrapper .food-categories-chart .chart-item:nth-child(n+7) {
                padding-left: 0px;
                padding-right: 0px;
            }

.food-categories-wrapper .food-categories-chart .chart-item:nth-child(n+7) > div{
    display: none !important;
}

.food-categories-wrapper .food-categories{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 0.25rem;
    gap: 0.25rem;
}

.food-categories-wrapper .food-categories .food-categories-item{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
}

.member-table .medicineInfoTable td .food-categories-wrapper .food-categories .food-categories-item{
    gap: 0.5rem;
}

.food-categories-wrapper .food-categories .food-categories-item.new-item {
                background-color: #F0F3F6;
                border-radius: 16px;
            }

.food-categories-wrapper .food-categories .food-categories-item .category-color {
                width: 20px;
                min-width: 20px;
                height: 20px;
                border-radius: 100%;
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
            }

.food-categories-wrapper .food-categories .food-categories-item .category-name {
                color: #6C7A8D;
                font-size: 14px;
                line-height: 20px;
            }

@media screen and (max-width: 1023.98px) {
        .food-categories-wrapper .food-categories {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
                .food-categories-wrapper .food-categories-chart .chart-item > * {
                    display: none;
                }
    }

@media screen and (max-width: 767.98px) {
        .food-categories-wrapper .food-categories {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }

.new-week-plan-create .new-week-add {
        border: 0px;
        padding-left: 24px;
        padding-right: 24px;
    }

#tabPlanAbout .drawer-container{
    position: relative;
    z-index: 50;
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding: 2rem;
}

@media (min-width: 1170px){

    #tabPlanAbout .drawer-container{
        height: calc(100vh - 86px);
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }
}

@media (min-width: 1024px){

    #tabPlanAbout.show{
        display: flex;
        align-items: flex-end;
    }
}

#tabPlanAbout.show .drawer-container {
            animation-name: fadeInUpAnim;
        }

@media screen and (max-width: 767.98px) {
        #tabPlanAbout .tab-plan-title {
            justify-content: flex-end;
            flex-direction: row-reverse;
        }

            #tabPlanAbout .tab-plan-title .drawer-close {
                background: url('/assets/img/icon/rounded-close.svg') center center no-repeat;
                width: 24px;
                height: 24px;
            }
    }

.nutiriton-cats-swal .swal2-actions {
        background-color: #FFF;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 0px -1px 3px -1px rgba(0, 0, 0, 0.12);
        position: sticky;
        bottom: -10px;
        left: 0;
    }

.nutirition-plans-container table {
        width: 100%;
        border-spacing: 0px;
        border-collapse: separate;
    }

.nutirition-plans-container table thead th {
                color: #6C7A8D;
                font-size: 11px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
                text-align: left;
                padding: 10px 4px;
                border-top: 1px solid #F0F3F6;
            }

.nutirition-plans-container table tbody tr td {
                    background-color: #F9FAFB;
                    color: #2E3948;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                    padding-left: 4px;
                    padding-right: 4px;
                }

.nutirition-plans-container table tbody tr td.seperator{
    height: 1rem !important;
    border-width: 0px !important;
    background-color: transparent !important;
    padding: 0px !important;
}

.nutirition-plans-container table tbody tr td.plan-name {
                        color: #2E3948;
                        font-weight: 600;
                    }

.nutirition-plans-container table tbody tr td .text {
                        color: #6C7A8D;
                        font-size: 14px;
                        line-height: 20px;
                        margin-top: 2px;
                    }

.nutirition-plans-container table tbody tr td:first-child {
                        padding-left: 16px;
                        border-left: 1px solid #F0F3F6;
                    }

.nutirition-plans-container table tbody tr td:last-child {
                        padding-right: 16px;
                        border-right: 1px solid #F0F3F6;
                    }

.nutirition-plans-container table tbody tr td .note {
                        background-color: #fff;
                        color: #000;
                        font-size: 16px;
                        line-height: 20px;
                        padding: 10px 8px;
                        border-left: 3px solid #fff;
                        margin-top: 12px;
                    }

.nutirition-plans-container table tbody tr td .note.blue {
                            border-color: #2DB4FF;
                        }

.nutirition-plans-container table tbody tr td .note.dark {
                            border-color: #2E3948;
                        }

.nutirition-plans-container table tbody tr td .note.doctor {
                            background: #fff url('/assets/img/icon/doctor.svg') 10px center no-repeat;
                            padding-left: 34px;
                        }

.nutirition-plans-container table tbody tr td .note.user {
                            background: #fff url('/assets/img/icon/user-alt.svg') 10px center no-repeat;
                            padding-left: 34px;
                        }

.nutirition-plans-container table tbody tr td .note.end-note {
                            background-color: #FFF4F1;
                        }

.nutirition-plans-container table tbody tr:first-child td {
                        padding-top: 16px;
                        border-top: 1px solid #F0F3F6;
                    }

.nutirition-plans-container table tbody tr:first-child td:first-child {
                            border-top-left-radius: 8px;
                        }

.nutirition-plans-container table tbody tr:first-child td:last-child {
                            border-top-right-radius: 8px;
                        }

.nutirition-plans-container table tbody tr:last-child td {
                        padding-bottom: 16px;
                        border-bottom: 1px solid #F0F3F6;
                    }

.nutirition-plans-container table tbody tr:last-child td:first-child {
                            border-bottom-left-radius: 8px;
                        }

.nutirition-plans-container table tbody tr:last-child td:last-child {
                            border-bottom-right-radius: 8px;
                        }

.nutirition-plans-container .plan-item .plan-item-icon {
            width: 40px;
            min-width: 40px;
            height: 40px;
            border-radius: 100%;
            border: 1px solid #C4CDDA;
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

.nutirition-plans-container .plan-item .plan-item-icon.blue {
                border-color: #2DB4FF;
            }

@media screen and (max-width: 767.98px) {
        .nutirition-plans-container table {
            width: 100%;
            display: block !important;
        }

            .nutirition-plans-container table thead {
                display: none !important;
            }

            .nutirition-plans-container table tbody {
                background-color: #F9FAFB;
                width: 100%;
                padding: 16px;
                display: block !important;
                border: 1px solid #F0F3F6;
                border-radius: 8px;
            }

                .nutirition-plans-container table tbody.seperator-tbody {
                    background-color: transparent;
                    border: 0px !important;
                    padding: 0px !important;
                    height: 16px;
                }
                    .nutirition-plans-container table tbody tr.plan-item {
                        width: 100%;
                        display: flex !important;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        padding-left: 56px !important;
                    }

                        .nutirition-plans-container table tbody tr.plan-item td {
                            background-color: transparent;
                            border: 0px !important;
                            border-radius: 0px !important;
                            padding: 0px !important;
                        }

                            .nutirition-plans-container table tbody tr.plan-item td:first-child {
                                width: 40px;
                                position: absolute;
                                top: 0px;
                                left: 0px;
                            }

                            .nutirition-plans-container table tbody tr.plan-item td.plan-name {
                                width: calc(100% - 70px);
                                order: -1;
                            }

                            .nutirition-plans-container table tbody tr.plan-item td:last-child {
                                width: 70px;
                                height: 40px;
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                order: -1;
                            }

                            .nutirition-plans-container table tbody tr.plan-item td[data-th] {
                                display: flex;
                                flex-direction: column;
                                width: calc(50% - 12px);
                                margin-top: 12px;
                                margin-bottom: 12px;
                                font-size: 14px;
                                line-height: 20px;
                            }

                                .nutirition-plans-container table tbody tr.plan-item td[data-th]::before {
                                    content: attr(data-th);
                                    color: #6C7A8D;
                                    font-size: 11px;
                                    line-height: 16px;
                                }

                                .nutirition-plans-container table tbody tr.plan-item td[data-th] .text {
                                    font-size: 12px;
                                    line-height: 16px;
                                }

                    .nutirition-plans-container table tbody tr:not(.plan-item) {
                        display: flex !important;
                    }

                        .nutirition-plans-container table tbody tr:not(.plan-item) td {
                            display: block !important;
                            border: 0px !important;
                            border-radius: 0px !important;
                            padding: 0px !important;
                        }

                            .nutirition-plans-container table tbody tr:not(.plan-item) td:first-child {
                                width: 56px;
                            }

                    .nutirition-plans-container table tbody tr td {
                        width: 100%;
                    }

                        .nutirition-plans-container table tbody tr td .note {
                            font-size: 14px;
                            line-height: 20px;
                        }
    }

.member-nutritionplans #planListEl .nutrition-plan-item.selected {
                border: 2px solid #0061E6;
            }

.member-nutritionplans .previous-step-btn {
        min-width: 24px;
        height: 24px;
        display: grid;
        align-items: center;
        justify-items: center;
        place-items: center;
        border-radius: 100%;
        border: 1px solid #6C7A8D;
    }

.member-nutritionplans > [class*="step-"]:not(.active){
    display: none !important;
}

.member-nutritionplans .selected-plan .nutrition-plan-item .block-item_props {
                justify-content: flex-start;
            }

.member-nutritionplans .selected-plan .nutrition-plan-item .block-item_props > span {
                    display: none !important;
                }

@media screen and (max-width: 767.98px) {

.member-nutritionplans .radios {
            gap: 8px;
    }
    }

.member-nutritionplans .radios label {
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.member-nutritionplans .radios label em {
                background-color: #fff;
                width: 16px;
                min-width: 16px;
                height: 16px;
                display: block;
                border: 1px solid #8B98AA;
                border-radius: 100%;
                position: relative;
            }

.member-nutritionplans .radios label .name {
                color: #8B98AA;
                font-size: 16px;
                line-height: 26px;
                display: block;
            }

@media screen and (max-width: 767.98px) {

.member-nutritionplans .radios label .name {
                    font-size: 14px;
                    line-height: 18px;
            }
    }

.member-nutritionplans .radios label input {
                display: none !important;
            }

.member-nutritionplans .radios label input:checked + em {
                        border-color: #2E3948;
                    }

.member-nutritionplans .radios label input:checked + em::before {
                            content: '';
                            background-color: #0082FF;
                            width: 10px;
                            height: 10px;
                            border: 1px solid #2E3948;
                            border-radius: 100%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }

.member-nutritionplans .radios label input:checked ~ .name {
                        color: #2E3948;
                    }

.member-nutritionplans .radios.disabled{
    pointer-events: none;
    opacity: 0.7;
}

.member-nutritionplans .ts-wrapper .ts-control {
        min-width: 100%;
    }

.member-nutritionplans .form-item-vertical .form-item{
    display: flex;
    flex-direction: column;
}

.member-table .medicineInfoTable td .member-nutritionplans .form-item-vertical .form-item{
    gap: 0.5rem;
}

#guideDrawer .drawer-container {
        left: 0;
        right: 0;
        width: 100vw;
        padding: 0px;
        height: 700px;
        max-height: 100%;
        bottom: 0px;
        top: auto;
        border-radius: 16px 16px 0px 0px;
        overflow-x: hidden;
        overflow-y: auto;
        overflow: hidden auto;
        display: flex;
        position: fixed;
        z-index: 51;
    }

#timesModal .input-datas{
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td #timesModal .input-datas{
    gap: 0.5rem;
}

#timesModal .plan-time-input-group{
    display: flex;
    flex-direction: column;
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    padding: 1rem;
}

.member-table .medicineInfoTable td #timesModal .plan-time-input-group{
    gap: 0.5rem;
}

#timesModal .plan-time-input-group label{
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

#timesModal .plan-time-input-group input::-webkit-calendar-picker-indicator {
                cursor: pointer;
            }

a[data-drawer="#timesModal"].disabled {
        opacity: 0.6;
        pointer-events: none;
    }

.mobiledata-dropdown{
    position: relative;
    width: 300px;
    max-width: 100%;
    z-index: 100;
}

.mobiledata-dropdown::before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.02);
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        z-index: 99;
    }

.mobiledata-dropdown>.selected{
    position: relative;
    display: flex;
    height: 3.5rem;
    cursor: pointer;
    align-items: center;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(139, 152, 170, 1);
    border-color: rgba(139, 152, 170, var(--tw-border-opacity));
    padding-left: 1rem;
    padding-right: 2.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.member-table .medicineInfoTable td .mobiledata-dropdown>.selected{
    gap: 0.5rem;
}

.mobiledata-dropdown>.selected {
        z-index: 101;
    }

.mobiledata-dropdown>.selected:focus {
            outline: 2px solid #2DB4FF;
            outline-offset: 2px;
        }

.mobiledata-dropdown>.selected:focus-visible {
            outline: 2px solid #2DB4FF;
            outline-offset: 2px;
        }

.mobiledata-dropdown>.selected::before {
            color: #6C7A8D;
            font-size: 1.125rem;
        }

.mobiledata-dropdown>.selected::after {
            content: '';
            background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTIgNyIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTExIDFMNiA2TDEgMSIgc3Ryb2tlPSIjOEI5OEFBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=') center center no-repeat;
            width: 12px;
            height: 7px;
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            transition: transform .2s ease-in-out;
        }

.mobiledata-dropdown>ul{
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 100%;
    margin-top: -0.5rem;
    width: 100%;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-width: 1px;
    border-top-width: 0px;
    --tw-border-opacity: 1;
    border-color: rgba(0, 97, 230, 1);
    border-color: rgba(0, 97, 230, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

#sort + .ts-wrapper .ts-control.mobiledata-dropdown>ul {
                min-width: 100%;
                max-width: 100%;
            }

.mobiledata-dropdown>ul {
        z-index: 101;
        max-height: 800px;
        overflow-y: auto;
        transform: translateY(-8px) scale(0.98);
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

.mobiledata-dropdown>ul::-webkit-scrollbar {
            width: 6px;
        }

.mobiledata-dropdown>ul::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

.mobiledata-dropdown>ul::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

.mobiledata-dropdown>ul::-webkit-scrollbar-thumb:hover {
                background: #a8a8a8;
            }

.mobiledata-dropdown>ul li a{
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

#sort + .ts-wrapper .ts-control.mobiledata-dropdown>ul li a {
                min-width: 100%;
                max-width: 100%;
            }

.member-table .medicineInfoTable td .mobiledata-dropdown>ul li a{
    gap: 0.5rem;
}

.mobiledata-dropdown>ul li a {
                position: relative;
            }

.mobiledata-dropdown>ul li a:hover {
                    color: #0061E6;
                    background-color: #F5F5F5;
                }

.mobiledata-dropdown>ul li a:focus {
                    outline: 2px solid #2DB4FF;
                    outline-offset: -2px;
                }

.mobiledata-dropdown>ul li a.active{
    --tw-bg-opacity: 1;
    background-color: rgba(230, 245, 255, 1);
    background-color: rgba(230, 245, 255, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(45, 180, 255, 1);
    color: rgba(45, 180, 255, var(--tw-text-opacity));
}

.mobiledata-dropdown>ul li a.active::after {
                        content: '';
                        width: 4px;
                        height: 4px;
                        background: #2DB4FF;
                        border-radius: 50%;
                        margin-left: auto;
                    }

.mobiledata-dropdown.open::before {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

.mobiledata-dropdown.open>.selected {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            border-color: #0061E6 #0061E6 #DEE4EC #0061E6;
            color: transparent;
            font-size: 0px;
            overflow: hidden;
        }

.mobiledata-dropdown.open>.selected::after {
                transform: translateY(-50%) rotate(180deg);
            }

.mobiledata-dropdown.open>.selected::before {
                content: attr(data-placeholder);
            }

.mobiledata-dropdown.open>ul {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            margin-top: 0px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transform: translateY(0) scale(1);
        }

@media screen and (max-width: 1023.98px) {

.member-mobiledata-content .page-top h1 {
                display: flex !important;
                align-items: center;
                gap: 8px;
                margin-bottom: 18px;
        }

                .member-mobiledata-content .page-top h1 span {
                    display: inline-block;
                }
    }

.member-mobiledata-content .btn-group .btn{
    font-weight: 600;
}

@media (min-width: 1024px){

    .member-mobiledata-content .btn-group .btn{
        border-width: 0px;
    }

    .member-mobiledata-content .btn-group .btn.filter-btn{
        padding-left: 0px;
        padding-right: 0px;
    }
}

.member-mobiledata-content .btn-group .btn.filter-btn {
                transition: all 0.1s ease-in-out;
            }

.member-mobiledata-content .btn-group .btn.filter-btn img,
                .member-mobiledata-content .btn-group .btn.filter-btn svg {
                    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, filter 0.2s ease-in-out;
                }

@media screen and (max-width: 1023.98px) {

.member-mobiledata-content .btn-group .btn.filter-btn{
                    font-size: 0 !important;
                    text-indent: -9999px !important;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 32px !important;
                    min-width: 32px !important;
                    height: 32px !important;
                    padding: 0 !important;
                    display: grid !important;
                    align-items: center;
                    justify-items: center;
                    place-items: center;
                    position: relative;
                    border-radius: 18px;
    }

                    .member-mobiledata-content .btn-group .btn.filter-btn img,
                    .member-mobiledata-content .btn-group .btn.filter-btn svg {
                        font-size: medium;
                        font-size: initial;
                        text-indent: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 18px;
                        height: 18px;
                        margin: 0 !important;
                    }
    }

@media (min-width: 1024px) {
                    .member-mobiledata-content .btn-group .btn.filter-btn:hover,
                    .member-mobiledata-content .btn-group .btn.filter-btn:active {
                        background-color: rgba(117, 117, 117, 0.1) !important;
                        border-radius: 12px;
                        color: #0061E6 !important;
                        border-color: transparent !important;
                        padding-left: 16px !important;
                        padding-right: 16px !important;
                        margin-left: -16px;
                        margin-right: -16px;
                    }

                        .member-mobiledata-content .btn-group .btn.filter-btn:hover img,
                        .member-mobiledata-content .btn-group .btn.filter-btn:hover svg,
                        .member-mobiledata-content .btn-group .btn.filter-btn:active img,
                        .member-mobiledata-content .btn-group .btn.filter-btn:active svg {
                            opacity: 1 !important;
                            visibility: visible !important;
                            display: block !important;
                            filter: none !important;
                        }

                    .member-mobiledata-content .btn-group .btn.filter-btn:active {
                        transform: scale(0.98);
                        background-color: rgba(117, 117, 117, 0.15) !important;
                    }

                    .member-mobiledata-content .btn-group .btn.filter-btn:focus-visible {
                        outline: 2px solid #8B98AA;
                        outline-offset: 2px;
                        border-radius: 12px;
                    }
                }

.member-mobiledata-content .chart-last-update-date{
    margin-top: 1.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgba(108, 122, 141, 1);
    color: rgba(108, 122, 141, var(--tw-text-opacity));
}

.member-mobiledata-content #chartContent {
        min-height: -moz-fit-content;
        min-height: fit-content;
    }

.member-mobiledata-content .result-not-found{
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    width: auto;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(-50%, -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    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));
    white-space: nowrap;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

@media screen and (max-width: 1023.98px) {
        .member-mobiledata-content .page-top {
            flex-wrap: wrap;
        }

            .member-mobiledata-content .page-top .mobiledata-dropdown{
        order: 2;
    }

            .member-mobiledata-content .page-top .mobiledata-dropdown{
        margin-top: 0.375rem;
    }

            .member-mobiledata-content .page-top .mobiledata-dropdown{
        width: 100%;
    }

.member-mobiledata-content #sort + .ts-wrapper .ts-control.page-top .mobiledata-dropdown {
                min-width: 100%;
                max-width: 100%;
            }
    }

.chart-filter{
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    padding: 0.5rem;
}

.member-table .medicineInfoTable td .chart-filter{
    gap: 0.5rem;
}

.chart-filter .chart-filter--left{
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .chart-filter .chart-filter--left{
    gap: 0.5rem;
}

.chart-filter .date-selector{
    display: flex;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .chart-filter .date-selector{
    gap: 0.5rem;
}

.chart-filter .selected-date{
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.chart-filter .note-content{
    font-size: 1.125rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

@media screen and (max-width: 1023.98px) {
        .chart-filter{
        flex-direction: column-reverse;
    }
        .chart-filter{
        justify-content: center;
    }
        .chart-filter{
        gap: 0.5rem;
    }

            .chart-filter .chart-filter--left{
        flex-direction: column;
    }
    }

.alarm-list{
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.member-table .medicineInfoTable td .alarm-list{
    gap: 0.5rem;
}

.alarm-list .alarm-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, 1);
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.member-table .medicineInfoTable td .alarm-list .alarm-item{
    gap: 0.5rem;
}

.alarm-list .alarm-item .alarm-item__title{
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.alarm-list .alarm-item .toggle-label{
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-table .medicineInfoTable td .alarm-list .alarm-item .toggle-label{
    gap: 0.5rem;
}

.alarm-list .alarm-item .delete-alarm-btn{
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .alarm-list .alarm-item .delete-alarm-btn{
    gap: 0.5rem;
}

.alarm-list .alarm-item .alarm-input-group{
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.alarm-list .alarm-item .alarm-input-group input{
    width: 4rem;
}

.alarm-list .alarm-item .alarm-input-wrapper{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-table .medicineInfoTable td .alarm-list .alarm-item .alarm-input-wrapper{
    gap: 0.5rem;
}

.alarm-list .alarm-item .alarm-input-wrapper span{
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.alarm-list .alarm-item .alarm-input-wrapper span.disabled {
                    color: #dcdcdc;
                }

.alarm-list .alarm-item .alarm-input-wrapper input{
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    text-align: center;
}

.alarm-list .alarm-item .alarm-input-wrapper input.dateformat {
                    background: url('/assets/img/icon/calendar.svg') calc(100% - 1rem) center no-repeat;
                    width: 11rem;
                    padding-right: 3rem !important;
                }

.alarm-list .alarm-item .alarm-input-wrapper input:-moz-placeholder-shown+span {
                    color: #A8B3C2;
                }

.alarm-list .alarm-item .alarm-input-wrapper input:placeholder-shown+span {
                    color: #A8B3C2;
                }

.alarm-list .alarm-item >.alarm-item__title {
            min-width: 180px;
        }

.add-alarm-btn{
    display: inline-flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.alarm-action-btns{
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .alarm-action-btns{
    gap: 0.5rem;
}

.mobile-data__chart-tab{
    display: flex;
}

.member-table .medicineInfoTable td .mobile-data__chart-tab{
    gap: 0.5rem;
}

.mobile-data__chart-tab__btn{
    display: block;
    flex: 1 1 0%;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-bottom-color: rgba(222, 228, 236, 1);
    border-bottom-color: rgba(222, 228, 236, var(--tw-border-opacity));
    padding: 0.75rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

@media (min-width: 1170px){

    .mobile-data__chart-tab__btn{
        line-height: 2rem;
    }
}

.mobile-data__chart-tab__btn.active{
    border-bottom-width: 4px;
    --tw-border-opacity: 1;
    border-color: rgba(0, 97, 230, 1);
    border-color: rgba(0, 97, 230, var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

@media screen and (max-width: 1169.98px) {
    .page-top--tabbed {
        flex-wrap: wrap;
    }

        .page-top--tabbed .mobile-data__chart-tab {
            order: 3;
            width: 100%;
            margin-top: 1.5rem;
        }
    }

.mobile-data-box {
    $self: &;
    background: #F9FAFB;
    padding: 24px;
    border: 1px solid #F0F3F6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mobile-data-box:hover {
        border-color: #DEE4EC;
        box-shadow: 0 1px 4px rgba(41, 39, 39, 0.04);
    }

.mobile-data-box__link {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
    }

.mobile-data-box__title {
        color: #2E3948;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
    }

.mobile-data-box__title span {
            color: #929292;
            font-weight: normal;
            font-size: 14px;
        }

.mobile-data-box__chart {
        height: 200px;
    }

.mobile-data-box__chart canvas {
            width: 100%;
            height: 100%;
        }

.mobile-data-box__chart:has(.chart-no-data) {
            position: relative;
        }

.mobile-data-box__chart:has(.chart-no-data) canvas {
                opacity: 0.7;
            }

.mobile-data-box__chart:has(.chart-no-data) .chart-no-data {
                background-color: rgba(0, 0, 0, 0.1);
                color: #000;
                font-size: 14px;
                padding: 10px 16px;
                border-radius: 6px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }

.mobile-data-box__average {
        color: #929292;
        font-size: 14px;
        line-height: 1;
    }

@keyframes gradiantAnim {
            0% {
                background-position: 100% 0
            }

            100% {
                background-position: -100% 0
            }
        }

.mobile-data-box--is-loading .mobile-data-box__chart {
                position: relative;
                background: linear-gradient(to right, #efefef, #f9fafb 20%, #efefef 70%);
                background-size: 200% 100%;
                animation: gradiantAnim 1.5s linear infinite;
            }

.mobile-data-box--is-loading .mobile-data-box__chart canvas {
                    opacity: 0;
                    visibility: hidden;
                }

#filterModal label{
    display: flex;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.member-table .medicineInfoTable td #filterModal label{
    gap: 0.5rem;
}

#filterModal label input{
    margin-top: 0.25rem;
}

.period-year-calendar .calendar-container .calendar {
            width: 170px;
        }

.period-year-calendar .calendar-container .calendar table,
                .period-year-calendar .calendar-container .calendar table th,
                .period-year-calendar .calendar-container .calendar table td {
                    border: 0px;
                }

.period-year-calendar .calendar-container .calendar table th a {
                        color: #101924;
                        font-size: 12px;
                        font-weight: 400;
                    }

.period-year-calendar .calendar-container .calendar table th .fc-scrollgrid-sync-inner {
                        display: flex;
                        justify-content: center;
                    }

.period-year-calendar .calendar-container .calendar table td a {
                        color: #101924;
                        font-size: 12px;
                        font-weight: 400;
                    }

.period-year-calendar .calendar-container .calendar table td .fc-daygrid-day-top {
                        flex-direction: row;
                        justify-content: center;
                    }

.period-year-calendar .calendar-container .calendar table td .fc-daygrid-day-events {
                        display: none;
                    }

.period-year-calendar .calendar-container .fc-toolbar-title {
            font-size: 14px;
            color: #101924;
        }

.period-year-calendar .calendar-container .fc-toolbar.fc-header-toolbar {
            margin-bottom: 7px;
        }

.period-year-calendar .calendar-container .period {
            background-color: purple !important;
            border-radius: 50%;
        }

.period-year-calendar .calendar-container .old {
            background-color: #d1b3ff !important;
            border-radius: 50%;
        }

.period-year-calendar .calendar-container .predict {
            background-color: white !important;
            border: 2px solid purple;
            border-radius: 50%;
        }

.chart-annonations{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.member-table .medicineInfoTable td .chart-annonations{
    gap: 0.5rem;
}

.chart-annonations >span{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .chart-annonations >span{
    gap: 0.5rem;
}

.chart-annonations >span.text::before {
            content: '';
            width: 14px;
            height: 14px;
            display: block;
            border-radius: 100%;
        }

.chart-annonations__goal {
        background-color: rgba(53, 167, 243, 0.03);
        border-color: rgba(53, 167, 243, 0.20);
    }

.chart-annonations__goal .text::before {
            background-color: rgba(53, 167, 243, 0.20);
        }

.chart-annonations__ideal {
        background-color: rgba(40, 151, 25, 0.02);
        border-color: rgba(40, 151, 25, 0.20);
    }

.chart-annonations__ideal .text::before {
            background-color: rgba(40, 151, 25, 0.20);
        }

.symtom-filter-select .ts-wrapper.multi .ts-control {
            width: 300px !important;
            height: 56px;
            padding: 6px 32px 6px 16px !important;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 40px;
            display: block;
        }

.symtom-filter-select .ts-wrapper.multi .ts-control:not(:has(span))::before {
                    content: 'Belirti Seçiniz...';
                    font-size: 16px;
                }

.symtom-filter-select .ts-wrapper.multi .ts-control >span {
                font-size: 18px;
                display: inline;
                background: transparent;
                padding: 0px;
                margin: 0px;
                position: relative;
            }

.symtom-filter-select .ts-wrapper.multi .ts-control >span a {
                    background-color: #e2e2e2;
                    font-size: 16px;
                    line-height: 0;
                    border-radius: 100%;
                    width: 14px;
                    height: 14px;
                    display: grid;
                    align-items: center;
                    justify-items: center;
                    place-items: center;
                    margin: 0px !important;
                    padding: 0px !important;
                    border: 0px !important;
                    position: absolute;
                    top: -2px;
                    right: -13px;
                }

.symtom-filter-select .ts-wrapper.multi .ts-control >span:not(:last-child) {
                    margin-right: 12px;
                }

.symtom-filter-select .ts-wrapper.multi .ts-control >span:not(:last-child)::after {
                        content: ', ';
                    }

.symtom-filter-select .ts-wrapper.multi .ts-control >span:not(:last-child) a {
                        right: -4px;
                    }

.symtom-filter-select .ts-wrapper.multi .ts-control::after {
                top: 50%;
                transform: translateY(-50%);
            }

@media screen and (min-width: 1023.98px) {
            .mobiledata-content-nav .mobiledata-dropdown .selected{
        display: none;
    }

.mobiledata-content-nav .medisupp-backdrop.mobiledata-dropdown .selected {
        display: none;
    }

.mobiledata-content-nav .draft-selfnote.mobiledata-dropdown .selected{
        display: none !important;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        pointer-events: auto;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        visibility: visible;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        position: static;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        display: block;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        border-radius: 0px;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        border-width: 0px;
    }

            .mobiledata-content-nav .mobiledata-dropdown ul{
        opacity: 1;
    }

.mobiledata-content-nav .medisupp-backdrop.mobiledata-dropdown ul {
        opacity: 1;
        visibility: visible;
    }
                    .mobiledata-content-nav .mobiledata-dropdown ul li:not(:last-child){
        margin-bottom: 0.5rem;
    }

                    .mobiledata-content-nav .mobiledata-dropdown ul li a{
        border-radius: 0.5rem;
    }

                    .mobiledata-content-nav .mobiledata-dropdown ul li a{
        border-width: 1px;
    }

                    .mobiledata-content-nav .mobiledata-dropdown ul li a{
        --tw-border-opacity: 1;
        border-color: rgba(240, 243, 246, 1);
        border-color: rgba(240, 243, 246, var(--tw-border-opacity));
    }

                    .mobiledata-content-nav .mobiledata-dropdown ul li a{
        --tw-bg-opacity: 1;
        background-color: rgba(249, 250, 251, 1);
        background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    }

                        .mobiledata-content-nav .mobiledata-dropdown ul li a:hover{
        --tw-bg-opacity: 1;
        background-color: rgba(249, 250, 251, 1);
        background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    }

                        .mobiledata-content-nav .mobiledata-dropdown ul li a:hover{
        --tw-bg-opacity: 0.1;
    }
                        .mobiledata-content-nav .mobiledata-dropdown ul li:first-child a{
        --tw-bg-opacity: 1;
        background-color: rgba(45, 180, 255, 1);
        background-color: rgba(45, 180, 255, var(--tw-bg-opacity));
    }
                        .mobiledata-content-nav .mobiledata-dropdown ul li:first-child a{
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }

        .mobiledata-content-nav .menu-wrap {
            flex: 0 0 auto;
            width: auto;
        }

        .mobiledata-content-nav .chart-wrap {
            flex: 1 1 0%;
            max-width: 100%;
        }
            .mobiledata-content-nav .chart-filter .selected-date{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    }

.mobiledata-content-nav .btn-group{
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.member-table .medicineInfoTable td .mobiledata-content-nav .btn-group{
    gap: 0.5rem;
}

.mobiledata-content-nav .btn-group .btn{
    height: auto;
    padding: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1rem;
}

@media screen and (max-width: 1023.98px) {
        .mobiledata-content-nav .page-top{
        margin-bottom: 1rem;
    }

        .mobiledata-content-nav .mobiledata-dropdown{
        width: 100%;
    }

.mobiledata-content-nav #sort + .ts-wrapper .ts-control.mobiledata-dropdown {
                min-width: 100%;
                max-width: 100%;
            }

        .mobiledata-content-nav .chart-wrap{
        position: relative;
    }
            
            .mobiledata-content-nav .chart-wrap .btn-group{
        position: absolute;
    }
            
            .mobiledata-content-nav .chart-wrap .btn-group{
        top: -117px;
    }
            
            .mobiledata-content-nav .chart-wrap .btn-group{
        right: 1.5rem;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        display: flex;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        height: 2.25rem;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        width: 2.25rem;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        align-items: center;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        justify-content: center;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        overflow: hidden;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        border-radius: 9999px;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        padding: 0px;
    }

                .mobiledata-content-nav .chart-wrap .btn-group .btn{
        text-indent: -24rem;
    }

.mobiledata-content-nav .member-table .medicineInfoTable td .chart-wrap .btn-group .btn{
        gap: 0.5rem;
    }

                    .mobiledata-content-nav .chart-wrap .btn-group .btn img{
        margin-right: 0px;
    }
    }

#medicineDraftEl .result-not-found img {
            content: url(../img/icon/circle-xmark.svg);
        }

#medicineDraftEl .result-not-found h3{
    display: none !important;
}

#medicineDraftEl .result-not-found__text{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.draft-selfnote{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, 1);
    color: rgba(75, 85, 99, var(--tw-text-opacity));
    line-height: 1.5;
    margin-top: 1rem;
}

.draft-selfnote:empty,
    .draft-selfnote.hidden{
    display: none !important;
}

.medicine-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-table .medicineInfoTable td .medicine-list{
    gap: 0.5rem;
}

.medicine-list-wrapper:not(:has(.medicine-list-item)){
    display: none !important;
}

.medicine-list-item{
    position: relative;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(240, 243, 246, 1);
    border-color: rgba(240, 243, 246, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    padding: 1.5rem;
}

.medicine-list-item .delete-medicine-item {
            position: absolute;
            right: 1rem;
            top: -1rem;
            height: 2rem;
            border-radius: 0.375rem;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-weight: 500;
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgba(139, 152, 170, 1);
            border-color: rgba(139, 152, 170, var(--tw-border-opacity));
            --tw-text-opacity: 1;
            color: rgba(31, 41, 55, 1);
            color: rgba(31, 41, 55, var(--tw-text-opacity));
            --tw-bg-opacity: 1;
            background-color: rgba(229, 231, 235, 1);
            background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }

.medicine-list-item .delete-medicine-item:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}

.medicine-list-item .delete-medicine-item{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.medicine-list-item .ts-wrapper .ts-control{
    min-width: 100px;
}

@media screen and (max-width: 1023.98px) {

.medicine-footer-btns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 12px;
        row-gap: 12px;
}

        .medicine-footer-btns a {
            width: 100%;
            grid-row: span 2 / span 2;
        }
    }

@media screen and (max-width: 767.98px) {

        .medicine-footer-btns label,
        .medicine-footer-btns a {
            font-size: 14px;
            line-height: 1.2;
        }
    }

.medicine-popup .ts-wrapper .ts-control{
    min-width: 110px !important;
}

.member-table .medicineInfoTable thead th {
            padding: 6px 8px !important;
        }

.member-table .medicineInfoTable thead th:first-child {
                width: 240px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(2) {
                width: 80px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(3) {
                width: 90px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(4) {
                width: 50px !important;
                text-align: center !important;
            }

.member-table .medicineInfoTable thead th:nth-child(5) {
                width: 100px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(6) {
                width: 100px !important;
                text-align: right !important;
                padding-right: 24px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(7) {
                width: 180px !important;
            }

.member-table .medicineInfoTable thead th:nth-child(8) {
                width: 80px !important;
            }

.member-table .medicineInfoTable tbody {
            transition: background-color 0.1s ease, box-shadow 0.1s ease;
        }

.member-table .medicineInfoTable tbody:hover tr {
                background-color: #f8fafc;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            }

.member-table .medicineInfoTable tbody tr {
                transition: background-color 0.1s ease, box-shadow 0.1s ease;
            }

.member-table .medicineInfoTable tbody td {
                padding: 6px 8px !important;
                line-height: 1.4;
            }

.member-table .medicineInfoTable tbody td:first-child {
                    width: 240px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(2) {
                    width: 80px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(3) {
                    width: 90px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(4) {
                    width: 28px !important;
                    text-align: center !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(5) {
                    width: 140px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(6) {
                    width: 100px !important;
                    text-align: right !important;
                    padding-right: 24px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(7) {
                    width: 180px !important;
                }

.member-table .medicineInfoTable tbody td:nth-child(8) {
                    width: 80px !important;
                }

.member-table .medicineInfoTable tbody tr.note-row td {
                    padding-top: 0px !important;
                    padding-bottom: 8px !important;
                }

.member-table .medicine-action-btn{
    opacity: 0.8;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.member-table .medicine-action-btn:hover{
    opacity: 1;
}

.member-table .medicine-action-btn.edit:hover {
            filter: brightness(0.8);
        }

.member-table .medicine-action-btn.delete:hover {
            filter: brightness(0.8);
        }

.member-table .medicineInfoTable td .flex{
    gap: 0.5rem;
}

.tab-nav{
    display: flex;
    width: 100%;
    border-bottom-width: 1px;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(222, 228, 236, 1);
    border-color: rgba(222, 228, 236, var(--tw-border-opacity));
}

#sort + .ts-wrapper .ts-control.tab-nav {
                min-width: 100%;
                max-width: 100%;
            }

.member-table .medicineInfoTable td .tab-nav{
    gap: 0.5rem;
}

.tab-nav > li{
    position: relative;
    display: inline-flex;
    flex: 1 1 0%;
}

@media (min-width: 768px){

    .tab-nav > li{
        flex: none;
    }
}

.tab-nav > li > a{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom-width: 4px;
    border-color: transparent;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    line-height: 26px;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .tab-nav > li > a{
    gap: 0.5rem;
}

@media (min-width: 768px){

    .tab-nav > li > a{
        flex-direction: row;
        justify-content: flex-start;
    }
}

.tab-nav > li > a > span{
    order: -1;
    margin-left: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgba(156, 163, 175, 1);
    color: rgba(156, 163, 175, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .tab-nav > li > a > span{
    gap: 0.5rem;
}

@media (min-width: 768px){

    .tab-nav > li > a > span{
        order: 2;
        margin-bottom: 0px;
    }
}

.tab-nav > li em {
            background: #fff url("/assets/img/icon/rounded-close.svg") center center no-repeat;
            width: 24px;
            height: 24px;
            font-style: normal;
            cursor: pointer;
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 12px;
            z-index: 2;
        }

.tab-nav > li.active > a{
    --tw-border-opacity: 1;
    border-color: rgba(0, 97, 230, 1);
    border-color: rgba(0, 97, 230, var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgba(0, 97, 230, 1);
    color: rgba(0, 97, 230, var(--tw-text-opacity));
}

.tab-nav > li.active > a > span{
    --tw-border-opacity: 1;
    border-color: rgba(0, 97, 230, 1);
    border-color: rgba(0, 97, 230, var(--tw-border-opacity));
}

.tab-nav.li-erasable li > em {
        display: block;
    }

.tab-nav.rounded-tabs{
    display: inline-flex;
    width: auto;
    gap: 0.25rem;
        border: 1px solid #DEE4EC;
        border-radius: 30px;
        padding: 4px;
        background-color: #F8F9FA;
}

.tab-nav.rounded-tabs > li a{
    border-radius: 24px;
    border-width: 0px !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(108, 122, 141, 1);
    color: rgba(108, 122, 141, var(--tw-text-opacity));
                transition: all 0.2s ease-in-out;
                min-height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
}

.tab-nav.rounded-tabs > li a:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.tab-nav.rounded-tabs > li.active a{
    --tw-bg-opacity: 1;
    background-color: rgba(0, 97, 230, 1);
    background-color: rgba(0, 97, 230, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

.tab-nav.rounded-tabs > li.active a:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(29, 78, 216, 1);
    background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}

.tab-content > :not(.active){
    display: none;
}

.medisupp-backdrop.tab-content > :not(.active) {
        display: none;
    }


    .draft-selfnote.tab-content > :not(.active){
    display: none !important;
}

.cat-settings {
    position: relative;
    display: block;
    z-index: 10;
}

.cat-settings__btn {
        background: transparent url("../img/icon/dots-vertical.svg") center center no-repeat;
        min-width: 24px;
        width: 24px;
        height: 24px;
        display: block;
        border-radius: 16px 16px 0px 0px;
        cursor: pointer;
    }

.cat-settings__menu {
        background-color: #0061E6;
        width: 182px;
        padding: 2px 16px;
        border: 1px solid #0061E6;
        border-radius: 16px 0px 16px 16px;
        filter: drop-shadow(0px 4px 10px rgba(162, 201, 255, 0.56));
        display: none;
        position: absolute;
        top: 24px;
        right: 0px;
    }

.cat-settings__menu .cat-settings__menu-item {
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            padding: 11px 6px;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }

.cat-settings__menu .cat-settings__menu-item:not(:last-child) {
                border-bottom: 1px solid #2DB4FF;
            }

.cat-settings.active .cat-settings__btn {
            background-color: #0061E6;
            background-image: url("../img/icon/close-white.svg");
        }

.cat-settings.active .cat-settings__menu {
            display: block;
        }

.page-container:has(.result-not-found){
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.history-back {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    border-radius: 100%;
    border: 1px solid #6C7A8D;
    margin-right: 8px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.history-back:hover {
        border-color: #0061E6;
        background-color: #E6F2FF;
        box-shadow: 0 2px 8px rgba(0, 97, 230, 0.15);
    }

.sub-tab-btns {
    background: #F9FAFB;
    padding: 8px;
    border: #F0F3F6;
    border-radius: 40px;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
}

.sub-tab-btns a {
        color: #000;
        font-size: 14px;
        line-height: 18px;
        padding: 4px 24px;
        border-radius: 20px;
    }

.sub-tab-btns a.active {
            background-color: #0061E6;
            color: #FFF;
        }

@media screen and (max-width: 1023.98px) {

.sub-tab-btns{
        margin-bottom: 16px;
    }
    }

.tab-nav-scrollbar{
    position: relative;
    display: flex;
    text-wrap: nowrap;
    border-top-width: 1px;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(222, 228, 236, 1);
    border-color: rgba(222, 228, 236, var(--tw-border-opacity));
}

.member-table .medicineInfoTable td .tab-nav-scrollbar{
    gap: 0.5rem;
}

.tab-nav-scrollbar .tab-nav{
    border-width: 0px !important;
}

.tab-nav-scrollbar::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

.tab-nav-scrollbar::-webkit-scrollbar-thumb {
        background: #6C7A8D;
    }

.tab-nav-scrollbar .tab-nav-scrollbar-buttons{
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    height: 100%;
}

.medisupp-backdrop.tab-nav-scrollbar .tab-nav-scrollbar-buttons {
        display: none;
    }


    .draft-selfnote.tab-nav-scrollbar .tab-nav-scrollbar-buttons{
    display: none !important;
}

.tab-nav-scrollbar .tab-nav-scrollbar-buttons a {
            background: #FFF center center no-repeat;
            z-index: 10;
            display: block;
            height: 100%;
            min-height: 1.5rem;
            width: 2rem;
            min-width: 2rem;
        }

.tab-nav-scrollbar .tab-nav-scrollbar-buttons a.btn-prev {
                background-image: url('/assets/img/icon/chevron_left.svg');
            }

.tab-nav-scrollbar .tab-nav-scrollbar-buttons a.btn-next {
                background-image: url('/assets/img/icon/chevron_right.svg');
            }

.tab-nav-scrollbar.scrollable-active ul.tab-nav {
            --btn-space: 107px;
            max-width: calc(100% - 65px);
            overflow: hidden;
            position: relative;
            padding-right: 107px;
            padding-right: var(--btn-space);
        }

.tab-nav-scrollbar.scrollable-active ul.tab-nav li[data-sticky] {
                background-color: #fff;
                display: flex;
                align-items: center;
                position: sticky;
                top: 0;
                right: 0;
                transform: translateX(var(--btn-space));
                margin-left: calc(var(--btn-space) * -1);
                z-index: 2;
            }

.tab-nav-scrollbar.scrollable-active.nav-no-space ul.tab-nav {
                --btn-space: 0px;
            }

.tab-nav-scrollbar.scrollable-active .tab-nav-scrollbar-buttons{
    display: flex !important;
}

.recipe-search-wrapper .recipe-dynamic-search-results {
        background-color: #FFF;
        width: 100%;
        border: 1px solid #0061E6;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 0px;
        padding: 14px 16px 14px 48px;
        display: none;
        max-height: 232px;
        position: absolute;
        top: 100%;
        left: 0px;
        z-index: 100;
    }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.member-table .medicineInfoTable td .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item{
    gap: 0.5rem;
}

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item {
            border-bottom: 1px solid #DEE4EC;
        }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name {
                color: #2E3948;
                font-size: 16px;
                line-height: 24px;
                flex: 1 1 0%;
            }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name span {
                    color: #8B98AA;
                }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group{
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.member-table .medicineInfoTable td .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group{
    gap: 0.5rem;
}

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a {
                    background-color: #F0F3F6;
                    color: #0061E6;
                    font-size: 12px;
                    line-height: 16px;
                    display: block;
                    padding: 4px 6px;
                    border-radius: 8px;
                }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item::before {
                            content: '+ \00a0';
                        }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item.added {
                            background: #dee4ec;
                            color: #000;
                            cursor: default;
                        }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group a.add-item.added::before {
                                content: '\2713 \00a0';
                            }

.recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__btn-group svg{
    position: static !important;
}

.recipe-search-wrapper .recipe-dynamic-search-results .result-not-found {
            padding-top: 34px;
            padding-bottom: 34px;
            gap: 12px;
        }

.recipe-search-wrapper .recipe-dynamic-search-results .result-not-found img {
                position: static !important;
            }

.recipe-search-wrapper .recipe-dynamic-search-results:has(.result-not-found) {
            padding: 0px;
        }

.recipe-search-wrapper.search-active {
        z-index: 1001;
    }

.recipe-search-wrapper.search-active #recipeSearchInput {
            box-shadow: none;
        }

.recipe-search-wrapper.search-active .recipe-dynamic-search-results {
            display: block;
            overflow-y: auto;
        }

.recipe-search-wrapper.search-active #recipeSearchInput {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            border-color: #0061E6 #0061E6 #DEE4EC #0061E6;
        }

@media screen and (max-width: 767.98px) {
        .recipe-search-wrapper .recipe-dynamic-search-results {
            padding: 8px 16px;
        }

            .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item {
                gap: 10px;
            }

                .recipe-search-wrapper .recipe-dynamic-search-results .search-recipe-item .search-recipe-item__name {
                    font-size: 13px;
                    line-height: 1.3;
                }
    }

.modal-comment-tab {
    height: calc(100% - 170px);
}

.modal-comment-tab .tab-nav {
        border: 1px solid #DEE4EC;
        border-radius: 30px;
        width: auto;
        display: inline-flex;
    }

.modal-comment-tab .tab-nav li > a {
                color: #6C7A8D;
                font-size: 11px;
                font-weight: 400;
                line-height: 16px;
                white-space: nowrap;
                display: block;
                padding: 3px 16px;
                border-radius: 16px;
                border: 0px;
            }

.modal-comment-tab .tab-nav li.active a {
                    background-color: #0061E6;
                    color: #ffffff;
                    outline: 1px solid #0061E6;
                }

.modal-comment-tab .tab-content, .modal-comment-tab .comment-tab-item{
    height: 100%;
}

.modal-comment-tab .comment-filtered-information{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-table .medicineInfoTable td .modal-comment-tab .comment-filtered-information{
    gap: 0.5rem;
}

@media screen and (max-width: 767.98px) {

.modal-comment-tab .comment-filtered-information {
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 16px;
    }
    }

.modal-comment-tab .comment-result-text{
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.member-table .medicineInfoTable td .modal-comment-tab .comment-result-text{
    gap: 0.5rem;
}

.modal-comment-tab .comment-star-rating{
    position: relative;
    margin-left: 0.625rem;
    display: flex;
    cursor: pointer;
    align-items: center;
    overflow: hidden;
}

.member-table .medicineInfoTable td .modal-comment-tab .comment-star-rating{
    gap: 0.5rem;
}

.modal-comment-tab .comment-star-rating {
        direction: rtl;
    }

.modal-comment-tab .comment-star-rating input{
    display: none;
}

.medisupp-backdrop.modal-comment-tab .comment-star-rating input {
        display: none;
    }


    .draft-selfnote.modal-comment-tab .comment-star-rating input{
    display: none !important;
}

.modal-comment-tab .comment-star-rating label {
            background: transparent url('/assets/img/icon/comment-star-blank.svg') center center no-repeat;
            width: 16px;
            height: 20px;
            display: block;
            margin: 0;
            padding: 0;
            border: 0;
        }

.modal-comment-tab .comment-star-rating input:checked ~ label {
            background-image: url('/assets/img/icon/comment-star-filled.svg');
        }

.modal-comment-tab .modal-comment-wrapper{
    margin-top: 1.5rem;
    height: 100%;
    overflow-y: auto;
}

.modal-comment-tab .modal-comment-item {
        padding-top: 16px;
        padding-bottom: 16px;
        border-top: 1px solid #DEE4EC;
    }

.modal-comment-tab .modal-comment-item .comment-stars{
    position: relative;
    margin-bottom: 0.625rem;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.modal-comment-tab .modal-comment-item .comment-stars .comment-stars-filled{
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    width: 0px;
    align-items: center;
    overflow: hidden;
}

.member-table .medicineInfoTable td .modal-comment-tab .modal-comment-item .comment-stars .comment-stars-filled{
    gap: 0.5rem;
}

.modal-comment-tab .modal-comment-item .comment-title{
    margin-bottom: 0.625rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(46, 57, 72, 1);
    color: rgba(46, 57, 72, var(--tw-text-opacity));
}

.modal-comment-tab .modal-comment-item .comment-date{
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgba(139, 152, 170, 1);
    color: rgba(139, 152, 170, var(--tw-text-opacity));
}

.modal-comment-tab .modal-comment-item .comment-date:has(.member-fullname){
    display: flex;
    align-items: center;
}

.member-table .medicineInfoTable td .modal-comment-tab .modal-comment-item .comment-date:has(.member-fullname){
    gap: 0.5rem;
}

.modal-comment-tab .modal-comment-item .comment-date .member-fullname {
                border-right: 1px solid #DEE4EC;
                padding-right: 16px;
                margin-right: 16px;
                display: block;
            }

@media (min-width: 1170px){

    .member-nav-hamburger-menu{
        display: none !important;
    }
}

@media screen and (max-width: 1169.98px) {

.member-nav-hamburger-menu {
        background: transparent url('/assets/img/icon/dots-horizontal.svg') center center no-repeat;
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0px;
        display: grid;
        align-items: center;
        justify-items: center;
        place-items: center;
        border-radius: 32px;
        border: 1px solid #8B98AA;
        overflow: hidden;
        position: relative;
        cursor: pointer;
}
    }

.blog-card-list .blog-card-item {
        background: #F9FAFB;
        padding: 24px 24px 32px 24px;
        border: 1px solid #F0F3F6;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
    }

.blog-card-list .blog-card-item .blog-card-item__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

.blog-card-list .blog-card-item .blog-card-item__title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.blog-card-list .blog-card-item .blog-card-item__title > .icon {
                width: 40px;
                min-width: 40px;
                height: 40px;
                border-radius: 24px;
                border: 2px solid #C4CDDA;
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
            }

.blog-card-list .blog-card-item .blog-card-item__title > .icon.blue {
                    border-color: #2DB4FF;
                }

.blog-card-list .blog-card-item .blog-card-item__title > .title {
                color: #2E3948;
                font-size: 18px;
                font-weight: 300;
                line-height: normal;
            }

.blog-card-list .blog-card-item .blog-card-item__title:hover > .title {
                    -webkit-text-decoration: underline;
                    text-decoration: underline;
                }

.blog-card-list .blog-card-item .blog-card-item__btns {
            display: flex;
            align-items: center;
            gap: 24px;
        }

.blog-card-list .blog-card-item .blog-card-item__btns a {
                color: #0061E6;
                font-size: 14px;
                line-height: 20px;
                display: flex;
                align-items: center;
                gap: 4px;
                font-weight: 300;
            }

.blog-card-list .blog-card-item .blog-card-item__btns a:hover {
                    -webkit-text-decoration: underline;
                    text-decoration: underline;
                }

.blog-card-list .blog-card-item .blog-card-item__body {
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }

.blog-card-list .blog-card-item .blog-card-item__content {
            color: #000;
            font-size: 16px;
            line-height: 26px;
            flex: 1 0 0%;
            font-weight: 300;
        }

.blog-card-list .blog-card-item .blog-card-item__file {
            width: 440px;
            display: block;
        }

.blog-card-list .blog-card-item .blog-card-item__file .video-embed {
                position: relative;
                width: 100%;
                overflow: hidden;
                border-radius: 4px;
                padding-bottom: 56.67%;
                pointer-events: none;
            }

.blog-card-list .blog-card-item .blog-card-item__file .video-embed iframe {
                    width: 100%;
                    height: 100%;
                    display: block;
                    margin: 0px;
                    padding: 0px;
                    outline: 0px;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    pointer-events: none;
                }

.blog-card-list .blog-card-item .blog-card-item__file .video-embed::after {
                    content: '';
                    background: url('/assets/img/icon/circle-play.svg') center center no-repeat;
                    width: 64px;
                    height: 64px;
                    position: absolute;
                    bottom: 14px;
                    right: 14px;
                    z-index: 1;
                }

.blog-card-list .blog-card-item .blog-card-item__file.pdf-btn {
                color: #0061E6;
                text-align: center;
                font-size: 14px;
                font-weight: 600;
                line-height: 24px;
                padding: 16px;
                min-height: 71px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: 4px;
                border: 1px solid #A8B3C2;
            }

.blog-card-list .blog-card-item .blog-card-item__date {
            background-color: #fff;
            color: #6C7A8D;
            font-size: 14px;
            line-height: 20px;
            padding: 10px 16px 10px 12px;
            border-left: 3px solid #fff;
        }

.blog-card-list .blog-card-item .blog-card-item__date.green {
                border-color: #16D261;
            }

.blog-card-list .blog-card-item .blog-card-item__date.gray {
                border-color: #2E3948;
            }

.blog-card-list .blog-card-item .blog-card-item__date.yellow {
                border-color: #FFA800;
            }

.blog-card-list .blog-card-item .blog-card-item__date:has(.end-date) {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }

.blog-card-list .blog-card-item .blog-card-item__date .end-date {
                background: url('/assets/img/icon/blog-card-flag.svg') left center no-repeat;
                padding-left: 28px;
                display: block;
                line-height: 24px;
            }

@media screen and (max-width: 1023.98px) {
        .blog-card-list .blog-card-item {
            padding: 16px;
        }

            .blog-card-list .blog-card-item .blog-card-item__header {
                flex-direction: column-reverse;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 8px;
            }
                .blog-card-list .blog-card-item .blog-card-item__title > .title {
                    font-size: 16px;
                }

            .blog-card-list .blog-card-item .blog-card-item__btns {
                justify-content: flex-end;
                align-self: flex-end;
            }

                .blog-card-list .blog-card-item .blog-card-item__btns a {
                    font-size: 12px;
                    line-height: 1.2;
                }

            .blog-card-list .blog-card-item .blog-card-item__body {
                flex-direction: column;
            }

            .blog-card-list .blog-card-item .blog-card-item__file {
                width: 100%;
            }

            .blog-card-list .blog-card-item .blog-card-item__content {
                font-size: 14px;
                line-height: 20px;
            }

            .blog-card-list .blog-card-item .blog-card-item__date {
                font-size: 14px;
                line-height: 1.2;
            }

                .blog-card-list .blog-card-item .blog-card-item__date:has(.end-date) {
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: stretch;
                }
    }

.totalCharCountElement {
    color: #5F5F5F;
    font-size: 12px;
    line-height: 22px;
    display: block;
    margin-top: 4px;
}

.form-item-card .file-type-label {
        color: #2E3948;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

.form-item-card .file-type-label em {
            background-color: #ffffff;
            width: 16px;
            height: 16px;
            display: block;
            border: 1px solid #A8B3C2;
            border-radius: 100%;
            position: relative;
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

.form-item-card .file-type-label input {
            display: none;
        }

.form-item-card .file-type-label input:checked + em::before {
                    content: '';
                    background-color: #0082FF;
                    width: 10px;
                    height: 10px;
                    display: block;
                    border-radius: 100%;
                    border: 1px solid #A8B3C2;
                }

.form-item-card .file-input input {
            display: none;
        }

.form-item-card .file-input label{
    display: block;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
            padding: 14px 16px;
            border-radius: 8px;
            border: 1px solid #8B98AA;
            min-height: 50px;
}

.form-item-card input:disabled, .form-item-card .file-input input:disabled + label {
        background-color: #F0F3F6;
    }

.accordion-item[data-key="7"] .member-accordion-label .value:empty::before {
                content: '-';
            }

.accordion-item[data-key="7"] .member-accordion-label .value.no-icon:empty::before {
                background: url(/assets/img/icon/list-shape.svg) left 3px no-repeat;
                padding-left: 24px;
            }

.after\:\!content-\[\'\'\]::after{
    --tw-content: '' !important;
    content: '' !important;
    content: var(--tw-content) !important;
}

.hover\:bg-gray-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, 1);
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.hover\:text-gray-600:hover{
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, 1);
    color: rgba(75, 85, 99, var(--tw-text-opacity));
}

.hover\:text-red-700:hover{
    --tw-text-opacity: 1;
    color: rgba(185, 28, 28, 1);
    color: rgba(185, 28, 28, var(--tw-text-opacity));
}

.focus\:border-blue-500:focus{
    --tw-border-opacity: 1;
    border-color: rgba(59, 130, 246, 1);
    border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

.focus\:outline-none:focus{
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-blue-500:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

@media (min-width: 640px){

    .sm\:relative{
        position: relative;
    }

    .sm\:right-0{
        right: 0px;
    }

    .sm\:top-0{
        top: 0px;
    }

    .sm\:col-span-3{
        grid-column: span 3 / span 3;
    }

    .sm\:my-8{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .sm\:mb-\[12px\]{
        margin-bottom: 12px;
    }

    .sm\:block{
        display: block;
    }

    .sm\:flex{
        display: flex;
    }

    .sm\:h-auto{
        height: auto;
    }

    .sm\:w-6\/12{
        width: 50%;
    }

    .sm\:w-auto{
        width: auto;
    }

    .sm\:max-w-\[600px\]{
        max-width: 600px;
    }

    .sm\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:justify-between{
        justify-content: space-between;
    }

    .sm\:gap-6{
        gap: 1.5rem;
    }

    .sm\:border-b{
        border-bottom-width: 1px;
    }

    .sm\:p-0{
        padding: 0px;
    }

    .sm\:p-8{
        padding: 2rem;
    }

    .sm\:px-6{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:pl-8{
        padding-left: 2rem;
    }

    .sm\:pr-4{
        padding-right: 1rem;
    }

    .sm\:text-sm{
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (min-width: 768px){

    .md\:fixed{
        position: fixed;
    }

    .md\:ml-0{
        margin-left: 0px;
    }

    .md\:mt-0{
        margin-top: 0px;
    }

    .md\:mt-8{
        margin-top: 2rem;
    }

    .md\:\!block{
        display: block !important;
    }

    .md\:block{
        display: block;
    }

    .md\:flex{
        display: flex;
    }

    .md\:\!hidden{
        display: none !important;
    }

    .md\:hidden{
        display: none;
    }

    .md\:min-h-\[calc\(100vh_-_14rem\)\]{
        min-height: calc(100vh - 14rem);
    }

    .md\:w-1\/12{
        width: 8.333333%;
    }

    .md\:w-10\/12{
        width: 83.333333%;
    }

    .md\:w-2\/12{
        width: 16.666667%;
    }

    .md\:w-3\/12{
        width: 25%;
    }

    .md\:w-4\/12{
        width: 33.333333%;
    }

    .md\:w-6\/12{
        width: 50%;
    }

    .md\:w-7\/12{
        width: 58.333333%;
    }

    .md\:w-9\/12{
        width: 75%;
    }

    .md\:w-\[12\%\]{
        width: 12%;
    }

    .md\:w-\[88\%\]{
        width: 88%;
    }

    .md\:w-auto{
        width: auto;
    }

    .md\:max-w-\[360px\]{
        max-width: 360px;
    }

    .md\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-col{
        flex-direction: column;
    }

    .md\:flex-nowrap{
        flex-wrap: nowrap;
    }

    .md\:items-center{
        align-items: center;
    }

    .md\:pl-8{
        padding-left: 2rem;
    }

    .md\:pr-0{
        padding-right: 0px;
    }
}

@media (min-width: 1024px){

    .lg\:col-span-2{
        grid-column: span 2 / span 2;
    }

    .lg\:mx-0{
        margin-left: 0px;
        margin-right: 0px;
    }

    .lg\:mb-8{
        margin-bottom: 2rem;
    }

    .lg\:ml-4{
        margin-left: 1rem;
    }

    .lg\:mr-6{
        margin-right: 1.5rem;
    }

    .lg\:mt-0{
        margin-top: 0px;
    }

    .lg\:mt-\[48px\]{
        margin-top: 48px;
    }

    .lg\:mt-\[92px\]{
        margin-top: 92px;
    }

    .lg\:\!block{
        display: block !important;
    }

    .lg\:block{
        display: block;
    }

    .lg\:\!flex{
        display: flex !important;
    }

    .lg\:flex{
        display: flex;
    }

    .lg\:grid{
        display: grid;
    }

    .lg\:\!hidden{
        display: none !important;
    }

    .lg\:h-12{
        height: 3rem;
    }

    .lg\:h-\[50px\]{
        height: 50px;
    }

    .lg\:\!max-h-\[550px\]{
        max-height: 550px !important;
    }

    .lg\:w-12{
        width: 3rem;
    }

    .lg\:w-2\/12{
        width: 16.666667%;
    }

    .lg\:w-20{
        width: 5rem;
    }

    .lg\:w-3\/12{
        width: 25%;
    }

    .lg\:w-4\/12{
        width: 33.333333%;
    }

    .lg\:w-6\/12{
        width: 50%;
    }

    .lg\:w-8\/12{
        width: 66.666667%;
    }

    .lg\:w-\[28\.75rem\]{
        width: 28.75rem;
    }

    .lg\:w-\[290px\]{
        width: 290px;
    }

    .lg\:w-\[38\.75rem\]{
        width: 38.75rem;
    }

    .lg\:flex-initial{
        flex: 0 1 auto;
    }

    .lg\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:flex-row{
        flex-direction: row;
    }

    .lg\:flex-nowrap{
        flex-wrap: nowrap;
    }

    .lg\:items-center{
        align-items: center;
    }

    .lg\:items-stretch{
        align-items: stretch;
    }

    .lg\:\!gap-8{
        gap: 2rem !important;
    }

    .lg\:gap-14{
        gap: 3.5rem;
    }

    .lg\:gap-x-4{
        -moz-column-gap: 1rem;
             column-gap: 1rem;
    }

    .lg\:overflow-y-auto{
        overflow-y: auto;
    }

    .lg\:overflow-y-hidden{
        overflow-y: hidden;
    }

    .lg\:text-nowrap{
        text-wrap: nowrap;
    }

    .lg\:\!border-0{
        border-width: 0px !important;
    }

    .lg\:border-0{
        border-width: 0px;
    }

    .lg\:border-l{
        border-left-width: 1px;
    }

    .lg\:border-t-0{
        border-top-width: 0px;
    }

    .lg\:p-8{
        padding: 2rem;
    }

    .lg\:p-\[64px\]{
        padding: 64px;
    }

    .lg\:px-8{
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:px-\[64px\]{
        padding-left: 64px;
        padding-right: 64px;
    }

    .lg\:pl-6{
        padding-left: 1.5rem;
    }

    .lg\:pl-\[96px\]{
        padding-left: 96px;
    }

    .lg\:pt-0{
        padding-top: 0px;
    }

    .lg\:pt-\[64px\]{
        padding-top: 64px;
    }
}

@media (min-width: 1170px){

    .xl\:absolute{
        position: absolute;
    }

    .xl\:right-0{
        right: 0px;
    }

    .xl\:top-full{
        top: 100%;
    }

    .xl\:col-span-1{
        grid-column: span 1 / span 1;
    }

    .xl\:col-span-2{
        grid-column: span 2 / span 2;
    }

    .xl\:col-start-2{
        grid-column-start: 2;
    }

    .xl\:row-span-1{
        grid-row: span 1 / span 1;
    }

    .xl\:row-span-2{
        grid-row: span 2 / span 2;
    }

    .xl\:row-start-2{
        grid-row-start: 2;
    }

    .xl\:mb-0{
        margin-bottom: 0px;
    }

    .xl\:mb-4{
        margin-bottom: 1rem;
    }

    .xl\:mb-5{
        margin-bottom: 1.25rem;
    }

    .xl\:mb-6{
        margin-bottom: 1.5rem;
    }

    .xl\:mb-8{
        margin-bottom: 2rem;
    }

    .xl\:mt-0{
        margin-top: 0px;
    }

    .xl\:mt-6{
        margin-top: 1.5rem;
    }

    .xl\:mt-\[26px\]{
        margin-top: 26px;
    }

    .xl\:\!block{
        display: block !important;
    }

    .xl\:\!inline-block{
        display: inline-block !important;
    }

    .xl\:flex{
        display: flex;
    }

    .xl\:\!hidden{
        display: none !important;
    }

    .xl\:w-2\/12{
        width: 16.666667%;
    }

    .xl\:w-3\/12{
        width: 25%;
    }

    .xl\:w-4\/12{
        width: 33.333333%;
    }

    .xl\:w-5\/12{
        width: 41.666667%;
    }

    .xl\:w-6\/12{
        width: 50%;
    }

    .xl\:w-7\/12{
        width: 58.333333%;
    }

    .xl\:w-8\/12{
        width: 66.666667%;
    }

    .xl\:w-9\/12{
        width: 75%;
    }

    .xl\:w-\[calc\(50\%-12px\)\]{
        width: calc(50% - 12px);
    }

    .xl\:w-auto{
        width: auto;
    }

    .xl\:flex-1{
        flex: 1 1 0%;
    }

    .xl\:flex-auto{
        flex: 1 1 auto;
    }

    .xl\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:flex-nowrap{
        flex-wrap: nowrap;
    }

    .xl\:gap-1{
        gap: 0.25rem;
    }

    .xl\:gap-6{
        gap: 1.5rem;
    }

    .xl\:px-6{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .xl\:py-6{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .xl\:pl-0{
        padding-left: 0px;
    }

    .xl\:pl-6{
        padding-left: 1.5rem;
    }

    .xl\:pr-0{
        padding-right: 0px;
    }

    .xl\:pt-6{
        padding-top: 1.5rem;
    }

    .xl\:text-gray-500{
        --tw-text-opacity: 1;
        color: rgba(139, 152, 170, 1);
        color: rgba(139, 152, 170, var(--tw-text-opacity));
    }
}

@media (min-width: 1460px){

    .\32xl\:w-9\/12{
        width: 75%;
    }

    .\32xl\:flex-nowrap{
        flex-wrap: nowrap;
    }
}