@import url("i3one-variable.css");

body {
    overflow-x: hidden;
    font-feature-settings: 'lnum' 1;
}

a {
    color: var(--interactive-text-primary-normal);
    text-decoration: underline;
}

.main {
    display: flex;
    overflow-x: auto;
    margin-top: 48px;
}

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.i3_header {
    background-color: var(--primary-charcol-500);
    border-bottom: 4px solid var(--surface-background-primary-intense);
    padding: var(--switch-medium-padding);
    min-height: 48px;
}

.i3_header a {
    color: var(--ds-white);
    font-family: "Raleway", sans-serif;
    font-weight: 300;
    padding: 4px;
    margin: 3px 6px;
    text-decoration: none;
}

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

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

/*sidebar css start*/

#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidebar-container {
    background-color: var(--netural-white-500);
    padding: var(--spacing-0);
}

.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: 16px !important;
}

.sidebar-expanded .nav_expand {
    justify-content: space-between;
}

.sidebar-collapsed .nav_expand {
    justify-content: center;
}

#sidebar-container {
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

.sidebar-expanded ul li a:hover {
    background-color: var(--interactive-background-gray-default);
}

.sidebar-expanded ul li.secondlevel a:hover {
    background-color: var(--transperent) !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: rgba(180, 180, 180, 0.1) 3px 0 10px, rgba(180, 180, 180, 0.1) 3px 0 10px;
}

#sidebar.active {
    margin-left: -270px;
}

#content.active {
    margin-left: 265px;
}

#content {
    transition: all 0.3s;
}


a:focus,
button:focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}


.nav-link:focus-visible {
    box-shadow: none;
}

li.components li.active a {
    background-color: var(--interactive-background-primary-faded);
}

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

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

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

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: 6%;
    top: 16%;
    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: 6%;
    top: 16%;
    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;
    text-align: center;
    width: 100%;
    background: var(--netural-white-500);
    color: var(--ds-input-border);
    z-index: 9999;
}

.logo {
    display: block;
}

.help_size {
    font-size: var(--fz-size-20) !important;
}

.components a {
    padding: 6px 16px;
}

.sidebar-submenu a {
    padding: 4px 16px;
}

ul.list-group {
    margin: 0 10px;
}

.components ul li:last-child {
    margin-bottom: 10px;
}

.tabs-navigation {
    border-bottom: 1px solid var(--surface-border-gray-muted);
    gap: var(--tab-medium-bordered-horizontal-gap);
    display: flex;
    margin-bottom: 16px;
}


.component-header-button {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--surface-background-gray-intense);
    cursor: pointer;
}

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-subtle);
    color: var(--interactive-text-primary-subtle);
}

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

.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);
    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: 1px 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(--netural-white-500);
}

.input_css:hover {
    background-color: var(--interactive-background-gray-faded);
}

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

.help_error {
    color: var(--feedback-text-negative-intense);
}

.help_error i {
    font-size: var(--fz-size-12);
}

.input-group-text .icon-lock {
    color: var(--feedback-icon-negative-intense);
}

.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(--surface-background-primary-intense) !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 {
    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-staticblack-subtle);
    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);
}

.input-wrapper {
    min-height: 120px;
}

.label_position.input-wrapper .form_label {
    width: 120px;
}

.input_css.disabled:hover {
    background-color: var(--netural-white-500);
    pointer-events: none;
}

.input_css.disabled .form-control::placeholder,
.input_css.disabled .form-control {
    color: var(--surface-text-gray-disabled);
}

.input_css a {
    color: var(--surface-text-gray-subtle);
    text-decoration: none;
}

.input_css .link_color a {
    color: var(--interactive-text-primary-normal);
}


/* textarea css */

.inputtextarea .form-control::placeholder {
    font-size: var(--fz-size-14);
    color: var(--surface-text-staticblack-subtle);
    line-height: var(--lineheight-20);
}

.inputtextarea .form-control:focus {
    outline: 2px solid var(--surface-background-primary-intense) !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);
}

.textarea-wrapper {
    height: 166px;
}

.inputtextarea .input-group .form-control:hover {
    background-color: var(--surface-background-gray-moderate);
}

.inputtextarea .input-group.active .form-control {
    background-color: var(--surface-background-gray-moderate);
    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;
}


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

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

/* 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(--netural-white-500);
    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-disabled);
}

.input_large .input_otp.form-control {
    height: 48px;
}

.input_large .input_otp.form-control::placeholder,
.input_large .input_otp.form-control {
    font-size: var(--fz-size-24);
}

.input_large .help_text {
    font-size: var(--fz-size-14);
}

.input_otp.hover {
    background-color: var(--surface-background-gray-intense);
}

.input_otp:hover {
    background-color: var(--surface-background-gray-intense);
}

.input_otp.active {
    border: var(--bwidth-thicker) solid var(--interactive-border-primary-default) !important;
    background-color: var(--surface-background-gray-moderate);
    border-radius: var(--bradius-medium) !important;
}

.input_otp.disabled:hover {
    background-color: var(--netural-white-500);
    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-thicker) !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: var(--netural-white-500);
}

.input_otp:focus {
    outline: 2px solid var(--surface-background-primary-intense) !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(--surface-background-primary-intense) !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: 12px;
    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: 14px;
    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: 16px;
    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-disabled);
}

.radio_wrapper.disabled .form-check-label {
    color: var(--surface-text-gray-disabled);
}

.radio_wrapper.disabled .form-check-input:checked {
    background-color: var(--interactive-background-primary-disabled) !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-gray-default);
    padding: var(--switch-small-padding);
}

.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 .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-color: var(--transperent);
}

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

.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-gray-highlighted) !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(--interactive-background-gray-disabled);
    border: none;
}

.switch_wrapper.disabled .form-check-input:checked {
    background-color: var(--interactive-background-primary-disabled);
}


/* checkbox css start */

.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(--surface-background-primary-intense) !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:checked {
    background-color: var(--interactive-background-primary-highlighted);
}

.check_wrapper.disabled .form-check-input {
    border: var(--bwidth-thick) solid var(--interactive-border-gray-disabled);
}

.check_wrapper.disabled label {
    color: var(--surface-text-gray-disabled);
}

.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-thicker) solid var(--interactive-border-negative-default);
}

.check_wrapper.error .form-check-input:checked {
    background-color: var(--interactive-background-negative-default);
}

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

.intermediate .form-check-input:checked[type=checkbox] {
    background-image: url(../svg/union.svg);
}





/* Global Header CSS */

.header-wrapper .header {
    position: initial !important;
}

.header-wrapper .header .i3_header {
    min-height: 56px;
}

.header-wrapper .vr {
    vertical-align: middle;
    color: var(--normal);
    margin: 0 7px;
    height: 20px;
    display: inline-block;
    align-self: center;
}

.header-wrapper .dropdown-toggle::after {
    display: none;
}

.hide-arrow::after {
    display: none;
}

.header-wrapper .dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
}

.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: 130px;
    box-shadow: rgba(180, 180, 180, 0.1) 3px 3px 10px, rgba(180, 180, 180, 0.1) 3px 3px 10px;
}


.user_details .dropdown-divider {
    border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}

.user_details .dropdown-menu .dropdown-item {
    width: auto;
}

.user_details .dropdown-menu .dropdown-item {
    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);
}

.user_details .dropdown-menu .dropdown-item i {
    color: var(--interactive-text-gray-normal);
    font-size: var(--fz-size-20);
    margin-right: 10px;
}

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

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

.user_details {
    position: relative;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    top: 42px;
}

.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-staticbwhite-faded);
    border-radius: var(--bradius-medium);
    display: flex;
    align-items: center;
}

.user_details.language .dropdown-menu[data-bs-popper] {
    top: 42px;
}






.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(--netural-white-500);
}

.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(--netural-white-500);
    vertical-align: middle;
}

.right_menu {
    border: none;
}

.navbar-toggler.right_menu:focus {
    box-shadow: none !important;
}


/* 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: rgba(180, 180, 180, 0.1) 3px 0 10px, rgba(180, 180, 180, 0.1) 3px 0 10px;
    border-radius: var(--bradius-large);
}

.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(--surafec-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 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: 14px;
    height: 18px;
    content: '';
}


.table-wrapper th {
    position: relative;
    color: var(--surafec-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(--feedback-background-positive-intense);
}

.table-wrapper .label_details {
    font-weight: var(--fw-600);
}

.table-wrapper .icon_size a {
    font-size: var(--fz-size-20);
    color: var(--surafce-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);
    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(--netural-white-500);
    padding: 16px;
    padding-bottom: 0;
}

.details {
    font-size: var(--fz-size-14);
}

.right_button .dropdown-toggle::after {
    display: none;
}

.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: 130px;
    box-shadow: rgba(180, 180, 180, 0.1) 3px 3px 10px, rgba(180, 180, 180, 0.1) 3px 3px 10px;
}

.right_button a {
    margin: 3px 6px;
}

.table {
    margin-bottom: 0px !important;
}

.table_Details {
    padding: 16px;
    background-color: var(--netural-white-500);
}

.summary_details {
    background-color: var(--feedback-background-neutral-subtle);
    padding: 16px 40px;
}

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

/* Pagination Accessibility Enhancements */
.page_wrapper nav,
.bb-grid-pagination nav,
nav[aria-label*="pagination"] {
    position: relative;
}

/* Ensure all pagination links/buttons are keyboard accessible */
.page_wrapper .page-link,
.bb-grid-pagination .page-link,
.pagination .page-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Enhanced keyboard focus for pagination controls */
.page_wrapper .page-link:focus-visible,
.bb-grid-pagination .page-link:focus-visible,
.pagination .page-link:focus-visible {
    outline: 3px solid var(--primary-fgreen-500) !important;
    outline-offset: 2px;
    border-radius: var(--bradius-4);
    z-index: 2;
}

/* Disabled pagination items - ensure proper styling and cursor */
.page_wrapper .page-item.disabled .page-link,
.bb-grid-pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
    background-color: var(--interactive-background-gray-disabled);
    color: var(--interactive-icon-gray-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* Active/Current page indicator */
.page_wrapper .page-link[aria-current="page"],
.bb-grid-pagination .page-link[aria-current="page"],
.pagination .page-link[aria-current="page"] {
    background-color: var(--interactive-background-primary-faded);
    color: var(--surface-text-primary-normal);
    font-weight: 600;
    pointer-events: none;
}

/* Ensure page size selector is accessible */
.page_wrapper .form-select:focus-visible,
.bb-grid-pagination .form-select:focus-visible {
    outline: 3px solid var(--primary-fgreen-500) !important;
    outline-offset: 2px;
    border-radius: var(--bradius-4);
}

/* Improve touch target size for mobile (AAA compliance) */
@media (max-width: 768px) {

    .page_wrapper .page-link,
    .bb-grid-pagination .page-link,
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--fz-size-16);
    }
}

.page_wrapper .page-link span i {
    font-size: var(--fz-size-16) !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(--transperent);
    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(--surface-background-primary-intense) !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-bottom: var(--bwidth-thin) solid var(--interactive-background-gray-highlighted);
}

.page_wrapper .pagination {
    display: flex;
    align-items: center;
}



.table-wrapper .pagination_details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* divider */


.divider-h-thin {
    border-top: var(--bwidth-thin) solid var(--normal);
    margin: 1rem 0;
}

.divider-h-thick {
    border-top: var(--bwidth-thick) solid var(--normal);
    margin: 1rem 0;
}

.divider-h-thicker {
    border-top: var(--bwidth-thicker) solid var(--normal);
    margin: 1rem 0;
}

.divider-h-subtle {
    border-top: var(--bwidth-thin) solid var(--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: #fff;
}

.divider-h-dashed {
    border-top: var(--bwidth-thin) dashed var(--normal);
    margin: 1rem 0;
}

.divider-v-thin {
    min-height: 85px;
    width: var(--bwidth-thin);
    background-color: var(--normal);
    margin: 0 10px;
}

.divider-v-thick {
    min-height: 85px;
    width: var(--bwidth-thick);
    background-color: var(--normal);
    margin: 0 10px;
}

.divider-v-thicker {
    min-height: 85px;
    width: var(--bwidth-thicker);
    background-color: var(--normal);
    margin: 0 10px;
}

.divider-v-subtle {
    min-height: 85px;
    width: var(--bwidth-thin);
    background-color: var(--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(--normal);
    margin: 0 10px;
}

.divider-v-dashed-thick {
    min-height: 85px;
    width: var(--bwidth-thick);
    border: var(--bwidth-thick) dashed var(--normal);
    margin: 0 10px;
}

.divider-v-dashed-thicker {
    min-height: 85px;
    width: var(--bwidth-thicker);
    border: var(--bwidth-thicker) dashed var(--normal);
    margin: 0 10px;
}

.divider-v-dashed-normal {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--normal);
    margin: 0 10px;
}

.divider-v-dashed-subtle {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--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(--normal);
    margin: 1rem 0;
}

.divider-h-dashed-thicker {
    border-top: var(--bwidth-thicker) dashed var(--normal);
    margin: 1rem 0;
}

.divider-h-dashed-normal {
    border-top: var(--bwidth-thick) dashed var(--normal);
    margin: 1rem 0;
}

.divider-h-dashed-subtle {
    border-top: var(--bwidth-thick) dashed var(--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-thicker) solid var(--interactive-border-primary-default);
    background-color: var(--transperent);
    color: var(--interactive-text-primary-normal);
    color: var(--interactive-text-primary-normal);
}

.tab_wrapper .nav-link:hover {
    color: var(--interactive-text-gray-subtle);
    border-bottom: var(--bwidth-thicker) solid var(--interactive-background-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(--interactive-text-gray-disabled);
}

.tab_filled ul {
    background-color: var(--netural-white-500);
}

.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(--interactive-text-gray-disabled);
}

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

.tab_border1 .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    border-left: var(--bwidth-thicker) solid var(--interactive-border-primary-default);
    background-color: var(--transperent);
    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(--transperent);
    color: var(--interactive-text-gray-subtle);
    border-left: var(--bwidth-thicker) solid var(--interactive-background-gray-highlighted);
}


.tab_border1 .nav-link:focus {
    background-color: var(--transperent);
}



/* 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: rgb(46, 91, 255);
    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: none;
}

.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(--listItemAsset-color);
    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-neutral-normal);
}

.text_bg i {
    font-size: var(--fz-size-12);
}

.list_wrapper .netural {
    color: var(--interactive-text-neutral-normal);
}

.list_wrapper ul li a:hover,
.list_wrapper ol li a:hover {
    text-decoration: underline;
}

.list_wrapper ul li a:focus,
.list_wrapper ol li a:focus {
    text-decoration: underline;
    outline: 2px solid var(--surface-background-primary-intense) !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(--surface-background-primary-intense) !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(--netural-lavgray-50);
    --bs-tooltip-color: var(--netural-black-500);
    border: var(--bwidth-thin) solid var(--netural-lavgray-900);
    background-color: var(--netural-lavgray-50);
    border-radius: var(--bradius-medium);
    opacity: 1 !important;
    box-shadow: rgba(180, 180, 180, 0.1) 3px 0 10px, rgba(180, 180, 180, 0.1) 3px 0 10px;
}


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

.custom-tooltip.tooltip_none .tooltip-arrow {
    display: none !important;
}

.item {
    width: 500px;
    height: 200px;
    background-color: #BFDDDC;
    border: 1px dashed #329E91;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.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(--surface-text-gray-normal);
    background-color: var(--interactive-background-staticwhite-default);
    height: 30px;
    width: 30px;
    vertical-align: middle;
    border-radius: 20px;
    box-shadow: 0px 8px 24px 0px #3F4F611F;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-dots li button:before {
    font-size: 10px !important;
    color: #79A3DC;
}

.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: 12px !important;
    color: #79A3DC;
    content: '' !important;
    height: 11px;
    width: 11px;
    background-color: #79A3DC;
    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: 11px;
    height: 12px;
}

.slick-dots li button {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50%;
}

.slick-dots li.slick-active button {
    width: 30px !important;
    border-radius: 11px;
    height: 12px !important;
}

#content.active.c_design {
    overflow-x: hidden;
    height: 100vh;
}


.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-staticbwhite-faded);
    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: 10px;
}

.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 {
    /* max-width: 276px; */
    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 0px #3F4F611F;
    box-shadow: 0px 8px 24px 0px #3F4F611F;
    /* line-break: auto; */
    padding: 15px;
    border: none !important;
}

.popover .icon_close {
    text-decoration: none;
    position: absolute;
    right: 15px;
}

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

[role=tooltip]>[data-popper-arrow]:before {
    border-style: solid;
    border-color: #fff;
}

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








/* Color Page - CSS */

.colors-wrapper ul li {
    min-height: 125px;
}

table td.grey-text {
    color: var(--netural-grey-600);
}

.colors-wrapper h2 {
    margin-bottom: 30px;
}

.colors-wrapper h2 {
    background: #ededed;
    margin-bottom: 30px;
    padding: 10px 15px;
    border-radius: var(--bradius-medium);
}

.colors-wrapper h2 {
    background: #ededed;
    margin-bottom: 30px;
    padding: 10px 15px;
    border-radius: var(--bradius-medium);
}

.colors-wrapper h5 {
    margin-bottom: 16px;
}

ul.colors-circle {
    display: inline-block;
    align-items: center;
    padding: 10px 15px;
}

ul.colors-circle li {
    background: var(--primary-charcol-500);
    color: var(--surface-text-staticwhite-normal);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
    margin-bottom: 50px;
    text-align: center;
    float: left;
}

ul.colors-circle li.charcoal-500 {
    background: var(--primary-charcol-500);
}

ul.colors-circle li.forest-green-500 {
    background: var(--primary-fgreen-500);
}

ul.colors-circle li.light-reen-500 {
    background: var(--primary-lgreen-500);
}

ul.colors-circle li.primary-color-4 {
    background: #9CAEB6;
}

ul.colors-circle li.lavendargray-500 {
    background: var(--netural-lavgray-500);
    color: var(--netural-black-500);
}

ul.colors-circle li.cyan-500 {
    background: var(--primary-cyan-500);
}

ul.colors-circle li.slate-blue-500 {
    background: var(--netural-slateblue-500);
}

ul.colors-circle li.secondary-color-3 {
    background: #ca786e
}

ul.colors-circle li.secondary-color-4 {
    background: #df9527;
}

ul.color-palette {
    margin-bottom: 50px;
    padding-left: 0px;
}

ul.color-palette li {
    padding: 16px 16px;
    min-height: 62px;
    font-weight: var(--fw-600);
}

ul.color-palette li em {
    float: right;
    font-size: var(--fz-size-14);
}

ul.color-palette li.charcoal-050 {
    background: var(--primary-charcol-50);
}

ul.color-palette li.charcoal-100 {
    background: var(--primary-charcol-100);
}

ul.color-palette li.charcoal-200 {
    background: var(--primary-charcol-200);
}

ul.color-palette li.charcoal-300 {
    background: var(--primary-charcol-300);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-400 {
    background: var(--primary-charcol-400);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-500 {
    background: var(--primary-charcol-500);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-600 {
    background: var(--primary-charcol-600);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-700 {
    background: var(--primary-charcol-700);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-800 {
    background: var(--primary-charcol-800);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-900 {
    background: var(--primary-charcol-900);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-1000 {
    background: var(--primary-charcol-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.charcoal-a50 {
    background: var(--primary-charcol-a50);
}

ul.color-palette li.charcoal-a100 {
    background: var(--primary-charcol-a100);
}

ul.color-palette li.charcoal-a150 {
    background: var(--primary-charcol-a150);
}

ul.color-palette li.charcoal-a200 {
    background: var(--primary-charcol-a200);
}



ul.color-palette li.fgreen-050 {
    background: var(--primary-fgreen-50);
}

ul.color-palette li.fgreen-100 {
    background: var(--primary-fgreen-100);
}

ul.color-palette li.fgreen-200 {
    background: var(--primary-fgreen-200);
}

ul.color-palette li.fgreen-300 {
    background: var(--primary-fgreen-300);
}

ul.color-palette li.fgreen-400 {
    background: var(--primary-fgreen-400);
}

ul.color-palette li.fgreen-500 {
    background: var(--primary-fgreen-500);
}

ul.color-palette li.fgreen-600 {
    background: var(--primary-fgreen-600);
    color: var(--netural-white-500);
}

ul.color-palette li.fgreen-700 {
    background: var(--primary-fgreen-700);
    color: var(--netural-white-500);
}

ul.color-palette li.fgreen-800 {
    background: var(--primary-fgreen-800);
    color: var(--netural-white-500);
}

ul.color-palette li.fgreen-900 {
    background: var(--primary-fgreen-900);
    color: var(--netural-white-500);
}

ul.color-palette li.fgreen-1000 {
    background: var(--primary-fgreen-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.fgreen-a50 {
    background: var(--primary-fgreen-a50);
}

ul.color-palette li.fgreen-a100 {
    background: var(--primary-fgreen-a100);
}

ul.color-palette li.fgreen-a150 {
    background: var(--primary-fgreen-a150);
}

ul.color-palette li.fgreen-a200 {
    background: var(--primary-fgreen-a200);
}


ul.color-palette li.aqua-050 {
    background: var(--primary-aqua-50);
}

ul.color-palette li.aqua-100 {
    background: var(--primary-aqua-100);
}

ul.color-palette li.aqua-200 {
    background: var(--primary-aqua-200);
}

ul.color-palette li.aqua-300 {
    background: var(--primary-aqua-300);
}

ul.color-palette li.aqua-400 {
    background: var(--primary-aqua-400);
}

ul.color-palette li.aqua-500 {
    background: var(--primary-aqua-500);
}

ul.color-palette li.aqua-600 {
    background: var(--primary-aqua-600);
}

ul.color-palette li.aqua-700 {
    background: var(--primary-aqua-700);
    color: var(--netural-white-500);
}

ul.color-palette li.aqua-800 {
    background: var(--primary-aqua-800);
    color: var(--netural-white-500);
}

ul.color-palette li.aqua-900 {
    background: var(--primary-aqua-900);
    color: var(--netural-white-500);
}

ul.color-palette li.aqua-1000 {
    background: var(--primary-aqua-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.aqua-a50 {
    background: var(--primary-aqua-a50);
}

ul.color-palette li.aqua-a100 {
    background: var(--primary-aqua-a100);
}

ul.color-palette li.aqua-a150 {
    background: var(--primary-aqua-a150);
}

ul.color-palette li.aqua-a200 {
    background: var(--primary-aqua-a200);
}


ul.color-palette li.cyan-050 {
    background: var(--primary-cyan-50);
}

ul.color-palette li.cyan-100 {
    background: var(--primary-cyan-100);
}

ul.color-palette li.cyan-200 {
    background: var(--primary-cyan-200);
}

ul.color-palette li.cyan-300 {
    background: var(--primary-cyan-300);
}

ul.color-palette li.cyan-400 {
    background: var(--primary-cyan-400);
}

ul.color-palette li.cyan-500 {
    background: var(--primary-cyan-500);
}

ul.color-palette li.cyan-600 {
    background: var(--primary-cyan-600);
}

ul.color-palette li.cyan-700 {
    background: var(--primary-cyan-700);
    color: var(--netural-white-500);
}

ul.color-palette li.cyan-800 {
    background: var(--primary-cyan-800);
    color: var(--netural-white-500);
}

ul.color-palette li.cyan-900 {
    background: var(--primary-cyan-900);
    color: var(--netural-white-500);
}

ul.color-palette li.cyan-1000 {
    background: var(--primary-cyan-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.cyan-a50 {
    background: var(--primary-cyan-a50);
}

ul.color-palette li.cyan-a100 {
    background: var(--primary-cyan-a100);
}

ul.color-palette li.cyan-a150 {
    background: var(--primary-cyan-a150);
}

ul.color-palette li.cyan-a200 {
    background: var(--primary-cyan-a200);
}


ul.color-palette li.royal-050 {
    background: var(--primary-royal-50);
}

ul.color-palette li.royal-100 {
    background: var(--primary-royal-100);
}

ul.color-palette li.royal-200 {
    background: var(--primary-royal-200);
}

ul.color-palette li.royal-300 {
    background: var(--primary-royal-300);
}

ul.color-palette li.royal-400 {
    background: var(--primary-royal-400);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-500 {
    background: var(--primary-royal-500);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-600 {
    background: var(--primary-royal-600);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-700 {
    background: var(--primary-royal-700);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-800 {
    background: var(--primary-royal-800);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-900 {
    background: var(--primary-royal-900);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-1000 {
    background: var(--primary-royal-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.royal-a50 {
    background: var(--primary-royal-a50);
}

ul.color-palette li.royal-a100 {
    background: var(--primary-royal-a100);
}

ul.color-palette li.royal-a150 {
    background: var(--primary-royal-a150);
}

ul.color-palette li.royal-a200 {
    background: var(--primary-royal-a200);
}


ul.color-palette li.coral-050 {
    background: var(--primary-coral-50);
}

ul.color-palette li.coral-100 {
    background: var(--primary-coral-100);
}

ul.color-palette li.coral-200 {
    background: var(--primary-coral-200);
}

ul.color-palette li.coral-300 {
    background: var(--primary-coral-300);
}

ul.color-palette li.coral-400 {
    background: var(--primary-coral-400);
}

ul.color-palette li.coral-500 {
    background: var(--primary-coral-500);
}

ul.color-palette li.coral-600 {
    background: var(--primary-coral-600);
}

ul.color-palette li.coral-700 {
    background: var(--primary-coral-700);
    color: var(--netural-white-500);
}

ul.color-palette li.coral-800 {
    background: var(--primary-coral-800);
    color: var(--netural-white-500);
}

ul.color-palette li.coral-900 {
    background: var(--primary-coral-900);
    color: var(--netural-white-500);
}

ul.color-palette li.coral-1000 {
    background: var(--primary-coral-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.coral-a50 {
    background: var(--primary-coral-a50);
}

ul.color-palette li.coral-a100 {
    background: var(--primary-coral-a100);
}

ul.color-palette li.coral-a150 {
    background: var(--primary-coral-a150);
}

ul.color-palette li.coral-a200 {
    background: var(--primary-coral-a200);
}


ul.color-palette li.lgreen-050 {
    background: var(--primary-lgreen-50);
}

ul.color-palette li.lgreen-100 {
    background: var(--primary-lgreen-100);
}

ul.color-palette li.lgreen-200 {
    background: var(--primary-lgreen-200);
}

ul.color-palette li.lgreen-300 {
    background: var(--primary-lgreen-300);
}

ul.color-palette li.lgreen-400 {
    background: var(--primary-lgreen-400);
}

ul.color-palette li.lgreen-500 {
    background: var(--primary-lgreen-500);
}

ul.color-palette li.lgreen-600 {
    background: var(--primary-lgreen-600);
}

ul.color-palette li.lgreen-700 {
    background: var(--primary-lgreen-700);
}

ul.color-palette li.lgreen-800 {
    background: var(--primary-lgreen-800);
    color: var(--netural-white-500);
}

ul.color-palette li.lgreen-900 {
    background: var(--primary-lgreen-900);
    color: var(--netural-white-500);
}

ul.color-palette li.lgreen-1000 {
    background: var(--primary-lgreen-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.lgreen-a50 {
    background: var(--primary-lgreen-a50);
}

ul.color-palette li.lgreen-a100 {
    background: var(--primary-lgreen-a100);
}

ul.color-palette li.lgreen-a150 {
    background: var(--primary-lgreen-a150);
}

ul.color-palette li.lgreen-a200 {
    background: var(--primary-lgreen-a200);
}


ul.color-palette li.crimson-050 {
    background: var(--primary-crimson-50);
}

ul.color-palette li.crimson-100 {
    background: var(--primary-crimson-100);
}

ul.color-palette li.crimson-200 {
    background: var(--primary-crimson-200);
}

ul.color-palette li.crimson-300 {
    background: var(--primary-crimson-300);
}

ul.color-palette li.crimson-400 {
    background: var(--primary-crimson-400);
}

ul.color-palette li.crimson-500 {
    background: var(--primary-crimson-500);
}

ul.color-palette li.crimson-600 {
    background: var(--primary-crimson-600);
    color: var(--netural-white-500);
}

ul.color-palette li.crimson-700 {
    background: var(--primary-crimson-700);
    color: var(--netural-white-500);
}

ul.color-palette li.crimson-800 {
    background: var(--primary-crimson-800);
    color: var(--netural-white-500);
}

ul.color-palette li.crimson-900 {
    background: var(--primary-crimson-900);
    color: var(--netural-white-500);
}

ul.color-palette li.crimson-1000 {
    background: var(--primary-crimson-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.crimson-a50 {
    background: var(--primary-crimson-a50);
}

ul.color-palette li.crimson-a100 {
    background: var(--primary-crimson-a100);
}

ul.color-palette li.crimson-a150 {
    background: var(--primary-crimson-a150);
}

ul.color-palette li.crimson-a200 {
    background: var(--primary-crimson-a200);
}


ul.color-palette li.yellow-050 {
    background: var(--netural-yellow-50);
}

ul.color-palette li.yellow-100 {
    background: var(--netural-yellow-100);
}

ul.color-palette li.yellow-200 {
    background: var(--netural-yellow-200);
}

ul.color-palette li.yellow-300 {
    background: var(--netural-yellow-300);
}

ul.color-palette li.yellow-400 {
    background: var(--netural-yellow-400);
}

ul.color-palette li.yellow-500 {
    background: var(--netural-yellow-500);
}

ul.color-palette li.yellow-600 {
    background: var(--netural-yellow-600);
}

ul.color-palette li.yellow-700 {
    background: var(--netural-yellow-700);
    color: var(--netural-white-500);
}

ul.color-palette li.yellow-800 {
    background: var(--netural-yellow-800);
    color: var(--netural-white-500);
}

ul.color-palette li.yellow-900 {
    background: var(--netural-yellow-900);
    color: var(--netural-white-500);
}

ul.color-palette li.yellow-1000 {
    background: var(--netural-yellow-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.yellow-a50 {
    background: var(--netural-yellow-a50);
}

ul.color-palette li.yellow-a100 {
    background: var(--netural-yellow-a100);
}

ul.color-palette li.yellow-a150 {
    background: var(--netural-yellow-a150);
}

ul.color-palette li.yellow-a200 {
    background: var(--netural-yellow-a200);
}


ul.color-palette li.sky-050 {
    background: var(--netural-sky-50);
}

ul.color-palette li.sky-100 {
    background: var(--netural-sky-100);
}

ul.color-palette li.sky-200 {
    background: var(--netural-sky-200);
}

ul.color-palette li.sky-300 {
    background: var(--netural-sky-300);
}

ul.color-palette li.sky-400 {
    background: var(--netural-sky-400);
}

ul.color-palette li.sky-500 {
    background: var(--netural-sky-500);
}

ul.color-palette li.sky-600 {
    background: var(--netural-sky-600);
}

ul.color-palette li.sky-700 {
    background: var(--netural-sky-700);
    color: var(--netural-white-500);
}

ul.color-palette li.sky-800 {
    background: var(--netural-sky-800);
    color: var(--netural-white-500);
}

ul.color-palette li.sky-900 {
    background: var(--netural-sky-900);
    color: var(--netural-white-500);
}

ul.color-palette li.sky-1000 {
    background: var(--netural-sky-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.sky-a50 {
    background: var(--netural-sky-a50);
}

ul.color-palette li.sky-a100 {
    background: var(--netural-sky-a100);
}

ul.color-palette li.sky-a150 {
    background: var(--netural-sky-a150);
}

ul.color-palette li.sky-a200 {
    background: var(--netural-sky-a200);
}


ul.color-palette li.slateblue-050 {
    background: var(--netural-slateblue-50);
}

ul.color-palette li.slateblue-100 {
    background: var(--netural-slateblue-100);
}

ul.color-palette li.slateblue-200 {
    background: var(--netural-slateblue-200);
}

ul.color-palette li.slateblue-300 {
    background: var(--netural-slateblue-300);
}

ul.color-palette li.slateblue-400 {
    background: var(--netural-slateblue-400);
}

ul.color-palette li.slateblue-500 {
    background: var(--netural-slateblue-500);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-600 {
    background: var(--netural-slateblue-600);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-700 {
    background: var(--netural-slateblue-700);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-800 {
    background: var(--netural-slateblue-800);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-900 {
    background: var(--netural-slateblue-900);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-1000 {
    background: var(--netural-slateblue-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.slateblue-a50 {
    background: var(--netural-slateblue-a50);
}

ul.color-palette li.slateblue-a100 {
    background: var(--netural-slateblue-a100);
}

ul.color-palette li.slateblue-a150 {
    background: var(--netural-slateblue-a150);
}

ul.color-palette li.slateblue-a200 {
    background: var(--netural-slateblue-a200);
}


ul.color-palette li.grey-050 {
    background: var(--netural-grey-50);
}

ul.color-palette li.grey-100 {
    background: var(--netural-grey-100);
}

ul.color-palette li.grey-200 {
    background: var(--netural-grey-200);
}

ul.color-palette li.grey-300 {
    background: var(--netural-grey-300);
}

ul.color-palette li.grey-400 {
    background: var(--netural-grey-400);
}

ul.color-palette li.grey-500 {
    background: var(--netural-grey-500);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-600 {
    background: var(--netural-grey-600);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-700 {
    background: var(--netural-grey-700);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-800 {
    background: var(--netural-grey-800);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-900 {
    background: var(--netural-grey-900);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-1000 {
    background: var(--netural-grey-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.grey-a50 {
    background: var(--netural-grey-a50);
}

ul.color-palette li.grey-a100 {
    background: var(--netural-grey-a100);
}

ul.color-palette li.grey-a150 {
    background: var(--netural-grey-a150);
}

ul.color-palette li.grey-a200 {
    background: var(--netural-grey-a200);
}


ul.color-palette li.lavgray-050 {
    background: var(--netural-lavgray-50);
}

ul.color-palette li.lavgray-100 {
    background: var(--netural-lavgray-100);
}

ul.color-palette li.lavgray-200 {
    background: var(--netural-lavgray-200);
}

ul.color-palette li.lavgray-300 {
    background: var(--netural-lavgray-300);
}

ul.color-palette li.lavgray-400 {
    background: var(--netural-lavgray-400);
}

ul.color-palette li.lavgray-500 {
    background: var(--netural-lavgray-500);
}

ul.color-palette li.lavgray-600 {
    background: var(--netural-lavgray-600);
}

ul.color-palette li.lavgray-700 {
    background: var(--netural-lavgray-700);
}

ul.color-palette li.lavgray-800 {
    background: var(--netural-lavgray-800);
}

ul.color-palette li.lavgray-900 {
    background: var(--netural-lavgray-900);
    color: var(--netural-white-500);
}

ul.color-palette li.lavgray-1000 {
    background: var(--netural-lavgray-1000);
    color: var(--netural-white-500);
}

ul.color-palette li.lavgray-a50 {
    background: var(--netural-lavgray-a50);
}

ul.color-palette li.lavgray-a100 {
    background: var(--netural-lavgray-a100);
}

ul.color-palette li.lavgray-a150 {
    background: var(--netural-lavgray-a150);
}

ul.color-palette li.lavgray-a200 {
    background: var(--netural-lavgray-a200);
}


ul.color-palette li.black-10 {
    background: var(--netural-black-10);
}

ul.color-palette li.black-25 {
    background: var(--netural-black-25);
}

ul.color-palette li.black-50 {
    background: var(--netural-black-50);
}

ul.color-palette li.black-100 {
    background: var(--netural-black-100);
}

ul.color-palette li.black-200 {
    background: var(--netural-black-200);
}

ul.color-palette li.black-300 {
    background: var(--netural-black-300);
    color: var(--netural-white-500);
}

ul.color-palette li.black-400 {
    background: var(--netural-black-400);
    color: var(--netural-white-500);
}

ul.color-palette li.black-500 {
    background: var(--netural-black-500);
    color: var(--netural-white-500);
}


ul.color-palette li.white-10 {
    background: var(--netural-white-10);
}

ul.color-palette li.white-25 {
    background: var(--netural-white-25);
}

ul.color-palette li.white-50 {
    background: var(--netural-white-50);
}

ul.color-palette li.white-100 {
    background: var(--netural-white-100);
}

ul.color-palette li.white-200 {
    background: var(--netural-white-200);
}

ul.color-palette li.white-300 {
    background: var(--netural-white-300);
}

ul.color-palette li.white-400 {
    background: var(--netural-white-400);
}

ul.color-palette li.white-500 {
    background: var(--netural-white-500);
}


/* .mvp-wrapper ul{} */
.mvp-wrapper ul li {
    padding-bottom: 24px;
    line-height: 20px;
    list-style: disc;
}

.mvp-wrapper ul li a {
    color: #000;
    text-decoration: none;
}

.mvp-wrapper ul li a:hover {
    font-weight: var(--fw-600);
}


/* Accordion */
.accordion {
    width: 100%;
}

.accordion-wrapper h2 {
    background: #ededed;
    margin-bottom: var(--spacing-7);
    padding: var(--ps-12);
    border-radius: var(--bradius-medium);
    font-size: var(--fz-size-24);
    font-weight: var(--fw-600);
    line-height: var(--lineheight-32);
}

.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(--netural-slateblue-1000);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    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(--netural-slateblue-600);
}

.accordion-body p {
    font-size: var(--fz-size-14);
}

.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(--netural-grey-600);
}

.accordion-button:not(.collapsed)::after {
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--netural-grey-600);
    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(--bs-accordion-bg);
    border: var(--bradius-none);
    border-bottom: 1px solid var(--netural-slateblue-a100);
    border-radius: var(--bradius-none) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--netural-slateblue-1000);
    background-color: var(--netural-grey-a50);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    z-index: 0;
    outline: 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: 1px solid var(--netural-slateblue-a100);
    background: var(--netural-lavgray-100);
}

.card .card-header {
    background: var(--netural-lavgray-100);
    border-bottom: 1px solid var(--netural-slateblue-a100);
    padding: var(--ps-00);
    padding-bottom: var(--ps-12);
}

.card .card-header button {
    background: #78868F2E;
    border: none;
    color: #181B1D;
}

.card .card-header button i {
    font-size: 16px;
}

.card .card-footer {
    background: var(--netural-lavgray-100);
    border-top: 1px solid var(--netural-slateblue-a100);
    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;
}

.lowRaised {
    box-shadow: 0px 2px 16px 0px var(--netural-slateblue-a50);
}

.midRaised {
    box-shadow: 0px 4px 16px 0px var(--netural-slateblue-a100);
}

.highRaised {
    box-shadow: 0px 12px 32px -4px var(--netural-slateblue-a100);
}


/* 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(--netural-white-500);
    padding: var(--spacing-4) var(--spacing-0);
    vertical-align: middle;
}

.btn {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-600);
    border: 1px solid var(--primary-fgreen-600);
    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(--netural-white-500);
    background-color: var(--primary-fgreen-600);
    border-color: var(--primary-fgreen-600);
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--primary-fgreen-600) !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-700);
    border-color: var(--primary-fgreen-700);
}

.btn-primary:focus-visible {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-600);
    border-color: var(--primary-fgreen-600);
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--primary-fgreen-600) !important;
}

.btn-primary {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-600);
    border: 1px solid var(--primary-fgreen-600);
    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(--netural-white-500);
    background-color: var(--primary-fgreen-700);
    border: 1px solid var(--primary-fgreen-700);
}

.btn-primary-disabled,
.btn-primary-disabled:disabled {
    color: var(--interactive-text-primary-disabled) !important;
    background-color: var(--interactive-background-primary-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-primary {
    color: var(--interactive-text-primary-normal);
    color: var(--interactive-text-primary-normal);
    background-color: var(--primary-fgreen-600) 0;
    border: 1px solid var(--interactive-border-primary-default);
    border: 1px 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: 1px solid var(--interactive-background-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-faded) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-primary-disabled,
.btn-outline-primary-disabled:disabled {
    color: var(--interactive-text-primary-disabled) !important;
    background-color: var(--primary-fgreen-600) 0;
    border: 1px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

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

.btn-tertiary:focus,
.btn-tertiary:focus-visible,
.btn-tertiary:active {
    color: var(--interactive-text-gray-normal) !important;
    background-color: var(--interactive-text-gray-disabled) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-tertiary-disabled,
.btn-tertiary-disabled:disabled {
    color: var(--interactive-text-gray-disabled) !important;
    background-color: var(--interactive-background-gray-disabled);
    border: 0px solid var(--interactive-background-gray-default);
    pointer-events: none;
}

.btn-white {
    color: var(--interactive-text-staticblack-muted);
    background-color: var(--interactive-background-staticwhite-default);
    border: 0px solid var(--primary-fgreen-600);
    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(--primary-fgreen-700);
}

.btn-white:focus,
.btn-white:focus-visible,
.btn-white:active {
    color: var(--interactive-text-staticblack-muted) !important;
    background-color: var(--interactive-background-staticwhite-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-white-disabled,
.btn-white-disabled:disabled {
    color: var(--interactive-text-staticblack-disabled) !important;
    background-color: var(--interactive-background-staticwhite-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-white {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticwhite-default) 0;
    border: 1px solid var(--interactive-background-staticwhite-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-white:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticbwhite-faded);
    border: 1px 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-staticbwhite-faded) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-white-disabled,
.btn-outline-white-disabled:disabled {
    color: var(--interactive-text-staticwhite-disabled) !important;
    background-color: var(--interactive-border-staticwhite-disabled) 0;
    border: 1px solid var(--interactive-border-staticwhite-disabled);
    pointer-events: none;
}

.btn-white-tertiary {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticbwhite-faded);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-fadedHighlighted);
}

.btn-white-tertiary:focus,
.btn-white-tertiary:focus-visible,
.btn-white-tertiary:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-staticwhite-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-white-tertiary-disabled .btn-white-tertiary-disabled:disabled {
    color: var(--interactive-text-staticwhite-disabled) !important;
    background-color: var(--interactive-background-staticwhite-disabled);
    border: 0px solid var(--interactive-background-staticwhite-disabled);
    pointer-events: none;
}

.btn-positive {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-positive-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-positive-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-positive:focus,
.btn-positive:focus-visible,
.btn-positive:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-positive-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-positive-disabled,
.btn-positive-disabled:disabled {
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-positive {
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-positive-disabled,
.btn-outline-positive-disabled:disabled {
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 1px solid var(--interactive-border-positive-disabled);
    pointer-events: none;
}

.btn-negative {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-default);
    border: 0px solid var(--primary-fgreen-600);
    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(--primary-fgreen-700);
}

.btn-negative:focus,
.btn-negative:focus-visible,
.btn-negative:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-negative-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-negative-disabled,
.btn-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-negative {
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-negative-disabled,
.btn-outline-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 1px solid var(--interactive-border-negative-disabled);
    pointer-events: none;
}

.btn-positive {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-positive-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-positive-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-positive:focus,
.btn-positive:focus-visible,
.btn-positive:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-positive-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-positive-disabled,
.btn-positive-disabled:disabled {
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-positive {
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-positive-disabled,
.btn-outline-positive-disabled:disabled {
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 1px solid var(--interactive-border-positive-disabled);
    pointer-events: none;
}

.btn-negative {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-default);
    border: 0px solid var(--primary-fgreen-600);
    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(--primary-fgreen-700);
}

.btn-negative:focus,
.btn-negative:focus-visible,
.btn-negative:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-negative-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-negative-disabled,
.btn-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-negative {
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-negative-disabled,
.btn-outline-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 1px solid var(--interactive-border-negative-disabled);
    pointer-events: none;
}

.btn-notice {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-notice-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-notice-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-notice:focus,
.btn-notice:focus-visible,
.btn-notice:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-notice-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-notice-disabled,
.btn-notice-disabled:disabled {
    color: var(--interactive-text-notice-disabled) !important;
    background-color: var(--interactive-background-notice-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-notice {
    color: var(--interactive-text-notice-normal);
    background-color: var(--interactive-background-notice-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-notice-disabled,
.btn-outline-notice-disabled:disabled {
    color: var(--interactive-text-notice-disabled) !important;
    background-color: var(--interactive-background-notice-disabled);
    border: 1px solid var(--interactive-border-notice-disabled);
    pointer-events: none;
}

.btn-information {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-information-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-information:focus,
.btn-information:focus-visible,
.btn-information:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-information-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-information-disabled,
.btn-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-information {
    color: var(--interactive-text-information-normal);
    background-color: var(--interactive-background-information-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-information-disabled,
.btn-outline-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 1px solid var(--interactive-border-information-disabled);
    pointer-events: none;
}

.btn-information {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-information-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-information:focus,
.btn-information:focus-visible,
.btn-information:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-information-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-information-disabled,
.btn-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-information {
    color: var(--interactive-text-information-normal);
    background-color: var(--interactive-background-information-faded);
    border: 1px 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-informat\\\\ion-normal);
    background-color: var(--interactive-background-information-fadedHighlighted);
    border: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-information-disabled,
.btn-outline-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 1px solid var(--interactive-border-information-disabled);
    pointer-events: none;
}

.btn-neutral {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-neutral-default);
    border: 0px solid var(--primary-fgreen-600);
    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-staticwhite-normal);
    background-color: var(--interactive-background-neutral-highlighted);
    border: 0px solid var(--primary-fgreen-700);
}

.btn-neutral:focus,
.btn-neutral:focus-visible,
.btn-neutral:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-neutral-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-neutral-disabled,
.btn-neutral-disabled:disabled {
    color: var(--interactive-text-neutral-disabled) !important;
    background-color: var(--interactive-background-neutral-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-neutral {
    color: var(--interactive-text-neutral-normal);
    background-color: var(--interactive-background-neutral-faded);
    border: 1px 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: 1px 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-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-neutral-disabled,
.btn-outline-neutral-disabled:disabled {
    color: var(--interactive-text-neutral-disabled) !important;
    background-color: var(--interactive-background-neutral-disabled);
    border: 1px solid var(--interactive-border-neutral-disabled);
    pointer-events: none;
}

.btn-link {
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    border: 0px solid var(--primary-fgreen-600);
    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:hover {
    color: var(--interactive-text-primary-subtle);
    background-color: var(--transperent);
    border: 0px solid var(--interactive-border-negative-default);
    text-decoration: underline;
}

.btn-link:focus,
.btn-link:focus-visible,
.btn-link:active {
    color: var(--interactive-text-primary-subtle) !important;
    background-color: var(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding: var(--spacing-0) var(--spacing-0) !important;
    outline: 2 !important;
    min-height: auto !important;
    box-shadow: none !important;
    border-radius: var(--bradius-small);
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-icon-12 {
    border: 0px solid var(--interactive-border-negative-default);
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    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(--transperent);
    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(--transperent);
    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(--transperent);
    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(--transperent);
    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(--transperent);
}

.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(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding: var(--spacing-0) var(--spacing-0) !important;
    outline: 2 !important;
    min-height: auto !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-icon-44:focus,
.btn-icon-44:focus-visible,
.btn-icon-44:active {
    color: var(--interactive-text-primary-subtle) !important;
    background-color: var(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding: var(--spacing-3) var(--spacing-3);
    outline: 2 !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-primary-ic {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-600);
    border-radius: var(--bradius-medium);
    border: 0px solid var(--primary-fgreen-600);
    padding: var(--size-04) var(--size-08);
}

.btn-primary-ic:hover {
    color: var(--netural-white-500);
    background-color: var(--primary-fgreen-700);
}

.btn-primary-outline-ic {
    color: var(--primary-fgreen-600);
    background-color: var(--primary-fgreen-600) 0;
    border: 1px solid var(--primary-fgreen-600);
    border-radius: var(--bradius-medium);
    padding: var(--size-04) var(--size-08);
}

.btn-primary-outline-ic:hover {
    color: var(--interactive-text-primary-normal);
    background-color: var(--interactive-background-primary-faded);
    border: 1px solid var(--interactive-background-primary-default);
}

.btn-tertiary-ic {
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
    border: 0px solid var(--primary-fgreen-600);
    padding: var(--size-04) var(--size-08);
}

.btn-tertiary-ic:hover {
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-text-gray-disabled);
}

.btn-ic-xsm {
    font-size: var(--fz-size-12);
}

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

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

/* Sidenav-css start */

#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidenav-container {
    background-color: var(--netural-white-500);
    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;
}

/* Submenu item*/
.typo1 {
    position: relative;
}

.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: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e844';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 26%;
    color: var(--interactive-icon-gray-muted);
}

.sidenav-expanded ul.list-group li [aria-expanded="true"]::after {
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e845';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 26%;
    color: var(--interactive-icon-gray-muted);
}

ul.list-group li ul li a[aria-expanded="true"] {
    background-color: var(--transperent);
    color: var(--interactive-text-primary-normal) !important;
}

ul.list-group li ul li a[aria-expanded="true"] span {
    background-color: var(--transperent);
    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);
}

/* Closed submenu icon */
#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;
}

/* Opened submenu icon */
#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 .list-group-item {
    border: var(--bradius-none);
}

.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;
    text-align: center;
    width: 100%;
    background: var(--netural-white-500);
    color: var(--ds-input-border);
    z-index: 9999;
}

.footer_logo_sidenav img {
    width: inherit;
    ;
}

.sidenav-expanded ul li a:hover {
    background-color: var(--transperent) !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(--netural-slateblue-600);
    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: rgba(180, 180, 180, 0.1) 3px 0 10px, rgba(180, 180, 180, 0.1) 3px 0 10px;
}


/* 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(--netural-white-500);
    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-staticbwhite-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: var(--netural-white-500);
    color: var(--interactive-text-primary-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;
    /* justify-content: space-between; */
    /* justify-content: space-between; */
}

.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 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--spacing-5) var(--spacing-4) !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;
}

.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: 1px solid var(--feedback-border-positive-subtle);
    background: var(--feedback-background-positive-subtle);
}

.alert-positive i {
    color: var(--feedback-icon-positive-intense);
}

.alert-negative {
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-negative-subtle);
    background: var(--feedback-background-negative-subtle);
}

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

.alert-negative i {
    color: var(--feedback-icon-negative-intense);
}

.alert-notice {
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-notice-subtle);
    background: var(--feedback-background-notice-subtle);
}

.notice {
    color: var(--interactive-text-notice-normal) !important;
}

.alert-notice i {
    color: var(--interactive-text-notice-normal);
}

.alert-information {
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-information-subtle);
    background: var(--feedback-background-information-subtle);
}

.information {
    color: var(--interactive-text-information-normal) !important;
}

.alert-information i {
    color: var(--feedback-icon-information-intense);
}

.alert-neutral {
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-neutral-subtle);
    background: var(--feedback-background-neutral-subtle);
}

.neutral {
    color: var(--interactive-text-neutral-normal) !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 i {
    color: var(--surface-text-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);
}

.negative-intense {
    color: var(--surface-text-staticwhite-normal);
}

.alert-negative-intense i {
    color: var(--surface-text-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);
}

.badge {
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    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-700);
    margin-right: var(--spacing-1);
}

.badge-md {
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    padding: var(--spacing-2) 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;
}

.badge-md i {
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    margin-right: var(--spacing-1);
}

.badge-lg {
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    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-lg i {
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    margin-right: var(--spacing-1);
}

.bg-subtle-positive {
    background-color: var(--feedback-background-positive-subtle);
    color: var(--feedback-text-positive-intense);
}

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

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

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

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

.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);
    color: var(--surface-text-primary-normal);
}

.bg-intense-primary {
    background-color: var(--surface-background-primary-intense);
    color: var(--surface-text-staticwhite-normal);
}

/* Dropdown Menu - Css */

/* Dropdown Menu - Css */

.dropdown-menu {
    min-width: 360px;
    padding: var(--spacing-2) var(--spacing-3);
    margin: 0;
    border-radius: var(--bradius-medium);
    border: 1px solid var(--popup-background-subtle);
    box-shadow: 0px 8px 24px 0px #3F4F611F;
}

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

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

.custome-dropdowm li i {
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
    vertical-align: middle;
}

.custome-padding {
    padding: var(--spacing-2);
}

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

.custome-dropdowm li .show-leading::after {
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e8cd';
    font-family: "feather";
    position: absolute;
    right: 6%;
    color: var(--interactive-icon-gray-muted);
    vertical-align: middle;
}

.custome-dropdowm li a:hover,
a:active {
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}

.custome-dropdowm li .hover {
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}

.custome-dropdowm li a:focus,
a:focus-visible {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
}


.custome-dropdowm li.active a {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-faded);
}

.custome-dropdowm li.active:hover a {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-fadedHighlighted);
}

.custome-dropdowm li a.focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-radius: var(--bradius-medium);
}

.custome-dropdowm li a.disabled {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-disabled);
    background-color: var(--transperent);
}

.custome-dropdowm li a.destructive {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--transperent);
}

.custome-dropdowm li a.destructive:hover {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}

.custome-dropdowm li a.destructive-hover {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}

.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-vertical-align: -0.125em; */
    /* --bs-spinner-border-width: 0.25em; */
    --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-bootom {
    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-700);
    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-10);
    font-weight: var(--fw-700);
    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-12);
    font-weight: var(--fw-700);
    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(--netural-grey-600);
}

.collapse-link[aria-expanded="true"]::after {
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--netural-grey-600);
    font-family: 'feather' !important;
    background-image: none !important;
    /* transform: rotate(-180deg); */
}

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

button.collapse-link[aria-expanded="true"]::after {
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--interactive-text-staticwhite-normal);
    font-family: 'feather' !important;
    background-image: none !important;
    /* transform: rotate(-180deg); */
}

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: 1px solid var(--interactive-border-gray-faded);
    color: var(--interactive-text-gray-subtle);
    background-color: var(--surface-background-gray-intense);
}

.chip-default:hover {
    border: 1px 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: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--interactive-background-gray-faded);
    color: var(--interactive-text-gray-subtle);
}

.chip-default-negative {
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    color: var(--interactive-text-gray-subtle);
    background-color: var(--surface-background-gray-intense);
}

.chip-default-negative:hover {
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--interactive-background-gray-faded);
}

.chip-default-negative:focus-visible {
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--interactive-background-gray-faded);
    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);
}

.chip-default-positive {
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    color: var(--interactive-text-gray-subtle);
    background-color: var(--surface-background-gray-intense);
}

.chip-default-positive:hover {
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--interactive-background-gray-faded);
}

.chip-default-positive:focus-visible {
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--interactive-background-gray-faded);
    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);
}

.btn.chip-default,
.btn.chip-default:active {
    background-color: var(--transperent);
    color: var(--interactive-text-gray-subtle);
}

.btn.chip-default-positive,
.btn.chip-default-positive:active {
    background-color: var(--transperent);
    color: var(--interactive-text-gray-subtle);
}

.btn.chip-default-negative,
.btn.chip-default-negative:active {
    background-color: var(--transperent);
    color: var(--interactive-text-gray-subtle);
}

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

.icon-x {
    margin-right: var(--spacing-0) !important;
}

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

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

.toast-positive {
    border-radius: var(--bradius-medium);
    border: 1px 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: 1px solid var(--feedback-border-negative-subtle);
    background: var(--feedback-background-negative-subtle);
}

.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: 1px solid var(--feedback-border-notice-subtle);
    background: var(--feedback-background-notice-subtle);
}

.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: 1px solid var(--feedback-border-information-subtle);
    background: var(--feedback-background-information-subtle);
}

.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: 1px solid var(--feedback-border-neutral-subtle);
    background: var(--feedback-background-neutral-subtle);
}

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

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

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

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

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

.tost-container {
    display: flex;
    align-items: center;
}

.tost-container-promotional {
    display: flex;
}

.toast-promotional {
    border-radius: var(--bradius-medium);
    border: 1px 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 {
    position: unset;
    padding: var(--spacing-0) var(--spacing-0) !important;
    outline: 2px solid var(--surface-background-primary-intense) !important;
    display: flex;
    align-items: center;
}

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

.tost-container-promotional i {
    margin-top: var(--size-02);
}

/* Tags-css */

.tag {
    border-radius: var(--bradius-max);
    border: 0px solid var(--interactive-border-gray-faded);
    color: var(--surafec-text-gray-subtle);
    background-color: var(--interactive-background-gray-default);
}

.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(--bs-offcanvas-border-color);
    transform: translateY(100%);
    z-index: 9999;
}

.offcanvas.offcanvas-lg {
    height: 65vh;
}

.offcanvas {
    padding-top: 4px;
    border-radius: 16px 16px 0 0;
}

.offercanvas-top-header {
    display: flex;
    padding: 0px 24px 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.offercanvas-top-header .handle {
    width: 56px;
    height: 4px;
    background: var(--surface-icon-staticblack-muted);
    border-radius: 16px;
}

.offcanvas-header {
    display: block;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--surface-border-gray-muted);
}

.offcanvas-header .header-align {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.offcanvas-footer {
    align-items: center;
    padding: var(--spacing-4) var(--spacing-4);
    border-top: 1px solid var(--surface-border-gray-muted);
}

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

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

.offcanvas-body .custome-dropdowm .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 .custome-dropdowm li i {
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
    vertical-align: middle;
}

.custome-padding {
    padding: var(--spacing-2);
}

.offcanvas-body .custome-dropdowm .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 .custome-dropdowm li .show-leading::after {
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e8cd';
    font-family: "feather";
    position: absolute;
    right: 6%;
    color: var(--interactive-icon-gray-muted);
    vertical-align: middle;
}

.offcanvas-body .custome-dropdowm 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 .custome-dropdowm li .hover {
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}

.offcanvas-body .custome-dropdowm 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 .custome-dropdowm li.active a {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-faded);
}

.offcanvas-body .custome-dropdowm li.active:hover a {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-fadedHighlighted);
}

.offcanvas-body .custome-dropdowm li a.focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-radius: var(--bradius-medium);
}

.offcanvas-body .custome-dropdowm li a.disabled {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-disabled);
    background-color: var(--transperent);
}

.offcanvas-body .custome-dropdowm li a.destructive {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--transperent);
}

.offcanvas-body .custome-dropdowm li a.destructive:hover {
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}

.offcanvas-body .custome-dropdowm 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);
    vertical-align: middle;
}

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

.indicator-negative i {
    color: var(--feedback-background-negative-intense);
}

.indicator-notice i {
    color: var(--feedback-background-notice-intense);
}

.indicator-information i {
    color: var(--feedback-background-information-intense);
}

.indicator-neutral i {
    color: var(--feedback-background-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(--transperent);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-24);
    font-weight: var(--fw-600);
    border: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: var(--spacing-0) var(--spacing-4);
    text-decoration: none;
    border-radius: var(--bradius-medium);
}

.show-code::after {
    margin-left: auto;
    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;
    margin-left: auto;
    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(--interactive-background-staticwhite-default);
}

.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: #F6F8FB;
    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;
    padding: 0px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #6c757d;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    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: #007bff;
    outline: 0
}

.bs-stepper .step-trigger:hover {
    text-decoration: none;
    background-color: var(--transperent);
}



.bs-stepper-label {
    display: inline-block;
    padding-left: var(--spacing-3);
    color: var(--surafec-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
}

.bs-stepper-label-bottom {
    display: block;
    padding-top: var(--spacing-3);
    color: var(--surafec-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--typography-typefaces-body);
    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-600);
    line-height: var(--lineheight-18);
}

.label-lg {
    font-size: var(--fz-size-18);
    font-weight: var(--fw-500);
    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: 1px 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
}

/* Scroll bar - Css */

.custome-overflow-y {
    overflow-y: scroll;
    height: 30vh;
}

.custome-overflow-x {
    overflow-x: scroll;
    width: 70%;
}


/* colors - CSS */

.list-text {
    color: var(--surface-text-staticblack-subtle);
}

.hide_mobile {
    font-style: italic;
    color: var(--surface-icon-staticblack-muted);
    font-weight: var(--fw-400);
}

.dark {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.dark .option-1 {
    background-color: var(--surface-background-dark-subtle);
    height: 70px;
}

.dark .option-2 {
    background-color: var(--surface-background-dark-moderate);
    height: 50px;
    width: 50%;
}

.dark .option-3 {
    background-color: var(--surface-background-dark-intense);
    height: 50px;
    width: 50%;
}

.gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.gray .option-1 {
    background-color: var(--surface-background-gray-subtle);
    height: 70px;
}

.gray .option-2 {
    background-color: var(--surface-background-gray-moderate);
    height: 50px;
    width: 50%;
}

.gray .option-3 {
    background-color: var(--surface-background-gray-intense);
    height: 50px;
    width: 50%;
}

.primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.primary .option-1 {
    background-color: var(--surface-background-primary-subtle);
    height: 80px;
}

.primary .option-3 {
    background-color: var(--surface-background-primary-intense);
    height: 40px;
}


.text-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-gray .option-1 {
    background-color: var(--surface-icon-gray-normal);
    height: 80px;
    width: 50%;
}

.text-gray .option-2 {
    background-color: var(--surface-icon-gray-subtle);
    height: 80px;
    width: 50%;
}

.text-gray .option-3 {
    background-color: var(--surface-icon-gray-muted);
    height: 50px;
    width: 50%;
}

.text-gray .option-4 {
    background-color: var(--surface-icon-gray-disabled);
    height: 50px;
    width: 50%;
}

.texticon-primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.texticon-primary .option-1 {
    background-color: var(--surface-icon-primary-normal);
    height: 130px;
    width: 100%;
}

.staticwhite {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.staticwhite-bg {
    background: black;
}

.staticwhite .option-1 {
    background-color: var(--surface-icon-staticwhite-normal);
    height: 80px;
    width: 50%;
    box-shadow: 0px 0px 2px #dadada;
}

.staticwhite .option-2 {
    background-color: var(--surface-icon-staticwhite-subtle);
    height: 80px;
    width: 50%;
}

.staticwhite .option-3 {
    background-color: var(--surface-icon-staticwhite-muted);
    height: 50px;
    width: 50%;
}

.staticwhite .option-4 {
    background-color: var(--surface-icon-staticwhite-disabled);
    height: 50px;
    width: 50%;
}


.staticblack {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.staticblack-bg {
    background: white;
}

.staticblack .option-1 {
    background-color: var(--surface-icon-staticblack-normal);
    height: 80px;
    width: 50%;
}

.staticblack .option-2 {
    background-color: var(--surface-icon-staticblack-subtle);
    height: 80px;
    width: 50%;
}

.staticblack .option-3 {
    background-color: var(--surface-icon-staticblack-muted);
    height: 50px;
    width: 50%;
}

.staticblack .option-4 {
    background-color: var(--surface-icon-staticblack-disabled);
    height: 50px;
    width: 50%;
}



.border-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-gray .option-1 {
    background-color: var(--surface-border-gray-normal);
    height: 80px;
}

.border-gray .option-3 {
    background-color: var(--surface-border-gray-muted);
    height: 40px;
}


.border-primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-primary .option-1 {
    background-color: var(--surface-border-primary-normal);
    height: 120px;
}


.bg-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.bg-positive .option-1 {
    background-color: var(--feedback-background-positive-subtle);
    height: 80px;
}

.bg-positive .option-3 {
    background-color: var(--feedback-background-positive-intense);
    height: 40px;
}


.bg-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.bg-negative .option-1 {
    background-color: var(--feedback-background-negative-subtle);
    height: 80px;
}

.bg-negative .option-3 {
    background-color: var(--feedback-background-negative-intense);
    height: 40px;
}

.bg-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.bg-notice .option-1 {
    background-color: var(--feedback-background-notice-subtle);
    height: 80px;
}

.bg-notice .option-3 {
    background-color: var(--feedback-background-notice-intense);
    height: 40px;
}

.bg-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.bg-information .option-1 {
    background-color: var(--feedback-background-information-subtle);
    height: 80px;
}

.bg-information .option-3 {
    background-color: var(--feedback-background-information-intense);
    height: 40px;
}

.bg-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.bg-neutral .option-1 {
    background-color: var(--feedback-background-neutral-subtle);
    height: 80px;
}

.bg-neutral .option-3 {
    background-color: var(--feedback-background-neutral-intense);
    height: 40px;
}

.text-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-positive .option-1 {
    background-color: var(--feedback-text-positive-subtle);
    height: 80px;
}

.text-positive .option-3 {
    background-color: var(--feedback-text-positive-intense);
    height: 40px;
}


.text-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-negative .option-1 {
    background-color: var(--feedback-text-negative-subtle);
    height: 80px;
}

.text-negative .option-3 {
    background-color: var(--feedback-text-negative-intense);
    height: 40px;
}

.text-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-notice .option-1 {
    background-color: var(--feedback-text-notice-subtle);
    height: 80px;
}

.text-notice .option-3 {
    background-color: var(--feedback-text-notice-intense);
    height: 40px;
}

.text-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-information .option-1 {
    background-color: var(--feedback-text-information-subtle);
    height: 80px;
}

.text-information .option-3 {
    background-color: var(--feedback-text-information-intense);
    height: 40px;
}

.text-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.text-neutral .option-1 {
    background-color: var(--feedback-text-neutral-subtle);
    height: 80px;
}

.text-neutral .option-3 {
    background-color: var(--feedback-text-neutral-intense);
    height: 40px;
}

.border-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-positive .option-1 {
    background-color: var(--feedback-border-positive-subtle);
    height: 80px;
}

.border-positive .option-3 {
    background-color: var(--feedback-border-positive-intense);
    height: 40px;
}


.border-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-negative .option-1 {
    background-color: var(--feedback-border-negative-subtle);
    height: 80px;
}

.border-negative .option-3 {
    background-color: var(--feedback-border-negative-intense);
    height: 40px;
}

.border-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-notice .option-1 {
    background-color: var(--feedback-border-notice-subtle);
    height: 80px;
}

.border-notice .option-3 {
    background-color: var(--feedback-border-notice-intense);
    height: 40px;
}

.border-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-information .option-1 {
    background-color: var(--feedback-border-information-subtle);
    height: 80px;
}

.border-information .option-3 {
    background-color: var(--feedback-border-information-intense);
    height: 40px;
}

.border-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.border-neutral .option-1 {
    background-color: var(--feedback-border-neutral-subtle);
    height: 80px;
}

.border-neutral .option-3 {
    background-color: var(--feedback-border-neutral-intense);
    height: 40px;
}


.inter-bg-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-positive .option-1 {
    background-color: var(--interactive-background-positive-default);
    height: 80px;
    width: 50%;
}

.inter-bg-positive .option-2 {
    background-color: var(--interactive-background-positive-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-positive .option-3 {
    background-color: var(--interactive-background-positive-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-positive .option-4 {
    background-color: var(--interactive-background-positive-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-positive .option-5 {
    background-color: var(--interactive-background-positive-fadedHighlighted);
    height: 50px;
    width: 50%;
}


.inter-bg-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-negative .option-1 {
    background-color: var(--interactive-background-negative-default);
    height: 80px;
    width: 50%;
}

.inter-bg-negative .option-2 {
    background-color: var(--interactive-background-negative-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-negative .option-3 {
    background-color: var(--interactive-background-negative-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-negative .option-4 {
    background-color: var(--interactive-background-negative-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-negative .option-5 {
    background-color: var(--interactive-background-negative-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-notice .option-1 {
    background-color: var(--interactive-background-notice-default);
    height: 80px;
    width: 50%;
}

.inter-bg-notice .option-2 {
    background-color: var(--interactive-background-notice-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-notice .option-3 {
    background-color: var(--interactive-background-notice-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-notice .option-4 {
    background-color: var(--interactive-background-notice-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-notice .option-5 {
    background-color: var(--interactive-background-notice-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-information .option-1 {
    background-color: var(--interactive-background-information-default);
    height: 80px;
    width: 50%;
}

.inter-bg-information .option-2 {
    background-color: var(--interactive-background-information-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-information .option-3 {
    background-color: var(--interactive-background-information-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-information .option-4 {
    background-color: var(--interactive-background-information-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-information .option-5 {
    background-color: var(--interactive-background-information-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-neutral .option-1 {
    background-color: var(--interactive-background-neutral-default);
    height: 80px;
    width: 50%;
}

.inter-bg-neutral .option-2 {
    background-color: var(--interactive-background-neutral-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-neutral .option-3 {
    background-color: var(--interactive-background-neutral-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-neutral .option-4 {
    background-color: var(--interactive-background-neutral-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-neutral .option-5 {
    background-color: var(--interactive-background-neutral-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-primary .option-1 {
    background-color: var(--interactive-background-primary-default);
    height: 80px;
    width: 50%;
}

.inter-bg-primary .option-2 {
    background-color: var(--interactive-background-primary-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-primary .option-3 {
    background-color: var(--interactive-background-primary-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-primary .option-4 {
    background-color: var(--interactive-background-primary-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-primary .option-5 {
    background-color: var(--interactive-background-primary-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-bg-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-gray .option-1 {
    background-color: var(--interactive-background-gray-default);
    height: 80px;
    width: 50%;
}

.inter-bg-gray .option-2 {
    background-color: var(--interactive-background-gray-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-gray .option-3 {
    background-color: var(--interactive-background-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-gray .option-4 {
    background-color: var(--interactive-background-gray-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-gray .option-5 {
    background-color: var(--interactive-background-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-gray .option-1 {
    background-color: var(--interactive-background-gray-default);
    height: 80px;
    width: 50%;
}

.inter-bg-gray .option-2 {
    background-color: var(--interactive-background-gray-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-gray .option-3 {
    background-color: var(--interactive-background-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-gray .option-4 {
    background-color: var(--interactive-background-gray-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-gray .option-5 {
    background-color: var(--interactive-background-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-bg-staticwhite {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-staticwhite .option-1 {
    background-color: var(--interactive-background-staticwhite-default);
    height: 80px;
    width: 50%;
    box-shadow: 0px 0px 2px #dadada;
}

.inter-bg-staticwhite .option-2 {
    background-color: var(--interactive-background-staticwhite-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-staticwhite .option-3 {
    background-color: var(--interactive-background-staticwhite-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-staticwhite .option-4 {
    background-color: var(--interactive-background-staticwhite-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-staticwhite .option-5 {
    background-color: var(--interactive-background-staticwhite-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-staticblack {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-bg-staticblack .option-1 {
    background-color: var(--interactive-background-staticblack-default);
    height: 80px;
    width: 50%;
}

.inter-bg-staticblack .option-2 {
    background-color: var(--interactive-background-staticblack-highlighted);
    height: 80px;
    width: 50%;
}

.inter-bg-staticblack .option-3 {
    background-color: var(--interactive-background-staticblack-disabled);
    height: 50px;
    width: 50%;
}

.inter-bg-staticblack .option-4 {
    background-color: var(--interactive-background-staticblack-faded);
    height: 50px;
    width: 50%;
}

.inter-bg-staticblack .option-5 {
    background-color: var(--interactive-background-staticblack-fadedHighlighted);
    height: 50px;
    width: 50%;
}





.inter-text-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-positive .option-1 {
    background-color: var(--interactive-text-positive-normal);
    height: 80px;
    width: 50%;
}

.inter-text-positive .option-2 {
    background-color: var(--interactive-text-positive-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-positive .option-3 {
    background-color: var(--interactive-text-positive-muted);
    height: 50px;
    width: 50%;
}

.inter-text-positive .option-4 {
    background-color: var(--interactive-text-positive-disabled);
    height: 50px;
    width: 50%;
}


.inter-text-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-negative .option-1 {
    background-color: var(--interactive-text-negative-normal);
    height: 80px;
    width: 50%;
}

.inter-text-negative .option-2 {
    background-color: var(--interactive-text-negative-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-negative .option-3 {
    background-color: var(--interactive-text-negative-muted);
    height: 50px;
    width: 50%;
}

.inter-text-negative .option-4 {
    background-color: var(--interactive-text-negative-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-notice .option-1 {
    background-color: var(--interactive-text-notice-normal);
    height: 80px;
    width: 50%;
}

.inter-text-notice .option-2 {
    background-color: var(--interactive-text-notice-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-notice .option-3 {
    background-color: var(--interactive-text-notice-muted);
    height: 50px;
    width: 50%;
}

.inter-text-notice .option-4 {
    background-color: var(--interactive-text-notice-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-information .option-1 {
    background-color: var(--interactive-text-information-normal);
    height: 80px;
    width: 50%;
}

.inter-text-information .option-2 {
    background-color: var(--interactive-text-information-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-information .option-3 {
    background-color: var(--interactive-text-information-muted);
    height: 50px;
    width: 50%;
}

.inter-text-information .option-4 {
    background-color: var(--interactive-text-information-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-neutral .option-1 {
    background-color: var(--interactive-text-neutral-normal);
    height: 80px;
    width: 50%;
}

.inter-text-neutral .option-2 {
    background-color: var(--interactive-text-neutral-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-neutral .option-3 {
    background-color: var(--interactive-text-neutral-muted);
    height: 50px;
    width: 50%;
}

.inter-text-neutral .option-4 {
    background-color: var(--interactive-text-neutral-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-primary .option-1 {
    background-color: var(--interactive-text-primary-normal);
    height: 80px;
    width: 50%;
}

.inter-text-primary .option-2 {
    background-color: var(--interactive-text-primary-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-primary .option-3 {
    background-color: var(--interactive-text-primary-muted);
    height: 50px;
    width: 50%;
}

.inter-text-primary .option-4 {
    background-color: var(--interactive-text-primary-disabled);
    height: 50px;
    width: 50%;
}



.inter-text-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-gray .option-1 {
    background-color: var(--interactive-text-gray-normal);
    height: 80px;
    width: 50%;
}

.inter-text-gray .option-2 {
    background-color: var(--interactive-text-gray-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-gray .option-3 {
    background-color: var(--interactive-text-gray-muted);
    height: 50px;
    width: 50%;
}

.inter-text-gray .option-4 {
    background-color: var(--interactive-text-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-gray .option-1 {
    background-color: var(--interactive-text-gray-normal);
    height: 80px;
    width: 50%;
}

.inter-text-gray .option-2 {
    background-color: var(--interactive-text-gray-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-gray .option-3 {
    background-color: var(--interactive-text-gray-muted);
    height: 50px;
    width: 50%;
}

.inter-text-gray .option-4 {
    background-color: var(--interactive-text-gray-disabled);
    height: 50px;
    width: 50%;
}



.inter-text-staticwhite {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-staticwhite .option-1 {
    background-color: var(--interactive-text-staticwhite-normal);
    height: 80px;
    width: 50%;
    box-shadow: 0px 0px 2px #dadada;
}

.inter-text-staticwhite .option-2 {
    background-color: var(--interactive-text-staticwhite-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-staticwhite .option-3 {
    background-color: var(--interactive-text-staticwhite-muted);
    height: 50px;
    width: 50%;
}

.inter-text-staticwhite .option-4 {
    background-color: var(--interactive-text-staticwhite-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-staticblack {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-text-staticblack .option-1 {
    background-color: var(--interactive-text-staticblack-normal);
    height: 80px;
    width: 50%;
}

.inter-text-staticblack .option-2 {
    background-color: var(--interactive-text-staticblack-subtle);
    height: 80px;
    width: 50%;
}

.inter-text-staticblack .option-3 {
    background-color: var(--interactive-text-staticblack-muted);
    height: 50px;
    width: 50%;
}

.inter-text-staticblack .option-4 {
    background-color: var(--interactive-text-staticblack-disabled);
    height: 50px;
    width: 50%;
}


.inter-border-positive {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-positive .option-1 {
    background-color: var(--interactive-border-positive-default);
    height: 80px;
    width: 50%;
}

.inter-border-positive .option-2 {
    background-color: var(--interactive-border-positive-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-positive .option-3 {
    background-color: var(--interactive-border-positive-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-positive .option-4 {
    background-color: var(--interactive-border-positive-faded);
    height: 50px;
    width: 50%;
}

.inter-border-positive .option-5 {
    background-color: var(--interactive-border-positive-fadedHighlighted);
    height: 50px;
    width: 50%;
}


.inter-border-negative {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-negative .option-1 {
    background-color: var(--interactive-border-negative-default);
    height: 80px;
    width: 50%;
}

.inter-border-negative .option-2 {
    background-color: var(--interactive-border-negative-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-negative .option-3 {
    background-color: var(--interactive-border-negative-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-negative .option-4 {
    background-color: var(--interactive-border-negative-faded);
    height: 50px;
    width: 50%;
}

.inter-border-negative .option-5 {
    background-color: var(--interactive-border-negative-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-notice {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-notice .option-1 {
    background-color: var(--interactive-border-notice-default);
    height: 80px;
    width: 50%;
}

.inter-border-notice .option-2 {
    background-color: var(--interactive-border-notice-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-notice .option-3 {
    background-color: var(--interactive-border-notice-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-notice .option-4 {
    background-color: var(--interactive-border-notice-faded);
    height: 50px;
    width: 50%;
}

.inter-border-notice .option-5 {
    background-color: var(--interactive-border-notice-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-information {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-information .option-1 {
    background-color: var(--interactive-border-information-default);
    height: 80px;
    width: 50%;
}

.inter-border-information .option-2 {
    background-color: var(--interactive-border-information-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-information .option-3 {
    background-color: var(--interactive-border-information-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-information .option-4 {
    background-color: var(--interactive-border-information-faded);
    height: 50px;
    width: 50%;
}

.inter-border-information .option-5 {
    background-color: var(--interactive-border-information-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-neutral {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-neutral .option-1 {
    background-color: var(--interactive-border-neutral-default);
    height: 80px;
    width: 50%;
}

.inter-border-neutral .option-2 {
    background-color: var(--interactive-border-neutral-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-neutral .option-3 {
    background-color: var(--interactive-border-neutral-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-neutral .option-4 {
    background-color: var(--interactive-border-neutral-faded);
    height: 50px;
    width: 50%;
}

.inter-border-neutral .option-5 {
    background-color: var(--interactive-border-neutral-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-primary .option-1 {
    background-color: var(--interactive-border-primary-default);
    height: 80px;
    width: 50%;
}

.inter-border-primary .option-2 {
    background-color: var(--interactive-border-primary-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-primary .option-3 {
    background-color: var(--interactive-border-primary-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-primary .option-4 {
    background-color: var(--interactive-border-primary-faded);
    height: 50px;
    width: 50%;
}

.inter-border-primary .option-5 {
    background-color: var(--interactive-border-primary-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-border-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-gray .option-1 {
    background-color: var(--interactive-border-gray-default);
    height: 80px;
    width: 50%;
}

.inter-border-gray .option-2 {
    background-color: var(--interactive-border-gray-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-gray .option-3 {
    background-color: var(--interactive-border-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-gray .option-4 {
    background-color: var(--interactive-border-gray-faded);
    height: 50px;
    width: 50%;
}

.inter-border-gray .option-5 {
    background-color: var(--interactive-border-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-gray .option-1 {
    background-color: var(--interactive-border-gray-default);
    height: 80px;
    width: 50%;
}

.inter-border-gray .option-2 {
    background-color: var(--interactive-border-gray-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-gray .option-3 {
    background-color: var(--interactive-border-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-gray .option-4 {
    background-color: var(--interactive-border-gray-faded);
    height: 50px;
    width: 50%;
}

.inter-border-gray .option-5 {
    background-color: var(--interactive-border-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-border-staticwhite {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-staticwhite .option-1 {
    background-color: var(--interactive-border-staticwhite-default);
    height: 80px;
    width: 50%;
    box-shadow: 0px 0px 2px #dadada;
}

.inter-border-staticwhite .option-2 {
    background-color: var(--interactive-border-staticwhite-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-staticwhite .option-3 {
    background-color: var(--interactive-border-staticwhite-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-staticwhite .option-4 {
    background-color: var(--interactive-border-staticwhite-faded);
    height: 50px;
    width: 50%;
}

.inter-border-staticwhite .option-5 {
    background-color: var(--interactive-border-staticwhite-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-staticblack {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}

.inter-border-staticblack .option-1 {
    background-color: var(--interactive-border-staticblack-default);
    height: 80px;
    width: 50%;
}

.inter-border-staticblack .option-2 {
    background-color: var(--interactive-border-staticblack-highlighted);
    height: 80px;
    width: 50%;
}

.inter-border-staticblack .option-3 {
    background-color: var(--interactive-border-staticblack-disabled);
    height: 50px;
    width: 50%;
}

.inter-border-staticblack .option-4 {
    background-color: var(--interactive-border-staticblack-faded);
    height: 50px;
    width: 50%;
}

.inter-border-staticblack .option-5 {
    background-color: var(--interactive-border-staticblack-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.content-view {
    display: flex;
}


/*Datepicker css start*/

.datepicker tr th {
    background-color: transparent !important;
    padding: 12px 6px;
}

.datepicker tr td {
    padding: 8px !important;
    height: 12px !important;
    width: 12px !important;
    line-height: normal !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--primary-fgreen-600) !important;
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--primary-fgreen-600) !important;
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #fff !important;
}

.picker-switch .table-condensed td {
    padding: 10px;
}

.picker-switch .table-condensed td a {
    color: var(--primary-fgreen-600) !important;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
    color: var(--primary-fgreen-600) !important;
}

.timepicker .btn {
    background-color: transparent !important;
    border: none !important;
}

.timepicker .btn.btn-primary {
    background-color: var(--primary-fgreen-600) !important;
}

.input-group-append .input-group-text {
    border-radius: 0 4px 4px 0px !important;
}

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

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

.fa.fa-calendar,
.fa.fa-calendar-check-o {
    font-size: 22px;
}

.select-input {
    position: relative;
    display: flex;
    align-items: center;
}

.form-select {
    border: 1px 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(--netural-white-500);
}

.form-select:focus-within {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

.form-select:focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-color: var(--surface-background-primary-intense);
    outline: 0;
    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);
}


.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 {
    background-color: var(--interactive-background-gray-faded);
}

.form-select.active {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}



.form-select {
    --bs-form-select-bg-img: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    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(--netural-grey-600);
    position: absolute;
    right: 2%;
    pointer-events: none;
}

.select-input.disabled .form-select {
    cursor: no-drop;
    border-color: var(--interactive-border-gray-disabled);
    color: var(--surface-icon-gray-disabled);
    background-color: var(--netural-white-500);
}

.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-thicker);
    border-color: var(--interactive-border-primary-default);
}

.select-input.error .form-select {
    border-width: var(--bwidth-thicker);
    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: #f0f0f0;
}