:root {
--font-family-regular: 'Inter', sans-serif;
--font-family-bold: 'DM Sans', sans-serif;

--primary-color: #004438;
--primary-color-300: #00733d;
--primary-color-400: #2ec659;
--primary-color-500: #61ce70;
--primary-color-600: #cef3d7;
--primary-color-700: #e0edf6;
--primary-color-750: #e5eff7;
--primary-color-800: #f0f8fa;
--primary-color-850: #f2f9f2;
--primary-color-900: #f7fafd;
--primary-color-950: #fafbfc;

--secondary-color: #54595f;

--danger-color: #b51a1a;
--danger-color-300: #e51937;
--danger-color-500: #dc3232;
--danger-color-600: #fc7564;
--danger-color-700: #fcdbd1;
--danger-color-800: #ffe7df;
--danger-color-900: #f9f4f7;

--neutral-color: #111111;
--neutral-color-100: #222222;
--neutral-color-150: #333333;
--neutral-color-200: #353839;
--neutral-color-250: #666666;
--neutral-color-300: #999999;
--neutral-color-350: #b7b7b7;
--neutral-color-400: #bbbbbb;
--neutral-color-500: #d2d7e0;
--neutral-color-550: #dae2e8;
--neutral-color-600: #dddddd;
--neutral-color-650: #e5e5e5;
--neutral-color-700: #f2f4f7;
--neutral-color-750: #f7f7f7;
--neutral-color-800: #f9f9f9;
--neutral-color-900: #fefefe;

--success-color: #00733d;
--success-color-300: #2ec659;
--success-color-400: #61ce70;
--success-color-600: #cef3d7;

--warning-color: #f5ad20;
--warning-color-100: #fcd31e;
--warning-color-300: #f4d76e;
--warning-color-500: #fff3cd;

--autocomplete-border-radius: var(--border-all-radius-sm);
--autocomplete-filter-border: 1px solid var(--neutral-color-600);
--autocomplete-menu-background-color-active: var(--primary-color-850);
--autocomplete-menu-border-active: none;

--bg-transition: background-color .3s;

--body-background-color: #ffffff;
--body-font-family: var(--font-family-regular);
--body-font-size: 16px;
--body-text-color: var(--neutral-color-200);

--border-radius-xs: 3px;
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 50px;
--border-radius-xl: 100px;
--border-all-radius-xs: 3px;
--border-all-radius-sm: 8px;
--border-all-radius-md: 12px;
--border-all-radius-lg: 50px;
--border-all-radius-xl: 100px;

--button-background-color: var(--primary-color-400);
--button-background-color-hover: var(--primary-color-300);
--button-border: none;
--button-border-radius: var(--border-all-radius-lg);
--button-outline: 2px solid var(--primary-color-300);
--button-outline-offset: 2px;
--button-text-color: #ffffff;
--button-transition: transform .3s, border .3s, background-color .3s, opacity .3s, color .3s;

--button-outlined-border: 1px solid var(--neutral-color-250);
--button-outlined-background-color: #ffffff;
--button-outlined-background-color-hover: var(--primary-color-800);
--button-plain-background-color: transparent;
--button-plain-background-color-hover: var(--neutral-color-800);

--button-secondary-background-color: var(--primary-color);
--button-secondary-background-color-hover: var(--primary-color-300);

--chart-circle-stroke-color: var(--neutral-color-550);
--chart-bar-stroke-color: var(--primary-color-400);
--chart-overlay-background-color: var(--primary-color-900);

--checkbox-radio-border: 2px solid var(--neutral-color-600);
--checkbox-radio-transition: background-color .3s, border-color .3s;
--checkbox-border-radius: var(--border-all-radius-sm);
--checkbox-icon-transition: opacity .3s, color .3s;

--content-box-background-color: var(--primary-color-800);
--content-box-border-radius: var(--border-all-radius-md);
--content-box-border: none;
--content-box-button-outlined-background-color-hover: var(--primary-color-850);
--content-box-button-plain-background-color-hover: #ffffff;
--content-box-dropdown-toggle-background-color-hover: var(--neutral-color-900);
--content-box-dropdown-toggle-border-expanded: 1px solid var(--neutral-color-100);
--content-box-dropdown-toggle-background-color-expanded: var(--neutral-color-900);
--content-box-input-icon-background-color-hover: var(--neutral-color-900);
--content-box-variant-background-color-hover: var(--neutral-color-900);

--datepicker-border: 1px solid var(--neutral-color-500);
--datepicker-border-hover: 1px solid var(--primary-color-500);
--datepicker-border-highlight: 1px solid var(--primary-color-500);
--datepicker-border-active: 1px solid var(--primary-color-300);
--datepicker-border-unselectable: 1px solid #ffffff;
--datepicker-background-color: #ffffff;
--datepicker-background-color-hover: var(--primary-color-600);
--datepicker-background-color-highlight: #ffffff;
--datepicker-background-color-active: var(--primary-color-300);
--datepicker-background-color-unselectable: #ffffff;
--datepicker-background-color-today: var(--neutral-color-700);
--datepicker-button-secondary-background-color-hover: var(--primary-color-850);
--datepicker-header-border: 1px solid var(--primary-color-300);
--datepicker-header-background-color: var(--primary-color-300);
--datepicker-header-text-color: #ffffff;
--datepicker-item-border-radius: var(--border-all-radius-sm);
--datepicker-item-transition: background-color .3s, border-color .3s, color .3s;
--datepicker-nav-background-color-hover: var(--primary-color);
--datepicker-nav-border-hover: none;
--datepicker-nav-icon-color: #ffffff;
--datepicker-nav-transition: background-color .3s;
--datepicker-text-color: var(--body-text-color);
--datepicker-text-color-hover: var(--body-text-color);
--datepicker-text-color-highlight: var(--primary-color-500);
--datepicker-text-color-active: #ffffff;
--datepicker-text-color-unselectable: var(--neutral-color-350);

--dialog-titlebar-text-color: var(--body-text-color);
--dialog-titlebar-close-background-color-hover: var(--neutral-color-700);

--dropdown-toggle-background-color: var(--input-background-color);
--dropdown-toggle-background-color-hover: #ffffff;
--dropdown-toggle-background-color-expanded: var(--input-background-color);
--dropdown-toggle-border: var(--input-border);
--dropdown-toggle-border-radius: var(--border-all-radius-sm);
--dropdown-toggle-border-expanded: 1px solid var(--neutral-color-300);
--dropdown-toggle-transition: background-color .3s, border-color .3s;
--dropdown-icon-transition: transform 190ms;
--dropdown-menu-background-color: #ffffff;
--dropdown-menu-border: 1px solid var(--neutral-color-300);
--dropdown-menu-border-radius: var(--border-all-radius-sm);
--dropdown-menu-row-background-color-hover: var(--neutral-color-800);
--dropdown-menu-row-background-color-active: var(--primary-color-300);
--dropdown-menu-row-border: 1px solid var(--neutral-color-500);
--dropdown-menu-row-border-radius: var(--border-all-radius-sm);
--dropdown-menu-row-border-hover: 1px solid var(--neutral-color-500);
--dropdown-menu-row-border-active: 1px solid var(--primary-color-300);
--dropdown-menu-row-font-size: var(--input-font-size);
--dropdown-menu-row-text-color-active: #ffffff;
--dropdown-filter-input-border: 1px solid var(--neutral-color-400);
--dropdown-filter-search-background-color-hover: var(--neutral-color-700);
--dropdown-filter-progress-background-color: #ffffff;
--dropdown-state-transition: opacity .3s, transform 190ms, visibility .3s;
--dropdown-row-transition: background-color .3s, border-color .3s, color .3s;

--heading-font-family: var(--font-family-bold);
--heading-font-weight: 600;
--heading-main-border-color: var(--neutral-color-600);
--heading-text-color: var(--neutral-color-200);

--input-background-color: var(--primary-color-950);
--input-border: 1px solid var(--neutral-color-350);
--input-border-invalid: 1px solid var(--danger-color-500);
--input-border-radius: var(--border-all-radius-sm);
--input-font-size: 14px;
--input-text-color: var(--neutral-color-200);
--input-label-color: var(--neutral-color-200);
--input-transition: color .3s, border .3s, background-color .3s, opacity .3s, box-shadow .3s;
--input-validation-text-color: var(--danger-color-500);

--link-outline: 2px solid var(--primary-color-300);
--link-outline-offset: 4px;
--link-color: var(--neutral-color-200);
--link-color-hover: var(--neutral-color-250);
--link-transition: transform .3s, border .3s, background-color .3s, opacity .3s, color .3s;
--link-icon-transition: transform 190ms;

--loading-box-background-color: rgba(0, 0, 0, 0.8);
--loading-box-text-color: #ffffff;
--loading-layer-background-color: #ffffff;

--page-header-background-color: #ffffff;
--page-header-link-color: var(--neutral-color-150);
--page-header-link-color-hover: var(--neutral-color-350);
--page-footer-background-color: var(--primary-color);
--page-footer-text-color: #ffffff;
--page-footer-copyright-text-color: #ffffff;
--page-footer-border-color: var(--primary-color-300);

--section-item-background-color: transparent;
--section-item-background-color-active: var(--primary-color-800);
--section-item-border: 1px solid var(--neutral-color-600);
--section-item-border-active: 1px solid var(--primary-color-750);
--section-item-border-radius: var(--border-all-radius-md);
--section-item-transition: border .3s, background-color .3s;

--skeleton-background-color: var(--neutral-color-650);
--skeleton-pulse-background-color: var(--neutral-color-500);

--swiper-theme-color: var(--primary-color);
--swiper-pagination-bottom: 0;
--swiper-pagination-bullet-width: 14px;
--swiper-pagination-bullet-height: 14px;
--swiper-pagination-bullet-horizontal-gap: 6px;
--swiper-pagination-bullet-inactive-color: var(--neutral-color-550);
--swiper-pagination-bullet-inactive-opacity: 1;

--tab-bar-border: 1px solid var(--neutral-color-700);
--tab-bar-item-background-color: var(--neutral-color-800);
--tab-bar-item-background-color-hover: #ffffff;
--tab-bar-item-transition: border .3s, background-color .3s;
--tab-bar-dropdown-toggle-background-color-expanded: #ffffff;
--tab-bar-dropdown-menu-background-color: #ffffff;
--tab-bar-dropdown-menu-item-border: 1px solid var(--neutral-color-650);
--tab-bar-dropdown-menu-item-background-hover: var(--neutral-color-800);

--tip-border-radius: var(--border-all-radius-md);
--tip-background-color: var(--primary-color-800);
--tip-icon-color: var(--primary-color);

--toggle-blob-background-color: #ffffff;
--toggle-slide-background-color: var(--neutral-color-600);
--toggle-slide-background-color-hover: var(--neutral-color-650);
--toggle-slide-text-color-active: #ffffff;
--toggle-transition: background-color .3s, color .3s;

--variant-background-color: #ffffff;
--variant-background-color-hover: var(--neutral-color-800);
--variant-background-color-active: var(--primary-color-850);
--variant-icon-transition: opacity .3s;
--variant-indicator-border: 2px solid var(--primary-color-800);
--variant-indicator-text-color: #ffffff;
--variant-overlay-border: 1px solid var(--neutral-color-500);
--variant-overlay-border-radius: var(--border-all-radius-sm);
--variant-overlay-transition: border-color .3s;

--widget-content-border: 1px solid var(--neutral-color-350);
--widget-content-text-color: var(--body-text-color);
--widget-overlay-background-color: #000000;
}

html {
scroll-behavior: auto !important;
}

html,
body,
#PageContainer {
height: 100%;
}

body {
margin: 0;
padding: 0;
font-family: var(--body-font-family);
font-size: var(--body-font-size);
color: var(--body-text-color);
background-color: var(--body-background-color);
min-width: 320px;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
color: var(--heading-text-color);
}

a {
color: var(--link-color);
transition: var(--link-transition);
}

a:hover {
color: var(--link-color-hover);
}

a:focus-visible {
outline: var(--link-outline);
outline-offset: var(--link-outline-offset);
}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=number],
input[type=tel],
textarea {
padding: 12px;
font-size: var(--input-font-size);
color: var(--input-text-color);
outline: none;
border: var(--input-border);
border-radius: var(--input-border-radius);
background-color: var(--input-background-color);
transition: var(--input-transition);
}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=number],
input[type=tel] {
height: 40px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=number]:focus,
input[type=tel]:focus,
textarea:focus,
input[type=text].focused,
input[type=password].focused,
input[type=email].focused,
input[type=date].focused,
input[type=number].focused,
input[type=tel].focused,
textarea.focused {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=date]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
textarea:disabled {
opacity: .4;
}

input[type=button],
input[type=submit],
button,
.button {
display: inline-flex;
min-height: 48px;
line-height: 1;
padding: 8px 16px;
align-items: center;
justify-content: center;
vertical-align: top;
border: var(--button-border);
border-radius: var(--button-border-radius);
background-color: var(--button-background-color);
color: var(--button-text-color);
font-size: var(--body-font-size);
font-weight: 500;
transition: var(--button-transition);
}

input[type=button].secondary,
input[type=submit].secondary,
button.secondary,
.button.secondary {
background-color: var(--button-secondary-background-color);
}

.button {
text-decoration: none;
}

.link {
display: inline-block;
}

input[type=button]:focus-visible,
input[type=submit]:focus-visible,
button:focus-visible,
.button:focus-visible {
outline: var(--button-outline);
outline-offset: var(--button-outline-offset);
}

input[type=button]:not(:disabled):hover,
input[type=submit]:not(:disabled):hover,
button:not(:disabled):hover,
.button:not(.disabled):hover {
background-color: var(--button-background-color-hover);
color: var(--button-text-color);
cursor: pointer;
}

input[type=button].secondary:not(:disabled):hover,
input[type=submit].secondary:not(:disabled):hover,
button.secondary:not(:disabled):hover,
.button.secondary:not(.disabled):hover {
background-color: var(--button-secondary-background-color-hover);
}

input[type=button]:disabled,
input[type=submit]:disabled,
button:disabled,
.button.disabled {
opacity: 0.4;
cursor: default;
}

input[type=button].sm,
input[type=submit].sm,
button.sm,
.button.sm {
min-height: 32px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 13px;
}

input[type=button].md,
input[type=submit].md,
button.md,
.button.md {
min-height: 40px;
font-size: 14px;
}

input[type=button].lg,
input[type=submit].lg,
button.lg,
.button.lg {
min-height: 64px;
}

input[type=button].xl,
input[type=submit].xl,
button.xl,
.button.xl {
min-height: 88px;
}

input[type=button].icon-button,
input[type=submit].icon-button,
button.icon-button,
.button.icon-button {
padding: 0 8px;
}

input[type=button].icon-button.sm,
input[type=submit].icon-button.sm,
button.icon-button.sm,
.button.icon-button.sm {
padding: 0 4px;
}

input[type=button].icon-button.md,
input[type=submit].icon-button.md,
button.icon-button.md,
.button.icon-button.md {
padding: 0 6px;
}

input[type=button] .icon,
input[type=submit] .icon,
button .icon,
.button .icon,
.link .icon {
width: 20px;
height: 20px;
font-size: 20px;
vertical-align: middle;
overflow: hidden;
flex-shrink: 0;
}

input[type=button].sm .icon,
input[type=submit].sm .icon,
button.sm .icon,
.button.sm .icon {
width: 16px;
height: 16px;
font-size: 16px;
}

input[type=button].md .icon,
input[type=submit].md .icon,
button.md .icon,
.button.md .icon {
width: 18px;
height: 18px;
font-size: 18px;
}

input[type=button].lg .icon,
input[type=submit].lg .icon,
button.lg .icon,
.button.lg .icon {
width: 24px;
height: 24px;
font-size: 24px;
}

input[type=button].xl .icon,
input[type=submit].xl .icon,
button.xl .icon,
.button.xl .icon {
width: 26px;
height: 26px;
font-size: 26px;
}

input[type=button]:not(.icon-button) .icon.left,
input[type=submit]:not(.icon-button) .icon.left,
button:not(.icon-button) .icon.left,
.button:not(.icon-button) .icon.left,
.link .icon.left {
margin-left: -8px;
margin-right: 4px;
}

input[type=button]:not(.icon-button) .icon.right,
input[type=submit]:not(.icon-button) .icon.right,
button:not(.icon-button) .icon.right,
.button:not(.icon-button) .icon.right,
.link .icon.right {
margin-right: -8px;
margin-left: 4px;
}

input[type=button].plain,
input[type=submit].plain,
button.plain,
.button.plain {
color: inherit;
border: none;
background-color: var(--button-plain-background-color);
}

input[type=button].outlined,
input[type=submit].outlined,
button.outlined,
.button.outlined {
color: inherit;
border: var(--button-outlined-border);
background-color: var(--button-outlined-background-color);
}

input[type=button].plain:not(:disabled):hover,
input[type=submit].plain:not(:disabled):hover,
button.plain:not(:disabled):hover,
.button.plain:not(.disabled):hover {
background-color: var(--button-plain-background-color-hover);
color: inherit;
}

input[type=button].outlined:not(:disabled):hover,
input[type=submit].outlined:not(:disabled):hover,
button.outlined:not(:disabled):hover,
.button.outlined:not(.disabled):hover {
background-color: var(--button-outlined-background-color-hover);
color: inherit;
}

.content-toggle .icon {
transition: var(--link-icon-transition);
}

.content-toggle.expanded .icon {
transform: rotate(180deg);
}

/* layout */
#Page {
display: flex;
flex-direction: column;
height: 100%;
}

#Header,
#Footer {
flex-shrink: 0;
}

#Header {
background-color: var(--page-header-background-color);
border-bottom: 2px solid var(--neutral-color-800);
}

.header-content {
max-width: 1140px;
margin: 0 auto;
padding: 16px;
}

.header-content .logo {
float: left;
}

.header-content .logo a {
display: inline-flex;
height: 50px;
align-items: center;
}

.header-content .logo a img {
display: inline-block;
height: 33px;
}

.header-content .details {
float: right;
padding: 10px 12px 0 0;
line-height: 24px;
}

.header-content .details a {
display: inline-block;
font-weight: 500;
text-decoration: none;
}

.header-content .details a {
color: var(--page-header-link-color);
}

.header-content .details a:hover {
color: var(--page-header-link-color-hover);
}

.header-content .details .logout {
float: left;
}

.header-content .details .logout a span {
vertical-align: top;
}

#Footer {
background-color: var(--page-footer-background-color);
color: var(--page-footer-text-color);
}

.footer-content {
max-width: 1140px;
margin: 0 auto;
padding: 24px 16px;
color: var(--page-footer-text-color);
font-size: 14px;
}

.footer-section + .footer-section .footer-content {
border-top: 1px solid var(--page-footer-border-color);
}

.footer-section.copyright .footer-content {
padding-top: 12px;
padding-bottom: 12px;
color: var(--page-footer-copyright-text-color);
font-size: 12px;
}

.footer-content a {
color: var(--page-footer-link-color);
}

.footer-content a:hover {
color: var(--page-footer-link-color-hover);
}

.footer-content .logo {
width: 48px;
}

.footer-content .logo img {
max-width: 40px;
}

.footer-content .contact-box h4 {
margin-bottom: 8px;
font-family: var(--font-family-regular);
font-size: 100%;
font-weight: 400;
color: var(--page-footer-text-color);
text-transform: uppercase;
}

.footer-content .contact-box a {
font-size: 21px;
font-weight: 600;
text-decoration: none;
}

#PageContent {
flex: 1 0 auto;
}

#PageContent .tab-bar {
position: relative;
border-bottom: var(--tab-bar-border);
background-color: var(--tab-bar-item-background-color);
margin-top: -2px;
}

#PageContent .tab-bar::before {
position: absolute;
content: '';
top: 0px;
left: 0px;
right: 0px;
border-top: var(--tab-bar-border);
}

#PageContent .tab-bar-content {
max-width: 1140px;
padding: 0 16px;
margin: 0 auto;
}

#PageContent .tab-bar .tabs > li > a {
border-top: var(--tab-bar-border);
}

#PageContent .tab-bar .dropdown.expanded .dropdown-toggle {
border-top-color: var(--neutral-color-650);
}

#PageContent .main-content {
max-width: 1140px;
padding: 32px 16px;
margin: 0 auto;
}

/* tab bar */
.tab-bar .dropdown .dropdown-toggle {
border: 1px solid transparent;
}

.tab-bar .dropdown.expanded .dropdown-toggle {
background-color: var(--tab-bar-dropdown-toggle-background-color-expanded);
border-top-color: var(--neutral-color-650);
border-right-color: var(--neutral-color-650);
border-left-color: var(--neutral-color-650);
}

.tab-bar .dropdown .dropdown-toggle-content {
position: relative;
padding-left: 30px;
line-height: 54px;
vertical-align: top;
}

.tab-bar .dropdown .dropdown-icon {
position: absolute;
top: 1px;
left: 0;
width: 24px;
height: 24px;
overflow: hidden;
}

.tab-bar .dropdown .dropdown-icon span {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: var(--dropdown-state-transition);
}

.tab-bar .dropdown .dropdown-icon .skeleton {
top: 3px;
width: 22px;
height: 19px;
}

.tab-bar .dropdown .dropdown-text .skeleton {
top: 2px;
}

.tab-bar .dropdown:not(.expanded) .dropdown-icon .close {
visibility: hidden;
opacity: 0;
}

.tab-bar .dropdown.expanded .dropdown-icon .open {
visibility: hidden;
transform: rotate(-45deg);
opacity: 0;
}

.tab-bar .dropdown .dropdown-menu {
position: absolute;
left: -16px;
right: -16px;
min-width: 160px;
border-top: var(--tab-bar-dropdown-menu-item-border);
transform: scaleY(1);
transform-origin: top;
background-color: var(--tab-bar-dropdown-menu-background-color);
text-align: left;
transition: var(--dropdown-state-transition);
opacity: 1;
visibility: visible;
z-index: 5;
}

.tab-bar .dropdown .dropdown-menu li {
border-left: var(--tab-bar-dropdown-menu-item-border);
border-right: var(--tab-bar-dropdown-menu-item-border);
border-bottom: var(--tab-bar-dropdown-menu-item-border);
}

.tab-bar .dropdown .dropdown-menu li.active > a {
color: var(--primary-color);
font-family: var(--font-family-bold);
}

.tab-bar .dropdown:not(.expanded) .dropdown-menu {
transform: scaleY(0.8);
opacity: 0;
visibility: hidden;
}

.tab-bar ul {
list-style: none;
padding: 0;
margin: 0;
}

.tab-bar ul li a {
transition: var(--tab-bar-item-transition);
}

.tab-bar ul li a:hover {
background-color: var(--tab-bar-item-background-color-hover);
}

.tab-bar .dropdown .dropdown-menu li a:hover {
background-color: var(--tab-bar-dropdown-menu-item-background-hover);
}

.tab-bar a {
display: block;
height: 56px;
line-height: 58px;
padding: 0 16px;
color: inherit;
text-decoration: none;
}

.tab-bar a:focus-visible {
outline-offset: -4px;
}

.tab-bar a span {
vertical-align: middle;
}

.tab-bar a span:not(.dropdown-text) {
margin-top: -1px;
margin-right: 4px;
}

.tab-bar .tabs {
display: flex;
position: relative;
height: 56px;
z-index: 4;
flex-wrap: wrap;
padding-right: 80px;
overflow: hidden;
}

.tab-bar .tabs li {
position: relative;
z-index: 1;
}

.tab-bar .tabs li.menu {
position: static;
border-right: 1px solid var(--tab-bar-dropdown-menu-item-border);
border-left: 1px solid var(--tab-bar-dropdown-menu-item-border);
}

.tab-bar .tabs > li:first-child {
margin-left: -16px;
}

.tab-bar .menu {
position: static;
flex-shrink: 0;
}

.tab-bar .menu .dropdown-menu li a {
padding: 0 17px;
padding-left: 45px;
}

.tab-bar .tabs > li {
background-color: var(--tab-bar-item-background-color);
}

.tab-bar .tabs > li > a {
border-bottom: 3px solid transparent;
}

.tab-bar .tabs > li > a::before {
content: '';
position: absolute;
inset: auto 16px 0 16px;
height: 3px;
transition: var(--bg-transition);
}

.tab-bar .tabs > li > a .skeleton {
vertical-align: top;
}

.tab-bar .tabs > li:not(.tabdrop) > a {
text-align: center;
}

.tab-bar .tabs > li.tabdrop > a::before {
inset: auto 16px 0 auto;
width: 72px;
}

/* equal width for regular/active links */
.tab-bar .tabs > li > a::after {
display: block;
content: attr(data-text);
content: attr(data-text) / "";
font-family: var(--font-family-bold);
height: 0;
color: transparent;
overflow: hidden;
visibility: hidden;
user-select: none;
pointer-events: none;
}

.tab-bar .tabs > li.active > a {
color: var(--primary-color);
font-family: var(--font-family-bold);
}

.tab-bar .tabs > li.active > a::before {
background-color: var(--primary-color-400);
}

.tab-bar .tabs .tabdrop {
position: absolute;
top: 0;
left: 0;
right: -16px;
text-align: right;
z-index: 0;
border-right: var(--tab-bar-dropdown-menu-item-border);
}

.tab-bar .tabs .tabdrop.hide {
display: none;
}

.tab-bar .tabs .tabdrop .dropdown-text {
display: inline-block;
min-width: 40px;
text-align: left;
}

.tab-bar .tabs .tabdrop .dropdown-icon .open {
font-size: 32px;
font-weight: 300;
top: -4px;
left: -4px;
}

.tab-bar .tabs .tabdrop .dropdown-menu {
right: -1px;
}

/* page section */
.section {
margin-bottom: 40px;
}

.section:last-of-type {
margin-bottom: 0;
}

.section + .section.no-margin {
margin-top: -40px;
}

.section-items {
margin-top: calc(-0.5 * 1.5rem);
margin-bottom: calc(-0.5 * 1.5rem);
}

.section-items > div {
margin-top: calc(1.5rem * 0.5);
margin-bottom: calc(1.5rem * 0.5);
}

.section-items .section-item {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px;
background-color: var(--section-item-background-color);
border-radius: var(--section-item-border-radius);
border: var(--section-item-border);
line-height: 1.2;
transition: var(--section-item-transition);
}

.section-items .section-item.active {
background-color: var(--section-item-background-color-active);
border: var(--section-item-border-active);
}

.section-items .section-item-status {
display: inline-flex;
padding: 4px 10px;
border-radius: var(--border-all-radius-lg);
background: var(--primary-color-400);
color: #fff;
font-size: 12px;
}

.section-items .section-item-status.secondary {
background: var(--primary-color-700);
color: var(--neutral-color-250);
}

.section-items .section-item-name {
color: inherit;
}

.section-items .section-item-secondary-header {
color: var(--primary-color-400);
}

.section-items .section-item-description {
font-size: 14px;
line-height: 1.1;
color: var(--neutral-color-250);
}

.section-items .section-item-primary-price {
color: var(--primary-color-400);
font-size: calc(1.1rem + 0.6vw);
font-family: var(--font-family-bold);
font-weight: 500;
}

.section-items .section-item button.activate,
.section-items .section-item button.purchase {
min-width: 160px;
}

.content-box {
padding: 8px 0;
}

.content-box.progress-indicator-container {
display: flex;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
min-height: 75px;
}

.content-box input[type=button].plain:not(:disabled):hover,
.content-box input[type=submit].plain:not(:disabled):hover,
.content-box button.plain:not(:disabled):hover,
.content-box .button.plain:not(.disabled):hover {
background-color: var(--content-box-button-plain-background-color-hover);
}

.content-box input[type=button].outlined:not(:disabled):hover,
.content-box input[type=submit].outlined:not(:disabled):hover,
.content-box button.outlined:not(:disabled):hover,
.content-box .button.outlined:not(.disabled):hover {
background-color: var(--content-box-button-outlined-background-color-hover);
}

.content-box .checkbox:not(.disabled):hover input[type=checkbox]:not(:checked) + .icon,
.content-box .radio:not(.disabled):hover input[type=radio]:not(:checked) + .icon {
background-color: var(--content-box-input-icon-background-color-hover);
}

.content-box .variant:not(.active):hover {
background-color: var(--content-box-variant-background-color-hover);
}

.content-box .dropdown.dropdown-default:not(.disabled) .dropdown-toggle:hover {
background-color: var(--content-box-dropdown-toggle-background-color-hover);
}

.content-box .dropdown.dropdown-default.expanded .dropdown-toggle {
border: var(--content-box-dropdown-toggle-border-expanded);
background-color: var(--content-box-dropdown-toggle-background-color-expanded);
}

.content-box .pager {
margin-bottom: -12px;
}

/* form */
.form-row input[type=text],
.form-row input[type=password],
.form-row input[type=email],
.form-row input[type=date],
.form-row input[type=number],
.form-row input[type=tel],
.form-row textarea {
width: 100%;
}

.form-row label:not(.list-inupt),
.form-row .label:not(.list-inupt) {
color: var(--input-label-color);
font-family: var(--font-family-bold);
font-weight: 600;
}

.form-row label {
margin-bottom: 4px;
}

.form-row .variant,
.form-row .radio,
.form-row .checkbox {
margin: 0;
color: inherit;
}

.form-row .validation-message {
min-height: 24px;
}

.form-row .fv-plugins-message-container > div {
padding-top: 6px;
color: var(--input-validation-text-color);
font-size: 16px;
line-height: 1.1;
font-family: var(--font-family-bold);
}

.form-row.invalid input[type=text],
.form-row.invalid input[type=password],
.form-row.invalid input[type=email],
.form-row.invalid input[type=date],
.form-row.invalid input[type=number],
.form-row.invalid input[type=tel],
.form-row.invalid textarea,
.form-row.invalid .dropdown.dropdown-default .dropdown-toggle,
.form-row.invalid .checkbox .icon,
.form-row.invalid .radio .icon,
.form-row.invalid .variant .overlay {
border: var(--input-border-invalid);
}

.checkbox,
.radio,
.variant {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
column-gap: 12px;
}

.checkbox input[type=checkbox],
.radio input[type=radio],
.variant input[type=radio] {
display: none;
}

.checkbox .icon,
.radio .icon {
display: inline-block;
width: 28px;
height: 28px;
border: var(--checkbox-radio-border);
border-radius: var(--checkbox-border-radius);
background-color: #ffffff;
overflow: hidden;
pointer-events: none;
user-select: none;
transition: var(--checkbox-radio-transition);
}

.radio .icon {
border-radius: var(--border-all-radius-lg);
position: relative;
}

.radio .icon::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: var(--border-all-radius-lg);
background: var(--primary-color-300);
top: 5px;
left: 5px;
opacity: 0;
transition: var(--bg-transition);
}

.checkbox .icon span {
opacity: 0;
font-size: 25px;
font-weight: 600;
transition: var(--checkbox-icon-transition);
}

.checkbox.md .icon,
.radio.md .icon {
width: 26px;
height: 26px;
}

.radio.md .icon::after {
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin-left: -7px;
margin-top: -7px;
}

.variant {
height: 100%;
padding: 12px 16px;
line-height: 1.2;
background-color: var(--variant-background-color);
transition: var(--bg-transition);
border-radius: var(--border-all-radius-sm);
}

.variant .icon.indicator {
position: absolute;
top: -10px;
right: -10px;
width: 28px;
height: 28px;
opacity: 0;
z-index: 1;
background-color: var(--primary-color);
border: var(--variant-indicator-border);
border-radius: 50%;
overflow: hidden;
transition: var(--variant-icon-transition);
}

.variant .icon.indicator span {
font-size: 22px;
color: var(--variant-indicator-text-color);
font-weight: 600;
line-height: 26px;
height: 26px;
width: 24px;
text-align: center;
overflow: hidden;
}

.variant .overlay {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--variant-overlay-border-radius);
border: var(--variant-overlay-border);
transition: var(--variant-overlay-transition);
}

.variant .text {
display: flex;
flex-direction: column;
width: 100%;
}

.variant .text .variant-price {
font-family: var(--font-family-bold);
color: var(--primary-color);
}

.variant:not(.active):hover {
background-color: var(--variant-background-color-hover);
color: inherit;
}

.variant.active,
.variant.active:hover {
background-color: var(--variant-background-color-active);
}

.checkbox input[type=checkbox]:checked + .icon {
background-color: var(--primary-color-300);
border-color: var(--primary-color-300);
}

.checkbox input[type=checkbox]:checked + .icon span {
opacity: 1;
color: #ffffff;
}

.radio input[type=radio]:checked + .icon {
border-color: var(--primary-color-300);
}

.radio input[type=radio]:checked + .icon::after {
opacity: 1;
}

.radio.list-inupt input[type=radio]:checked + .icon + .text {
font-weight: 600;
}

.checkbox:not(.disabled):hover input[type=checkbox]:not(:checked) + .icon,
.radio:not(.disabled):hover input[type=radio]:not(:checked) + .icon {
background-color: var(--neutral-color-700);
}

.checkbox.disabled,
.radio.disabled {
cursor: default;
}

.checkbox.disabled .icon,
.checkbox.disabled .text,
.radio.disabled .icon,
.radio.disabled .text {
opacity: 0.5;
}

.variant input[type=radio]:checked + .icon.indicator + .text + .overlay,
.variant.active .overlay {
border-width: 2px;
border-color: var(--primary-color-300);
}

.variant input[type=radio]:checked + .icon.indicator,
.variant.active .icon.indicator {
opacity: 1;
}

.toggle-default {
width: 60px;
height: 28px;
}

.toggle-default .toggle-slide {
width: 60px;
height: 28px;
border-radius: 9999px;
background-color: var(--toggle-slide-background-color);
overflow: hidden;
transition: var(--toggle-transition);
}

.toggle-default:not(.disabled) .toggle-slide:hover {
background-color: var(--toggle-slide-background-color-hover);
}

.toggle-default .toggle-inner {
width: 92px;
}

.toggle-default .toggle-on,
.toggle-default .toggle-off {
height: 28px;
width: 46px;
line-height: 28px;
font-size: 12px;
font-weight: 500;
}

.toggle-default .toggle-on {
text-indent: -8px;
}

.toggle-default .toggle-off {
text-indent: 6px;
margin-left: -14px;
}

.toggle-default .toggle-blob {
position: relative;
height: 28px;
width: 28px;
margin-left: -14px;
z-index: 4;
}

.toggle-default .toggle-blob::after {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
content: '';
border-radius: var(--border-all-radius-lg);
background: var(--toggle-blob-background-color);
}

.toggle-default.active .toggle-slide {
background-color: var(--primary-color-300);
color: var(--toggle-slide-text-color-active);
}

.toggle-default.active:not(.disabled) .toggle-slide:hover {
background-color: var(--primary-color-400);
}

.toggle-default:not(.active) .toggle-inner {
margin-left: -32px;
}

.toggle-default.disabled {
cursor: default;
}

.toggle-default.disabled .toggle-slide {
opacity: 0.5;
}

.dropdown.dropdown-default {
position: relative;
}

.dropdown.dropdown-default .dropdown-toggle {
display: flex;
min-height: 40px;
padding: 5px 0;
align-items: center;
border: var(--dropdown-toggle-border);
border-radius: var(--dropdown-toggle-border-radius);
color: var(--input-text-color);
text-decoration: none;
font-size: var(--input-font-size);
background-color: var(--dropdown-toggle-background-color);
cursor: pointer;
transition: var(--dropdown-toggle-transition);
}

.dropdown.dropdown-default.small .dropdown-toggle {
min-height: 42px;
}

.dropdown.dropdown-default .dropdown-toggle-content {
display: flex;
width: 100%;
height: 100%;
padding: 0 12px;
align-items: center;
justify-content: space-between;
}

.dropdown.dropdown-default .dropdown-icon {
width: 28px;
height: 28px;
margin-left: 8px;
margin-right: -4px;
flex-shrink: 0;
overflow: hidden;
user-select: none;
transition: var(--dropdown-icon-transition);
}

.dropdown.dropdown-default .dropdown-icon.primary {
margin-left: 0;
margin-right: 8px;
}

.dropdown.dropdown-default .dropdown-icon span {
font-size: 28px;
vertical-align: middle;
}

.dropdown.dropdown-default .dropdown-icon.primary span {
font-size: 26px;
font-weight: 300;
}

.dropdown.dropdown-default:not(.disabled):not(.expanded) .dropdown-toggle:hover {
background-color: var(--dropdown-toggle-background-color-hover);
}

.dropdown.dropdown-default.expanded .dropdown-toggle {
border: var(--dropdown-toggle-border-expanded);
background-color: var(--dropdown-toggle-background-color-expanded);
}

.dropdown.dropdown-default.expanded .dropdown-icon:not(.primary) {
transform: rotate(-180deg);
}

.dropdown.dropdown-default .dropdown-menu {
position: absolute;
width: 100%;
max-height: 256px;
margin-top: -1px;
padding: 6px;
background-color: var(--dropdown-menu-background-color);
border: var(--dropdown-menu-border);
border-radius: var(--dropdown-menu-border-radius);
visibility: visible;
overflow-y: auto;
z-index: 5;
opacity: 1;
transform: scaleY(1);
transform-origin: top;
transition: var(--dropdown-state-transition);
}

.dropdown.dropdown-default.position-top .dropdown-menu {
bottom: 47px;
transform-origin: bottom;
}

.dropdown.dropdown-default:not(.expanded) .dropdown-menu {
transform: scaleY(0.8);
opacity: 0;
visibility: hidden;
}

.dropdown.dropdown-default.disabled .dropdown-toggle {
opacity: 0.6;
cursor: default;
}

.dropdown.dropdown-default .dropdown-menu-row {
display: flex;
align-items: center;
margin-top: 6px;
min-height: 40px;
padding: 6px 12px;
font-size: var(--dropdown-menu-row-font-size);
line-height: 1.2;
border: var(--dropdown-menu-row-border); 
border-radius: var(--dropdown-menu-row-border-radius);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: var(--dropdown-row-transition);
}

.dropdown.dropdown-default .dropdown-menu-row:first-of-type {
margin-top: 0;
}

.dropdown.dropdown-default .dropdown-menu-row:not(.active):not(.no-results):hover {
background-color: var(--dropdown-menu-row-background-color-hover);
border: var(--dropdown-menu-row-border-hover);
}

.dropdown.dropdown-default .dropdown-text-container {
display: flex;
align-items: center;
}

.dropdown.dropdown-default .dropdown-text {
display: flex;
line-height: 1;
}

.dropdown.dropdown-default .dropdown-text-label {
padding-right: 4px;
}

.dropdown.dropdown-default .dropdown-menu-row .dropdown-menu-row-label {
font-family: var(--font-family-bold);
padding-right: 4px;
}

.dropdown.dropdown-default .dropdown-text .progress-indicator-container,
.dropdown.dropdown-default .dropdown-menu-row .progress-indicator-container {
display: flex;
justify-content: center;
width: 100%;
}

.dropdown.dropdown-default .dropdown-text .progress-indicator .icon-wrapper span,
.dropdown.dropdown-default .dropdown-menu-row .progress-indicator .icon-wrapper span {
font-size: 24px;
}

.dropdown.dropdown-default .dropdown-menu-row.active {
background-color: var(--dropdown-menu-row-background-color-active);
border: var(--dropdown-menu-row-border-active);
color: var(--dropdown-menu-row-text-color-active);
}

.dropdown.dropdown-default .dropdown-menu-row.no-results {
padding-top: 18px;
padding-bottom: 18px;
text-align: center;
cursor: default;
}

.dropdown.dropdown-default .dropdown-menu-row.no-results > div {
width: 100%;
}

.dropdown.advanced-dropdown .dropdown-menu {
max-height: 324px;
overflow-y: visible;
}

.dropdown.advanced-dropdown .dropdown-menu-content {
display: flex;
flex-direction: column;
height: 100%;
max-height: 310px;
}

.dropdown.advanced-dropdown.products.main-dropdown .dropdown-menu {
max-height: 362px;
}

.dropdown.advanced-dropdown.products.main-dropdown .dropdown-menu-content {
max-height: 348px;
}

.dropdown.advanced-dropdown .dropdown-filters-row {
position: relative;
display: flex;
padding: 6px;
}

.dropdown.advanced-dropdown .dropdown-filters-row:not(.custom) {
margin-top: -6px;
margin-left: -6px;
margin-right: -6px;
column-gap: 8px;
}

.dropdown.advanced-dropdown .dropdown-filters-row:not(.custom)::after {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
clip-path: inset(0 0 -8px 0);
pointer-events: none;
transform: translateZ(0);
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell {
position: relative;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell.query-cell {
width: 50%;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell input[type=text] {
width: 100%;
height: 40px;
padding: 10px 34px 10px 10px;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell input[type=text]:not(:focus) {
border: var(--dropdown-filter-input-border);
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .search {
position: absolute;
top: 7px;
right: 8px;
width: 28px;
height: 28px;
min-height: 0;
padding: 0;
background-color: transparent;
border: none;
color: inherit;
overflow: hidden;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .search:hover {
background-color: var(--dropdown-filter-search-background-color-hover);
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .loading-progress {
visibility: hidden;
position: absolute;
top: 7px;
right: 8px;
width: 28px;
height: 28px;
background-color: var(--dropdown-filter-progress-background-color);
z-index: 1;
pointer-events: none;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .loading-progress .progress-indicator {
width: 100%;
height: 100%;
color: inherit;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .loading-progress .progress-indicator .icon-wrapper {
margin: 0;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .loading-progress .progress-indicator .icon-wrapper span {
font-size: 24px;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .filter-container.enabled input[type=text] {
border-color: var(--primary-color-300);
border-width: 2px;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .filter-container.enabled .search {
color: var(--primary-color);
}

.dropdown.advanced-dropdown .dropdown-menu-rows {
position: relative; /* overflow extra space fix */
overflow-y: auto;
margin-top: 2px;
}

.dropdown.advanced-dropdown .dropdown-menu-rows .dropdown-menu-row:first-of-type {
margin-top: 4px;
}

.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row {
display: grid;
grid-column-gap: 8px;
align-items: center;
padding: 0;
}

.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row.merged-cols {
grid-template-columns: 1fr;
}

.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row > div,
.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row.merged-cols {
padding: 6px 10px;
}

.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row.merged-cols.no-results {
padding-top: 12px;
padding-bottom: 12px;
}

.dropdown.advanced-dropdown.multi-column-dropdown .dropdown-menu-rows .dropdown-menu-row > div > div {
overflow: hidden;
text-overflow: ellipsis;
}

.dropdown.main-dropdown .dropdown-toggle {
min-height: 48px;
}

.dropdown.invoice-accounts .dropdown-menu-rows .dropdown-menu-row {
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
}

.dropdown.products .dropdown-menu-rows .dropdown-menu-row {
grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr) minmax(220px, 2fr);
}

.multi-dropdown {
display: flex;
}

/* flash message */
.flash {
position: relative;
padding: 20px;
margin-bottom: 32px;
border-radius: var(--border-all-radius-sm);
}

.flash:not(.persistent) {
display: none; /* replaced with growl */
}

.flash .icon {
position: absolute;
top: 15px;
display: block;
width: 28px;
height: 28px;
}

.flash .icon span {
font-size: 28px;
}

.flash .message {
margin: 0;
line-height: 1.2;
}

.flash ul {
margin: 0;
padding-left: 24px;
}

.flash ul li {
margin-top: 4px;
}

.flash .icon + .message {
margin-left: 40px;
}

.flash.success {
background-color: var(--success-color-400);
}

.flash.error {
background-color: var(--danger-color-600);
}

.flash.warning {
background-color: var(--warning-color-500);
}

.flash.info {
background-color: var(--primary-color-700);
}

/* system message box */
.system-info-box {
max-width: 1140px;
padding: 16px;
margin: 40px auto 0 auto;
}

.system-info-box-content {
min-height: 16px;
padding: 16px;
background-color: var(--warning-color-500);
border: 2px solid var(--warning-color);
position: relative;
}

.system-info-box-content h1,
.system-info-box-content h2,
.system-info-box-content h3,
.system-info-box-content h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.system-info-box-content h2,
.system-info-box-content h3,
.system-info-box-content h4 {
font-size: 16px;
}

.system-info-box-content p:last-of-type {
margin-bottom: 0;
}

/* notifications */
.growl {
border-radius: var(--border-all-radius-sm);
opacity: 1;
}

.growl.growl-large {
padding: 16px;
}

.growl.growl-large .growl-message {
font-size: 15px;
}

.growl.growl-large .growl-close {
font-size: 22px;
}

.growl.growl-notice {
border: none;
color: var(--body-text-color);
background-color: var(--success-color-400);
}

.growl.growl-error {
border: none;
color: var(--body-text-color);
background-color: var(--danger-color-600);
}

.growl.growl-warning {
border: none;
color: var(--body-text-color);
background-color: var(--warning-color-100);
}

/* chart */
.circular-chart {
display: block;
height: 100%;
}

.chart-circle {
fill: none;
stroke-width: 2.4;
stroke: var(--chart-circle-stroke-color);
}

.chart-bar {
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke: var(--chart-bar-stroke-color);
}

.chart-overlay {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
background: var(--chart-overlay-background-color);
border-radius: 50%;
z-index: -1;
pointer-events: none;
}

/* tip */
.tip {
position: relative;
padding: 24px 24px 24px 64px;
border-radius: var(--tip-border-radius);
background-color: var(--tip-background-color);
line-height: 1.2;
}

.tip.secondary {
background-color: var(--primary-color-850);
}

.tip.sm {
padding: 16px 16px 16px 42px;
}

.tip > .icon {
position: absolute;
top: 20px;
left: 20px;
width: 32px;
height: 32px;
font-size: 32px;
color: var(--tip-icon-color);
overflow: hidden;
}

.tip.sm > .icon {
top: 16px;
left: 12px;
width: 22px;
height: 22px;
font-size: 22px;
}

.tip .errors-list li {
font-size: 1rem;
}

/* skeleton */
.skeleton {
display: block;
position: relative;
overflow: hidden;
cursor: default;
color: transparent;
border-radius: var(--border-all-radius-xs);
}

.skeleton::before {
display: block;
position: absolute;
content: ' ';
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: inherit;
}

.skeleton.inline {
display: inline;
mask-image: -webkit-radial-gradient(white, black);
}

.skeleton.inline::before {
background-color: var(--skeleton-background-color);
}

.skeleton.inline::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--skeleton-background-color);
animation: 2s ease-in-out 0.5s infinite skeleton-pulse;
}

.skeleton.circular {
border-radius: 50%;
}

.skeleton.circular::before,
.skeleton.rectangular::before {
background-color: var(--skeleton-background-color);
animation: 2s ease-in-out 0.5s infinite skeleton-pulse;
}

/* AJAX loading */
.loading-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999998;
background-color: var(--loading-layer-background-color);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
-moz-opacity: 0.01;
-khtml-opacity: 0.01;
opacity: 0.01;
}

.loading-box {
position: fixed;
top: 0;
left: 50%;
padding: 0 10px;
background-color: var(--loading-box-background-color);
z-index: 999999;
border-radius: 0 0 4px 4px;
}

.loading-box div {
display: flex;
align-items: center;
justify-content: center;
color: var(--loading-box-text-color);
padding: 6px 0;
font-weight: 500;
font-size: 14px;
}

.loading-box .icon-wrapper,
.progress-indicator .icon-wrapper {
display: flex;
margin-right: 8px;
align-items: center;
justify-content: center;
overflow: hidden;
}

.loading-box .icon-wrapper {
width: 20px;
}

.loading-box .icon-wrapper span {
animation: 1s rotate infinite;
font-size: 20px;
}

.progress-indicator {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
line-height: 1.1;
color: var(--body-text-color);
}

.progress-indicator .icon-wrapper {
width: 44px;
}

.progress-indicator .icon-wrapper span {
animation: 1s rotate infinite;
font-size: 32px;
}

.progress-indicator.large .icon-wrapper {
width: 76px;
}

.progress-indicator.large .icon-wrapper span {
font-size: 64px;
}

/* jquery */
.ui-autocomplete.filter-autocomplete {
max-width: 100%;
border: var(--autocomplete-filter-border);
}

.ui-dialog .sim-card-type .variant.md .icon {
width: 26px;
height: 26px;
font-size: 26px;
}

.ui-dialog .esim-activation-tip .form-content {
min-height: 64px;
}

.ui-dialog .esim-activation-tip .connection-tip {
font-family: var(--font-family-bold);
}

/* other */
.calendar-container {
position: relative;
}

.calendar-container input[type=text] {
padding-left: 40px;
}

.calendar-container .calendar-icon {
position: absolute;
left: 10px;
top: 10px;
width: 24px;
height: 24px;
overflow: hidden;
color: inherit;
pointer-events: none;
}

.calendar-container .ui-datepicker {
width: 100%;
min-width: 290px;
}

.download-iframe {
height: 1px;
left: -9000px;
position: absolute;
top: -9000px;
width: 1px;
}

/* icons */
.icon.twin-sim {
-webkit-mask-image: url(/img/icons/twin_sim.svg);
mask-image: url(/img/icons/twin_sim.svg);
}

/* pages */
.page-not-found ul {
list-style: none;
}

.login-page .content-box {
padding: 24px;
background-color: var(--neutral-color-800);
border-radius: var(--content-box-border-radius);
border: var(--content-box-border);
}

.login-page button {
min-width: 120px;
}

.customer-page .content-box,
.invoice-account-page .content-box,
.product-page .content-box {
padding: 24px;
background-color: var(--content-box-background-color);
border-radius: var(--content-box-border-radius);
border: var(--content-box-border);
}

.customer-page .content-box .tip,
.invoice-account-page .content-box .tip,
.product-page .content-box .tip {
background-color: transparent;
padding: 0px 0px 0px 44px;
}

.customer-page .content-box .tip > .icon,
.invoice-account-page .content-box .tip > .icon,
.product-page .content-box .tip > .icon {
top: -4px;
left: 0;
}

.customer-page .tab-content.overview .account-overview-line.address {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: center;
padding: 18px 24px;
background-color: var(--content-box-background-color);
border-radius: var(--content-box-border-radius);
border: var(--content-box-border);
}

.customer-page .tab-content.overview .account-overview-line.summary {
padding: 18px 24px;
background-color: var(--content-box-background-color);
border-radius: var(--content-box-border-radius);
border: var(--content-box-border);
}

.customer-page .tab-content.overview .account-overview-line .icon-container {
display: inline-block;
width: 36px;
height: 36px;
line-height: 34px;
border-radius: 50%;
border: 2px solid var(--primary-color);
color: var(--primary-color);
text-align: center;
}

.customer-page .tab-content.overview .account-overview-line .icon-container span {
vertical-align: middle;
font-size: 20px;
margin-top: -4px;
}

.customer-page .tab-content.overview .account-overview-line .icon-container .icon {
display: inline-block;
width: 20px;
height: 20px;
-webkit-mask-size: 20px 20px;
mask-size: 20px 20px;
background-color: var(--primary-color);
}

.customer-page .tab-content.overview .account-overview-line .badge {
display: inline-flex;
height: 24px;
min-width: 24px;
align-items: center;
justify-content: center;
border-radius: var(--border-all-radius-lg);
background: var(--primary-color-500);
color: #ffffff;
font-size: 12px;
font-weight: 500;
}

.customer-page .tab-content.overview .account-overview-line .badge.secondary {
background: var(--warning-color-300);
color: inherit;
}

.customer-page .tab-content.overview .account-overview-line .badge-label {
display: inline-flex;
margin-left: 6px;
font-size: 14px;
}

.customer-page .tab-content.overview .account-overview-line.summary > .header {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: center;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 2px solid var(--primary-color-700);
}

.customer-page .tab-content.overview .account-overview-line.summary > .header .label {
font-weight: 500;
}

.customer-page .tab-content.overview .account-overview-line.summary .row .label {
font-size: 14px;
}

.customer-page .tab-content.overview .account-overview-line.summary .chart {
position: relative;
height: 90px;
width: 90px;
z-index: 1;
}

.customer-page .tab-content.overview .account-overview-line.summary .chart-circle {
stroke: var(--warning-color-300);
}

.customer-page .tab-content.overview .account-overview-line.summary .chart-legend {
position: absolute;
top: 50%;
left: 8px;
right: 8px;
margin-top: -26px;
text-align: center;
}

.customer-page .tab-content.overview .account-overview-line.summary .chart-legend .header,
.customer-page .tab-content.overview .account-overview-line.summary .chart-legend .total {
font-size: 13px;;
}

.customer-page .tab-content.overview .overview-button {
min-width: 200px
}

.invoice-account-page .tab-content.invoices .invoice-status {
padding: 5px 16px 6px 16px;
line-height: 1.2;
border-radius: var(--border-all-radius-lg);
text-align: center;
font-size: 14px;
}

.invoice-account-page .tab-content.invoices .invoice .status-paid {
background: var(--success-color-300);
color: #ffffff;
}

.invoice-account-page .tab-content.invoices .invoice .status-partially-paid {
background: var(--warning-color-100);
color: #ffffff;
}

.invoice-account-page .tab-content.invoices .invoice .status-credited {
background: var(--success-color);
color: #ffffff;
}

.invoice-account-page .tab-content.invoices .invoice .status-unpaid {
background: var(--danger-color-500);
color: #ffffff;
}

.invoice-account-page .tab-content.invoices .invoice .status-cancelled {
background: var(--danger-color-600);
color: #ffffff;
}

.invoice-account-page .tab-content.invoices .last-invoice .invoice-status {
margin-bottom: .75rem;
}

.invoice-account-page .tab-content.invoices .last-invoice .invoice-amount {
color: var(--primary-color-400);
font-size: calc(1.375rem + 1.5vw);
font-family: var(--font-family-bold);
font-weight: 500;
}

.invoice-account-page .tab-content.invoices .section-items {
margin-bottom: 0;
}

.invoice-account-page .tab-content.invoices .section-items > .col {
margin-bottom: 0;
}

.invoice-account-page .tab-content.invoices .section-items .invoice-number {
min-width: 110px;
}

.invoice-account-page .tab-content.invoices .section-items .invoice-amount {
min-width: 130px;
}

.invoice-account-page .tab-content.invoices .section-items .invoice-period,
.invoice-account-page .tab-content.invoices .section-items .invoice-due-date {
min-width: 120px;
}

.invoice-account-page .tab-content.invoices .section-items .invoice-status {
min-width: 115px;
}

.invoice-account-page .tab-content.invoices .invoice b {
font-family: var(--font-family-bold);
font-weight: 700;
}

.product-page .multi-dropdown .invoice-accounts {
flex: 0 0 30%;
}

.product-page .multi-dropdown .dropdown.products {
flex-grow: 1;
margin-left: -1px;
}

.product-page .multi-dropdown .dropdown .dropdown-toggle {
height: 100%;
}

.product-page .multi-dropdown .dropdown.invoice-accounts .dropdown-toggle {
background-color: var(--neutral-color-750);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.product-page .multi-dropdown .dropdown.products .dropdown-toggle {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.product-page .multi-dropdown .dropdown.invoice-accounts:not(.disabled):not(.expanded) .dropdown-toggle:hover {
background-color: #ffffff;
}

.product-page .multi-dropdown .dropdown.invoice-accounts .dropdown-menu-rows .dropdown-menu-row {
grid-template-columns: minmax(0, 1fr);
}

.product-page .multi-dropdown .dropdown.invoice-accounts .dropdown-filters-row .user-cell,
.product-page .multi-dropdown .dropdown.invoice-accounts .dropdown-menu-row .user-cell {
display: none;
}

.product-page .tab-content.consumption .swiper-slide {
width: 56%;
height: 100%;
min-width: 170px;
display: flex;
flex-direction: column;
align-items: center;
}

.product-page .tab-content.consumption .swiper:not(.swiper-initialized) .swiper-wrapper {
transform: translate3d(22%, 0px, 0px);
}

.product-page .tab-content.consumption .swiper.swiper-initialized .chart-label {
opacity: 0;
transition: opacity 0.2s;
}

.product-page .tab-content.consumption .swiper.swiper-initialized .swiper-slide-active .chart-label {
opacity: 1;
}

.product-page .tab-content.consumption .chart-label {
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
font-family: var(--font-family-bold);
}

.product-page .tab-content.consumption .chart {
position: relative;
height: 170px;
width: 170px;
margin: 0 auto 17px;
}

.product-page .tab-content.consumption .single .chart {
margin-top: 12px;
}

.product-page .tab-content.consumption .chart-legend {
position: absolute;
top: 50%;
left: 10px;
right: 10px;
margin-top: -41px;
text-align: center;
}

.product-page .tab-content.consumption .chart-legend .header {
font-family: var(--font-family-bold);
}

.product-page .tab-content.consumption .chart-legend .used {
font-family: var(--font-family-bold);
font-size: 28px;
}

.product-page .tab-content.consumption .chart-legend .used .unit {
font-family: var(--font-family-bold);
vertical-align: middle;
}

.product-page .tab-content.consumption .chart-legend .size {
font-family: var(--font-family-bold);
}

.product-page .tab-content.consumption .chart-details {
min-height: 60px;
text-align: center;
}

.product-page .tab-content.consumption .multiple .chart-details {
margin-bottom: 16px;
}

.product-page .tab-content.consumption .chart-details span {
display: block;
}

.product-page .tab-content.consumption .usage-summary-header {
font-family: var(--font-family-bold);
font-weight: 600;
margin-top: 16px;
margin-bottom: 4px;
}

.product-page .tab-content.consumption .usage-summary-header:first-of-type {
margin-top: 0;
}

.product-page .tab-content.consumption .usage-summary-line {
background-color: #ffffff;
padding: 12px;
border-radius: var(--border-all-radius-md);
}

.product-page .tab-content.consumption .usage-summary-line.desktop {
display: grid;
grid-template-columns: 36px 1fr 1fr 1fr;
gap: 14px;
align-items: center;
}

.product-page .tab-content.consumption .usage-summary-line.desktop .icon-container {
display: inline-block;
width: 36px;
height: 36px;
line-height: 34px;
border-radius: 50%;
border: 2px solid var(--primary-color);
color: var(--primary-color);
text-align: center;
}

.product-page .tab-content.consumption .usage-summary-line.desktop .icon-container span {
vertical-align: middle;
font-size: 20px;
margin-top: -3px;
}

.product-page .tab-content.consumption .usage-summary-line.desktop .icon-container .md {
font-size: 22px;
font-weight: 300;
}

.product-page .tab-content.consumption .usage-summary-line.desktop .usage-summary-column.label span,
.product-page .tab-content.consumption .usage-summary-line.desktop .usage-summary-column.value span {
display: block;
}

.product-page .tab-content.consumption .usage-summary-line .usage-summary-column.value {
font-family: var(--font-family-bold);
font-weight: 600;
}

.product-page .tab-content.consumption .usage-summary-column .over-usage {
color: var(--danger-color);
}

.product-page .tab-content.sim-cards .sim-card .header {
min-height: 40px;
}

.product-page .tab-content.sim-cards .sim-card .dropdown {
min-width: 215px;
}

.product-page .tab-content.sim-cards .sim-card .details {
margin-top: -12px;
}

.product-page .tab-content.sim-cards .sim-card .details-content .col-label {
font-family: var(--font-family-bold);
min-width: 90px;
}

.product-page .tab-content.sim-cards .sim-card .sim-card-status {
display: inline-flex;
padding: 4px 10px;
border-radius: var(--border-all-radius-lg);
background: var(--primary-color-400);
color: #fff;
font-size: 12px;
}

.product-page .tab-content.sim-cards .sim-card .sim-card-status.blocked {
color: var(--danger-color-300);
background: var(--danger-color-700);
}

.product-page .tab-content.sim-cards .sim-card .image img {
max-width: 150px;
max-height: 150px;
}

.product-page .tab-content.sim-cards .sim-card .esim-description ol li {
margin-bottom: 4px;
}

.product-page .tab-content.sim-cards .new-sim-card .sim-card-details {
min-width: 220px;
}

.product-page .tab-content.sim-cards .new-sim-card .sim-card-details button {
width: 100%;
}

.product-page .tab-content.extra-packages .section {
margin-bottom: 64px;
}

.product-page .tab-content.extra-packages .section:last-of-type {
margin-bottom: 0;
}

.product-page .tab-content.services .section-item .dropdown-menu {
min-width: 240px;
right: 0;
}

.product-page .tab-content.services .section-items .section-item .section-item-secondary-header .icon {
width: 28px;
height: 28px;
margin-top: -4px;
font-size: 28px;
vertical-align: middle;
overflow: hidden;
}

.product-page .tab-content.services .section-items .section-item-description .icon {
width: 24px;
height: 24px;
font-size: 24px;
margin-top: -4px;
vertical-align: middle;
overflow: hidden;
}

.product-page .tab-content.product-offering .section-items .section-item.active h3 .icon {
width: 32px;
height: 30px;
margin-top: -4px;
font-size: 30px;
vertical-align: middle;
overflow: hidden;
font-weight: 500;
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes skeleton-pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
		background: var(--skeleton-pulse-background-color);
	}
	100% {
		opacity: 1;
	}
}

@keyframes skeleton-pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
		background: var(--skeleton-pulse-background-color);
	}
	100% {
		opacity: 1;
	}
}

@media (max-width: 991px) {
	.product-page .multi-dropdown .dropdown.products .dropdown-menu-rows .dropdown-menu-row:not(.merged-cols) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	
	.product-page .multi-dropdown .dropdown.products .dropdown-filters-row .product-offering-cell,
	.product-page .multi-dropdown .dropdown.products .dropdown-menu-row .product-offering-cell {
	display: none;
	}
	
	.invoice-account-page .tab-content.invoices .section-items .invoice-details .col > div {
	display: inline-block;
	}
	
	.invoice-account-page .tab-content.invoices .section-items .invoice-details .col > div:first-child {
	min-width: 120px;
	}
}

@media (max-width: 767px) {
	.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell.query-cell {
	width: 100%;
	}
	
	.stepper li:not(.current) .step-name {
	width: 32px;
	overflow: hidden;
	height: 32px;
	}
	
	.content-box {
	padding: 16px;
	}
	
	.content-box .tabs {
	margin: -16px -16px 0 -16px;
	padding: 0 16px 0 16px;
	}
	
	.listing-action {
	line-height: 1.1;
	}
	
	.product-page .multi-dropdown .dropdown.invoice-accounts {
	flex-basis: 40%;
	}
	
	.product-page .multi-dropdown .dropdown.products {
	flex-basis: 60%;
	}
	
	.product-page .single-dropdown .dropdown.products .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	
	.product-page .single-dropdown .dropdown.products .dropdown-filters-row .product-offering-cell,
	.product-page .single-dropdown .dropdown.products .dropdown-menu-row .product-offering-cell {
	display: none;
	}
}

@media (min-width: 576px) {
	input[type=button].sm-xl,
	input[type=submit].sm-xl,
	button.sm-xl,
	.button.sm-xl {
	min-height: 88px;
	}
}

@media (max-width: 575px) {
	.tip {
	padding: 16px;
	}
	
	.tip:not(.sm) > .icon {
	display: none;
	}
	
	.stepper li {
	font-size: 16px;
	}
	
	.ui-dialog .ui-dialog-title,
	.ui-dialog.ui-dialog-reduced-title .ui-dialog-titlebar {
	white-space: normal;
	font-size: 22px;
	line-height: 1;
	}
	
	.customer-page .tab-content.overview .account-overview-line.address .account-overview-column.value {
	font-size: 15px;
	}
	
	.customer-page .tab-content.overview .overview-button {
	width: 100%;
	}
	
	.product-page .multi-dropdown {
	flex-direction: column;
	}
	
	.product-page .multi-dropdown .dropdown.invoice-accounts {
	flex: 0;
	margin-bottom: 8px;
	}
	
	.product-page .multi-dropdown .dropdown.products {
	flex: 0;
	}
	
	.product-page .multi-dropdown .dropdown.invoice-accounts .dropdown-toggle,
	.product-page .multi-dropdown .dropdown.products .dropdown-toggle {
	border-radius: var(--dropdown-toggle-border-radius);
	}
}

@media (max-width: 480px) {
	.ui-dialog .maximized-form .form-content {
	bottom: 120px;
	}
	
	.ui-dialog:not(.ui-confirm-changes-dialog) .ui-dialog-buttonpane button {
	width: 100%;
	}
	
	.ui-dialog:not(.ui-confirm-changes-dialog) .ui-dialog-buttonpane button.btn-cancel,
	.ui-dialog:not(.ui-confirm-changes-dialog) .ui-dialog-buttonpane button.btn-cancel:hover {
	margin-left: 0;
	margin-top: 16px;
	}
	
	.ui-dialog.ui-confirm-changes-dialog .ui-dialog-buttonpane button {
	min-width: 80px;
	}
}

@media (max-width: 420px) {
	.content-box .tabs li {
	flex-grow: 1;
	}
	
	.content-box .tabs li a,
	.content-box .tabs li label {
	height: 48px;
	line-height: 50px;
	}
	
	.invoice-account-page .dropdown.invoice-accounts .dropdown-menu-rows .dropdown-menu-row:not(.merged-cols),
	.product-page .multi-dropdown .dropdown.products .dropdown-menu-rows .dropdown-menu-row:not(.merged-cols),
	.product-page .single-dropdown .dropdown.products .dropdown-menu-rows .dropdown-menu-row:not(.merged-cols) {
	grid-template-columns: minmax(0, 1fr);
	}
	
	.invoice-account-page .dropdown.invoice-accounts .dropdown-filters-row .user-cell,
	.invoice-account-page .dropdown.invoice-accounts .dropdown-menu-row .user-cell,
	.product-page .dropdown.products .dropdown-filters-row .user-cell,
	.product-page .dropdown.products .dropdown-menu-row .user-cell {
	display: none;
	}
}