body.loading {
    overflow: hidden;
    height: 100vh;
}
::-webkit-scrollbar-thumb {
    background: #d86c56 !important;
    border-radius: 6px;
    width: 5px !important;
}
#drawerIntuiposMenu .dx-drawer-content {
    background: #fcfbf7 !important;
}
#pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(252, 250, 247);
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.toolbar .dx-toolbar-item-content {
    font-family: "Parkinsans", sans-serif !important;
}
.dx-icon-book-open {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg%20fill%3D%22%23b07a63%22%20width%3D%2218px%22%20height%3D%2218px%22%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M952.08%201.552L529.039%20116.144c-10.752%202.88-34.096%202.848-44.815-.16L72.08%201.776C35.295-8.352-.336%2018.176-.336%2056.048V834.16c0%2032.096%2024.335%2062.785%2055.311%2071.409l412.16%20114.224c11.025%203.055%2025.217%204.751%2039.937%204.751%2010.095%200%2025.007-.784%2038.72-4.528l423.023-114.592c31.056-8.4%2055.504-39.024%2055.504-71.248V56.048c.016-37.84-35.616-64.464-72.24-54.496zM479.999%20956.943L71.071%20843.887c-3.088-.847-7.408-6.496-7.408-9.712V66.143L467.135%20177.68c3.904%201.088%208.288%201.936%2012.864%202.656v776.608zm480.336-122.767c0%203.152-5.184%208.655-8.256%209.503L544%20954.207v-775.92c.592-.144%201.2-.224%201.792-.384L960.32%2065.775v768.4h.016zM641.999%20366.303c2.88%200%205.81-.367%208.69-1.184l223.935-63.024c17.025-4.816%2026.945-22.465%2022.16-39.473s-22.56-26.88-39.472-22.16l-223.936%2063.025c-17.024%204.816-26.944%2022.464-22.16%2039.472%203.968%2014.128%2016.815%2023.344%2030.783%2023.344zm.002%20192.001c2.88%200%205.81-.368%208.69-1.185l223.935-63.024c17.025-4.816%2026.945-22.465%2022.16-39.473-4.783-17.008-22.56-26.88-39.472-22.16l-223.936%2063.025c-17.024%204.816-26.944%2022.464-22.16%2039.457%203.968%2014.127%2016.815%2023.36%2030.783%2023.36zm.002%20192c2.88%200%205.81-.368%208.69-1.185l223.935-63.024c17.025-4.816%2026.945-22.465%2022.16-39.473s-22.56-26.88-39.472-22.16L633.38%20687.487c-17.024%204.816-26.944%2022.464-22.16%2039.472%203.968%2014.113%2016.815%2023.345%2030.783%2023.345zM394.629%20303.487l-223.934-63.025c-16.912-4.72-34.688%205.152-39.473%2022.16s5.12%2034.656%2022.16%2039.473l223.937%2063.024a31.827%2031.827%200%200%200%208.687%201.184c13.968%200%2026.815-9.215%2030.783-23.343%204.784-16.993-5.12-34.657-22.16-39.473zm.002%20191.999l-223.934-63.025c-16.912-4.72-34.689%205.152-39.473%2022.16s5.12%2034.656%2022.16%2039.473l223.936%2063.024a31.827%2031.827%200%200%200%208.688%201.184c13.968%200%2026.815-9.215%2030.783-23.343%204.784-16.993-5.12-34.657-22.16-39.473zm.002%20191.999L170.699%20624.46c-16.912-4.72-34.689%205.152-39.473%2022.16s5.12%2034.656%2022.16%2039.473l223.936%2063.024a31.827%2031.827%200%200%200%208.688%201.184c13.968%200%2026.815-9.215%2030.783-23.343%204.784-17.008-5.12-34.657-22.16-39.473z%22%2F%3E%3C%2Fsvg%3E");
}
.toolbar {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 5px;
    z-index: 10;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 90;
}
    .toolbar .container-fluid {
        width: 97vw;
    }
.toolbar header { 
    width: 100vw !important;
    padding: 0px 10px;
}
.loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
} 
@media (width < 338px) {
    #drawerIntuiposMenu .dx-toolbar-item-content {
        font-size: 13px;
    }
} 
.loader-spinner {
    width: 45px;
    height: 45px;
    border: 5px solid #e5d1c9;
    border-top-color: #B37F6E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
} 
.loader-text {
    font-size: 18px;
    color: rgb(179, 127, 110);
    animation: fade 1.2s infinite;
}

.spinner-grow {
    background: rgb(179, 127, 110) !important;
}

@keyframes fade {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

body, button, input, optgroup, select, textarea {
    line-height: inherit !important;
    margin: 0 !important
}

a, hr {
    color: inherit !important
}

progress, sub, sup {
    vertical-align: baseline !important
}

blockquote, body, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, ul {
    margin: 0 !important
}

.p-0, dialog, fieldset, legend, menu, ol, ul {
    padding: 0 !important
}

.min-h-screen, body {
    background: white !important
}

.text-\[\#FA6B3D\], .text-\[\#FCFAF7\], .text-green-700, .text-red-600, .text-red-700, .text-white {
    --tw-text-opacity: 1 !important
}

*, :after, :before {
    box-sizing: border-box !important;
    border: 0 solid #e5e7eb !important;
    --tw-border-spacing-x: 0 !important;
    --tw-border-spacing-y: 0 !important;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    --tw-rotate: 0 !important;
    --tw-skew-x: 0 !important;
    --tw-skew-y: 0 !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    --tw-scroll-snap-strictness: proximity !important;
    --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 !important;
    --tw-ring-offset-color: #fff !important;
    --tw-ring-color: rgb(59 130 246 / .5) !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    --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:
}

:after, :before {
    --tw-content: "" !important
}

:host, html {
    line-height: 1.5 !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-tab-size: 4 !important;
    -o-tab-size: 4 !important;
    tab-size: 4 !important;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" !important;
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
    -webkit-tap-highlight-color: transparent !important
}

hr {
    height: 0 !important;
    border-top-width: 1px !important
}

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

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

a {
    text-decoration: inherit !important
}

b, strong {
    font-weight: bolder !important
}

code, kbd, pre, samp {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important;
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
    font-size: 1em !important
}

small {
    font-size: 80% !important
}

sub, sup {
    font-size: 75% !important;
    line-height: 0 !important;
    position: relative !important
}

sub {
    bottom: -.25em !important
}

sup {
    top: -.5em !important
}

table {
    text-indent: 0 !important;
    border-color: inherit !important;
    border-collapse: collapse !important
}

button, input, optgroup, select, textarea {
    font-family: inherit !important;
    font-feature-settings: inherit !important;
    font-variation-settings: inherit !important;
    font-size: 100% !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    padding: 0 !important
}

button, select {
    text-transform: none !important
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button !important;
    background-color: transparent !important;
    background-image: none !important
}

:-moz-focusring {
    outline: auto !important
}

:-moz-ui-invalid {
    box-shadow: none !important
}

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

[type=search] {
    -webkit-appearance: textfield !important;
    outline-offset: -2px !important
}

::-webkit-search-decoration {
    -webkit-appearance: none !important
}

::-webkit-file-upload-button {
    -webkit-appearance: button !important;
    font: inherit !important
}

summary {
    display: list-item !important
}

menu, ol, ul {
    list-style: none !important
}

textarea {
    resize: vertical !important
}

    input::-moz-placeholder, textarea::-moz-placeholder {
        opacity: 1 !important;
        color: #9ca3af !important
    }

    input::placeholder, textarea::placeholder {
        opacity: 1 !important;
        color: #9ca3af !important
    }

[role=button], button {
    cursor: pointer !important
}

:disabled {
    cursor: default !important
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block !important;
    vertical-align: middle !important
}

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

[hidden] {
    display: none !important
}

::backdrop {
    --tw-border-spacing-x: 0 !important;
    --tw-border-spacing-y: 0 !important;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    --tw-rotate: 0 !important;
    --tw-skew-x: 0 !important;
    --tw-skew-y: 0 !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity !important;
    --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: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --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:
}

.visible {
    visibility: visible !important
}

.fixed {
    position: fixed !important
}

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

.z-50 {
    z-index: 50 !important
}

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

.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: .75rem !important
}

.mb-4 {
    margin-bottom: 1rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: .75rem !important
}

.mt-4 {
    margin-top: 1rem !important
}

.mt-6 {
    margin-top: 1.5rem !important
}

.block {
    display: block !important
}

.flex {
    display: flex !important
}

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

.h-5 {
    height: 1.25rem !important
}

.h-6 {
    height: 1.5rem !important
}

.min-h-screen {
    min-height: 100vh !important
}

.w-20 {
    width: 5rem !important
}

.w-5 {
    width: 1.25rem !important
}

.w-6 {
    width: 1.5rem !important
}

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

.max-w-2xl {
    max-width: 42rem !important
}

.max-w-lg {
    max-width: 32rem !important
}

.max-w-md {
    max-width: 28rem !important
}

.max-w-sm {
    max-width: 24rem !important
}

.max-w-xs {
    max-width: 20rem !important
}

.flex-1 {
    flex: 1 1 0% !important
}

@keyframes spin {
    to {
        transform: rotate(360deg) !important
    }
}

.animate-spin {
    animation: 1s linear infinite spin !important
}

.list-disc {
    list-style-type: disc !important
}

.flex-col {
    flex-direction: column !important
}

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

.justify-center {
    justify-content: center !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: .75rem !important
}

.gap-4 {
    gap: 1rem !important
}

.gap-5 {
    gap: 1.25rem !important
}

.gap-6 {
    gap: 1.5rem !important
}

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

.rounded {
    border-radius: .25rem !important
}

.rounded-2xl {
    border-radius: 1rem !important
}

.rounded-lg {
    border-radius: .5rem !important
}

.rounded-xl {
    border-radius: .75rem !important
}

.border {
    border-width: 1px !important
}

.border-2 {
    border-width: 2px !important
}

.border-none {
    border-style: none !important
}

.border-\[\#F5EBE5\] {
    --tw-border-opacity: 1;
    border-color: rgb(245 235 229 / var(--tw-border-opacity)) !important
}

.bg-\[\#25D366\] {
    --tw-bg-opacity: 1;
    background-color: rgb(37 211 102 / var(--tw-bg-opacity)) !important
}

.bg-\[\#B37F6E\] {
    --tw-bg-opacity: 1;
    background-color: rgb(179 127 110 / var(--tw-bg-opacity)) !important
}

.bg-\[\#F5EBE5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 235 229 / var(--tw-bg-opacity)) !important
}

.bg-\[\#FA6B3D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 107 61 / var(--tw-bg-opacity)) !important
}

.bg-\[\#FCFAF7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(252 250 247 / var(--tw-bg-opacity)) !important
}

.bg-black {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important
}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity)) !important
}

.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity)) !important
}

.bg-transparent {
    background-color: transparent !important
}

.bg-white {
    --tw-bg-opacity: 1 !important;
    background: white !important
}

.bg-opacity-40 {
    --tw-bg-opacity: .4 !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: .75rem !important
}

.p-8 {
    padding: 2rem !important
}

.px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.px-3 {
    padding-left: .75rem !important;
    padding-right: .75rem !important
}

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

.pl-6, .px-6 {
    padding-left: 1.5rem !important
}

.px-6 {
    padding-right: 1.5rem !important
}

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

.py-3 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important
}

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

.text-center {
    text-align: center !important
}

.text-justify {
    text-align: justify !important
}

.text-2xl {
    color: #b37f6e;
    font-size: 1.5rem !important;
    line-height: 2rem !important
}

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

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

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

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

.text-xs {
    font-size: .75rem !important;
    line-height: 1rem !important
}

.font-bold {
    font-weight: 700 !important
}

.font-medium {
    font-weight: 500 !important
}

.font-semibold {
    font-weight: 600 !important
}

.hover\:text-\[\#B37F6E\]:hover, .text-\[\#B37F6E\] {
    --tw-text-opacity: 1 !important;
    color: rgb(179 127 110 / var(--tw-text-opacity)) !important
}

.text-\[\#FA6B3D\] {
    color: rgb(250 107 61 / var(--tw-text-opacity)) !important
}

.text-\[\#FCFAF7\] {
    color: rgb(252 250 247 / var(--tw-text-opacity)) !important
}

.text-green-700 {
    color: rgb(21 128 61 / var(--tw-text-opacity)) !important
}

.text-red-600 {
    color: rgb(220 38 38 / var(--tw-text-opacity)) !important
}

.text-red-700 {
    color: rgb(185 28 28 / var(--tw-text-opacity)) !important
}

.text-white {
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.underline {
    text-decoration-line: underline !important
}

.placeholder-\[\#B37F6E\]::-moz-placeholder {
    --tw-placeholder-opacity: 1 !important;
    color: rgb(179 127 110 / var(--tw-placeholder-opacity)) !important
}

.placeholder-\[\#B37F6E\]::placeholder {
    --tw-placeholder-opacity: 1 !important;
    color: rgb(179 127 110 / var(--tw-placeholder-opacity)) !important
}

.opacity-25 {
    opacity: .25 !important
}

.opacity-75 {
    opacity: .75 !important
}

.transition {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter !important;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s !important
}

.transition-all, .transition-colors {
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
    transition-duration: .15s !important
}

.transition-all {
    transition-property: all !important
}

.transition-colors { 
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke !important
}

.hover\:bg-\[\#128C7E\]:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(18 140 126 / var(--tw-bg-opacity)) !important
}

.hover\:bg-\[\#B37F6E\]:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(179 127 110 / var(--tw-bg-opacity)) !important
}

.hover\:bg-\[\#FA6B3D\]:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(250 107 61 / var(--tw-bg-opacity)) !important
}

.hover\:opacity-90:hover {
    opacity: .9 !important
}

.focus\:outline-none:focus {
    outline: transparent solid 2px !important;
    outline-offset: 2px !important
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000) !important
}

.focus\:ring-\[\#B37F6E\]:focus {
    --tw-ring-opacity: 1 !important;
    --tw-ring-color: rgb(179 127 110 / var(--tw-ring-opacity)) !important
}

.focus\:ring-\[\#FA6B3D\]:focus {
    --tw-ring-opacity: 1 !important;
    --tw-ring-color: rgb(250 107 61 / var(--tw-ring-opacity)) !important
}

@media (min-width:640px) {
    .sm\:mb-4 {
        margin-bottom: 1rem !important
    }

    .sm\:mt-4 {
        margin-top: 1rem !important
    }

    .sm\:w-1\/5 {
        width: 20% !important
    }

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

    .sm\:p-8 {
        padding: 2rem !important
    }

    .sm\:text-2xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important
    }

    .sm\:text-3xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important
    }

    .sm\:text-base {
        font-size: 1rem !important;
        line-height: 1.5rem !important
    }

    .sm\:text-lg {
        font-size: 1.125rem !important;
        line-height: 1.75rem !important
    }

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

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

.shadow-lg {
    background: #FF5508 !important;
    color: #fcfaf7 !important;
    filter: none !important;
    box-shadow: transparent 0 0 0 0,transparent 0 0 0 0,rgba(0,0,0,.1) 0 10px 15px -3px,rgba(0,0,0,.1) 0 4px 6px -4px !important;
    transform: none !important
}

.bg-whitest {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1) !important;
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow) !important
}

.flex-2 {
    flex: 2 1 0% !important;
}

.flex-hidden {
    display: none !important;
}  
.otp-card {
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 4px 30px #ac8273;
}
.otp-text {
    font-weight: 700;
    color: #ac8273;
    font-size: larger;
}
.placeholder-center::placeholder {
    text-align: center;
}
.modal-buttons {
    margin: 0 1rem;
}
    .modal-buttons button {
        color: white !important;
        background: #FF5508 !important;
        font-weight: 500 !important;
    }
    .modal-buttons #btnValidateOtp {
        color: white !important;
        background: #FF5508 !important;
    }
.placeholder-center {
    text-align: center;  
}
.text-disabled{
    opacity:0.5;
}

#txtSeachMenuItems {
    background: rgb(245, 235, 229) !important; 
}

    #txtSeachMenuItems .dx-placeholder{
        color: rgb(179 127 110) !important;
    }

    #txtSeachMenuItems.dx-texteditor {
        border-radius: 24px !important;
        overflow: hidden;
        margin: 1rem 1.1rem !important;
        margin-top: 5px !important;
    }

        #txtSeachMenuItems.dx-texteditor.dx-editor-filled::after {
            border: none !important;
        }

    #txtSeachMenuItems .dx-texteditor-buttons-container .dx-button-content {
        background: rgb(245, 235, 229) !important;
    }

    #txtSeachMenuItems .dx-icon-search {
        color: rgb(179 127 110) !important;
    }
.order-menu-container {
    margin-top: 10rem;
} 
#txtSeachMenuItems .dx-texteditor-input {
    padding: 15px 16px 14px !important;
}
#txtSeachMenuItems input::placeholder { 
    opacity: 0 !important;
}


#tabSubGroup, #tabSubGroup .dx-item {
    background: #fcfbf7;
}

    #tabSubGroup .dx-tabs-wrapper {
        width: fit-content !important;
        height: 3rem !important;
        border-bottom: 1px solid #ebebeb !important;
    } 

    #tabSubGroup .dx-tab {
        min-width: auto !important;
        height: unset !important;
    }

    #tabSubGroup .dx-inkripple,
    #tabSubGroup .dx-ripple {
        display: none !important;
    }

    #tabSubGroup .dx-tab::after {
        display: none !important;
    }

    #tabSubGroup .dx-tab.dx-tab-selected {
        background-color: transparent !important;
        box-shadow: none !important;
    }

        #tabSubGroup .dx-tab.dx-tab-selected::after,
        #tabSubGroup .dx-tab::after {
            display: none !important;
        }

    #tabSubGroup .dx-tab.dx-state-active,
    #tabSubGroup .dx-tab.dx-state-focused,
    #tabSubGroup .dx-tab.dx-state-hover {
        background-color: transparent !important;
    }

    #tabSubGroup .dx-tab {
        transition: none !important;
    }

    #tabSubGroup .dx-item-content {
        padding-top: 10px !important;
        height: 25px !important;
        color: #FF5508 !important;
    }

    #tabSubGroup .dx-tab {
        padding: 0px 16px !important;
    }
.dx-cardview-header-container, .dx-gridbase-a11y-status-container {
    display: none !important;
}
.dx-cardview-content, .dx-cardview {
    background: #fcfbf7 !important;
}

.card-menuItems-wrapper {
    width: 97vw;
    border: 1px solid #d3d3d373 !important;
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 12px;
    padding: 12px;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#drawerIntuiposMenu.dx-drawer-opened .card-menuItems-wrapper {
    width: 84vw !important;
}
    .card-menuItems-wrapper:active {
        transform: scale(0.97);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
.card-menuItems-body {
    display: flex;
    gap: 12px;
    align-items: center;
}
.card-menuItems-image {
    height: 6rem;
    width: 6rem;
    flex: 0 0 6rem;
    flex-shrink: 0;
}
.card-menuItems-image img{  
    display: block !important;
    transition: transform 0.5s ease;
    height: 100% !important;
    width: 100% !important;
    border-radius: 10px;
}
.card-menuItems-name {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #725a51;
    font-weight: bolder;
}
.name-puntoDeVenta-info, .puntoDeVenta-info-name {
    font-size: 1.7rem !important;
    color: #725a51;
    font-weight: bolder;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: calc(1.5em * 2);
}
.card-menuItems-description {
    color: rgb(179, 127, 110);
    font-size: clamp(0.8rem, 1.8vw, 1rem);
}
.card-menuItems-price {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: rgb(179, 127, 110);
    font-weight: bolder;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.card-menuItems-price .dx-icon-chevronright{
    position: absolute;
    right: 5px;
}
.card-menuItems-name, .card-menuItems-description {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: calc(1.5em * 1);
}
.card-menuItems-extras {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
}
@media (width < 427px) {
    .name-puntoDeVenta-info, .puntoDeVenta-info-title, .puntoDeVenta-info-name {
        font-size: 1.1rem !important;
    }
}
@media (width <= 768px) {
    .card-menuItems-wrapper {
        width: 90vw;
    }
    #drawerIntuiposMenu.dx-drawer-opened .card-menuItems-wrapper {
        width: 60vw !important;
        transition:ease 0.5s;
    }
} 
@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}
 
.skeleton-box {
    background: linear-gradient(90deg, #eaeaea 25%, #f5f5f5 37%, #eaeaea 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s infinite;
    border-radius: 8px;
}
 
.skeleton-img {
    height: 5rem;
    width: 5rem;
    flex: 0 0 5rem;
    flex-shrink: 0;
}

.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}

    .skeleton-line.short {
        width: 60%;
    }

.skeleton-price {
    width: 70px;
    height: 18px;
    margin-top: 6px;
}
 
.skeleton .card-menuItems-name,
.skeleton .card-menuItems-description,
.skeleton .card-menuItems-price,
.skeleton img {
    opacity: 0;
} 
.skeleton .skeleton-box {
    animation: shimmer 1.3s infinite, hideSkeleton 0.01s forwards;  
    animation-delay: 0s, 0.9s;
}
 
@keyframes hideSkeleton {
    to {
        opacity: 0;
        display: none;
    }
}
 
.skeleton .card-menuItems-name,
.skeleton .card-menuItems-description,
.skeleton .card-menuItems-price,
.skeleton img {
    animation: showContent 300ms ease forwards;
    animation-delay: 0.9s;
}

@keyframes showContent {
    to {
        opacity: 1;
    }
} 
.card-menuItems-wrapper {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
} 
.card-menuItems-wrapper.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 24px;
    padding-top:0px !important;
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 0 40px rgba(0,0,0,0.5); 
    align-items: center;
    z-index: 9999;
    overflow-y: auto;
    transform: scale(1);
}

.card-menuItem-detail {
    position: relative;
}
.card-menuItem-detail-close {
    position: absolute;
    background: white !important;
    border-radius: 100%;
    height: 2rem;
    width: 2rem;
    top: 10px;
    left: 10px;
    color: #FA6B3D !important;
    font-weight: bolder !important;
}
.dx-popup-content:has(.card-menuItem-detail)
{
    padding:0 !important;
}
.card-menuItem-detail-image {
    background: #f5ebe5;
    display:flex;
    justify-content:center;
}
.card-menuItem-detail-image img {
    width: 720px;
    height: 720px !important;
    border-radius:10px;
}
.card-menuItem-detail-container {
    padding: 2rem;
    width:100%;
    display:flex;
    justify-content:center
} 
.card-menuItem-detail-title {
    font-size: 3.5rem !important;
    color: rgb(179, 127, 110);
    font-weight: bolder !important;
}
.card-menuItem-detail-price {
    color: #FA6B3D !important;
    font-weight: bolder !important;
    font-size: 1.5rem !important;
    width: fit-content !important;
    padding: 5px 0 !important;
    margin-bottom: 10px;
    border-bottom: 3px solid #FA6B3D !important;
} 
.card-menuItem-detail-description {
    color: rgb(179, 127, 110);
    font-size:15px;
}
@media (width <= 425px) {
    .card-menuItem-detail-title {
        font-size: 2rem !important;
    }
    .card-menuItem-detail-price{
        font-size:1rem !important;
    }
    .name-puntoDeVenta-info { 
        max-width: 10rem;
    }
    .dx-overlay-content:has(.share-popup) {
        width: 100vw !important;
    }
    .card-menuItem-detail-image img {
        width: 100% !important;
        height: 100% !important;
    }
} 
@keyframes slideInFromLeft {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.slide-in-left {
    animation: slideInFromLeft 0.5s ease forwards;
}
.btn-puntoDeVenta-info {
    height: 25px;
    width: 25px;
    background: #725a51 !important;
    padding: 15px !important;
    padding-top: 16px !important;
    position: sticky;
    right: 20px;
}
.btn-puntoDeVenta-info span {
   font-size: 20px;
   color: white;
}
.dx-icon-menu {
    cursor:pointer;
    color: #725a51 !important;
}

.image-puntoDeVenta-info {
    height: 45px !important;
    width: 45px !important;
}
.digitalmenu-sidebar-header .image-puntoDeVenta-info {
    height:80px !important;
    width:80px !important;
}
.puntoDeVenta-info-header .dx-icon-chevronleft::before,
.puntoDeVenta-info-header .dx-icon-share::before 
{
    background: #725a51;
    color: white;
    border-radius: 100%;
    padding: 5px;
    font-size:20px;
    cursor:pointer;
} 
.puntoDeVenta-info-header .dx-icon-share::before {
    padding-right:7px;
}
.dx-popup-content:has(.puntoDeVenta-info-wrapper) {
    padding: 0 !important;
}
.puntoDeVenta-info-header {
    padding: 10px;
    border-bottom: 1px solid #d3d3d34a !important;
    position: sticky;
    top: 0px;
    background: white;
}
.puntoDeVenta-info-profile{
    padding:1rem 1.5rem;
}
.puntoDeVenta-info-title {
    color: #725a51;
    font-weight:500;
    font-size:1.5rem;
}
.puntoDeVenta-info-detail {
    color: rgb(179, 127, 110);
    font-size: clamp(0.8rem, 1.8vw, 1rem) !important;
    letter-spacing:1px
}
.puntoDeVenta-info-section, .puntoDeVenta-hours-section {
    padding: 1rem 2rem 0 2rem;
}
.puntoDeVenta-info-section-title, .puntoDeVenta-hours-section-title {
    font-size: 20px !important;
    margin-bottom: 5px !important;
    color: #FF5508;
    font-weight: bolder !important;
}

.puntoDeVenta-info-contact-table, .puntoDeVenta-hours-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}

    .puntoDeVenta-info-contact-table td, .puntoDeVenta-hours-table td {
        padding: 0.4rem 0;
        vertical-align: middle;
    }
     
.puntoDeVenta-info-icon-cell {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    text-align: center;
    padding-right: 6px;
}

    .puntoDeVenta-info-icon-cell .dx-icon {
        font-size: 16px;
        line-height: 1;
    }

.puntoDeVenta-info-text, .puntoDeVenta-hours-text {
    font-size: 0.95rem;
    word-break: break-word;
    padding-left: 20px !important;
    width: 100vw;
}
.puntoDeVenta-info-address, .puntoDeVenta-info-mobile, .puntoDeVenta-info-email {
    color: rgb(179, 127, 110);
}
.puntoDeVenta-hours-text {
    text-align: right;
    padding-right: 0.4rem;
}
    .puntoDeVenta-info-contact-table .dx-icon:before {
        background: #ff550821;
        padding: 5px;
        border-radius: 100%;
    }
.puntoDeVenta-info-contact-table .dx-icon {
    font-size: 20px !important;
    color: #FF5508 !important;
    padding: 0px 5px !important;
    margin:5px !important;
}
.puntoDeVenta-info-contact-table, .puntoDeVenta-hours-table {
    border-collapse: separate !important;
    display: flex;
    align-items: center;
    color: #FF5508;
    width: 100%;
}

    .puntoDeVenta-info-contact-table td, .puntoDeVenta-hours-table  td{
        background: #f9fafc !important;
    }
.puntoDeVenta-hours-icon-cell {
    width: 50% !important;
    padding-left: 10px !important;
    color: #725a51 !important;
}
.puntoDeVenta-hours-time {
    font-weight: bolder;
    font-size:15px;
    color: rgb(179, 127, 110);
    white-space:nowrap;
}
.puntoDeVenta-info-map iframe
{
    width:100%;
    height:25em;
}
.puntoDeVenta-info-map{
    width:100%;
    margin-bottom:20px;
}
.digitalmenu-sidebar {
    width: 260px;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    height: 100vh;
    border-right: 1px dotted #f7e7dc !important;
}

.digitalmenu-sidebar-header {
    text-align: center;
    padding: 24px 16px;
    border-bottom: 1px dotted #f7e7dc !important;
}
.digitalmenu-sidebar-footer-copyright {
    position: absolute;
    bottom: 10px;
    color: #b37f6e;
    font-size: 12px !important;
    letter-spacing: 1.5px;
}
.digitalmenu-sidebar-footer-copyright a{
    border-bottom: 0.1px solid #b37f6e !important;
}
.digitalmenu-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f7e7dc;
}

.digitalmenu-title {
    font-size: 1.2rem !important;
    color: #725a51;
    font-weight: bolder;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: calc(1.5em * 2);
    font-weight: 700 !important;
}

.digitalmenu-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    color: #b07a63;
}
 
.digitalmenu-sidebar-menu {
    padding: 16px;
}

.digitalmenu-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #b07a63;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom:5px;
}

    .digitalmenu-menu-item i {
        font-size: 18px;
    }

    .digitalmenu-menu-item span {
        font-size: 14px;
        font-weight: 500;
    }

    .digitalmenu-menu-item:hover {
        background: #fff3ec;
    }

    .digitalmenu-menu-item.active {
        background: #fff3ec;
        color: #ff6a2b;
    }

.digitalmenu-sidebar-footer {
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    padding-top:45px !important;
    border-top: 1px dotted #f7e7dc !important;
    width: 100%;
}

    .digitalmenu-sidebar-footer i {
        font-size: 20px;
        color: #ff6a2b;
        cursor: pointer;
    }
.dx-icon-instagram {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(179,127,110)' d='M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm10 2c1.66 0 3 1.34 3 3v10c0 1.66-1.34 3-3 3H7c-1.66 0-3-1.34-3-3V7c0-1.66 1.34-3 3-3h10z'/%3E%3Cpath fill='rgb(179,127,110)' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm4.5-8.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/%3E%3C/svg%3E");
}
.dx-icon-whatsapp {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 24 24'%3E%3Cpath fill='rgb(255,106,44)' d='M9.516.012C4.206.262.017 4.652.033 9.929a9.798 9.798 0 0 0 1.085 4.465L.06 19.495a.387.387 0 0 0 .47.453l5.034-1.184a9.981 9.981 0 0 0 4.284 1.032c5.427.083 9.951-4.195 10.12-9.58C20.15 4.441 15.351-.265 9.516.011zm6.007 15.367a7.784 7.784 0 0 1-5.52 2.27 7.77 7.77 0 0 1-3.474-.808l-.701-.347-3.087.726.65-3.131-.346-.672A7.62 7.62 0 0 1 2.197 9.9c0-2.07.812-4.017 2.286-5.48a7.85 7.85 0 0 1 5.52-2.271c2.086 0 4.046.806 5.52 2.27a7.672 7.672 0 0 1 2.287 5.48c0 2.052-.825 4.03-2.287 5.481z'/%3E%3Cpath fill='rgb(255,106,44)' d='M14.842 12.045l-1.931-.55a.723.723 0 0 0-.713.186l-.472.478a.707.707 0 0 1-.765.16c-.913-.367-2.835-2.063-3.326-2.912a.694.694 0 0 1 .056-.774l.412-.53a.71.71 0 0 0 .089-.726L7.38 5.553a.723.723 0 0 0-1.125-.256c-.539.453-1.179 1.14-1.256 1.903-.137 1.343.443 3.036 2.637 5.07 2.535 2.349 4.566 2.66 5.887 2.341.75-.18 1.35-.903 1.727-1.494a.713.713 0 0 0-.408-1.072z'/%3E%3C/svg%3E");
}
.dx-icon-x {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(255,106,44)' d='M18.244 2H21.556L14.293 10.292L22.824 22H16.172L10.956 14.972L4.807 22H1.493L9.258 13.12L1.066 2H7.89L12.61 8.28L18.244 2ZM17.08 20H18.916L6.89 3.918H4.918L17.08 20Z'/%3E%3C/svg%3E");
}
.dx-icon-facebook 
{
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='rgb(179,127,110)' d='M7.2 16v-7.5h-2V5.8h2s0-1.1 0-2.3C7.2 1.7 8.4 0 11.1 0c1.1 0 1.9.1 1.9.1l-.1 2.5s-.8 0-1.7 0c-1 0-1.1.4-1.1 1.2v2h2.9l-.1 2.7H10v7.5H7.2z'/%3E%3C/svg%3E");
}
.dx-icon-whatsapp-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(179,127,110)' fill-rule='evenodd' clip-rule='evenodd' d='M20.5,3.5C18.25,1.25,15.2,0,12,0C5.41,0,0,5.41,0,12c0,2.11,0.65,4.11,1.7,5.92L0,24l6.33-1.55C8.08,23.41,10,24,12,24c6.59,0,12-5.41,12-12C24,8.81,22.76,5.76,20.5,3.5z M12,22c-1.78,0-3.48-0.59-5.01-1.49l-0.36-0.22l-3.76,0.99l1-3.67l-0.24-0.38C2.64,15.65,2,13.88,2,12C2,6.52,6.52,2,12,2c2.65,0,5.2,1.05,7.08,2.93S22,9.35,22,12C22,17.48,17.47,22,12,22z M17.5,14.45c-0.3-0.15-1.77-0.87-2.04-0.97c-0.27-0.1-0.47-0.15-0.67,0.15c-0.2,0.3-0.77,0.97-0.95,1.17c-0.17,0.2-0.35,0.22-0.65,0.07c-0.3-0.15-1.26-0.46-2.4-1.48c-0.89-0.79-1.49-1.77-1.66-2.07c-0.17-0.3-0.02-0.46,0.13-0.61c0.13-0.13,0.3-0.35,0.45-0.52s0.2-0.3,0.3-0.5c0.1-0.2,0.05-0.37-0.02-0.52C9.91,9.02,9.31,7.55,9.06,6.95c-0.24-0.58-0.49-0.5-0.67-0.51C8.22,6.43,8.02,6.43,7.82,6.43S7.3,6.51,7.02,6.8C6.75,7.1,5.98,7.83,5.98,9.3c0,1.47,1.07,2.89,1.22,3.09c0.15,0.2,2.11,3.22,5.1,4.51c0.71,0.31,1.27,0.49,1.7,0.63c0.72,0.23,1.37,0.2,1.88,0.12c0.57-0.09,1.77-0.72,2.02-1.42c0.25-0.7,0.25-1.3,0.17-1.42C18,14.68,17.8,14.6,17.5,14.45z'/%3E%3C/svg%3E");
}
.dx-icon-chat 
{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='rgb(179,127,110)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18.81 16.23 20 21l-4.95-2.48A9.84 9.84 0 0 1 12 19c-5 0-9-3.58-9-8s4-8 9-8 9 3.58 9 8a7.49 7.49 0 0 1-2.19 5.23Z'/%3E%3C/svg%3E");
}
.digitalmenu-sidebar-footer-puntoDeVenta-name{
    font-size:12px !important;
}
.dx-popup-content:has(.share-popup) {
    padding: 0 !important;
}
.share-popup-header{
    padding:1.5rem;
    display:flex;
    justify-content:space-between;
}
.share-popup-title {
    font-size: 1.5em;
    font-weight: 600;
    color: rgb(179, 127, 110);
}
.share-popup-close {
    font-size: 1.3rem !important;
    font-weight: bolder !important;
}
.share-popup-tabs {
    padding: 0 1.5rem;
    border-bottom: 1px solid #f7e7dc !important;
}
.share-popup-tab {
    width: fit-content;
    padding-bottom: 2px;
    color: #FF5508;
    font-size: 1rem;
    border-bottom: 3px solid #FF5508 !important;
    font-weight: 500;
    letter-spacing: 1px;
}
.share-popup-card {
    gap: 20px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
}
.share-popup-image {
    width: 95px;
    height: 95px !important;
}
.share-popup-name {
    font-size: 1.5em;
    font-weight: 600;
    color: #725a51;
}
.share-popup-slogan {
    font-size: 1rem;
    font-weight: 400;
    color: rgb(179, 127, 110);
    letter-spacing: 1px;
}
.share-popup-link {
    padding: 1.5rem;
    position:relative;
}
    .share-popup-link .copied-text {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        background: rgb(255, 106, 44);
        color: #fff;
        padding: 6px 20px;
        border-radius: 20px;
        font-size: 14px;
        pointer-events: none;
        animation: floatFade 1.2s ease forwards;
    }

@keyframes floatFade {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateY(8px);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) translateY(-8px);
    }
}
.share-popup-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background-color: #f7eee8; 
    width: 90%;
    max-width: 520px;
}

    .share-popup-link input {
        flex: 1 !important;
        background: transparent !important;
        font-size: 16px !important;
        color: #725a51 !important;
        outline: none !important;  
    }

        .share-popup-link input::selection {
            background: transparent;
        }

    .share-popup-link button {
        border-bottom: none !important;
        background: transparent !important;
        color: #ff6a2c !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        white-space: nowrap !important; 
    }

        .share-popup-link button:hover {
            opacity: 0.85;
        }
.share-popup-link-container {
    display: flex;
    justify-content: center;
} 
.dx-icon-mail-svg {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(255,106,44)' d='M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm3.519 0L12 11.671 18.481 6H5.52zM20 7.329l-7.341 6.424a1 1 0 0 1-1.318 0L4 7.329V18h16V7.329z'/%3E%3C/svg%3E");
}
.share-popup-apps {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 9rem;
}
.share-popup-app {
    cursor:pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.share-popup-app .dx-icon-x{
    font-size:15px !important;
}
    .share-popup-app span {
        font-weight: 600;
        color: rgb(179, 127, 110);
        font-size: 16px;
        letter-spacing: 1px;
        margin-top: 10px;
    }
    .share-popup-app div {
        background: #ff550821;
        padding: 8px;
        border-radius: 12px;
        height: 42px;
    }