:root {
--font-family-regular: 'Source Sans 3';
--font-family-bold: 'Source Sans 3';

--primary-color: #749953;
--primary-color-100: #8ec152;
--primary-color-200: #95c65d;
--primary-color-400: #b0c925;
--primary-color-500: #bbd97b;
--primary-color-700: #eef4de;
--primary-color-800: #f5f8eb;
--primary-color-900: #fcfdfa;

--secondary-color: #121037;
--secondary-color-300: #1e1c41;
--secondary-color-500: #3a3859;
--secondary-color-700: #7f8795;
--secondary-color-900: #bec2c9;
--secondary-color-950: #dee0e3;

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

--neutral-color: #232323;
--neutral-color-100: #2d3940;
--neutral-color-150: #3f3f3f;
--neutral-color-300: #c5c5c5;
--neutral-color-400: #d2d7e0;
--neutral-color-500: #e0e0e0;
--neutral-color-550: #e5e5e5;
--neutral-color-650: #ececec;
--neutral-color-700: #eeeeee;
--neutral-color-750: #f2f2f2;
--neutral-color-800: #f4f4f4;
--neutral-color-850: #f8f8f8;
--neutral-color-900: #fafafa;
--neutral-color-950: #fefefe;

--warning-color: #ffc200;
--warning-color-100: #ffd315;
--warning-color-300: #f4d76e;
--warning-color-500: #fff3cd;

--accordion-background-color: #ffffff;
--accordion-background-color-hover: var(--neutral-color-900);
--accordion-background-color-active: var(--neutral-color-800);
--accordion-background-color-exception: var(--danger-color-800);
--accordion-background-color-exception-hover: var(--danger-color-700);
--accordion-border: 1px solid var(--secondary-color-700);
--accordion-border-active: 1px solid var(--neutral-color-100);
--accordion-border-radius: var(--border-all-radius-sm);
--accordion-content-border: 1px solid var(--neutral-color-100);

--autocomplete-filter-border: 1px solid var(--secondary-color-900);
--autocomplete-menu-background-color-active: var(--primary-color-700);
--autocomplete-menu-border-active: none;

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

--body-background-color: #ffffff;
--body-font-family: var(--font-family-regular);
--body-font-size: 1rem;
--body-text-color: #000000;

--border-radius-sm: 6px;
--border-radius-md: 12px;
--border-radius-lg: 50px;
--border-all-radius-sm: 6px;
--border-all-radius-md: 12px;
--border-all-radius-lg: 50px;

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

--button-outlined-border: 1px solid var(--secondary-color-700);
--button-outlined-background-color: #ffffff;
--button-outlined-background-color-hover: var(--neutral-color-850);
--button-plain-background-color: transparent;
--button-plain-background-color-hover: var(--neutral-color-750);

--chart-circle-stroke-color: var(--neutral-color-700);

--checkbox-icon-background-color-checked: var(--secondary-color);
--checkbox-icon-text-color-checked: #ffffff;
--checkbox-icon-transition: opacity .3s, color .3s;
--checkbox-radio-icon-border: 2px solid var(--secondary-color-900);
--checkbox-radio-icon-border-checked: 2px solid var(--secondary-color);
--checkbox-radio-icon-background-color: #ffffff;
--checkbox-radio-icon-background-color-hover: var(--neutral-color-850);
--checkbox-radio-icon-background-color-checked: var(--secondary-color);
--checkbox-radio-transition: background-color .3s, border-color .3s;

--content-box-background-color: var(--neutral-color-850);
--content-box-border: none;
--content-box-border-secondary: 1px solid var(--secondary-color-950);
--content-box-border-radius: var(--border-all-radius-md);
--content-box-button-outlined-background-color-hover: var(--neutral-color-900);
--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(--secondary-color-950);
--datepicker-border-hover: 1px solid var(--secondary-color-950);
--datepicker-border-highlight: 1px solid var(--secondary-color-900);
--datepicker-border-active: 1px solid var(--secondary-color-700);
--datepicker-border-unselectable: 1px solid #ffffff;
--datepicker-background-color: #ffffff;
--datepicker-background-color-hover: var(--primary-color-700);
--datepicker-background-color-highlight: var(--primary-color-800);
--datepicker-background-color-active: var(--primary-color-200);
--datepicker-background-color-unselectable: #ffffff;
--datepicker-background-color-today: var(--neutral-color-650);
--datepicker-button-secondary-background-color-hover: var(--neutral-color-900);
--datepicker-header-border: 1px solid var(--secondary-color-300);
--datepicker-header-background-color: var(--secondary-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(--secondary-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-highlight: var(--secondary-color);
--datepicker-text-color-active: #ffffff;
--datepicker-text-color-unselectable: var(--neutral-color-300);

--dialog-titlebar-text-color: var(--secondary-color);
--dialog-titlebar-close-background-color-hover: var(--neutral-color-750);

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

--heading-font-family: var(--font-family-regular);
--heading-font-weight: 600;
--heading-text-color: var(--secondary-color);

--input-background-color: #ffffff;
--input-border: 1px solid #000000;
--input-border-invalid: 1px solid var(--danger-color-300);
--input-border-radius: var(--border-all-radius-sm);
--input-font-size: 16px;
--input-text-color: var(--neutral-color-150);
--input-label-color: var(--secondary-color);
--input-transition: color .3s, border .3s, background-color .3s, opacity .3s, box-shadow .3s;
--input-validation-text-color: var(--danger-color-300);

--link-outline: 2px solid var(--neutral-color-100);
--link-outline-offset: 4px;
--link-color: var(--secondary-color-500);
--link-color-hover: var(--primary-color-100);
--link-transition: color .3s;

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

--overview-bar-item-background-color: #ffffff;
--overview-bar-item-background-color-hover: var(--primary-color-700);
--overview-bar-item-border: 1px solid var(--secondary-color-700);
--overview-bar-item-link-color: #ffffff;

--page-header-background-color: #ffffff;
--page-header-link-color: var(--link-color);
--page-header-link-color-hover: var(--link-color-hover);
--page-footer-background-color: var(--secondary-color);
--page-footer-text-color: #ffffff;
--page-footer-link-color: #ffffff;
--page-footer-link-color-hover: var(--primary-color-100);

--pager-link-background-color: transparent;
--pager-link-background-color-hover: #ffffff;
--pager-link-background-color-disabled: var(--neutral-color-950);
--pager-link-background-color-current: var(--secondary-color-300);
--pager-link-border: 1px solid var(--secondary-color-900);
--pager-link-border-radius: var(--border-all-radius-lg);
--pager-link-border-current: 1px solid var(--secondary-color);
--pager-link-text-color-current: #ffffff;
--pager-link-transition: background-color .3s, color .3s;

--radial-progress-background-color: var(--primary-color-700);
--radial-progress-bar-background-color: var(--neutral-color-700);
--radial-progress-bar-fill-color: var(--secondary-color);

--section-item-background-color: transparent;
--section-item-background-color-active: var(--primary-color-900);
--section-item-border: 1px solid var(--secondary-color-700);
--section-item-border-radius: var(--border-all-radius-md);
--section-item-activate-button-border-hover: 1px solid var(--primary-color-200);
--section-item-border-active: 1px solid var(--primary-color);
--section-item-activate-button-border: 1px solid var(--secondary-color-700);
--section-item-activate-button-background-color: #ffffff;
--section-item-activate-button-background-color-hover: var(--primary-color-100);

--stepper-line-border: 2px solid var(--neutral-color-400);
--stepper-indicator-background-color: var(--neutral-color-750);
--stepper-indicator-text-active: #ffffff;

--swiper-theme-color: var(--secondary-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-500);
--swiper-pagination-bullet-inactive-opacity: 1;

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

--table-border: 1px solid var(--secondary-color-950);
--table-filter-search-background-color-hover: var(--neutral-color-750);
--table-filter-progress-background-color: #ffffff;
--table-cell-background-color-selected: var(--primary-color-700);

--tip-background-color: var(--primary-color-800);
--tip-icon-color: #000000;

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

--variant-background-color: #ffffff;
--variant-background-color-hover: var(--neutral-color-750);
--variant-background-color-active: var(--primary-color-700);
--variant-icon-transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
--variant-indicator-border: 2px solid var(--primary-color-100);
--variant-indicator-text-color: var(--primary-color-700);
--variant-overlay-border: 1px solid var(--secondary-color-950);
--variant-overlay-transition: border-color .3s;

--widget-content-border: 1px solid var(--neutral-color-100);
--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);
}

h4, h5, h6 {
font-family: var(--font-family-bold);
}

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);
}

p span a {
font-family: var(--font-family-regular);
}
	
input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=number],
input[type=tel],
textarea {
padding: 16px;
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: 42px;
}

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: 42px;
line-height: 1;
padding: 8px 20px;
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: 600;
text-transform: uppercase;
transition: var(--button-transition);
}

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

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

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

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

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,
input[type=submit] .icon,
button .icon,
.button .icon,
.link .icon {
width: 28px;
height: 28px;
font-size: 28px;
vertical-align: middle;
overflow: hidden;
flex-shrink: 0;
}

.link .icon {
width: 24px;
height: 24px;
font-size: 24px;
}

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

input[type=button].md .icon,
input[type=submit].md .icon,
button.md .icon,
.button.md .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: 2px;
}

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: 2px;
}

input[type=button].plain,
input[type=submit].plain,
button.plain,
.button.plain {
color: inherit;
background-color: transparent;
}

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);
}

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);
}

.link.content-toggle .icon {
user-select: none;
transition: var(--dropdown-icon-transition);
}

.link.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);
box-shadow: 5px 5px 16px -5px rgba(0,0,0,0.48);
}

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

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

.header-content .logo a {
display: inline-block;
height: 52px;
line-height: 52px;
}

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

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

.header-content .details a {
display: inline-block;
font-weight: 500;
text-decoration: none;
color: var(--page-header-link-color);
}

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

.header-content .details .my-profile {
float: left;
padding-right: 32px;
}

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

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

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

.footer-section + .footer-section {
background-color: var(--secondary-color-300);
}

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

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

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

.footer-content .logo {
margin-right: 48px;
}

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

.footer-content .contact-box h4 {
margin-bottom: 2px;
font-size: 20px;
font-weight: 300;
color: var(--page-footer-text-color);
}

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

.footer-content .contact-box .icon {
display: flex;
width: 56px;
height: 56px;
justify-content: center;
align-items: center;
border: 1px solid var(--primary-color-400);
border-radius: var(--border-all-radius-lg);
}

.footer-content .contact-box .icon span {
width: 32px;
height: 32px;
font-size: 32px;
font-weight: 200;
overflow: hidden;
}

.footer-content .links {
text-align: right;
}

#PageContent {
flex: 1 0 auto;
}

#PageContent .tab-bar {
border-top: var(--tab-bar-border);
border-bottom: var(--tab-bar-border);
background-color: var(--tab-bar-item-background-color);
}

#PageContent .tab-bar.tabdrop-expanded .dropdown .dropdown-toggle {
border-top-color: var(--secondary-color-900);
}

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

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

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

/* tab bar */
.tab-bar {
position: relative;
}

.tab-bar .dropdown .dropdown-toggle {
border: 1px solid transparent;
border-top: var(--tab-bar-border);
height: 57px;
margin-top: -1px;
}

.tab-bar .dropdown .dropdown-toggle:hover {
border-left-color: var(--tab-bar-item-background-color);
border-right-color: var(--tab-bar-item-background-color);
}

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

.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: 1px;
left: 0;
opacity: 1;
transition: var(--dropdown-state-transition);
}

.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: 0;
right: 0;
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(--secondary-color);
font-family: var(--font-family-bold);
font-weight: 600;
}

.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: background-color .3s, border-color .3s;
}

.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-color-hover);
}

.tab-bar a {
display: block;
height: 56px;
line-height: 58px;
font-weight: 500;
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-left: 16px;
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;
border-radius: 3px 3px 0 0;
height: 3px;
transition: var(--bg-transition);
}

.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);
font-weight: 600;
height: 0;
color: transparent;
overflow: hidden;
visibility: hidden;
user-select: none;
pointer-events: none;
}

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

.tab-bar .tabs > li.active > a::before {
background-color: var(--secondary-color);
}
	
.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;
top: -3px;
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: background-color .3s, border-color .3s;
}

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

.section-items .section-item-status {
color: var(--primary-color-100);
font-weight: 500;
}

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

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

.section-items .section-item-description {
font-size: 15px;
line-height: 1.1;
}

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

.section-items .section-item button.activate {
min-width: 120px;
}

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

.section-items .section-item.active button.activate:not(:disabled):hover {
border: var(--section-item-activate-button-border-hover);
background-color: var(--section-item-activate-button-background-color-hover);
}

.section-items .section-custom-item-row-label {
font-family: var(--font-family-bold);
font-weight: 600;
}

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

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

.content-box .tabs {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: -24px -24px 0 -24px;
padding: 0 24px 0 24px;
border-bottom: var(--content-box-border);
}

.content-box .tabs li {
text-align: center;
max-width: 100%;
}

.content-box .tabs li a,
.content-box .tabs li label {
position: relative;
display: block;
height: 64px;
line-height: 68px;
margin: 0;
padding: 0 16px;
font-family: var(--font-family-regular);
font-weight: 500;
color: inherit;
cursor: pointer;
transition: var(--tab-transition);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.content-box .tabs li a::before,
.content-box .tabs li label::before {
content: '';
position: absolute;
inset: auto 16px 0 16px;
border-radius: 3px 3px 0 0;
height: 3px;
transition: var(--bg-transition);
}

.content-box .tabs.secondary {
margin: 0;
padding: 0;
border-bottom: var(--content-box-border-secondary);
}

.content-box .tabs.secondary li a::before,
.content-box .tabs.secondary li label::before {
inset: auto 0 0;
border-radius: 0;
}

.content-box .tabs li label input {
display: none;
}

.content-box .tabs li a:hover,
.content-box .tabs li label:hover {
background-color: var(--tab-bar-item-background-color-hover);
}

.content-box .tabs li.active a,
.content-box .tabs li.active label {
color: var(--secondary-color);
}

.content-box .tabs li.active a::before,
.content-box .tabs li.active label::before {
background-color: var(--secondary-color);
}

.content-box .tip {
background-color: var(--primary-color-500);
}

.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(.expanded):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,
.form-row .label {
color: var(--input-label-color);
margin-bottom: 4px;
font-family: var(--font-family-bold);
font-weight: 600;
}

.form-row .variant,
.form-row .radio,
.form-row .checkbox {
font-family: var(--font-family-regular);
font-weight: 400;
color: inherit;
margin: 0;
}

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

.form-row .col-label {
align-self: center;
}

.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;
}

.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;
border-radius: var(--border-all-radius-md);
}

.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-icon-border);
border-radius: var(--border-all-radius-sm);
background-color: var(--checkbox-radio-icon-background-color);
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(--secondary-color);
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);
}

.variant .icon.indicator {
position: absolute;
top: -10px;
right: -10px;
width: 28px;
height: 28px;
opacity: 0;
z-index: 1;
background-color: var(--primary-color-100);
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(--border-all-radius-md);
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);
font-weight: 600;
color: var(--secondary-color);
}

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

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

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

.checkbox input[type=checkbox]:checked + .icon span {
opacity: 1;
color: var(--checkbox-icon-text-color-checked);
}

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

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

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

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

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

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

.variant input[type=radio]:checked + .icon.indicator + .text + .overlay,
.variant.active .overlay {
border-width: 2px;
border-color: var(--primary-color-100);
}
	
.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;
}

.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(--secondary-color);
color: var(--toggle-slide-text-color-active);
}

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

.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: 42px;
padding: 6px 0;
align-items: center;
border: var(--dropdown-toggle-border);
border-radius: var(--dropdown-toggle-border-radius);
color: inherit;
text-decoration: none;
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 span {
margin-top: 1px;
font-size: 28px;
vertical-align: middle;
}

.dropdown.dropdown-default:not(.expanded):not(.disabled) .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 {
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;
line-height: 1;
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 {
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);
font-weight: 600;
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;
justify-content: center;
cursor: default;
}

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

.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.subscriptions.main-dropdown .dropdown-menu {
max-height: 362px;
}

.dropdown.advanced-dropdown.subscriptions.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;
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-100);
border-width: 2px;
}

.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell .filter-container.enabled .search {
color: var(--primary-color-100);
}
	
.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 {
border: var(--dropdown-toggle-border-primary);
}

.dropdown.billing-groups .dropdown-menu-rows .dropdown-menu-row {
grid-template-columns: minmax(180px, 1fr) minmax(0, 5fr) minmax(0, 4fr) minmax(170px, 1fr);
}

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

/* stepper */
.stepper {
display: flex;
margin: 0;
padding: 0;
}

.stepper li {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 18px;
}

.stepper li.vertical {
flex-direction: column;
flex: 1;
}

.stepper li:not(.vertical):not(:last-child) {
flex: auto;
}

.stepper li::after {
content: '';
display: block;
height: 1px;
border-bottom: var(--stepper-line-border);
flex: 1 1 0%;
margin-inline-start: 0;
margin-inline-end: 0.5rem;
z-index: 0;
}

.stepper li.vertical::after {
position: absolute;
top: 14px;
left: calc(50% + 24px);
width: calc(100% - 48px);
}

.stepper li.vertical:last-child::after {
display: none;
}

.stepper .step-indicator {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
padding-top: 1px;
border-radius: 50%;
background-color: var(--stepper-indicator-background-color);
}

.stepper .step-name {
display: flex;
align-items: center;
height: 100%;
margin-left: -40px;
padding-left: 40px;
line-height: 1.1;
}

.stepper li.vertical .step-name {
text-align: center;
}

.stepper a {
text-decoration: none;
color: inherit;
}

.stepper .current .step-indicator,
.stepper .completed .step-indicator {
background: var(--primary-color-100);
color: var(--stepper-indicator-text-active);
}

.stepper .completed .step-indicator .icon {
width: 24px;
height: 24px;
overflow: hidden;
}

.stepper .completed .step-name {
font-family: var(--font-family-bold);
font-weight: 600;
}

/* table */
.table-container.limited {
overflow-y: auto;
}

table.listing {
width: 100%;
}

table.listing th {
text-align: left;
vertical-align: middle;
}

table.listing tr:not(.filter-header) th {
font-family: var(--font-family-bold);
font-weight: 600;
}

table.listing .filter-header th {
font-weight: normal;
}

table.listing td,
table.listing th {
padding: 10px 12px;
border-bottom: var(--table-border);
line-height: 1.2;
}

table.listing td:first-child,
table.listing th:first-child {
padding-left: 0;
}

table.listing td:last-child,
table.listing th:last-child {
padding-right: 0;
}

table.listing tfoot td {
border-bottom: none;
}

table.listing th.sortable a {
position: relative;
display: inline-block;
color: inherit;
}

table.listing th.sortable a:hover {
color: var(--secondary-color);
}

table.listing th.sortable a span {
display: none;
}

table.listing th.sorted a {
padding-right: 28px;
}

table.listing th.sorted a span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 18px;
font-size: 32px;
line-height: 18px;
overflow: hidden;
}

table.listing th.sorted.asc a span {
transform: rotateZ(180deg);
}

table.listing .filter-header .filter-container {
position: relative;
}

table.listing .filter-header input[type=text] {
width: 100%;
height: 40px;
padding: 10px 34px 10px 10px;
}

table.listing .filter-header .search {
position: absolute;
top: 7px;
right: 8px;
width: 28px;
height: 28px;
min-height: 0;
padding: 0;
background-color: transparent;
color: inherit;
}

table.listing .filter-header .search:hover {
background-color: var(--table-filter-search-background-color-hover);
}

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

table.listing .filter-header .loading-progress .progress-indicator {
width: 100%;
height: 100%;
color: inherit;
}

table.listing .filter-header .loading-progress .progress-indicator .icon-wrapper {
margin: 0;
}

table.listing .filter-header .loading-progress .progress-indicator .icon-wrapper span {
font-size: 24px;
}

table.listing .filter-header .filter-container.enabled input[type=text] {
border-color: var(--secondary-color);
border-width: 2px;
}

table.listing .filter-header .filter-container.enabled .search {
color: var(--secondary-color);
}

table.listing .cell-select-row {
width: 22px;
text-align: center;
padding-left: 12px !important;
}

table.listing .empty-results td {
height: 80px;
text-align: center;
}

table.overview .cell-amount {
text-align: right;
white-space: nowrap;
}

table.overview tfoot td {
font-family: var(--font-family-bold);
font-size: 18px;
font-weight: 600;
color: var(--secondary-color);
}

table.selectable tbody tr:not(.inactive) {
cursor: pointer;
}

table.selectable tbody td {
transition: var(--bg-transition);
}

table.selectable tr.selected td {
background-color: var(--table-cell-background-color-selected);
}

table.summary td {
font-size: 16px;	
}

table.summary .cell-price {
text-align: right;
white-space: nowrap;
width: 120px;
}

table.summary .option-row td {
padding-top: 8px;
padding-bottom: 8px;
}

table.summary .option-row td .option-price {
font-size: 14px;
}

table.summary td .options {
margin: 0;
padding: 0;
list-style: none;
}

table.summary td .options li {
display: flex;
align-items: center;
margin-left: 4px;
font-size: 14px;
line-height: 1.1;
}

table.summary td .options li span {
width: 22px;
height: 22px;
font-size: 20px;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 32;
margin-right: 6px;
color: var(--secondary-color);
overflow: hidden;
}

table.summary td .col-label {
font-family: var(--font-family-bold);
font-weight: 600;
}

table.summary .cell-price .options li {
justify-content: end;
}

table.summary tfoot td {
font-family: var(--font-family-bold);
font-weight: 600;
font-size: 20px;
color: var(--secondary-color);
}

table.summary tfoot .total-price {
font-size: 18px;
}

table.summary tfoot .total-price .col-label {
font-family: var(--font-family-regular);
}

.table-container.top-offset {
margin-top: -12px;
}

.table-container.bottom-offset {
margin-bottom: -12px;
}

.content-box > .table-container {
margin-top: -12px;
margin-bottom: -12px;
}

.listing-action .label {
font-weight: 500;
}

.listing-action .validation-message {
min-height: 0;
}

/* 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 a {
color: var(--secondary-color);
}

.flash a:hover {
color: var(--secondary-color);
}

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

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

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

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

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

.flash.info {
background-color: var(--neutral-color-70000);
}

/* 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-message a {
color: var(--secondary-color);
}

.growl .growl-message a:hover {
color: var(--secondary-color);
}

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

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

/* 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(--primary-color-100);
}

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

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

.tip.no-header > .icon {
top: 18px;
}

.tip b {
font-weight: 600;
}

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

/* 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(--secondary-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;
}

.radial-progress {
height: 64px;
width: 64px;
position: relative;
}

.radial-progress .inner {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin: -25px 0 0 -25px;
background-color: var(--radial-progress-background-color);
border-radius: 100%;
}

.radial-progress .number {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
z-index: 3;
font-size: 13px;
font-weight: 500;
}

.radial-progress .bar {
position: absolute;
height: 100%;
width: 100%;
background-color: var(--radial-progress-bar-background-color);
border-radius: 100%;
clip: rect(0px, 64px, 64px, 32px);
}

.radial-progress .bar .progress {
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 32px, 64px, 0px);
background-color: var(--radial-progress-bar-fill-color);
}

.radial-progress .left .progress {
z-index: 1;
}

.radial-progress .right {
transform: rotate(180deg);
z-index: 1;
}

.radial-progress.p25 .left .progress {
transform: rotate(90deg);
}

.radial-progress.p50 .left .progress,
.radial-progress.p75 .left .progress,
.radial-progress.p100 .left .progress {
transform: rotate(180deg);
}

.radial-progress.p75 .right .progress {
transform: rotate(90deg);
}

.radial-progress.p100 .right .progress {
transform: rotate(180deg);
}

/* pager */
.pager {
display: flex;
flex-wrap: wrap;
}

.pager-stats {
padding-top: 6px;
margin-bottom: 12px;
}

.pager-links {
flex-grow: 1;
text-align: right;
}

.pager-links a {
display: inline-block;
height: 36px;
min-width: 36px;
margin: 0 6px 12px 6px;
padding: 0 12px;
line-height: 18px;
color: inherit;
font-weight: 500;
text-align: center;
vertical-align: top;
text-decoration: none;
border: var(--pager-link-border);
background-color: var(--pager-link-background-color);
border-radius: var(--pager-link-border-radius);
transition: var(--pager-link-transition);
}

.pager-links a:not(.current):not(.disabled):hover {
background-color: var(--pager-link-background-color-hover);
}

.pager-links a:first-of-type {
padding-left: 6px;
padding-right: 16px;
}

.pager-links a:last-of-type {
padding-left: 16px;
padding-right: 6px;
}

.pager-links a > span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

.pager-links a .icon {
width: 24px;
height: 24px;
overflow: hidden;
}

.pager-links a .icon.prev {
margin-right: 4px;
}

.pager-links a .icon.next {
margin-left: 4px;
}

.pager-links .current {
background-color: var(--pager-link-background-color-current);
border: var(--pager-link-border-current);
color: var(--pager-link-text-color-current);
}

.pager-links .disabled {
opacity: 0.3;
background-color: var(--pager-link-background-color-disabled);
}

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

.ui-dialog.vipps .ui-dialog-buttonpane button {
height: 44px;
min-height: 0;
}

.ui-dialog.vipps .ui-dialog-buttonpane button.btn-confirm {
width: 210px;
padding: 0;
border: none;
background: url(/css/app/main_img/vipps_button.svg) no-repeat right center;
}

.ui-dialog .variant:not(.active):hover {
background-color: var(--neutral-color-850);
}

/* 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;
border-radius: var(--border-all-radius-sm);
}

.calendar-container .ui-datepicker .ui-datepicker-header {
border-radius: var(--border-all-radius-sm);
}

.connection-tip {
font-family: var(--font-family-bold);
font-weight: 600;
color: var(--secondary-color);
}

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

.usage-entries .ui-accordion {
margin-top: 8px;
}

.usage-entries .ui-accordion .ui-accordion-content {
padding: 2px 12px;
}

.usage-entries .usage-summary,
.usage-entries .usage-amount {
color: var(--secondary-color);
font-family: var(--font-family-regular);
}

.usage-entries .usage-amount:not(.small) {
font-size: calc(1.025rem + 0.3vw);
}

.usage-entries .exception .usage-amount,
.usage-entries .exception a:not(:hover) {
color: var(--danger-color);
}

.usage-entries .usage-summary .label,
.usage-entries .usage-amount .label {
font-weight: 500;
}

.usage-entries .usage-summary .value,
.usage-entries .usage-amount .value {
font-family: var(--font-family-regular);
font-weight: 600;
}

.usage-entries .section {
margin-bottom: 24px;
}

.usage-entries-list table.listing td:not(:first-child),
.usage-entries-list table.listing th:not(:first-child) {
padding: 8px 12px;
}

.usage-entries-list table.listing .cell-date {
width: 70px;
}

.usage-entries-list table.listing .cell-qty,
.usage-entries-list table.listing .cell-amount {
text-align: right;
width: 22%;
}

.usage-entries-list table.listing.no-summary tbody tr:last-of-type td {
border: none;
}

.usage-entries-list table.listing tfoot td {
border-top: var(--table-border);
}

.usage-entries-list.exception {
background-color: var(--danger-color-900);
}

.usage-entries-list.gprs table .cell-qty {
width: 30%;
}

.usage-entries-list.fees table .cell-qty {
width: 18%;
}

/* tab content */
.tab-content .overview-bar .overview-bar-item {
display: flex;
padding-bottom: 24px;
text-align: center;
}

.tab-content .overview-bar .overview-bar-item a {
text-decoration: none;
}

.tab-content .overview-bar .overview-bar-item .item-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
border: var(--overview-bar-item-border);
background-color: var(--overview-bar-item-background-color);
transition: var(--bg-transition);
}

.tab-content .overview-bar .overview-bar-item .item-content:not(.action-link) {
flex-grow: 1;
}

.tab-content .overview-bar .overview-bar-item .item-content.action-link {
width: 64px;
background-color: var(--secondary-color-300);
}

.tab-content .overview-bar .overview-bar-item .item-content.action-link:hover {
background: var(--secondary-color-500);
}

.tab-content .overview-bar .overview-bar-item .item-content.action-link span {
font-size: 32px;
color: var(--overview-bar-item-link-color);
}

.tab-content .overview-bar .overview-bar-item .item-content:first-of-type {
border-top-left-radius: var(--border-radius-md);
border-bottom-left-radius: var(--border-radius-md);
}

.tab-content .overview-bar .overview-bar-item .item-content:last-of-type {
border-top-right-radius: var(--border-radius-md);
border-bottom-right-radius: var(--border-radius-md);
}

.tab-content .overview-bar .overview-bar-item .item-content + .item-content {
margin-left: -1px;
}

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

.tab-content .overview-bar .overview-bar-item .item-content .name {
color: var(--secondary-color);
font-family: var(--font-family-bold);
font-weight: 600;
}

.tab-content .overview-bar .overview-bar-item .item-content .details {
color: var(--body-text-color);
}

.tab-content table .cell-phone-number {
white-space: nowrap;
}

.tab-content table .cell-usage-limit {
text-align: right;
}

.tab-content .report-inputs {
margin-left: 38px;
}

.tab-content .report-type .radio input[type=radio]:checked + .icon + .text {
font-family: var(--font-family-bold);
font-weight: 600;
}

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

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

.account-page .tab-content.overview .table-container.limited {
max-height: 1200px;
}

.account-page .tab-content.order-sim-cards .order-item-content > .row {
align-items: center;
}

.account-page .tab-content.order-sim-cards .dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell.query-cell {
width: 100%;
}

.account-page .tab-content.order-sim-cards .inactive-sim-cards input[type=text] {
max-width: 60px;
}

.account-page .tab-content.order-sim-cards .order-summary {
margin: 2.5rem 0;
}

.account-page .tab-content.order-sim-cards .order-summary .order-total {
color: var(--secondary-color);
font-size: calc(1.125rem + 0.3vw);
}

.account-page .tab-content.order-sim-cards .order-summary .order-total .label {
font-weight: 500;
}

.account-page .tab-content.order-sim-cards .order-summary .order-total .value {
font-weight: 600;
}

.account-page .tab-content.order-sim-cards .order-summary .order-price-type,
.account-page .tab-content .price-type,
.subscription-page .tab-content .price-type {
font-size: 14px;
}

.account-page .tab-content.new-subscription .stepper {
margin-top: 1.25rem;
}

.account-page .tab-content.new-subscription .subscription-type-list .fv-plugins-message-container:first-of-type > div,
.account-page .tab-content.new-subscription .subscription-product-list .fv-plugins-message-container:first-of-type > div,
.account-page .tab-content.new-subscription .subscription-product-rate-plan-list .fv-plugins-message-container:first-of-type > div {
padding-top: 16px;
}

.account-page .tab-content.new-subscription .subscription-type-section {
margin-top: -10px;
margin-bottom: -10px;
}

.account-page .tab-content.new-subscription .subscription-type-list + .subscription-type-section,
.account-page .tab-content.new-subscription .subscription-type-list + .subscription-type-section + .subscription-type-section {
margin-top: 0;
}

.account-page .tab-content.new-subscription .subscription-type-list + .subscription-type-section .subscription-product-rate-plan-variant-list,
.account-page .tab-content.new-subscription .subscription-type-list + .subscription-type-section + .subscription-type-section .subscription-product-rate-plan-variant-list {
margin-top: 10px;
}

.account-page .tab-content.new-subscription .subscription-product-rate-plan-variant-list .col {
margin-top: calc(1.5rem * 0.5);
margin-bottom: calc(1.5rem * 0.5);
}

.account-page .tab-content.new-subscription .no-rate-plans,
.account-page .tab-content.new-subscription .no-products,
.account-page .tab-content.new-subscription .no-variants {
line-height: 1.2;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-filters-row .dropdown-filter-cell.query-cell {
width: 100%;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-menu-rows {
min-height: 136px;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-menu-row-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 4px;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-menu-rows .dropdown-menu-row {
margin-top: 0;
width: calc(50% - 3px);
justify-content: center;
}

.account-page .tab-content.new-subscription .subscription-details-section.mobile-phone .dropdown.new-number .dropdown-menu-rows .dropdown-menu-row {
width: calc(33.33% - 4px);
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-menu-rows .progress-indicator {
min-height: inherit;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-menu-rows .no-results {
display: flex;
align-items: center;
justify-content: center;
min-height: inherit;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-footer-row a {
color: inherit;
text-decoration: none;
font-family: var(--font-family-bold);
font-weight: 600;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-footer-row a .icon {
vertical-align: middle;
width: 24px;
height: 24px;
overflow: hidden;
margin-top: -2px;
}

.account-page .tab-content.new-subscription .dropdown.new-number .dropdown-footer-row a:hover {
color: var(--secondary-color);
}

.account-page .tab-content.new-subscription .subscription-details-section.mobile-phone .col-offset {
padding-top: 60px;
}

.account-page .tab-content.new-subscription .submit-buttons button,
.account-page .tab-content.new-subscription .submit-buttons .button {
min-width: 120px;	
}

.account-page .tab-content.change-subscription .section-items .section-item.active h3 {
color: var(--secondary-color);
}

.account-page .tab-content.change-subscription .section-items .section-item.active h3 .icon {
width: 32px;
height: 34px;
margin-top: -6px;
font-size: 34px;
vertical-align: middle;
overflow: hidden;
font-weight: 600;
}

.account-page .tab-content.change-subscription .section-items .section-item.active .section-item-primary-price {
color: inherit;
}

.account-page .tab-content.usage-control table.listing .filter-header input[type=text],
.account-page .tab-content.alert-control table.listing .filter-header input[type=text],
.account-page .tab-content.terminate-subscription table.listing .filter-header input[type=text],
.billing-group-page .tab-content.subscription-admin table.listing .filter-header input[type=text],
.billing-group-page .tab-content.invoice-control table.listing .filter-header input[type=text] {
min-width: 350px;
}

.billing-group-page .tab-content.invoices .invoice-status {
padding: 6px 12px;
line-height: 1.2;
border-radius: var(--border-all-radius-lg);
font-weight: 400;
text-align: center;
}

.billing-group-page .tab-content.invoices .invoice .status-in-credit,
.billing-group-page .tab-content.invoices .invoice .status-credited {
background: var(--primary-color);
color: #FFFFFF;
}

.billing-group-page .tab-content.invoices .invoice .status-overpaid,
.billing-group-page .tab-content.invoices .invoice .status-paid {
background: var(--primary-color-100);
color: #FFFFFF;
}

.billing-group-page .tab-content.invoices .invoice .status-to-pay {
background: var(--warning-color-100);
color: #FFFFFF;
}

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

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

.billing-group-page .tab-content.invoices .last-invoice .invoice-amount {
color: var(--secondary-color);
font-size: calc(1.375rem + 1.5vw);
font-weight: 500;
}

.billing-group-page .tab-content.invoices .section-items {
margin-bottom: 0;	
}

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

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

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

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

.billing-group-page .tab-content.invoices .section-items .invoice-status {
min-width: 105px;
}

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

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

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

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

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

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

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

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

.subscription-page .tab-content.consumption .used-only .chart-legend {
margin-top: -26px;
}

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

.subscription-page .tab-content.consumption .chart-legend .used {
font-size: 28px;
}

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

.subscription-page .tab-content.consumption .calendar-container input[type=text] {
width: 170px;
}

.subscription-page .tab-content.services .section-custom-item .section-custom-item-row-label {
min-width: 160px;
}

.subscription-page .tab-content.services .section-custom-item .section-custom-item-row-value {
min-width: 120px;
}

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

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

.subscription-page .tab-content.extra-packages button {
min-height: 44px;
}

.subscription-page .tab-content.extra-packages button.vipps {
width: 210px;
height: 44px;
min-height: 0;
padding: 0;
border: none;
background: url(/css/app/main_img/vipps_button.svg) no-repeat right center;
}

.subscription-page .tab-content.extra-packages .multi-buttons button {
min-width: 210px;
font-size: 17px;
}

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

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

.subscription-page .tab-content.sim-cards .sim-card .sim-card-status {
color: var(--primary-color-100);
font-family: var(--font-family-bold);
font-weight: 600;
}

.subscription-page .tab-content.sim-cards .sim-card .sim-card-status.blocked,
.subscription-page .tab-content.sim-cards .sim-card .section-item-description.blocked-service {
color: var(--danger-color-500);
}

.subscription-page .tab-content.sim-cards .sim-card .sim-card-status.info {
color: var(--secondary-color-700);
}

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

.subscription-page .tab-content.sim-cards .sim-card .esim-description ol li {
margin-bottom: 4px;
}
	
.subscription-page .tab-content.sim-cards .service .service-item-details {
min-width: 235px;
}

.subscription-page .tab-content.sim-cards .service .service-item-details button {
width: 100%;
}

.subscription-page .tab-content.overview .button.edit-link {
position: absolute;
top: -4px;
right: 8px;
}

.subscription-page .tab-content.sim-replacement .port-date {
max-width: 240px;
}

.subscription-page .tab-content.sim-replacement .port-date.submit-buttons button,
.subscription-page .tab-content.sim-replacement .port-date .button {
width: 100%;
}

@-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);
	}
}

@media (max-width: 1040px) {
	.dropdown.subscriptions .dropdown-filters-row,
	.dropdown.subscriptions .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr) minmax(180px, 1fr) minmax(170px, 1fr);
	}
	
	.dropdown.subscriptions .dropdown-filters-row .ref-cell,
	.dropdown.subscriptions .dropdown-menu-row .ref-cell {
	display: none;
	}
}

@media (max-width: 991px) {
	.footer-content .contact-box .icon {
	width: 48px;
	height: 48px;
	}
	
	.footer-content .contact-box .details {
	padding-left: 0;
	}
	
	.footer-content .contact-box h4 {
	margin-bottom: 0;
	}
	
	.footer-content .contact-box a {
	font-size: 17px;
	}
	
	.billing-group-page .tab-content.invoices .section-items .invoice-details .col > div {
	display: inline-block;
	}
	
	.billing-group-page .tab-content.invoices .section-items .invoice-details .col > div:first-child {
	min-width: 120px;
	}
}

@media (min-width: 768px) {
	.subscription-page .tab-content.services .section-custom-item {
	height: 100%;	
	}
	
	.subscription-page .tab-content.services .section-custom-item:first-of-type {
	border-right: var(--section-item-border);
	}
}

@media (max-width: 767px) {
	.dropdown.advanced-dropdown .dropdown-filters-row .dropdown-filter-cell.query-cell {
	width: 100%;	
	}
	
	.dropdown.billing-groups .dropdown-filters-row,
	.dropdown.billing-groups .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr) minmax(170px, 1fr);
	}
	
	.dropdown.billing-groups .dropdown-filters-row .ref-cell,
	.dropdown.billing-groups .dropdown-menu-row .ref-cell {
	display: none;
	}
	
	.dropdown.subscriptions .dropdown-filters-row,
	.dropdown.subscriptions .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr) minmax(170px, 1fr);
	}
	
	.dropdown.subscriptions .dropdown-filters-row .billing-group-cell,
	.dropdown.subscriptions .dropdown-menu-row .billing-group-cell {
	display: none;
	}
	
	.stepper li:not(.current) .step-name {
	width: 32px;
	overflow: hidden;
	height: 32px;
	}
	
	table.summary td .options li {
	margin-left: 0;
	}
	
	.footer-content .links {
	text-align: left;
	}
	
	.content-box {
	padding: 16px;
	}
	
	.content-box .tabs {
	margin: -16px -16px 0 -16px;
	padding: 0 16px 0 16px;
	}
	
	.listing-action {
	line-height: 1.1;
	}
	
	.account-page .tab-content.new-subscription .subscription-type-section {
	margin-bottom: -8px;
	}
	
	.account-page .tab-content.new-subscription .subscription-product-rate-plan-variant-list {
	margin-top: 8px;
	}
	
	.account-page .tab-content.new-subscription .subscription-product-rate-plan-variant-list .col {
	margin-top: calc(1rem * 0.5);
	margin-bottom: calc(1rem * 0.5);
	}
	
	.account-page .tab-content.new-subscription .subscription-details-section.mobile-phone .dropdown.new-number .dropdown-menu-rows .dropdown-menu-row {
	width: calc(50% - 3px);
	}

	.account-page .tab-content.new-subscription .subscription-details-section.mobile-phone .col-offset,
	.account-page .tab-content.new-subscription .subscription-details-section.mobile-broadband .col-offset {
	padding-top: 24px;
	}
}

@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 > .icon {
	display: none;
	}
	
	.dropdown.billing-groups .dropdown-filters-row,
	.dropdown.billing-groups .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	
	.dropdown.billing-groups .dropdown-filters-row .company-cell,
	.dropdown.billing-groups .dropdown-menu-row .company-cell {
	display: none;
	}
	
	.dropdown.subscriptions .dropdown-filters-row,
	.dropdown.subscriptions .dropdown-menu-rows .dropdown-menu-row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	
	.dropdown.subscriptions .dropdown-filters-row .rate-plan-variant-cell,
	.dropdown.subscriptions .dropdown-menu-row .rate-plan-variant-cell {
	display: none;
	}

	.stepper li {
	font-size: 16px;
	}
	
	.tab-content table .cell-usage-limit a,
	.tab-content table .cell-alert-phone a {
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	
	.tab-content table tbody .cell-usage-limit,
	.tab-content table tbody .cell-alert-phone {
	white-space: nowrap;
	}
	
	.account-page .tab-content.usage-control table.listing .filter-header input[type=text],
	.account-page .tab-content.alert-control table.listing .filter-header input[type=text],
	.account-page .tab-content.terminate-subscription table.listing .filter-header input[type=text],
	.billing-group-page .tab-content.subscription-admin table.listing .filter-header input[type=text],
	.billing-group-page .tab-content.invoice-control table.listing .filter-header input[type=text] {
	min-width: 200px;
	}
	
	.ui-dialog .ui-dialog-title,
	.ui-dialog.ui-dialog-reduced-title .ui-dialog-titlebar {
	white-space: normal;
	font-size: 22px;
	line-height: 1;
	}
}

@media (max-width: 520px) {
	.ui-dialog.vipps .ui-dialog-buttonpane {
	text-align: center;	
	}
	
	.ui-dialog.vipps .ui-dialog-buttonpane button {
	width: 210px;
	}
	
	.ui-dialog.vipps .ui-dialog-buttonpane button.btn-cancel,
	.ui-dialog.vipps .ui-dialog-buttonpane button.btn-cancel:hover {
	margin-left: 0;
	margin-top: 16px;
	}
}

@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;
	}
	
	.subscription-page .tab-content.sim-replacement .port-date {
	max-width: 100%;
	}
}

@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;	
	}
}