: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;

--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(--neutral-color-750);
--button-plain-background-color: transparent;
--button-plain-background-color-hover: var(--neutral-color-750);

--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-input-icon-background-color-hover: var(--neutral-color-900);

--datepicker-border: 1px solid var(--neutral-color-500);
--datepicker-border-hover: 1px solid var(--primary-color-400);
--datepicker-border-highlight: 1px solid var(--primary-color-400);
--datepicker-border-active: 1px solid var(--primary-color-300);
--datepicker-border-unselectable: 1px solid #ffffff;
--datepicker-background-color: #ffffff;
--datepicker-background-color-highlight: var(--primary-color-600);
--datepicker-background-color-hover: var(--primary-color-800);
--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-500);
--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-highlight: var(--primary-color-500);
--datepicker-text-color-hover: var(--body-text-color);
--datepicker-text-color-active: #ffffff;
--datepicker-text-color-unselectable: var(--neutral-color-350);

--delete-item-transition: opacity .3s, transform .3s;
--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-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;

--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-footer-background-color: var(--primary-color);
--page-footer-text-color: #ffffff;

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

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

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

--table-border: 2px solid var(--primary-color-700);
--table-cell-background-color-selected: var(--primary-color-700);

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

--toggle-transition: background-color .3s, 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: 44px;
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);
}

.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]:disabled,
input[type=submit]:disabled,
button:disabled,
.button.disabled {
opacity: 0.4;
cursor: default;
}

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

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

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

input[type=button].icon-button.md,
input[type=submit].icon-button.md,
button.icon-button.md,
.button.icon-button.md {
min-width: 40px;
}

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

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

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

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

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

/* 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: 1240px;
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: 0 12px 0 0;
line-height: 24px;
}

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

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

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

.footer-content b {
font-weight: 600;
}

#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: 1240px;
padding: 0 16px;
margin: 0 auto;
}

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

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

/* tab bar */
.tab-bar .dropdown.expanded .dropdown-toggle {
background-color: var(--tab-bar-dropdown-toggle-background-color-expanded);
}

.tab-bar .dropdown .dropdown-toggle-content {
position: relative;
padding-left: 30px;
}

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

.tab-bar .dropdown .dropdown-icon span {
position: absolute;
top: 0;
left: 1px;
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: -16px;
right: -16px;
min-width: 160px;
margin-top: 1px;
transform: scaleY(1);
transform-origin: top;
background: 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(--bg-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-item-background-color);
}

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

.tab-bar a span:not(.dropdown-text) {
margin-top: -2px;
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:first-child {
margin-left: -16px;
}

.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: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-500);
}
	
.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: 34px;
font-weight: 300;
top: -5px;
left: -5px;
}

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

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

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

/* 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 .radio,
.form-row .checkbox {
margin: 0;
}

.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 {
border: var(--input-border-invalid);
}

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

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

.checkbox .icon,
.radio .icon {
display: inline-block;
flex-shrink: 0;
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;
}

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

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

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

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

.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: 50px;
background: #ffffff;
}

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

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

.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: 32px;
padding: 1px 0;
}

.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.small .dropdown-toggle-content {
padding: 0 6px 0 10px;
}

.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 {
font-size: 28px;
vertical-align: middle;
}

.dropdown.dropdown-default: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);
color: var(--input-text-color);
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: 23px;
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(--input-font-size);
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.small .dropdown-menu-row {
min-height: 32px;
padding: 6px 8px;
}

.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 .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-500);
border-width: 2px;
}

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

/* 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;
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-300);
color: var(--stepper-indicator-text-active);
}

.stepper .current .step-indicator {
background: var(--primary-color-400);
}

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

.stepper .current .step-name {
color: var(--primary-color-400);
}

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

/* table */
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);
}

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 tr:last-child td {
border-bottom: none;
}

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

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

table.listing.product-offerings td:first-child,
table.listing.product-offerings th:first-child {
padding-left: 12px;
}

table.listing.product-offerings td:last-child,
table.listing.product-offerings th:last-child {
padding-right: 12px;
}

table.listing.product-offerings td {
transition: var(--bg-transition);
}

table.listing.product-offerings .cell-product-offering-name {
width: 240px;
}

table.listing.product-offerings .cell-file-input,
table.listing.product-offerings .cell-user-input {
width: 180px;
}

table.listing.product-offerings .cell-file-input {
padding-top: 4px;
padding-bottom: 4px;
}

table.listing.product-offerings .cell-file-input .button.sm {
width: 100%;
min-height: 30px;
padding: 7px 10px;
font-size: var(--body-font-size);
text-transform: none;
}

table.listing.product-offerings .cell-file-input .jFiler-items {
margin-top: 4px;
}

table.listing.product-offerings .cell-file-input .jFiler-item {
display: flex;
align-items: center;
margin: 0;
padding: 0;
background: transparent;
text-align: center;
color: var(--primary-color-300);
}

table.listing.product-offerings .cell-file-input .jFiler-item a {
display: inline-flex;
color: inherit;
text-decoration: none;
margin-left: 4px;
cursor: pointer;
}

table.listing.product-offerings .cell-file-input .jFiler-item a:hover {
color: var(--primary-color);
}

table.listing.product-offerings .cell-file-input input[type=text] {
width: 70px;
text-align: right;
pointer-events: none;
opacity: .5;
}

table.listing.product-offerings .cell-user-input input[type=text] {
width: 90px;
padding-right: 34px;
text-align: right;
}

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

table.listing.product-offerings tr.selected .cell-product-offering-name {
font-weight: 600;
}

table.listing.product-offerings td.filled .form-row:not(.invalid) input[type=text] {
border-color: var(--primary-color-300);
}

table.listing.product-offerings td.filled .form-row:not(.invalid) .ui-spinner a.ui-spinner-button {
border-color: var(--primary-color-300);
}

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

.flash a:hover {
color: var(--primary-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(--success-color-400);
}

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

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

.flash .errors-container {
max-height: 250px;
overflow-y: auto;
}

.flash .errors-container .error-header {
font-weight: 600;
}

.flash .errors-container .error-item {
margin-bottom: 16px;
}

.flash .errors-container .error-item:last-child {
margin-bottom: 0;
}

/* system message box */
.system-info-box {
max-width: 1140px;
padding: 16px;
margin: 24px 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);
}

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

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

/* 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 {
border: var(--pager-link-border-current);
background-color: var(--pager-link-background-color-current);
color: var(--pager-link-text-color-current);
}

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

/* jQuery */
.ui-spinner-button.ui-corner-tr {
border-top-right-radius: var(--border-radius-sm);
}

.ui-spinner-button.ui-corner-br {
border-bottom-right-radius: var(--border-radius-sm);
}

/* other */
.badge {
display: inline-flex;
min-width: 24px;
height: 24px;
padding-left: 8px;
padding-right: 8px;
align-items: center;
justify-content: center;
font-size: 14px;
text-indent: -1px;
color: #ffffff;
border-radius: var(--border-all-radius-lg);
background-color: var(--primary-color-300);
}

.calendar-container {
position: relative;
}

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

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

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

.filter-container.enabled .label,
.filter-container.enabled label,
.filter-container.enabled .link {
color: var(--primary-color-300);
}

.filter-container.enabled .link:hover {
color: var(--primary-color);
}

.ui-dialog .service-row {
min-height: 32px;
}

.ui-dialog .dropdown.sim-card-type .dropdown-toggle {
min-width: 106px;
}

.ui-dialog .service-option-rows.indented {
padding-left: 42px;
}

.ui-dialog .service-addon .service-option-rows {
margin-bottom: 8px;
padding: 4px 42px 12px 42px;
border-bottom: 2px solid var(--neutral-color-700);
}

.ui-dialog .service-addon:last-of-type .service-option-rows {
margin-bottom: 0;
border-bottom: none;
}

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

.dashboard-page .content-box,
.order-page .content-box,
.order-history-page .content-box,
.ui-dialog .content-box {
padding: 24px;
background-color: var(--content-box-background-color);
border-radius: var(--content-box-border-radius);
border: var(--content-box-border);
}

.dashboard-page .content-box.secondary,
.order-page .content-box.secondary,
.order-history-page .content-box.secondary,
.ui-dialog .content-box.secondary {
background-color: var(--primary-color-750);
}

.order-page .content-box.customer {
padding: 12px 16px;
}

.order-page .content-box.customer b {
font-weight: 600;
}

.order-page .list-item {
transition: var(--bg-transition);
}

.order-page .list-item.deleted {
transition: var(--delete-item-transition);
transform: scale(1, 0);
opacity: 0;
}

.order-page .list-item-col .row {
--bs-gutter-x: 0.5rem;
}

.order-page .list-item-col .radio.list-inupt {
color: var(--input-text-color);
}

.order-page .list-item-col.user input[type=text] {
width: 100%;
}

.order-page .list-item.selected {
background-color: var(--table-cell-background-color-selected);
}

.order-page .list-item-col ul.options {
list-style: none;
margin: 0;
padding: 0;
}

.order-page .list-item-col ul.options li {
display: flex;
align-items: center;
line-height: 1.2;
min-height: 24px;
}

.order-page .list-item-col ul.options .icon {
display: inline-block;
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 2px;
margin-left: 4px;
font-size: 20px;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 32;
margin-right: 6px;
color: var(--primary-color-400);
overflow: hidden;
}


.order-page .list-item-col .input-text b,
.order-page .list-item-col ul.options li b,
.order-page .list-item-col.price.total .list-item-col-value {
font-weight: 600;
}

.order-page .dropdown.new-number .dropdown-filters-row .dropdown-filter-cell.query-cell {
width: 100%;
}

.order-page .dropdown.new-number .dropdown-menu-rows {
min-height: 136px;
margin-top: 0px;
}

.order-page .dropdown.new-number .dropdown-menu-row-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.order-page .dropdown.new-number .dropdown-menu-rows .dropdown-menu-row {
margin-top: 0;
width: calc(33.33% - 4px);
justify-content: center;
}

.order-page .dropdown.new-number .dropdown-menu-rows .progress-indicator {
min-height: inherit;
}

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

.order-page .dropdown.new-number .dropdown-footer-row a {
color: var(--primary-color-300);
text-decoration: none;
font-family: var(--font-family-bold);
}

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

.order-page .dropdown.new-number .dropdown-footer-row a:hover {
color: var(--primary-color-400);
}

.order-page .configuration-section h5 {
padding: 8px 12px;
background-color: var(--primary-color-700);
border-radius: var(--border-all-radius-sm);
font-family: var(--font-family-regular);
}

.order-page .confirmation-box {
border: 1px solid var(--neutral-color-300);
border-radius: var(--border-all-radius-md);
margin-top: 16px;
padding: 16px 20px;
color: var(--neutral-color-300);
}

.order-page .confirmation-box:first-of-type {
margin-top: 0;
}

.order-page .confirmation-box .icon-col {
width: 32px;
padding-right: 0;
padding-left: 6px;
}

.order-page .confirmation-box .icon-col .icon-wrapper > span {
vertical-align: top;
}

.order-page .confirmation-box h4,
.order-page .confirmation-box h6 {
color: var(--neutral-color-300);
}

.order-page .confirmation-box .description {
border-top: 1px solid var(--primary-color-300);
padding-top: 11px;
margin-top: 12px;
}

.order-page .confirmation-box:not(.current):not(.success):not(.error) .icon-col .icon-container:not(.initial) {
display: none;
}

.order-page .confirmation-box:not(.current):not(.success):not(.error) h4 {
margin-bottom: 0;
}

.order-page .confirmation-box:not(.current):not(.success):not(.error) .description {
display: none;
}

.order-page .confirmation-box .icon-container .progress-indicator .icon-wrapper {
width: 24px;
margin: 0;
}

.order-page .confirmation-box .icon-container .progress-indicator .icon-wrapper span {
font-size: 24px;
color: var(--neutral-color-300);
}

.order-page .confirmation-box.current {
border-color: var(--primary-color-400);
color: var(--primary-color-400);
}

.order-page .confirmation-box.current h4,
.order-page .confirmation-box.current h6 {
color: var(--primary-color-400);
}

.order-page .confirmation-box.current .icon-col .icon-container:not(.current) {
display: none;
}

.order-page .confirmation-box.current .description {
border-color: var(--primary-color-400);
}

.order-page .confirmation-box.success {
border-color: var(--primary-color-300);
color: var(--primary-color-300);
}

.order-page .confirmation-box.success h4,
.order-page .confirmation-box.success h6 {
color: var(--primary-color-300);
}

.order-page .confirmation-box.success .icon-col .icon-container:not(.success) {
display: none;
}

.order-page .confirmation-box.error {
border-color: var(--danger-color-500);
color: var(--danger-color-500);
}

.order-page .confirmation-box.error h4,
.order-page .confirmation-box.error h6 {
color: var(--danger-color-500);
}

.order-page .confirmation-box.error .icon-col .icon-container:not(.error) {
display: none;
}

.order-page .confirmation-box.error .description {
border-color: var(--danger-color-500);
}

.order-page .submit-buttons {
display: flex;
gap: 16px;
}

.order-page .submit-buttons button[type=submit],
.order-page .submit-buttons .button {
min-width: 180px;
}

.order-page .step-content.customer-data button[type=submit] {
min-width: 200px;
}

.order-page .step-content .configuration-section .configuration-section-content {
padding-left: 12px;
padding-right: 12px;
}

@-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 (min-width: 992px) {
	.order-page .step-content.configuration .configuration-section .content-box {
	padding-top: 4px;
	padding-bottom: 16px;
	}
	
	.order-page .item-list {
	display: table;
	caption-side: bottom;
	border-collapse: collapse;
	width: 100%;
	}
	
	.order-page .list-header,
	.order-page .list-item,
	.order-page .list-footer {
	display: table-row;
	}
	
	.order-page .list-header-col,
	.order-page .list-item-col,
	.order-page .list-footer-col {
	display: table-cell;
	border-bottom: var(--table-border);
	line-height: 1.2;
	padding: 10px 12px;
	}
	
	.order-page .list-header-col,
	.order-page .list-footer-col {
	vertical-align: middle;
	font-family: var(--font-family-bold);
	font-weight: 600;
	}
	
	.order-page .list-item:last-child .list-item-col {
	border-bottom: none;
	}
	
	.order-page .list-item-col {
	vertical-align: top;
	}
	
	.order-page .list-footer-col {
	border-bottom: none;
	}
	
	.order-page .list-item-col.select,
	.order-page .list-item-col.actions {
	vertical-align: middle;
	width: 52px;
	}
	
	.order-page .list-header-col.select,
	.order-page .list-item-col.select {
	width: 55px;
	}
	
	.order-page .list-header-col.phone-no,
	.order-page .list-item-col.phone-no {
	width: 200px;
	}
	
	.order-page .list-header-col.sim-card,
	.order-page .list-item-col.sim-card {
	width: 205px;
	}
	
	.order-page .list-header-col.porting-details,
	.order-page .list-item-col.porting-details {
	width: 215px;
	}
	
	.order-page .dropdown.new-number .dropdown-menu {
	min-width: 380px;
	}
	
	.order-page .step-content.review .list-header-col.phone-no,
	.order-page .step-content.review .list-item-col.phone-no {
	width: 240px;
	}
	
	.order-page .step-content.review .list-header-col.user,
	.order-page .step-content.review .list-item-col.user {
	width: 220px;
	}
	
	.order-page .step-content.review .list-header-col.term-period,
	.order-page .step-content.review .list-item-col.term-period {
	width: 180px;
	}
	
	.order-page .step-content.review .list-header-col.product-offering,
	.order-page .step-content.review .list-item-col.product-offering {
	width: 360px;
	}
	
	.order-page .step-content.review .list-item-col.product-offering ul.options {
	max-width: 330px;
	}
	
	.order-page .step-content.review .list-item-col.price ul.options li,
	.order-page .step-content.review .list-item-col.amount ul.options li {
	justify-content: end;
	}
}

@media (min-width: 1200px) {
	.order-page .list-header-col.sim-card,
	.order-page .list-item-col.sim-card {
	width: 240px;
	}
}

@media (max-width: 991px) {
	.order-page .step-content.configuration .configuration-section .content-box {
	padding-top: 8px;
	padding-bottom: 8px;
	}
	
	.order-page .list-header-col:not(.select) {
	display: none;
	}
	
	.order-page .list-header,
	.order-page .list-item {
	border-bottom: var(--table-border);
	}
	
	.order-page .list-item:last-child {
	border-bottom: none;
	}
	
	.order-page .list-header,
	.order-page .list-footer {
	display: flex;
	}
	
	.order-page .list-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	}
	
	.order-page .list-header-col,
	.order-page .list-item-col,
	.order-page .list-footer-col {
	line-height: 1.2;
	padding: 10px 12px;
	}
	
	.order-page .list-footer-col {
	font-family: var(--font-family-bold);
	}
	
	.order-page .step-content.configuration .list-item-col {
	flex: 0 1 calc(100% - 52px);
	}
	
	.order-page .step-content.configuration .list-item-col.select {
	flex-basis: 52px;
	}
	
	.order-page .step-content.review .list-item,
	.order-page .step-content.review .list-footer {
	flex-direction: column;
	}
	
	.order-page .step-content.review .list-header,
	.order-page .step-content.review .list-footer-col:not(.total) {
	display: none;
	}
	
	.order-page .step-content.review .list-item-col-value {
	padding-left: 6px;
	font-weight: 600;
	}
	
	.order-page .step-content.review .list-footer-col {
	font-size: 1.1rem;
	}
	
	.order-page .step-content.review .list-footer-col:last-of-type {
	padding-top: 0;
	}
}

@media (max-width: 767px) {
	.stepper li:not(.current) .step-name {
	display: none;
	}
}

@media (max-width: 575px) {
	.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;
	}
}

@media (max-width: 480px) {
	.order-page .submit-buttons {
	flex-direction: column;
	}
	
	.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;
	}
}