:root{--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:#3498db;--toastify-color-success:#07bc0c;--toastify-color-warning:#f1c40f;--toastify-color-error:#e74c3c;--toastify-color-transparent:#ffffffb3;--toastify-icon-color-info:var(--toastify-color-info);--toastify-icon-color-success:var(--toastify-color-success);--toastify-icon-color-warning:var(--toastify-color-warning);--toastify-icon-color-error:var(--toastify-color-error);--toastify-toast-width:320px;--toastify-toast-background:#fff;--toastify-toast-min-height:64px;--toastify-toast-max-height:800px;--toastify-font-family:sans-serif;--toastify-z-index:9999;--toastify-text-color-light:#757575;--toastify-text-color-dark:#fff;--toastify-text-color-info:#fff;--toastify-text-color-success:#fff;--toastify-text-color-warning:#fff;--toastify-text-color-error:#fff;--toastify-spinner-color:#616161;--toastify-spinner-color-empty-area:#e0e0e0;--toastify-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);--toastify-color-progress-dark:#bb86fc;--toastify-color-progress-info:var(--toastify-color-info);--toastify-color-progress-success:var(--toastify-color-success);--toastify-color-progress-warning:var(--toastify-color-warning);--toastify-color-progress-error:var(--toastify-color-error);--toastify-color-progress-colored:#ddd}.Toastify__toast-container{box-sizing:border-box;color:#fff;padding:4px;position:fixed;transform:translate3d(0,0,var(--toastify-z-index) px);width:var(--toastify-toast-width);z-index:var(--toastify-z-index)}.Toastify__toast-container--top-left{left:1em;top:1em}.Toastify__toast-container--top-center{left:50%;top:1em;transform:translateX(-50%)}.Toastify__toast-container--top-right{right:1em;top:1em}.Toastify__toast-container--bottom-left{bottom:1em;left:1em}.Toastify__toast-container--bottom-center{bottom:1em;left:50%;transform:translateX(-50%)}.Toastify__toast-container--bottom-right{bottom:1em;right:1em}@media only screen and (max-width:480px){.Toastify__toast-container{left:0;margin:0;padding:0;width:100vw}.Toastify__toast-container--top-center,.Toastify__toast-container--top-left,.Toastify__toast-container--top-right{top:0;transform:translateX(0)}.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-right{bottom:0;transform:translateX(0)}.Toastify__toast-container--rtl{left:auto;right:0}}.Toastify__toast{border-radius:4px;box-shadow:0 1px 10px 0 #0000001a,0 2px 15px 0 #0000000d;box-sizing:border-box;cursor:pointer;direction:ltr;display:flex;font-family:var(--toastify-font-family);justify-content:space-between;margin-bottom:1rem;max-height:var(--toastify-toast-max-height);min-height:var(--toastify-toast-min-height);overflow:hidden;padding:8px;position:relative;z-index:0}.Toastify__toast--rtl{direction:rtl}.Toastify__toast-body{align-items:center;display:flex;flex:1 1 auto;margin:auto 0;padding:6px;white-space:pre-wrap}.Toastify__toast-body>div:last-child{flex:1}.Toastify__toast-icon{display:flex;flex-shrink:0;margin-inline-end:10px;width:20px}.Toastify__toast-text{display:flex;flex-direction:column;gap:2px;line-height:1.35;width:100%}.Toastify__toast-text-title{font-weight:600}.Toastify__toast-text-content{opacity:.92}.Toastify--animate{animation-duration:.7s;animation-fill-mode:both}.Toastify--animate-icon{animation-duration:.3s;animation-fill-mode:both}@media only screen and (max-width:480px){.Toastify__toast{border-radius:0;margin-bottom:0}}.Toastify__toast-theme--dark{background:var(--toastify-color-dark);color:var(--toastify-text-color-dark)}.Toastify__toast-theme--colored.Toastify__toast--default,.Toastify__toast-theme--light{background:var(--toastify-color-light);color:var(--toastify-text-color-light)}.Toastify__toast-theme--colored.Toastify__toast--info{background:var(--toastify-color-info);color:var(--toastify-text-color-info)}.Toastify__toast-theme--colored.Toastify__toast--success{background:var(--toastify-color-success);color:var(--toastify-text-color-success)}.Toastify__toast-theme--colored.Toastify__toast--warning{background:var(--toastify-color-warning);color:var(--toastify-text-color-warning)}.Toastify__toast-theme--colored.Toastify__toast--error{background:var(--toastify-color-error);color:var(--toastify-text-color-error)}.Toastify__progress-bar-theme--light{background:var(--toastify-color-progress-light)}.Toastify__progress-bar-theme--dark{background:var(--toastify-color-progress-dark)}.Toastify__progress-bar--info{background:var(--toastify-color-progress-info)}.Toastify__progress-bar--success{background:var(--toastify-color-progress-success)}.Toastify__progress-bar--warning{background:var(--toastify-color-progress-warning)}.Toastify__progress-bar--error{background:var(--toastify-color-progress-error)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:var(--toastify-color-progress-colored)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning{background:var(--toastify-color-transparent)}.Toastify__close-button{align-self:flex-start;background:#0000;border:none;color:#fff;cursor:pointer;opacity:.7;outline:none;padding:0;transition:.3s ease}.Toastify__close-button--light{color:#000;opacity:.3}.Toastify__close-button>svg{fill:currentcolor;height:16px;width:14px}.Toastify__close-button:focus,.Toastify__close-button:hover{opacity:1}@keyframes Toastify__trackProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Toastify__progress-bar{bottom:0;height:5px;left:0;opacity:.7;position:absolute;transform-origin:left;width:100%;z-index:var(--toastify-z-index)}.Toastify__progress-bar--animated{animation:Toastify__trackProgress linear 1 forwards}.Toastify__progress-bar--controlled{transition:transform .2s}.Toastify__progress-bar--rtl{left:auto;right:0;transform-origin:right}.Toastify__spinner{animation:Toastify__spin .65s linear infinite;border:2px solid;border-color:var(--toastify-spinner-color-empty-area);border-radius:100%;border-right-color:var(--toastify-spinner-color);box-sizing:border-box;height:20px;width:20px}@keyframes Toastify__bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes Toastify__bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes Toastify__bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes Toastify__bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes Toastify__bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes Toastify__bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Toastify__bounce-enter--bottom-left,.Toastify__bounce-enter--top-left{animation-name:Toastify__bounceInLeft}.Toastify__bounce-enter--bottom-right,.Toastify__bounce-enter--top-right{animation-name:Toastify__bounceInRight}.Toastify__bounce-enter--top-center{animation-name:Toastify__bounceInDown}.Toastify__bounce-enter--bottom-center{animation-name:Toastify__bounceInUp}.Toastify__bounce-exit--bottom-left,.Toastify__bounce-exit--top-left{animation-name:Toastify__bounceOutLeft}.Toastify__bounce-exit--bottom-right,.Toastify__bounce-exit--top-right{animation-name:Toastify__bounceOutRight}.Toastify__bounce-exit--top-center{animation-name:Toastify__bounceOutUp}.Toastify__bounce-exit--bottom-center{animation-name:Toastify__bounceOutDown}@keyframes Toastify__none{0%,60%,75%,90%,to{animation-duration:0;animation-timing-function:none}0%{opacity:1;transform:translateZ(0)}to{transform:translateZ(0)}}.Toastify__none-enter--bottom-center,.Toastify__none-enter--bottom-left,.Toastify__none-enter--bottom-right,.Toastify__none-enter--top-center,.Toastify__none-enter--top-left,.Toastify__none-enter--top-right{animation-name:Toastify__none}@keyframes Toastify__zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes Toastify__zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.Toastify__zoom-enter{animation-name:Toastify__zoomIn}.Toastify__zoom-exit{animation-name:Toastify__zoomOut}@keyframes Toastify__flipIn{0%{animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{opacity:1;transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes Toastify__flipOut{0%{transform:perspective(400px)}30%{opacity:1;transform:perspective(400px) rotateX(-20deg)}to{opacity:0;transform:perspective(400px) rotateX(90deg)}}.Toastify__flip-enter{animation-name:Toastify__flipIn}.Toastify__flip-exit{animation-name:Toastify__flipOut}@keyframes Toastify__slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideInDown{0%{transform:translate3d(0,-110%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes Toastify__slideOutRight{0%{transform:translateZ(0)}to{transform:translate3d(110%,0,0);visibility:hidden}}@keyframes Toastify__slideOutLeft{0%{transform:translateZ(0)}to{transform:translate3d(-110%,0,0);visibility:hidden}}@keyframes Toastify__slideOutDown{0%{transform:translateZ(0)}to{transform:translate3d(0,500px,0);visibility:hidden}}@keyframes Toastify__slideOutUp{0%{transform:translateZ(0)}to{transform:translate3d(0,-500px,0);visibility:hidden}}.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--top-left{animation-name:Toastify__slideInLeft}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--top-right{animation-name:Toastify__slideInRight}.Toastify__slide-enter--top-center{animation-name:Toastify__slideInDown}.Toastify__slide-enter--bottom-center{animation-name:Toastify__slideInUp}.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--top-left{animation-name:Toastify__slideOutLeft}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--top-right{animation-name:Toastify__slideOutRight}.Toastify__slide-exit--top-center{animation-name:Toastify__slideOutUp}.Toastify__slide-exit--bottom-center{animation-name:Toastify__slideOutDown}@keyframes Toastify__spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.sideMenu[data-v-bd3aec4a] {
  position: relative;
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  transition: width 700ms;
  background: var(--background-primary);
}
.sideMenu--pinned[data-v-bd3aec4a] {
  width: var(--side-width, 280px);
  min-width: var(--side-min-width, 60px);
}
#inbox-list[data-v-bd3aec4a] {
  --background: var(--background-primary);
  background: var(--background-primary);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
}
.outer-list[data-v-bd3aec4a] {
  --background: var(--background-primary);
  background: var(--background-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0px 10px 14px;
  margin-bottom: 5px;
}
.account-section[data-v-bd3aec4a] {
  padding: 0 12px 16px;
}
.account-section__label[data-v-bd3aec4a] {
  display: block;
  margin-block-end: 8px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--account-section-label-text);
}
.account-section__box[data-v-bd3aec4a] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--account-section-box-border);
  border-radius: 6px;
  background: var(--account-section-box-background);
  cursor: pointer;
  font-family: inherit;
}
.account-section__box--static[data-v-bd3aec4a] {
  cursor: default;
}
.account-section__box-text[data-v-bd3aec4a] {
  min-width: 0;
  overflow: hidden;
  color: var(--account-section-box-text);
  font-size: 0.875rem;
  font-weight: 200;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-section__chevron[data-v-bd3aec4a] {
  flex-shrink: 0;
  color: var(--account-section-box-text);
  transition: transform 200ms ease;
}
.account-section__chevron--open[data-v-bd3aec4a] {
  transform: rotate(180deg);
}
.account-section__menu[data-v-bd3aec4a] {
  display: block;
  width: 100%;
  --popover-padding: 8px;
  --popover-gap: 4px;
}
.menu-logo[data-v-bd3aec4a] {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.menu-collapse-toggle[data-v-bd3aec4a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  color: var(--black);
}
@media screen and (max-width: 991px) {
.menu-collapse-toggle[data-v-bd3aec4a] {
    display: none;
}
}
.nav-groups[data-v-bd3aec4a] {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding: 8px 12px;
  background: var(--background-primary);
}
.nav-item[data-v-bd3aec4a] {
  --vvd-typography-base: 300 14px/1.4 var(--font-family-primary);
  display: block;
  width: 100%;
  margin-block-end: 2px;
  border-radius: 10px;
  color: var(--black);
  cursor: pointer;
}
.nav-item[data-v-bd3aec4a]:hover {
  background: var(--gray-01);
}
.bottom-panel[data-v-bd3aec4a] {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--background-primary);
}
.account-bar[data-v-bd3aec4a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px;
  border-top: 1px solid var(--sidebar-divider);
}
.account-bar__profile[data-v-bd3aec4a] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.account-bar__avatar[data-v-bd3aec4a] {
  flex-shrink: 0;
}
.account-bar__text[data-v-bd3aec4a] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  gap: 2px;
}
.account-bar__name[data-v-bd3aec4a] {
  font-size: 1rem;
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-bar__email[data-v-bd3aec4a] {
  font-size: 0.75rem;
  color: var(--gray-04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-bar__trigger[data-v-bd3aec4a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.account-bar__trigger[data-v-bd3aec4a]:hover {
  background: var(--background-primary);
}
.account-bar__menu[data-v-bd3aec4a] {
  --popover-padding: 8px;
  --popover-gap: 4px;
}
.account-bar__hamburger[data-v-bd3aec4a] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 22px;
}
.account-bar__hamburger span[data-v-bd3aec4a] {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--black);
}
@media screen and (min-width: 992px) {
.sideNavClosed .account-bar__text[data-v-bd3aec4a],
  .sideNavClosed .account-bar__menu[data-v-bd3aec4a] {
    display: none;
}
.sideNavClosed .account-bar[data-v-bd3aec4a] {
    justify-content: center;
    padding: 16px 4px;
}
.sideNavClosed .account-bar__avatar[data-v-bd3aec4a] {
    width: 36px;
    height: 36px;
}
.sideNavClosed .nav-item[data-v-bd3aec4a] {
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline: auto;
}
.sideNavClosed .outer-list[data-v-bd3aec4a] {
    padding: 5px 0 10px;
    display: flex;
    justify-content: center;
}
.sideNavClosed .outer-list .menu-logo[data-v-bd3aec4a] {
    display: flex;
    justify-content: center;
    margin: 0;
    flex: initial;
}
.sideNavClosed .account-bar__profile[data-v-bd3aec4a] {
    justify-content: center;
    flex: initial;
}
}

.top-layer-host[data-v-67a20510] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
.top-layer-host[data-v-67a20510]:not(:popover-open) {
  display: none;
}

.vonage-loader-backdrop[data-v-0d2cd6b2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  /* The <TopLayer> host carrying this loader is pointer-events: none, so the
     backdrop opts back in to keep blocking interaction while loading. */
  pointer-events: auto;
}
.vonage-loader-container[data-v-0d2cd6b2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 32px;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.vonage-loader-gif[data-v-0d2cd6b2] {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.vonage-loader-message[data-v-0d2cd6b2] {
  margin-top: 16px;
  color: #333333;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
}
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-400-normal-obahsSVq.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-HOLc17fK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-ext-400-normal-DGGRlc-M.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-KugGGMne.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-400-normal-B4URO6DV.woff2) format('woff2'), url(/assets/inter-greek-400-normal-q2sYcFCs.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-500-normal-BasfLYem.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-CxZf_p3X.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-ext-500-normal-C4iEst2y.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-2j5mBUwD.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-500-normal-BIZE56-Y.woff2) format('woff2'), url(/assets/inter-greek-500-normal-Xzm54t5V.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-600-normal-CWCymEST.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-4D_pXhcN.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-ext-600-normal-DRtmH8MT.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-B8X0CLgF.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-600-normal-plRanbMR.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BZpKdvQh.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}@font-face {
  font-display: block;
  font-family: SpeziaCompleteVariableUpright;
  font-stretch: 50% 200%;
  font-weight: 1 1000;
  src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: SpeziaMonoCompleteVariable;
  font-stretch: 50% 200%;
  font-weight: 1 1000;
  src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
}
.vvd-root {
  --vvd-typography-headline: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
  	speziacompletevariableupright;
  --vvd-typography-subtitle: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
  	speziacompletevariableupright;
  --vvd-typography-heading-1: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3
  	speziacompletevariableupright;
  --vvd-typography-heading-2: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375
  	speziacompletevariableupright;
  --vvd-typography-heading-3: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846
  	speziacompletevariableupright;
  --vvd-typography-heading-4: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4
  	speziacompletevariableupright;
  --vvd-typography-heading-5: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 1.125) / 1.4
  	speziacompletevariableupright;
  --vvd-typography-heading-6: 500 condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 1) / 1.4
  	speziacompletevariableupright;
  --vvd-typography-base: 400 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
  	speziacompletevariableupright;
  --vvd-typography-base-bold: 600 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
  	speziacompletevariableupright;
  --vvd-typography-base-code: 400 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
  	speziamonocompletevariable;
  --vvd-typography-base-condensed: 400 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
  	speziacompletevariableupright;
  --vvd-typography-base-condensed-bold: 600 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
  	speziacompletevariableupright;
  --vvd-typography-base-extended: 400 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
  	speziacompletevariableupright;
  --vvd-typography-base-extended-bold: 600 ultra-condensed
  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
  	speziacompletevariableupright;
}
/* Design tokens: colors, typography, shadows and border radius. */
:root {
  /* color-scheme: dark light; */
  --grey-02: #54575F;

  /* Updated color scheme */
  --white: #FFFFFF;
  --background-primary: #EDEDED;
  --gray-01: #D9DCE3;
  --gray-04: #54575E;
  --black: #000000;
  --black-01: #54575E;
  --purple: #881FFF;
  --cyan: #80C7F5;
  --purple-opac: #EDDEFF;
  --magenta: #D6219C;
  --orange: #FA7554;
  --green: #2DD36F;
  --gray-02: #D9DCE3;
  --yellow: #ffd948;
  --warning: #FEE3DD;
  --cyan: #80C7F5;
  /* Updated color scheme */

  /* Account section (AppSidebar) */
  --account-section-label-text: #5C5C5C;
  --account-section-box-border: #929292;
  --account-section-box-background: #E6E6E6;
  --account-section-box-text: #333333;
  --sidebar-divider: rgba(0, 0, 0, 0.13);

  /* Typography — Spezia is the brand typeface (matches dashboard-frontend); Inter is the
     loaded fallback if the Vonage font CDN is unavailable. */
  --font-family-primary: 'SpeziaCompleteVariableUpright', 'SpeziaWeb', 'Inter', system-ui,
    -apple-system, sans-serif;
  --font-family-mono: 'SpeziaMonoCompleteVariable', 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --line-height-tight: 1;
  --line-height-xl: 1.875rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Border radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
}
body.dark {
  /* Updated color scheme */
  --white: #212121;
  --background-primary: #121212;
  --gray-01: #2D2D2D;
  --gray-04: #7F7F7F;
  --black: #FFFFFF;
  --black-01: #FFFF;
  --purple: #B073FF;
  --purple-opac: #373737;
  --magenta: #E057AD;
  --orange: #FA7554;
  --green: #2DD36F;
  --gray-02: #D9DCE3;
  /* Updated color scheme */

  /* Account section (AppSidebar) */
  --account-section-label-text: #A0A0A0;
  --account-section-box-border: #5C5C5C;
  --account-section-box-background: #2D2D2D;
  --account-section-box-text: #D9D9D9;
  --sidebar-divider: rgba(255, 255, 255, 0.13);
}
/**
 * Do not edit directly, this file was auto-generated.
 */
/**
 * Do not edit directly, this file was auto-generated.
 */
/**
 * Do not edit directly, this file was auto-generated.
 */
/**
 * Do not edit directly, this file was auto-generated.
 */
@property --vvd-size-density {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --vvd-size-font-scale-base {
  syntax: "<length>";
  inherits: true;
  initial-value: 16px;
}
.vvd-root, ::part(vvd-root) {
  --vvd-color-scheme: light;
  --vvd-color-canvas: #ffffff;
  --vvd-color-canvas-text: #0d0d0d;
  --vvd-color-neutral-50: #F2F2F2;
  --vvd-color-neutral-100: #E6E6E6;
  --vvd-color-neutral-200: #cccccc;
  --vvd-color-neutral-300: #b3b3b3;
  --vvd-color-neutral-400: #929292;
  --vvd-color-neutral-500: #757575;
  --vvd-color-neutral-600: #666666;
  --vvd-color-neutral-700: #4d4d4d;
  --vvd-color-neutral-800: #333333;
  --vvd-color-neutral-900: #1a1a1a;
  --vvd-color-neutral-950: #0d0d0d;
  --vvd-color-cta-50: #f5f0fd;
  --vvd-color-cta-100: #ece2fa;
  --vvd-color-cta-200: #dcc1fc;
  --vvd-color-cta-300: #cba1fa;
  --vvd-color-cta-400: #b27bf2;
  --vvd-color-cta-500: #9941ff;
  --vvd-color-cta-600: #871eff;
  --vvd-color-cta-700: #6405d1;
  --vvd-color-cta-800: #440291;
  --vvd-color-cta-900: #26044d;
  --vvd-color-cta-950: #140623;
  --vvd-color-warning-50: #FDF5D4;
  --vvd-color-warning-100: #FDEAA0;
  --vvd-color-warning-200: #FACC4B;
  --vvd-color-warning-300: #fa9f00;
  --vvd-color-warning-400: #e07902;
  --vvd-color-warning-500: #be5702;
  --vvd-color-warning-600: #A64C03;
  --vvd-color-warning-700: #893000;
  --vvd-color-warning-800: #522801;
  --vvd-color-warning-900: #2A1502;
  --vvd-color-warning-950: #150B01;
  --vvd-color-information-50: #e8f4fb;
  --vvd-color-information-100: #d3e9fc;
  --vvd-color-information-200: #9dd2fe;
  --vvd-color-information-300: #65baff;
  --vvd-color-information-400: #2997f0;
  --vvd-color-information-500: #0276d5;
  --vvd-color-information-600: #0e65c2;
  --vvd-color-information-700: #094a9e;
  --vvd-color-information-800: #0e306d;
  --vvd-color-information-900: #071939;
  --vvd-color-information-950: #040d1d;
  --vvd-color-announcement-50: #ffedfb;
  --vvd-color-announcement-100: #ffdcf7;
  --vvd-color-announcement-200: #f8b9e7;
  --vvd-color-announcement-300: #fb8fd8;
  --vvd-color-announcement-400: #e560bb;
  --vvd-color-announcement-500: #d6219c;
  --vvd-color-announcement-600: #bb1e89;
  --vvd-color-announcement-700: #8f1669;
  --vvd-color-announcement-800: #620256;
  --vvd-color-announcement-900: #32082c;
  --vvd-color-announcement-950: #1d031a;
  --vvd-color-success-50: #e1f8e5;
  --vvd-color-success-100: #cfeed4;
  --vvd-color-success-200: #86e090;
  --vvd-color-success-300: #53ca6a;
  --vvd-color-success-400: #30a849;
  --vvd-color-success-500: #1c8731;
  --vvd-color-success-600: #167629;
  --vvd-color-success-700: #155923;
  --vvd-color-success-800: #183a1e;
  --vvd-color-success-900: #0a1e11;
  --vvd-color-success-950: #060f09;
  --vvd-color-alert-50: #ffeef2;
  --vvd-color-alert-100: #fedfdf;
  --vvd-color-alert-200: #ffbbbb;
  --vvd-color-alert-300: #fe9696;
  --vvd-color-alert-400: #f75959;
  --vvd-color-alert-500: #e61d1d;
  --vvd-color-alert-600: #cd0d0d;
  --vvd-color-alert-700: #9f0202;
  --vvd-color-alert-800: #6e0000;
  --vvd-color-alert-900: #3e0004;
  --vvd-color-alert-950: #250004;
  --vvd-color-neutral-tint-50: #f2f3f9;
  --vvd-color-neutral-tint-100: #e5e5ec;
  --vvd-color-neutral-tint-200: #cbcbd9;
  --vvd-color-neutral-tint-300: #b2b1c7;
  --vvd-color-neutral-tint-400: #908fae;
  --vvd-color-neutral-tint-500: #727198;
  --vvd-color-neutral-tint-600: #63628d;
  --vvd-color-neutral-tint-700: #494977;
  --vvd-color-neutral-tint-800: #31304f;
  --vvd-color-neutral-tint-900: #191828;
  --vvd-color-neutral-tint-950: #0d0c15;
  --vvd-color-surface-0dp: #ffffff;
  --vvd-color-surface-2dp: #ffffff;
  --vvd-color-surface-4dp: #ffffff;
  --vvd-color-surface-8dp: #ffffff;
  --vvd-color-surface-12dp: #ffffff;
  --vvd-color-surface-16dp: #ffffff;
  --vvd-color-surface-24dp: #ffffff;
  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);
  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);
  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);
  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);
  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;
  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;
  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;
  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;
  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;
  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;
  --vvd-typography-heading-5: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.125)/1.4 Montserrat;
  --vvd-typography-heading-6: 500 calc(var(--vvd-size-font-scale-base, 16) * 1)/1.4 Montserrat;
  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;
  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
}

.vvd-theme-alternate, ::part(vvd-theme-alternate) {
  --vvd-color-scheme: dark;
  --vvd-color-canvas: #000000;
  --vvd-color-canvas-text: #ffffff;
  --vvd-color-neutral-50: #1a1a1a;
  --vvd-color-neutral-100: #333333;
  --vvd-color-neutral-200: #4d4d4d;
  --vvd-color-neutral-300: #666666;
  --vvd-color-neutral-400: #757575;
  --vvd-color-neutral-500: #929292;
  --vvd-color-neutral-600: #b3b3b3;
  --vvd-color-neutral-700: #cccccc;
  --vvd-color-neutral-800: #E6E6E6;
  --vvd-color-neutral-900: #F2F2F2;
  --vvd-color-neutral-950: #ffffff;
  --vvd-color-cta-50: #26044d;
  --vvd-color-cta-100: #440291;
  --vvd-color-cta-200: #6405d1;
  --vvd-color-cta-300: #871eff;
  --vvd-color-cta-400: #9941ff;
  --vvd-color-cta-500: #b27bf2;
  --vvd-color-cta-600: #cba1fa;
  --vvd-color-cta-700: #dcc1fc;
  --vvd-color-cta-800: #ece2fa;
  --vvd-color-cta-900: #f5f0fd;
  --vvd-color-warning-50: #2A1502;
  --vvd-color-warning-100: #522801;
  --vvd-color-warning-200: #803807;
  --vvd-color-warning-300: #A64C03;
  --vvd-color-warning-400: #be5702;
  --vvd-color-warning-500: #e07902;
  --vvd-color-warning-600: #fa9f00;
  --vvd-color-warning-700: #FACC4B;
  --vvd-color-warning-800: #FDEAA0;
  --vvd-color-warning-900: #FDF5D4;
  --vvd-color-information-50: #071939;
  --vvd-color-information-100: #0e306d;
  --vvd-color-information-200: #094a9e;
  --vvd-color-information-300: #0e65c2;
  --vvd-color-information-400: #0276d5;
  --vvd-color-information-500: #2997f0;
  --vvd-color-information-600: #65baff;
  --vvd-color-information-700: #9dd2fe;
  --vvd-color-information-800: #d3e9fc;
  --vvd-color-information-900: #e8f4fb;
  --vvd-color-announcement-50: #32082c;
  --vvd-color-announcement-100: #620256;
  --vvd-color-announcement-200: #8f1669;
  --vvd-color-announcement-300: #bb1e89;
  --vvd-color-announcement-400: #d6219c;
  --vvd-color-announcement-500: #e560bb;
  --vvd-color-announcement-600: #fb8fd8;
  --vvd-color-announcement-700: #f8b9e7;
  --vvd-color-announcement-800: #ffdcf7;
  --vvd-color-announcement-900: #ffedfb;
  --vvd-color-success-50: #0a1e11;
  --vvd-color-success-100: #183a1e;
  --vvd-color-success-200: #155923;
  --vvd-color-success-300: #167629;
  --vvd-color-success-400: #1c8731;
  --vvd-color-success-500: #30a849;
  --vvd-color-success-600: #53ca6a;
  --vvd-color-success-700: #86e090;
  --vvd-color-success-800: #cfeed4;
  --vvd-color-success-900: #e1f8e5;
  --vvd-color-alert-50: #3e0004;
  --vvd-color-alert-100: #6e0000;
  --vvd-color-alert-200: #9f0202;
  --vvd-color-alert-300: #cd0d0d;
  --vvd-color-alert-400: #e61d1d;
  --vvd-color-alert-500: #f75959;
  --vvd-color-alert-600: #fe9696;
  --vvd-color-alert-700: #ffbbbb;
  --vvd-color-alert-800: #fedfdf;
  --vvd-color-alert-900: #ffeef2;
  --vvd-color-neutral-tint-50: #191828;
  --vvd-color-neutral-tint-100: #31304f;
  --vvd-color-neutral-tint-200: #494977;
  --vvd-color-neutral-tint-300: #63628d;
  --vvd-color-neutral-tint-400: #727198;
  --vvd-color-neutral-tint-500: #908fae;
  --vvd-color-neutral-tint-600: #b2b1c7;
  --vvd-color-neutral-tint-700: #cbcbd9;
  --vvd-color-neutral-tint-800: #e5e5ec;
  --vvd-color-neutral-tint-900: #f2f3f9;
  --vvd-color-surface-0dp: #0d0d0d;
  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);
  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
  --vvd-neutral-tint-color-surface-0dp: #191828;
  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;
  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;
  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;
  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;
  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;
  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;
  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);
  --vvd-neutral-tint-shadow-surface-2dp: none;
  --vvd-neutral-tint-shadow-surface-4dp: none;
  --vvd-neutral-tint-shadow-surface-8dp: none;
  --vvd-neutral-tint-shadow-surface-12dp: none;
  --vvd-neutral-tint-shadow-surface-16dp: none;
  --vvd-neutral-tint-shadow-surface-24dp: none;
}
.vvd-root {
  color: var(--vvd-color-canvas-text);
  color-scheme: var(--vvd-color-scheme);
}

:root.vvd-root {
  background-color: var(--vvd-color-canvas);
}

.vvd-scrollbar {
  --scrollbar-track-color: transparent;
  --scrollbar-thumb-color: color-mix(
  	in sRGB,
  	var(--vvd-color-neutral-950),
  	transparent 70%
  );
}
.vvd-scrollbar {
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scrollbar-width: thin;
}
.vvd-scrollbar ::-webkit-scrollbar {
  width: 4px;
}
.vvd-scrollbar ::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}
.vvd-scrollbar ::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 4px;
  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));
}

.vvd-neutral-tint-elevation {
  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);
  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);
  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);
  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);
  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);
  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);
  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);
  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);
  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);
  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);
  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);
  --_vvd-tinted-shadow-surface-12dp: var(
  	--vvd-neutral-tint-shadow-surface-12dp
  );
  --_vvd-tinted-shadow-surface-16dp: var(
  	--vvd-neutral-tint-shadow-surface-16dp
  );
  --_vvd-tinted-shadow-surface-24dp: var(
  	--vvd-neutral-tint-shadow-surface-24dp
  );
}
.vvd-neutral-tint-elevation > * {
  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);
  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);
  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);
  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);
  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);
  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);
  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);
  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);
  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);
  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);
  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);
  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);
  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);
  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);
}
html,
body {
    font-family: var(--font-family-primary);
}

button,
input,
select,
textarea {
    font-family: inherit;
}
html body{
    top: 0px !important;
}

.row {
    display: flex;
    flex-direction: row;
    &.jc-sb {
        justify-content: space-between;
    }
    &.ac-c {
        align-content: center;
    }
    &.ai-c {
        align-items: center;
    }
}

.w-100 {
    width: 100%;
} 

.h-100 {
    height: 100%;
}
.variable-name {
  width: 100%;
  text-overflow: ellipsis;
  overflow-x: hidden;
  text-wrap: nowrap;
  white-space: nowrap;
}
.radio-group-wrapper {
    display: inherit;
    flex-direction: inherit;
    gap: inherit;
    flex-wrap: inherit;
    width: 100%;
    height: 100%;
}
.analytics-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
    width: 100%;
    gap: 20px;
    &.filters {
        justify-content: space-around;
        background-color: var(--white);
        padding: 40px 20px;
        border-radius: var(--border-radius-md);
        gap: 10px;
        flex-wrap: wrap;
        .filter {
            display: flex;
            flex-grow: 1;
            flex-shrink: 1;
            border: 1px solid black;
            border-radius: var(--border-radius-md);
            height: auto;
            gap: 10px;
            justify-content: space-between;
            .btn-date {
                flex: 1 1 50%;
            }
        }
    }
}
@media only screen and (max-width: 780px){
    .analytics-row {
        gap: 10px;
        flex-wrap: wrap;
        .scorecard {
            flex: 1 1 33%;
        }
        .table, .line, .multiline, .bar, .doughnut, .pie {
            flex: 1 1 100% !important;
        }
        &.filters {
            padding: 20px 10px;
            gap: 5px;
            .filter {
                gap: 5px;
            }
        }
    }
    .analytics-col {
        flex: 0 0 100% !important;
    }
}
.analytics-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--background-primary);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--gray-04);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-04);
}

/* h1-h6/b inherit font-family from the html/body rule above — there's no
   separate heading font-family variable, so this is set directly instead. */

img.fullWidth {
    width: 100%;
}

.table-responsive-container{
    display: block;
    width: 100%;
}

table {
    border-width: 1px;
    font-size: 13px;
    margin: 15px 16px;
    min-width: calc(100% - 32px);
    width: calc(100% - 32px);
    background: var(--white);
    overflow: hidden;
}

table.noBorder{
    border-width: 0px;
}

table.withBorder{
    border-width: 1px;
    overflow: auto;
}
table tr td {
    border: 1px solid var(--background-primary);
}

table,
td,
th {
    border-collapse: collapse;
    border-color: var(--background-primary);
    border-style: solid;
}

td,
th {
    /* border-width: 0px 1px 1px 0px; */
    border-width: 0px 0px 1px 0px;
    line-height: 1.5;
    padding: 1em;
    text-align: left;
}

table.withBorder td,
table.withBorder th{
    border-width: 0px 1px 1px 0px;
}

table.noBorder td,
table.noBorder th{
    border-width: 0px;
    padding: 5px;
    font-size: 14px;
    color: var(--black);
    font-weight: 400;
}

th {
    text-transform: uppercase;
    text-align: center;
}

/* tbody tr:nth-child(2n+1){
    background-color: #fdfdff;
} */

.displayBlock{
    display: block;
}

.uppercase{
    text-transform: uppercase;
}

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

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

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

.hoverUnderline:hover{
    text-decoration: underline;
}

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

.width100P {
    width: 100%;
}
.dangerBttn{
--background: var(--white);
color: var(--orange);
--border-radius: var(--border-radius-sm);
--border-width: 1px;
--box-shadow: none;
--border-color: var(--orange);
}

/* div{
    display: block;
    width: 100%;
} */

.loginPage {
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    /* background-position: center center; */
}
a {
    color: var(--purple);
}

.brdr_clr_primary {
    border-color: var(--purple) !important;
}

.txt_clr_primary {
    color: var(--purple);
}

.primary_text {
    color: var(--purple);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.defaultColor {
    color: var(--white);
}
.label-stacked {
    margin-bottom: 8px !important;
    margin-top: 5px !important;
}

img.roundImg {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

img.customerProfileImgBig {
    height: 100px;
    width: auto;
}

.loading-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

a,
button,
.button {
    cursor: pointer;
}

.action-sheet-group {
    background: #e5e5e5;
}

button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cust_pad_icon {
    padding: 0 4px;
}

.section_style_v1 {
    margin-bottom: 30px;
}

.label_custom_style {
    padding: 14px 4px;
    font-size: 16px;
    font-weight: 400;
}

.cust_pad_v1 {
    padding: 14px 4px;
}

.padding15x16{
    padding: 15px 16px;
}
.bgColor{
    background-color: var(--white);
}
.pad_zero {
    padding: 0 !important;
}

.cursorPointer{
    cursor: pointer;
}

.tb_pad_zero {
    /* padding: 0 auto !important; */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.custom_mrg_left {
    margin-left: 10px;
}

.mrg_table-left {
    margin-left: 17px;
}

.custom_mrg_bottom {
    margin-bottom: 10px;
}
.custom_ThumbnailBox {
    width: 240px;
    text-align: center;
    margin: 0 auto;
}

.default_txt {
    font-size: 16px;
    font-weight: 600;
}

.cust_toggle {
    position: relative;
    top: 13px;
}

.theme_bg {
    background: #f6f7f9;
}

.grid_col_2 {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 30px;
}

.placeholder_img_cont {
    width: 100%;
}

.placeholder_img {
    width: 40px;
}

.checkbox_cont {
    margin-top: 6px;
    margin-left: 8px;
}

.checkbox_cont.v__1 {
    margin-top: 16px;
    /* margin-left: 8px; */
}

.pre_text_cont {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.pre_post_text_cont {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
}

.post_text_cont {
    display: grid;
    grid-template-columns: minmax(100px, 300px) 80px;
}

.pre_text_cont .pre_text,
.pre_post_text_cont .pre_text {
    padding: 7px;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: center;
}

.pre_post_text_cont .post_text,
.post_text_cont .post_text {
    padding: 7px;
    border: 1px solid #666666;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
}

.post_select_cont {
    display: grid;
    grid-template-columns: 1fr auto;
}

.hyperlink_cust {
	font-size: 14px;
  font-weight: 400;
  color: var(--purple);
  line-height: 16px;
}

.hyperlink_cust.v_1 {
    position: relative;
    top: 6px;
}

.cust_input_height {
    height: 34px;
}

.box_brdr_view {
    border: 1px solid var(--black);
    border-radius: var(--border-radius-sm);
}

.cust_brdr {
    border-bottom: 1px solid var(--background-primary);
}
.title_cont h3 {
    color: var(--black);
    font-weight: 400;
}

.cust_mrg_lft {
    margin-left: 10px;
}

.cust_min_width {
    min-width: 100px;
}

.pos_adjsmt_1 {
    position: relative;
    top: -10px;
}
.custom_style_bdr{
    padding: 10px;
    border: 1px solid var(--black);
    border-radius: var(--border-radius-sm);
    height: 40px;
}
.grid_col_02{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 14px 14px 0;
    width: 100%;
    max-width: 400px;
}
.grid_col_02_v1{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 14px 0 0;
    width: 100%;
}
.grid_col_03_v1{
    display: grid;
    grid-template-columns: 1fr 100px auto;
    column-gap: 14px;
    padding: 14px 0 0;
    width: 100%;
}
.bdr_block{
    border: 1px solid var(--black);
    /* padding: 10px; */
    margin: 10px 14px 0;
}
.fxd_btm_block{
    padding: 10px !important;
    width: 100%;
    text-align: center;
}
.cust_pad_v1{
    padding: 14px 14px 0;
}
.increament_cont {
    display: grid;
    grid-template-columns: 25px 1fr 25px;
    text-align: center;
    margin-top: 5px;
    max-width: 102px;
    margin-right: 18px;
}
.increament_cont .decrease {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--black);
    cursor: pointer;
}
.increament_cont .increase {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid var(--black);
    cursor: pointer;
}
.increament_cont .decrease, .increament_cont .increase{
    font-size: 20px;
    padding: 7px 0px;
    height: 40px;
}
.bdr_block.v__1{
    padding: 0px 10px;
}
.cust_mrg{
    margin-top: 18px;
}

.valignMiddle{
  vertical-align: middle;
}

.containerPadding_lr{
    padding-left: 60px;
    padding-right: 60px;
}

.containerPadding_lr.threeForthContainer{
    padding-left: 45px;
    padding-right: 45px;
}

.lineClamping1{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
    
.lineClamping2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
    
.lineClamping3{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.searchBar {
    border-radius: 25px;
    margin: 10px 20px 10px 20px;
}

.table-header {
    margin: 15px 15px 0px 17px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--gray-04);
  }
.orderDesc {
    font-size: 14px;
    font-weight: 400;
    color: var(--black);
}
.hide-xs {
    display: flex;
}
.show-xs {
    display: none;
}

.common-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--black);
    line-height: 16px;
}
.bttn-bgnd {
    background: var(--black);
    color: var(--white);
    border-radius: var(--border-radius-sm);
  }
  
.prdt-title {
    padding-left: 20px;
    font-size: 18px;
    font-weight: 400;
    color:  var(--black);
    line-height: 20px;
  }

.gridMargin {
    margin: 20px;
}
  
.rowMargin {
   margin-bottom: 25px;
}

.card_container {
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
}

.addNewBttn {
    position: fixed;
    bottom: 30px; 
    right: 30px; 
    z-index: 2; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: var(--black);
}
.addIcon{
    font-size: 25px;
    color: var(--white);
}

.prdct-section, .marginBottom {
    margin-bottom: 20px;
}

.sctn-labels {
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-04);
}
.img-cntner {
    margin: 0px 0px 10px 20px;
    border-radius: var(--border-radius-sm);
    width: 85px;
    height: 85px;
}
.no-margin {
  margin: 0px;
}
.addRow {
    border-radius: var(--border-radius-sm);
    border: 2px var(--background-primary) dashed;
    color: var(--purple);
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
  }
  

.tooltip_container {
    position: relative;
    display: inline-block;
}
  
.tooltip_container .tooltip_text {
    visibility: hidden;
    width: 120px;
    font-size: 13px;
    background-color: var(--black);
    color: var(--white);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    text-align: center;
    padding: 5px 5px;
    line-height: 1.5;
    -webkit-border-radius: var(--border-radius-sm);
    border-radius: var(--border-radius-sm); 
}
.tooltip_container .tooltip_text.left {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 0%; 
    right: 105%;
}
.tooltip_container .tooltip_text.top {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -40px; 
}

.tooltip_container:hover .tooltip_text {
    visibility: visible;
    opacity: 1;
}

.tooltip_container .tooltip_text.left::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent var(--black);
}

  
.tooltip_container .tooltip_text.top::after {
	content: " ";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--black) transparent transparent transparent;
}

.paddingBox {
  padding-right: 15px;
}

.customer-info-title{
	font-weight: 700;
	font-size: 18px;
	line-height: 21px;
	color: var(--black);
}
.customer-list{
  border-bottom: 1px solid var(--background-primary);
}

.customer-list .title{
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--gray-04);
}

.customer-list .customer-details{
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
  margin-left: 0px;
  text-align: end;
}
.customer-list:last-child {
  border: none;
}

@media only screen and (max-width: 780px){
    .table-responsive-container{
        white-space: nowrap;
        overflow-x: auto;
    }
    .containerPadding_lr{
        padding-left: 15px;
        padding-right: 15px;
    }
    .containerPadding_lr.threeForthContainer{
        padding-left: 15px;
        padding-right: 15px;
    }
    .hide-xs {
        display: none;
    }
    .show-xs {
        display: flex;
    }

    .prdt-title {
        font-size: 18px;
    }

    .increament_cont {
        max-width: 84px;
    }
}

/* .menu-content-open{
    width: calc(100% - 280px);
}
.menu-content-push {
   border-left: 1px solid #EDEDED;
   box-shadow: none; 
} */


.width-100 {
    width: 100%;
}
.btn-primary-outline {
    --border-color: var(--gray-04);
    --color: var(--gray-04);
    --background: var(--white);
    --box-shadow: none;
}

.jumper-ellipsis{
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table CSS for the custom grid layout below */
.jumper-table {
    font-size: 14px;
    background: var(--white);
}
.jumper-table.tbl-header {
    height: 60px;
    border-radius: 5px 5px 0 0;
}
.jumper-table.tbl-body {
    border-radius: 0 0 5px 5px;
}
.jumper-table.tbl-header.colHeaders {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.jumper-table.tbl-body .customPadding {
    padding: 15px 20px;
}
.jumper-table.tbl-header .customPadding {
    padding: 15px 20px;
}

.break-all {
    word-break: break-all;
    white-space: normal;
}
.word-break  {
    white-space: normal;
}

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus

input:-webkit-autofill,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

  border:none !important;

  -webkit-text-fill-color: inherit !important;

  /* -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset; */

  transition: background-color 5000s ease-in-out 0s;

}

.ql-hidden{
    display: none;
}
.ql-editor {
    outline: none;
    padding: 0px 10px;
}
.ql-clipboard{
    pointer-events: none;
    user-select: none;
    outline: none;
    cursor: not-allowed;
}
.trashIcon, .important{
    cursor: pointer;
  color: var(--orange);
}

.addIcon{
   color: var(--purple);
}
.segmentBar{
	text-transform: none;
	--color-checked: var(--purple) !important;
	--color: var(--black);
}
.disabledAndNonEditableArea {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}
.bold-text, .bold-text * {
    font-weight: bold !important;
}

.status_approved{
	background-color: var(--green);
}
.status_rejected{
	background-color: var(--orange);
}
.status_pending{
    background-color: var(--yellow);
}
.status_draft{
	background-color: var(--gray-04);
}
.width100 {
    width: 100%;
}

.backBttn{
	margin-left: 16px;
    cursor: pointer;
}
input[type="color"] {
    border: none;
    opacity: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    overflow: hidden;
    top: 12px;
    right: 12px;
    cursor: pointer;
  }
pre {
	display: block;
	padding: 9.5px;
	font-size: 13px;
	line-height: 1.42857143;
	color: var(--black);
	word-break: break-all;
	word-wrap: break-word;
	background-color: var(--background-primary);
	border-radius: var(--border-radius-sm);
}
.sectionPadding {
    padding: 20px;
}
.brdr_top {
    border-top: 1px solid var(--background-primary);
}
.circle-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	width: 35px;
	border-radius: 50%;
	background: var(--purple);
	color: var(--white);
}
.infoIcon {
  color: var(--purple);
  flex-shrink: 0; 
}
.white-primary{
   color: #ffffff;
}
.previewHeader{
	border-bottom: 1px solid var(--background-primary);
	color: var(--black);
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	padding: 20px;
}
.header {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--black);
}
.title {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
}
.sub-title, .notification-subtitle {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--gray-04);
}
.optionsContainer{
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.cust-brdr {
  border-bottom: 1px solid var(--background-primary);
}
.successIcon{
    color: var(--green);
}
.width50P {
    width: 50%;
}
.previewPlaceholder{
  background: var(--purple);
  color: #ffffff;
  border-radius: 10px;
  padding: 3px 10px;
  margin-right: 5px;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.gap20P{
    gap: 20px !important;
  }
.gap10P{
    gap: 10px !important;
  }

.gap5P{
    gap: 5px !important;
  }
.column {
    display: flex;
    flex-direction: column;
}
.flex-between{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.flex-start{
    display: flex;
    justify-content: flex-start;
    gap: 5px;
}
.flex-end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.flex100P{
    flex: 1;
}
.vivid-input, .vivid-select, .vivid-textarea  {
    background: var(--background-primary);
    border-radius: var(--border-radius-sm);
    min-height: 40px;
    width: 100%;
}
.listContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 10px 15px;
}
.primaryBlack{
    color: var(--black);
}
.successBttn{
  --background: var(--white);
  --color: var(--green);
  --border-radius: var(--border-radius-sm);
  --border-color: 1px solid var(--green);
  --box-shadow: none;
}
.segmentTitle{
	font-weight: 700;
	font-size: 32px;
	line-height: 37px;
	text-align: center;
	color: var(--black);
	margin-top: 40px;
	margin-bottom: 10px;
}
.segmentSubTitle{
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	text-align: center;
	color: var(--gray-04);
	margin-bottom: 20px;
}
.customer-shipping-label{
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-04);
    line-height: 16px;
    padding-bottom: 3px;
    display: inline-block;
    text-decoration: none;
  }
.modalTitle{
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
  }
  .anchor_text{
    font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: var(--purple);
	text-decoration: none;
  }
  .error-message{
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--orange);
  }
  .segmentImg, .filterImg, .emptyProducts{
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block; 
    margin: 0 auto;
  }
  .marginRight{
    margin-right: 10px;
  }
  .marginTop10P{
    margin-top: 10px;
  }
  .textCapital{
    text-transform: capitalize;
  }
  .alignCenter{
    align-items: center;
  }
  .filterAssigned {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .commonIcon{
    width: 25px;
	height: 25px;
    cursor: pointer;
  }
  .paddingBottom{
    padding-bottom: 10px;
  }
  .customer_reply .reply_msg{
    color: #ffffff !important;
  }
  .defaultIconSize{
    width: 20px;
    height: 20px;
  }
  .overflowTitle {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px;
  }
  .titleTooltip{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
  }
  .tooltip-content {
    font-size: 14px;
    line-height: 1.4;
    background-color: var(--gray-04);
    font-weight: 400;
    color: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 1;
    max-width: 50vw;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
  }
  .tooltip-content strong{
    color: var(--white);
    font-size: 14px;
  }
  
  .tooltip-content ul {
    padding-left: 16px;
    margin: 4px 0;
  }
  .tooltip-content li {
    list-style-type: disc;
    margin-bottom: 2px;
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
  }
  .editField {
    transition: border 0.3s ease-in-out;
    border-radius: var(--border-radius-sm);
  }
  .editField:hover, .editField:focus {
    outline: 1px solid var(--gray-04);
  }
  .flex-wrap{
    flex-wrap: wrap;
  }
  .warningIcon{
    color: var(--orange);
  }
  .warning-info-box{
    display: flex;
    align-items: center;
    flex-direction: row;
    background: var(--warning);
    padding: 15px 10px;
    border-radius: var(--border-radius-sm);
    gap: 5px;
  }
  .img-block-short {
    height: 84px;  
  }
  .img-block-medium {
    height: 160px; /* Default */
  }
  .img-block-tall {
    height: 198px;
  }  
  .paddingRight10P{
    padding-right: 10px;
  }
  .counter-wrapper {
    position: relative;
    width: 100%;
  }
  .custom-counter {
    text-align: right;
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 12px;
    color: var(--gray-04);
  }
  
  /* Hide the arrows in Webkit browsers (e.g., Chrome, Safari, Edge) */
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	/* Hide the arrows in Firefox */
	input[type="number"] {
		-moz-appearance: textfield;
	}

.required-star {
 color: #cf3c4f;
 margin-left: 2px;
}
.common-padding {
  padding: 16px;
}

/**
 * Vivid Global Overrides — Brand Styling
 * ────────────────────────────────────────────
 * These utility classes make Vivid components match the app's brand
 * styling (colors, radius, sizing) beyond Vivid's own defaults.
 *
 * Imported in main.js after common.css.
 *
 * TABLE OF CONTENTS:
 *   1. DESIGN TOKEN OVERRIDES (brand color alignment)
 *   2. BUTTONS — .vvd-btn-primary, .vvd-btn-secondary, .vvd-btn-ghost,
 *                .vvd-btn-danger, .vvd-btn-danger-outline, .vvd-btn-cancel
 *                Size modifiers: .vvd-btn-sm, .vvd-btn-lg, .vvd-btn-block
 *   3. TOGGLES / SWITCHES — .vvd-toggle
 *   4. SPINNERS — .vvd-spinner, .vvd-spinner-sm, .vvd-spinner-lg,
 *                 .vvd-spinner-16, .vvd-spinner-24, .vvd-spinner-32, .vvd-spinner-48
 *   5. PROGRESS BAR — .vvd-progress
 *   6. ICONS
 *   7. BADGES & TAGS
 *   8. FORM INPUTS
 *   9. DIALOG
 *   10. DARK MODE
 */


/* ============================================
   1. DESIGN TOKEN OVERRIDES
   ============================================
   Override Vivid's CTA color scale to match Jumper's
   brand purple (#881FFF) instead of Vivid's default (#871EFF).
   
   Also align the alert connotation with the app's danger red (#eb445a).
   ============================================ */

.vvd-root {
  /* Typography is intentionally NOT overridden here: Vivid's native typography tokens
     (defined by @vonage/vivid core theme) already use the Spezia typeface with the
     correct condensed/ultra-condensed scale, matching dashboard-frontend. The Spezia
     font-face is loaded in main.ts, and --font-family-primary (theme.css) carries Spezia
     to plain HTML. Re-adding Inter overrides here would break that match. */

  /* Ensure canvas color is set (needed for filled button text = white) */
  --vvd-color-canvas: #ffffff;
  --vvd-color-canvas-text: #262626;

  /* CTA connotation → Jumper purple #881FFF */
  --vvd-color-cta-50: #f5f0fd;
  --vvd-color-cta-100: #ece2fa;
  --vvd-color-cta-200: #dcc1fc;
  --vvd-color-cta-300: #cba1fa;
  --vvd-color-cta-400: #b27bf2;
  --vvd-color-cta-500: #881fff;
  --vvd-color-cta-600: #7516e0;
  --vvd-color-cta-700: #5a0fb3;
  --vvd-color-cta-800: #440291;

  /* Alert connotation → app's danger red */
  --vvd-color-alert-500: #eb445a;
  --vvd-color-alert-600: #cf3c4f;
  --vvd-color-alert-700: #b83545;

  /* Announcement connotation → Jumper orange for .dangerBttn outline */
  --vvd-color-announcement-500: #FA7554;
  --vvd-color-announcement-600: #e56644;
  --vvd-color-announcement-700: #cc5535;
}


/* ============================================
   2. BUTTONS
   ============================================
   Target button defaults:
   - border-radius: 5px (Vivid: shape="pill" = pill, default = rounded)
   - text-transform: none
   - font-size: 14px → Vivid size="normal" is similar
   - height: 36px (default), 28px (small/condensed), 44px (large/expanded)
   - padding: 0 16px
   - box-shadow: none
   
   Class mapping:
     Solid fill    → <v-button class="vvd-btn-primary" connotation="cta" appearance="filled" label="..." />
     Outline       → <v-button class="vvd-btn-secondary" connotation="cta" appearance="outlined" label="..." />
     Clear/ghost   → <v-button class="vvd-btn-ghost" connotation="cta" appearance="ghost" label="..." />
     Danger        → <v-button class="vvd-btn-danger" connotation="alert" appearance="filled" label="..." />
     .dangerBttn                → <v-button class="vvd-btn-danger-outline" connotation="announcement" appearance="outlined" label="..." />
     .cancelBttn                → <v-button class="vvd-btn-cancel" appearance="filled" label="..." />
     size="small"               → add size="condensed" OR class="vvd-btn-sm"
     size="large"               → add size="expanded" OR class="vvd-btn-lg"
     expand="block"             → add class="vvd-btn-block"
   ============================================ */

/* --- Base shape override: target 5px radius, Vivid default is 8px --- */
.vvd-root .vvd-btn-primary,
.vvd-root .vvd-btn-secondary,
.vvd-root .vvd-btn-ghost,
.vvd-root .vvd-btn-danger,
.vvd-root .vvd-btn-danger-outline,
.vvd-root .vvd-btn-cancel {
  --_button-border-radius: var(--border-radius-sm);
}

/* --- Secondary (Outline) border color fix ---
   Vivid outlined uses neutral-300 for the box-shadow outline.
   The target design uses the primary color for the outline border.
   Override via the component's exposed variable. */
.vvd-root .vvd-btn-secondary {
  --vvd-color-neutral-300: var(--purple, #881fff);
}

/* --- Danger Outline border color fix --- same approach */
.vvd-root .vvd-btn-danger-outline {
  --vvd-color-neutral-300: var(--orange, #FA7554);
}

.vvd-root .vvd-btn-primary-outline {
  --vvd-color-neutral-300: var(--purple, #881fff);
}
.vvd-root .vvd-btn-success-outline {
  --vvd-color-neutral-300: var(--green, #22c55e);
}

/* --- Cancel (Gray) --- matches .cancelBttn: background #EDEDED, color #242424 
   Uses accent (no connotation) with overridden tokens */
.vvd-root .vvd-btn-cancel {
  --vvd-button-accent-primary: #EDEDED;
  --vvd-button-accent-primary-text: #242424;
  --vvd-button-accent-primary-increment: #e0e0e0;
  --vvd-button-accent-fierce: #d4d4d4;
  --vvd-color-canvas-text: #242424;
}

/* --- Disabled state --- 
   Target design keeps the same color but adds opacity: 0.5.
   Vivid defaults to neutral gray for disabled. Override to match that behavior. */
.vvd-root .vvd-btn-primary[disabled],
.vvd-root .vvd-btn-primary:disabled {
  --vvd-color-neutral-100: var(--vvd-color-cta-500, #881fff);
  --vvd-color-neutral-300: #ffffff;
  opacity: 0.5;
}

/* --- Size: Small (condensed) --- Use size="condensed" prop instead.
   This class is a fallback if size prop isn't used. */
.vvd-root .vvd-btn-sm {
  --vvd-size-density: -2;
}

/* --- Size: Large (expanded) --- Use size="expanded" prop instead.
   This class is a fallback if size prop isn't used. */
.vvd-root .vvd-btn-lg {
  --vvd-size-density: 2;
}

/* --- Full width (block) --- expands the button to fill its container --- */
.vvd-root .vvd-btn-block {
  display: block;
  width: 100%;
}


/* ============================================
   3. TOGGLES / SWITCHES
   ============================================
   Vivid VSwitch works out of the box with theme tokens.
   Just use connotation="cta" for purple checked state.
   
   Usage:
     <VSwitch connotation="cta" label="Enable feature" :checked="value" @change="handler" />
   
   Optional: add class="vvd-toggle" for the app's standard sizing.
   ============================================ */

.vvd-root .vvd-toggle {
  --switch-track-inline-size: 40px;
  --switch-track-block-size: 23px;
  --switch-indicator-inline-size: 20px;
  --switch-indicator-block-size: 20px;
}

/* Disabled state */
.vvd-root .vvd-toggle[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================
   4. SPINNERS / PROGRESS RING
   ============================================
   Target spinner:
   - Default size: 28px
   - Color: var(--purple, #881fff)
   
   Usage:
     <v-progress-ring class="vvd-spinner" connotation="cta" indeterminate />
     <v-progress-ring class="vvd-spinner vvd-spinner-sm" connotation="cta" indeterminate />
   ============================================ */

.vvd-root .vvd-spinner {
  --progress-ring-size: 28px;
  --progress-ring-track-size: 3px;
  display: inline-flex;
  width: 28px;
  height: 28px;
}

/* Small spinner — 20px */
.vvd-root .vvd-spinner-sm {
  --progress-ring-size: 20px;
}

/* Large spinner — 40px */
.vvd-root .vvd-spinner-lg {
  --progress-ring-size: 40px;
  width: 40px;
  height: 40px;
  --progress-ring-track-size: 4px;
}

/* Exact pixel sizes for 1:1 matching with the app's legacy inline styles */
.vvd-root .vvd-spinner-16 {
  --progress-ring-size: 16px;
  width: 16px;
  height: 16px;
  --progress-ring-track-size: 2px;
}

.vvd-root .vvd-spinner-24 {
  --progress-ring-size: 24px;
  width: 24px;
  height: 24px;
  --progress-ring-track-size: 3px;
}

.vvd-root .vvd-spinner-32 {
  --progress-ring-size: 32px;
  width: 32px;
  height: 32px;
  --progress-ring-track-size: 3px;
}

.vvd-root .vvd-spinner-48 {
  --progress-ring-size: 48px;
  width: 48px;
  height: 48px;
  --progress-ring-track-size: 4px;
}


/* ============================================
   5. PROGRESS BAR (Linear)
   ============================================
   Target progress bar: height 4px, primary color
   
   Usage:
     <v-progress class="vvd-progress" connotation="cta" indeterminate />
     <v-progress class="vvd-progress" connotation="cta" :value="60" :max="100" />
   ============================================ */

.vvd-root .vvd-progress {
  display: block;
  width: 100%;
}


/* ============================================
   6. ICONS
   ============================================
   Size reference — use Vivid's native :size prop:
   
   | Tier | :size prop | Pixels | Use case                          |
   |------|-----------|--------|-----------------------------------|
   | xs   | :size="-5" | 20px   | Button slot icons, compact actions |
   | s    | :size="-4" | 24px   | Back arrows, info icons, standalone|
   | m    | :size="-3" | 28px   | Medium standalone                  |
   | l    | :size="-2" | 32px   | Card headers, large navigation     |
   | xl   | :size="-1" | 36px   | Hero/emphasis icons                |
   
   Usage:
     <VIcon name="edit-line" :size="-5" />
     <VIcon name="arrow-left-line" :size="-4" />
     <VIcon name="briefcase-line" :size="-2" />
   ============================================ */

/* Global color utility classes — use on <VIcon class="icon-purple"> etc. */
[data-vvd-component="icon"].icon-purple { color: var(--purple, #881fff) !important; }
[data-vvd-component="icon"].icon-orange { color: var(--orange, #FA7554) !important; }
[data-vvd-component="icon"].icon-green  { color: var(--green, #22c55e) !important; }
[data-vvd-component="icon"].icon-white  { color: #ffffff !important; }
[data-vvd-component="icon"].icon-black  { color: var(--black, #1a1a1a) !important; }

/* Connotation color overrides for VIcon */
[data-vvd-component="icon"] {
  --vvd-icon-cta-primary: var(--purple, #881fff);       /* connotation="cta"     */
  --vvd-icon-alert-primary: var(--orange, #FA7554);     /* connotation="alert"   */
  --vvd-icon-success-primary: var(--green, #22c55e);    /* connotation="success" */
}

/* Info box icon color — purple on parent */
.info-box {
  color: var(--purple, #881fff);
}
.info-box p,
.info-box span {
  color: var(--black, #1a1a1a);
}


/* ============================================
   7. BADGES & TAGS
   ============================================ */
.vvd-root vwc-badge {
  --vvd-badge-font-size: 12px;
  --vvd-badge-font-weight: 500;
}

.vvd-root vwc-tag {
  --vvd-tag-font-size: 12px;
}


/* ============================================
   8. FORM INPUTS (TEXT FIELD / TEXT AREA / SELECT)
   ============================================ */
.vvd-root vwc-text-field {
  --vvd-text-field-border-radius: var(--border-radius-sm);
  --vvd-text-field-font-size: 14px;
  --vvd-typography-base: var(--font-weight-regular) 14px/1.4 var(--font-family-primary);
  font-family: var(--font-family-primary);
}

.vvd-root vwc-text-field::part(label) {
  color: var(--black, #1a1a1a);
  font-size: 14px;
  font-weight: 400;
}

.vvd-root vwc-text-area {
  --vvd-text-area-border-radius: var(--border-radius-sm);
  --vvd-text-area-font-size: 14px;
  --vvd-typography-base: var(--font-weight-regular) 14px/1.4 var(--font-family-primary);
  font-family: var(--font-family-primary);
}

/* Ghost textarea with background */
vwc-text-area.vivid-textarea {
  background: var(--background-primary) !important;
  border-radius: var(--border-radius-sm);
}

/* Ghost text field with background */
vwc-text-field.vivid-input {
  background: var(--background-primary);
  border-radius: var(--border-radius-sm);
}

.vvd-root vwc-text-area::part(label) {
  color: var(--black, #1a1a1a);
  font-size: 14px;
  font-weight: 400;
}

.vvd-root vwc-select {
  --vvd-select-border-radius: var(--border-radius-sm);
  --vvd-select-font-size: 14px;
  --vvd-typography-base: var(--font-weight-regular) 14px/1.4 var(--font-family-primary);
  font-family: var(--font-family-primary);
}

.vvd-root vwc-select::part(label) {
  color: var(--black, #1a1a1a);
  font-size: 14px;
}


/* ============================================
   8a. SEARCHABLE SELECT
   ============================================ */
.vvd-root vwc-searchable-select {
  --_searchable-select-border-radius: var(--border-radius-sm);
  --_searchable-select-padding-inline: 10px;
  --_searchable-select-padding-block: 8px;
  --vvd-typography-base: var(--font-weight-regular) 14px/1.4 var(--font-family-primary);
  inline-size: 100%;
  font-family: var(--font-family-primary);
}

.vvd-root vwc-option {
  font-family: var(--font-family-primary);
  font-size: 14px;
}


/* ============================================
   8b. CHECKBOX & RADIO
   ============================================ */
.vvd-root vwc-checkbox::part(label) {
  color: var(--black, #1a1a1a);
  font-size: 14px;
}

.vvd-root vwc-radio::part(label) {
  color: var(--black, #1a1a1a);
  font-size: 14px;
}


/* ============================================
   9. DIALOG
   ============================================ */
.vvd-root vwc-dialog {
  --vvd-dialog-border-radius: 10px;
}

.vvd-root vwc-dialog::part(headline) {
  font-size: 18px;
  font-weight: 600;
  color: var(--black, #1a1a1a);
}


/* ============================================
   9b. ACCORDION
   ============================================ */
.vvd-root vwc-accordion-item::part(header) {
  font-size: 18px;
  font-weight: 700;
  color: var(--black, #1a1a1a);
}


/* ============================================
   9c. TABS
   ============================================ */
.vvd-root vwc-tabs {
  --vvd-tabs-indicator-color: var(--purple, #881fff);
}


/* ============================================
   9d. BANNER
   ============================================ */
.vvd-root vwc-banner {
  --vvd-banner-font-size: 14px;
}


/* ============================================
   10. TOOLTIP Z-INDEX FIX (inside VDialog)
   ============================================
   Custom tooltips (.tooltip_text) render behind VDialog
   because the dialog body may have overflow clipping.
   Ensure tooltips have a high z-index and are not clipped.
   ============================================ */

.tooltip_container {
  position: relative;
}

.tooltip_container .tooltip_text {
  z-index: 10000 !important;
}

/* Prevent dialog body from clipping tooltips */
vwc-dialog .tooltip_container .tooltip_text {
  z-index: 10000 !important;
}

/* ============================================
   11. SEARCHABLE SELECT DROPDOWN Z-INDEX FIX (inside VDialog)
   ============================================
   VSearchableSelect dropdown renders behind VDialog overlay
   because the dialog z-index is higher. Force the fixed-dropdown
   popup to sit above the dialog.
   ============================================ */

vwc-searchable-select::part(popup),
vwc-select::part(popup) {
  z-index: 10001 !important;
}
/**
 * Grid Layout Utilities
 * ────────────────────────────────────────────────
 *
 * Usage:
 *   <div class="vgrid">
 *     <div class="vrow">
 *       <div class="vcol vcol-4">...</div>   <!-- 4/12 on xl -->
 *       <div class="vcol vcol-8">...</div>   <!-- 8/12 on xl -->
 *     </div>
 *   </div>
 *
 * Responsive columns:
 *   vcol-xs-12  → 100% on xs (< 576px)
 *   vcol-sm-12  → 100% on sm (≥ 576px)
 *   vcol-md-6   → 50% on md (≥ 768px)
 *   vcol-lg-4   → 33.33% on lg (≥ 992px)
 *   vcol-xl-4   → 33.33% on xl (≥ 1200px)
 *
 * Alignment:
 *   vrow--start, vrow--center, vrow--end, vrow--between, vrow--around
 *   vrow--align-start, vrow--align-center, vrow--align-end
 *
 * Spacing:
 *   vgrid--no-padding  → removes padding from grid
 *   vcol--no-padding   → removes padding from column
 *   vrow--gap-{size}   → sets gap (10, 15, 20)
 *
 * Imported in main.js after vivid-overrides.css.
 */


/* ============================================
   GRID CONTAINER
   ============================================ */
.vgrid {
  display: block;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

.vgrid--no-padding {
  padding: 0;
}


/* ============================================
   ROW
   ============================================ */
.vrow {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  box-sizing: border-box;
}

/* Justify content */
.vrow--start { justify-content: flex-start; }
.vrow--center { justify-content: center; }
.vrow--end { justify-content: flex-end; }
.vrow--between { justify-content: space-between; }
.vrow--around { justify-content: space-around; }

/* Align items */
.vrow--align-start { align-items: flex-start; }
.vrow--align-center { align-items: center; }
.vrow--align-end { align-items: flex-end; }

/* Gaps (optional — replaces margin-based spacing) */
.vrow--gap-10 { gap: 10px; margin: 0; }
.vrow--gap-15 { gap: 15px; margin: 0; }
.vrow--gap-20 { gap: 20px; margin: 0; }


/* ============================================
   COLUMNS — Base
   ============================================ */
.vcol {
  padding: 0 10px;
  box-sizing: border-box;
  flex: 1 1 0%;
  min-width: 0;
}

.vcol--no-padding {
  padding: 0;
}

/* Auto width column */
.vcol--auto {
  flex: 0 0 auto;
  width: auto;
}


/* ============================================
   COLUMNS — Fixed widths (12-column grid)
   Default (no breakpoint prefix) applies at all sizes.
   ============================================ */
.vcol-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
.vcol-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.vcol-3  { flex: 0 0 25%;      max-width: 25%;      }
.vcol-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.vcol-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.vcol-6  { flex: 0 0 50%;      max-width: 50%;      }
.vcol-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.vcol-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.vcol-9  { flex: 0 0 75%;      max-width: 75%;      }
.vcol-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.vcol-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.vcol-12 { flex: 0 0 100%;     max-width: 100%;     }


/* ============================================
   COLUMNS — XS (< 576px) — Mobile first base
   ============================================ */
.vcol-xs-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
.vcol-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.vcol-xs-3  { flex: 0 0 25%;      max-width: 25%;      }
.vcol-xs-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.vcol-xs-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.vcol-xs-6  { flex: 0 0 50%;      max-width: 50%;      }
.vcol-xs-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.vcol-xs-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.vcol-xs-9  { flex: 0 0 75%;      max-width: 75%;      }
.vcol-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.vcol-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.vcol-xs-12 { flex: 0 0 100%;     max-width: 100%;     }


/* ============================================
   COLUMNS — SM (≥ 576px)
   ============================================ */
@media (min-width: 576px) {
  .vcol-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .vcol-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .vcol-sm-3  { flex: 0 0 25%;      max-width: 25%;      }
  .vcol-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .vcol-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .vcol-sm-6  { flex: 0 0 50%;      max-width: 50%;      }
  .vcol-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .vcol-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .vcol-sm-9  { flex: 0 0 75%;      max-width: 75%;      }
  .vcol-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .vcol-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .vcol-sm-12 { flex: 0 0 100%;     max-width: 100%;     }
}


/* ============================================
   COLUMNS — MD (≥ 768px)
   ============================================ */
@media (min-width: 768px) {
  .vcol-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .vcol-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .vcol-md-3  { flex: 0 0 25%;      max-width: 25%;      }
  .vcol-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .vcol-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .vcol-md-6  { flex: 0 0 50%;      max-width: 50%;      }
  .vcol-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .vcol-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .vcol-md-9  { flex: 0 0 75%;      max-width: 75%;      }
  .vcol-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .vcol-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .vcol-md-12 { flex: 0 0 100%;     max-width: 100%;     }
}


/* ============================================
   COLUMNS — LG (≥ 992px)
   ============================================ */
@media (min-width: 992px) {
  .vcol-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .vcol-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .vcol-lg-3  { flex: 0 0 25%;      max-width: 25%;      }
  .vcol-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .vcol-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .vcol-lg-6  { flex: 0 0 50%;      max-width: 50%;      }
  .vcol-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .vcol-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .vcol-lg-9  { flex: 0 0 75%;      max-width: 75%;      }
  .vcol-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .vcol-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .vcol-lg-12 { flex: 0 0 100%;     max-width: 100%;     }
}


/* ============================================
   COLUMNS — XL (≥ 1200px)
   ============================================ */
@media (min-width: 1200px) {
  .vcol-xl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .vcol-xl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .vcol-xl-3  { flex: 0 0 25%;      max-width: 25%;      }
  .vcol-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .vcol-xl-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .vcol-xl-6  { flex: 0 0 50%;      max-width: 50%;      }
  .vcol-xl-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .vcol-xl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .vcol-xl-9  { flex: 0 0 75%;      max-width: 75%;      }
  .vcol-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .vcol-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .vcol-xl-12 { flex: 0 0 100%;     max-width: 100%;     }
}


/* ============================================
   CONTENT WRAPPER
   ============================================ */
.vcontent {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--background-primary);
}
/**
 * Typography Utilities
 * ────────────────────────────────────────────
 * Centralized font/text classes for consistent typography
 * across the Jumper dashboard. Use these instead of defining
 * font styles in scoped component styles.
 *
 * Imported in main.js after grid-layout.css.
 *
 * TABLE OF CONTENTS:
 *   1. PAGE TITLES — Large headings for page/section headers
 *   2. CARD & SECTION TITLES — Medium headings within cards
 *   3. BODY TEXT — Default content text
 *   4. LABELS & SUBTITLES — Secondary/muted text
 *   5. SMALL & HELPER TEXT — Captions, counters, hints
 *   6. LINKS & ACTIONS — Clickable text styles
 *   7. FONT WEIGHT UTILITIES
 *   8. FONT SIZE UTILITIES
 *   9. TEXT COLOR UTILITIES
 *   10. TEXT ALIGNMENT & OVERFLOW
 */


/* ============================================
   1. PAGE TITLES
   ============================================
   Use for main page headings, modal titles,
   and top-level section headers.
   ============================================ */

/* Page title — 18px bold, black (used in toolbars) */
.vtext-page-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 21px;
  color: var(--black);
  margin: 0;
}

/* Page title — 18px regular (toolbar subtitle / navigation titles) */
.vtext-page-title--regular {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

/* Modal / dialog title — 24px bold */
.vtext-modal-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 28px;
  color: var(--black);
  margin: 0;
}

/* Hero title — 32px bold (segment titles, empty states) */
.vtext-hero-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 37px;
  color: var(--black);
  margin: 0;
}


/* ============================================
   2. CARD & SECTION TITLES
   ============================================
   Use inside cards, accordions, and panels
   for section headings.
   ============================================ */

/* Card title — 18px bold */
.vtext-card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 21px;
  color: var(--black);
  margin: 0;
}

/* Card title — 18px regular (lighter weight variant) */
.vtext-card-title--light {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--black);
  margin: 0;
}

/* Section header — 16px regular */
.vtext-section-header {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--black);
  margin: 0;
}

/* Section header — 16px semibold */
.vtext-section-header--bold {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 18px;
  color: var(--black);
  margin: 0;
}


/* ============================================
   3. BODY TEXT
   ============================================
   Default text for content, table cells,
   descriptions, and general copy.
   ============================================ */

/* Body — 14px regular, black */
.vtext-body {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--black);
  margin: 0;
}

/* Body — 14px semibold, black */
.vtext-body--bold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  color: var(--black);
  margin: 0;
}


/* ============================================
   4. LABELS & SUBTITLES
   ============================================
   Use for form labels, secondary descriptions,
   table column headers, and muted content.
   ============================================ */

/* Subtitle — 14px regular, gray (muted text) */
.vtext-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--gray-04);
  margin: 0;
}

/* Label — 14px regular, gray (form labels, column headers) */
.vtext-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--gray-04);
  margin: 0;
}

/* Label — 14px semibold, gray (emphasized labels) */
.vtext-label--bold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  color: var(--gray-04);
  margin: 0;
}

/* Hero subtitle — 18px regular, gray */
.vtext-hero-subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--gray-04);
  margin: 0;
}


/* ============================================
   5. SMALL & HELPER TEXT
   ============================================
   Captions, character counters, hints,
   error messages, and tooltip text.
   ============================================ */

/* Caption — 12px regular, gray */
.vtext-caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 14px;
  color: var(--gray-04);
  margin: 0;
}

/* Counter text — 14px regular, gray (character count, etc.) */
.vtext-counter {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--gray-04);
  text-align: right;
  margin: 0;
  margin-top: 4px;
}

/* Error message — 14px regular, orange/red */
.vtext-error {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--orange);
  margin: 0;
}

/* Success message — 14px regular, green */
.vtext-success {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--green);
  margin: 0;
}

/* Info/hint text — 13px regular (code blocks, small print) */
.vtext-hint {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--gray-04);
  margin: 0;
}


/* ============================================
   6. LINKS & ACTIONS
   ============================================ */

/* Primary link — purple, no underline by default */
.vtext-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--purple);
  text-decoration: none;
  cursor: pointer;
}

.vtext-link:hover {
  text-decoration: underline;
}

/* Primary text highlight — purple */
.vtext-primary {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--purple);
  margin: 0;
}


/* ============================================
   7. FONT WEIGHT UTILITIES
   ============================================ */
.vfont-regular  { font-weight: var(--font-weight-regular) !important; }
.vfont-medium   { font-weight: var(--font-weight-medium) !important; }
.vfont-semibold { font-weight: var(--font-weight-semibold) !important; }
.vfont-bold     { font-weight: 700 !important; }


/* ============================================
   8. FONT SIZE UTILITIES
   ============================================ */
.vfont-xs  { font-size: var(--font-size-xs) !important; line-height: 14px !important; }
.vfont-sm  { font-size: 13px !important; line-height: 16px !important; }
.vfont-md  { font-size: var(--font-size-sm) !important; line-height: 16px !important; }
.vfont-lg  { font-size: var(--font-size-base) !important; line-height: 18px !important; }
.vfont-xl  { font-size: var(--font-size-lg) !important; line-height: 21px !important; }
.vfont-2xl { font-size: var(--font-size-xl) !important; line-height: 24px !important; }
.vfont-3xl { font-size: var(--font-size-2xl) !important; line-height: 28px !important; }
.vfont-4xl { font-size: 32px !important; line-height: 37px !important; }


/* ============================================
   9. TEXT COLOR UTILITIES
   ============================================ */
.vtext-black   { color: var(--black) !important; }
.vtext-gray    { color: var(--gray-04) !important; }
.vtext-purple  { color: var(--purple) !important; }
.vtext-white   { color: #ffffff !important; }
.vtext-orange  { color: var(--orange) !important; }
.vtext-green   { color: var(--green) !important; }


/* ============================================
   10. TEXT ALIGNMENT & OVERFLOW
   ============================================ */
.vtext-left   { text-align: left !important; }
.vtext-center { text-align: center !important; }
.vtext-right  { text-align: right !important; }

/* Single line truncation with ellipsis */
.vtext-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line clamping */
.vtext-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

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

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

/* No wrap */
.vtext-nowrap {
  white-space: nowrap;
}

/* Word break */
.vtext-break {
  word-break: break-all;
  white-space: normal;
}

.vtext-word-break {
  white-space: normal;
  overflow-wrap: break-word;
}
/**
 * Spacing Utilities
 * ────────────────────────────────────────────
 * Padding and margin utility classes for consistent
 * spacing across the Jumper dashboard.
 *
 * Naming convention:
 *   v{property}{direction}-{size}
 *
 *   property:  p = padding, m = margin
 *   direction: t = top, b = bottom, l = left, r = right,
 *              x = horizontal (left + right), y = vertical (top + bottom)
 *   size:      5 = 5px, 10 = 10px, 20 = 20px
 *
 * Examples:
 *   .vpt-5   → padding-top: 5px
 *   .vmb-20  → margin-bottom: 20px
 *   .vpy-10  → padding-top: 10px + padding-bottom: 10px
 *
 * Imported in main.js after typography.css.
 */


/* ============================================
   PADDING TOP
   ============================================ */
.vpt-5  { padding-top: 5px !important; }
.vpt-10 { padding-top: 10px !important; }
.vpt-20 { padding-top: 20px !important; }


/* ============================================
   PADDING BOTTOM
   ============================================ */
.vpb-5  { padding-bottom: 5px !important; }
.vpb-10 { padding-bottom: 10px !important; }
.vpb-20 { padding-bottom: 20px !important; }


/* ============================================
   PADDING LEFT
   ============================================ */
.vpl-5  { padding-left: 5px !important; }
.vpl-10 { padding-left: 10px !important; }
.vpl-20 { padding-left: 20px !important; }


/* ============================================
   PADDING RIGHT
   ============================================ */
.vpr-5  { padding-right: 5px !important; }
.vpr-10 { padding-right: 10px !important; }
.vpr-20 { padding-right: 20px !important; }


/* ============================================
   PADDING HORIZONTAL (left + right)
   ============================================ */
.vpx-5  { padding-left: 5px !important; padding-right: 5px !important; }
.vpx-10 { padding-left: 10px !important; padding-right: 10px !important; }
.vpx-20 { padding-left: 20px !important; padding-right: 20px !important; }


/* ============================================
   PADDING VERTICAL (top + bottom)
   ============================================ */
.vpy-5  { padding-top: 5px !important; padding-bottom: 5px !important; }
.vpy-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.vpy-20 { padding-top: 20px !important; padding-bottom: 20px !important; }


/* ============================================
   MARGIN TOP
   ============================================ */
.vmt-5  { margin-top: 5px !important; }
.vmt-10 { margin-top: 10px !important; }
.vmt-20 { margin-top: 20px !important; }


/* ============================================
   MARGIN BOTTOM
   ============================================ */
.vmb-5  { margin-bottom: 5px !important; }
.vmb-10 { margin-bottom: 10px !important; }
.vmb-20 { margin-bottom: 20px !important; }


/* ============================================
   MARGIN LEFT
   ============================================ */
.vml-5  { margin-left: 5px !important; }
.vml-10 { margin-left: 10px !important; }
.vml-20 { margin-left: 20px !important; }


/* ============================================
   MARGIN RIGHT
   ============================================ */
.vmr-5  { margin-right: 5px !important; }
.vmr-10 { margin-right: 10px !important; }
.vmr-20 { margin-right: 20px !important; }


/* ============================================
   MARGIN HORIZONTAL (left + right)
   ============================================ */
.vmx-5  { margin-left: 5px !important; margin-right: 5px !important; }
.vmx-10 { margin-left: 10px !important; margin-right: 10px !important; }
.vmx-20 { margin-left: 20px !important; margin-right: 20px !important; }


/* ============================================
   MARGIN VERTICAL (top + bottom)
   ============================================ */
.vmy-5  { margin-top: 5px !important; margin-bottom: 5px !important; }
.vmy-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.vmy-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
/* Host shell styles — sidebar, split-pane, offline/legacy modals. */

/* vue3-toastify overrides to match a solid toast look: solid color fill
   per type (not the library's dark-background-plus-icon default),
   content-sized width instead of a fixed 320px, and a 4px corner radius. */
:root {
  --toastify-color-error: #eb445a;
  --toastify-color-success: #2dd36f;
  --toastify-color-warning: #ffc409;
  --toastify-color-info: #3dc2ff;
  --toastify-toast-min-height: auto;
}
/* Stretches edge to edge with an 8px margin on each side, capped at 700px,
   centered. */
.Toastify__toast-container {
  width: calc(100vw - 16px);
  max-width: 700px;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  margin-bottom: 0;
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--purple, #881fff);
  color: #fff;
}
.Toastify__toast-icon {
  display: none;
}
.Toastify__toast-body {
  padding: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.sideNav {
  --side-width: 280px;
  --side-min-width: 60px;
}
.sideNav .label,
.sideNav .icon {
  cursor: pointer;
}
.sideNav .icon {
  width: 25px;
}

/* Full-bleed flex row layout for the sidebar + main content split: side
   pane pinned to --side-width while visible (driven by AppSidebar.vue's
   own .sideMenu/.sideMenu--pinned rules), main pane filling the rest. */
.split-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.split-pane-main {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#inbox-list {
  height: 100dvh;
  padding-top: 0;
  padding-bottom: 0;
  --background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
}

.version {
  font-size: 12px;
  opacity: 0.8;
  padding: 5px;
}

.customer-profile {
  overflow: hidden;
  display: flex;
  border-top: 1px solid var(--background-primary);
  padding: 5px 12px;
  width: 100%;
  gap: 10px;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
.customer-profile .profile {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
}
.customer-profile .cust-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  max-width: none;
}
.customer-profile .description {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-wrap: nowrap;
}
.customer-profile .shopName {
  font-size: 0.875rem;
  font-weight: bold;
}
.customer-profile .email {
  font-size: 0.8rem;
}
.customer-profile .shopName,
.customer-profile .email {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-link {
  color: var(--purple);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}
.sidebar-title {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--gray-04);
}
.sidebar-children {
  margin-left: 30px;
  padding-left: 25px;
  border-left: 1px solid var(--gray-04);
}
.sidebar-children-text {
  margin: 10px 0px 20px 15px;
}

@media screen and (min-width: 992px) {
  .sideNavClosed {
    --side-width: 64px;
  }
  .sideNavClosed .label {
    display: none;
  }
  .sideNavClosed .sidebar-children {
    display: none;
  }
}

.redDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #eb445a;
}

/* Plain-CSS replacement for the offline modal: VDialog exposes
   --dialog-max-inline-size/--dialog-min-inline-size for width (its headline
   and body text are rendered inside its shadow DOM with no exposed part,
   but text-align/font-weight are inheritable CSS properties that cascade
   through the shadow boundary normally, so setting them on the host
   element reaches the shadow-internal <h2>/text without needing a part). */
.offlineDialog {
  --dialog-max-inline-size: 430px;
  --dialog-min-inline-size: 430px;
  /* Suppresses the native <dialog>'s auto-focus ring. showModal() focuses
     the dialog itself since no-dismiss-button leaves nothing else focusable
     inside — scoped to this instance via the component's own
     --focus-stroke-color hook, not touched globally, since this dialog is
     purely informational (no interactive content for a focus ring to aid). */
  --focus-stroke-color: transparent;
  text-align: center;
}
/* Supplying our own heading via the #main slot (bypassing VDialog's
   `headline` prop) since the prop renders inside shadow DOM with a
   hardcoded Montserrat/weight-500 font and no exposed part — this way we
   get the app's real heading style instead. Padding here replaces the
   padding VDialog would have applied internally to its own header/body. */
.offlineDialog .heading {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--black);
  margin-bottom: 20px;
  padding: 20px 24px 0;
}
.offlineDialog .sub-text {
  font-size: 0.9rem;
  color: var(--gray-04);
  margin: 0;
  padding: 0 24px 20px;
}
.offlineDialog::backdrop {
  background-color: rgba(0, 0, 0, 1);
  opacity: 0.32;
}

.app-page[data-v-1b288856] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.app-page-content[data-v-1b288856] {
  flex: 1;
  overflow: auto;
}
.remote-view__state[data-v-12c7c422] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}
.placeholder[data-v-2d9fdcb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gray-04);
  font-size: 14px;
}

.center-align[data-v-fddde671] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.section_404_img[data-v-fddde671] {
  width: 60vw;
  max-width: 480px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.section_404_img img[data-v-fddde671] {
  width: 100%;
  height: auto;
  display: block;
}
.not-found-content[data-v-fddde671] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-top: 20px;
  max-width: 480px;
  padding: 0 20px;
}
.not-found-title[data-v-fddde671] {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
}
.not-found-subtitle[data-v-fddde671] {
  font-size: 14px;
  color: var(--gray-04);
  line-height: 20px;
}
.not-found-link[data-v-fddde671] {
  color: var(--purple);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}
.not-found-link[data-v-fddde671]:hover {
  opacity: 0.85;
}

#slider-wrapper[data-v-2d35e596] {
  max-width: 100%;
  max-height: 100vh;
  text-align: center;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#overflow[data-v-2d35e596] {
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
}
#slides .inner[data-v-2d35e596] {
  width: 600%;
  transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
img[data-v-2d35e596-s] {
  width: calc(100% / 6) !important;
  float: left;
}
#slide1:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: 0;
}
#slide2:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: -100%;
}
#slide3:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: -200%;
}
#slide4:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: -300%;
}
#slide5:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: -400%;
}
#slide6:checked ~ #slides .inner[data-v-2d35e596] {
  margin-left: -500%;
}
input[type='radio'][data-v-2d35e596] {
  display: none;
}
label[data-v-2d35e596] {
  background: #ffffff;
  display: inline-block;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius-sm);
}
.darkModeEnabled label[data-v-2d35e596] {
  background: #212121;
}
#slide1:checked ~ .label-wrapper label[for='slide1'][data-v-2d35e596],
#slide2:checked ~ .label-wrapper label[for='slide2'][data-v-2d35e596],
#slide3:checked ~ .label-wrapper label[for='slide3'][data-v-2d35e596],
#slide4:checked ~ .label-wrapper label[for='slide4'][data-v-2d35e596],
#slide5:checked ~ .label-wrapper label[for='slide5'][data-v-2d35e596],
#slide6:checked ~ .label-wrapper label[for='slide6'][data-v-2d35e596] {
  background: #d9dce3;
}
.darkModeEnabled #slide1:checked ~ .label-wrapper label[for='slide1'][data-v-2d35e596],
.darkModeEnabled #slide2:checked ~ .label-wrapper label[for='slide2'][data-v-2d35e596],
.darkModeEnabled #slide3:checked ~ .label-wrapper label[for='slide3'][data-v-2d35e596],
.darkModeEnabled #slide4:checked ~ .label-wrapper label[for='slide4'][data-v-2d35e596],
.darkModeEnabled #slide5:checked ~ .label-wrapper label[for='slide5'][data-v-2d35e596],
.darkModeEnabled #slide6:checked ~ .label-wrapper label[for='slide6'][data-v-2d35e596] {
  background: #7f7f7f;
}
.label-wrapper[data-v-2d35e596] {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
}

.qr-wrapper[data-v-26de685c] {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  gap: 10px;
  align-items: center;
}
.full-brdr[data-v-26de685c] {
  border: 1px solid var(--black);
}

.sctn-input[data-v-048659e2] {
  background: var(--background-primary);
  border-radius: var(--border-radius-sm);
  min-height: 40px;
  width: 100%;
}
.app-page[data-v-dfff9eb9] {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.logo-section[data-v-dfff9eb9] {
  padding: 20px;
}
.login-page-wrapper[data-v-dfff9eb9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}
.login-page-wrapper .loginContainer[data-v-dfff9eb9] {
  width: -webkit-fit-content;
}
@media (max-width: 768px) {
.login-page-wrapper .loginContainer[data-v-dfff9eb9] {
    width: auto;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.login-page-wrapper .loginContainer[data-v-dfff9eb9] {
    width: auto;
}
}
.login-row[data-v-dfff9eb9] {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.login-col-form[data-v-dfff9eb9] {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding: 0;
}
@media (max-width: 991px) {
.login-col-form[data-v-dfff9eb9] {
    flex: 0 0 100%;
    max-width: 100%;
}
}
.login-col-image[data-v-dfff9eb9] {
  flex: 0 0 66.67%;
  max-width: 66.67%;
  max-height: 100vh;
  padding: 0;
  background-color: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 991px) {
.login-col-image[data-v-dfff9eb9] {
    display: none;
}
}
.darkModeEnabled .login-col-image[data-v-dfff9eb9] {
  background-color: #121212;
}
.form-wrapper[data-v-dfff9eb9] {
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-container[data-v-dfff9eb9] {
  width: 100%;
  padding: 20px;
}
.form-container form[data-v-dfff9eb9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.frm-header[data-v-dfff9eb9] {
  margin-bottom: 20px;
}
.vivid-input[data-v-dfff9eb9] {
  background: var(--background-primary);
  border-radius: var(--border-radius-sm);
  min-height: 40px;
  width: 100%;
}
.bttnPrimary[data-v-dfff9eb9],
.bttnSecondary[data-v-dfff9eb9] {
  width: 100%;
  height: 40px;
}
.loginIllustration_onTheRight[data-v-dfff9eb9] {
  width: auto;
  height: auto;
  max-width: 100%;
  /* padding is counted inside max-height so the image + padding never exceeds the viewport */
  max-height: 64vh;
  padding: 18vh 0px;
  box-sizing: content-box;
}
.header[data-v-dfff9eb9] {
  font-weight: bold;
  font-size: 2rem;
  line-height: 120%;
  color: var(--black);
  padding-bottom: 10px;
}
.sub-header[data-v-dfff9eb9] {
  font-size: 1.1rem;
  color: var(--black);
}
.sub-header .smallText[data-v-dfff9eb9] {
  font-size: 0.8rem;
  margin: 10px 0;
}
.marginBottom[data-v-dfff9eb9] {
  margin-bottom: 10px;
}
.account-item[data-v-dfff9eb9] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--background-primary);
  border-radius: var(--border-radius-sm);
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px 16px;
}
.account-item[data-v-dfff9eb9]:hover {
  background: var(--purple);
}
.account-item:hover .title[data-v-dfff9eb9],
.account-item:hover .sub-title[data-v-dfff9eb9] {
  color: var(--white);
}
.account-item-avatar[data-v-dfff9eb9] {
  flex-shrink: 0;
}
.account-item-label[data-v-dfff9eb9] {
  flex: 1;
}
.img-responsive[data-v-dfff9eb9] {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
}
.title[data-v-dfff9eb9] {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
}
.custPadding[data-v-dfff9eb9] {
  padding-bottom: 5px;
}
.sub-title[data-v-dfff9eb9] {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--gray-04);
}
.chooseAccountContainer[data-v-dfff9eb9] {
  margin-bottom: 0px;
  height: 500px;
  min-height: 450px;
  overflow: hidden;
  overflow-y: auto;
}
.headerLogo[data-v-dfff9eb9] {
  height: 30px;
}
.forgot-password-link[data-v-dfff9eb9] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  font-size: 0.9rem;
  color: var(--gray-04);
  cursor: pointer;
}
.otpHint[data-v-dfff9eb9] {
  display: flex;
  width: 100%;
  font-size: 0.8rem;
  margin: 10px 0 20px 0;
}
.resendLink[data-v-dfff9eb9] {
  color: var(--purple);
  font-weight: bold;
  cursor: pointer;
}
.back-text[data-v-dfff9eb9] {
  font-size: 0.9rem;
  line-height: 140%;
  padding: 0 15px;
}
.back-text span[data-v-dfff9eb9]:not(:first-child) {
  padding: 0 3px;
}
.back-text .clickable[data-v-dfff9eb9] {
  color: var(--purple);
  cursor: pointer;
}
.authContainer[data-v-dfff9eb9] {
  width: 100%;
}
.sso-login-wrapper[data-v-dfff9eb9] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--background-primary);
  position: relative;
}
.sso-login-wrapper .or-text[data-v-dfff9eb9] {
  position: absolute;
  top: -0.5rem;
  font-size: 1rem;
  background-color: var(--white);
  padding: 0 10px;
}
.sso-login-wrapper .title[data-v-dfff9eb9] {
  font-size: 1.1rem;
  margin: 10px 0;
}
.sso-login-wrapper .input-button-wrapper[data-v-dfff9eb9] {
  display: flex;
  width: 100%;
  flex-direction: row;
  padding: 10px 0;
}
.sso-login-wrapper .input-button-wrapper .vivid-input.sctn-input[data-v-dfff9eb9] {
  flex: 1;
  height: 40px;
  font-size: 0.9rem;
}
.passwordField[data-v-dfff9eb9] {
  position: relative;
}
.passwordField .passwordToggle[data-v-dfff9eb9] {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 999;
}/*$vite$:1*/