@import url("variable.css"); 

body { overflow-x: hidden; font-feature-settings: 'lnum' 1; color: var(--interactive-text-gray-normal); background-color: var(--surface-background-gray-subtle); }
a { color: var(--interactive-text-primary-normal); text-decoration: underline; }
.main{ display:flex; overflow-x: auto; margin-top: 48px; }
.max-w-container { max-width: 1400px; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }
.mb-50 { margin-bottom: 50px; }
.min-w-250 { min-width: 250px; }
.slot{ display: flex; flex-direction: column; align-items: center; }
.i3_header { background-color: var(--header-and-footer); border-bottom: 4px solid var(--surface-background-primary-intense); padding: var(--switch-medium-padding); min-height: 48px; position: relative; }
.i3_header a { color: var(--surface-text-staticwhite-normal); font-family: "Raleway", sans-serif; font-weight: 300; padding: var(--spacing-2); margin: 3px 6px; text-decoration: none; }
.wrapper{ background-color: var(--surface-background-gray-subtle); }
.align-right { text-align: right; }
.align-right { text-align: right; }

/* .hide {display:none;}*/
a.navbar-brand { margin: 0px; padding:6px 3px;}
a.navbar-brand img{ margin-top: -3px;}
.i3_header .navbar-collapse { justify-content:right;}
.left_navigation ul { padding: var(--switch-medium-padding); text-decoration: none; background-color: var(--surface-icon-staticwhite-normal); height: 100vh; overflow-y: scroll; }
.left_navigation ul li { padding:15px; }
h5 { font-family: "Raleway", sans-serif; }
.i3_header .navbar { display: flex; justify-content: space-between; width: 100%; align-items: center; padding: 0; flex-wrap: nowrap; }
.i3_header .navbar-nav { flex-flow: nowrap; }

/*sidebar css start*/
#body-row { margin-left: 0; margin-right: 0; }
#sidebar-container { background-color:var(--surface-background-gray-moderate); padding: var(--spacing-0); border-right: var(--surface-border-gray-muted) solid 1px; }
.sidebar-submenu { font-size: var(--fz-size-14); }
ul.sidebar-submenu li { padding-left: 20px; }
ul.sidebar-submenu li:hover { font-weight: var(--fw-600); }
ul.sidebar-submenu li:before { content: ''; width: 0; height: 100%; position: absolute; border: var(--bwidth-thin) solid var(--surface-border-gray-muted); z-index: 99; }
ul.sidebar-submenu li.active:before { border:var(--bwidth-thin) solid var(--interactive-border-primary-default); }
ul.sidebar-submenu li.active .menu-collapsed { color: var(--interactive-text-primary-normal); }
ul.sidebar-submenu li { position: relative; }
ul.sidebar-submenu { padding: 10px 0; }

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after { content: " \f105"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; }

/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after { content: " \f107"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; }
.list-group .menu-collapsed { color: var(--interactive-text-gray-normal); font-size: var(--fz-size-14); vertical-align: text-top; }
.list-group .list-group-item { border: var(--bradius-none); }
.list-group .menu-collapsed.head { text-transform: uppercase; letter-spacing: 3px; font-size: var(--fz-size-14); font-weight: 500; }
.icon_font { font-size: var(--fz-size-16) !important; }
.sidebar-expanded .nav_expand { justify-content:space-between; }
.sidebar-collapsed .nav_expand { justify-content:center; }
.sidebar-expanded ul li a:hover { background-color: var(--interactive-background-gray-default); }
.sidebar-expanded ul li.secondlevel a:hover { background-color: var(--transparent) !important; font-weight: var(--fw-600); }
ul.sidebar-submenu li:hover:before { border:var(--bwidth-thin) solid var(--normal); }
.components .component_text { font-size:var(--fz-size-12); line-height: var(--lineheight-18); color: var(--interactive-text-gray-muted); font-weight: var(--fw-600); }
.header { position: fixed; top: 0; z-index: 999; }
#sidebar { min-width: 270px; max-width: 270px; transition: all 0.3s; position: fixed; height: calc(100vh - 50px); padding-left: .25rem; margin-left: -.25rem; overflow-y: auto; overflow-x: hidden; z-index: 999; box-shadow: 0px 16px 48px -4px var(--elevation-highraised); }
#sidebar.active { margin-left: -270px; }
#content.active { margin-left: 265px; }
#content { transition: all 0.3s; }
a:focus, button:focus, tr:focus-visible { outline: 2px solid var(--surface-border-primary-normal) !important; }
.nav-link:focus-visible { box-shadow: none; }
li.components li.active a{ background-color: var(--interactive-background-primary-faded) !important; }

/*landing page css*/
.welcome { text-align: center; background-color: var(--card-bg-moderate); padding: 70px 20px; border-radius: var(--bradius-medium); margin-top: var(--ps-10); }
.welcome .text_welcome { font-style: italic; color: var(--interactive-text-gray-normal); font-size: var(--fz-size-14); }
.welcome .text_details { color: var(--interactive-text-gray-normal); font-weight: var(--font-weight-semi-bold); font-family: var(--typography-typefaces-heading); font-size: var(--fz-size-18); font-feature-settings: 'lnum' 1; line-height: normal; }
.welcome .text_color { color: var(--interactive-text-primary-normal); }
.card.i3_card { padding: 15px; border-color: var(--surface-border-gray-muted); min-height: 95px; }
.i3_card .h6 { font-size: var(--fz-size-18); font-weight: var(--fw-600); line-height: var(--lineheight-24); color: var(--surface-text-gray-normal); margin-bottom: 3px; }
.i3_card p { font-size:var(--fz-size-14); color: var(--surface-text-gray-subtle); }
.i3_card .next i { background-color: var(--interactive-background-primary-default); padding: var(--size-08); border-radius: var(--bradius-medium); color: var(--interactive-icon-onprimary-normal); }
.content-wrapper { margin-bottom: 80px; padding: 0 var(--spacing-4); }
ul {list-style-type: none;}
#sidebar ul { list-style-type: none; padding-left: 0 !important; }
.next { margin-top: 5px; }
.list-group li a.active { background-color: var(--interactive-background-primary-faded); }
.list-group li a { border-radius: var(--bradius-medium) !important; }
ul.list-group li a[aria-expanded="true"] { background-color: var(--interactive-background-primary-faded) !important; }
ul.list-group li a[aria-expanded="true"]:hover { background-color: var(--interactive-background-primary-fadedHighlighted) !important; }
li.components li.active a:hover { background-color: var(--interactive-background-primary-fadedHighlighted) !important; }
ul.list-group li [aria-expanded="true"]::after { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e845'; font-family: "feather"; position: absolute; right: 20px; top: 10px; color: var(--surface-icon-gray-normal); }
ul.list-group li [aria-expanded="false"]::after { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e844'; font-family: "feather"; position: absolute; right: 20px; top: 10px; color: var(--surface-icon-gray-normal); }
.icon_color { color: var(--surface-text-staticwhite-normal); vertical-align: bottom; }
.footer_logo { display: block; text-align: center; position: sticky; bottom: 0; width: 100%; background-color: var(--surface-background-gray-moderate); color: var(--surface-text-gray-muted); z-index: 9999; }
.logo{display: block;}
.help_size { font-size: var(--fz-size-20) !important; }
.components a { padding: 6px 16px; }
.sidebar-submenu a { padding: var(--spacing-2) var(--spacing-5); }
ul.list-group { margin: 0 10px; }
.components ul li:last-child { margin-bottom: 10px; }
.tabs-navigation { border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); gap: var(--tab-medium-bordered-horizontal-gap); display: flex; margin-bottom: var(--spacing-5); }
.component-header-button{ padding: var(--spacing-2) var(--spacing-4); border-radius: var(--bradius-max); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); cursor: pointer; color: var(--interactive-text-gray-subtle); }
button span .icon { width: var(--button-small-main-icon, 16px); height: var(--button-small-main-icon, 16px); fill: var(--interactive-icon-gray-subtle); }
.tab-link { font-family: 'Nunito Sans', sans-serif; color: var(--interactive-text-gray-muted); padding: var(--tab-large-bordered-horizontal-vertical-padding) 0; line-height: var(--line-height-300); font-size: var(--size-font-size-200); cursor: pointer; border-bottom: 2px solid transparent; font-weight: bold; user-select: none; position: relative; transition: color 0.3s ease, border-bottom-color 0.3s ease; }
.tab-link.active { border-bottom-color: var(--interactive-border-primary-default); color: var(--interactive-text-primary-normal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.component-wrapper .header-container{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#sidebar-container .list-group li.active a{ color: var(--interactive-text-primary-normal); }

/* input text css small*/
.form-control, .form-control:focus, .form-select{ color: var(--surface-text-gray-subtle); background-color: var(--surface-background-gray-moderate); }
.form-control::placeholder{ color: var(--surface-text-gray-subtle); }
.input-group-text { background-color: transparent; }
.input-group-text .icon-search, .input-group-text .icon-lock, .input-group-text .icon-dollar-sign, .input-group-text .icon-eye-off { font-size: var(--fz-size-16); }
.input_css .icon-eye-off { color: var(--interactive-icon-gray-muted); }
.input_css .form-control::placeholder{ color: var(--surface-text-staticblack-subtle) !important; font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); }
.input_css .form-control { background-color: transparent; }
.help_text { color: var(--surface-text-gray-muted); font-size: var(--fz-size-11); font-style: italic; }
.form_label { color: var(--surface-text-gray-subtle); font-weight: var(--fw-700); font-size: var(--fz-size-12); margin-bottom: 6px; }
.input-group-text .link_color { color: var(--interactive-text-primary-normal); font-weight: var(--fw-700); }
.input_css { border: var(--bwidth-thin) solid; border-color: var(--interactive-border-gray-default); border-radius: var(--bradius-medium); padding-left: var(--input-textfield-large-horizontal-padding); padding-right: var(--input-textfield-large-horizontal-padding); background-color: var(--surface-background-gray-moderate); }
.input_css:hover { background-color: var(--surface-background-gray-moderate); }
.input_css.active { border-width: var(--bwidth-thick); border-color: var(--interactive-border-primary-default); background-color: var(--interactive-background-gray-faded); }
.input_css.disabled { border-color: var(--interactive-border-gray-disabled); }
.input_css.disabled .input-group-text i, .input_css.disabled .input-group-text, .input_css.disabled .input-group-text .link_color, .input_css.disabled a, .input_css.disabled .link_color a { color: var(--surface-text-gray-disabled) ; }
.input_css.disabled .input-group-text .link_color a{ color: var(--interactive-text-primary-disabled) ; }
.input_css .icon-loader { color: var(--surface-background-primary-intense) !important; font-size: var(--fz-size-16); }
.input_css.success { border-width: var(--bwidth-thick); border-color: var(--interactive-border-primary-default); }
.input_css.success { border-width: var(--bwidth-thick); border-color: var(--interactive-border-primary-default); }
.input_css.success .icon-lock { color: var(--feedback-icon-positive-intense); }
.help_success{ color: var(--feedback-text-positive-intense); }
.help_success i { font-size: var(--fz-size-12); }
.input_css.error { border-color: var(--interactive-border-negative-default); border-width: var(--bwidth-thick); }
.input_css.error { border-color: var(--interactive-border-negative-default); border-width: var(--bwidth-thick); }
.input_css.error i.icon-lock{ color: var(--feedback-icon-negative-intense); }
.help_error{ color: var(--feedback-text-negative-intense); }
.help_error i { font-size: var(--fz-size-12); }
.input-group-text .icon-lock { color: var(--surface-icon-gray-subtle); }
.input-group-text { font-size: var(--fz-size-14); }
.input_css .form-control { font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); }
.input_css:focus-within { outline: 2px solid var(--interactive-border-primary-default) !important; }
.form-control:focus { box-shadow: none; }
.input_small .input_css { height: var(--size-32); }
.input_css span { color: var(--surface-text-gray-subtle); }
.input_css.hover, .input_css:hover{ background-color: var(--interactive-background-gray-faded); }

/* input text medium */
.input_medium .input_css { height: var(--size-36); }

/* input text large */
.input_large .input_css { height: var(--size-48); }
.input_large .form-control { font-size: var(--fz-size-16); }
.input_large .form-control::placeholder{ color: var(--surface-text-gray-subtle) !important; font-size: var(--fz-size-16); font-weight: var(--fw-400); line-height: var(--lineheight-24); }
.input_large .input-group-text { font-size: var(--fz-size-16); line-height: var(--lineheight-24); }
.input_large .input-group-text i { font-size: var(--fz-size-20); }
.input_large .form_label { color: var(--surface-text-gray-subtle); font-weight: var(--fw-700); font-size: var(--fz-size-14); line-height: var(--lineheight-24); }
.label_position.input-wrapper .form_label {width: 120px;}
.input_css.disabled:hover{ background-color: transparent; pointer-events: none !important; }
.input_css.disabled .form-control::placeholder, .input_css.disabled .form-control { color: var(--surface-text-gray-disabled) !important; }
.input_css a{color:var(--surface-text-gray-subtle); text-decoration: none;}
.input_css .link_color a{color: var(--interactive-text-primary-normal);}

.input_medium .input_css.read-only {background-color: var(--interactive-background-gray-faded); pointer-events: none; }

.input_medium .input_css.read-only {background-color: var(--interactive-background-gray-faded); pointer-events: none; }

/* textarea css */
.inputtextarea .form-control{ font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle) !important; line-height: var(--lineheight-20); background-color: var(--surface-background-gray-moderate); }
.form-control textarea:hover{ font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle) !important; line-height: var(--lineheight-20); background-color: var(--surface-background-gray-faded); }
.inputtextarea .form-control::placeholder{ font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle) !important; line-height: var(--lineheight-20); }
.inputtextarea .form-control:focus{ outline: 2px solid var(--interactive-border-primary-default) !important; }
.inputtextarea .form-control { border-color: var(--interactive-border-gray-default); border-width: var(--bwidth-thin); border-radius: var(--bradius-medium); height: 56px; color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); }
.inputtextarea .input-group .form-control:hover{ background-color: var(--interactive-background-gray-faded); }
.inputtextarea .input-group.active .form-control { background-color: var(--interactive-background-gray-faded); border-color: var(--interactive-border-primary-default); border-width: var(--bwidth-thick); }
.inputtextarea .form-control:disabled { background-color: var(--surface-background-gray-intense); }
.inputtextarea .disabled .form-control::placeholder, .inputtextarea .disabled .form-control { color: var(--surface-text-gray-disabled); }
.inputtextarea.success .form-control { border-width: var(--bwidth-thick); border-color: var(--interactive-border-positive-default); }
.inputtextarea.success .help_text { color: var(--feedback-text-positive-intense); }
.inputtextarea.success .help_text i { font-size: var(--fz-size-12); }
.inputtextarea.error .form-control { border-width: var(--bwidth-thick); border-color: var(--interactive-border-negative-default); }
.inputtextarea.error .help_text { color: var(--feedback-text-negative-intense); }
.inputtextarea.error .help_text i { font-size: var(--fz-size-12); }
.inputtextarea .maxline3 .form-control { height: 76px; }
.inputtextarea .maxline4 .form-control { height: 96px; }
.inputtextarea .maxline5 .form-control { height: 116px; }
.inputtextarea .maxline6 .form-control { height: 136px; }
.inputtextarea .maxline6 .form-control { height: 136px; }
.textarea_large .form_label { font-size: var(--fz-size-14); }
.textarea_large .form-control { height: 64px; color: var(--surface-text-gray-subtle); }
.textarea_large .form-control::placeholder{ font-size: var(--fz-size-16); line-height: var(--lineheight-24); color: var(--surface-text-gray-subtle) !important; }
.textarea_large .form-control { height: 64px; font-size: var(--fz-size-16); }
.textarea_large .help_text { font-size: var(--fz-size-14); }
.textarea_large .maxline3 .form-control { height: 88px; }
.textarea_large .maxline4 .form-control { height: 112px; }
.textarea_large .maxline5 .form-control { height: 136px; }
.inputtextarea .input-group.disabled .form-control:hover { pointer-events: none; background-color: var(--surface-background-gray-intense); }
.inputtextarea .input-group .form-control.hover { background-color: var(--surface-background-gray-faded); }

/* input otp css */
.input_otp.form-control { border: var(--bwidth-thin) solid var(--interactive-border-gray-default) !important; border-radius: var(--bradius-medium); padding: var(--spacing-3) var(--spacing-4) !important; background-color: var(--surface-background-gray-moderate); text-align: center; height: 36px; font-size: var(--fz-size-20); }
.input_otp.form-control::placeholder { font-size: var(--fz-size-20); color: var(--surface-text-gray-subtle) !important; }
.input_large .input_otp.form-control { height: 48px; }
.input_large .input_otp.form-control::placeholder    { font-size: var(--fz-size-24); color: var(--surface-text-gray-subtle) !important; }
.input_large .help_text { font-size: var(--fz-size-14); }
.input_otp.hover, .input_otp:hover { background-color: var(--interactive-background-gray-faded); }
.input_otp.active { border: var(--bwidth-thick) solid var(--interactive-border-primary-default) !important; background-color: var(--interactive-background-gray-faded); border-radius: var(--bradius-medium) !important; }
.input_otp.active { border: var(--bwidth-thick) solid var(--interactive-border-primary-default) !important; background-color: var(--interactive-background-gray-faded); border-radius: var(--bradius-medium) !important; }
.input_otp.disabled:hover { background-color: transparent; pointer-events: none; }
.input_otp.disabled.form-control::placeholder, .input_otp.disabled.form-control { color: var(--surface-text-gray-disabled); }
.input_otp.success { border-width: var(--bwidth-thick) !important; border-color: var(--interactive-border-primary-default) !important; background-color: var(--surface-background-gray-intense); }
.input_otp.success { border-width: var(--bwidth-thick) !important; border-color: var(--interactive-border-primary-default) !important; background-color: var(--surface-background-gray-intense); }
.input_otp.error { border-color: var(--interactive-border-negative-default) !important; }
.input-wrapper .break { color: var(--surface-text-gray-disabled); margin-left: 1px !important; text-align: center; font-size: var(--fz-size-20); background-color: transparent; }
.input-wrapper .break { color: var(--surface-text-gray-disabled); margin-left: 1px !important; text-align: center; font-size: var(--fz-size-20); background-color: transparent; }
.input_otp:focus { outline: 2px solid var(--interactive-border-primary-default) !important; }

/* radio button css */
.radio_wrapper .form-check-input { margin-top: 0; margin-right: 8px; }
.radio_wrapper .form-check-input:hover { background-color: var(--interactive-background-gray-faded); }
.radio_wrapper .form-check-input:focus { box-shadow: none; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important; }
.radio_wrapper .form-check-input:focus { box-shadow: none; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important; }
.radio_wrapper .form-check-input:checked:hover { background-color: var(--interactive-background-primary-highlighted); }
.radio_wrapper .form-check-input:checked { background-color: var(--interactive-background-primary-default); border: none; }
.small_radio .form-check-input { width: 12px; height: 12px; border: var(--bwidth-thick) solid var(--interactive-border-gray-default); }
.small_radio .form-check-label { font-size: var(--fz-size-12); color: var(--surface-text-gray-subtle); line-height: var(--lineheight-18); }
.medium_radio .form-check-input { width: 16px; height: 16px; border: var(--bwidth-thick) solid var(--interactive-border-gray-default); }
.medium_radio .form-check-label { font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); line-height: var(--lineheight-20); }
.large_radio .form-check-input { width: 20px; height: 20px; border: var(--bwidth-thick) solid var(--interactive-border-gray-default); }
.large_radio .form-check-label { font-size: var(--fz-size-16); color: var(--surface-text-gray-subtle); line-height: var(--lineheight-24); }
.radio_wrapper .form-check-input.hover { background-color: var(--interactive-background-gray-faded); }
.radio_wrapper.disabled .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-gray-default); opacity: 0.5;}
.radio_wrapper.disabled .form-check-label { color: var(--global-disabled-text-color); opacity:1;}
.radio_wrapper.disabled .form-check-input:checked { background-color: var(--interactive-background-primary-disabled) !important; }
.radio_wrapper.error .form-check-input:focus { box-shadow: none; outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important;}
.radio_wrapper.error .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-negative-default); }.radio_wrapper.error .form-check-input:checked { background-color: var(--interactive-border-negative-default); }

.radio_wrapper.error .form-check-input:focus { box-shadow: none; outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important;}
.radio_wrapper.error .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-negative-default); }.radio_wrapper.error .form-check-input:checked { background-color: var(--interactive-border-negative-default); }

.form-check.radio_wrapper { margin-bottom: 0; }
.help_text.radio_text { font-size: var(--fz-size-14); margin-bottom: 0; }
.error_text.radio_text { color: var(--feedback-text-negative-intense); }
.error_text.radio_text i { font-size: var(--fz-size-14); }
.radio_wrapper .form-check-input.hover:checked { background-color: var(--interactive-background-primary-default); border: none; }

/* switch css */
.form-switch.switch_wrapper .form-check-input { background-image: url(../svg/thumb-circle.svg); }
.switch_wrapper .form-check-input { background-color: var(--interactive-background-staticblack-disabled); padding: var(--switch-small-padding); border: none; }
.form-switch.switch_wrapper .form-check-input:checked { background-position: right center; background-image: url(../svg/thumb-check.svg); }
.switch_wrapper .form-check-input:checked { background-color: var(--interactive-background-primary-default); border-color: var(--interactive-background-primary-default); }
.switch_wrapper.switch_small .form-check-input { width: 28px; height: 16px; }
.switch_wrapper.switch_medium .form-check-input { width: 36px; height: 20px; }
.switch_wrapper .form-check-input:hover { background-color: var(--interactive-background-staticblack-disabled); }
.switch_wrapper .form-check-input:checked:hover { background-color: var(--interactive-background-primary-highlighted); }
.switch_wrapper.hover .form-check-input { background-color: var(--interactive-background-staticblack-disabled) !important; }
.switch_wrapper.hover .form-check-input:checked { background-color: var(--interactive-background-primary-highlighted) !important; }
.switch_wrapper.disabled .form-check-input { background-color: var(--global-disabled-button-bgcolor); border: none; }
.switch_wrapper.disabled .form-check-input:checked { background-color: var(--global-disabled-button-bgcolor); }
.switch_wrapper .form-check-input:focus, .switch_wrapper .form-check-input:focus-visible { color: var(--interactive-text-onprimary-normal) !important; border-color: var(--interactive-border-positive-default) !important; outline: 2px solid var(--interactive-border-positive-default) !important; box-shadow: none !important; outline-offset: 2px !important;}

/* checkbox css start */
.form-check-input { --bs-form-check-bg: transparent; flex-shrink: 0; width: 1em; height: 1em; margin-top: .25em; vertical-align: top; -webkit-appearance: none; appearance: none; }
.check_wrapper .form-check-input[type=checkbox] { border-radius: var(--bradius-small); }
.check_wrapper .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-gray-default); margin-top: 0; }
.check_wrapper.check_small .form-check-input { width: 12px; height: 12px; }
.check_wrapper label { color: var(--surface-text-gray-subtle); margin-left: 10px; }
.check_wrapper.check_small label { font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.check_wrapper.check_medium label { font-size: var(--fz-size-14); line-height: var(--lineheight-20); }
.check_wrapper.check_large label { font-size: var(--fz-size-16); line-height: var(--lineheight-24); }
.check_wrapper .form-check-input:checked { background-color: var(--interactive-background-primary-default); border: none; }
.check_wrapper .form-check-input:focus {box-shadow: none; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important;}
.check_wrapper .form-check-input:focus {box-shadow: none; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important;}
.check_wrapper .form-check-input:hover { background-color: var(--interactive-background-gray-faded); }
.check_wrapper .form-check-input:checked:hover { background-color: var(--interactive-background-primary-highlighted); }
.check_wrapper.check_medium .form-check-input { width: 16px; height: 16px; }
.check_wrapper.check_large .form-check-input { width: 20px; height: 20px; }
.check_wrapper.hover .form-check-input { background-color: var(--interactive-background-gray-faded); }
.check_wrapper.hover .form-check-input { background-color: var(--interactive-background-gray-faded); }
.check_wrapper.hover .form-check-input:checked { background-color: var(--interactive-background-primary-highlighted); }
.check_wrapper.disabled .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-gray-default); opacity:0.5; }
.check_wrapper.disabled label { color: var(--global-disabled-text-color); opacity:1 !important;}
.check_wrapper.disabled .form-check-input:checked { background-color: var(--interactive-background-primary-disabled); border: none; }
.check_wrapper.error .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-negative-default); }
.check_wrapper.error .form-check-input { border: var(--bwidth-thick) solid var(--interactive-border-negative-default); }
.check_wrapper.error .form-check-input:checked { background-color: var(--interactive-background-negative-default); }
.check_wrapper.error .form-check-input:focus {box-shadow: none;  outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important;}
.check_wrapper.error .form-check-input:focus {box-shadow: none;  outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important;}
.help_text.check_help_small { font-size: var(--fz-size-11); }
.help_text.check_help_large { font-size: var(--fz-size-14); }
.help_text.error_check_text { font-size: var(--fz-size-11); color: var(--feedback-text-negative-intense); }
.help_text.error_check_text i{ font-size: var(--fz-size-11); }
.indeterminate .form-check-input:checked[type=checkbox] { background-image: url(../svg/union.svg); }

/* Global Header CSS */
.header-wrapper { position: relative; z-index: 100; }
.header-wrapper:has(.dropdown-menu.show) { z-index: 300; }
.header-wrapper:has(.gh-search-panel.show) { z-index: 300; }
.header-wrapper .header { position: initial !important; }
.header-wrapper .header .i3_header { min-height: 56px; }
.i3_header .vr { vertical-align: middle; color: var(--surface-border-gray-normal); margin: 0 10px; height: 20px; display: inline-block; align-self: center; opacity: 1; }
.header-wrapper .dropdown-toggle::after { display: none; }
.hide-arrow::after{ display: none; }
/* Only apply right-align to FIRST-LEVEL nav dropdowns, not nested submenus */
.header-wrapper .navbar-nav > .nav-item > .dropdown-menu[data-bs-popper] { left: auto !important; right: 0 !important; }
.user_details .dropdown-menu { background-color: var(--surface-background-gray-subtle); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); margin-top: 7px; width: auto; min-width: 200px; box-shadow: 0px 16px 48px -4px var(--elevation-highraised); position: absolute; --bs-dropdown-link-hover-bg: var(--interactive-background-gray-default); --bs-dropdown-link-hover-color: var(--interactive-text-gray-normal); --bs-dropdown-link-active-bg: var(--interactive-background-primary-faded); --bs-dropdown-link-active-color: var(--interactive-text-gray-normal); }
.user_details .dropdown-divider { border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.user_details .dropdown-menu .dropdown-item { width: auto; padding-top: var(--actionlistitem-contenttype-default-padding-vertical); padding-bottom: var(--actionlistitem-contenttype-default-padding-vertical); padding-left: var(--actionlistitem-contenttype-default-padding-horizontal); padding-right: var(--actionlistitem-contenttype-default-padding-horizontal); color: var(--interactive-text-gray-normal); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-400); cursor: pointer; }
.user_details .dropdown-menu .dropdown-item i { color: var(--interactive-text-gray-normal); font-size: var(--fz-size-20); margin-right: 0; flex-shrink: 0; }
.right_button a { margin: 3px 6px; }
.user_details .dropdown-menu .dropdown-item.active { background-color: var(--interactive-background-primary-faded); border-radius: var(--actionlistitem-contenttype-default-borderradius); }
.user_details .dropdown-menu .dropdown-item.logout, .user_details .dropdown-menu .dropdown-item.logout i { color: var(--interactive-text-negative-normal); }
.user_details .user_name { padding: 10px 14px; }
.user_name .user_role h6 { color: var(--surface-text-gray-normal); font-size: var(--fz-size-16); font-weight: var(--fw-700); }
.user_name .user_role span { color: var(--surface-text-gray-muted); font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.user_details .dropdown-item:hover { background-color: var(--interactive-background-gray-default); }
.user_details .dropdown-item { border-radius: var(--bradius-medium); }
.user_details .dropdown-item.active:hover { background-color: var(--interactive-background-primary-fadedHighlighted); }
.user_details .dropdown-item { display: flex; align-items: center; gap: var(--spacing-3); }
/* Remove focus ring for mouse users, keep it for keyboard users */
.header-wrapper .dropdown-menu .dropdown-item:focus { outline: none !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); }
.header-wrapper .dropdown-menu .dropdown-item:focus-visible { outline: var(--bwidth-thick) solid var(--surface-border-primary-normal) !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.header-wrapper .dropdown-menu .dropdown-item:focus-visible { outline: var(--bwidth-thick) solid var(--surface-border-primary-normal) !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }

/* Theme dropdown keyboard focus styling */
.theme-drop .dropdown-menu .dropdown-item:focus { outline: none !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); }
.theme-drop .dropdown-menu .dropdown-item:focus-visible { outline: var(--bwidth-thick) solid var(--surface-border-primary-normal) !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.theme-drop .dropdown-menu .dropdown-item:focus-visible { outline: var(--bwidth-thick) solid var(--surface-border-primary-normal) !important; box-shadow: none !important; background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.theme-drop .dropdown-menu .dropdown-item:hover,
.theme-drop .dropdown-menu .dropdown-item:focus,
.theme-drop .dropdown-menu .dropdown-item:focus-visible,
.theme-drop .dropdown-menu .dropdown-item.active,
.theme-drop .dropdown-menu .dropdown-item:active { color: var(--interactive-text-gray-normal) !important; background-color: var(--interactive-background-gray-default) !important; }
.theme-drop .dropdown-menu .dropdown-item:hover i,
.theme-drop .dropdown-menu .dropdown-item:focus i,
.theme-drop .dropdown-menu .dropdown-item:focus-visible i,
.theme-drop .dropdown-menu .dropdown-item.active i,
.theme-drop .dropdown-menu .dropdown-item:active i { color: var(--interactive-text-gray-normal) !important; }
.user_details.language .dropdown-toggle { color: var(--interactive-text-staticwhite-normal); font-size: var(--fz-size-12); font-weight: var(--fw-700); }
.user_details.language .dropdown-toggle i { font-size: var(--fz-size-12); margin-left: 4px; }
.user_details.language { display: flex; justify-content: center; align-items: center; position: relative; font-size: var(--fz-size-14); margin-right: 5px; }
.user_details {position: relative;}
/* Scoped to non-header contexts only — header overrides this via .i3_header .navbar-nav .dropdown-menu */
.navbar-expand-lg .navbar-nav .dropdown-menu{ left: -140px}
.user_details.language a { padding-left: var(--button-xsmall-horizontal-padding) !important; padding-right: var(--button-xsmall-horizontal-padding) !important; height: 28px; background-color: var(--interactive-background-staticwhite-faded); border-radius: var(--bradius-medium); display: flex; align-items: center; }
.navbar.res_header .i3_logo img{height: 24px;}
.navbar.res_header .public_logo img{ /*height: 40px;*/}
.navbar.res_header .public_logo1 img{ height: 14px;}
.navbar.small_header .public_logo img{ /*height: 40px;*/}
.i3_header .navbar.res_header { padding: 5px; }
.mobile_menu i { color: var(--surface-text-staticwhite-normal); }
.header-wrapper.mobile_header .navbar-expand-lg .navbar-toggler.mobile_view { display: block; }
.header-wrapper.mobile_header .i3_header { width: 320px; }
.header-wrapper.mobile_header a.i3_logo img { width: 90px; }
.header-wrapper.mobile_header .vr.left_line { margin: 0 2px; }
.header-wrapper.mobile_header .header .i3_header { min-height: 44px; }
.right_menu .icon-menu { color: var(--surface-text-staticwhite-normal); vertical-align: middle; }
.right_menu { border: none; }
.navbar-toggler.right_menu:focus { box-shadow: none !important; }

/* Global Header - Light Theme */
.i3_header.i3_header-light { background-color: var(--surface-background-gray-moderate); }
.i3_header.i3_header-light a { color: var(--interactive-text-gray-normal); }
.i3_header.i3_header-light .icon_color { color: var(--surface-icon-gray-normal); }
/* Company logo uses the theme-aware filter variable (dark mode: invert, light mode: none) */
.i3_header.i3_header-light .public_logo img { filter: var(--footer-logo-filter); }
.i3_header.i3_header-light .vr { color: var(--surface-border-gray-muted); }
.i3_header.i3_header-light .right_menu .icon-menu { color: var(--surface-icon-gray-normal); }
.i3_header.i3_header-light .user_details.language .dropdown-toggle { color: var(--interactive-text-gray-normal); }
.i3_header.i3_header-light .user_details.language a { background-color: var(--interactive-background-gray-default); color: var(--interactive-text-gray-normal); }

/* Global Header - Action Bar */
.i3_header .gh-toggle { background: transparent; border: none; padding: 4px; cursor: pointer; border-radius: var(--bradius-medium); display: inline-flex; align-items: center; }
.i3_header .gh-toggle:focus { box-shadow: none; outline: none; }
.i3_header .gh-toggle .icon-menu { color: var(--surface-text-staticwhite-normal); }
.i3_header.i3_header-light .gh-toggle .icon-menu { color: var(--surface-icon-gray-normal); }
.i3_header .app-name { color: var(--surface-text-staticwhite-normal); font-family: "Raleway", sans-serif; font-size: var(--fz-size-16); font-weight: var(--fw-400); margin-left: var(--spacing-2); white-space: nowrap; }
.i3_header.i3_header-light .app-name { color: var(--interactive-text-gray-normal); }
.i3_header .gh-badge { position: absolute; top: -2px; right: -4px; pointer-events: none; }
.i3_header .gh-caret { font-size: var(--fz-size-10); margin-left: 2px; vertical-align: middle; }
.i3_header .gh-search-btn { background: transparent; border: none; cursor: pointer; padding: 0; color: inherit; display: inline-flex; align-items: center;margin: 3px 0px; }
.i3_header .gh-search-btn:focus { outline: none; box-shadow: none; }
/* Suppress Bootstrap's default box-shadow focus ring on header dropdown toggles — we use outline from global a:focus rule */
.i3_header a.dropdown-toggle:focus, .i3_header a.dropdown-toggle:focus-visible { box-shadow: none !important; }
.gh-search-panel { display: none; }
.gh-search-panel.show { display: block; }

/* Search Dropdown - inline nav icon that opens a search input below */
.gh-search-dropdown .dropdown-menu.gh-search-menu { min-width: 320px; padding: var(--spacing-2); }
.gh-search-menu .gh-search-input-wrap { padding: 0; cursor: default; background: transparent !important; }
.gh-search-menu .gh-search-input-wrap:hover { background-color: transparent !important; }
.gh-search-menu .inputtext { width: 100%; }

/* Global Header - User & Help Dropdowns */
.i3_header .user_details .dropdown-menu { min-width: 205px; }
.gh-user-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: var(--surface-background-primary-intense); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-user-avatar i { color: var(--surface-text-staticwhite-normal); font-size: var(--fz-size-24); }
.i3_header .gh-user-menu .dropdown-menu { min-width: 280px; }
.gh-user-card { border: 2px solid var(--interactive-border-primary-default); border-radius: var(--bradius-medium); padding: var(--spacing-3); display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-2); }
.gh-user-card h6 { font-size: var(--fz-size-16); font-weight: var(--fw-700); color: var(--surface-text-gray-normal); margin-bottom: 2px; }
.gh-user-card .gh-user-email { font-size: var(--fz-size-12); color: var(--surface-text-gray-muted); }
.gh-role-chip { border: 1px solid var(--surface-border-gray-muted); border-radius: var(--bradius-max); padding: 2px 10px; font-size: var(--fz-size-12); color: var(--surface-text-gray-normal); white-space: nowrap; display: inline-block; }
.gh-pref-header { font-size: var(--fz-size-12); font-weight: var(--fw-700); color: var(--surface-text-gray-muted); text-transform: uppercase; padding: var(--spacing-3) var(--spacing-4) var(--spacing-1); letter-spacing: 0.08em; display: block; }
.user_details .dropdown-menu .dropdown-item.gh-pref-item { display: flex; align-items: center; justify-content: space-between; color: var(--surface-text-gray-muted) !important; }
.user_details .dropdown-menu .dropdown-item.gh-pref-item .gh-pref-left { display: flex; align-items: center; gap: var(--spacing-2); }
.user_details .dropdown-menu .dropdown-item.gh-pref-item i.gh-caret-right { font-size: var(--fz-size-14); color: var(--surface-text-gray-muted); }
.i3_header .user_details .dropdown-menu .dropdown-item { display: flex; align-items: center; }
/* Nested submenu for preferences */
.user_details .dropdown-menu .dropstart { position: relative; }
.user_details .dropdown-menu .gh-submenu { min-width: 180px; position: absolute; top: 0; left: auto; right: 100%; margin: 0; display: none; background-color: var(--surface-background-gray-subtle); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); box-shadow: 0px 8px 24px -4px var(--elevation-highraised); z-index: 1200;}
.user_details .dropdown-menu .dropstart .dropdown-toggle::after { display: none; }
.user_details .dropdown-menu .dropstart .dropdown-toggle::before { display: none !important; }
.user_details .dropdown-menu .dropstart:hover > .gh-submenu { display: block; }
/* JS handles smart submenu flip; override Popper.js inline to stay controlled by CSS/JS */
.user_details .dropdown-menu .gh-submenu[data-bs-popper] { left: auto !important; right: 100% !important; top: 0 !important; transform: none !important; }

/* Global Header - always override the global left:-140px dropdown rule inside header */
.i3_header .navbar-nav .dropdown-menu { left: auto; right: 0; }
.navbar-nav .nav-item.position-relative { margin: 0 5px;}

/* how to use it for designer */
.design_wrapper h4 { background-color: var(--surface-border-gray-muted); padding: 10px 15px; border-radius: var(--bradius-medium); margin-bottom: 30px; }
.design_wrapper ul li { list-style-type: disc; margin-left: 15px; }

/* modal-css */
.modal_wrapper .modal-content { border: none; box-shadow: 0px 16px 48px -4px var(--elevation-highraised); border-radius: var(--bradius-large); background-color: var(--popup-background-subtle); }
.modal_wrapper .modal-header { min-height: 82px; padding: var(--spacing-5); justify-content: space-between; }
.modal_wrapper .modal-header .modal-title { font-size: var(--fz-size-16); line-height: var(--lineheight-24); font-weight: var(--fw-700); color: var(--surface-text-gray-normal); }
.modal_wrapper .modal-header span { color: var(--surface-text-gray-muted); font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.modal_wrapper .modal-header .btn-icon-20 { color: var(--interactive-icon-gray-muted); }
.modal_wrapper .modal-footer { display: block; text-align: right; }
.modal_wrapper .modal-footer { border-top: var(--bradius-xsmall) solid var(--surface-border-gray-muted); }
.modal_wrapper .modal-header { border-bottom: var(--bradius-xsmall) solid var(--surface-border-gray-muted); }
.modal_sm .modal-content { width: 400px; }
.modal_static { z-index: 0; }
.modal_button .modal-dialog { margin-top: 90px; }
.modal_wrapper .modal-body { min-height: 80px; overflow-y: auto; max-height: 400px; }

/* table css start */
.table-wrapper{ position: relative; overflow-x: auto;}
.table-wrapper thead th { background-color: var(--interactive-background-gray-default) !important; padding: var(--spacing-5) var(--spacing-4); }
.table-wrapper tbody td, td { background-color: var(--surface-background-gray-moderate); padding: var(--spacing-5) var(--spacing-4); }
.table-wrapper th a.sort_arrow:before { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e842'; font-family: "feather"; position: absolute; right: 5%; top: 38%; color: var(--interactive-icon-gray-muted); }
.table-wrapper th a.sort_arrow:after { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e845'; font-family: "feather"; position: absolute; right: 5%; top: 18%; color: var(--interactive-icon-gray-muted); }
.table-wrapper thead th a { text-align: right; float: right; width: 22px; height: 18px; content: ''; }
a.fooicon{ width: 18px !important;}
.table-wrapper th { position: relative; color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-700); }
.table-wrapper th a.sort_arrow.active:after { color: var(--interactive-icon-primary-subtle); }
.table-wrapper tr td { color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); line-height: var(--lineheight-20); padding: var(--spacing-4); }
td .icon_details { font-size: var(--fz-size-18); color: var(--surface-icon-gray-normal); vertical-align: middle; margin-right: 3px; }
.table-wrapper td sub { bottom: 0; }
.table-wrapper td .numbers { font-weight: var(--fw-700); }
.table-wrapper td.mobile_number { text-align: right; }
.table-wrapper td .action_button i { font-size: var(--fz-size-16); color: var(--interactive-icon-primary-normal); }
.table-wrapper td .action_button a { font-weight: var(--fw-700); color: var(--interactive-icon-primary-normal); text-decoration: none; }
.table-wrapper tr td { border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.table-wrapper tr th { border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.table-wrapper .label_details i { font-size: var(--fz-size-10); color: var(--surface-icon-gray-normal); }
.table-wrapper .label_details { font-weight: var(--fw-600); }
.table-wrapper .icon_size a{ font-size: var(--fz-size-20); color: var(--surface-icon-gray-normal); text-decoration: none; }
.table-wrapper tr.compact td { padding: var(--spacing-4); }
.table-wrapper tr.expanded td { padding: var(--spacing-6); padding-left: var(--spacing-4); }
.table-wrapper tr.condensed td { padding: var(--spacing-3); }
.table-wrapper tr:hover td { background-color: var(--interactive-background-gray-default) !important; cursor: pointer; }
.table-wrapper tr td:focus { outline: 2px solid var(--surface-background-primary-intense); border-radius: var(--bradius-small); }
.table-wrapper tr td.active { background-color: var(--interactive-background-gray-default); }
.table-wrapper tr td.hover { background-color: var(--interactive-background-gray-default); }
.table-wrapper tr td.focus { outline: 2px solid var(--surface-background-primary-intense); border-radius: var(--bradius-small); }
.input_text .input-wrapper { min-height: auto; }
.table-wrapper tr th { vertical-align: middle; }
.pagination .form-select { font-size: var(--fz-size-14); }
.header_button { background-color: var(--surface-background-gray-intense); padding: var(--spacing-5); padding-bottom: 0; }
.details{ font-size: var(--fz-size-14); }
.right_button .dropdown-toggle::after { display: none; }
.table{ margin-bottom: 0px !important;}
.table_Details { background-color: var(--surface-background-gray-intense); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.summary_details { background-color: var(--feedback-background-neutral-subtle); padding: var(--spacing-5) var(--spacing-9); }
.summary_details span { color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--line-height-20); }
.header_button .items { color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--line-height-20); }

/* pagination css start */
.page_wrapper .page-link span i { font-size: var(--fz-size-18) !important; vertical-align: middle; }
.page_wrapper .page-link { color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); line-height: var(--line-height-20); background-color: var(--transparent); border: none; border-radius: var(--bradius-medium); }
.page_wrapper a.arrow { background-color: var(--interactive-background-gray-default); }
.page_wrapper a.arrow:hover { background-color: var(--interactive-background-gray-highlighted); }
.page_wrapper a.arrow:focus { background-color: var(--interactive-background-gray-highlighted); outline: 2px solid var(--interactive-border-primary-default) !important; }
.page_wrapper a.icon_bg { padding: 6px 8px; }
.page_wrapper .page-item:first-child .page-link { border-radius: var(--bradius-medium); }
.page_wrapper .page-link:hover { background-color: var(--interactive-background-gray-default); }
.page_wrapper .page-link:focus { background-color: var(--interactive-background-gray-default); outline: 2px solid var(--surface-background-primary-intense) !important; box-shadow: none; }
.page_wrapper .page-link.active { background-color: var(--interactive-background-gray-default); }
.page_wrapper .page-link.select { background-color: var(--interactive-background-primary-faded); color: var(--surface-text-primary-normal); }
.page_wrapper .page-item.disabled .page-link { background-color: var(--interactive-background-gray-disabled); color: var(--interactive-icon-gray-disabled); }
.page_wrapper li.page-item { margin-right: 5px; }
.page_wrapper .total_pages { margin: 0px 10px 0 5px; }
.page_wrapper .form-select { background-color: var(--interactive-background-gray-default); border-top-left-radius: var(--bradius-small); border-top-right-radius: var(--bradius-small); border-bottom-left-radius: var(--bradius-none); border-bottom-right-radius: var(--bradius-none); border:transparent; border-bottom: var(--surface-border-gray-normal); border-style: solid; border-width: var(--bwidth-thin); padding: 5px 30px 5px 15px;}
.page_wrapper .form-select { background-color: var(--interactive-background-gray-default); border-top-left-radius: var(--bradius-small); border-top-right-radius: var(--bradius-small); border-bottom-left-radius: var(--bradius-none); border-bottom-right-radius: var(--bradius-none); border:transparent; border-bottom: var(--surface-border-gray-normal); border-style: solid; border-width: var(--bwidth-thin); padding: 5px 30px 5px 15px;}
.page_wrapper .pagination { display: flex; align-items: center; }
.table-wrapper .pagination_details { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-5); }

/* divider */
.divider-h-thin { border-top: var(--bwidth-thin) solid var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-thick { border-top: var(--bwidth-thick) solid var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-thicker { border-top: var(--bwidth-thick) solid var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-thicker { border-top: var(--bwidth-thick) solid var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-subtle { border-top: var(--bwidth-thin) solid var(--surface-border-gray-subtle); margin: 1rem 0; }
.divider-h-muted { border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); margin: 1rem 0; }
.bg-gray { background-color: var(--surface-background-gray-subtle); }
.divider-h-dashed { border-top: var(--bwidth-thin) dashed var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-v-thin { min-height: 85px; width: var(--bwidth-thin); background-color: var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-thick { min-height: 85px; width: var(--bwidth-thick); background-color: var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-thicker { min-height: 85px; width: var(--bwidth-thick); background-color: var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-thicker { min-height: 85px; width: var(--bwidth-thick); background-color: var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-subtle { min-height: 85px; width: var(--bwidth-thin); background-color: var(--surface-border-gray-subtle); margin: 0 10px; }
.divider-v-muted { min-height: 85px; width: var(--bwidth-thin); background-color: var(--surface-border-gray-muted); margin: 0 10px; }
.divider-v-dashed { min-height: 85px; width: var(--bwidth-thin); border: var(--bwidth-thin) dashed var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-dashed-thick { min-height: 85px; width: var(--bwidth-thick); border: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-dashed-thicker { min-height: 85px; width: var(--bwidth-thick); border: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-dashed-thicker { min-height: 85px; width: var(--bwidth-thick); border: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-dashed-normal { min-height: 85px; width: var(--bwidth-thin); border: var(--bwidth-thin) dashed var(--surface-border-gray-normal); margin: 0 10px; }
.divider-v-dashed-subtle { min-height: 85px; width: var(--bwidth-thin); border: var(--bwidth-thin) dashed var(--surface-border-gray-subtle); margin: 0 10px; }
.divider-v-dashed-muted { min-height: 85px; width: var(--bwidth-thin); border: var(--bwidth-thin) dashed var(--surface-border-gray-muted); margin: 0 10px; }
.divider-h-dashed-thick { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-dashed-thicker { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-dashed-thicker { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-dashed-normal { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); margin: 1rem 0; }
.divider-h-dashed-subtle { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-subtle); margin: 1rem 0; }
.divider-h-dashed-muted { border-top: var(--bwidth-thick) dashed var(--surface-border-gray-muted); margin: 1rem 0; }

/* Tab page - CSS */
.tab_wrapper .tab_icon { font-size: var(--fz-size-16); margin-right: 5px; }
.tab_wrapper .nav-link .badge-md { vertical-align: middle; }
.tab_wrapper.tab_small .nav-link { color: var(--interactive-text-gray-muted); font-size: var(--fz-size-12); line-height: var(--lineheight-18); font-weight: var(--fw-700); border-radius: var(--bradius-none); padding: var(--tab-small-bordered-horizontal-vertical-padding); }
.tab_wrapper.tab_medium .nav-link { color: var(--interactive-text-gray-muted); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-700); border-radius: var(--bradius-none); padding: var(--tab-medium-bordered-horizontal-vertical-padding); }
.tab_wrapper.tab_large .nav-link { color: var(--interactive-text-gray-muted); font-size: var(--fz-size-16); line-height: var(--lineheight-24); font-weight: var(--fw-700); border-radius: var(--bradius-none); padding: var(--tab-medium-bordered-horizontal-vertical-padding); }
.tab_wrapper.tab_width .nav-link { padding-left: 0; padding-right: 0; margin-right: var(--size-32); }
.tab_wrapper ul { border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted);}
.tab_wrapper.tab_border ul { border-bottom: none; }
.tab_wrapper .nav-pills .nav-link.active, .nav-pills .show>.nav-link { border-bottom: var(--bwidth-thick) solid var(--interactive-border-primary-default); background-color: var(--transparent); color: var(--interactive-text-primary-normal); }
.tab_wrapper .nav-link:hover { color: var(--interactive-text-gray-subtle); border-bottom: var(--bwidth-thick) solid var(--interactive-border-gray-highlighted); }
.tab_wrapper .nav-pills .nav-link.active, .nav-pills .show>.nav-link { border-bottom: var(--bwidth-thick) solid var(--interactive-border-primary-default); background-color: var(--transparent); color: var(--interactive-text-primary-normal); }
.tab_wrapper .nav-link:hover { color: var(--interactive-text-gray-subtle); border-bottom: var(--bwidth-thick) solid var(--interactive-border-gray-highlighted); }
.tab_wrapper .nav-link:focus { outline: 2px solid var(--muted) !important; border-radius: var(--bradius-small); color: var(--interactive-text-gray-subtle); }
.tab_wrapper .nav-link.disabled { color: var(--global-disabled-text-color); }
.tab_filled ul { background-color: var(--surface-background-gray-intense); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); border-radius: var(--bradius-small); }
.tab_filled .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: var(--interactive-background-primary-faded); color: var(--interactive-text-primary-normal); border-radius: var(--bradius-small); }
.tab_filled .nav-item { padding: 5px; position: relative; }
.tab_filled .nav-link { color: var(--interactive-text-gray-muted); font-weight: var(--fw-700); border-radius: var(--bradius-none); }
.tab_filled .nav-link:after { content: ""; position: absolute; border-top: 15px solid var(--subtle); width: 1px; top: 35%; right: 2%; }
.tab_filled .nav-item:last-child .nav-link::after { display: none; }
.tab_filled .nav-link.active::after{ display: none; }
.tab_filled .nav-link:hover { background-color: var(--interactive-background-gray-default); color: var(--interactive-text-gray-subtle); }
.tab_filled .nav-link:focus { outline: 2px solid var(--muted) !important; border-radius: var(--bradius-small); color: var(--interactive-text-gray-subtle); background-color: var(--interactive-background-gray-default) ; }
.tab_filled .nav-link.disabled { color: var(--global-disabled-text-color); }
.tab_filled.tab_small .nav-link{ font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.tab_filled.tab_medium .nav-link{ font-size: var(--fz-size-14); line-height: var(--lineheight-20); }
.tab_filled.tab_large .nav-link{ font-size: var(--fz-size-16); line-height: var(--lineheight-24); }
.tab_vertical .nav-link { text-align: left; min-width: 112px; max-width: 130px; }
.tab_vertical .nav-pills { padding: 3px; background-color: var(--surface-background-gray-intense); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); border-radius: var(--bradius-small); }
.tab_border1 .nav-pills .nav-link.active, .nav-pills .show>.nav-link { border-left: var(--bwidth-thick) solid var(--interactive-border-primary-default); background-color: var(--transparent); border-radius: var(--bradius-none); }
.tab_border1 .nav-pills .nav-link.active, .nav-pills .show>.nav-link { border-left: var(--bwidth-thick) solid var(--interactive-border-primary-default); background-color: var(--transparent); border-radius: var(--bradius-none); }
.tab_filled.tab_vertical .nav-link:after { display: none; }
.tab_border1 .border_line .nav-link { border-left: var(--bwidth-thin) solid var(--interactive-text-gray-disabled); }
.tab_border1 .nav-link:hover { background-color: var(--transparent); color: var(--interactive-text-gray-subtle); border-left: var(--bwidth-thick) solid var(--interactive-background-gray-highlighted); }
.tab_border1 .nav-link:hover { background-color: var(--transparent); color: var(--interactive-text-gray-subtle); border-left: var(--bwidth-thick) solid var(--interactive-background-gray-highlighted); }
.tab_border1 .nav-link:focus { background-color: var(--transparent); }

/* Release Notes page CSS */
.rn-sticky-nav { position: sticky; top: 72px; }
.rn-version-title { margin-bottom: 0; }
.rn-date { color: var(--surface-text-gray-muted); }
.rn-badge-latest { background: var(--feedback-background-positive-subtle); color: var(--feedback-text-positive-intense); border: var(--bwidth-thin) solid var(--feedback-border-positive-subtle); border-radius: var(--bradius-round); padding: var(--spacing-1) var(--spacing-3); }
.rn-section-bugfix { color: var(--feedback-text-information-intense) !important; }
.rn-section-new { color: var(--feedback-text-positive-intense) !important; }
.rn-section-initial { color: var(--feedback-text-positive-intense) !important; }
.rn-list { padding-left: var(--spacing-5); list-style: disc; }
.rn-list li { margin-bottom: var(--spacing-3); }
.rn-badge-critical { background: var(--feedback-background-negative-subtle); color: var(--feedback-text-negative-intense); border: var(--bwidth-thin) solid var(--feedback-border-negative-subtle); border-radius: var(--bradius-round); padding: var(--spacing-1) var(--spacing-3); }
.rn-badge-high { background: var(--feedback-background-notice-subtle); color: var(--feedback-text-notice-intense); border: var(--bwidth-thin) solid var(--feedback-border-notice-subtle); border-radius: var(--bradius-round); padding: var(--spacing-1) var(--spacing-3); }
.rn-badge-medium { background: var(--feedback-background-information-subtle); color: var(--feedback-text-information-intense); border: var(--bwidth-thin) solid var(--feedback-border-information-subtle); border-radius: var(--bradius-round); padding: var(--spacing-1) var(--spacing-3); }
.rn-badge-low { background: var(--feedback-background-neutral-subtle); color: var(--feedback-text-neutral-intense); border: var(--bwidth-thin) solid var(--feedback-border-neutral-subtle); border-radius: var(--bradius-round); padding: var(--spacing-1) var(--spacing-3); }


/* progress bar CSS start */
.progress_wrapper .progress, .progress-stacked { background-color: var(--feedback-background-neutral-subtle); border-radius: var(--bradius-none); }
.progress_wrapper .progress-bar.primary { background-color: var(--surface-background-primary-intense); }
.progress_wrapper .label_bar span, .progress_wrapper .progress_label{ font-size: var(--fz-size-12); line-height: var(--lineheight-18); color: var(--surface-text-gray-subtle); }
.progress_wrapper .label_bar { margin-bottom: 8px; }
.progress_wrapper.p_small .progress, .progress-stacked { height: 2px; }
.progress_wrapper.p_large .progress, .progress-stacked { height: 4px; }
.progress_wrapper .progress-bar.positive { background-color: var(--feedback-background-positive-intense); }
.progress_wrapper .progress-bar.negative { background-color: var(--feedback-background-negative-intense); }
.progress_wrapper .progress-bar.notice { background-color: var(--feedback-background-notice-intense); }
.progress_wrapper .progress-bar.information { background-color: var(--feedback-background-information-intense); }
.progress_wrapper .progress-bar.neutral { background-color: var(--feedback-background-neutral-intense); }
.animated-container{ overflow: hidden; position: relative; }
.animated-bar{ animation: 1000ms linear 0s infinite normal none running animatedbar; position: absolute; width: 10%; background-color: var(--interactive-background-primary-default); height: 2px; }

@keyframes animatedbar { 0% { left: 0%; transform: scaleX(1); } 50% { left: 50%; transform: scaleX(5); } 100% { left: 100%; transform: scaleX(1); }}

/* List group css */
.list_wrapper { padding: 10px; }
.list_wrapper ul { list-style-type: disc; }
.list_wrapper ul li { color: var(--surface-text-gray-normal); font-weight: var(--fw-600); margin-bottom: 4px; }
.list_wrapper ol li { color: var(--surface-text-gray-normal); font-weight: var(--fw-600); margin-bottom: 4px; }
.list_wrapper ul:nth-child(3) { list-style-type: circle; padding-left: 1rem; }
.list_wrapper ul:nth-child(2) { list-style-type: square; padding-left: 1rem; }
.icon_list ul:nth-child(3) { list-style-type: none; }
.icon_list ul:nth-child(2) { list-style-type: none; }
.icon_list ul, .icon_list ol { list-style-type: none; }
.icon_list ul li i, .icon_list ol li i { font-size: var(--fz-size-12); margin-right: 5px; }
.list_wrapper ul li a, .list_wrapper ol li a{ color: var(--interactive-text-primary-normal); text-decoration: underline; }
.list_wrapper ul.small li { font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.list_wrapper ul ::marker { color: var(--listItemAsset-color); }
.list_wrapper ul.medium li { font-size: var(--fz-size-14); line-height: var(--lineheight-20); }
.list_wrapper ul.large li { font-size: var(--fz-size-16); line-height: var(--lineheight-24); }
.list_wrapper ol.small li { font-size: var(--fz-size-12); line-height: var(--lineheight-18); }
.list_wrapper ol.medium li { font-size: var(--fz-size-14); line-height: var(--lineheight-20); }
.list_wrapper ol.large li { font-size: var(--fz-size-16); line-height: var(--lineheight-24); }
.list_wrapper ul li .number, .list_wrapper ol li .number { background-color: var(--feedback-background-neutral-subtle); color: var(--surface-text-gray-subtle); width: 18px; height: 18px; margin-right: 8px; margin-bottom: 0; border-radius: 50%; text-align: center; font-size: var(--fz-size-10); }
.custom_icon ul li, .custom_icon ol li { display: flex; }
.list_wrapper .text-white { padding: 2px 5px; }
.list_wrapper .text_bg { background-color: var(--interactive-text-gray-subtle); }
.text_bg i { font-size: var(--fz-size-12); }
.list_wrapper .neutral { color: var(--interactive-text-neutral-normal); }
.list_wrapper ul li a:hover, .list_wrapper ol li a:hover{ text-decoration: none; }
.list_wrapper ul li a:focus, .list_wrapper ol li a:focus { text-decoration: underline; outline: 2px solid var(--interactive-border-primary-default) !important; }
.list_wrapper ul li a.action, .list_wrapper ol li a.action { font-weight: var(--fw-700); }
.list_wrapper ul li a.hover { text-decoration: underline; }
.list_wrapper ul li a.focus { text-decoration: underline; outline: 2px solid var(--interactive-border-primary-default) !important; }
.list_wrapper ul li a.disabled { color: var(--interactive-text-primary-disabled); }
.icon_link i { font-size: var(--fz-size-12); vertical-align: middle; }

/* tooltip css */
.custom-tooltip { --bs-tooltip-bg: var(--popup-background-subtle); --bs-tooltip-color: var(--surface-text-gray-normal); border-radius: var(--bradius-medium); opacity: 1 !important; box-shadow: 0px 16px 48px -4px var(--elevation-highraised); border-color: var(--popup-border-intense); border-width: var(--bwidth-thin); border-style: solid; }
.custom-tooltip { --bs-tooltip-bg: var(--popup-background-subtle); --bs-tooltip-color: var(--surface-text-gray-normal); border-radius: var(--bradius-medium); opacity: 1 !important; box-shadow: 0px 16px 48px -4px var(--elevation-highraised); border-color: var(--popup-border-intense); border-width: var(--bwidth-thin); border-style: solid; }
.tooltip-inner { text-align: left; padding: 10px; }
.tooltip-inner h6 { font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-700); color: var(--surface-text-gray-normal); margin-bottom: 2px; }
.tooltip-inner p { margin-bottom: 0; font-size: var(--fz-size-12); line-height: var(--lineheight-18); font-weight: var(--fw-400); color: var(--surface-text-gray-subtle); }
.custom-tooltip .tooltip-arrow::after { position: absolute; content: ""; border-color: transparent; border-style: solid; }
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--popup-border-intense); margin-top: 1px;}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="top"] .tooltip-arrow::after { top: -2px; border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-top-color: var(--popup-background-subtle); margin-top: 1px;}
.custom-tooltip.bs-tooltip-end .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--popup-border-intense); margin-right: 1px; }
.custom-tooltip.bs-tooltip-end .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="right"] .tooltip-arrow::after { right: -2px; border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-right-color: var(--popup-background-subtle); margin-right: 1px;}
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--popup-border-intense); margin-bottom: 1px; }
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::after { bottom: -2px; border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); border-bottom-color: var(--popup-background-subtle); margin-bottom: 1px;}
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--popup-border-intense); margin-left: 1px;}
.custom-tooltip.bs-tooltip-start .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="left"] .tooltip-arrow::after { left: -2px; border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); border-left-color: var(--popup-background-subtle); margin-left: 1px;}

.custom-tooltip .tooltip-arrow::after { position: absolute; content: ""; border-color: transparent; border-style: solid; }
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--popup-border-intense); margin-top: 1px;}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="top"] .tooltip-arrow::after { top: -2px; border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-top-color: var(--popup-background-subtle); margin-top: 1px;}
.custom-tooltip.bs-tooltip-end .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--popup-border-intense); margin-right: 1px; }
.custom-tooltip.bs-tooltip-end .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="right"] .tooltip-arrow::after { right: -2px; border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0; border-right-color: var(--popup-background-subtle); margin-right: 1px;}
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--popup-border-intense); margin-bottom: 1px; }
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::after { bottom: -2px; border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); border-bottom-color: var(--popup-background-subtle); margin-bottom: 1px;}
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before, .custom-tooltip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--popup-border-intense); margin-left: 1px;}
.custom-tooltip.bs-tooltip-start .tooltip-arrow::after, .custom-tooltip[data-popper-placement^="left"] .tooltip-arrow::after { left: -2px; border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height); border-left-color: var(--popup-background-subtle); margin-left: 1px;}

.custom-tooltip.tooltip_none .tooltip-arrow { display: none !important; }
.item { width: 500px; height: 200px; background-color: var(--feedback-background-positive-subtle); border: var(--bwidth-thin) dashed var(--feedback-border-positive-subtle); border-radius: var(--bradius-large); display: flex !important; align-items: center; justify-content: center; font-size: var(--fz-size-24); color: var(--interactive-text-gray-normal); }
.slick-dotted.slick-slider { margin-bottom: 0; display: flex; justify-content: center; }

/* carousel css */
.carousel { margin-top: 100px; }
.carousel .slick-slide { filter: blur(0); transition: ease .3s; margin-right: 15px; margin-left: 15px; }
.carousel .slick-slide.slick-center { filter: none; transform: scale(1, 1); }
.arrows { width: 100%; display: flex; justify-content: space-evenly; margin-top: 20px; }
.arrows i { font-size: var(--fz-size-16); cursor: pointer; color: var(--interactive-icon-staticblack-muted); background-color: var(--interactive-background-staticwhite-default); height: 30px; width: 30px; vertical-align: middle; border-radius: var(--bradius-max); box-shadow: 0px 8px 24px var(--elevation-midraised); display: flex; align-items: center; justify-content: center; }
.slick-dots li { margin: 0px !important; }
.slick-dots li.slick-active button:before { color: var(--interactive-icon-gray-muted) !important; opacity: 100%; }
.slick-dots li button:before { font-size: var(--fz-size-12) !important; color: var(--interactive-background-primary-default); content: '' !important; height: 11px; width: 11px; background-color: var(--interactive-background-primary-default); border-radius: 50%; display: inline-block; }
.slick-dots { bottom: -25%; display: inline-block; width: 30%; }
.slick-dots li.slick-active { margin-right: 15px !important; }
.slick-dots li.slick-active button:before { width: 30px; background-color: var(--interactive-icon-gray-muted); border-radius: var(--bradius-xlarge); height: 12px; }
.slick-dots li button { width: 11px !important; height: 11px !important; border-radius: 50%; color:var(--interactive-text-primary-normal) !important;}
.slick-dots li.slick-active button { width: 30px !important; border-radius: var(--bradius-xlarge); height: 12px !important; }
#content.active.c_design { overflow-x: hidden; height: calc(100vh - 48px); background-color: var(--surface-background-gray-subtle); }
.padding_details { padding: 0 30px; }
.arrows.arrow_position { justify-content: space-between; top: 43%; position: relative; z-index: 99; }
.arrow_second i { background-color: var(--interactive-background-staticwhite-default); color: var(--interactive-text-staticblack-muted); border: var(--bradius-xsmall) solid var(--interactive-border-gray-faded); box-shadow: none; }
.dotblue .slick-dots li.slick-active button:before { background-color: var(--interactive-icon-information-subtle); }
.dotwhite .slick-dots li.slick-active button:before { background-color: var(--interactive-icon-staticwhite-normal); }
.arrows a { text-decoration: none; z-index: 2 }

/* popover css */
.popover-title { margin: 0; display: flex; justify-content: space-between; }
.popover-title .title_css { font-size: var(--fz-size-16); color: var(--surface-text-gray-normal); margin-bottom: 0; line-height: var(--lineheight-24); font-weight: var(--fw-700); }
.popover-content { margin-top: var(--spacing-3); }
.popover-content .button_details { margin-top: 15px; text-align: right; }
.popover-content p { font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-400); color: var(--surface-text-gray-subtle); font-family: var(--typography-typefaces-body); }
.popover { text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; background-color: var(--popup-background-subtle); -webkit-background-clip: padding-box; background-clip: padding-box; border-radius: var(--bradius-large); -webkit-box-shadow: 0px 8px 24px var(--elevation-midraised); box-shadow: 0px 8px 24px var(--elevation-midraised); padding: var(--spacing-5); border: var(--bwidth-thin) solid var(--popup-border-subtle); }
.popover .icon_close { text-decoration: none; position: absolute; right: var(--spacing-5); }
.popover .icon_close i { color: var(--interactive-icon-gray-muted); font-size: var(--fz-size-16); vertical-align: middle; }
[data-popper-arrow]:after { content: ""; visibility: visible; background: inherit; width: 9px; height: 9px; position: absolute; transform: rotate(45deg); }
[data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow]:before, [data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow]:after { border-bottom-width: 1px; border-right-width: 1px; }
[data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow]:before, [data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow]:after { border-bottom-width: 1px; border-left-width: 1px; }
[data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow]:before, [data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow]:after { border-top-width: 1px; border-left-width: 1px; }
[data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow]:before, [data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow]:after { border-top-width: 1px; border-right-width: 1px; }
[data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow] { bottom: -5px; }
[data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow] { top: 5px; }
[data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow] { right: 5px; }
[data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow] { left: -5px; }
[role=tooltip]>[data-popper-arrow]:after { border-style: solid; border-color: var(--surface-background-gray-subtle); }
[role=tooltip]>[data-popper-arrow]:before { border-style: solid; border-color: var(--surface-background-gray-subtle); }
[data-popper-arrow]:before { content: ""; visibility: hidden; transform: rotate(45deg); }
[data-popper-arrow], [data-popper-arrow]:before { background: inherit; width: 0px; height: 0px; position: absolute; }
[data-popper-arrow]:after { content: ""; visibility: visible; background: inherit; width: 9px; height: 9px; position: absolute; transform: rotate(45deg); top: -10px; border-radius: 1px; }
[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:before, [data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:after { border-top-width: 1px; border-right-width: 1px; }

.mvp-wrapper ul li{padding-bottom: 24px; line-height: 20px; list-style:disc;}
.mvp-wrapper ul li a{color: var(--interactive-text-gray-normal); text-decoration: none; }
.mvp-wrapper ul li a:hover{font-weight: var(--fw-600);}

.back-btn.btn-tertiary-disabled {color: var(--global-disabled-button-text-color) !important; background-color: var(--global-disabled-button-bgcolor); border: 0px solid var(--global-disabled-button-bgcolor);}

.back-btn.btn-tertiary-disabled {color: var(--global-disabled-button-text-color) !important; background-color: var(--global-disabled-button-bgcolor); border: 0px solid var(--global-disabled-button-bgcolor);}

/* Accordion */
.accordion { width: 100%; }
.accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: var(--spacing-5) var(--spacing-5); font-size: var(--fz-size-14); font-weight: var(--fw-600); line-height: var(--line-height-100); color: var(--surface-text-gray-normal); text-align: left; background-color: var(--transparent); border: var(--bradius-none) !important; overflow-anchor: none; transition: var(--bs-accordion-transition); }
.accordion-button i { font-size: var(--fz-size-20); margin-right: var(--ps-08); color: var(--surface-icon-gray-normal ); }
.accordion-body p{ font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); }
.accordion-button::after { flex-shrink: 0; margin-left: auto; content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-icon-gray-subtle); }
.accordion-button:not(.collapsed)::after { content: "\e845" !important; font-size: var(--fz-size-16); color: var(--interactive-icon-gray-subtle); font-family: 'feather' !important; background-image: none !important; transform: none; }
.accordion-item:first-of-type>.accordion-header .accordion-button { border-top-left-radius: var(--bradius-none); border-top-right-radius: var(--bradius-none); }
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed { border-bottom-right-radius: var(--bradius-none); border-bottom-left-radius:var(--bradius-none); }
.accordion-item { color: var(--bs-accordion-color); background-color: var(--transparent); border: var(--bradius-none); border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-none) !important; }
.accordion-button:not(.collapsed) { color: var(--surface-text-gray-normal); background-color: var(--interactive-background-gray-default); box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }
.accordion-button:focus { z-index: 0; box-shadow: none !important; outline: var(--bradius-small) solid var(--surface-background-primary-intense) !important; }

/* Card */
.display-flex{ display: flex; align-items: center; }
.pr{ padding-right: var(--ps-10); }
.card-demo{ width:100%; }
.card { padding: var(--spacing-7); border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); background: var(--card-bg-intense); }
.card .card-header{ background: transparent; border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); padding: var(--ps-00); padding-bottom: var(--ps-12); }
.card .card-footer{ background: transparent; border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); padding: var(--ps-00); padding-top: var(--ps-12); }
.card .card-body{ padding: var(--ps-00); padding-top: var(--ps-12); padding-bottom: var(--ps-12); }
.card-active{ border: var(--bradius-small) solid var(--surface-background-primary-intense) !important; }

/* Buttons & Action */
.mr-12{ margin-right: var(--spacing-4); }
.mr-16{ margin-right: var(--spacing-5); }
.content-align{ display: flex; align-items: flex-start; text-align: left; flex-wrap: wrap; }
.bg-dark{ background-color: var(--interactive-icon-neutral-muted) !important; color: var(--interactive-text-onprimary-normal); padding: var(--spacing-4) var(--spacing-0); vertical-align: middle; }
.btn { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-primary-default); border: var(--bwidth-thin) solid var(--interactive-border-primary-default); font-size: var(--fz-size-14); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-3) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); flex: 1 0 0; }
.btn:focus-visible { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-primary-default); border-color: var(--interactive-border-primary-default) !important; box-shadow: none !important; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important; }
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-primary-highlighted); border-color: var(--interactive-background-primary-default); }

.btn-disabled, .btn-disabled:disabled{ color: var(--global-disabled-button-text-color) !important; background-color: var(--global-disabled-button-bgcolor); border: 0px solid var(--global-disabled-button-bgcolor); }
.btn-disabled:hover{ color: var(--global-disabled-button-text-color) !important; background-color: var(--global-disabled-button-bgcolor); border: 0px solid var(--global-disabled-button-bgcolor);  }

.btn-primary { color: var(--interactive-text-onprimary-normal); background-color: var(--surface-background-primary-intense); border: var(--bwidth-thin) solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-primary:hover { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-primary-highlighted); border: var(--bwidth-thin) solid var(--interactive-border-primary-highlighted); }
.btn-primary:focus, .btn-primary:focus-visible, .btn-primary:active { color: var(--interactive-text-onprimary-normal) !important; background-color: var(--surface-background-primary-intense) !important; border-color: var(--interactive-border-positive-default) !important; outline: 2px solid var(--interactive-border-positive-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-primary{ color: var(--interactive-text-primary-normal); background-color: transparent; border: var(--bwidth-thin) solid var(--interactive-border-primary-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-primary:hover{ color: var(--interactive-text-primary-normal); background-color: var(--interactive-background-primary-faded); border: var(--bwidth-thin) solid var(--interactive-border-primary-default); }
.btn-outline-primary:focus, .btn-outline-primary:focus-visible, .btn-outline-primary:active { color: var(--interactive-text-primary-normal) !important; background-color: var(--interactive-background-primary-normal) !important; border-color: var(--interactive-border-primary-default) !important; box-shadow: none !important; outline: 2px solid var(--interactive-border-primary-default) !important; outline-offset: 2px !important; }

.btn-tertiary{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); border: 0px solid var(--interactive-background-gray-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); }
.btn-tertiary:hover{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-highlighted); }
.btn-tertiary:focus, .btn-tertiary:focus-visible, .btn-tertiary:active { color: var(--interactive-text-gray-normal) !important; background-color: var(--interactive-background-gray-highlighted) !important; border-color: var(--interactive-text-gray-disabled) !important; outline: 2px solid var(--interactive-text-gray-disabled) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-white{ color: var(--interactive-text-staticblack-muted); background-color: var(--interactive-background-staticwhite-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-white:hover{ color: var(--interactive-text-staticblack-muted); background-color: var(--interactive-background-staticwhite-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-white:focus, .btn-white:focus-visible, .btn-white:active { color: var(--interactive-text-staticblack-muted) !important; background-color: var(--interactive-background-staticwhite-default) !important;  border-color: var(--interactive-border-staticwhite-default) !important; outline: 2px solid var(--interactive-border-staticwhite-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-white{ color: var(--interactive-text-staticwhite-normal); background-color: transparent; border: var(--bwidth-thin) solid var(--interactive-border-staticwhite-highlighted); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-white:hover{ color: var(--interactive-text-staticwhite-normal); background-color: var(--interactive-background-staticwhite-faded); border: var(--bwidth-thin) solid var(--interactive-background-staticwhite-default); }
.btn-outline-white:focus, .btn-outline-white:focus-visible, .btn-outline-white:active { color: var(--interactive-text-staticwhite-normal) !important; background-color: var(--interactive-background-staticwhite-normal) !important; border-color: var(--interactive-border-staticwhite-default) !important; outline: 2px solid var(--interactive-border-staticwhite-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-white-tertiary{ color: var(--interactive-text-staticwhite-normal); background-color: var(--interactive-background-staticblack-faded); border: 0px solid var(--interactive-background-staticblack-faded); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); }
.btn-white-tertiary:hover{ color: var(--interactive-text-staticwhite-normal); background-color: var(--interactive-background-staticblack-fadedHighlighted); }
.btn-white-tertiary:focus, .btn-white-tertiary:focus-visible, .btn-white-tertiary:active { background-color: var(--interactive-background-staticblack-fadedHighlighted) !important; border-color: var(--interactive-border-staticwhite-default) !important; outline: 2px solid var(--interactive-border-staticwhite-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-positive{ color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-positive-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-positive:hover{ color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-positive-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-positive:focus, .btn-positive:focus-visible, .btn-positive:active { color: var(--interactive-text-onprimary-normal) !important; background-color: var(--interactive-background-positive-default) !important; border-color: var(--interactive-border-positive-default) !important; outline: 2px solid var(--interactive-border-positive-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-positive{ color: var(--interactive-text-positive-normal); background-color: var(--interactive-background-positive-faded); border: var(--bwidth-thin) solid var(--interactive-border-positive-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-positive:hover{ color: var(--interactive-text-positive-normal); background-color: var(--interactive-background-positive-fadedHighlighted); border: var(--bwidth-thin) solid var(--interactive-border-positive-default); }
.btn-outline-positive:focus, .btn-outline-positive:focus-visible, .btn-outline-positive:active { color: var(--interactive-text-positive-normal) !important; background-color: var(--interactive-background-positive-faded) !important; border-color: var(--interactive-border-positive-default) !important; outline: 2px solid var(--interactive-border-positive-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-negative{ color: var(--interactive-text-staticwhite-normal); background-color: var(--interactive-background-negative-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-negative:hover{ color: var(--interactive-text-staticwhite-normal); background-color: var(--interactive-background-negative-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-negative:focus, .btn-negative:focus-visible, .btn-negative:active { color: var(--interactive-text-staticwhite-normal) !important; background-color: var(--interactive-background-negative-default) !important; border-color: var(--interactive-border-negative-default) !important; outline: 2px solid var(--interactive-border-negative-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-negative { color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-faded); border: var(--bwidth-thin) solid var(--interactive-border-negative-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-negative:hover { color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-fadedHighlighted); border: var(--bwidth-thin) solid var(--interactive-border-negative-default); }
.btn-outline-negative:focus, .btn-outline-negative:focus-visible, .btn-outline-negative:active { color: var(--interactive-text-negative-normal) !important; background-color: var(--interactive-background-negative-faded) !important; border-color: var(--interactive-border-negative-default) !important; box-shadow: none !important; outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important; }

.btn-notice { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-notice-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-notice:hover { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-notice-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-notice:focus, .btn-notice:focus-visible, .btn-notice:active { color: var(--interactive-text-onprimary-normal) !important; background-color: var(--interactive-background-notice-default) !important; border-color: var(--interactive-border-notice-default) !important; outline: 2px solid var(--interactive-border-notice-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-notice { color: var(--interactive-text-notice-normal); background-color: var(--interactive-background-notice-faded); border: var(--bwidth-thin) solid var(--interactive-border-notice-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-notice:hover { color: var(--interactive-text-notice-normal); background-color: var(--interactive-background-notice-fadedHighlighted); border: var(--bwidth-thin) solid var(--interactive-border-notice-default); }
.btn-outline-notice:focus, .btn-outline-notice:focus-visible, .btn-outline-notice:active { color: var(--interactive-text-notice-normal) !important; background-color: var(--interactive-background-notice-faded) !important; border-color: var(--interactive-border-notice-default) !important; outline: 2px solid var(--interactive-border-notice-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-information { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-information-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-information:hover { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-information-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-information:focus, .btn-information:focus-visible, .btn-information:active { color: var(--interactive-text-onprimary-normal) !important; background-color: var(--interactive-background-information-default) !important; border-color: var(--interactive-border-information-default) !important; outline: 2px solid var(--interactive-border-information-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-information { color: var(--interactive-text-information-normal); background-color: var(--interactive-background-information-faded); border: var(--bwidth-thin) solid var(--interactive-border-information-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-information:hover { color: var(--interactive-text-information-normal); background-color: var(--interactive-background-information-fadedHighlighted); border: var(--bwidth-thin) solid var(--interactive-border-information-default); }
.btn-outline-information:focus, .btn-outline-information:focus-visible, .btn-outline-information:active { color: var(--interactive-text-information-normal) !important; background-color: var(--interactive-background-information-faded) !important; border-color: var(--interactive-border-information-default) !important; outline: 2px solid var(--interactive-border-information-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-neutral { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-neutral-default); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-neutral:hover { color: var(--interactive-text-onprimary-normal); background-color: var(--interactive-background-neutral-highlighted); border: 0px solid var(--surface-text-primary-normal); }
.btn-neutral:focus, .btn-neutral:focus-visible, .btn-neutral:active { color: var(--interactive-text-onprimary-normal) !important; background-color: var(--interactive-background-neutral-default) !important; border-color: var(--interactive-border-neutral-default) !important; outline: 2px solid var(--interactive-border-neutral-default) !important; box-shadow: none !important; outline-offset: 2px !important; }
.btn-outline-neutral { color: var(--interactive-text-neutral-normal); background-color: var(--interactive-background-neutral-faded); border: var(--bwidth-thin) solid var(--interactive-border-neutral-default); font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-family: var(--typography-typefaces-body); font-weight: var(--fw-700); padding: var(--spacing-0) var(--spacing-6); text-align: center; border-radius: var(--bradius-medium); min-height: var(--size-36); flex: 1 0 0; }
.btn-outline-neutral:hover { color: var(--interactive-text-neutral-normal); background-color: var(--interactive-background-neutral-fadedHighlighted); border: var(--bwidth-thin) solid var(--interactive-border-neutral-default); }
.btn-outline-neutral:focus, .btn-outline-neutral:focus-visible, .btn-outline-neutral:active { color: var(--interactive-text-neutral-normal) !important; background-color: var(--interactive-background-neutral-faded) !important; border-color: var(--interactive-border-neutral-default) !important; outline: 2px solid var(--interactive-border-neutral-default) !important; box-shadow: none !important; outline-offset: 2px !important; }

.btn-link-primary{ color: var(--interactive-text-primary-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-primary:hover{ color: var(--interactive-text-primary-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-negative-default); text-decoration: underline; }
.btn-link-primary:focus, .btn-link-primary:focus-visible, .btn-link-primary:active { color: var(--interactive-text-primary-subtle) !important; background-color: var(--transparent) !important; border-color: var(--link-border-primary) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--link-border-primary) !important; outline-offset: 2px !important; }

.btn-link-negative{ color: var(--interactive-text-negative-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-negative:hover{ color: var(--interactive-text-negative-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-negative-default); text-decoration: underline; }
.btn-link-negative:focus, .btn-link-negative:focus-visible, .btn-link-negative:active { color: var(--interactive-text-negative-subtle) !important; background-color: var(--transparent) !important; border-color: var(--interactive-border-negative-default) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--interactive-border-negative-default) !important; outline-offset: 2px !important; }

.btn-link-positive{ color: var(--interactive-text-positive-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-positive:hover{ color: var(--interactive-text-positive-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-positive-default); text-decoration: underline; }
.btn-link-positive:focus, .btn-link-positive:focus-visible, .btn-link-positive:active { color: var(--interactive-text-positive-subtle) !important; background-color: var(--transparent) !important; border-color: var(--surface-border-primary-normal) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--surface-border-primary-normal) !important; outline-offset: 2px !important; }

.btn-link-notice{ color: var(--interactive-text-notice-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-notice:hover{ color: var(--interactive-text-notice-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-notice-default); text-decoration: underline; }
.btn-link-notice:focus, .btn-link-notice:focus-visible, .btn-link-notice:active { color: var(--interactive-text-notice-subtle) !important; background-color: var(--transparent) !important; border-color: var(--interactive-border-notice-default) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--interactive-border-notice-default) !important; outline-offset: 2px !important; }

.btn-link-information{ color: var(--interactive-text-information-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-information:hover{ color: var(--interactive-text-information-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-information-default); text-decoration: underline; }
.btn-link-information:focus, .btn-link-information:focus-visible, .btn-link-information:active { color: var(--interactive-text-information-subtle) !important; background-color: var(--transparent) !important; border-color: var(--interactive-border-information-default) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--interactive-border-information-default) !important; outline-offset: 2px !important; }

.btn-link-neutral{ color: var(--interactive-text-neutral-normal); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-neutral:hover{ color: var(--interactive-text-neutral-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-neutral-default); text-decoration: underline; }
.btn-link-neutral:focus, .btn-link-neutral:focus-visible, .btn-link-neutral:active { color: var(--interactive-text-neutral-subtle) !important; background-color: var(--transparent) !important; border-color: var(--interactive-border-neutral-default) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--interactive-border-neutral-default) !important; outline-offset: 2px !important; }

.btn-link-disabled{ color: var(--global-disabled-button-text-color) !important; background-color: var(--transparent); border: 0px solid var(--global-disabled-button-bgcolor); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; opacity: 1 !important; }
.btn-link-disabled:hover{ color: var(--global-disabled-button-text-color); background-color: var(--transparent); border: 0px solid var(--global-disabled-button-bgcolor); text-decoration: underline; }
.btn-link-disabled:focus, .btn-link-disabled:focus-visible, .btn-link-disabled:active { color: var(--global-disabled-button-text-color) !important; background-color: var(--transparent) !important; border-color: var(--global-disabled-button-bgcolor) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--global-disabled-button-bgcolor) !important; outline-offset: 2px !important; }

.btn-link-white{ color: var(--interactive-text-staticwhite-subtle); background-color: var(--transparent); border: 0px solid var(--surface-background-primary-intense); font-size: var(--fz-size-10); line-height: var(--lineheight-16); font-family: var(--typography-typefaces-body); font-weight: var(--fw-600); text-align: center; padding: var(--spacing-0) !important; text-decoration: none; min-height: var(--size-00) !important; }
.btn-link-white:hover{ color: var(--interactive-text-staticwhite-subtle); background-color: var(--transparent); border: 0px solid var(--interactive-border-staticwhite-default); text-decoration: underline; }
.btn-link-white:focus, .btn-link-white:focus-visible, .btn-link-white:active { color: var(--interactive-text-staticwhite-default) !important; background-color: var(--transparent) !important; border-color: var(--interactive-border-staticwhite-default) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-radius: var(--bradius-small); outline: 2px solid var(--interactive-border-staticwhite-default) !important; outline-offset: 2px !important; }

.btn-xsm.btn-icon { height: 28px; width: 28px; padding:0px;}
.btn-sm.btn-icon {height: 32px; width: 32px; padding:0px;}
.btn-md.btn-icon {height: 36px; width: 36px; padding:0px;}
.btn-lg.btn-icon {height: 48px; width: 48px; padding:0px;}

.btn-icon-12 { border: 0px solid var(--interactive-border-negative-default); color: var(--interactive-text-primary-normal); background-color: var(--transparent); text-align: center; border-radius: var(--bradius-small); line-height: var(--size-00); padding: var(--size-00) var(--size-00); }
.btn-icon-12 i { font-size: var(--fz-size-12) !important; }
.btn-icon-16{ color: var(--interactive-text-primary-normal); background-color: var(--transparent); text-align: center; border-radius: var(--bradius-small); line-height: var(--size-00); padding: var(--size-00) var(--size-00); border: 0px solid var(--interactive-border-negative-default); }
.btn-icon-16 i { font-size: var(--fz-size-16) ; }
.btn-icon-20{ color: var(--interactive-text-primary-normal); background-color: var(--transparent); text-align: center; border-radius: var(--bradius-small); line-height: var(--size-00); padding: var(--size-00) var(--size-00); border: 0px solid var(--interactive-border-negative-default); }
.btn-icon-20 i{ font-size: var(--fz-size-20); }
.btn-icon-24 { color: var(--interactive-text-primary-normal); background-color: var(--transparent); text-align: center; border-radius: var(--bradius-small); line-height: var(--size-00); padding: var(--size-00) var(--size-00); border: 0px solid var(--interactive-border-negative-default); }
.btn-icon-24 i{ font-size: var(--fz-size-24) ; }
.btn-icon-44 { color: var(--interactive-text-primary-normal); background-color: var(--transparent); text-align: center; border-radius: var(--bradius-small); line-height: var(--size-00); padding: var(--spacing-3) var(--spacing-3); border: 0px solid var(--interactive-border-negative-default); }
.btn-icon-44 i { font-size: var(--size-28) ; }
.btn-icon-12 i:hover, .btn-icon-14 i:hover, .btn-icon-16 i:hover, .btn-icon-20 i:hover, .btn-icon-24 i:hover, .btn-icon-44 i:hover{ color: var(--interactive-text-primary-subtle); background-color: var(--transparent); }
.btn-icon-12:focus, .btn-icon-12:focus-visible, .btn-icon-12:active, .btn-icon-16:focus, .btn-icon-16:focus-visible, .btn-icon-16:active, .btn-icon-20:focus, .btn-icon-20:focus-visible, .btn-icon-20:active, .btn-icon-24:focus, .btn-icon-24:focus-visible, .btn-icon-24:active { color: var(--interactive-text-primary-subtle) !important; background-color: var(--transparent) !important; padding:var(--spacing-0) var(--spacing-0) !important; min-height: auto !important; box-shadow: none !important; border-color: var(--interactive-background-primary-default) !important; outline: 2px solid var(--interactive-background-primary-default) !important; outline-offset: 2px !important; }
.btn-icon-44:focus, .btn-icon-44:focus-visible, .btn-icon-44:active{ color: var(--interactive-text-primary-subtle) !important; background-color: var(--transparent) !important; border-color: var(--interactive-background-primary-default) !important; padding: var(--spacing-3) var(--spacing-3); outline: 2px solid var(--interactive-background-primary-default) !important; outline-offset: 2px !important; }

.btn-xsm{ font-size: var(--fz-size-12); padding: var(--spacing-2) var(--spacing-3); line-height: var(--lineheight-18); min-height: var(--size-28); }
.btn-sm{ font-size: var(--fz-size-12); padding: var(--spacing-2) var(--spacing-4); line-height: var(--lineheight-18); min-height: var(--size-32); }
.btn-md{ font-size: var(--fz-size-14); padding: var(--spacing-2) var(--spacing-6); line-height: var(--lineheight-20); min-height: var(--size-36); }
.btn-lg{ font-size: var(--fz-size-16); padding: var(--spacing-2) var(--spacing-6); line-height: var(--lineheight-24); min-height: var(--size-48); }

.btn-ic-xsm{ font-size: var(--fz-size-10); }
.btn-ic-sm{ font-size: var(--fz-size-12); }
.btn-ic-md{ font-size: var(--fz-size-14); }
.btn-ic-lg{ font-size: var(--fz-size-16); }
.btn-ic-2lg{ font-size: var(--fz-size-20); }
.btn-ic-xlg{ font-size: var(--fz-size-24); }
.btn-ic-xxlg{ font-size: var(--fz-size-44); }

/* Sidenav-css start */
#sidenav-container { background-color: var(--surface-background-gray-moderate); padding: var(--ps-10); }
#sidenav-container ul.list-group{ margin: 0 0px; }

/* sidenav sizes when expanded and expanded */
.sidenav-expanded { max-width: 270px; }
.sidenav-collapsed { width: 64px; }
.sidenav-collapsed ul li a { text-align: center; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; }
.sidenav-collapsed ul li { margin-bottom: var(--size-04); }
.sidenav-collapsed ul li a i { text-align: center; padding-left: 0px !important; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; }
#sidenav-container .list-group a { min-height: 44px; color: var(--interactive-text-gray-normal); border-radius: var(--bradius-medium); font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); vertical-align: middle; padding: var(--spacing-3) var(--spacing-3); }
#sidenav-container .list-group a.Heading { min-height: 44px; padding: var(--ps-12); }
#sidenav-container .list-group a i{ font-size: var(--fz-size-20); padding-left: 4px; color: var(--interactive-icon-gray-muted); }

/* Submenu item*/
.typo1 { position: relative; }
.display-actionlist .list-group-item i { color: var(--surface-icon-gray-normal) !important; }
.typo1::after{ content: " "; height: 0px; width: 88%; position: absolute; left: 0; background: var(--surface-border-gray-muted); align-items: center; justify-content: center; margin: 0px 15px; }
#sidenav-container .list-group .sidenav-submenu a:before { content: ''; width: 0; height: 100%; position: absolute; border: var(--bwidth-thin) solid var(--surface-border-gray-muted); z-index: 99; }
#sidenav-container .list-group .sidenav-submenu a { border: var(--bradius-none); padding-left: 20px; }
.sidenav-expanded ul.list-group li [aria-expanded="false"]::after { width: 1rem; font-size: var(--fz-size-16); text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e844'; font-family: "feather"; position: absolute; right: 6%; top: 26%; color: var(--surface-icon-gray-normal); }
.sidenav-expanded ul.list-group li [aria-expanded="true"]::after { width: 1rem; font-size: var(--fz-size-16); text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e845'; font-family: "feather"; position: absolute; right: 6%; top: 26%; color: var(--surface-icon-gray-normal); }
ul.list-group li ul li a[aria-expanded="true"] { background-color: var(--transparent); color: var(--interactive-text-primary-normal) !important; }
ul.list-group li ul li a[aria-expanded="true"] span { background-color: var(--transparent); color: var(--interactive-text-primary-normal) !important; }
ul.list-group li ul li a[aria-expanded="true"]::before { content: ''; width: 0; height: 100%; position: absolute; border: var(--bwidth-thin) solid var(--interactive-border-primary-default); z-index: 99; left: 0; top: 0; }
.sidenav-expanded ul li{ margin-bottom: var(--spacing-2); }
.sidenav-expanded ul li ul li{ margin-bottom: var(--spacing-0); }
ul.sidebar-submenu li:hover:before{ border: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
ul.sidebar-submenu li a:hover:before{ content: ''; width: 0; height: 100%; position: absolute; border: var(--bwidth-thin) solid var(--normal); z-index: 99; top: 0; left: 0; }
ul.sidebar-submenu li a:hover::after{ border: var(--bwidth-thin) solid var(--normal); }
ul.sidebar-submenu .secondlevel ul li:hover:before { border: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
ul.sidebar-submenu .secondlevel ul li ul li:hover:before{ border: var(--bwidth-thin) solid var(--normal); }
.sidenav-submenu { font-size: var(--fz-size-14); }

#sidenav-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after { content: " \f105"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; }

#sidenav-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after { content: " \f107"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; }
.list-group .list-group-item:first-child { border-top-left-radius: var(--bradius-none); border-top-right-radius: var(--bradius-none); }
.list-group .sidenav-menu-collapsed { color: var(--interactive-text-gray-normal); border-radius: var(--bradius-medium); font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; margin-left: var(--size-08); }
.list-group-item i{ vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; }
.list-group .sidenav-menu-collapsed.head { text-transform: uppercase; color: var(--surface-text-gray-muted); letter-spacing: var(--spacing-1); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--lineheight-20); margin-left: var(--spacing-0); }
.footer_logo_sidenav { display: block; text-align: center; position: sticky; bottom: 0; width: 100%; background: var(--surface-background-gray-moderate); color: var(--surface-text-gray-muted); z-index: 9999; }
.footer_logo_sidenav img{ width: inherit;}
.sidenav-expanded ul li a:hover { background-color: var(--transparent) !important; font-weight: var(--fw-600) !important; }
.sidenav-expanded ul li a span:hover { font-weight: var(--fw-600) !important; }
.list-group .icon_color { color: var(--interactive-icon-neutral-muted); font-size: var(--fz-size-20); border: var(--bwidth-thin) solid var(--normal); }
.list-group .sidenav-menu-collapsed.head:hover{ font-weight: var(--fw-700) !important; }
.sidenav-expanded .nav_expand { justify-content:space-between; }
.sidenav-collapsed .nav_expand { justify-content:center; }
#sidenav-container { box-shadow: 0px 16px 48px -4px var(--elevation-highraised); }

/* Button show code css */
.showcode-bg{ margin-left: -24px; margin-right: -24px; margin-bottom: -24px; margin-top: var(--spacing-4); padding: var(--spacing-7); background-color: var(--surface-background-dark-subtle) ; color: var(--interactive-text-onprimary-normal); vertical-align: middle; border-radius: 0 0 var(--bradius-medium) var(--bradius-medium) ; }
pre code { white-space: pre; tab-size: 4; }
.code-group{ text-align: right; margin-bottom: -4%; }
.btn-forcode{ background-color: var(--interactive-background-staticwhite-faded); padding: var(--spacing-0) var(--spacing-3); border-radius: var(--bradius-medium); min-height: var(--size-28); font-size: var(--fz-size-12); color: var(--interactive-text-staticwhite-normal); border: 0; }
.btn-forcode:hover{ background-color: var(--interactive-background-staticwhite-fadedHighlighted) !important; color: var(--interactive-text-staticwhite-normal); border: 0; }
.showcode .accordion-button { padding: 0; }
.card .card-header .showcode button { background: transparent; color: var(--surface-text-gray-normal); }
.accordion-item.showcode { border-bottom: none; }

/* Alert css */
.alert { padding: var(--spacing-4) var(--spacing-4); align-items: flex-start; }
.alert .alert-card { display: flex; align-items: baseline; }
.alert strong { font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100); }
.alert i { font-size: var(--fz-size-16); margin-right: var(--spacing-3); }
.icon-x{ margin-right: var(--spacing-0) !important; }
.alert .btn-icon-16 { position: absolute; top: 0; right: 0; z-index: 2; padding: var(--spacing-5) var(--spacing-4); }
.alert .btn-icon-16:active, .btn-icon-16:focus, .btn-icon-16:focus-visible { top: 15px; right: 13px; z-index: 2; padding: var(--spacing-0) var(--spacing-0) !important; }
.alert-container p{ color: var(--surface-text-gray-subtle); font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-12); font-style: normal; font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-75); margin-top: var(--spacing-2); margin-bottom: var(--spacing-4); margin-right: var(--spacing-2); }
.f-width-container{ display: flex; align-items: center; justify-content: space-between; }
.f-width-container p{ margin-right: var(--spacing-8); margin-bottom: var(--spacing-0); }
.f-width-container .internal-buttons{ display: flex; align-items: center; margin-right: 16px; }
.w-lg-49{ width: 49% !important; }
.alert-positive{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-positive-subtle); background: var(--feedback-background-positive-subtle); color: var(--feedback-text-positive-intense); }
.alert-positive p{ color: var(--feedback-text-positive-intense); }
.alert-positive i{ color: var(--feedback-icon-positive-intense); }
.alert-negative{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-negative-subtle); background: var(--feedback-background-negative-subtle); color: var(--feedback-text-negative-intense); }
.alert-negative p{ color: var(--feedback-text-negative-intense); }
.negative { color: var(--feedback-text-negative-intense) !important; }
.alert-negative i{ color: var(--feedback-icon-negative-intense); }
.alert-notice{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-notice-subtle); background: var(--feedback-background-notice-subtle); color: var(--feedback-text-notice-intense); }
.alert-notice p{ color: var(--feedback-text-notice-intense); }
.notice { color: var(--feedback-text-notice-intense) !important; }
.alert-notice i{ color:var(--interactive-text-notice-intense); }
.alert-information{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-information-subtle); background: var(--feedback-background-information-subtle); color: var(--feedback-text-information-intense); }
.alert-information p{ color: var(--feedback-text-information-intense); }
.information { color: var(--feedback-text-information-intense) !important; }
.alert-information i{ color: var(--feedback-icon-information-intense); }
.alert-neutral{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-neutral-subtle); background: var(--feedback-background-neutral-subtle); color: var(--feedback-text-neutral-intense); }
.alert-neutral p{ color: var(--feedback-text-neutral-intense); }
.neutral { color: var(--feedback-text-neutral-intense) !important; }
.alert-neutral i{ color: var(--feedback-icon-neutral-intense); }
.alert-positive-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-positive-intense); background: var(--feedback-background-positive-intense); color: var(--surface-text-staticwhite-normal); }
.alert-positive-intense p{ color: var(--surface-text-staticwhite-subtle); }
.alert-positive-intense i{ color: var(--surface-icon-staticwhite-normal); }
.alert-negative-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-negative-intense); background: var(--feedback-background-negative-intense); color: var(--surface-text-staticwhite-normal); }
.alert-negative-intense p{ color: var(--surface-text-staticwhite-subtle); }
.negative-intense { color: var(--surface-text-staticwhite-normal); }
.alert-negative-intense i{ color: var(--surface-icon-staticwhite-normal); }
.alert-notice-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-notice-intense); background: var(--feedback-background-notice-intense); color: var(--surface-text-staticwhite-normal); }
.notice-intense { color: var(--surface-text-staticwhite-normal); }
.alert-notice-intense i{ color: var(--surface-text-staticwhite-normal); }
.alert-information-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-information-intense); background: var(--feedback-background-information-intense); color: var(--surface-text-staticwhite-normal); }
.information-intense { color: var(--surface-text-staticwhite-normal); }
.alert-information-intense i{ color: var(--surface-text-staticwhite-normal); }
.alert-neutral-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-neutral-intense); background: var(--feedback-background-neutral-intense); color: var(--surface-text-staticwhite-normal); }
.neutral-intense { color: var(--surface-text-staticwhite-normal); }
.alert-neutral-intense i{ color: var(--surface-text-staticwhite-normal); }
.alert-container-intense p{ color: var(--surface-text-staticwhite-normal); font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-12); font-style: normal; font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-75); margin-top: var(--spacing-2); margin-bottom: var(--spacing-4); margin-right: var(--spacing-2); }
.alert-positive-intense i.icon, .alert-negative-intense i.icon, .alert-notice-intense i.icon, .alert-information-intense i.icon, .alert-neutral-intense i.icon { color: var(--surface-icon-staticwhite-normal); }
.alert-positive-intense .btn-icon-16:focus, .alert-negative-intense .btn-icon-16:focus, .alert-notice-intense .btn-icon-16:focus, .alert-information-intense .btn-icon-16:focus, .alert-neutral-intense .btn-icon-16:focus { outline: 2px solid var(--interactive-border-staticwhite-highlighted) !important; }

.badge{ font-size: var(--fz-size-10); font-weight: var(--fw-500); line-height: var(--lineheight-16); padding: var(--spacing-1) var(--spacing-3); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; min-height: 16px; }
.badge i { font-size: var(--fz-size-10); font-weight: var(--fw-500); margin-right: var(--spacing-1); }
.badge-md{ font-size: var(--fz-size-12); font-weight: var(--fw-500); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-4); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge-md i{ font-size: var(--fz-size-12); font-weight: var(--fw-500); margin-right: var(--spacing-1); }
.badge-lg{ font-size: var(--fz-size-12); font-weight: var(--fw-500); line-height: var(--lineheight-18); padding: var(--spacing-3) var(--spacing-4); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge-lg i{ font-size: var(--fz-size-12); font-weight: var(--fw-500); margin-right: var(--spacing-1); }
.alert-positive-intense i.icon, .alert-negative-intense i.icon, .alert-notice-intense i.icon, .alert-information-intense i.icon, .alert-neutral-intense i.icon { color: var(--surface-icon-staticwhite-normal); }
.alert-positive-intense .btn-icon-16:focus, .alert-negative-intense .btn-icon-16:focus, .alert-notice-intense .btn-icon-16:focus, .alert-information-intense .btn-icon-16:focus, .alert-neutral-intense .btn-icon-16:focus { outline: 2px solid var(--interactive-border-staticwhite-highlighted) !important; }

.badge{ font-size: var(--fz-size-10); font-weight: var(--fw-500); line-height: var(--lineheight-16); padding: var(--spacing-1) var(--spacing-3); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; min-height: 16px; }
.badge i { font-size: var(--fz-size-10); font-weight: var(--fw-500); margin-right: var(--spacing-1); }
.badge-md{ font-size: var(--fz-size-12); font-weight: var(--fw-500); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-4); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge-md i{ font-size: var(--fz-size-12); font-weight: var(--fw-500); margin-right: var(--spacing-1); }
.badge-lg{ font-size: var(--fz-size-12); font-weight: var(--fw-500); line-height: var(--lineheight-18); padding: var(--spacing-3) var(--spacing-4); background-color: var(--surface-background-primary-subtle); border-radius: var(--bradius-max); color: var(--feedback-text-positive-intense); text-align: center; white-space: nowrap; vertical-align: baseline; }
.badge-lg i{ font-size: var(--fz-size-12); font-weight: var(--fw-500); margin-right: var(--spacing-1); }

.bg-subtle-positive{ background-color: var(--feedback-background-positive-subtle); color: var(--feedback-text-positive-intense); font-weight: var(--fw-600); }
.bg-subtle-positive{ background-color: var(--feedback-background-positive-subtle); color: var(--feedback-text-positive-intense); font-weight: var(--fw-600); }
.bg-intense-positive{ background-color: var(--feedback-background-positive-intense); color: var(--surface-text-staticwhite-normal); }
.bg-subtle-negative{ background-color: var(--feedback-background-negative-subtle); color: var(--feedback-text-negative-intense); font-weight: var(--fw-600);}
.bg-subtle-negative{ background-color: var(--feedback-background-negative-subtle); color: var(--feedback-text-negative-intense); font-weight: var(--fw-600);}
.bg-intense-negative{ background-color: var(--feedback-background-negative-intense); color: var(--surface-text-staticwhite-normal); }
.bg-subtle-notice{ background-color: var(--feedback-background-notice-subtle); color: var(--feedback-text-notice-intense); font-weight: var(--fw-600);}
.bg-subtle-notice{ background-color: var(--feedback-background-notice-subtle); color: var(--feedback-text-notice-intense); font-weight: var(--fw-600);}
.bg-intense-notice{ background-color: var(--feedback-background-notice-intense); color: var(--surface-text-staticwhite-normal); }
.bg-subtle-information{ background-color: var(--feedback-background-information-subtle); color: var(--feedback-text-information-intense); font-weight: var(--fw-600);}
.bg-subtle-information{ background-color: var(--feedback-background-information-subtle); color: var(--feedback-text-information-intense); font-weight: var(--fw-600);}
.bg-intense-information{ background-color: var(--feedback-background-information-intense); color: var(--surface-text-staticwhite-normal); }
.bg-subtle-neutral{ background-color: var(--feedback-background-neutral-subtle); color: var(--feedback-text-neutral-intense); font-weight: var(--fw-600);}
.bg-subtle-neutral{ background-color: var(--feedback-background-neutral-subtle); color: var(--feedback-text-neutral-intense); font-weight: var(--fw-600);}
.bg-intense-neutral{ background-color: var(--feedback-background-neutral-intense); color: var(--surface-text-staticwhite-normal); }
.bg-subtle-primary{ background-color: var(--surface-background-primary-subtle) !important; color: var(--surface-text-primary-normal) !important; font-weight: var(--fw-600);}
.bg-subtle-primary{ background-color: var(--surface-background-primary-subtle) !important; color: var(--surface-text-primary-normal) !important; font-weight: var(--fw-600);}
.bg-intense-primary{ background-color: var(--surface-background-primary-intense); color: var(--surface-text-primary-subtle) !important; }

/* Dropdown Menu - Css */
.dropdown-menu { min-width: 360px; padding: var(--spacing-2) var(--spacing-3); margin: 0; border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--popup-border-subtle); box-shadow: 0px 8px 24px var(--elevation-midraised); background-color: var(--popup-background-subtle); }
.dropdown-item:active, .dropdown-item:hover { text-decoration: none; color: var(--bs-list-group-action-active-color); background-color: var(--bs-list-group-action-active-bg); }
.custom-dropdown .menu-title{ font-size: var(--fz-size-12); font-weight: var(--fw-700); line-height: var(--lineheight-18); color: var(--interactive-text-gray-muted); }
.dropdown-title{ font-size: var(--fz-size-16); font-weight: var(--fw-700); }
.header-divider{ padding-left: 0; padding-right: 0; margin-left: -16px !important; margin-right: -16px !important; }
.custom-dropdown li i{ font-size: var(--fz-size-16); margin-right: var(--spacing-3); vertical-align: middle; color: var(--interactive-icon-gray-subtle); }
.custome-padding{ padding: var(--spacing-2); }
.custom-dropdown .dropdown-item { padding: var(--spacing-3) var(--spacing-3); font-size: var(--fz-size-14); font-weight: 400; color: var(--interactive-text-gray-normal); text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; border-radius: var(--bs-dropdown-item-border-radius, 0); }
.custom-dropdown li .show-leading:after{ width: 1rem; font-size: var(--fz-size-16); text-align: center; border: 0; font-weight: 900; content: '\e8cd'; font-family: "feather"; position: absolute; right: 6%; color: var(--interactive-icon-gray-muted); vertical-align: middle; }
.custom-dropdown li a:hover, a:active{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.custom-dropdown li .hover{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.custom-dropdown li a:focus, a:focus-visible{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); }
.custom-dropdown li.active a{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-primary-faded); }
.custom-dropdown li.active:hover a{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-primary-fadedHighlighted); }
.custom-dropdown li a.focus{ outline: 2px solid var(--surface-background-primary-intense) !important; border-radius: var(--bradius-medium); }
.custom-dropdown li a.disabled{ border-radius: var(--bradius-medium); color: var(--global-disabled-text-color); background-color: var(--transparent); }
.custom-dropdown li a.destructive{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--transparent); }
.custom-dropdown li a.destructive:hover{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-faded); }
.custom-dropdown li a.destructive-hover{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-faded); }
.custom-dropdown li a.destructive i{ color: var(--interactive-icon-negative-normal); }
.custom-dropdown li a.destructive-hover i{ color: var(--interactive-icon-negative-normal); }
.search-container { padding: var(--spacing-5); text-align: center; }
.search-container div { margin-bottom: var(--spacing-5); }
.search-container div i{ font-size: var(--fz-size-24); }
.search-container .title-container{ line-height: var(--spacing-3); }
.search-container .search-title{ color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-2); }
.search-container .search-subtitle{ color: var(--surface-text-gray-normal); font-size: var(--fz-size-12); font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-3); }
.search-link { color: var(--interactive-text-primary-normal); text-decoration: none; font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-3); }
.search-link:hover { text-decoration: underline; background-color: transparent !important; cursor: pointer; }


/* Spinner css */
.spinner-border { width: var(--size-24); height: var(--size-24); --bs-spinner-animation-speed: 0.75s; --bs-spinner-animation-name: spinner-border; border: 0px solid currentcolor; border-right-color: transparent; }
.spinner-medium { width: var(--size-16) !important; height: var(--size-16) !important; font-size: var(--fz-size-16); }
.spinner-large { width: var(--size-20) !important; height: var(--size-20); font-size: var(--fz-size-20); }
.spinner-xlarge { width: var(--size-24) !important; height: var(--size-24) !important; font-size: var(--fz-size-24); }
.spinner-xxlarge { width: var(--size-48) !important; height: var(--size-48) !important; font-size: var(--size-48); }
.spinner-label-bottom { color: var(--surface-text-gray-muted); font-size: var(--fz-size-12); display: block; margin-top: var(--spacing-3); font-weight: 400; }
.spinner-label { color: var(--surface-text-gray-muted); font-size: var(--fz-size-12); margin: var(--spacing-0) var(--spacing-3); font-weight: var(--fw-400); }

/* Counter css */
.counter{ font-size: var(--fz-size-10); font-weight: var(--fw-600); line-height: var(--lineheight-16); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; min-height: 16px; }
.counter-md{ font-size: var(--fz-size-12); font-weight: var(--fw-600); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; }
.counter-lg{ font-size: var(--fz-size-14); font-weight: var(--fw-600); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; }
.counter{ font-size: var(--fz-size-10); font-weight: var(--fw-600); line-height: var(--lineheight-16); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; min-height: 16px; }
.counter-md{ font-size: var(--fz-size-12); font-weight: var(--fw-600); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; }
.counter-lg{ font-size: var(--fz-size-14); font-weight: var(--fw-600); line-height: var(--lineheight-18); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--bradius-max); text-align: center; white-space: nowrap; vertical-align: baseline; }

/* collapse-Css */
.collapse-link[aria-expanded="false"]::after{ flex-shrink: 0; margin-left: auto; content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-icon-primary-subtle); }
.collapse-link[aria-expanded="true"]::after{ content: "\e845" !important; font-size: var(--fz-size-16); color: var(--interactive-text-primary-subtle); font-family: 'feather' !important; background-image: none !important;}
button.collapse-link[aria-expanded="false"]::after{ flex-shrink: 0; margin-left: auto; content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-text-onprimary-normal); }
button.collapse-link[aria-expanded="true"]::after{ content: "\e845" !important; font-size: var(--fz-size-16); color: var(--interactive-text-onprimary-normal); font-family: 'feather' !important; background-image: none !important; }
.display-actionlist ul.list-group li [aria-expanded="false"]::after { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e844'; font-family: "feather"; position: absolute; right: 6%; top: 23%; color: var(--surface-icon-gray-normal); }
.display-actionlist ul.list-group li [aria-expanded="true"]::after { width: 1rem; text-align: center; vertical-align: 0; border: 0; font-weight: 900; content: '\e845'; font-family: "feather"; position: absolute; right: 6%; top: 23%; color: var(--surface-icon-gray-normal); }
.display-actionlist .sidenav-menu-collapsed{ vertical-align: middle; }
.display-actionlist .list-group-item i { vertical-align: middle; }

/* Chip-Css */
.chip-default { border-radius: var(--bradius-max); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.chip-default:hover { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--interactive-background-gray-faded); }
.chip-default.active{ border: 1.5px solid var(--interactive-border-primary-default) !important; background: var(--interactive-background-primary-faded) !important; color: var(--interactive-text-primary-normal); }
.chip-default:focus-visible { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--interactive-background-gray-faded); color: var(--interactive-text-gray-subtle); }
.chip-default.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}

.chip-default.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}

.chip-default-negative { border-radius: var(--bradius-max); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); color: var(--interactive-text-gray-subtle); background-color: var(--surface-background-gray-intense); }
.chip-default-negative:focus-visible { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.chip-default-negative.active{ border: 1.5px solid var(--interactive-border-negative-default) !important; background: var(--interactive-background-negative-faded) !important; color: var(--interactive-text-negative-normal) !important; }


.chip-default-positive { border-radius: var(--bradius-max); border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.chip-default-positive:focus-visible { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.chip-default-positive.active{ border: 1.5px solid var(--interactive-border-positive-default) !important; background: var(--interactive-background-positive-faded) !important; color: var(--interactive-text-positive-normal) !important; }


.btn.chip-default-positive, .btn.chip-default-positive:active { background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.btn.chip-default-negative, .btn.chip-default-negative:active { background-color: var(--surface-background-gray-intense); color: var(--interactive-text-gray-subtle); }
.chip-default-negative.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}
.chip-default-positive.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}
.chip-default-negative:hover { background-color: var(--interactive-background-gray-faded); color: var(--interactive-text-gray-subtle); }
.chip-default-positive:hover { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--interactive-background-gray-faded); }


.chip-default-negative.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}
.chip-default-positive.disabled {background-color: transparent; color: var(--global-disabled-button-text-color); border-color: var(--interactive-border-gray-disabled);}
.chip-default-negative:hover { background-color: var(--interactive-background-gray-faded); color: var(--interactive-text-gray-subtle); }
.chip-default-positive:hover { border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); background-color: var(--interactive-background-gray-faded); }


.chip-xsm{ padding: var(--spacing-1) var(--spacing-4); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-12); font-weight: var(--fw-400); line-height: var(--lineheight-18); }
.chip-xsm i{ font-size: var(--fz-size-12); }
.chip-sm{ padding: var(--spacing-1) var(--spacing-4); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); }
.chip-sm i{ font-size: var(--fz-size-14); }
.chip-md{ padding: var(--spacing-2) var(--spacing-6); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-16); font-weight: var(--fw-400); line-height: var(--lineheight-24); }
.chip-md i{ font-size: var(--fz-size-16); }
.chip-lg{ padding: var(--spacing-3) var(--spacing-7); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-20); font-weight: var(--fw-400); line-height: var(--lineheight-26); }
.chip-lg i{ font-size: var(--fz-size-20); }
.chip-help-text{ color: var(--surface-text-gray-muted); font-size: var(--fz-size-11); font-style: italic; font-weight: var(--fw-400); line-height: var(--lineheight-16); }

/* Toast css */
.toast { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--bradius-medium); }
.toast .toast-card { display: flex; align-items: baseline }
.toast strong { font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100); }
.toast i { font-size: var(--fz-size-16); margin-right: var(--spacing-3); }
.toast-content p{ color: var(--surface-text-gray-subtle); font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-12); font-style: normal; font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-75); margin-top: var(--spacing-2); margin-bottom: var(--spacing-4); margin-right: var(--spacing-2); }
.toast-positive{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-positive-subtle); background: var(--feedback-background-positive-subtle); }
.toast-positive i{ color: var(--feedback-icon-positive-intense); }
.toast-negative{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-negative-subtle); background: var(--feedback-background-negative-subtle); }
.toast-negative .negative { color: var(--interactive-text-negative-normal) !important; }
.toast-negative i{ color: var(--feedback-icon-negative-intense); }
.toast-notice{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-notice-subtle); background: var(--feedback-background-notice-subtle); }
.toast-notice .notice { color: var(--interactive-text-notice-normal) !important; }
.toast-notice i{ color:var(--interactive-text-notice-normal); }
.toast-information{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-information-subtle); background: var(--feedback-background-information-subtle); }
.toast-information .information { color: var(--interactive-text-information-normal) !important; }
.toast-information i{ color: var(--feedback-icon-information-intense); }
.toast-neutral{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--feedback-border-neutral-subtle); background: var(--feedback-background-neutral-subtle); }
.toast-neutral .neutral { color: var(--interactive-text-neutral-normal) !important; }
.toast-neutral i{ color: var(--feedback-icon-neutral-intense); }
.toast-positive-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-positive-intense); background: var(--feedback-background-positive-intense); color: var(--surface-text-staticwhite-normal); }
.toast-positive-intense i{ color: var(--surface-text-staticwhite-normal); }
.toast-negative-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-negative-intense); background: var(--feedback-background-negative-intense); color: var(--surface-text-staticwhite-normal); }
.toast-negative-intense i{ color: var(--surface-text-staticwhite-normal); }
.toast-notice-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-notice-intense); background: var(--feedback-background-notice-intense); color: var(--surface-text-staticwhite-normal); }
.toast-notice-intense i{ color: var(--surface-text-staticwhite-normal); }
.toast-information-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-information-intense); background: var(--feedback-background-information-intense); color: var(--surface-text-staticwhite-normal); }
.toast-information-intense i{ color: var(--surface-text-staticwhite-normal); }
.toast-neutral-intense{ border-radius: var(--bradius-medium); border: 0px solid var(--feedback-border-neutral-intense); background: var(--feedback-background-neutral-intense); color: var(--surface-text-staticwhite-normal); }
.toast-neutral-intense i{ color: var(--surface-text-staticwhite-normal); }
.toast-container-intense p{ color: var(--surface-text-staticwhite-normal); font-family: var(--Typography-Typefaces-Body); font-size: var(--fz-size-12); font-style: normal; font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-75); margin-top: var(--spacing-2); margin-bottom: var(--spacing-4); margin-right: var(--spacing-2); }
.toast-content{ display: flex; align-items: center; }
.toast-container-promotional{ display: flex; }
.toast-promotional{ border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--surface-border-gray-muted) !important; background: var(--surface-background-gray-intense); }
.toast .btn-icon-16:active, .btn-icon-16:focus, .btn-icon-16:focus-visible{ padding: var(--spacing-0) var(--spacing-0) !important; outline: 2px solid var(--interactive-border-primary-default) !important; }
.toast .btn-icon-16 i:hover{ color: var(--surface-text-staticwhite-subtle); }
.btn-close { color: var(--surface-text-staticwhite-normal) !important; }
.btn-close:focus { outline: 2px solid var(--surface-background-primary-intense) !important; box-shadow: none; opacity: 1; color: var(--surface-text-staticwhite-normal) !important; }
.toast-promotional .btn-icon-16 i:hover{ color: var(--surface-text-staticblack-subtle); }
.toast-container-promotional i { margin-top: var(--size-02); }
.toast .btn-icon-16 {padding: 0px !important; margin: 8px 0 !important; height: 16px;}
.toast .btn-icon-16:focus { outline:2px solid var(--interactive-border-staticwhite-highlighted) !important; }
.toast.toast-promotional .btn-icon-16:focus { outline:2px solid var(--interactive-border-gray-default) !important; }
.toast .btn-icon-16 {padding: 0px !important; margin: 8px 0 !important; height: 16px;}
.toast .btn-icon-16:focus { outline:2px solid var(--interactive-border-staticwhite-highlighted) !important; }
.toast.toast-promotional .btn-icon-16:focus { outline:2px solid var(--interactive-border-gray-default) !important; }

/* Tags-css */
.tag { border-radius: var(--bradius-max); border: 0px solid var(--interactive-border-gray-faded); color: var(--surface-text-gray-subtle); background-color: var(--interactive-background-gray-faded); }
.tag button{ border-radius: none; border: none; color: var(--interactive-icon-gray-muted); background: none; padding: 0px; margin-left: var(--spacing-1); vertical-align: middle; }
.tag button:focus{ outline: 2px solid var(--surface-background-primary-intense) !important; border-radius: var(--bradius-medium); padding: 0; }
.tag-md{ padding: var(--spacing-1) var(--spacing-3); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); }
.tag-md i{ font-size: var(--fz-size-14); }
.tag-lg{ padding: var(--spacing-2) var(--spacing-4); font-family: var(--typography-typefaces-body); font-size: var(--fz-size-16); font-weight: var(--fw-400); line-height: var(--lineheight-24); }
.tag-lg i{ font-size: var(--fz-size-16); }
.tag-group span{ display: inline-block; margin-bottom: var(--spacing-2) !important ; }

/* Bottom Sheet - Css */
.offcanvas.offcanvas-bottom { right: 0; left: 0; height: 45vh; max-height: 100%; border-top: var(--bs-offcanvas-border-width) solid var(--popup-border-subtle); transform: translateY(100%); z-index: 9999; background-color: var(--popup-background-subtle); }
.offcanvas.offcanvas-lg { height: 65vh; }
.offcanvas { padding-top: var(--spacing-2); border-radius: var(--bradius-2xlarge) var(--bradius-2xlarge) 0 0; }
.offcanvas-top-header{ display: flex; padding: var(--spacing-0) var(--spacing-7) var(--spacing-5) var(--spacing-7); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; }
.offcanvas-top-header .handle{ width: 56px; height: 4px; background: var(--interactive-icon-gray-muted); border-radius: var(--bradius-2xlarge); }
.offcanvas-header { display: block; align-items: center; padding: var(--spacing-4) var(--spacing-5); border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.offcanvas-header .header-align{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
.offcanvas-header .header-align i{ color: var(--surface-icon-gray-normal); }
.offcanvas-footer { align-items: center; padding: var(--spacing-4) var(--spacing-4); border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); background-color: transparent; }
.offcanvas-body { flex-grow: 1; padding: var(--spacing-2) var(--spacing-3); overflow-x: hidden; overflow-y: auto; position: relative; }
.offcanvas-body .dropdown-menu { display: inline-block; width: 100%; padding: var(--spacing-0) var(--spacing-0); margin: 0; border-radius: var(--bradius-medium); border: 0px solid var(--popup-background-subtle); box-shadow: none; background-color: transparent; }
.offcanvas-body .dropdown-item:active, .dropdown-item:hover { text-decoration: none; color: var(--surface-text-gray-normal); background-color: var(--bs-list-group-action-active-bg); }
.btn.show > .dropdown-toggle:after{ color: var(--interactive-text-onprimary-normal); }
.offcanvas-body .custom-dropdown .menu-title{ font-size: var(--fz-size-12); font-weight: var(--fw-700); line-height: var(--lineheight-18); color: var(--interactive-text-gray-muted); }
.offcanvas-body .offcanvas-body .dropdown-title{ font-size: var(--fz-size-16); font-weight: var(--fw-700); }
.offcanvas-body .header-divider{ padding-left: 0; padding-right: 0; margin-left: -16px !important; margin-right: -16px !important; }
.offcanvas-body .custom-dropdown li i{ font-size: var(--fz-size-16); margin-right: var(--spacing-3); vertical-align: middle; }
.offcanvas-body .custom-dropdown .dropdown-item { padding: var(--spacing-3) var(--spacing-3); font-size: var(--fz-size-14); font-weight: 400; color: var(--interactive-text-gray-normal); text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; border-radius: var(--bs-dropdown-item-border-radius, 0); }
.offcanvas-body .custom-dropdown li .show-leading::after{ width: 1rem; font-size: var(--fz-size-16); text-align: center; border: 0; font-weight: 900; content: '\e8cd'; font-family: "feather"; position: absolute; right: 20px; color: var(--interactive-icon-gray-muted); vertical-align: middle; }
.offcanvas-body .custom-dropdown li a:hover, a:active{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.offcanvas-body .custom-dropdown li .hover{ color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); border-radius: var(--bradius-medium); }
.offcanvas-body .custom-dropdown li a:focus, a:focus-visible{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-gray-default); }
.offcanvas-body .custom-dropdown li.active a{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-primary-faded); }
.offcanvas-body .custom-dropdown li.active:hover a{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-normal); background-color: var(--interactive-background-primary-fadedHighlighted); }
.offcanvas-body .custom-dropdown li a.focus{ outline: 2px solid var(--surface-background-primary-intense) !important; border-radius: var(--bradius-medium); }
.offcanvas-body .custom-dropdown li a.disabled{ border-radius: var(--bradius-medium); color: var(--interactive-text-gray-disabled); background-color: var(--transparent); }
.offcanvas-body .custom-dropdown li a.destructive{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--transparent); }
.offcanvas-body .custom-dropdown li a.destructive:hover{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-faded); }
.offcanvas-body .custom-dropdown li a.destructive-hover{ border-radius: var(--bradius-medium); color: var(--interactive-text-negative-normal); background-color: var(--interactive-background-negative-faded); }
.offcanvas-body .list-group .sidenav-menu-collapsed { color: var(--interactive-text-gray-normal); border-radius: var(--bradius-medium); font-size: var(--fz-size-14); font-weight: var(--fw-400); line-height: var(--lineheight-20); vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; margin-left: var(--size-08);}
.offcanvas-body .search-container { padding: var(--spacing-5); text-align: center; }
.offcanvas-body .search-container div { margin-bottom: var(--spacing-5); }
.offcanvas-body .search-container div i{ font-size: var(--fz-size-24); }
.offcanvas-body .search-container .title-container{ line-height: var(--spacing-3); }
.offcanvas-body .search-container .search-title{ color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-2); }
.offcanvas-body .search-container .search-subtitle{ color: var(--surface-text-gray-normal); font-size: var(--fz-size-12); font-weight: var(--fw-400); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-3); }
.offcanvas-body .search-link { color: var(--interactive-text-primary-normal); text-decoration: none; font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--Typography-Line-height-line-height-100, 20px); line-height: var(--spacing-3); }
.offcanvas-body .search-link:hover { text-decoration: underline; background-color: transparent !important; cursor: pointer; }

/* Indicator - Css */
.indicator{ color: var(--surface-text-gray-subtle); font-weight: var(--fw-600); display: flex; align-items: center; }
.indicator i{ margin-right: var(--spacing-2); }
.indicator-positive i { color: var(--feedback-icon-positive-intense); }
.indicator-negative i { color: var(--feedback-icon-negative-intense); }
.indicator-notice i { color: var(--feedback-icon-notice-intense); }
.indicator-information i { color: var(--feedback-icon-information-intense); }
.indicator-neutral i { color: var(--feedback-icon-neutral-intense); }
.indicator-sm{ font-size: var(--fz-size-12); }
.indicator-sm i{ font-size: var(--fz-size-12); }
.indicator-md{ font-size: var(--fz-size-14); }
.indicator-md i{ font-size: var(--fz-size-14); }
.indicator-lg { font-size: var(--fz-size-14); }
.indicator-lg i{ font-size: var(--fz-size-18); }

/* Global Show code button - Css */
.show-code { color: var(--interactive-text-primary-normal); background-color: var(--transparent); font-size: var(--fz-size-14); line-height: var(--lineheight-24); font-weight: var(--fw-600); border: none; cursor: pointer; padding: var(--spacing-0) var(--spacing-4); text-decoration: none; border-radius: var(--bradius-medium); }
.show-code:hover { color: var(--interactive-text-primary-subtle); }
.show-code:focus, .show-code:focus-visible, .show-code:active { color: var(--interactive-text-primary-normal); box-shadow: none !important; outline: 2px solid var(--interactive-background-primary-default) !important; outline-offset: 2px !important; }
.show-code:after { content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-text-primary-normal); margin-left: 4px; vertical-align: bottom; }
.show-code.hide:after { flex-shrink: 0; content: "\e845" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-text-primary-normal); margin-left: 4px; vertical-align: bottom; }
.tab-panel { padding: var(--size-16) var(--size-100); }
.disabled, button[disabled]{ cursor: not-allowed !important; pointer-events: auto !important; }

/* Elevation - CSS */
.box{ max-width: 150px; height: 150px; border-radius: var(--bradius-large); background: var(--surface-background-gray-intense); }
.micro-raised{ box-shadow: 0px 2px 5px var(--elevation-microRaised); }
.low-raised{ box-shadow: 0px 2px 16px var(--elevation-lowraised); }
.mid-raised{ box-shadow: 0px 8px 24px var(--elevation-midraised); }
.high-raised{ box-shadow: 0px 16px 48px -4px var(--elevation-highraised); }

/* Loading - CSS */
.loading { background: var(--surface-background-gray-subtle); width: 100%; height: 100vh; }
.spinning-bar { position: fixed; z-index: 999999; top: 50%; left: 50%; height:120px; width: 80px; background: url(../svg/one-loading.svg); background-repeat: no-repeat; background-size: contain; background-position: center; }

/* Back to Top CSS Start */
#auto-top-link { display:none; padding: 3px; position:fixed; float:left; bottom:50px; right:25px; z-index:100; height:32px; width:32px; border-radius:var(--bradius-medium); transition:all .5s ease 0s; -ms-transition:all .5s ease 0s; -o-transition:all .5s ease 0s; -webkit-transition:all .5s ease 0s; cursor: pointer; }
#auto-top-link i{ font-size: var(--fz-size-24); padding:0px; }
#auto-top-link:hover { padding-top: 0px; }
.external-link { text-decoration: none; display: block;}

/* Stepper - Css */
.step{ padding-left: var(--spacing-5); padding-right: var(--spacing-5); align-items: center; text-align: center; }
.step-vertical{ padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); align-items: center; text-align: left; }
.bs-stepper .step-trigger { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--surface-text-gray-muted); text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; background-color: transparent; border: none; border-radius: var(--bradius-max); padding: 2px; transition: background-color .15s ease-out, color .15s ease-out }
.bs-stepper .step-trigger:not(:disabled):not(.disabled) { cursor: pointer }
.bs-stepper .step-trigger.disabled, .bs-stepper .step-trigger:disabled { pointer-events: none; opacity: .65 }
.bs-stepper .step-trigger:focus { color: var(--interactive-text-primary-normal); outline: 0 }
.bs-stepper .step-trigger:hover { text-decoration: none; background-color: var(--transparent); }
.bs-stepper-label { display: inline-block; padding-left: var(--spacing-3); color: var(--surface-text-gray-normal); font-size: var(--fz-size-12); font-weight: var(--fw-700); line-height: var(--lineheight-18); }
.bs-stepper-label-bottom { display: block; padding-top: var(--spacing-3); color: var(--surface-text-gray-normal); font-size: var(--fz-size-12); font-weight: var(--fw-700); line-height: var(--lineheight-18); }
.label-sm { font-size: var(--fz-size-12); font-weight: var(--fw-700); line-height: var(--lineheight-18); }
.label-md { font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--lineheight-20); }
.label-lg { font-size: var(--fz-size-16); font-weight: var(--fw-700); line-height: var(--lineheight-24); }
.label-md { font-size: var(--fz-size-14); font-weight: var(--fw-700); line-height: var(--lineheight-20); }
.label-lg { font-size: var(--fz-size-16); font-weight: var(--fw-700); line-height: var(--lineheight-24); }
.bs-stepper-header { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center }
.bs-stepper .line, .bs-stepper-line { -ms-flex: 1 0 32px; flex: 1 0 32px; min-width: 2px; min-height: 2px; margin: auto; background-color: var(--surface-border-gray-muted); }
.bs-stepper .line, .bs-stepper-line-bottom { -ms-flex: 1 0 32px; flex: 1 0 32px; min-width: 2px; min-height: 2px; margin-top: -30px; background-color: var(--surface-border-gray-muted); }
.bs-stepper .line, .bs-stepper-line-vertical { -ms-flex: 1 0 32px; flex: 1 0 32px; min-width: 2px; min-height: 2px; margin-left: 18px; width: 2px; background-color: var(--surface-border-gray-muted); }
.bs-stepper .line, .bs-stepper-line.active { background-color: var(--feedback-border-information-intense); }
.bs-stepper .line, .bs-stepper-line.positive { background-color: var(--feedback-border-positive-intense); }
.bs-stepper .line, .bs-stepper-line.negative { background-color: var(--feedback-border-negative-intense); }
.bs-stepper .line, .bs-stepper-line.notice { background-color: var(--feedback-border-notice-intense); }
.bs-stepper-circle { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-line-pack: center; align-content: center; -ms-flex-pack: center; justify-content: center; width: 36px; height: 36px; padding: var(--spacing-4) var(--spacing-4); line-height: 1em; color: var(--interactive-text-gray-subtle); background-color: var(--surface-background-gray-intense); border-radius: var(--bradius-max); align-items: center; border: var(--bwidth-thin) solid var(--interactive-border-gray-faded); text-align: center; vertical-align: middle; flex-wrap: wrap; }
.bs-stepper-circle i { font-size: var(--fz-size-20); display: flex; align-content: center; justify-content: center; align-items: center; }
.bs-stepper-circle.stepper-sm { width: 36px; height: 36px; padding: var(--spacing-4) var(--spacing-4); border-radius: var(--bradius-max); }
.bs-stepper-circle.stepper-sm p.sm-label { font-size: var(--fz-size-14); font-weight: var(--fw-400); }
.bs-stepper-circle.stepper-md { width: 48px; height: 48px; padding: var(--spacing-4) var(--spacing-4); border-radius: var(--bradius-max); }
.bs-stepper-circle.stepper-md p.md-label { font-size: var(--fz-size-16); font-weight: var(--fw-400); }
.bs-stepper-circle.stepper-md i { font-size: var(--fz-size-24); }
.bs-stepper-circle.stepper-lg { width: 68px; height: 68px; padding: var(--spacing-7) var(--spacing-6); line-height: 1em; border-radius: var(--bradius-max); }
.bs-stepper-circle.stepper-lg p.lg-label { font-size: var(--fz-size-24); font-weight: var(--fw-400); }
.bs-stepper-circle.stepper-lg i{ font-size: var(--size-32); }
.bs-stepper-circle.active { border: 2px solid var(--interactive-border-information-default); background: var(--interactive-background-information-faded); }
.bs-stepper-circle.positive { border: 2px solid var(--interactive-border-positive-default); background: var(--interactive-background-positive-default); color: var(--interactive-text-staticwhite-normal) !important; }
.bs-stepper-circle.negative { border: 2px solid var(--interactive-border-negative-default); background: var(--interactive-background-negative-default); color: var(--interactive-text-staticwhite-normal) !important; }
.bs-stepper-circle.notice { border: 2px solid var(--interactive-border-notice-default); background: var(--interactive-background-notice-default); color: var(--interactive-text-staticwhite-normal) !important; }
.bs-stepper-content { padding: 0 20px 20px }
.bs-stepper.vertical { display: -ms-flexbox; display: flex }
.bs-stepper.vertical .bs-stepper-header { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: stretch; align-items: stretch; margin: 0; }
.bs-stepper.vertical .bs-stepper-pane, .bs-stepper.vertical .content { display: block }
.bs-stepper.vertical .bs-stepper-pane:not(.fade), .bs-stepper.vertical .content:not(.fade) { display: block; visibility: hidden; }
.bs-stepper .content:not(.fade), .bs-stepper-pane:not(.fade) { display: none }
.bs-stepper .content.fade, .bs-stepper-pane.fade { visibility: hidden; transition-duration: .3s; transition-property: opacity; }
.bs-stepper .content.fade.active, .bs-stepper-pane.fade.active { visibility: visible; opacity: 1 }
.bs-stepper .content.active:not(.fade), .bs-stepper-pane.active:not(.fade) { display: block; visibility: visible; }
.bs-stepper .content.dstepper-block, .bs-stepper-pane.dstepper-block { display: block }
.bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none, .bs-stepper:not(.vertical) .content.dstepper-none { display: none; }
.vertical .bs-stepper-pane.fade.dstepper-none, .vertical .content.fade.dstepper-none { visibility: hidden; }

.disbled .bs-stepper-circle.inactive {color:var(--interactive-icon-gray-disabled); border:2px solid var(--interactive-border-gray-disabled);}
.disbled .bs-stepper-circle.active {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-information-disabled); background: var(--interactive-background-information-disabled);}
.disbled .bs-stepper-circle.positive {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-positive-disabled); background: var(--interactive-background-positive-disabled);}
.disbled .bs-stepper-circle.negative {color:var(--interactive-background-negative-disabled); border: 2px solid var(--interactive-border-negative-disabled); background: var(--interactive-background-negative-disabled);}
.disbled .bs-stepper-circle.notice {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-notice-disabled); background: var(--interactive-background-notice-disabled);}

.disbled .bs-stepper-circle.inactive i {color: var(--interactive-icon-gray-disabled);}
.disbled .bs-stepper-circle.active i {color: var(--interactive-icon-gray-disabled);}
.disbled .bs-stepper-circle.positive i { color: var(--interactive-background-positive-disabled);}
.disbled .bs-stepper-circle.negative i { color: var(--interactive-background-negative-disabled);}
.disbled .bs-stepper-circle.notice i { color: var(--interactive-background-notice-disabled);}

.bs-stepper-line.inactive.disabled  {background-color: var(--interactive-icon-gray-disabled);}
.bs-stepper-line.active.disabled {background-color: var(--interactive-icon-gray-disabled);}
.bs-stepper-line.positive.disabled { background-color: var(--interactive-background-positive-disabled);}
.bs-stepper-line.negative.disabled { background-color: var(--interactive-background-negative-disabled);}
.bs-stepper-line.notice.disabled { background-color: var(--interactive-background-notice-disabled);}


.disbled .bs-stepper-circle.inactive {color:var(--interactive-icon-gray-disabled); border:2px solid var(--interactive-border-gray-disabled);}
.disbled .bs-stepper-circle.active {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-information-disabled); background: var(--interactive-background-information-disabled);}
.disbled .bs-stepper-circle.positive {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-positive-disabled); background: var(--interactive-background-positive-disabled);}
.disbled .bs-stepper-circle.negative {color:var(--interactive-background-negative-disabled); border: 2px solid var(--interactive-border-negative-disabled); background: var(--interactive-background-negative-disabled);}
.disbled .bs-stepper-circle.notice {color:var(--interactive-icon-gray-disabled); border: 2px solid var(--interactive-border-notice-disabled); background: var(--interactive-background-notice-disabled);}

.disbled .bs-stepper-circle.inactive i {color: var(--interactive-icon-gray-disabled);}
.disbled .bs-stepper-circle.active i {color: var(--interactive-icon-gray-disabled);}
.disbled .bs-stepper-circle.positive i { color: var(--interactive-background-positive-disabled);}
.disbled .bs-stepper-circle.negative i { color: var(--interactive-background-negative-disabled);}
.disbled .bs-stepper-circle.notice i { color: var(--interactive-background-notice-disabled);}

.bs-stepper-line.inactive.disabled  {background-color: var(--interactive-icon-gray-disabled);}
.bs-stepper-line.active.disabled {background-color: var(--interactive-icon-gray-disabled);}
.bs-stepper-line.positive.disabled { background-color: var(--interactive-background-positive-disabled);}
.bs-stepper-line.negative.disabled { background-color: var(--interactive-background-negative-disabled);}
.bs-stepper-line.notice.disabled { background-color: var(--interactive-background-notice-disabled);}


/* Scroll bar - Css */
.custome-overflow-y{ overflow-y: scroll; height: 30vh; }
.custome-overflow-x{ overflow-x: scroll; width: 70%; }

/* colors - CSS */
.section-title { font-size: var(--fz-size-16); font-weight: var(--fw-600); margin-top: 1.25rem; margin-bottom: 0.75rem; color: var(--surface-text-gray-normal); }
.color-group { margin-bottom: 1rem; }
.color-group-title { font-weight: var(--fw-600); margin-bottom: var(--spacing-3); font-size: var(--fz-size-14); }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--spacing-4); }
.color-item { display: flex; flex-direction: column; gap: 6px; }
.color-swatch, .color-text-swatch, .color-border-swatch { height: 56px; border-radius: var(--bradius-medium); width: 100%; cursor: pointer; transition: transform 0.1s; }
.color-swatch { background-color: var(--swatch-color); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.color-text-swatch { background-color: var(--swatch-bg, var(--surface-background-gray-subtle)); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); color: var(--swatch-color); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-600); font-size: var(--fz-size-16); }
.color-border-swatch { background-color: var(--swatch-bg, var(--surface-background-gray-subtle)); border: 2px solid var(--swatch-color); }
.color-swatch-sm { height: 44px; border-radius: var(--bradius-medium); width: 100%; cursor: pointer; background-color: var(--swatch-color); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); transition: transform 0.1s; }
.color-text-swatch-sm { height: 44px; border-radius: var(--bradius-medium); width: 100%; cursor: pointer; background-color: var(--swatch-bg, var(--surface-background-gray-subtle)); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); color: var(--swatch-color); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-600); font-size: var(--fz-size-14); transition: transform 0.1s; }
.color-border-swatch-sm { height: 44px; border-radius: var(--bradius-medium); width: 100%; cursor: pointer; background-color: var(--swatch-bg, var(--surface-background-gray-subtle)); border: 2px solid var(--swatch-color); transition: transform 0.1s; }
[data-var] .color-swatch, [data-var] .color-text-swatch, [data-var] .color-border-swatch,
[data-var] .color-swatch-sm, [data-var] .color-text-swatch-sm, [data-var] .color-border-swatch-sm { cursor: pointer; }
[data-var]:hover .color-swatch, [data-var]:hover .color-text-swatch, [data-var]:hover .color-border-swatch,
[data-var]:hover .color-swatch-sm, [data-var]:hover .color-text-swatch-sm, [data-var]:hover .color-border-swatch-sm { transform: scale(1.03); }
.color-swatch-label { font-size: var(--fz-size-14); color: var(--feedback-text-neutral-intense); }
.staticwhite-bg { background: var(--surface-background-dark-intense); }
.staticblack-bg { background-color: var(--surface-background-gray-subtle); border-radius: var(--bradius-medium); padding: var(--spacing-3); }
.interactive-panel { background-color: var(--surface-background-gray-subtle); border-radius: var(--bradius-large); margin-top: var(--spacing-3); }
.interactive-combo { padding: var(--spacing-5); }
.interactive-combo-group { padding-bottom: var(--spacing-4); margin-bottom: var(--spacing-4); border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); }
.interactive-combo-group:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.interactive-combo-title { font-size: var(--fz-size-18); font-weight: var(--fw-600); color: var(--surface-text-gray-normal); margin-bottom: var(--spacing-4); }
.interactive-combo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-4); }
.interactive-combo-cell { display: flex; flex-direction: column; gap: var(--spacing-3); }
.interactive-combo-label { font-size: var(--fz-size-14); font-weight: var(--fw-600); color: var(--surface-text-gray-normal); }
#ds-tooltip { position: fixed; z-index: 9999; background: var(--surface-background-gray-intense); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-large); box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 14px 14px 10px; min-width: 300px; max-width: 320px; display: none; pointer-events: none; }
#ds-tooltip.visible { display: block; pointer-events: auto; }
.color-tip-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--spacing-3); }
.color-tip-preview { width: 80px; height: 80px; border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); flex-shrink: 0; }
.color-tip-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.color-tip-property { font-size: var(--fz-size-12); color: var(--surface-text-gray-subtle); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-600); }
.color-tip-var { font-size: var(--fz-size-12); font-family: monospace; color: var(--surface-text-gray-normal); word-break: break-all; line-height: 1.4; }
.color-tip-hex { font-size: var(--fz-size-12); font-family: monospace; color: var(--surface-text-gray-subtle); }
.color-tip-copy-btn { display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: auto; }
.copy-toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface-background-primary-intense); color:var(--interactive-text-onprimary-normal); padding: 8px 16px; border-radius: var(--bradius-medium); font-size: var(--fz-size-16); opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 99999; font-weight: var(--fw-700); }
.copy-toast.show { opacity: 1; }

/*Datepicker css start — selectors updated for Tempus Dominus v6*/
.input-group-append .input-group-text { border-radius: 0 4px 4px 0px !important; }
.form-group.date_css .datetimepicker-input { border: var(--bwidth-thin) solid; border-color: var(--interactive-border-gray-default); border-radius: var(--bradius-medium); padding-left: var(--input-textfield-large-horizontal-padding); padding-right: var(--input-textfield-large-horizontal-padding); background-color: var(--surface-background-gray-moderate); }
.form-group.date_css .input-group-text {border: var(--bwidth-thin) solid; border-color: var(--interactive-border-gray-default); border-radius: var(--bradius-medium); padding-left: var(--input-textfield-large-horizontal-padding); padding-right: var(--input-textfield-large-horizontal-padding); background-color: var(--surface-background-gray-moderate); border-left:0px; }
.form-group.date_css .input-group-text {border: var(--bwidth-thin) solid; border-color: var(--interactive-border-gray-default); border-radius: var(--bradius-medium); padding-left: var(--input-textfield-large-horizontal-padding); padding-right: var(--input-textfield-large-horizontal-padding); background-color: var(--surface-background-gray-moderate); border-left:0px; }
.input_small .date_css input { height: var(--size-32); }
.input_medium .date_css input { height: var(--size-36); }
.input_large .date_css input { height: var(--size-48); }
.input_small .date_css .input-group-append .input-group-text { padding:10px; height: var(--size-32); }
.input_medium .date_css .input-group-append .input-group-text { padding:11px; height: var(--size-36); }
.input_large .date_css .input-group-append .input-group-text { padding:14px; height: var(--size-48); }
.date_css input:focus { outline: 2px solid var(--surface-background-primary-intense) !important; border: 0px !important; }
.date_css i { color: var(--interactive-icon-gray-muted); }
.date_css i { color: var(--interactive-icon-gray-muted); }
.input_small .date_css i, .input_medium .date_css i { font-size: var(--fz-size-20); }
.input_large .date_css i { font-size: var(--fz-size-24); }
input.datetimepicker-input:hover { background-color: var(--interactive-background-gray-default) !important; }
.fa.fa-calendar, .fa.fa-calendar-check-o { font-size: var(--fz-size-20); }
.tempus-dominus-widget { background: var(--popup-background-subtle) !important; color: var(--surface-text-gray-subtle); box-shadow: 0px 8px 24px 0px var(--elevation-highraised) !important; width: 20rem !important; }
.tempus-dominus-widget .dow { background-color: transparent !important; padding: var(--spacing-4) var(--size-06); color: var(--surface-text-gray-normal) !important; font-weight: var(--fw-700); border: none !important; border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted) !important; text-align: center !important; }
.tempus-dominus-widget .date-container-days { gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; grid-template-columns: repeat(7, 44.5px) !important; }
.tempus-dominus-widget .day,
.tempus-dominus-widget .dow { width: 100% !important; height: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
.tempus-dominus-widget .day { padding: var(--spacing-3) !important; line-height: normal !important; color: var(--surface-text-gray-subtle); background: transparent !important; border-radius: 0 !important; border: none !important; border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted) !important; text-align: center !important; }
.tempus-dominus-widget .day:hover { background-color: var(--interactive-background-gray-default) !important; border-radius: var(--bradius-small) !important; }
.tempus-dominus-widget .day.old,
.tempus-dominus-widget .day.new { color: var(--surface-border-gray-subtle) !important; }
.tempus-dominus-widget .day.active,
.tempus-dominus-widget .day.active:hover,
.tempus-dominus-widget .date-container-months [data-action="selectMonth"].active,
.tempus-dominus-widget .date-container-years [data-action="selectYear"].active,
.tempus-dominus-widget .date-container-decades [data-action="selectDecade"].active { background-color: var(--surface-background-primary-intense) !important; color: var(--surface-text-staticwhite-normal) !important; border-radius: var(--bradius-small) !important; border-color: transparent !important; }
.tempus-dominus-widget .day.today { border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted) !important; }
.tempus-dominus-widget .day.today:before { border-bottom-color: var(--surface-background-primary-intense) !important; }
.tempus-dominus-widget .day.active.today:before { border-bottom-color: var(--surface-icon-staticwhite-normal) !important; }
.tempus-dominus-widget .date-container-months [data-action="selectMonth"]:hover,
.tempus-dominus-widget .date-container-years [data-action="selectYear"]:hover,
.tempus-dominus-widget .date-container-decades [data-action="selectDecade"]:hover { background-color: var(--interactive-background-gray-default) !important; border-radius: var(--bradius-small) !important; }
.tempus-dominus-widget .date-container-months [data-action="selectMonth"],
.tempus-dominus-widget .date-container-years [data-action="selectYear"],
.tempus-dominus-widget .date-container-decades [data-action="selectDecade"] { background: transparent !important; color: var(--surface-text-gray-subtle); border-radius: var(--bradius-small) !important; }
.tempus-dominus-widget .calendar-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: var(--spacing-3) var(--spacing-2) !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.tempus-dominus-widget .calendar-header .previous,
.tempus-dominus-widget .calendar-header .next { flex-shrink: 0; cursor: pointer; color: var(--surface-icon-gray-subtle); padding: var(--spacing-2) var(--spacing-3); }
.tempus-dominus-widget .calendar-header .picker-switch { flex: 1 !important; text-align: center !important; padding: var(--spacing-2) !important; font-weight: var(--fw-700) !important; color: var(--surface-text-gray-subtle) !important; background: transparent !important; cursor: pointer; }
.tempus-dominus-widget .time-container { background: var(--popup-background-subtle) !important; }
.tempus-dominus-widget .time-container-clock { grid-template-columns: repeat(6, 50px) !important; gap: 2px !important; }
.tempus-dominus-widget .time-container-clock [data-action] { color: var(--surface-background-primary-intense) !important; background-color: transparent !important; border: none !important; width: 50px !important; height: 50px !important; font-size: var(--fz-size-16) !important; line-height: var(--lineheight-24) !important; font-weight: var(--fw-700) !important; letter-spacing: 0 !important; border-radius: 2px !important; }
.tempus-dominus-widget .time-container-clock [data-time-component] { color: var(--surface-text-staticblack-normal) !important; }
.tempus-dominus-widget .time-container-clock .separator { height: 50px !important; color: var(--surface-text-gray-muted) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.tempus-dominus-widget .time-container-clock .no-highlight { height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.tempus-dominus-widget .time-container-clock .toggleMeridiem { background-color: var(--surface-background-primary-intense) !important; color: var(--surface-text-staticwhite-normal) !important; border: none !important; border-radius: 2px !important; width: 36px !important; height: 28px !important; font-size: var(--fz-size-16) !important; font-weight: var(--fw-700) !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 0 !important; }
.tempus-dominus-widget .toolbar { padding: 12px 4px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.tempus-dominus-widget .toolbar [data-action] { color: var(--interactive-icon-gray-muted) !important; background-color: transparent !important; border: none !important; cursor: pointer; border-radius: var(--bradius-small) !important; width: 44px !important; height: 44px !important; }
.tempus-dominus-widget .toolbar [data-action]:hover { background-color: var(--interactive-background-gray-default) !important; border-radius: var(--bradius-small) !important; }
.tempus-dominus-widget [tabindex]:focus { outline: none !important; box-shadow: none !important; }
.tempus-dominus-widget [tabindex]:focus-visible { outline: 2px solid var(--surface-background-primary-intense) !important; outline-offset: 2px !important; box-shadow: none !important; }
.tempus-dominus-widget button:focus { outline: none !important; box-shadow: none !important; }
.tempus-dominus-widget button:focus-visible { outline: 2px solid var(--surface-background-primary-intense) !important; outline-offset: 2px !important; box-shadow: none !important; border-radius: 2px !important; }
.tempus-dominus-widget .day:focus-visible { border-radius: 2px !important; }
.tempus-dominus-widget [tabindex]:focus-visible { border-radius: 2px !important; }

.input-group-append {border: 0 none; padding: 0; z-index:1; border-radius: 0 4px 4px 0px !important;}

.input-group-append {border: 0 none; padding: 0; z-index:1; border-radius: 0 4px 4px 0px !important;}

.select-input{ position: relative; display: flex; align-items: center; }
.form-select{ border: var(--bwidth-thin) solid; border-color: var(--interactive-border-gray-default); border-radius: var(--bradius-medium); padding-left: var(--input-textfield-large-horizontal-padding); padding-right: var(--input-textfield-large-horizontal-padding); background-color: var(--surface-background-gray-moderate); }
.form-select:focus-within { outline: 2px solid var(--interactive-border-primary-default) !important; }
.form-select:focus { outline: 2px solid var(--surface-background-primary-intense) !important; border-color: var(--surface-background-primary-intense); box-shadow: none; }
.form-select:hover { background-color: var(--interactive-background-gray-faded); }
.input_small .form-select { height: var(--size-32); font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); }
.form-select option { background-color: var(--popup-background-subtle); color: var(--surface-text-gray-normal); }
.form-select option:disabled{ color: var(--surface-text-gray-normal) !important;}
.input_medium .form-select { height: var(--size-36); font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); }
.input_large .form-select { height: var(--size-48); font-size: var(--fz-size-16); color: var(--surface-text-gray-subtle); }
.form-select.hover, .form-select:hover{ background-color: var(--interactive-background-gray-faded) !important; }
.form-select.active{ outline: 2px solid var(--interactive-border-primary-default) !important; }
.form-select { --bs-form-select-bg-img: none; position: relative; display: flex; flex-wrap: wrap; cursor: pointer; color: var(--surface-text-gray-subtle); opacity: 1 !important; }
.select-input::after { flex-shrink: 0; content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-icon-gray-muted); position: absolute; right: 2%; pointer-events: none; }
.select-input.disabled .form-select{ cursor: no-drop; border-color: var(--interactive-border-gray-disabled); color: var(--global-disabled-text-color); background-color: transparent; }
.select-input.disabled::after { flex-shrink: 0; content: "\e842" !important; font-size: var(--fz-size-16); font-family: 'feather' !important; background-image: none !important; color: var(--surface-icon-gray-disabled); position: absolute; right: 2%; cursor: no-drop; }
.select-input.success .form-select{ border-width: var(--bwidth-thick); border-color: var(--interactive-border-primary-default); }
.select-input.error .form-select{ border-width: var(--bwidth-thick); border-color: var(--interactive-border-negative-default); }
.select-input.success .form-select{ border-width: var(--bwidth-thick); border-color: var(--interactive-border-primary-default); }
.select-input.error .form-select{ border-width: var(--bwidth-thick); border-color: var(--interactive-border-negative-default); }
.multi-select select { display: none; }
.inputtext .dropdown-menu.show { display: block; position: static !important; }
.multi-select .form-check { display: flex; align-items: center; }
.tag i{ cursor: pointer; }
.inputtext .dropdown-item { cursor: pointer; }
.inputtext .dropdown-item:hover { background-color: var(--surface-background-gray-subtle); }
.h-500{min-height:500px;}

/* Help Page Css */
.accordion .card { border-radius: var(--bradius-medium) !important; padding: var(--spacing-5) var(--spacing-5); }
.accordion .card .accordion-header .accordion-button{ padding: var(--spacing-0) var(--spacing-0); font-size: var(--fz-size-14); font-weight: var(--fw-600); line-height: var(--line-height-100); color: var(--surface-text-gray-normal); text-align: left; background-color: transparent; border: var(--bradius-none) !important; overflow-anchor: none; transition: var(--bs-accordion-transition); }
.accordion .card .accordion-header .accordion-button:not(.collapsed) { padding-bottom: var(--spacing-4); }
.accordion .card .accordion-body{ padding: var(--spacing-5) var(--spacing-2) !important; }
.filter-logo img{filter: var(--footer-logo-filter);}
.card { color: var(--surface-text-gray-normal);}
.header .dropdown-toggle:after{ content: "\e842" !important; font-size: var(--fz-size-14); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-icon-staticwhite-normal); margin-left: -1px; vertical-align: bottom; border-top: none;}
.text-white{ color: var(--surface-text-staticwhite-subtle) !important;}
.library-dropdown{ left: 90px !important;}
.list-group-item{ background-color: transparent !important;}
.icon_lists .list-group-item{ border: var(--bwidth-thin) solid var(--surface-border-gray-muted);background-color: var(--card-bg-intense) !important;}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--interactive-background-gray-disabled); }
::-webkit-scrollbar-thumb { background-color: var(--interactive-icon-gray-disabled); border-radius: 6px; border: 3px solid var(--interactive-background-gray-disabled); }
::-webkit-scrollbar-thumb:hover { background-color: var(--surface-icon-gray-muted); }
.helppage-container { border-radius: var(--card-border-radius-medium); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); margin-bottom: var(--spacing-5); background-color: var(--surface-background-gray-intense); }
.helppage-header { display: flex; justify-content: space-between; align-items: flex-start; font-family: 'Nunito Sans', sans-serif; font-size: 1rem; font-weight: bold; margin-bottom: -1rem; padding: var(--card-default-padding-5); }
.helppage-subheader { display: flex; justify-content: space-between; align-items: flex-start; font-family: 'Nunito Sans', sans-serif; font-size: 1rem; font-weight: bold; margin-bottom: -0.5rem; padding-bottom: var(--card-default-padding-5); }
.helppage-content { margin: var(--card-default-padding-5); background-color: var(--surface-background-gray-subtle); padding: 1rem; border-radius: 4px; align-items: center; }

/* Icon Gallery */
.icon-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.icon-gallery-desc { font-family: var(--typography-typefaces-body); font-size: var(--fz-size-14); color: var(--surface-text-gray-subtle); margin: 0; }
.icon-gallery-search { margin-bottom: 20px; }
.icons-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.icon-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 8px 14px; border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); background: var(--surface-background-gray-intense); cursor: pointer; gap: 10px; transition: background 0.15s, transform 0.1s; min-height: 100px; text-align: center; user-select: none; }
.icon-card:hover { background: var(--surface-background-gray-subtle); transform: scale(1.03); }
.icon-card.copied { background: var(--interactive-background-primary-faded); border-color: var(--interactive-border-primary-default); }
.icon-card i { color: var(--surface-text-gray-normal); line-height: 1; transition: font-size 0.15s; }
.icon-card-name { font-size: var(--fz-size-12); font-family: monospace; color: var(--surface-text-gray-subtle); word-break: break-all; line-height: 1.3; }
.icon-section-label { font-size: var(--fz-size-14); font-weight: var(--fw-600); color: var(--surface-text-gray-normal); margin: 24px 0 16px; padding-bottom: 8px; border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); grid-column: 1 / -1; }
.icon-no-results { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); }

/* Global Footer Styles */
/* Base Footer Styles */
.global-footer { width: 100%; margin-top: auto; border-top: 4px solid var(--surface-background-primary-intense); }

/* Dark Theme (Default) */
.global-footer-dark { background-color: var(--header-and-footer); color: var(--surface-text-staticwhite-normal); }

/* Light Theme */
.global-footer-light { background-color: var(--surface-background-gray-moderate); color: var(--surface-text-gray-normal); }

/* Footer Content Container */
.footer-content { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-10); }

/* MINIMAL FOOTER VARIANT */
.global-footer-minimal { padding: var(--spacing-5) 0; }
.global-footer-minimal .footer-content { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-8); }
.global-footer-minimal .footer-logo { display: flex; align-items: center; flex-shrink: 0; }
.global-footer-minimal .footer-logo-img { height: 32px; width: auto; }

/* Dark theme logo filter */
.global-footer-dark .footer-logo-img { filter: brightness(0) invert(1); }
.global-footer-light .footer-logo-img { filter: brightness(0) invert(1); }

/* Light theme - no filter needed for dark logo */
.global-footer-light .footer-logo-img { filter: none; }
.global-footer-minimal .footer-copyright { flex: 1; text-align: center; font-size: var(--fz-size-14); line-height: var(--lineheight-20); margin: 0; }
.global-footer-minimal .footer-copyright span { display: inline-block; }

/* Dark theme text colors */
.global-footer-dark .footer-copyright { color: var(--surface-text-staticwhite-subtle); }

/* Light theme text colors */
.global-footer-light .footer-copyright { color: var(--surface-text-gray-normal); }
.global-footer-minimal .footer-divider { font-size: var(--fz-size-14); line-height: var(--lineheight-20); }

/* Dark theme divider */
.global-footer-dark .footer-divider { color: var(--surface-text-staticwhite-normal); }

/* Light theme divider */
.global-footer-light .footer-divider { color: var(--surface-text-gray-normal); }
.global-footer-minimal .footer-link { text-decoration: none; font-size: var(--fz-size-14); line-height: var(--lineheight-20); font-weight: var(--fw-600); padding: var(--spacing-2) var(--spacing-2); border-radius: var(--bradius-small); transition: opacity 0.2s ease; white-space: nowrap; color: var(--interactive-text-staticwhite-subtle); }
.global-footer-minimal .footer-link:hover { opacity: 0.8; }
.global-footer-minimal .footer-link:focus-visible { outline: 2px solid var(--surface-background-primary-intense); outline-offset: 2px; }
.global-footer-light .footer-link { color: var(--interactive-text-neutral-normal); }

/* LARGE FOOTER VARIANT */
.global-footer-large { padding: var(--spacing-10) 0 var(--spacing-6) 0; }
.global-footer-large .footer-main { display: grid; grid-template-columns: 3fr 3fr; gap: var(--spacing-10); margin-bottom: var(--spacing-8); padding-bottom: var(--spacing-8); border-bottom: var(--bwidth-thin) solid; }

/* Dark theme border */
.global-footer-dark.global-footer-large .footer-main { border-bottom-color: var(--surface-border-gray-muted); }

/* Light theme border */
.global-footer-light.global-footer-large .footer-main { border-bottom-color: var(--surface-border-gray-normal); }
.global-footer-large .footer-brand { display: flex; flex-direction: column; gap: var(--spacing-5); }
.global-footer-large .footer-logo { display: flex; align-items: center; }
.global-footer-large .footer-description { font-size: var(--fz-size-14); line-height: var(--lineheight-20); margin: 0; }

/* Dark theme description */
.global-footer-dark .footer-description { color: var(--interactive-text-staticwhite-subtle); }

/* Light theme description */
.global-footer-light .footer-description { color: var(--surface-text-gray-subtle); }
.global-footer-large .footer-social { display: flex; gap: var(--spacing-4); margin-top: var(--spacing-2); }
.global-footer-large .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--bradius-medium); transition: background-color 0.2s ease; text-decoration: none; }
.global-footer-large .footer-social-link i { font-size: var(--fz-size-20); }

/* Dark theme social links */
.global-footer-dark .footer-social-link { color: var(--surface-icon-staticwhite-normal); }
.global-footer-dark .footer-social-link:hover { background-color: var(--interactive-background-gray-faded); }

/* Light theme social links */
.global-footer-light .footer-social-link { color: var(--surface-icon-gray-normal); }
.global-footer-light .footer-social-link:hover { background-color: var(--interactive-background-primary-faded); }
.global-footer-large .footer-social-link:focus-visible { outline: 2px solid var(--surface-background-primary-intense); outline-offset: 2px; }

/* Footer Link Columns */
.global-footer-large .footer-links-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-10); }
.global-footer-large .footer-column { display: flex; flex-direction: column; gap: var(--spacing-4); }
.global-footer-large .footer-column-heading { font-size: var(--fz-size-16); line-height: var(--lineheight-24); font-weight: var(--fw-600); margin: 0 0 var(--spacing-3) 0; }

/* Dark theme heading */
.global-footer-dark .footer-column-heading { color: var(--interactive-text-staticwhite-normal); }

/* Light theme heading */
.global-footer-light .footer-column-heading { color: var(--surface-text-gray-intense); }
.global-footer-large .footer-column-list { display: flex; flex-direction: column; gap: var(--spacing-3); list-style: none; padding: 0; margin: 0; }
.global-footer-large .footer-column-list li { margin: 0; }
.global-footer-large .footer-column-link { text-decoration: none; font-size: var(--fz-size-14); line-height: var(--lineheight-20); padding: var(--spacing-1) 0; display: inline-block; transition: opacity 0.2s ease; }

/* Dark theme links */
.global-footer-dark .footer-column-link { color: var(--interactive-text-staticwhite-subtle); }

/* Light theme links */
.global-footer-light .footer-column-link { color: var(--surface-text-gray-subtle); }
.global-footer-large .footer-column-link:hover { opacity: 0.8; }
.global-footer-large .footer-column-link:focus-visible { outline: 2px solid var(--surface-background-primary-intense); outline-offset: 2px; border-radius: var(--bradius-small); }

/* Newsletter Section */
.global-footer-large .footer-newsletter { display: flex; align-items: flex-end; gap: var(--spacing-4); }
.global-footer-large .footer-newsletter .inputtext { flex: 3; margin-bottom: 0; }
.global-footer-large .footer-newsletter .inputtext label{ color: var(--interactive-text-staticwhite-subtle); }
.global-footer-large .footer-newsletter .btn { flex-shrink: 0; }

/* Footer Bottom Section */
.global-footer-large .footer-bottom { display: flex; justify-content: center; align-items: center; }
.global-footer-large .footer-bottom-text { font-size: var(--fz-size-14); line-height: var(--lineheight-20); margin: 0; text-align: center; }

/* Dark theme bottom text */
.global-footer-dark .footer-bottom-text { color: var(--surface-text-staticwhite-subtle); }

/* Light theme bottom text */
.global-footer-light .footer-bottom-text { color: var(--surface-text-gray-subtle); }

/* PRIVATE LABELING VARIANT */
.global-footer-private { padding: var(--spacing-10) 0 var(--spacing-6) 0; }
.footer-logo-group{ display: flex; gap: 12px; }
.global-footer-private .footer-main { display: grid; grid-template-columns: 3fr 3fr; gap: var(--spacing-10); margin-bottom: var(--spacing-8); padding-bottom: var(--spacing-8); border-bottom: var(--bwidth-thin) solid; }
.global-footer-dark.global-footer-private .footer-main { border-bottom-color: var(--surface-border-gray-muted); }
.global-footer-light.global-footer-private .footer-main { border-bottom-color: var(--surface-border-gray-muted); }
.global-footer-private .footer-brand { display: flex; flex-direction: column; gap: var(--spacing-4); }
.global-footer-private .footer-logo-group { display: flex; align-items: center; gap: var(--spacing-5); }
.global-footer-private .footer-logo { display: flex; align-items: center; }
.global-footer-private .footer-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid; border-radius: var(--bradius-medium); padding: var(--spacing-2); flex-shrink: 0; background-color: transparent; }
.global-footer-private .footer-badge img { width: 100%; height: 100%; object-fit: contain; }

/* Dark theme badge */
.global-footer-dark .footer-badge { border-color: var(--surface-border-staticwhite-normal); }

/* Light theme badge */
.global-footer-light .footer-badge { border-color: var(--surface-border-gray-intense); }
.global-footer-private .footer-badge i { font-size: var(--fz-size-18); }

/* Dark theme badge icon */
.global-footer-dark .footer-badge i { color: var(--surface-icon-staticwhite-normal); }

/* Light theme badge icon */
.global-footer-light .footer-badge i { color: var(--surface-icon-gray-intense); }
.global-footer-private .footer-description { font-size: var(--fz-size-14); line-height: var(--lineheight-20); margin: 0; }
.global-footer-dark .footer-description { color: var(--surface-text-staticwhite-subtle); }
.global-footer-private .footer-social { display: flex; gap: var(--spacing-4); margin-top: var(--spacing-2); }
.global-footer-private .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--bradius-medium); transition: background-color 0.2s ease; text-decoration: none; }
.global-footer-private .footer-social-link i { font-size: var(--fz-size-20); }
.global-footer-private .footer-social-link:focus-visible { outline: 2px solid var(--surface-background-primary-intense); outline-offset: 2px; }
.global-footer-private .footer-links-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-10); }
.global-footer-private .footer-column { display: flex; flex-direction: column; gap: var(--spacing-4); }
.global-footer-private .footer-column-heading { font-size: var(--fz-size-16); line-height: var(--lineheight-24); font-weight: var(--fw-600); margin: 0 0 var(--spacing-3) 0; }
.global-footer-dark .footer-column-heading { color: var(--surface-text-staticwhite-normal); }
.global-footer-private .footer-column-list { display: flex; flex-direction: column; gap: var(--spacing-3); list-style: none; padding: 0; margin: 0; }
.global-footer-private .footer-column-list li { margin: 0; }
.global-footer-private .footer-column-link { text-decoration: none; font-size: var(--fz-size-14); line-height: var(--lineheight-20); padding: var(--spacing-1) 0; display: inline-block; transition: opacity 0.2s ease; }
.global-footer-dark .footer-column-link { color: var(--surface-text-staticwhite-subtle); }
.global-footer-private .footer-column-link:hover { opacity: 0.8; }
.global-footer-private .footer-column-link:focus-visible { outline: 2px solid var(--surface-background-primary-intense); outline-offset: 2px; border-radius: var(--bradius-small); }
.global-footer-private .footer-newsletter { display: flex; align-items: flex-end; gap: var(--spacing-4); }
.global-footer-private .footer-newsletter .inputtext { flex: 3; margin-bottom: 0; }
.global-footer-private .footer-newsletter .btn { flex-shrink: 0; }
.global-footer-private .footer-bottom { display: flex; justify-content: center; align-items: center; }
.global-footer-private .footer-bottom-text { font-size: var(--fz-size-14); line-height: var(--lineheight-20); margin: 0; text-align: center; }
.global-footer-light .footer-newsletter .inputtext label { color: var(--surface-text-gray-subtle); }
.global-footer-light.global-footer-large .footer-main { border-bottom-color: var(--surface-border-gray-muted); }
.one-header-title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--interactive-text-staticwhite-normal); }
.skip-link { position: absolute; top: -50px; left: 0; transition: top 0.2s; z-index: 999999999; background: var(--surface-background-gray-subtle) !important; padding: 10px 10px;}
.skip-link:focus { top: 0;}
.text-muted{ color: var(--interactive-text-gray-muted) !important;}
a.sort_arrow span { display: none;}
.required:after { content:" *"; color:var(--feedback-text-negative-intense); font-size: var(--fz-size-14)}

/* Header Search */
.nav-search-wrapper { position: relative; display: flex; align-items: center; margin-right: 10px; }
.nav-search-wrapper #nav-search-toggle { background: none; border: none; cursor: pointer; color: var(--surface-text-staticwhite-normal); border-radius: var(--bradius-medium); }
.nav-search-container { position: absolute; right: 0; top: 68px; transform: translateY(-50%); display: flex; align-items: center; gap: var(--spacing-2); z-index: 100; min-width: 270px; border-radius: var(--bradius-medium); border: var(--bwidth-thin) solid var(--popup-border-subtle); box-shadow: 0px 8px 24px var(--elevation-midraised); background-color: var(--popup-background-subtle); padding: var(--spacing-3); }
.nav-search-container .inputtext { width: 100%; }
.nav-search-container .input_css { background-color: var(--surface-background-gray-subtle); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.nav-search-container .form-control { font-size: var(--fz-size-14); font-family: "Raleway", sans-serif; }
.nav-search-container .form-control::placeholder { color: var(--surface-text-gray-muted); }
.nav-search-close { background: none; border: none; cursor: pointer; color: var(--surface-text-gray-muted); padding: var(--spacing-1); display: flex; align-items: center; position: absolute; right: var(--spacing-3); top: 50%; transform: translateY(-50%); }
.nav-search-close:hover { color: var(--surface-text-gray-normal); }
.nav-search-results { position: absolute; right: 0; top: 92px; margin-top: var(--spacing-2); background-color: var(--surface-background-gray-subtle); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 320px; max-height: 400px; overflow-y: auto; z-index: 200; list-style: none; padding: var(--spacing-2); }
.nav-search-result-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-3) var(--spacing-4); border-radius: var(--bradius-small); cursor: pointer; gap: var(--spacing-3); }
.nav-search-result-item:hover, .nav-search-result-item:focus { background-color: var(--interactive-background-gray-default); outline: none; }
.nav-search-result-label { font-size: var(--fz-size-14); font-weight: 500; color: var(--surface-text-gray-normal); }
.nav-search-result-category { font-size: var(--fz-size-12); color: var(--surface-text-gray-muted); white-space: nowrap; }
.nav-search-no-results { padding: var(--spacing-4); text-align: center; color: var(--surface-text-gray-muted); font-size: var(--fz-size-14); }
.nav-search-view-all { padding: var(--spacing-3) var(--spacing-4); text-align: center; cursor: pointer; color: var(--interactive-text-primary-normal); font-size: var(--fz-size-14); font-weight: 500; border-radius: var(--bradius-small); }
.nav-search-view-all:hover, .nav-search-view-all:focus { background-color: var(--interactive-background-primary-faded); border-radius: var(--bradius-medium); outline: none; }

/* Search Results Page */
.search-results-bar .input-group {width:100%;}
.search-results-bar .input-group-text { background-color: var(--surface-background-gray-moderate); border: var(--bwidth-thin) solid var(--interactive-border-gray-default); border-right: none; color: var(--surface-icon-gray-muted); }
.search-results-bar .form-control { border: var(--bwidth-thin) solid var(--interactive-border-gray-default); font-size: var(--fz-size-14); height: var(--size-48); color: var(--surface-text-gray-subtle); }
.search-results-bar .form-control:focus { border-color: var(--interactive-border-primary-default); border-width: var(--bwidth-thick);}
.search-results-bar .form-control:focus { border-color: var(--interactive-border-primary-default); border-width: var(--bwidth-thick);}
.search-result-card { border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); padding: var(--spacing-2);  }
.search-result-card:hover { border-color: var(--interactive-border-primary-default); }
.search-result-card .card-body { padding: var(--spacing-5); }
.search-result-card h3 { color: var(--surface-text-gray-normal); }
.search-result-card p { color: var(--surface-text-gray-muted); }

.typo { position: relative; }
.typo:after{ content: " "; height: 1px; width: 88%; position: absolute; left: 0; background: var(--surface-border-gray-muted); align-items: center; justify-content: center; margin: 0px 15px; }


/* ================== Landing Page CSS Start ==================  */

/* ===== Home Page Layout ===== */
.home-page { background-color: var(--surface-background-gray-subtle); transition: margin-left var(--transition-normal), background-color var(--transition-normal); overflow-y: auto; min-height: calc(100vh - 48px); display: block; padding: var(--size-24); }
.design_wrapper { padding: var(--spacing-5); }

/* ===== Hero Section ===== */
.hero-section { padding: var(--size-00) 0 var(--size-12); }
.hero-card {background-color: #2a625a; background-image: url(../svg/Background.svg); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: var(--bradius-large); padding: var(--size-48) var(--size-24); text-align: center; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-24); position: relative; overflow: hidden; }
.hero-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--size-08); width: fit-content; padding: var(--size-06) var(--size-16); border-radius: var(--bradius-max); background-color: var(--interactive-background-staticwhite-highlighted); color: var(--primary-charcoal-900); font-size: var(--fz-size-12); font-weight: var(--font-weight-medium); border: none; }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: var(--size-24); max-width: 900px; }
.hero-title { color: var(--surface-text-staticwhite-normal); font-family: var(--typography-typefaces-display); font-size: var(--fz-size-48); font-weight: var(--font-weight-bold); line-height: var(--lineheight-56); margin-bottom: 0; text-align: center; }
.hero-title-accent { color: var(--primary-lgreen-100); }
.hero-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-48); margin-top: 0; color: var(--surface-text-staticwhite-normal); font-size: var(--fz-size-16); font-weight: var(--font-weight-semi-bold); }
.hero-metric { display: inline-flex; align-items: center; gap: var(--size-12); font-size: var(--fz-size-14); }
.hero-metric .one-icon { font-size: var(--fz-size-24); }
.hero-links-card { margin: calc(var(--size-36) * -1) auto 0; background: var(--card-bg-intense); border-radius: var(--bradius-large); box-shadow: var(--shadow-md); padding: var(--size-20) var(--size-20) var(--size-12) var(--size-24); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--size-16); width: fit-content; max-width: 100%; position: relative; z-index: 2; border: none; overflow-x: auto; flex-wrap: wrap; justify-content: center; }
.hero-links-card .btn { white-space: nowrap; flex: 0 0 auto; }
.button-link-line-height{ line-height:26px;}
.hero-metric .fa-figma { font-size: var(--fz-size-20);}

/* ===== Sections Common ===== */
.section-header { margin-bottom: var(--size-28); }
.section-title { color: var(--surface-text-gray-normal); font-family: var(--typography-typefaces-heading); margin-bottom: var(--size-08); }
.section-subtitle { color: var(--surface-text-gray-muted);}

/* ===== Build Section ===== */
.build-section { padding: var(--size-56) var(--size-00); background-color: var(--card-bg-subtle); }
.build-badge { display: inline-flex; align-items: center; gap: var(--size-08); padding: var(--size-08) var(--size-16); border-radius: var(--bradius-max); background-color: var(--feedback-background-positive-subtle); color: var(--feedback-text-positive-intense); font-size: var(--fz-size-14); font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size-24); }
.build-text { color: var(--surface-text-gray-subtle); font-size: var(--fz-size-18); line-height: var(--lineheight-28); margin-bottom: var(--size-32); }
.build-actions { display: flex; gap: var(--size-12); align-items: center; }

/* ===== Marquee ===== */
.marquee-wrapper { display: flex; gap: var(--size-12); height: 400px; overflow: hidden; justify-content: flex-end; mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); }
.marquee-column { width: 42%; flex-shrink: 0; overflow: hidden; position: relative; }
.marquee-track { display: flex; flex-direction: column; will-change: transform; }
.marquee-card { width: 100%; border-radius: 12px; display: block; flex-shrink: 0; margin-bottom: 16px; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }

/* ===== Accessibility Section ===== */
.accessibility-section { padding: var(--size-56) var(--size-40); background: var(--card-bg-intense); border-radius: var(--bradius-medium); }
.accessibility-card { display: flex; gap: var(--size-12); align-items: flex-start; padding: var(--size-16) var(--size-24); border-radius: var(--bradius-medium); height: 100%; background: var(--card-bg-subtle); backdrop-filter: blur(17px); border: none; }
.accessibility-card-wide { padding: var(--size-16) var(--size-24); }
.accessibility-icon { width: var(--size-32); height: var(--size-32); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bradius-medium); color: var(--surface-text-staticwhite-normal); font-size: var(--size-16); flex-shrink: 0; }
.accessibility-icon-blue { background-color: var(--interactive-background-information-highlighted); box-shadow: var(--shadow-sm); }
.accessibility-icon-blue i { font-size: var(--fz-size-14); }
.accessibility-icon-slate { background-color: var(--interactive-icon-neutral-muted); }
.accessibility-body { display: flex; flex-direction: column; gap: var(--size-06); flex: 1; }
.accessibility-title { font-size: var(--fz-size-18); font-weight: var(--font-weight-bold); margin-bottom: 0; }
.accessibility-text { color: var(--surface-text-gray-subtle); margin-bottom: 0; font-size: var(--fz-size-14); line-height: var(--lineheight-20); }

/* ===== Figma MCP Section ===== */
.figma-mcp-section { padding: var(--size-56) var(--size-40); }
.figma-mcp-card { background-color: var(--primary-charcoal-900); background-image: url(../svg/BG.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--bradius-medium); padding: var(--size-36)  var(--size-32)  var(--size-24)  var(--size-32); }
.figma-mcp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--size-24); }
.figma-mcp-title { color: var(--surface-text-staticwhite-normal); }
.figma-mcp-subtitle { color: var(--surface-text-staticwhite-subtle); font-size: var(--fz-size-18); margin-bottom: 0; }
.figma-mcp-text { color: var(--surface-text-staticwhite-subtle); font-size: var(--fz-size-14); line-height: 1.6; }
.figma-mcp-actions { gap: var(--size-12); flex-shrink: 0; display: flex; flex-wrap: nowrap; align-items: center; width: fit-content; max-width: 100%; }
.figma-mcp-actions .btn { white-space: nowrap; flex: 0 0 auto; }

/* ===== Ecosystem Section ===== */
.ecosystem-section { background-color: var(--feedback-background-neutral-subtle); position: relative; overflow: hidden; padding: var(--size-56) var(--size-40); border-radius: var(--bradius-medium); }
.ecosystem-section .section-header { margin-bottom: 0; }
.ecosystem-section::after { content: ""; position: absolute; width: 800px; height: 690px; border-radius: 0; right: -160px; top: 0; background: url(../svg/shep.svg) no-repeat center center; pointer-events: none; z-index: 0; }
.ecosystem-section .container { position: relative; z-index: 1; }
.ecosystem-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--size-32); }
.explore-more-link { display: inline-flex; align-items: center; gap: var(--size-08); background-color: var(--surface-background-primary-intense); color: var(--surface-text-staticwhite-normal); padding: var(--size-08) var(--size-16); border-radius: var(--bradius-medium); font-size: var(--fz-size-14); font-weight: var(--font-weight-semi-bold); text-decoration: none; white-space: nowrap; }
.explore-more-link:hover { background-color: var(--primary-fgreen-700); color: var(--surface-text-staticwhite-normal); }
.ecosystem-card { background: linear-gradient(135deg, var(--neutral-lavgray-a100), var(--neutral-lavgray-a50)); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); padding: var(--size-20); display: flex; gap: var(--size-16); align-items: top; height: 100%; backdrop-filter: blur(8px); }
.ecosystem-icon { width: var(--size-48); height: var(--size-48); border-radius: var(--bradius-medium); display: inline-flex; align-items: center; justify-content: center; color: var(--surface-text-staticwhite-normal); flex-shrink: 0; margin-top: var(--size-04); }
.ecosystem-icon-green { background-color: var(--surface-background-primary-intense); }
.ecosystem-icon-red { background-color: var(--feedback-background-negative-intense); }
.ecosystem-icon-gold { background-color: var(--interactive-text-notice-muted); }
.ecosystem-icon-blue { background-color: var(--feedback-background-information-intense); }
.ecosystem-icon-olive { background-color: var(--interactive-text-positive-subtle); }
.ecosystem-title { font-size: var(--fz-size-20); margin-bottom: var(--size-04); }
.ecosystem-text { margin-bottom: 0; font-size: var(--fz-size-14); }

/* ===== Dark Mode Section ===== */
.darkmode-section { padding: var(--size-56) var(--size-40) var(--size-40) var(--size-40);; }
.darkmode-card { background: var(--card-bg-intense); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); padding: var(--size-56) var(--size-56); }
.darkmode-toggle-switch { display: inline-flex; align-items: center; background-color: var(--card-bg-subtle); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-max); padding: var(--size-08); gap: var(--size-04); margin-bottom: var(--size-20); }
.darkmode-toggle-segment { width: var(--size-32); height: var(--size-32); border-radius: var(--bradius-max); display: inline-flex; align-items: center; justify-content: center; color: var(--surface-text-gray-normal); background-color: transparent; border: none; cursor: pointer; }
.darkmode-toggle-segment i { font-size: var(--fz-size-14); }
.darkmode-toggle-segment.active { background-color: var(--interactive-background-staticwhite-default); color: var(--primary-coral-500); box-shadow: 0 8px 16px var(--primary-charcoal-a50); border: none; }
.darkmode-toggle-divider { width: 1px; height: var(--size-24); background-color: var(--surface-border-gray-muted); }
.darkmode-subtitle { color: var(--surface-text-gray-subtle); margin-bottom: var(--size-20); font-size: var(--fz-size-14); }
.darkmode-list { list-style: none; padding-left: 0; margin-bottom: 0; display: grid; gap: var(--size-12); }
.darkmode-list li { display: grid; grid-template-columns: var(--size-24) 1fr; gap: var(--size-08); align-items: start; }
.darkmode-check { width: var(--size-24); height: var(--size-24); display: inline-flex; align-items: center; justify-content: center; color: var(--surface-text-gray-normal); }
.darkmode-check i { font-size: var(--fz-size-18); }
.darkmode-list strong { display: block; color: var(--surface-text-gray-normal); margin-bottom: var(--size-02); }
.darkmode-list p { color: var(--surface-text-gray-subtle); margin-bottom: 0; font-size: var(--fz-size-12); }

/* ===== Mock Card (Dark Mode Preview) ===== */
/* ===== Mock Card (Dark Mode Preview) ===== */
.mock-card { background-color: var(--card-bg-moderate); border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); padding: var(--size-20); width: 100%; box-shadow: 0 10px 24px var(--primary-charcoal-a50); }
.mock-card-header { display: flex; align-items: center; gap: var(--size-08); color: var(--surface-text-gray-normal); font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size-12); }
.mock-card-header .one-x { margin-left: auto; color: var(--surface-text-gray-muted); }
.mock-card-text { color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); }
.mock-label { display: block; color: var(--surface-text-gray-normal); font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size-06); }
.mock-input { border: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: var(--bradius-medium); padding: var(--size-08) var(--size-12); color: var(--surface-text-gray-muted); background-color: var(--card-bg-subtle); margin-bottom: var(--size-06); }
.mock-help { font-size: var(--fz-size-12); color: var(--surface-text-gray-muted); margin-bottom: var(--size-12); }
.mock-tags { display: flex; flex-wrap: wrap; gap: var(--size-08); }
.mock-tag { padding: var(--size-04) var(--size-10); border-radius: var(--bradius-medium); font-size: var(--fz-size-12); color: var(--surface-text-staticwhite-normal); font-weight: var(--font-weight-semi-bold); display: inline-block; }
.mock-tag.primary { background-color: var(--primary-fgreen-600); }
.mock-tag.danger { background-color: var(--primary-crimson-600); }
.mock-tag.warning { background-color: var(--primary-coral-600); }
.mock-tag.info { background-color: var(--primary-royal-600); }
.mock-tag.neutral { background-color: var(--primary-charcoal-700); }
.mock-tag.tertiary { background-color: var(--neutral-slateblue-500); }

/* ===== Team Section ===== */
.team-section { padding: var(--size-56) var(--size-48); }
.team-card { background-color: var(--card-bg-intense); border-radius: var(--bradius-medium); padding: var(--size-20) var(--size-24); display: flex; align-items: center; justify-content: space-between; height: 100%; transition: box-shadow 0.2s ease; }
.team-card-left { display: flex; align-items: center; gap: var(--size-16); }
.team-icon { width: var(--size-48); height: var(--size-48); border-radius: var(--bradius-medium); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fz-size-18); flex-shrink: 0; }
.team-icon-olive { background-color: var(--surface-background-primary-intense); color: var(--surface-text-staticwhite-normal); }
.team-icon-brown { background-color: var(--feedback-background-notice-intense); color: var(--surface-text-staticwhite-normal); }
.team-icon-slate { background-color: var(--feedback-background-information-intense); color: var(--surface-text-staticwhite-normal); }
.team-icon-black { background-color: var(--interactive-text-notice-muted); color: var(--surface-text-staticwhite-normal); }
.team-card-title { color: var(--surface-text-gray-normal); font-size: var(--fz-size-16); font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size-04); }
.team-card-text { color: var(--surface-text-gray-subtle); font-size: var(--fz-size-14); margin-bottom: 0; }
.team-card-arrow { width: var(--size-36); height: var(--size-36); border-radius: var(--bradius-medium); border: none; display: inline-flex; align-items: center; justify-content: center; color: var(--surface-text-gray-normal); text-decoration: none; flex-shrink: 0; transition: background-color 0.2s ease; background-color: transparent; }
.team-card-arrow:hover { background-color: var(--interactive-background-gray-default); color: var(--surface-text-gray-normal); }

/* ===== FAQ Section ===== */
.faq-section { padding: var(--size-20) var(--size-00); }

/* ===== CTA Footer ===== */
.cta-footer-section { padding: var(--size-56) 0 var(--size-60); }
.cta-band-dark { background: linear-gradient(180deg, #293237 0%, #2c4a4c 73.234%); border: none; border-radius: var(--bradius-large); padding: var(--size-40) var(--size-36) var(--size-36); display: flex; align-items: center; justify-content: space-between; gap: var(--size-48); position: relative; overflow: hidden; background-color: #2a625a !important; }
.cta-content { flex: 1; min-width: 0; }
.cta-band-dark .cta-title { color: var(--primary-lgreen-100); margin-bottom: var(--size-12); }
.cta-band-dark .cta-text { color: var(--surface-text-staticwhite-normal); font-size: var(--fz-size-18); margin-bottom: 0; }
.cta-actions { display: flex; flex-direction: column; gap: var(--size-12); }

/* ================== Landing Page CSS END ==================  */

/* ===== Breadcrumbs ===== */
.breadcrumb { padding: 0 0 12px; margin: 0px; overflow-x: auto; }
.breadcrumb-list { width:100%; display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
.breadcrumb-devider span{ padding:0px 5px; color: var(--interactive-text-gray-muted); }
.breadcrumb-small { font-size: var(--fz-size-12); font-weight: var(--fw-600); }
.breadcrumb-medium { font-size: var(--fz-size-14); font-weight: var(--fw-500); }
.breadcrumb-large { font-size: var(--fz-size-16); font-weight: var(--fw-500); }
.breadcrumb-small i.icon { font-size: var(--fz-size-12); }
.breadcrumb-medium i.icon { font-size: var(--fz-size-14); }
.breadcrumb-large i.icon { font-size: var(--fz-size-16); }
.breadcrumb-listitem {color: var(--interactive-text-gray-normal); white-space: nowrap;}
.breadcrumb-listitem a.breadcrumb-link { color: var(--interactive-text-gray-muted); text-decoration: none;}
.breadcrumb-listitem a.breadcrumb-link:hover { color: var(--interactive-text-gray-normal); text-decoration: underline; }
.primary-link .breadcrumb-listitem a.breadcrumb-link{ color: var(--interactive-text-primary-normal);}
.primary-link .breadcrumb-listitem a.breadcrumb-link:hover { color: var(--interactive-text-gray-normal); }
.breadcrumb.dark-bg { background-color: var(--header-and-footer); padding: var(--size-16); border-radius: var(--bradius-medium); }
.breadcrumb.dark-bg .breadcrumb-devider span{ padding:0px 5px; color: var(--interactive-text-staticwhite-muted);}
.breadcrumb.dark-bg .breadcrumb-listitem a.breadcrumb-link { color: var(--interactive-text-staticwhite-muted); text-decoration: none;}
.breadcrumb.dark-bg .breadcrumb-listitem a.breadcrumb-link:hover { color: var(--interactive-text-staticwhite-normal); text-decoration: underline; }
.breadcrumb.dark-bg .breadcrumb-listitem {color: var(--interactive-text-staticwhite-normal);}

.release-notes-wrapper code { color: var(--interactive-text-negative-normal) !important;}