.order-note-card{border-bottom-width:1px;display:grid;gap:1rem;--tw-border-opacity:1;border-color:rgb(var(--color-stroke)/var(--tw-border-opacity));padding-bottom:1rem}.order-note-card .header{justify-content:space-between;padding-inline-start:.5rem}.order-note-card .header,.order-note-card .header .user-box{align-items:center;display:flex;gap:.5rem}.order-note-card .header .user-box .avatar{border-radius:9999px;height:1.5rem;width:1.5rem}.order-note-card .header .user-box .user-name{font-family:modam-regular;font-size:11px;line-height:20px}@media (max-width:576px){.order-note-card .header .user-box .user-name{font-size:10px}}.order-note-card .header .user-box .user-name{--tw-text-opacity:1;color:rgb(var(--color-secondary-text)/var(--tw-text-opacity))}.order-note-card .header .created-date{font-family:modam-regular;font-size:11px;line-height:20px}@media (max-width:576px){.order-note-card .header .created-date{font-size:10px}}.order-note-card .header .created-date{--tw-text-opacity:1;color:rgb(var(--color-secondary-text)/var(--tw-text-opacity))}.order-note-card .card{animation:order-note-border-spin 4s linear infinite;background:linear-gradient(rgb(var(--color-secondary-bg)/1),rgb(var(--color-secondary-bg)/1)) padding-box,conic-gradient(from var(--order-note-angle),#a51717,#ef4444,#ffa0a0,#ef4444,#a51717) border-box;border:2px solid transparent;border-radius:.375rem;padding:.75rem;position:relative}.order-note-card .card .note-text{font-family:modam-medium;font-size:13px;line-height:24px}@media (max-width:576px){.order-note-card .card .note-text{font-size:12px}}.order-note-card .card .note-text{position:relative;white-space:pre-line;z-index:10}.order-note-card .card .arrow{background:rgb(var(--color-secondary-bg)/1);height:14px;position:absolute;right:10px;top:-8px;transform:rotate(-45deg);width:14px;z-index:1}.order-note-card .card .arrow .uicon{left:50%;position:absolute;top:50%;--tw-translate-x:-50%;--tw-translate-y:-50%;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));fill:#f23030}.order-note-card .card .arrow:before{animation:order-note-arrow-spin 4s linear infinite;background:conic-gradient(from var(--order-note-angle),#a51717,#ef4444,#ffa0a0,#ef4444,#a51717);border-radius:2px;content:"";top:-2px;right:-2px;bottom:-2px;left:-2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;position:absolute;z-index:-1}@property --order-note-angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes order-note-border-spin{0%{--order-note-angle:0deg}to{--order-note-angle:360deg}}@keyframes order-note-arrow-spin{0%{--order-note-angle:0deg}to{--order-note-angle:360deg}}@media (prefers-reduced-motion:reduce){.order-note-card .card,.order-note-card .card .arrow:before{animation:none}}