:root {
    --color-id-1: rgba(255, 255, 255, 1);
    --color-id-2: rgba(30, 121, 228, 1);
    --color-id-3: rgba(38, 162, 94, 1);
    --color-id-4: rgba(255, 193, 7, 1);
    --color-id-5: rgba(120, 175, 239, 1);
    --color-id-6: rgba(210, 228, 250, 1);
    --color-id-7: rgba(12, 48, 91, 0.05);
    --color-id-8: rgba(75, 148, 233, 1);
    --color-id-9: rgba(233, 242, 252, 1);
    --color-id-10: rgba(200, 25, 25, 1);
    --color-id-11: rgba(210, 228, 250, 1);
    --color-id-12: rgba(188, 215, 247, 1);
    --color-id-13: rgba(30, 121, 228, 1);
    --color-id-14: rgba(255, 255, 255, 1);
    --color-id-15: linear-gradient(0deg, rgba(24, 97, 182, 1) 0%, rgba(30, 121, 228, 1) 100%);
    --color-id-16: rgba(24, 97, 182, 1);
    --color-id-17: rgba(244, 209, 209, 1);
    --color-id-18: rgba(30, 121, 228, 1);
    --color-id-19: rgba(212, 236, 223, 1);
    --color-id-20: rgba(12, 48, 91, 1);
    --color-id-21: rgba(27, 109, 205, 1);
    --text-dark: var(--color-id-20);
    --text-white: var(--color-id-14);
    --link: var(--color-id-18);
}

.body-public {
    background: var(--color-id-9);
    color: var(--text-dark)
}

.body-internal {
    background: var(--color-id-9);
    color: var(--text-dark);
}

.text-white {
    color: var(--color-id-14);
}

.text-dark {
    color: var(--color-id-20);
}


@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kQo8UDI-1M0wlSTd7iL0nAMaM.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kSo8UDI-1M0wlSfdzoK2vFIaOV8A.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kVo8UDI-1M0wlSdSrLC0HrLaqM6Q4.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kXo8UDI-1M0wlSfdzQ30LhKYiJ-Q7m8w.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kVo8UDI-1M0wlSdQbMC0HrLaqM6Q4.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kXo8UDI-1M0wlSfdzQ80XhKYiJ-Q7m8w.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kVo8UDI-1M0wlSdWLNC0HrLaqM6Q4.ttf) format('woff');
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v6/k3kXo8UDI-1M0wlSfdzQl0ThKYiJ-Q7m8w.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6Hkvalrub76M7dd8aGZk.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6HkvalqKbL6M7dd8aGZk.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXGc1nY6HkvamImRJqExst1.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6Hkvalr-ar6M7dd8aGZk.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6Hkvalqaa76M7dd8aGZk.ttf) format('woff');
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cairo/v6/SLXLc1nY6Hkvalqiab6M7dd8aGZk.ttf) format('woff');
}

html,
body,
.body {
    font-family: "Cairo", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

h1 {
    font-family: "Cairo", sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
}

h2 {
    font-family: "Cairo", sans-serif;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
}

h3 {
    font-family: "Cairo", sans-serif;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
}

h4 {
    font-family: "Archivo", sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
}

h5 {
    font-family: "Cairo", sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
}

h6 {
    font-family: "Cairo", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

:root {
    --button_secondary_text_color: var(--color-id-14);
    --button_secondary_background_color: var(--color-id-5);
    --button_secondary_border_color: var(--color-id-16);
    --button_secondary_hover_text_color: var(--color-id-14);
    --button_secondary_hover_background_color: var(--color-id-8);
    --button_secondary_hover_border_color: var(--color-id-16);
    --button_secondary_box_shadow: none;
    --button_primary_text_color: var(--color-id-14);
    --button_primary_background_color: var(--color-id-18);
    --button_primary_border_color: var(--color-id-16);
    --button_primary_hover_text_color: var(--color-id-14);
    --button_primary_hover_background_color: var(--color-id-21);
    --button_primary_hover_border_color: var(--color-id-16);
    --button_primary_box_shadow: none;
    --button_action_text_color: var(--color-id-14);
    --button_action_background_color: var(--color-id-18);
    --button_action_border_color: var(--color-id-16);
    --button_action_hover_text_color: var(--color-id-14);
    --button_action_hover_background_color: var(--color-id-21);
    --button_action_hover_border_color: var(--color-id-16);
    --button_action_box_shadow: none;
}

.btn {}

.btn-big-secondary {
    font-weight: 700;
    font-style: normal;
    font-size: null;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--button_secondary_text_color) !important;
    background: var(--button_secondary_background_color);
    border-color: var(--button_secondary_border_color);
    box-shadow: var(--button_secondary_box_shadow);
    border-style: solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
}

.btn-big-secondary:hover {
    color: var(--button_secondary_hover_text_color) !important;
    background: var(--button_secondary_hover_background_color);
    border-color: var(--button_secondary_hover_border_color);
    text-decoration: none;
}

.btn-big-secondary:focus {
    color: var(--button_secondary_text_color) !important;
    background: var(--button_secondary_background_color);
    border-color: var(--button_secondary_border_color);
    text-decoration: none;
}

.btn-actions {
    font-weight: 700;
    font-style: normal;
    font-size: null;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--button_action_text_color) !important;
    background: var(--button_action_background_color);
    border-color: var(--button_action_border_color);
    box-shadow: var(--button_action_box_shadow);
    border-style: solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
}

.btn-actions:hover {
    color: var(--button_action_hover_text_color) !important;
    background: var(--button_action_hover_background_color);
    border-color: var(--button_action_hover_border_color);
    text-decoration: none;
}

.btn-actions:focus {
    color: var(--button_action_text_color) !important;
    background: var(--button_action_background_color);
    border-color: var(--button_action_border_color);
    text-decoration: none;
}

.btn-big-primary {
    font-weight: 700;
    font-style: normal;
    font-size: null;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--button_primary_text_color) !important;
    background: var(--button_primary_background_color);
    border-color: var(--button_primary_border_color);
    box-shadow: var(--button_primary_box_shadow);
    border-style: solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
}

.btn-big-primary:hover {
    color: var(--button_primary_hover_text_color) !important;
    background: var(--button_primary_hover_background_color);
    border-color: var(--button_primary_hover_border_color);
    text-decoration: none;
}

.btn-big-primary:focus {
    color: var(--button_primary_text_color) !important;
    background: var(--button_primary_background_color);
    border-color: var(--button_primary_border_color);
    text-decoration: none;
}

.btn-big-primary.dropdown-toggle+.dropdown-menu .dropdown-item.active {
    color: var(--button_primary_text_color) !important;
    background-color: var(--button_primary_background_color) !important;
}

.show>.btn-big-primary.dropdown-toggle {
    color: var(--button_primary_hover_text_color) !important;
    background-color: var(--button_primary_hover_background_color) !important;
    border-color: var(--button_primary_hover_border_color) !important;
}

:root {
    --navbar_private_items_text_color: var(--color-id-20);
    --navbar_private_background_color: var(--color-id-1);
    --navbar_private_items_hover_text_color: var(--color-id-18);
    --navbar_private_items_hover_background_color: transparent;
    --navbar_private_items_active_text_color: var(--color-id-18);
    --navbar_private_items_active_background_color: transparent;
    --navbar_private_box_shadow: 0px 2px 4px 0px var(--color-id-7);
    --navbar_private_balance_text_color: var(--color-id-14);
    --navbar_private_balance_background_color: var(--color-id-18);
    --navbar_private_balance_box_shadow: none;
    --navbar_public_box_shadow: 0px 2px 4px 0px var(--color-id-7);
    --navbar_public_items_text_color: var(--color-id-20);
    --navbar_public_items_border_color: transparent;
    --navbar_public_background_color: var(--color-id-1);
    --navbar_public_items_active_border_color: transparent;
    --navbar_public_items_hover_text_color: var(--color-id-18);
    --navbar_public_items_hover_background_color: transparent;
    --navbar_public_items_active_text_color: var(--color-id-18);
    --navbar_public_items_active_background_color: transparent;
}

.wrapper-navbar {
    --public-navbar-height: 64px;
}

.wrapper-sidebar-navbar .wrapper-content {
    padding-top: 64px;
}

.wrapper-navbar .component_navbar_sub {
    height: 64px;
}

+.component_navbar_sub {
    height: 64px;
}

+.wrapper-content {
    padding-top: 64px;
}

.component-sidebar__menu-logo {
    height: 64px;
}

.sidebar-block__left-menu {
    padding-bottom: 64px !important;
}

.navbar-nav-currencies {
    color: var(--navbar_private_items_text_color);
    font-size: null;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.component-navbar-public__wrapper {
    height: 64px;
}

.component-navbar-private__wrapper {
    height: 64px;
}

.component-navbar-public-brand a {
    text-decoration: none;
    color: #78889b;
}

.component-navbar-private__wrapper .sidebar-block__top-brand {
    display: none;
}

.component-navbar-logo {
    display: flex;
}

.component-navbar-logo a {
    display: flex;
    width: inherit;
}

.component-navbar-nav-item {
    position: relative;
}

.component-navbar-public-nav-item {}

.component-navbar-private-nav-item {
    height: 64px;
}

.component-navbar-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 100%;
    font-size: null;
    font-weight: 600;
}

.component-navbar-nav-link .badge {
    margin-left: 6px;
    margin-right: 6px;
}

.component-navbar-nav-link .component-navbar-nav-link-icon {
    display: flex;
    min-width: 26px;
    padding: 0px 3px;
}

.component-navbar-nav-link__navbar-private {
    color: var(--navbar_private_items_text_color) !important;
    background: var(--navbar_private_background_color);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.component-navbar-nav-link__navbar-private:hover {
    color: var(--navbar_private_items_hover_text_color) !important;
    background: var(--navbar_private_items_hover_background_color);
    text-decoration: none;
}

.component-navbar-nav-link-active__navbar-private {
    color: var(--navbar_private_items_active_text_color) !important;
    background: var(--navbar_private_items_active_background_color);
}

.component-navbar-nav-link-active__navbar-private:hover {
    color: var(--navbar_private_items_active_text_color) !important;
    background: var(--navbar_private_items_active_background_color);
}

.component-navbar-nav-link-active__navbar-private:focus {
    color: var(--navbar_private_items_active_text_color) !important;
    background: var(--navbar_private_items_active_background_color);
}

.component-navbar-nav-link__navbar-public {
    color: var(--navbar_public_items_text_color) !important;
    background: var(--navbar_public_items_background_color);
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-style: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.component-navbar-nav-link__navbar-public:hover {
    color: var(--navbar_public_items_hover_text_color) !important;
    background: var(--navbar_public_items_hover_background_color);
    text-decoration: none;
}

.component-navbar-nav-link__navbar-public:focus {
    color: var(--navbar_public_items_hover_text_color) !important;
    background: var(--navbar_public_items_hover_background_color);
    text-decoration: none;
}

.component-navbar-nav-link-active__navbar-public {
    color: var(--navbar_public_items_active_text_color) !important;
    background: var(--navbar_public_items_active_background_color);
}

.component-navbar-nav-link-active__navbar-public:hover {
    color: var(--navbar_public_items_active_text_color) !important;
    background: var(--navbar_public_items_active_background_color);
}

.component-navbar-nav-link-active__navbar-public:focus {
    color: var(--navbar_public_items_active_text_color) !important;
    background: var(--navbar_public_items_active_background_color);
}

.component-navbar-public {
    height: 64px;
    box-shadow: var(--navbar_public_box_shadow);
}

.component-navbar-private {
    height: 64px;
    box-shadow: var(--navbar_private_box_shadow);
}

.component-navbar__navbar-private {
    background: var(--navbar_private_background_color);
    box-shadow: var(--navbar_private_box_shadow);
}

.component-navbar__navbar-public {
    width: 100%;
    background: var(--navbar_public_background_color);
    box-shadow: var(--navbar_public_box_shadow);
}

.component-navbar-balance-wrap__navbar-private {
    padding-top: 0px;
    padding-bottom: 0px;
}

.component-navbar-balance-item__navbar-private {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    font-weight: 600;
    font-style: normal;
    color: var(--navbar_private_balance_text_color) !important;
    background: var(--navbar_private_balance_background_color);
    padding-left: 16px;
    padding-right: 16px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: var(--navbar_private_balance_box_shadow);
}

.component-navbar-balance-item__navbar-private:hover {
    color: var(--navbar_private_balance_text_color) !important;
    text-decoration: none;
}

.component-navbar-private-brand {
    color: var(--navbar_private_items_text_color);
    font-size: 0px;
}

.component-navbar-public-brand {
    color: var(--navbar_public_items_text_color);
}

.component-navbar__navbar-private .navbar {
    height: 64px;
}

.component-navbar__navbar-public .navbar {
    height: 64px;
}

.component-navbar__navbar-public-padding .navbar {
    padding-top: 24px;
    padding-bottom: 24px;
}

.navbar-burger {
    position: relative;
}

.navbar-light .navbar-toggler {
    border: none;
    outline: none;
    position: relative;
}

.navbar-burger-line {
    display: block;
    height: 2px;
    width: 24px;
    position: relative;
}

.navbar-burger-line:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: -7px;
    height: 2px;
    width: 24px;
}

.navbar-burger-line:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 7px;
    height: 2px;
    width: 24px;
}

.component-navbar__navbar-public .navbar-burger-line:before {
    background: var(--navbar_public_items_text_color);
}

.component-navbar__navbar-private .navbar-burger-line:before {
    background: var(--navbar_private_items_text_color);
}

.component-navbar__navbar-private .navbar-burger-line:after {
    background: var(--navbar_private_items_text_color);
}

.component-navbar__navbar-public .navbar-burger-line:after {
    background: var(--navbar_public_items_text_color);
}

.component-navbar__navbar-public .navbar-burger-line {
    background: var(--navbar_public_items_text_color);
}

.component-navbar__navbar-private .navbar-burger-line {
    background: var(--navbar_private_items_text_color);
}

.navbar-nav {
    padding-right: 0px;
    margin-top: 0px;
}

.component-navbar-collapse-divider {
    height: 1px;
    width: 100%;
    display: none;
    opacity: 0.2;
}

.component-navbar__navbar-private .component-navbar-collapse-divider {
    background: var(--navbar_private_items_text_color);
}

.component-navbar__navbar-public .component-navbar-collapse-divider {
    background: var(--navbar_public_items_text_color);
}

.navbar-dropdown {
    position: relative;
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 4px;
}

.navbar-dropdown__container {
    position: absolute;
    padding: 0px;
    margin: 0px;
    top: 100%;
    background: undefined;
    min-width: 100%;
    border-top-left-radius: undefined;
    border-top-right-radius: undefined;
    border-bottom-left-radius: undefined;
    border-bottom-right-radius: undefined;
    border-color: undefined;
    box-shadow: undefined;
    border-style: undefined;
    border-left-width: undefined;
    border-right-width: undefined;
    border-top-width: undefined;
    border-bottom-width: undefined;
}

.navbar-dropdown__item {
    list-style: none;
}

.navbar-dropdown__link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: undefined;
    background: undefined;
    padding-top: undefined;
    padding-bottom: undefined;
    padding-left: undefined;
    padding-right: undefined;
}

.navbar-dropdown__link:hover {
    color: undefined;
    background: undefined;
    text-decoration: none;
}

.component-navbar-public-brand h1,
.component-navbar-public-brand h2,
.component-navbar-public-brand h3,
.component-navbar-public-brand h4,
.component-navbar-public-brand h5,
.component-navbar-public-brand h6 {
    margin-bottom: 0px;
}

.component-navbar-public-brand>*:first-child {
    width: 100%;
}

.component-sidebar__menu-brand h1,
.component-sidebar__menu-brand h2,
.component-sidebar__menu-brand h3,
.component-sidebar__menu-brand h4,
.component-sidebar__menu-brand h5,
.component-sidebar__menu-brand h6 {
    margin-bottom: 0px;
}

.component-sidebar__menu-brand>*:first-child {
    width: 100%;
}

@media (max-width: 991px) {
    .component-navbar-private__wrapper-sticky {
        height: 64px !important;
    }
    .component-navbar-logo {
        width: inherit;
    }
    .sidebar-block__top-logo {
        max-height: 64px;
    }
    .component-navbar__navbar-public .navbar {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        min-height: 64px;
        padding: 0px 1rem;
    }
    .component-navbar__navbar-private .navbar {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        padding: 0px 1rem;
    }
    .component-navbar__navbar-private .navbar .navbar-private__header {
        min-height: 64px;
    }
    .component-navbar__navbar-public .navbar .navbar-public__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 64px;
    }
    .component-navbar-private__wrapper {
        height: auto;
    }
    +.wrapper-content {
        padding-top: 0px;
    }
    .component-navbar__navbar-public .navbar-collapse {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        background: none;
    }
    .component-navbar__navbar-private .navbar-collapse {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        background: none;
    }
    .component-navbar__navbar-private .component-navbar-collapse {
        flex-wrap: wrap;
    }
    .component-navbar__navbar-private .component-navbar-private-nav-item {
        height: auto;
    }
    .component-navbar-collapse {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .component-navbar-collapse-divider {
        display: none;
    }
    .component-navbar-nav-link {
        width: 100%;
        justify-content: flex-start;
    }
    .navbar-nav {
        width: 100%;
    }
    .component-navbar-private__wrapper .sidebar-block__top-brand {
        display: block;
    }
    .component-navbar-private-brand {
        font-size: unset;
    }
    .navbar {
        flex-flow: row;
    }
    .navbar-nav-currencies {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

:root {
    --sidebar_box_shadow: none;
    --sidebar_border_color: transparent;
    --sidebar_items_text_color: var(--color-id-14);
    --sidebar_items_border_color: transparent;
    --sidebar_background_color: var(--color-id-15);
    --sidebar_brand_text_color: var(--color-id-20);
    --sidebar_brand_background_color: var(--color-id-1);
    --sidebar_items_hover_text_color: var(--color-id-5);
    --sidebar_items_hover_background_color: transparent;
    --sidebar_items_hover_border_color: transparent;
    --sidebar_items_active_text_color: var(--color-id-18);
    --sidebar_items_active_background_color: var(--color-id-1);
    --sidebar_items_active_border_color: transparent;
}

.component-sidebar_wrapper {
    flex-basis: 250px;
    width: 250px;
}

.component-sidebar {
    background: var(--sidebar_background_color);
    width: 250px;
    box-shadow: var(--sidebar_box_shadow);
    border-color: var(--sidebar_border_color);
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-style: none;
}

.component-navbar__navbar-private {
    --navbar-margin: 250px;
    width: calc(100% - var(--navbar-margin) - var(--editor-sidebar));
}

.component-sidebar__menu {
    max-height: calc(100vh);
    overflow-y: auto;
}

.component-sidebar__menu .sidebar-block__left-menu {
    padding-top: 32px;
    padding-left: 0px;
    padding-right: 0px;
}

.component-sidebar__menu-logo {
    display: flex;
    justify-content: flex-start;
    color: var(--sidebar_brand_text_color);
}

.component-sidebar__menu-logo a {
    color: var(--sidebar_brand_text_color);
}

.component-sidebar__menu .component-navbar-logo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin-left: 16px;
    margin-right: 16px;
}

.component-sidebar__menu-brand {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    color: var(--sidebar_brand_text_color);
    user-select: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.component-sidebar__menu-brand a {
    text-decoration: none;
}

.component-sidebar__menu-item {
    list-style: none;
}

.component-sidebar__menu-item-link {
    display: flex;
    align-items: center;
    word-break: break-all;
    font-size: null;
    font-weight: 600;
    font-style: normal;
    color: var(--sidebar_items_text_color) !important;
    background: transparent;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: var(--sidebar_items_border_color);
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-style: solid;
    text-decoration: none;
}

.component-sidebar__menu-item-link .badge {
    margin-left: auto;
}

.sidebar-rtl .component-sidebar__menu-item-link .badge {
    margin-left: 0px !important;
    margin-right: auto;
}

.component-sidebar__menu-item-link:hover {
    color: var(--sidebar_items_hover_text_color) !important;
    background: var(--sidebar_items_hover_background_color);
    border-color: var(--sidebar_items_hover_border_color);
    text-decoration: none;
}

.component-sidebar__menu-item-active .component-sidebar__menu-item-link {
    color: var(--sidebar_items_active_text_color) !important;
    background: var(--sidebar_items_active_background_color);
    border-color: var(--sidebar_items_active_border_color);
    font-weight: bold;
}

.component_private_navbar .component-sidebar__menu-logo {
    background: var(--sidebar_brand_background_color);
}

@media (max-width: 991px) {
    .component-navbar__navbar-private {
        width: 100%;
    }
    .sidebar-block__top-logo {
        --sidebar-width: 250px;
        max-width: calc(var(--sidebar-width) - 40px);
    }
    .component-sidebar_wrapper {
        display: none;
    }
}

:root {
    --form_group_input_background_color: var(--color-id-9);
    --form_group_input_text_color: var(--color-id-20);
    --form_group_input_border_color: var(--color-id-12);
    --form_group_input_box_shadow: none;
    --form_group_input_focus_background_color: var(--color-id-6);
    --form_group_input_focus_text_color: var(--color-id-20);
    --form_group_input_focus_border_color: var(--color-id-12);
    --form_group_input_label_text_color: var(--color-id-20);
    --form_group_input_small_text_color: var(--color-id-20);
    --form_group_dropdown_box_shadow: 0px 8px 24px 0px var(--color-id-7);
    --form_group_dropdown_border_color: var(--color-id-7);
    --form_group_dropdown_items_background_color: var(--color-id-1);
    --form_group_dropdown_items_text_color: var(--color-id-20);
    --form_group_dropdown_items_active_text_color: var(--color-id-18);
    --form_group_dropdown_items_active_background_color: transparent;
    --form_group_dropdown_items_hover_background_color: var(--color-id-18);
    --form_group_dropdown_items_hover_text_color: var(--color-id-14);
    --form_group_icon_color: var(--color-id-20);
    --form_group_search_placeholder: var(--color-id-20);
}

textarea {
    resize: none;
}

.form-control {
    background-color: var(--form_group_input_background_color) !important;
    border-color: var(--form_group_input_border_color);
    color: var(--form_group_input_text_color);
    font-size: null;
    font-weight: inherit;
    height: 48px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-style: solid;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: var(--form_group_input_box_shadow);
    outline: none;
}

.form-group input:read-only {
    opacity: 0.5;
}

.form-group input:read-only:focus {
    background-color: var(--form_group_input_background_color) !important;
    border-color: var(--form_group_input_border_color);
    color: var(--form_group_input_text_color);
}

.form-group input:-moz-read-only {
    opacity: 0.5;
}

.form-group input:disabled {
    opacity: 0.5;
}

.form-control:focus {
    background-color: var(--form_group_input_focus_background_color) !important;
    border-color: var(--form_group_input_focus_border_color);
    color: var(--form_group_input_focus_text_color);
    box-shadow: none;
    outline: none;
}

textarea.form-control {
    height: 160px;
}

.form-group label {
    font-weight: 700;
    font-style: normal;
    color: var(--form_group_input_label_text_color);
    font-size: null;
    margin-bottom: 4px;
}

.form-group small {
    display: block;
    color: var(--form_group_input_small_text_color);
    font-size: 0.9rem;
    margin-top: 4px;
}

select.form-control:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 12px top 50%, 0 0;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
}

.input-group .form-control {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.input-group-prepend .btn {
    z-index: inherit;
}

.input-group-append .btn {
    z-index: inherit;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-btn .btn {
    z-index: inherit;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.form-group-rtl select.form-control:not([multiple]) {
    background-position: left 18px top 50%, 0 0;
}

.form-group-rtl .form-group {
    text-align: right;
}

.form-group-rtl .form-group label {
    text-align: right;
}

.form-group-rtl .form-group small {
    text-align: right;
}

.form-group-rtl .input-group .form-control {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.form-group-rtl .input-group-append .btn {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 8px !important;
    border-top-left-radius: 8px !important;
}

.form-group-rtl .input-group-btn .btn {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 8px !important;
    border-top-left-radius: 8px !important;
}

.form-group-rtl .dropdown-menu {
    right: 0px !important;
    transform: none !important;
    top: 100% !important;
    text-align: start !important;
}

.form-group-rtl .dropdown-toggle {
    text-align: right !important;
}

.form-group-rtl .dropdown-toggle::after {
    margin-right: 0.255em;
    margin-left: 0px !important;
}

.form-group-rtl .select2-container {
    left: auto !important;
}

.form-group-rtl .bootstrap-datetimepicker-widget.dropdown-menu {
    inset: inherit !important;
}

.form-group-rtl .bootstrap-datetimepicker-widget .list-unstyled {
    padding-right: 0px;
}

.select2-container .select2-selection--single {
    height: 48px;
}

.form-group .select2-container .dropdown-menu {
    padding: 0px;
    margin: 0px;
}

.form-group .select2-container--open .dropdown-menu {
    background-color: var(--form_group_dropdown_items_background_color);
    color: var(--form_group_dropdown_items_text_color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-group .select2-container--open .select2-dropdown {
    margin-top: 8px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: var(--form_group_dropdown_border_color);
    border-style: solid;
    box-shadow: var(--form_group_dropdown_box_shadow);
    overflow: hidden;
}

.form-group .select2-search__field {
    padding-left: 2.3rem;
}

.form-group .select2-results__option a {
    font-weight: inherit;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--form_group_dropdown_items_text_color);
    background-color: var(--form_group_dropdown_items_background_color);
    text-decoration: none;
}

.form-group .select2-results__option {
    font-weight: inherit;
    font-size: null;
}

.form-group .select2-results__option.active a {
    color: var(--form_group_dropdown_items_active_text_color);
    background-color: var(--form_group_dropdown_items_background_color);
    text-decoration: none;
}

.form-group .select2-results__option a:hover {
    color: var(--form_group_dropdown_items_hover_text_color);
    background-color: var(--form_group_dropdown_items_hover_background_color);
    text-decoration: none;
}

.form-group .select2-results__option.active a:hover {
    color: var(--form_group_dropdown_items_hover_text_color);
    background-color: var(--form_group_dropdown_items_hover_background_color);
    text-decoration: none;
}

.form-group .select2-dropdown,
.select2-results__options {
    padding-top: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: 408px !important;
}

.form-group .select2-results__options {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.form-group .select2-container--open .select2-selection--single {
    background-color: var(--form_group_input_focus_background_color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-group .select2-selection--single {
    display: flex;
    align-items: center;
}

.form-group .select2-search__field-icon {
    padding-left: 0.6em;
    color: var(--form_group_input_text_color);
    display: flex;
    align-items: center;
}

.form-group .select2-selection__id {
    vertical-align: middle;
}

.form-group .select2-search--dropdown {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-top: 6px;
}

.form-group .select2-selection__arrow b {
    border-top-color: var(--form_group_input_text_color);
}

.form-group .select2-container--open .select2-selection__arrow b {
    border-bottom-color: var(--form_group_input_text_color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: inherit;
}

.form-group .files-wrapper .files-label {
    color: var(--form_group_input_label_text_color);
}

.form-group .search-dropdown .input-wrapper {
    position: relative;
    --form-group-search-paddings: 12px;
    --form-group-border-width-right: 0px;
    --form-group-border-width-left: 0px;
}

.form-group .search-dropdown .input-wrapper .form-control {
    padding-left: calc(var(--form-group-search-paddings) + 28px);
    padding-right: calc(var(--form-group-search-paddings) + 14px);
}

.form-group .search-dropdown .input-wrapper .input-wrapper__prepend,
.form-group .search-dropdown .input-wrapper .input-wrapper__append {
    position: absolute;
    background: none;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px 2px;
    color: var(--form_group_icon_color);
}

.form-group .search-dropdown .input-wrapper .input-wrapper__prepend:hover,
.form-group .search-dropdown .input-wrapper .input-wrapper__append:hover {
    opacity: 0.5;
}

.form-group .search-dropdown .input-wrapper .input-wrapper__prepend {
    left: var(--form-group-search-paddings);
}

.form-group .search-dropdown .input-wrapper .input-wrapper__append {
    font-size: 12px;
    right: 16px;
}

.form-group .search-dropdown .input-wrapper .form-control::placeholder {
    color: var(--form_group_search_placeholder);
}

.form-group .search-dropdown .input-wrapper .form-control::-webkit-input-placeholder {
    color: var(--form_group_search_placeholder);
}

.form-group .search-dropdown .input-wrapper .form-control::-moz-placeholder {
    color: var(--form_group_search_placeholder);
}

.form-group .search-dropdown .input-wrapper .form-control::-ms-input-placeholder {
    color: var(--form_group_search_placeholder);
}

.form-group-rtl .search-dropdown .input-wrapper .form-control {
    padding-right: calc(var(--form-group-search-paddings) + 28px);
    padding-left: calc(var(--form-group-search-paddings) + 14px);
}

.form-group-rtl .search-dropdown .input-wrapper .input-wrapper__prepend {
    left: auto;
    right: var(--form-group-search-paddings);
}

.form-group-rtl .search-dropdown .input-wrapper .input-wrapper__append {
    right: auto;
    left: 16px;
}

:root {
    --services_description_background_color: var(--color-id-9);
    --services_description_border_color: var(--color-id-12);
    --services_description_text_color: var(--color-id-20);
    --services_description_box_shadow: none;
}

.panel-description {
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 16px;
    padding-bottom: 16px;
    color: var(--services_description_text_color);
    font-size: null;
    border-color: var(--services_description_border_color);
    background: var(--services_description_background_color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-style: solid;
    box-shadow: var(--services_description_box_shadow);
}

:root {
    --checkbox_radio_text_color: var(--color-id-14);
    --checkbox_radio_checked_background_color: var(--color-id-18);
    --checkbox_radio_unchecked_background_color: var(--color-id-9);
}

.form-group__checkbox {
    display: block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: -ms-user-select;
    user-select: none;
}

.form-group__checkbox label {
    margin-bottom: 0px;
    font-weight: 600;
    font-style: normal;
}

.form-group__checkbox-label {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    position: relative;
    vertical-align: middle;
}

.form-group__label-title {
    position: relative;
    vertical-align: middle;
}

.form-group__checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    font-size: 16px;
    width: 16px;
    height: 16px;
    background: var(--checkbox_radio_unchecked_background_color);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.form-group__checkbox:hover input~.checkmark {
    background: var(--checkbox_radio_unchecked_background_color);
}

.form-group__checkbox input:checked~.checkmark {
    background: var(--checkbox_radio_checked_background_color);
}

.form-group__checkbox:after {
    content: ' ';
    position: absolute;
    display: none;
}

.form-group__checkbox input:checked~.checkmark:after {
    content: "\f00c";
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    width: 16px;
    height: 16px;
    font-size: 0.7em;
}

.form-group__checkbox .checkmark:after {
    color: var(--checkbox_radio_text_color);
}

.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: var(--checkbox_radio_unchecked_background_color);
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
}

.form-group__checkbox:hover input~.radiomark {
    background: var(--checkbox_radio_unchecked_background_color);
}

.form-group__checkbox input:checked~.radiomark {
    background: var(--checkbox_radio_checked_background_color);
}

.form-group__checkbox input:checked~.radiomark:after {
    content: " ";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transform: scale(0.5);
    border-color: var(--checkbox_radio_checked_background_color);
    border-style: solid;
    background: var(--checkbox_radio_text_color);
}

.form-group__checkbox .radiomark:after {
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    color: var(--checkbox_radio_text_color);
}

.form-group__checkbox-rtl .form-group__checkbox-label {
    margin-right: 0px;
    margin-left: 8px;
}

@media (max-width: 768px) {
    .form-group__label-title {
        display: inline;
        vertical-align: inherit;
    }
}

:root {
    --alert_success_text_color: var(--color-id-3);
    --alert_success_background_color: var(--color-id-19);
    --alert_success_border_color: transparent;
    --alert_danger_text_color: var(--color-id-10);
    --alert_danger_background_color: var(--color-id-17);
    --alert_danger_border_color: transparent;
    --alert_info_text_color: var(--color-id-2);
    --alert_info_background_color: var(--color-id-11);
    --alert_info_border_color: transparent;
}

.alert {
    margin-bottom: 0px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
    font-size: null;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-style: none;
}

.alert-info {
    color: var(--alert_info_text_color);
    background: var(--alert_info_background_color);
    border-color: var(--alert_info_border_color);
}

.alert-success {
    color: var(--alert_success_text_color);
    background: var(--alert_success_background_color);
    border-color: var(--alert_success_border_color);
}

.alert-success h4 {
    color: var(--alert_success_text_color);
}

.alert-danger {
    color: var(--alert_danger_text_color) !important;
    background: var(--alert_danger_background_color);
    border: 1px dashed  var(--alert_danger_border_color) !important;
    border-color: var(--alert_danger_border_color);
}

.alert .close {
    height: 100%;
    padding: 0px 12px;
    font-size: 16px;
    outline: none;
}

.alert-danger .close:hover {
    color: var(--alert_danger_text_color);
}

.alert-success .close:hover {
    color: var(--alert_success_text_color);
}

.alert-info .close:hover {
    color: var(--alert_info_text_color);
}

.alert-rtl .alert {
    text-align: right;
}

:root {
    --card_background_color: var(--color-id-1);
    --card_text_color: var(--text-dark);
    --card_border_color: transparent;
    --card_box_shadow: 0px 2px 4px 0px var(--color-id-7);
}

.card {
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    border-color: var(--card_border_color);
    background: var(--card_background_color);
    color: var(--card_text_color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: none;
    box-shadow: var(--card_box_shadow);
}

:root {
    --badge_primary_text_color: var(--color-id-14);
    --badge_primary_background_color: var(--color-id-18);
    --badge_primary_box_shadow: none;
    --badge_secondary_text_color: var(--color-id-14);
    --badge_secondary_background_color: var(--color-id-5);
    --badge_secondary_box_shadow: none;
    --badge_danger_text_color: var(--color-id-14);
    --badge_danger_background_color: var(--color-id-10);
    --badge_danger_box_shadow: transparent;
    --badge_warning_text_color: var(--color-id-14);
    --badge_warning_background_color: var(--color-id-4);
    --badge_warning_box_shadow: none;
}

.badge {
    font-weight: 700;
    font-style: normal;
    font-size: null;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.badge-primary {
    color: var(--badge_primary_text_color);
    background: var(--badge_primary_background_color);
    box-shadow: var(--badge_primary_box_shadow);
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.badge-secondary {
    color: var(--badge_secondary_text_color);
    background: var(--badge_secondary_background_color);
    box-shadow: var(--badge_secondary_box_shadow);
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.badge-danger {
    color: var(--badge_danger_text_color);
    background: var(--badge_danger_background_color);
    box-shadow: var(--badge_danger_box_shadow);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.badge-warning {
    color: var(--badge_warning_text_color);
    background: var(--badge_warning_background_color);
    box-shadow: var(--badge_warning_box_shadow);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

:root {
    --tabs_text_color: var(--color-id-18);
    --tabs_background_color: transparent;
    --tabs_border_color: transparent;
    --tabs_hover_text_color: var(--color-id-21);
    --tabs_hover_background_color: transparent;
    --tabs_hover_border_color: transparent;
    --tabs_active_text_color: var(--color-id-14);
    --tabs_active_background_color: var(--color-id-18);
    --tabs_active_border_color: var(--color-id-16);
}

.tab {
    padding: 0px;
}

.tab .nav-item {
    margin-right: 4px;
}

.tab .nav-item .nav-link {
    font-size: null;
    font-weight: 600;
    font-style: normal;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--tabs_text_color);
    background: var(--tabs_background_color);
    border-color: var(--tabs_border_color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
}

.tab .nav-item .active {
    font-size: null;
    letter-spacing: null;
    color: var(--tabs_active_text_color);
    background: var(--tabs_active_background_color);
    border-color: var(--tabs_active_border_color);
}

.tab .nav-item .nav-link:not(.active):hover {
    color: var(--tabs_hover_text_color);
    background: var(--tabs_hover_background_color);
    border-color: var(--tabs_hover_border_color);
    text-decoration: none;
}

@media (max-width: 768px) {
    .tab .nav-item {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 4px;
    }
    .tab-rtl .tab .nav-item {
        text-align: right;
    }
}

:root {
    --table_box_shadow: 0px 2px 4px 0px var(--color-id-7);
    --table_thead_text_color: var(--color-id-20);
    --table_thead_background_color: var(--color-id-6);
    --table_tbody_text_color: var(--color-id-20);
    --table_tbody_background_odd_color: transparent;
    --table_tbody_background_even_color: transparent;
    --table_tbody_background_color: var(--color-id-1);
    --table_tbody_border_color: var(--color-id-9);
}

.table-wr {
    box-shadow: var(--table_box_shadow);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.table {
    margin-bottom: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--table_tbody_background_color);
}

.table .nowrap {
    white-space: nowrap;
}

.table thead {}

.table thead tr th .form-control {
    font-weight: 400;
}

.table thead tr th {
    font-size: null;
    border-bottom: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 7px;
    padding-right: 7px;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    height: 40px;
    color: var(--table_thead_text_color);
    background: var(--table_thead_background_color);
}

.table__header-none {
    background: var(--table_tbody_background_color) !important;
}

.table tbody tr td {
    font-size: null !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 7px;
    padding-right: 7px;
    vertical-align: middle;
    height: 40px;
    color: var(--table_tbody_text_color);
    background: var(--table_tbody_background_color);
    border-color: var(--table_tbody_border_color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--table_tbody_border_color);
}

.table tbody tr td:first-child {
    padding-left: 16px;
}

.table tbody tr td:last-child {
    padding-right: 16px;
}

.table thead tr th:first-child {
    padding-left: 16px;
    border-top-left-radius: 8px;
}

.table thead tr th:last-child {
    padding-right: 16px;
    border-top-right-radius: 8px;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:first-child td {
    border-top: 0px;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.table tbody tr:nth-child(even) td {
    background: var(--table_tbody_background_even_color);
}

.table tbody tr:nth-child(odd) td {
    background: var(--table_tbody_background_odd_color);
}

.table-rtl .table thead tr th:first-child {
    padding-left: 7px;
    padding-right: 16px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 8px;
}

.table-rtl .table thead tr th:last-child {
    padding-right: 7px;
    padding-left: 16px;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 8px;
}

.table-rtl .table tbody tr td:first-child {
    padding-left: 7px !important;
    padding-right: 16px !important;
}

.table-rtl .table tbody tr td:last-child {
    padding-left: 16px !important;
    padding-right: 7px !important;
}

.table-rtl .table tbody tr td {
    text-align: right;
}

.table-rtl .table thead tr th {
    text-align: right;
}

.table-rtl .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 8px;
}

.table-rtl .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 8px;
}

.table-responsive .table-service {
    min-width: 120px;
    max-width: 650px;
    word-break: break-all;
}

.table-responsive .table-link {
    min-width: 120px;
    max-width: 650px;
    word-break: break-all;
}

@media (max-width: 991px) {
    .table-responsive thead tr th {
        white-space: nowrap;
    }
    .table-responsive .table-link {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .table-responsive-classic {
        border: 0;
        box-shadow: none;
    }
    .table-responsive-classic thead {
        border: none;
        height: : 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0px;
        position: absolute;
        display: none;
    }
    .table-responsive-classic tbody tr {
        display: block;
    }
    .table-responsive-classic tbody tr:last-child {
        margin-bottom: 0px;
    }
    .table-responsive-classic tbody td {
        display: block;
        text-align: right;
    }
    .table-responsive-classic tbody tr td {
        min-height: 40px;
        height: auto;
        border-bottom-width: 0px !important;
        word-break: break-all;
    }
    .table-rtl .table-responsive-classic tbody tr td {
        text-align: right;
        display: flex;
    }
    .table-responsive-classic tbody tr:first-child td {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: var(--table_tbody_border_color);
    }
    .table-responsive-classic td::before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        padding-right: 8px;
    }
    .table-rtl .table-responsive-classic td::before {
        float: right;
        padding-left: 8px;
        white-space: nowrap;
    }
    .table-responsive-classic td:last-child {
        border-bottom: 0px;
    }
    .table-responsive-classic tbody tr td:first-child {
        padding-left: 7px;
    }
    .table-rtl .table-responsive-classic tbody tr td:first-child {
        padding-right: 7px;
    }
    .table-responsive-classic tbody tr td:last-child {
        padding-right: 7px;
    }
    .table-rtl .table-responsive-classic tbody tr td:last-child {
        padding-left: 7px;
    }
    .table-responsive-classic tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    .table-responsive-classic tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
}

@media (max-width: 768px) {
    .table-responsive .table-service {
        min-width: 310px;
    }
}

:root {
    --pagination_box_shadow: none;
    --pagination_text_color: var(--color-id-18);
    --pagination_background_color: transparent;
    --pagination_border_color: transparent;
    --pagination_hover_text_color: var(--color-id-21);
    --pagination_hover_background_color: transparent;
    --pagination_hover_border_color: transparent;
    --pagination_active_text_color: var(--color-id-14);
    --pagination_active_background_color: var(--color-id-18);
    --pagination_active_border_color: var(--color-id-16);
}

.pagination {
    margin-bottom: 0px;
    padding: 0px;
}

.pagination .pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0px;
    font-size: null;
    width: 2em;
    height: 2em;
    background: var(--pagination_background_color);
    margin-right: 6px;
    border-color: var(--pagination_border_color);
    border-style: solid;
    color: var(--pagination_text_color) !important;
    box-shadow: var(--pagination_box_shadow);
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
}

.pagination .pagination-item__active .pagination-link {
    font-weight: 600;
    font-style: normal;
    background: var(--pagination_active_background_color);
    border-color: var(--pagination_active_border_color);
    color: var(--pagination_active_text_color) !important;
    text-decoration: none;
}

.pagination .pagination-item:not(.pagination-item__active):hover .pagination-link {
    background: var(--pagination_hover_background_color);
    border-color: var(--pagination_hover_border_color);
    color: var(--pagination_hover_text_color) !important;
    text-decoration: none;
}

.pagination-rtl .pagination .pagination-link {
    margin-right: 0px;
    margin-left: 6px;
}

:root {
    --ticket_dialog_admin_box_shadow: none;
    --ticket_dialog_admin_text_color: var(--color-id-20);
    --ticket_dialog_admin_username_text_color: var(--color-id-20);
    --ticket_dialog_admin_background_color: var(--color-id-12);
    --ticket_dialog_admin_border_color: transparent;
    --ticket_dialog_user_box_shadow: transparent;
    --ticket_dialog_user_text_color: var(--color-id-20);
    --ticket_dialog_user_username_text_color: var(--color-id-20);
    --ticket_dialog_user_background_color: var(--color-id-9);
    --ticket_dialog_user_border_color: transparent;
}

.ticket-dialog__row {
    margin-bottom: 16px;
    font-size: null;
}

.ticket-dialog__row-message {
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    border-color: #000000;
    background: #ffffff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-style: none;
}

.ticket-dialog__row-bottom {
    display: flex;
    align-items: center;
    font-size: 0.75em;
}

.ticket-dialog__row-bottom-name {
    font-weight: bold;
}

.ticket-dialog__row-bottom-date {}

.ticket-dialog__row-admin {
    padding-right: 50px;
}

.ticket-dialog__row-user {
    padding-left: 50px;
}

.ticket-dialog__row-admin .ticket-dialog__row-message {
    color: var(--ticket_dialog_admin_text_color);
    background: var(--ticket_dialog_admin_background_color);
    border-color: var(--ticket_dialog_admin_border_color);
    box-shadow: var(--ticket_dialog_admin_box_shadow);
}

.ticket-dialog__row-admin .ticket-dialog__row-message blockquote {
    border-left: 3px solid var(--ticket_dialog_admin_text_color);
    padding: 2px 8px;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.ticket-dialog__row-admin .ticket-dialog__row-message hr {
    border-top: 1px solid var(--ticket_dialog_admin_text_color);
}

.ticket-dialog__row-admin .ticket-dialog__row-message p {
    white-space: pre-wrap;
}

.ticket-dialog__row-admin .ticket-dialog__row-message li {
    white-space: pre-wrap;
}

.ticket-dialog__row-user .ticket-dialog__row-message blockquote {
    border-left: 3px solid var(--ticket_dialog_user_text_color);
    padding: 2px 8px;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.ticket-dialog__row-user .ticket-dialog__row-message hr {
    border-top: 1px solid var(--ticket_dialog_user_text_color);
}

.ticket-dialog__row-user .ticket-dialog__row-message p {
    white-space: pre-wrap;
}

.ticket-dialog__row-user .ticket-dialog__row-message li {
    white-space: pre-wrap;
}

.ticket-dialog__row-admin .ticket-dialog__row-bottom {
    color: var(--ticket_dialog_admin_username_text_color);
}

.ticket-dialog__row-admin .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name {
    padding-right: 7px;
}

.ticket-dialog__row-user .ticket-dialog__row-message {
    text-align: left;
    color: var(--ticket_dialog_user_text_color);
    background: var(--ticket_dialog_user_background_color);
    border-color: var(--ticket_dialog_user_border_color);
    box-shadow: var(--ticket_dialog_user_box_shadow);
}

.ticket-dialog__row-user .ticket-dialog__row-bottom {
    justify-content: flex-end;
    text-align: right;
    color: var(--ticket_dialog_user_username_text_color);
}

.ticket-dialog__row-user .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name {
    padding-right: 7px;
}

.ticket-dialog-rtl .ticket-dialog__row-admin {
    padding-left: 50px;
    padding-right: 0px;
}

.ticket-dialog-rtl .ticket-dialog__row-user {
    padding-right: 50px;
    padding-left: 0px;
}

.ticket-dialog-rtl .ticket-dialog__row-admin .ticket-dialog__row-message {
    text-align: right;
}

.ticket-dialog-rtl .ticket-dialog__row-user .ticket-dialog__row-message {
    text-align: right;
}

.ticket-dialog-rtl .ticket-dialog__row-admin .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name {
    padding-right: 0px;
    padding-left: 7px;
}

.ticket-dialog-rtl .ticket-dialog__row-user .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name {
    padding-right: 0px;
    padding-left: 7px;
}

:root {
    --footer_public_box_shadow: none;
    --footer_public_text_color: var(--color-id-20);
    --footer_public_background_color: var(--color-id-1);
}

.component-footer {
    position: relative;
    font-size: null;
    font-weight: 600;
    font-style: normal;
}

.component-footer__public {
    color: var(--footer_public_text_color);
    min-height: 64px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: var(--footer_public_box_shadow);
    background: var(--footer_public_background_color);
}

.component-footer__public-copyright {}

:root {
    --modal_background_color: var(--color-id-1);
    --modal_text_color: var(--text-dark);
    --modal_close_color: var(--color-id-20);
}

.modal {}

.modal .modal-content {
    border: none;
    background: var(--modal_background_color);
    color: var(--modal_text_color);
}

.modal .close {
    color: var(--modal_close_color);
}

.modal-rtl .modal-content {
    text-align: right;
}

:root {
    --code_background_color: var(--color-id-9);
    --code_text_color: var(--color-id-20);
    --code_border_color: transparent;
    --code_box_shadow: none;
}

pre {
    direction: ltr;
    unicode-bidi: bidi-override;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-weight: 300;
    background: var(--code_background_color);
    color: var(--code_text_color);
    border-color: var(--code_border_color);
    box-shadow: var(--code_box_shadow);
    border-style: solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

:root {
    --dropdown_button_text_color: var(--color-id-14);
    --dropdown_button_background_color: var(--color-id-18);
    --dropdown_button_border_color: transparent;
    --dropdown_background_color: var(--color-id-1);
    --dropdown_items_text_color: var(--color-id-20);
    --dropdown_button_hover_text_color: var(--color-id-14);
    --dropdown_button_hover_background_color: var(--color-id-21);
    --dropdown_button_hover_border_color: transparent;
    --dropdown_items_hover_text_color: var(--color-id-18);
    --dropdown_items_hover_background_color: transparent;
    --dropdown_box_shadow: 0px 8px 24px 0px var(--color-id-7);
}

.navbar-dropdown {
    position: relative;
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 4px;
    font-size: null;
}

.navbar-dropdown__editor .navbar-dropdown__container {
    visibility: hidden;
}

.navbar-dropdown__editor:hover .navbar-dropdown__container {
    visibility: visible;
}

.navbar-dropdown__name {
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dropdown_button_text_color);
    background: var(--dropdown_button_background_color);
    border-color: var(--dropdown_button_border_color);
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: null;
    font-weight: 600;
    font-style: normal;
}

.navbar-dropdown__toggle:after {
    display: inline-block;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    margin-left: 12px;
}

.navbar-dropdown.show .navbar-dropdown__name {
    color: var(--dropdown_button_hover_text_color);
    background: var(--dropdown_button_hover_background_color);
    border-color: var(--dropdown_button_hover_border_color);
    text-decoration: none;
}

.navbar-dropdown__container {
    position: absolute;
    padding: 0px;
    margin: 0px;
    top: 100%;
    background: var(--dropdown_background_color);
    min-width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-color: transparent;
    box-shadow: var(--dropdown_box_shadow);
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    overflow: hidden;
}

.navbar-dropdown__item {
    list-style: none;
}

.navbar-dropdown__link {
    display: block;
    width: 100%;
    text-decoration: none;
    font-size: 1em;
    color: var(--dropdown_items_text_color) !important;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

.navbar-dropdown__link:hover {
    color: var(--dropdown_items_hover_text_color) !important;
    background: var(--dropdown_items_hover_background_color);
    text-decoration: none;
}

.navbar-dropdown-rtl .navbar-dropdown__toggle:after {
    margin-left: 0px;
    margin-right: 12px;
}

.navbar-dropdown-rtl .navbar-dropdown__container {
    text-align: right;
}

.dropdown-item {
    text-decoration: none;
}

@media (max-width: 991px) {
    .navbar-dropdown {
        width: 100%;
        margin-top: 0px;
        padding-bottom: 0px;
    }
    .navbar-dropdown__container {
        position: relative;
        visibility: visible;
    }
    .navbar-dropdown__name {
        width: 100%;
    }
}

:root {
    --balance_dropdown_button_text_color: var(--color-id-14);
    --balance_dropdown_button_background_color: var(--color-id-18);
    --balance_dropdown_button_border_color: transparent;
    --balance_dropdown_background_color: var(--color-id-1);
    --balance_dropdown_items_text_color: var(--color-id-20);
    --balance_dropdown_button_hover_text_color: var(--color-id-14);
    --balance_dropdown_button_hover_background_color: var(--color-id-16);
    --balance_dropdown_button_hover_border_color: transparent;
    --balance_dropdown_items_hover_text_color: var(--color-id-18);
    --balance_dropdown_items_hover_background_color: transparent;
    --balance_dropdown_box_shadow: 0px 8px 24px 0px var(--color-id-7);
}

.balance-dropdown {
    position: relative;
    display: flex;
}

.balance-dropdown__editor .balance-dropdown__container {
    visibility: hidden;
}

.balance-dropdown__editor:hover .balance-dropdown__container {
    visibility: visible;
}

.balance-dropdown.show .balance-dropdown__toggle:after {
    transform: rotate(180deg);
    text-decoration: none;
}

.balance-dropdown__name {
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--balance_dropdown_button_text_color);
    background: var(--balance_dropdown_button_background_color);
    border-color: var(--balance_dropdown_button_border_color);
    box-shadow: none;
    border-style: none;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: null;
    font-weight: 400;
    font-style: normal;
}

.balance-dropdown__toggle:after {
    display: inline-block;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    margin-left: 12px;
}



.balance-dropdown__container {
    position: absolute;
    padding: 0px;
    padding-top: 4px;
    margin: 0px;
    top: 100%;
    z-index: 100;
    max-height: 360px;
    overflow-y: auto;
    background: var(--balance_dropdown_background_color);
    min-width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-color: #000000;
    box-shadow: var(--balance_dropdown_box_shadow);
    border-style: none;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.balance-dropdown__item {
    list-style: none;
}

.balance-dropdown__link {
    display: block;
    width: 100%;
    white-space: nowrap;
    font-size: null;
    text-decoration: none;
    color: var(--balance_dropdown_items_text_color) !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

.balance-dropdown__link:hover {
    color: var(--balance_dropdown_items_hover_text_color) !important;
    background: var(--balance_dropdown_items_hover_background_color);
    text-decoration: none;
}

.balance-dropdown-rtl .balance-dropdown__toggle:after {
    margin-left: 0px;
    margin-right: 12px;
}

.balance-dropdown-rtl .balance-dropdown__container {
    text-align: right;
}

.balance-dropdown-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .balance-dropdown {
        width: 100%;
        padding-bottom: 0px;
        flex-direction: column;
    }
    .balance-dropdown-container {
        width: 100%;
    }
    .balance-dropdown__container {
        position: relative;
        visibility: visible;
        display: none;
    }
    .balance-dropdown.show .balance-dropdown__container {
        display: block;
        text-decoration: none;
    }
    .balance-dropdown__name {
        width: 100%;
    }
}

#block_11 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 80px;
}

#block_11 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_11 .block-divider-bottom {
    height: 250px;
    color: var(--color-id-13);
    z-index: 0;
    transform: rotateY(180deg);
}

#block_11 .block-signin-text__block-text {
    padding-top: 48px;
}

#block_11 .g_id_signin iframe {
    margin: 0 auto !important;
}

#block_11 .block-signin-text__block-text-title {
    margin-bottom: 8px;
    padding-left: 0px;
    padding-right: 60px;
}

#block_11 .block-signin-text__block-text-description {
    padding-left: 0px;
    padding-right: 0px;
}

#block_11 .block-signin-text__sign-up-link {
    padding-left: 6px;
}

#block_11 .sign-in__forgot {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-right: 12px;
}

#block_11 .form-group {
    margin-bottom: 12px;
}

#block_11 .sign-in__remember-me {
    margin-bottom: 12px;
}

#block_11 .block-signin-text-rtl .block-signin-text__block-text {
    text-align: right;
}

#block_11 .block-signin-text-rtl .sign-in__forgot {
    right: auto;
    left: 0px;
    padding-right: 0;
    padding-left: 12px;
}

#block_11 .block-signin-text-rtl .block-signin-text__sign-up-link {
    padding-right: 6px;
    padding-left: 0px;
}

@media (max-width: 768px) {
    #block_11 .block-signin-text__block-text {
        margin-bottom: 16px;
    }
    #block_11 .block-signin-text__block-text-title {
        padding-left: 0px !important;
        padding-right: 0px !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    #block_11 .block-signin-text__block-text-description {
        padding-left: 0px !important;
        padding-right: 0px !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

#block_9 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 24px;
    color: var(--text-white);
}

#block_9 .block-bg {
    background: var(--color-id-13);
}

#block_9 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_9 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_9 .text-block__title {
    margin-bottom: 8px;
}

#block_9 .header-with-text-rtl {
    text-align: right;
}

@media (max-width: 768px) {
    #block_9 .text-block__title {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #block_9 .text-block__description {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

#block_10 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 40px;
    color: var(--text-white);
}

#block_10 .block-bg {
    background: var(--color-id-15);
}

#block_10 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_10 .block-divider-bottom {
    height: 250px;
    color: var(--color-id-9);
    z-index: 0;
    transform: rotateY(180deg);
}

#block_10 .features-block__card {}

#block_10 .features-block__header-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

#block_10 .feature-block__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.6em;
}

#block_10 .features-block-icons-rtl .features-block__card {
    text-align: right;
}

#block_8 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 24px;
}

#block_8 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_8 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_8 .text-block__title {
    margin-bottom: 8px;
}

#block_8 .header-with-text-rtl {
    text-align: right;
}

@media (max-width: 768px) {
    #block_8 .text-block__title {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #block_8 .text-block__description {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

#block_6 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 240px;
}

#block_6 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_6 .block-divider-bottom {
    height: 200px;
    color: var(--color-id-13);
    z-index: 0;
    transform: rotateY(180deg);
}

#block_6 .how-it-works-number {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-clip: padding-box;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(odd) .how-it-works-card {
    margin-top: 47px;
}

#block_6 .how-it-works-col {}

#block_6 .how-it-works-card {
    position: relative;
    margin-bottom: 16px;
}

#block_6 .how-it-works-title {
    position: relative;
}

#block_6 .how-it-works-description {
    position: relative;
}

#block_6 .how-it-works-preview {
    position: relative;
    margin-bottom: 12px;
}

#block_6 .how-it-works-arrow-top svg g {
    fill: var(--color-id-18);
}

#block_6 .how-it-works-arrow-bottom svg g {
    fill: var(--color-id-18);
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(odd) .how-it-works-card .how-it-works-arrow-top {
    content: ' ';
    position: absolute;
    width: 124px;
    height: 30px;
    right: -74px;
    top: -27px;
    z-index: 1;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(odd) .how-it-works-card .how-it-works-arrow-bottom {
    display: none;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(even) .how-it-works-card .how-it-works-arrow-bottom {
    content: ' ';
    position: absolute;
    width: 124px;
    height: 30px;
    right: -72px;
    top: 100px;
    z-index: 1;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(even) .how-it-works-card .how-it-works-arrow-top {
    display: none;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(4n) .how-it-works-card .how-it-works-arrow-top {
    display: none;
}

#block_6 .how-it-works-row .how-it-works-col:nth-child(4n) .how-it-works-card .how-it-works-arrow-bottom {
    display: none;
}

#block_6 .how-it-works-row .how-it-works-col:last-child .how-it-works-card .how-it-works-arrow-bottom {
    display: none;
}

#block_6 .how-it-works-row .how-it-works-col:last-child .how-it-works-card .how-it-works-arrow-top {
    display: none;
}

#block_6 .how-it-works-rtl .how-it-works-arrow-bottom {
    transform: scale(-1, 1);
}

#block_6 .how-it-works-rtl .how-it-works-arrow-top {
    transform: scale(-1, 1);
}

#block_6 .how-it-works-rtl .how-it-works-row .how-it-works-col:nth-child(odd) .how-it-works-card .how-it-works-arrow-top {
    left: -74px;
    right: auto;
}

#block_6 .how-it-works-rtl .how-it-works-row .how-it-works-col:nth-child(even) .how-it-works-card .how-it-works-arrow-bottom {
    left: -72px;
    right: auto;
}

#block_6 .how-it-works-rtl .how-it-works-card {
    text-align: right;
}

@media (max-width: 991px) {
    #block_6 .how-it-works-row .how-it-works-col:nth-child(2n) .how-it-works-card .how-it-works-arrow-top {
        display: none;
    }
    #block_6 .how-it-works-row .how-it-works-col:nth-child(2n) .how-it-works-card .how-it-works-arrow-bottom {
        display: none;
    }
}

@media (max-width: 768px) {
    #block_6 .how-it-works-arrow-bottom {
        display: none;
    }
    #block_6 .how-it-works-arrow-top {
        display: none;
    }
    #block_6 .how-it-works-row .how-it-works-col:nth-child(odd) .how-it-works-card {
        margin-top: 0px;
    }
}

#block_7 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 24px;
    color: var(--text-white);
}

#block_7 .block-bg {
    background: var(--color-id-13);
}

#block_7 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_7 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_7 .text-block__title {
    margin-bottom: 8px;
}

#block_7 .header-with-text-rtl {
    text-align: right;
}

@media (max-width: 768px) {
    #block_7 .text-block__title {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #block_7 .text-block__description {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

#block_5 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 160px;
    color: var(--text-white);
}

#block_5 .block-bg {
    background: var(--color-id-15);
}

#block_5 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_5 .block-divider-bottom {
    height: 200px;
    color: var(--color-id-9);
    z-index: 0;
    transform: rotateY(180deg);
}

#block_5 .reviews-slider {
    padding-bottom: 36px;
}

#block_5 .slick-slide {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

#block_5 .slick-dots {
    bottom: -36px;
}

#block_5 .slick-dots li {
    width: 12px;
    height: 12px;
}

#block_5 .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: #ffffff;
}

#block_5 .reviews-slider__slide {}

#block_5 .reviews-slider__slide-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    background-color: #eee;
}

#block_5 .reviews-slider__slide-photo {
    display: flex;
    align-items: center;
    background-size: cover;
}

#block_5 .slick-next {
    top: 50%;
}

#block_5 .slick-prev {
    top: 50%;
}

#block_5 .slick-next:before {
    content: '\f054';
    position: absolute;
    right: 0;
    top: -8px;
    font-size: 52px;
    font-weight: 300;
    color: #ffffff;
}

#block_5 .slick-prev:before {
    content: '\f053';
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 52px;
    font-weight: 300;
    color: #ffffff;
}

#block_5 .slick-slider {
    padding-left: 8.33333%;
    padding-right: 8.33333%;
}

#block_5 .reviews-slider-rtl .reviews-slider__slide-name {
    text-align: right;
}

#block_5 .reviews-slider-rtl .reviews-slider__slide-description {
    text-align: right;
}

#block_5 .reviews-slider-rtl .reviews-slider__slide-photo {
    direction: rtl;
}

#block_12 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 24px;
}

#block_12 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_12 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_12 .text-block__title {
    margin-bottom: 8px;
}

#block_12 .header-with-text-rtl {
    text-align: right;
}

@media (max-width: 768px) {
    #block_12 .text-block__title {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #block_12 .text-block__description {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

#block_4 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 80px;
}

#block_4 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_4 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_4 .faq-block__card {
    margin-bottom: 16px;
}

#block_4 .faq-block__header {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#block_4 .faq-block__header-title {
    width: 100%;
}

#block_4 .faq-block__header-title h1 {
    margin-bottom: 0px;
}

#block_4 .faq-block__header-title h2 {
    margin-bottom: 0px;
}

#block_4 .faq-block__header-title h3 {
    margin-bottom: 0px;
}

#block_4 .faq-block__header-title h4 {
    margin-bottom: 0px;
}

#block_4 .faq-block__header-title h5 {
    margin-bottom: 0px;
}

#block_4 .faq-block__header-title h6 {
    margin-bottom: 0px;
}

#block_4 .faq-block__icon {
    width: 52px;
    text-align: right;
}

#block_4 .faq-block__header-icon {
    width: 52px;
    text-align: right;
}

#block_4 .collapsed .faq-block__icon:before {
    content: "\f055";
}

#block_4 .faq-block__icon:before {
    content: "\f056";
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 22px;
}

#block_4 .faq-rtl .faq-block__card {
    text-align: right;
}

#block_4 .faq-rtl .faq-block__icon {
    text-align: left;
}

#block_37 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_37 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_37 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_37 .form-group {
    margin-bottom: 12px;
}

#block_37 .new-order__checkbox {
    margin-bottom: 12px;
}

#block_37 .new-order-form {
    display: flex;
    justify-content: flex-start;
}

#block_37 .new_order-block__services-list {
    min-width: 0;
}

#block_37 .new-order-form-rtl .new-order-button-submit {
    text-align: right;
}

.spin-loader {
    -webkit-animation-name: spin-loader;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin-loader;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin-loader;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin-loader;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-moz-keyframes spin-loader {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

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

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

#block_21 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 16px;
}

#block_21 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_21 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_21 .form-group {
    margin-bottom: 12px;
}

#block_21 .ticket-form__alignment {
    justify-content: flex-start;
}

#block_22 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 30px;
}

#block_22 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_22 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_22 .tickets-list__alignment {
    justify-content: flex-start;
}

#block_22 .tickets-list__margin-search {
    margin-bottom: 16px;
}

#block_22 .tickets-list__margin-table {
    margin-bottom: 24px;
}

#block_40 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_40 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_40 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_40 .text-block-with-card-rtl .text-block__description {
    text-align: right;
}

#block_27 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_27 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_27 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_27 .services-list__description {
    text-align: left;
}

#block_27 .services-category {
    font-weight: 600;
    color: null !important;
    background: null !important;
    padding-top: 12px !important;
    padding-left: 12px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
}

#block_27 .services-category h4 {
    margin-bottom: 0px;
    font-size: 16px !important;
    color: null !important;
}

#block_27 .services-list-category-title {
    margin-bottom: 0px;
}

#block_27 .services-list-category-title td {
    text-align: left;
}

#block_27 .services-list-rtl .services-list-category-title td {
    text-align: right;
}

#block_27 .services-list-rtl .table-responsive-classic .services-list-category-title td:before {
    display: none;
}

#block_27 .services-list-rtl .services-list__description {
    text-align: right;
}

#block_27 .services-filter__active-category {
    max-width: 152px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    text-overflow: ellipsis;
    padding-left: 4px;
}

#block_27 .services-filter__active-currency {
    max-width: 80px;
    min-width: 70px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    text-overflow: ellipsis;
    text-align: left;
}

#block_27 .form-group-rtl .services-filter__active-currency {
    text-align: start !important;
}

#block_27 .services-filters .dropdown-menu {
    min-width: 420px;
    max-height: 210px;
    max-width: 320px;
    overflow-y: auto;
}

#block_27 .services-filters .dropdown-menu .dropdown-item {
    max-height: 280px;
    white-space: pre-line;
}

#block_27 .services-filters .dropdown-menu .dropdown-item:hover {
    color: var(--link) !important;
}

#block_27 .services-filters .dropdown-menu .dropdown-item:active {
    color: inherit !important;
    background-color: inherit !important;
}

#block_27 .services-filters .dropdown-currency .dropdown-menu {
    min-width: 100%;
    max-width: 100%;
    max-height: initial;
    overflow-y: initial;
}

#block_27 .services-filters .dropdown-currency .dropdown-menu .dropdown-item {
    padding: 0.25rem 1rem;
    max-width: 100%;
}

@media (max-width: 768px) {
    #block_27 .services-filters .dropdown-menu {
        min-width: 280px;
        max-width: 280px;
    }
    #block_27 .services-filters .dropdown-menu .dropdown-item {
        max-width: 280px;
        white-space: pre-line;
    }
    #block_27 .services-filters .dropdown .btn {
        text-align: left;
    }
    #block_27 .services-list-rtl .services-filters .dropdown .btn {
        text-align: right;
    }
    #block_27 .services-list-rtl .dropdown-menu .dropdown-item {
        text-align: right;
    }
}

#block_24 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 16px;
}

#block_24 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_24 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_24 .affiliates-info__data-table {
    margin-bottom: 16px;
}

#block_24 .affiliates-info__alignment {
    justify-content: flex-start;
}

#block_24 .affiliates-table-border-none td {
    border-bottom-color: transparent !important;
}

#block_23 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 30px;
}

#block_23 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_23 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_23 .affiliate-block__table-payments {
    margin-bottom: 24px;
}

#block_23 .affiliate-list__alignment {
    justify-content: flex-start;
}

#block_14 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 16px;
}

#block_14 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_14 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_14 .form-group {
    margin-bottom: 10px;
}

#block_14 .add-funds__form-alignment {
    justify-content: flex-start;
}

#block_15 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 30px;
}

#block_15 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_15 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_15 .add-funds__table-list {
    justify-content: flex-start;
}

#block_30 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_30 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_30 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_30 .orders-history__margin-tab {
    margin-bottom: 16px;
}

#block_30 .orders-history__margin-table {
    margin-bottom: 25px;
}

#block_30 .orders-history__margin-search {
    margin-bottom: 16px;
}

#block_30 .orders-history-actions {
    text-align: right;
}

#block_30 .orders-history-rtl .orders-history-actions {
    text-align: left;
}

@media (min-width: 1100px) {
    #block_30 .orders-history__margin-table .table-responsive {
        overflow-x: visible;
    }
}

#block_32 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
}

#block_32 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_32 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_32 .subscriptions__margin-tab {
    margin-bottom: 16px;
}

#block_32 .subscriptions__margin-table {
    margin-bottom: 24px;
}

#block_32 .subscriptions__margin-search {
    margin-bottom: 16px;
}

#block_32 .subscriptions-history-actions {
    text-align: right;
}

#block_32 .subscriptions-history-rtl .subscriptions-history-actions {
    text-align: left;
}

#block_39 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_39 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_39 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_39 .sign-up-center-alignment {
    justify-content: center;
}

#block_39 .g_id_signin iframe {
    margin: 0 auto !important;
}

#block_39 .sign-up-center-terms-link {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

#block_39 .form-group {
    margin-bottom: 12px;
}

#block_39 .signup-checkbox {
    margin-bottom: 12px;
}

#block_39 .sign-up-center-signin-link {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

#block_29 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_29 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_29 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_29 .form-group {
    margin-bottom: 10px;
}

#block_29 .mass-order__alignment {
    justify-content: flex-start;
}

#block_35 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_35 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_35 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_35 .drip-feed__margin-tab {
    margin-bottom: 16px;
}

#block_35 .drip-feed__margin-table {
    margin-bottom: 24px;
}

#block_35 .drip-feed__margin-search {
    margin-bottom: 16px;
}

#block_16 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_16 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_16 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_16 .form-group {
    margin-bottom: 10px;
}

#block_16 .account__alignment {
    justify-content: flex-start;
}

#block_16 .account-card {
    margin-bottom: 16px;
}

#block_16 .account-button-right {
    flex-shrink: 0;
    margin-left: 2em;
}

#block_16 .account-rtl .account-button-right {
    margin-right: 2em;
    margin-left: 0px;
}

#block_36 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 30px;
}

#block_36 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_36 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_36 .blog-post__card-margin {
    margin-bottom: 24px;
}

#block_36 .block-blog__preview {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    background-size: cover;
    background-position: center center;
}

#block_36 .block-blog__title {
    width: 100%;
    margin-bottom: undefined;
}

#block_36 .block-blog__title h3 {
    margin-bottom: 0px;
}

#block_36 .block-blog__content {
    width: 100%;
    margin-bottom: 16px;
}

#block_36 .blog-list__card {
    margin-bottom: 24px;
}

#block_36 .blog-list__alignment {
    justify-content: center;
}

#block_36 .blog-list-rtl .block-blog__content {
    text-align: right;
}

#block_36 .blog-list-rtl .block-blog__actions {
    text-align: right;
}

#block_36 .blog-list-rtl .blog-list__card {
    text-align: right;
    unicode-bidi: bidi-override !important;
    direction: unset !important;
}

#block_25 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_25 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_25 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_25 .order-child-list__alignment {
    justify-content: flex-start;
}

#block_25 .order-child-list__margin-renew {
    margin-bottom: 16px;
}

#block_25 .order-child-list-button {
    text-align: right;
}

#block_25 .order-child-list-text {
    text-align: left;
}

#block_25 .order-child-list-rtl .order-child-list-button {
    text-align: left;
}

#block_25 .order-child-list-rtl .order-child-list-text {
    text-align: right;
}

@media (max-width: 991px) {
    #block_25 .order-child-list-button {
        text-align: left;
    }
    #block_25 .order-child-list-rtl .order-child-list-button {
        text-align: right;
    }
}

#block_38 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_38 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_38 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_38 .form-group {
    margin-bottom: 10px;
}

#block_38 .reset-password-form__alignment {
    justify-content: center;
}

#block_13 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_13 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_13 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_13 .form-group {
    margin-bottom: 10px;
}

#block_13 .reset-password-confirm__alignment {
    justify-content: center;
}

#block_34 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_34 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_34 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_34 .block-blog__preview-margin {
    margin-bottom: 24px;
}

#block_34 .block-blog__preview {
    width: 100%;
    display: flex;
    justify-content: center;
}

#block_34 .block-blog__preview img {
    max-height: 420px;
}

#block_34 .block-blog__header {
    width: 100%;
    margin-bottom: 8px;
}

#block_34 .block-blog__header h1 {
    margin-bottom: 0px;
}

#block_34 .blog-post__alignment {
    justify-content: center;
}

#block_34 .blog-post__card-margin {
    margin-bottom: 16px;
}

#block_34 .blog-post-rtl .blog-post__card-margin {
    text-align: right;
}

#block_34 .blog-post-rtl .block-blog__actions {
    text-align: right;
}

#block_17 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_17 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_17 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_17 .form-group {
    margin-bottom: 12px;
}

#block_17 .confirm-email__alignment {
    justify-content: center;
}

#block_17 .confirm-email__header {
    margin-bottom: 16px;
}

#block_17 .confirm-email__header h3 {
    text-align: center;
}

#block_17 .confirm-email__description {
    margin-bottom: 16px;
}

#block_17 .confirm-email-card {
    text-align: center;
}

#block_17 .confirm-email__actions {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#block_17 .confirm-email__button-change-email {
    margin-left: 16px;
}

#block_17 .confirm-email-rtl .confirm-email__button-change-email {
    margin-left: 0px;
    margin-right: 16px;
}

#block_19 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_19 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_19 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_19 .services-list__description {
    text-align: left;
}

#block_19 .services-category {
    font-weight: 600;
    color: null !important;
    background: null !important;
    padding-top: 12px !important;
    padding-left: 12px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
}

#block_19 .services-category h4 {
    margin-bottom: 0px;
    font-size: 16px !important;
    color: null !important;
}

#block_19 .services-list-category-title {
    margin-bottom: 0px;
}

#block_19 .services-list-category-title td {
    text-align: left;
}

#block_19 .services-list-rtl .services-list-category-title td {
    text-align: right;
}

#block_19 .services-list-rtl .table-responsive-classic .services-list-category-title td:before {
    display: none;
}

#block_19 .services-list-rtl .services-list__description {
    text-align: right;
}

#block_19 .services-filter__active-category {
    max-width: 152px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    text-overflow: ellipsis;
    padding-left: 4px;
}

#block_19 .services-filter__active-currency {
    max-width: 80px;
    min-width: 70px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    text-overflow: ellipsis;
    text-align: left;
}

#block_19 .form-group-rtl .services-filter__active-currency {
    text-align: start !important;
}

#block_19 .services-filters .dropdown-menu {
    min-width: 420px;
    max-height: 210px;
    max-width: 320px;
    overflow-y: auto;
}

#block_19 .services-filters .dropdown-menu .dropdown-item {
    max-height: 280px;
    white-space: pre-line;
}

#block_19 .services-filters .dropdown-menu .dropdown-item:hover {
    color: var(--link) !important;
}

#block_19 .services-filters .dropdown-menu .dropdown-item:active {
    color: inherit !important;
    background-color: inherit !important;
}

#block_19 .services-filters .dropdown-currency .dropdown-menu {
    min-width: 100%;
    max-width: 100%;
    max-height: initial;
    overflow-y: initial;
}

#block_19 .services-filters .dropdown-currency .dropdown-menu .dropdown-item {
    padding: 0.25rem 1rem;
    max-width: 100%;
}

@media (max-width: 768px) {
    #block_19 .services-filters .dropdown-menu {
        min-width: 280px;
        max-width: 280px;
    }
    #block_19 .services-filters .dropdown-menu .dropdown-item {
        max-width: 280px;
        white-space: pre-line;
    }
    #block_19 .services-filters .dropdown .btn {
        text-align: left;
    }
    #block_19 .services-list-rtl .services-filters .dropdown .btn {
        text-align: right;
    }
    #block_19 .services-list-rtl .dropdown-menu .dropdown-item {
        text-align: right;
    }
}

#block_33 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_33 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_33 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_33 .ticket-dialog__title {
    margin-bottom: 16px;
}

#block_33 .ticket-dialog__alignment {
    justify-content: flex-start;
}

#block_33 .form-group {
    margin-bottom: 16px;
}

#block_33 .block-ticket-dialog-rtl .ticket-dialog__title {
    text-align: right;
}

#block_31 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_31 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_31 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_31 .form-group {
    margin-bottom: 12px;
}

#block_31 .alert {
    margin-bottom: 12px;
}

#block_31 .order-child-form__alignment {
    justify-content: flex-start;
}

#block_18 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_18 .block-divider-top {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_18 .block-divider-bottom {
    height: 58px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_18 .updates__margin-table {
    margin-bottom: 16px;
}

#block_18 .updates__margin-search {
    margin-bottom: 16px;
}

#block_18 .updates-filters .dropdown-menu .dropdown-item:active {
    color: inherit !important;
    background-color: inherit !important;
}

@media (max-width: 768px) {
    #block_18 .updates-filters .dropdown-menu {
        min-width: 280px;
        max-width: 280px;
    }
    #block_18 .updates-filters .dropdown-menu .dropdown-item {
        max-width: 280px;
        white-space: pre-line;
    }
    #block_18 .updates-filters .dropdown .btn {
        text-align: left;
    }
    #block_18 .updates-list-rtl .updates-filters .dropdown .btn {
        text-align: right;
    }
    #block_18 .updates-list-rtl .dropdown-menu .dropdown-item {
        text-align: right;
    }
}

#block_26 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_26 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_26 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_26 .refill__margin-tab {
    margin-bottom: 16px;
}

#block_26 .refill__margin-table {
    margin-bottom: 16px;
}

#block_26 .refill__margin-search {
    margin-bottom: 16px;
}

#block_28 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
}

#block_28 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_28 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_28 .margin-card {
    margin-bottom: 16px;
}

#block_20 {
    position: relative;
    z-index: auto;
    width: 100%;
    display: flex;
    min-height: auto;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
}

#block_20 .block-divider-top {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_20 .block-divider-bottom {
    height: 100px;
    z-index: 0;
    transform: rotateY(0deg);
}

#block_20 .form-group {
    margin-bottom: undefined;
}

#block_20 .form-alignment {
    justify-content: center;
}

#block_20 .block-confirm-email__description-rtl {
    text-align: right;
    direction: rtl;
}

#block_2 .block-wrapper {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 120;
}

#block_2 .sidebar-block__top {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}

#block_2 .sidebar-block__top-brand {
    display: flex;
    align-items: center;
}

#block_2 .sidebar-block__top-logo {
    max-width: 100px;
    transform: rotate(0deg);
    width: 100%;
}

#block_2 .navbar-brand {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#block_2 .navbar-brand__logo {
    margin-right: 12px;
}

#block_2 .navbar-brand__logo img {
    width: 30px;
}

#block_2 .component-navbar-collapse {
    margin-left: auto;
}

#block_2 .component-navbar__height {
    height: var(--public-navbar-height);
}

#block_2 .component-navbar__sticky {
    position: fixed !important;
    z-index: 1000;
}

#block_2 .navbar-icon {
    margin-right: 8px;
    min-width: 20px;
}

#block_2 .navbar-languages {
    padding-left: 12px;
    padding-right: 12px;
}

#block_2 .navbar-rtl .navbar-languages {
    margin-left: 0px;
    margin-right: 12px;
}

#block_2 .navbar-rtl .navbar-icon {
    margin-right: 0px;
    margin-left: 8px;
}

#block_2 .navbar-rtl .component-navbar-collapse {
    margin-left: inherit;
    margin-right: auto;
}

@media (max-width: 991px) {
    #block_2 .navbar-languages {
        margin-top: 4px;
        padding-left: 0px;
        padding-right: 0px;
    }
    #block_2 .navbar-rtl .navbar-languages {
        margin-left: 12px;
        margin-right: 0px;
    }
    #block_2 .sidebar-block__top {
        position: relative;
    }
    #block_2 .sidebar-block__sticky {
        position: fixed !important;
    }
    #block_2 .wrapper-sidebar-navbar {
        display: block;
    }
}

#block_1 .footer-block-rtl {
    text-align: right;
}

#block_3 {
    flex-shrink: 0;
}

#block_3 .sidebar-block__top {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

#block_3 .sidebar-block__top-brand {
    display: none;
}

#block_3 .sidebar-block__left {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}

#block_3 .sidebar-block__left-menu {
    margin: 0px;
}

#block_3 .sidebar-block__left-menu li {
    list-style: none;
}

#block_3 .navbar-brand {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#block_3 .navbar-brand__logo {}

#block_3 .navbar-brand__logo img {
    width: 30px;
}

#block_3 .sidebar-block__menu-item-icon {
    display: flex;
    min-width: 26px;
    padding-right: 4px;
}

#block_3 .sidebar-rtl .sidebar-block__menu-item-icon {
    padding-right: 0px;
    padding-left: 4px;
}

#block_3 .component-navbar-collapse {
    margin-left: auto;
}

#block_3 .navbar-rtl .component-navbar-collapse {
    margin-left: inherit;
    margin-right: auto;
}

#block_3 .navbar-nav-sidebar-menu {
    display: none;
}

#block_3 .navbar-languages {
    display: flex;
    align-items: center;
}

#block_3 .sidebar-rtl .sidebar-block__left {
    left: auto;
    right: 0;
}

#block_3 .navbar-rtl .sidebar-block__top {
    right: auto;
    left: 0;
}

.editor__main .body-rtl {
    --editor-sidebar: 0px;
}

#block_3 .sidebar-block__sticky {
    position: fixed !important;
}

@media (max-width: 991px) {
    #block_3 .navbar-nav-sidebar-menu {
        display: flex;
    }
    #block_3 .sidebar-block__top-brand {
        display: flex;
        align-items: center;
        width: inherit;
    }
    #block_3 .navbar-nav-currencies {
        order: -1;
    }
    #block_3 .sidebar-block__top {
        position: relative;
    }
    #block_3 .sidebar-block__sticky {
        position: fixed !important;
    }
    #block_3 .component-navbar__navbar-private .navbar .navbar-private__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

/* =========================================================
   BOP / ADD FUNDS UI
   Match with Platform + Select2 Design
   ========================================================= */

.bop-section-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ref-navy, #12345b);
    letter-spacing: .01em;
}

.bop-amount-title {
    margin-top: 20px;
}


/* =========================================================
   PAYMENT METHODS WRAPPER
   ========================================================= */

.bop-method-ui-wrapper {
    position: relative;
    width: 100%;
    margin: 0 0 18px;
    overflow: visible;
}

.bop-method-ui {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* =========================================================
   PAYMENT METHOD CARD
   ========================================================= */

.bop-method-card {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 46px;
    height: 46px;

    padding: 7px 12px;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    box-sizing: border-box;
    overflow: hidden;

    cursor: pointer;

    color: var(--ref-navy, #12345b);
    background: var(--ref-blue-soft, #eaf4ff);

    border: 1px solid #cfe3f8;
    border-radius: 11px;

    box-shadow:
        0 2px 0 var(--ref-blue-line, #5ba9f5);

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease,
        color .15s ease;
}


/* hover */

.bop-method-card:hover {
    color: var(--ref-navy, #12345b);

    background: #e4f1ff;

    border-color: #5ca9f5;

    box-shadow:
        0 3px 0 #4b9ff0;

    transform: translateY(-1px);
}


/* active */

.bop-method-card.active {
    color: #fff;

    background: #1678e8;

    border-color: #1678e8;

    box-shadow:
        0 2px 0 #126bd0;

    transform: none;
}


/* =========================================================
   PAYMENT LOGO
   ========================================================= */

.bop-method-card img,
.bop-method-card .method-logo {
    display: block;

    width: 22px;
    height: 22px;

    min-width: 22px;
    min-height: 22px;

    flex: 0 0 22px;

    object-fit: contain;

    margin: 0;

    transition: none;
}


/* default generated logo */

.bop-method-card .default-logo {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    min-width: 22px;

    flex: 0 0 22px;

    margin: 0;

    border-radius: 6px;

    color: #fff;
    background: #1678e8;

    font-size: 9px;
    font-weight: 800;
}


/* active default logo */

.bop-method-card.active .default-logo {
    color: #1678e8;
    background: #fff;
}


/* =========================================================
   PAYMENT METHOD NAME
   ========================================================= */

.bop-method-card span,
.bop-method-card .method-name {
    min-width: 0;
    max-width: 100%;

    flex: 1;

    overflow: hidden;

    color: inherit;

    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;

    letter-spacing: 0;

    transition: none;
}


/* =========================================================
   DISABLE OLD ANIMATIONS
   ========================================================= */

.bop-method-card:hover img,
.bop-method-card.active img,
.bop-method-card.active .method-name {
    animation: none !important;
    transform: none !important;
}


/* =========================================================
   CHECK ICON
   ========================================================= */

.bop-method-check,
.bop-method-card.active .bop-method-check {
    display: none !important;
}


/* =========================================================
   BONUS HEADER
   ========================================================= */

.bop-bonus-header {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    max-height: 0;

    padding: 0;
    margin: 0;

    overflow: hidden;
    visibility: hidden;
    opacity: 0;

    background: #fff;

    border: 0 solid #d7e8f8;
    border-radius: 11px;

    box-shadow: 0 1px 3px rgba(18, 52, 91, .05);

    transition:
        max-height .25s ease,
        padding .25s ease,
        margin .25s ease,
        opacity .25s ease,
        border-width .25s ease;
}

.bop-bonus-header.show {
    max-height: 100px;

    padding: 12px 15px;
    margin-bottom: 12px;

    visibility: visible;
    opacity: 1;

    border-width: 1px;
}


/* bonus hover */

.bop-bonus-header:hover {
    border-color: #5ca9f5;
    background: #f8fbff;
}


/* bonus title */

.bop-bonus-header-title {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;

    color: #12345b;

    font-size: 13px;
    font-weight: 700;
}

.bop-bonus-header-title::before {
    content: "🎁";

    font-size: 17px;
    line-height: 1;
}


/* bonus toggle */

.bop-bonus-toggle {
    flex-shrink: 0;

    padding: 5px 11px;

    color: #1678e8;

    background: #eaf4ff;

    border: 1px solid #d2e6fa;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    user-select: none;

    transition: .15s ease;
}

.bop-bonus-header:hover .bop-bonus-toggle {
    background: #dfefff;
}


/* =========================================================
   BONUS CONTENT
   ========================================================= */

.bop-bonus-card {
    display: block;

    max-height: 0;

    padding: 0;
    margin: 0;

    overflow: hidden;

    background: transparent;
    border: 0;

    transition:
        max-height .3s ease,
        padding .3s ease,
        margin .3s ease;
}

.bop-bonus-card.show {
    max-height: 500px;

    padding: 8px 0 12px;
    margin-bottom: 12px;
}


/* bonus tiers */

.bop-bonus-tiers {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
}


/* tier */

.bop-bonus-tier {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 13px;

    background: #eaf4ff;

    border: 1px solid #cfe3f8;
    border-radius: 9px;

    box-shadow: 0 2px 0 #b9daf7;

    transition: .15s ease;
}

.bop-bonus-tier:hover {
    background: #e3f1ff;

    border-color: #5ca9f5;

    transform: translateY(-1px);
}


/* amount */

.bop-bonus-tier-amount {
    color: #4b6380;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* percentage */

.bop-bonus-tier-pct {
    padding: 5px 10px;

    color: #1678e8;

    background: #fff;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   AMOUNT CHIPS
   ========================================================= */

.bop-amount-ui {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    width: 100%;

    margin: 0 0 15px;
}


.bop-amount-chip {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 7px 13px;

    box-sizing: border-box;

    color: #506985;

    background: #eaf4ff;

    border: 1px solid #cfe3f8;
    border-radius: 9px;

    box-shadow: 0 2px 0 #b9daf7;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;

    transition: .15s ease;
}


/* amount hover */

.bop-amount-chip:hover {
    color: #1678e8;

    background: #e1f0ff;

    border-color: #5ca9f5;

    box-shadow: 0 2px 0 #8fc5f3;

    transform: translateY(-1px);
}


/* amount active */

.bop-amount-chip.active {
    color: #fff;

    background: #1678e8;

    border-color: #1678e8;

    box-shadow: 0 2px 0 #126bd0;

    font-weight: 800;

    transform: none;
}


/* =========================================================
   AMOUNT CLEAR BUTTON
   ========================================================= */

.bop-amount-clear {
    position: absolute;

    top: -6px;
    right: -6px;

    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
    border: 2px solid #1678e8;

    cursor: pointer;

    opacity: 0;
    transform: scale(.5);

    transition: .18s ease;

    z-index: 10;
}

.bop-amount-chip.active .bop-amount-clear {
    opacity: 1;
    transform: scale(1);
}

.bop-amount-clear:hover {
    border-color: #ef4444;
    background: #fff1f2;
    transform: scale(1.08);
}

.bop-amount-clear::before,
.bop-amount-clear::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 1.5px;

    background: #1678e8;

    border-radius: 2px;
}

.bop-amount-clear::before {
    transform: rotate(45deg);
}

.bop-amount-clear::after {
    transform: rotate(-45deg);
}

.bop-amount-clear:hover::before,
.bop-amount-clear:hover::after {
    background: #ef4444;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.bop-overview {
    display: none;

    width: 100%;

    box-sizing: border-box;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 15px 17px;
    margin: 18px 0;

    background: #eaf4ff;

    border: 1px solid #cfe3f8;
    border-radius: 11px;

    box-shadow: 0 2px 0 #b9daf7;

    opacity: 0;
    transform: translateY(7px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.bop-overview.show {
    display: flex;

    opacity: 1;
    transform: translateY(0);
}


/* overview left */

.bop-overview-left {
    flex: 1;
    min-width: 0;
}


/* label */

.bop-overview-label {
    margin-bottom: 4px;

    color: #66809d;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .06em;
}


/* value */

.bop-overview-value {
    margin-top: 0;

    color: #1678e8;

    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;

    letter-spacing: -.02em;
}


/* overview right */

.bop-overview-right {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 4px;

    text-align: right;
}


/* bonus */

.bop-overview-bonus {
    display: none;
    align-items: center;
    gap: 5px;

    padding: 6px 11px;

    color: #1678e8;

    background: #fff;

    border: 1px solid #cfe3f8;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.bop-overview-bonus.show {
    display: inline-flex;
}


/* total */

.bop-overview-total {
    color: #66809d;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   TICKET FORM WIDTH
   ========================================================= */

#block_20 .ticket-form {
    width: 100%;
}

#block_20 .ticket-form > .container {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .bop-method-ui {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .bop-method-card {
        min-height: 44px;
        height: 44px;
        padding: 7px 10px;
        gap: 8px;
    }

    .bop-method-card img,
    .bop-method-card .method-logo,
    .bop-method-card .default-logo {
        width: 21px;
        height: 21px;
        min-width: 21px;
        flex-basis: 21px;
    }

    .bop-method-card span,
    .bop-method-card .method-name {
        font-size: 12px;
    }

    .bop-overview {
        padding: 14px 15px;
    }

    .bop-overview-value {
        font-size: 22px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .bop-method-ui-wrapper {
        width: 100%;
        margin-bottom: 13px;
    }

    /*
       Mobile:
       4 icons per row
       name hidden
    */

    .bop-method-ui {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 7px;

        width: 100%;

        padding: 0;
        margin: 0;

        box-sizing: border-box;
    }


    .bop-method-card,
    .bop-method-card.active {

        width: 100% !important;

        min-width: 0 !important;

        min-height: 46px !important;
        height: 46px !important;

        padding: 5px !important;
        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        border-radius: 10px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /*
       Mobile logo
    */

    .bop-method-card img,
    .bop-method-card .method-logo {

        display: block !important;

        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
        min-height: 25px !important;

        max-width: 70% !important;
        max-height: 70% !important;

        flex: 0 0 auto !important;

        margin: 0 auto !important;

        object-fit: contain;
    }


    /*
       Default icon
    */

    .bop-method-card .default-logo {

        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;

        flex: 0 0 auto !important;

        margin: 0 auto !important;

        font-size: 9px;
    }


    /*
       Hide names ONLY on mobile
    */

    .bop-method-card span,
    .bop-method-card .method-name,
    .bop-method-card.active .method-name {

        display: none !important;
    }


    /*
       No check badge
    */

    .bop-method-check,
    .bop-method-card.active .bop-method-check {

        display: none !important;
    }


    /* bonus */

    .bop-bonus-header.show {
        max-height: 90px;

        padding: 11px 13px;

        margin-bottom: 10px;
    }

    .bop-bonus-header-title {
        font-size: 12px;
    }

    .bop-bonus-toggle {
        padding: 5px 9px;
        font-size: 10px;
    }


    /* tiers */

    .bop-bonus-tiers {
        gap: 6px;
    }

    .bop-bonus-tier {
        padding: 8px 10px;
        gap: 7px;
    }

    .bop-bonus-tier-amount {
        font-size: 11px;
    }

    .bop-bonus-tier-pct {
        padding: 4px 8px;
        font-size: 13px;
    }


    /* amount */

    .bop-amount-ui {
        gap: 6px;
    }

    .bop-amount-chip {
        min-height: 32px;

        padding: 6px 10px;

        font-size: 11px;
    }


    /* overview */

    .bop-overview {
        padding: 12px 13px;

        margin: 14px 0;

        gap: 10px;
    }

    .bop-overview-value {
        font-size: 20px;
    }

    .bop-overview-total {
        font-size: 9px;
    }

    .bop-overview-bonus {
        padding: 5px 8px;
        font-size: 9px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .bop-method-ui {
        gap: 5px;
    }

    .bop-method-card,
    .bop-method-card.active {

        min-height: 42px !important;
        height: 42px !important;

        border-radius: 8px;

        padding: 4px !important;
    }

    .bop-method-card img,
    .bop-method-card .method-logo,
    .bop-method-card .default-logo {

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;
    }
}


/* =========================================================
   VERY SMALL SCREEN
   ========================================================= */

@media (max-width: 330px) {

    .bop-method-ui {
        gap: 4px;
    }

    .bop-method-card,
    .bop-method-card.active {

        min-height: 40px !important;
        height: 40px !important;

        border-radius: 7px;
    }

    .bop-method-card img,
    .bop-method-card .method-logo,
    .bop-method-card .default-logo {

        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;
    }
}











/*=============================================================*/

body.body-internal #block_3 .component-sidebar__menu {
    position: relative;
}

body.body-internal #block_3 .component-sidebar__menu-logo {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(72, 21, 171, .10) !important;
    box-shadow: 0 6px 18px rgba(39, 13, 91, .08) !important;
}

/* Logo placement copied only from the reference header. */

.component-navbar-brand a {
    display: inline-flex;
    align-items: center;
}

.component-navbar-brand img {
    transition: opacity .2s ease;
}

.component-navbar-brand img:hover {
    opacity: .85;
}

body.body-internal #block_3 .sidebar-block__left-menu {
    padding-top: 12px !important;
}

body.body-internal #block_3 .component-sidebar__menu-item {
    position: relative;
}

body.body-internal #block_3 .component-sidebar__menu-item-link {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
    text-shadow: 0 1px 1px rgba(31, 0, 86, .14) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.body-internal #block_3 .component-sidebar__menu-item-link::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .13) 50%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .45s ease;
}

body.body-internal #block_3 .component-sidebar__menu-item-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .11) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

body.body-internal #block_3 .component-sidebar__menu-item-link:hover::after {
    transform: translateX(130%);
}

body.body-internal #block_3 .component-sidebar__menu-item-active .component-sidebar__menu-item-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 8px 8px 0;
    background: #ffb800;
    box-shadow: 0 0 10px rgba(255, 184, 0, .48);
}

body.body-internal #block_3 .sidebar-block__menu-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    opacity: 1 !important;
}

body.body-internal #block_3 .sidebar-block__menu-item-icon>span {
    color: inherit !important;
    filter: drop-shadow(0 2px 3px rgba(32, 0, 85, .12));
}

body.body-internal #block_3 .component-sidebar__menu-item-active .sidebar-block__menu-item-icon>span {
    filter: none;
}

body.body-internal #block_3 .sidebar-menu-text {
    color: inherit !important;
    font-weight: 700 !important;
}

body.body-internal #block_3 .component-sidebar__menu-item .badge {
    color: #392000 !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 7px rgba(76, 42, 0, .18) !important;
}

@media (max-width: 991.98px) {
    body.body-internal #block_3 .component-sidebar__menu-logo img,
    body.body-internal #block_3 .component-sidebar__menu-brand img {
        max-width: min(180px, 84%) !important;
        max-height: 54px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 .component-sidebar__menu-item-link,
    body.body-internal #block_3 .component-sidebar__menu-item-link::after {
        transition: none !important;
    }
}

/* =========================================================
   MOBILE MENU — SMOOTH PUSH-DOWN + ORIGINAL VERTICAL CURRENCY
   Visual-only overrides. Existing Twig/menu/currency logic is untouched.
   ========================================================= */

@media (max-width: 991.98px) {
    /* Restore the original compact header proportions. */
    body.body-internal #block_3 .sidebar-block__top {
        position: relative !important;
        z-index: 1050 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e7eef7 !important;
        box-shadow: 0 3px 9px rgba(28, 56, 83, .07) !important;
    }
    body.body-internal #block_3 .navbar-private__header {
        min-height: 68px !important;
        padding: 8px 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    body.body-internal #block_3 .navbar-private__header .component-navbar-brand img,
    body.body-internal #block_3 .navbar-private__header .component-navbar-public-brand img {
        display: block !important;
        width: auto !important;
        max-width: min(170px, 72vw) !important;
        max-height: 46px !important;
        height: auto !important;
        object-fit: contain !important;
    }
    /* Smaller professional menu button, matching the original header size. */
    body.body-internal #block_3 .navbar-toggler {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #0d6fd7!important;
        background: #f7f3ff !important;
        border: 1px solid #d9ccf4 !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 8px rgba(76, 30, 145, .10) !important;
        outline: none !important;
        transform: none !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    }
    body.body-internal #block_3 .navbar-toggler:hover,
    body.body-internal #block_3 .navbar-toggler:focus {
        color: #0d6fd7!important;
        background: #f0e8ff !important;
        border-color: #c9b4ee !important;
        box-shadow: 0 3px 8px rgba(76, 30, 145, .12) !important;
        outline: none !important;
    }
    body.body-internal #block_3 .navbar-toggler[aria-expanded="true"] {
        color: #0d6fd7!important;
        background: #ece2ff !important;
        border-color: #b99bf2 !important;
        box-shadow: 0 0 0 2px rgba(93, 24, 214, .07), 0 3px 8px rgba(76, 30, 145, .10) !important;
    }
    body.body-internal #block_3 .navbar-toggler .navbar-burger,
    body.body-internal #block_3 .navbar-toggler .navbar-burger-line,
    body.body-internal #block_3 .navbar-toggler .navbar-burger::before,
    body.body-internal #block_3 .navbar-toggler .navbar-burger::after,
    body.body-internal #block_3 .navbar-toggler[aria-expanded="true"] .navbar-burger,
    body.body-internal #block_3 .navbar-toggler[aria-expanded="true"] .navbar-burger-line,
    body.body-internal #block_3 .navbar-toggler[aria-expanded="true"] .navbar-burger::before,
    body.body-internal #block_3 .navbar-toggler[aria-expanded="true"] .navbar-burger::after {
        color: #0d6fd7!important;
        background-color: #0d6fd7!important;
        border-color: #0d6fd7!important;
    }
    /*
   * Ultra-smooth push-down menu:
   * Bootstrap measures the real content height and animates only that height.
   * This removes the grid reflow/paint conflict that caused mobile lag.
   */
    body.body-internal #block_3 #navbar-collapse-3,
    body.body-internal #block_3 #navbar-collapse-3.collapse,
    body.body-internal #block_3 #navbar-collapse-3.collapsing {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overscroll-behavior: contain !important;
        backface-visibility: hidden !important;
    }
    body.body-internal #block_3 #navbar-collapse-3.collapse:not(.show) {
        display: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3.collapsing {
        display: block !important;
        overflow: hidden !important;
        will-change: height !important;
        transition: height .30s cubic-bezier(.4, 0, .2, 1) !important;
    }
    body.body-internal #block_3 #navbar-collapse-3.show {
        display: block !important;
        overflow: visible !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse-divider {
        display: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 14px 18px !important;
        display: block !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border-top: 1px solid #edf3f9 !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 9px 18px rgba(32, 55, 80, .08) !important;
        box-sizing: border-box !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
    body.body-internal #block_3 .navbar:has(.navbar-toggler[aria-expanded="true"]) #navbar-collapse-3 .component-navbar-collapse,
    body.body-internal #block_3 #navbar-collapse-3.show .component-navbar-collapse {
        overflow: visible !important;
    }
    /* Stop child effects while opening/closing; this removes extra mobile paint work. */
    body.body-internal #block_3 #navbar-collapse-3.collapsing *,
    body.body-internal #block_3 #navbar-collapse-3.collapsing *::before,
    body.body-internal #block_3 #navbar-collapse-3.collapsing *::after {
        animation: none !important;
        transition: none !important;
    }
    /* Main menu grid */
    body.body-internal #block_3 #navbar-collapse-3 .navbar-nav-sidebar-menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 9px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        color: #173858 !important;
        -webkit-text-fill-color: #173858 !important;
        background: #eef6ff !important;
        border: 1px solid #d8e9f9 !important;
        border-radius: 11px !important;
        box-shadow: 0 3px 0 #9cc9ef !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 750 !important;
        text-decoration: none !important;
        overflow: hidden !important;
        transition: background-color .12s ease, border-color .12s ease !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private:hover,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private:focus {
        color: #173858 !important;
        -webkit-text-fill-color: #173858 !important;
        background: #e5f2ff !important;
        border-color: #c8e0f5 !important;
        text-decoration: none !important;
        outline: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #0d6fd7 !important;
        -webkit-text-fill-color: #0d6fd7 !important;
        background: #ffffff !important;
        border: 1px solid #acc9e7 !important;
        border-radius: 9px !important;
        box-shadow: 0 2px 4px rgba(62, 31, 122, .07) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-icon>span,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-icon>span::before {
        color: #0d6fd7 !important;
        -webkit-text-fill-color: #0d6fd7 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
    }
    /* Selected page */
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-active__navbar-private>.component-navbar-nav-link__navbar-private {
        color: #332300 !important;
        -webkit-text-fill-color: #332300 !important;
        background: #ffbd18 !important;
        border-color: #edae09 !important;
        box-shadow: 0 4px 0 #d19000 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-active__navbar-private .component-navbar-nav-link-icon,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-active__navbar-private .component-navbar-nav-link-icon>span,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link-active__navbar-private .component-navbar-nav-link-icon>span::before {
        color: #3e2b00 !important;
        -webkit-text-fill-color: #3e2b00 !important;
        background: #fff7d9 !important;
        border-color: #f2d27b !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-item .badge {
        margin-left: auto !important;
        padding: 4px 7px !important;
        color: #392000 !important;
        -webkit-text-fill-color: #392000 !important;
        background: #ffbd00 !important;
        border: 1px solid rgba(196, 132, 0, .18) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }
    /* Balance and currency selector */
    body.body-internal #block_3 #navbar-collapse-3 .navbar-nav-currencies {
        width: 100% !important;
        margin: 16px 0 14px !important;
        padding: 16px 0 0 !important;
        display: block !important;
        clear: both !important;
        border-top: 1px dashed #d6e2ef !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown-container,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name {
        position: relative !important;
        min-height: 52px !important;
        padding: 12px 46px 12px 15px !important;
        display: flex !important;
        align-items: center !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-radius: 11px !important;
        box-shadow: 0 3px 0 #68aaef !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: .1px !important;
        cursor: pointer !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name::after {
        content: "" !important;
        position: absolute !important;
        right: 17px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        margin-top: -5px !important;
        border-right: 2px solid rgba(255, 255, 255, .96) !important;
        border-bottom: 2px solid rgba(255, 255, 255, .96) !important;
        transform: rotate(45deg) !important;
        transform-origin: center !important;
        background: transparent !important;
        transition: transform .20s cubic-bezier(.16, 1, .3, 1), margin-top .20s cubic-bezier(.16, 1, .3, 1) !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown.show .balance-dropdown__name::after {
        margin-top: -1px !important;
        transform: rotate(225deg) !important;
    }
    /*
   * Original-style currency dropdown:
   * opens downward as one clean vertical list, without cramped columns.
   */
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__container {
        position: static !important;
        inset: auto !important;
        float: none !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 7px !important;
        color: #35105f !important;
        background: #f8f5ff !important;
        border: 1px solid #d9cdf1 !important;
        border-radius: 11px !important;
        box-shadow: 0 7px 15px rgba(73, 30, 137, .09) !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list.show,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__container.show {
        display: block !important;
    }

    body.body-internal #block_3 #navbar-collapse-3 #currencies-list>li:last-child,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .dropdown-item:last-child,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a:last-child {
        margin-bottom: 0 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list>li:hover,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list>li:focus,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .dropdown-item:hover,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .dropdown-item:focus,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a:hover,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a:focus {
        color: #4b11b8 !important;
        -webkit-text-fill-color: #4b11b8 !important;
        background: #f0eaff !important;
        border-color: #ccb9ed !important;
        text-decoration: none !important;
        outline: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list>li:active,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .dropdown-item:active,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a:active {
        transform: scale(.985) !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .active,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list [aria-current="true"],
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list [aria-selected="true"] {
        color: #332300 !important;
        -webkit-text-fill-color: #332300 !important;
        background: #ffbd18 !important;
        border-color: #e7a800 !important;
    }
    /* Small click feedback only — no heavy animation. */
    body.body-internal #block_3 .navbar-toggler:active,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private:active,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name:active {
        transform: scale(.985) !important;
    }
    body.body-internal #block_3 .navbar-toggler,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    /* Account / logout */
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse>.navbar-nav:last-child {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse>.navbar-nav:last-child .component-navbar-nav-link__navbar-private {
        justify-content: center !important;
        min-height: 46px !important;
        background: #f7faff !important;
        box-shadow: 0 3px 0 #c9dcee !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 a[href="/logout"] {
        color: #9f2c3b !important;
        -webkit-text-fill-color: #9f2c3b !important;
        background: #fff2f4 !important;
        border-color: #ffd7dc !important;
        box-shadow: 0 3px 0 #efb9c1 !important;
    }
}

@media (max-width: 379.98px) {
    body.body-internal #block_3 #navbar-collapse-3 .navbar-nav-sidebar-menu,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse>.navbar-nav:last-child {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 .navbar-toggler,
    body.body-internal #block_3 #navbar-collapse-3,
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-nav-link__navbar-private,
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name::after {
        transition: none !important;
    }
}

/* Final mobile performance refinement: one height animation, no child repaint animation. */

@media (max-width: 991.98px) {
    body.body-internal #block_3 #navbar-collapse-3 .component-navbar-collapse {
        transform: translateZ(0) !important;
        opacity: 1 !important;
        transition: none !important;
        backface-visibility: hidden !important;
    }
    /* Keep all visible spacing inside the measured inner panel.
     The outer collapse can now close cleanly to a true 0px height. */
    body.body-internal #block_3 #navbar-collapse-3.collapsing {
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   HOW TO USE — EDITABLE LINK BUTTON
   Desktop: bottom of sidebar. Mobile: below all menu items,
   immediately above the balance/currency section.
   ========================================================= */

body.body-internal #block_3 .sr-how-to-use-wrap {
    width: 100%;
    box-sizing: border-box;
}

body.body-internal #block_3 .sr-how-to-use-button,
body.body-internal #block_3 .sr-how-to-use-button:link,
body.body-internal #block_3 .sr-how-to-use-button:visited {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5312cb !important;
    -webkit-text-fill-color: #5312cb !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f2ff 100%);
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 12px;
    box-shadow: 0 7px 17px rgba(42, 4, 108, .18), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(94, 21, 226, .07);
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.body-internal #block_3 .sr-how-to-use-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -65%;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .62), transparent);
    transform: skewX(-18deg);
    transition: left .48s ease;
}

body.body-internal #block_3 .sr-how-to-use-button:hover,
body.body-internal #block_3 .sr-how-to-use-button:focus {
    color: #4c0fbd !important;
    -webkit-text-fill-color: #4c0fbd !important;
    background: linear-gradient(180deg, #ffffff 0%, #f1e9ff 100%);
    box-shadow: 0 9px 20px rgba(42, 4, 108, .22), inset 0 1px 0 #ffffff;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none !important;
}

body.body-internal #block_3 .sr-how-to-use-button:hover::after,
body.body-internal #block_3 .sr-how-to-use-button:focus::after {
    left: 125%;
}

body.body-internal #block_3 .sr-how-to-use-button:active {
    transform: scale(.985);
}

body.body-internal #block_3 .sr-how-to-use-icon {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(145deg, #7723ff 0%, #5410d4 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    box-shadow: 0 4px 9px rgba(73, 13, 178, .24), inset 0 1px 0 rgba(255, 255, 255, .26);
}

body.body-internal #block_3 .sr-how-to-use-icon svg {
    display: block;
    width: 19px;
    height: 19px;
}

body.body-internal #block_3 .sr-how-to-use-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    display: block;
}

body.body-internal #block_3 .sr-how-to-use-title,
body.body-internal #block_3 .sr-how-to-use-subtitle {
    display: block;
}

body.body-internal #block_3 .sr-how-to-use-title {
    color: #4f12bf;
    -webkit-text-fill-color: #4f12bf;
    font-size: 13.5px;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: .05px;
}

body.body-internal #block_3 .sr-how-to-use-subtitle {
    margin-top: 3px;
    color: #78649b;
    -webkit-text-fill-color: #78649b;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 650;
}

body.body-internal #block_3 .sr-how-to-use-arrow {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6a20db;
    font-size: 17px;
    line-height: 1;
}

/* Desktop sidebar placement: after every menu item. */

body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap {
    margin: 11px 12px 18px;
    width: calc(100% - 24px);
}

/* Mobile placement: after all menu items and directly above balance. */

@media (max-width: 991.98px) {
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-wrap {
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-button {
        min-height: 58px;
        color: #173858 !important;
        -webkit-text-fill-color: #173858 !important;
        background: linear-gradient(180deg, #f5faff 0%, #e9f5ff 100%);
        border-color: #d3e7f8;
        box-shadow: 0 3px 0 #91c2ec, 0 6px 13px rgba(31, 80, 125, .08);
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-title {
        color: #173858;
        -webkit-text-fill-color: #173858;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-subtitle {
        color: #64809c;
        -webkit-text-fill-color: #64809c;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-icon {
        background: linear-gradient(145deg, #7020f2 0%, #5312cf 100%);
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-how-to-use-arrow {
        color: #0d6fd7;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 .sr-how-to-use-button,
    body.body-internal #block_3 .sr-how-to-use-button::after {
        transition: none !important;
    }
}

/* =========================================================
   HOW TO USE — SINGLE RESPONSIVE INSTANCE + FINAL ALIGNMENT
   Desktop: only sidebar copy is visible.
   Mobile: only collapsible-menu copy is visible above balance.
   ========================================================= */

/* The top-navbar copy must never appear on desktop. */

body.body-internal #block_3 #navbar-collapse-3>.component-navbar-collapse>.sr-how-to-use-wrap {
    display: none !important;
}

@media (min-width: 992px) {
    /* Make the sidebar content a full-height column so the button sits cleanly
     at the bottom without absolute positioning or overlap. */
    body.body-internal #block_3 .sidebar-block__left,
    body.body-internal #block_3 .component-sidebar_wrapper,
    body.body-internal #block_3 .component-sidebar__menu {
        min-height: 100% !important;
    }
    body.body-internal #block_3 .component-sidebar__menu {
        display: flex !important;
        flex-direction: column !important;
    }
    body.body-internal #block_3 .sidebar-block__left-menu {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap {
        display: block !important;
        width: calc(100% - 20px) !important;
        margin: auto 10px 14px !important;
        padding: 0 !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap .sr-how-to-use-button {
        min-height: 62px !important;
        padding: 10px 11px !important;
        gap: 9px !important;
        border-radius: 11px !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap .sr-how-to-use-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap .sr-how-to-use-title {
        font-size: 12.8px !important;
        line-height: 1.15 !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap .sr-how-to-use-subtitle {
        margin-top: 2px !important;
        font-size: 9.2px !important;
        line-height: 1.22 !important;
    }
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap .sr-how-to-use-arrow {
        width: 18px !important;
        min-width: 18px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 991.98px) {
    /* Sidebar is not the mobile button location. */
    body.body-internal #block_3 .component-sidebar__menu>.sr-how-to-use-wrap {
        display: none !important;
    }
    /* Show exactly one copy inside the opened mobile menu. */
    body.body-internal #block_3 #navbar-collapse-3>.component-navbar-collapse>.sr-how-to-use-wrap {
        display: block !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }
}

/* =========================================================
   COMPACT CURRENCY LOGO — keep the original balance design.
   The logo sits beside the existing dropdown arrow and the
   whole balance control remains the same dropdown trigger.
   ========================================================= */

body.body-internal #block_3 .sr-balance-currency-trigger {
    position: relative !important;
    padding-right: 74px !important;
}

body.body-internal #block_3 .sr-balance-currency-value {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

body.body-internal #block_3 .sr-balance-currency-logo {
    position: absolute !important;
    top: 50% !important;
    right: 34px !important;
    width: 25px !important;
    height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    cursor: pointer !important;
    transition: transform .16s ease, background-color .16s ease !important;
}

body.body-internal #block_3 .sr-balance-currency-logo img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 3px rgba(25, 7, 70, .16)) !important;
}

body.body-internal #block_3 .sr-balance-currency-trigger:hover .sr-balance-currency-logo,
body.body-internal #block_3 .balance-dropdown.show .sr-balance-currency-logo {
    background: rgba(255, 255, 255, .22) !important;
    transform: translateY(-50%) scale(1.04) !important;
}

@media (max-width: 991.98px) {
    body.body-internal #block_3 #navbar-collapse-3 .sr-balance-currency-trigger {
        padding-right: 76px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-balance-currency-logo {
        right: 35px !important;
        width: 25px !important;
        height: 25px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-balance-currency-logo img {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 .sr-balance-currency-logo {
        transition: none !important;
    }
}

/* =========================================================
   FINAL COMPACT BALANCE + PREMIUM CHEVRON REFINEMENT
   Keeps the original balance design and converter logic.
   ========================================================= */

body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger {
    min-height: 44px !important;
    padding: 8px 76px 8px 13px !important;
    align-items: center !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    box-shadow: 0 2px 0 #4309ad !important;
}

body.body-internal #block_3 .sr-balance-currency-value {
    position: relative !important;
    top: -1px !important;
    font-size: inherit !important;
    line-height: 1.1 !important;
}

/* Currency logo: compact and aligned directly beside the chevron. */

body.body-internal #block_3 .sr-balance-currency-logo {
    right: 42px !important;
    width: 23px !important;
    height: 23px !important;
    background: rgba(255, 255, 255, .11) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 3px rgba(32, 6, 92, .12) !important;
}

body.body-internal #block_3 .sr-balance-currency-logo img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* Small circular arrow control. */

body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 9px !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 1px 3px rgba(32, 6, 92, .12) !important;
    pointer-events: none !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}

body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    width: 7px !important;
    height: 7px !important;
    margin: -5px 0 0 !important;
    border: 0 !important;
    border-right: 1.8px solid rgba(255, 255, 255, .98) !important;
    border-bottom: 1.8px solid rgba(255, 255, 255, .98) !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), margin-top .22s cubic-bezier(.16, 1, .3, 1) !important;
}

body.body-internal #block_3 .balance-dropdown.show .balance-dropdown__name.sr-balance-currency-trigger::before {
    background: rgba(255, 255, 255, .20) !important;
    border-color: rgba(255, 255, 255, .34) !important;
}

body.body-internal #block_3 .balance-dropdown.show .balance-dropdown__name.sr-balance-currency-trigger::after {
    margin-top: -2px !important;
    transform: rotate(225deg) !important;
}

body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger:hover::before,
body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger:focus::before {
    background: rgba(255, 255, 255, .19) !important;
    border-color: rgba(255, 255, 255, .32) !important;
}

@media (max-width: 991.98px) {
    /* Shorter, centered separator placed closer to the balance control. */
    body.body-internal #block_3 #navbar-collapse-3 .navbar-nav-currencies {
        position: relative !important;
        margin: 11px 0 11px !important;
        padding: 11px 0 0 !important;
        border-top: 0 !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .navbar-nav-currencies::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: min(210px, 62%) !important;
        height: 1px !important;
        transform: translateX(-50%) !important;
        background: repeating-linear-gradient( 90deg, #d6e2ef 0 6px, transparent 6px 11px) !important;
        pointer-events: none !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .balance-dropdown__name.sr-balance-currency-trigger {
        min-height: 44px !important;
        padding: 8px 76px 8px 13px !important;
        font-size: 14px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-balance-currency-logo {
        right: 42px !important;
        width: 23px !important;
        height: 23px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 .sr-balance-currency-logo img {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger::before,
    body.body-internal #block_3 .balance-dropdown__name.sr-balance-currency-trigger::after {
        transition: none !important;
    }
}

/*
 * Compact, scalable currency menu.
 * Removes the old three-layer card effect: UL is the menu shell,
 * LI stays transparent, and only the clickable row receives a light hover.
 */

body.body-internal #block_3 #currencies-list.balance-dropdown__container,
body.body-internal #block_3 #currencies-list.dropdown-menu {
    
    width: max-content !important;
    max-width: min(240px, calc(100vw - 28px)) !important;
    max-height: 224px !important;
    margin-top: 6px !important;
    padding: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #35105f !important;
    background: #ffffff !important;
    border: 1px solid #ddd3ef !important;
    border-radius: 9px !important;
    box-shadow: 0 9px 22px rgba(48, 20, 91, .12) !important;
    scrollbar-width: thin;
    scrollbar-color: #c7b7e8 transparent;
}

body.body-internal #block_3 #currencies-list::-webkit-scrollbar {
    width: 5px;
}

body.body-internal #block_3 #currencies-list::-webkit-scrollbar-track {
    background: transparent;
}

body.body-internal #block_3 #currencies-list::-webkit-scrollbar-thumb {
    background: #c7b7e8;
    border-radius: 999px;
}

/* Flatten every possible LI/wrapper generated by currencies_dropdown. */

body.body-internal #block_3 #currencies-list>li,
body.body-internal #block_3 #currencies-list li,
body.body-internal #block_3 #currencies-list .dropdown-item-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

body.body-internal #block_3 #currencies-list>li::before,
body.body-internal #block_3 #currencies-list>li::after,
body.body-internal #block_3 #currencies-list li::before,
body.body-internal #block_3 #currencies-list li::after {
    display: none !important;
    content: none !important;
}



body.body-internal #block_3 #currencies-list>li+li,
body.body-internal #block_3 #currencies-list li+li {
    margin-top: 2px !important;
}

body.body-internal #block_3 #currencies-list a:hover,
body.body-internal #block_3 #currencies-list a:focus,
body.body-internal #block_3 #currencies-list .dropdown-item:hover,
body.body-internal #block_3 #currencies-list .dropdown-item:focus {
    color: #0d6fd7 !important;
    -webkit-text-fill-color: #0d6fd7 !important;
    background: #f3eeff !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* Active currency: subtle marker, not another large card. */

body.body-internal #block_3 #currencies-list a.active,
body.body-internal #block_3 #currencies-list .dropdown-item.active,
body.body-internal #block_3 #currencies-list a[aria-current="true"],
body.body-internal #block_3 #currencies-list a[aria-selected="true"],
body.body-internal #block_3 #currencies-list li.active>a {
    position: relative !important;
    color: #4a10b0 !important;
    -webkit-text-fill-color: #4a10b0 !important;
    background: #eee7ff !important;
    font-weight: 850 !important;
}

body.body-internal #block_3 #currencies-list a.active::after,
body.body-internal #block_3 #currencies-list .dropdown-item.active::after,
body.body-internal #block_3 #currencies-list a[aria-current="true"]::after,
body.body-internal #block_3 #currencies-list a[aria-selected="true"]::after,
body.body-internal #block_3 #currencies-list li.active>a::after {
    content: "✓" !important;
    display: inline-block !important;
    margin-left: auto !important;
    color: #0d6fd7 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

/* Keep nested text/icons compact if the converter provides them. */

body.body-internal #block_3 #currencies-list a>*,
body.body-internal #block_3 #currencies-list .dropdown-item>* {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body.body-internal #block_3 #currencies-list img,
body.body-internal #block_3 #currencies-list svg {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    flex: 0 0 17px !important;
    object-fit: contain !important;
}

@media (max-width: 991.98px) {
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list.balance-dropdown__container,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list.dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: 186px !important;
        margin: 6px 0 0 !important;
        padding: 4px !important;
    }
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list a,
    body.body-internal #block_3 #navbar-collapse-3 #currencies-list .dropdown-item {
        min-height: 31px !important;
        padding: 6px 9px !important;
        font-size: 11.8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.body-internal #block_3 #currencies-list a,
    body.body-internal #block_3 #currencies-list .dropdown-item {
        transition: none !important;
    }
}

/* New Order visual match — scoped only to this page. System/Twig logic is untouched. */

#block_22,
#block_22 * {
    box-sizing: border-box;
}

#block_22 {
    --ref-navy: #062b55;
    --ref-blue-soft: #e8f3ff;
    --ref-blue-line: #549bf7;
    --ref-yellow: #ffb900;
    --ref-red: #ff0000;
    --ref-white: #ffffff;
    color: var(--ref-navy);
    background: #eef8ff;
    padding: 10px 0 28px;
}

#block_22 .block-bg {
    background: #eef8ff !important;
}

#block_22 .container-fluid {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
}

#block_22 .new-order-form {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-left: -10px;
    margin-right: -10px;
}

#block_22 .new-order-form>[class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Force the two main cards to stay white even when the site's global theme uses blue cards. */

#block_22 .component_card .card.mother-order-card,
#block_22 .component_content_card .card.mother-notes-card {
    color: var(--ref-navy) !important;
    background: var(--ref-white) !important;
    background-image: none !important;
    border-radius: 10px !important;
}

#block_22 .component_card .card.mother-order-card {
    padding: 24px 22px 26px !important;
    border: 1px dashed #549bf7 !important;
    box-shadow: 0 0 0 1px rgba(210, 218, 224, .95), 0 8px 18px rgba(30, 55, 77, .18) !important;
}

#block_22 .component_content_card .card.mother-notes-card {
    padding: 24px 26px 24px !important;
    border: 3px dashed var(--ref-red) !important;
    box-shadow: none !important;
}

#block_22 .mother-order-card::before,
#block_22 .mother-order-card::after,
#block_22 .mother-notes-card::before,
#block_22 .mother-notes-card::after {
    display: none !important;
    content: none !important;
}

/* Compact horizontal platform buttons like the reference screenshot. */

#block_22 #new-order-cats.platforms {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px 5px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
}

#block_22 #new-order-cats .platforms-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#block_22 #new-order-cats .platforms-item__with-icon {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 8px 13px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    color: var(--ref-navy) !important;
    background: var(--ref-blue-soft) !important;
    background-image: none !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 11px !important;
    box-shadow: 0 2px 0 var(--ref-blue-line) !important;
    font-family: inherit !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    overflow: hidden !important;
}

#block_22 #new-order-cats .platforms-item__with-icon:hover {
    transform: translateY(-1px) !important;
    filter: brightness(.99) !important;
    box-shadow: 0 3px 0 #9bcaf3 !important;
}

#block_22 #new-order-cats .platforms-item__with-icon:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 0 #9bcaf3 !important;
}

#block_22 #new-order-cats .platforms-item__with-icon.active,
#block_22 #new-order-cats .platforms-item__with-icon.selected,
#block_22 #new-order-cats .platforms-item__with-icon.is-active,
#block_22 #new-order-cats .platforms-item.active .platforms-item__with-icon {
    color: #ffffff !important;
    background: #1678e8 !important;
    border-color: #1678e8 !important;
    box-shadow: 0 2px 0 #1678e8 !important;
}

#block_22 #new-order-cats .platforms-item__icon,
#block_22 #new-order-cats .platforms-item__icon svg {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    flex: 0 0 19px !important;
}

#block_22 #new-order-cats .platforms-item__title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* Form spacing and pale-blue controls. */

#block_22 .form-group {
    margin-bottom: 15px !important;
}

#block_22 .control-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--ref-navy) !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

#block_22 .form-control,
#block_22 .select2-container .select2-selection--single,
#block_22 .select2-container .select2-selection--multiple {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    color: var(--ref-navy) !important;
    background: var(--ref-blue-soft) !important;
    background-image: none !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 0 var(--ref-blue-line) !important;
    outline: none !important;
    font-size: 13.5px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

#block_22 .form-control {
    padding: 11px 13px !important;
}

#block_22 textarea.form-control,
#block_22 #neworder_fields textarea.form-control {
    height: auto !important;
    min-height: 150px !important;
    line-height: 1.55 !important;
}

#block_22 .form-control:focus,
#block_22 .select2-container--focus .select2-selection,
#block_22 .select2-container--open .select2-selection {
    border-color: #8fc4f2 !important;
    box-shadow: 0 2px 0 #79b8ed, 0 0 0 3px rgba(85, 166, 232, .12) !important;
}

#block_22 .select2-container {
    width: 100% !important;
}

#block_22 .select2-container .select2-selection--single .select2-selection__rendered {
    height: 46px !important;
    padding-left: 13px !important;
    padding-right: 36px !important;
    color: var(--ref-navy) !important;
    line-height: 46px !important;
    font-size: 13.5px !important;
}

#block_22 .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 8px !important;
}

#block_22 .input-wrapper {
    position: relative !important;
}

#block_22 .input-wrapper__prepend,
#block_22 .input-wrapper__append {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: var(--ref-navy) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#block_22 .input-wrapper__prepend {
    left: 4px !important;
}

#block_22 .input-wrapper__append {
    right: 4px !important;
}

#block_22 #unique-input {
    padding-left: 43px !important;
    padding-right: 43px !important;
}

#block_22 .search-results {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    max-height: 500px !important;
    margin-top: 6px !important;
    overflow-y: auto !important;
    color: var(--ref-navy) !important;
    background: #ffffff !important;
    border: 1px solid #cfe2f5 !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 26px rgba(30, 55, 77, .18) !important;
}

#block_22 #charge[readonly] {
    color: var(--ref-navy) !important;
    font-weight: 700 !important;
}

#block_22 .btn-big-primary {
    min-height: 48px !important;
    height: 48px !important;
    padding: 10px 18px !important;
    color: #ffffff !important;
    background: #1678e8 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 0 #0d5db9 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

#block_22 .btn-big-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 0 #0d5db9 !important;
}

#block_22 .btn-big-primary:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #0d5db9 !important;
}

#block_22 .alert {
    margin: 0 0 15px !important;
    padding: 13px 40px 13px 14px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

/* Right information panel, matching the white dashed reference card. */

#block_22 .mother-notes-card .text-center {
    margin: 0 0 34px !important;
}

#block_22 .mother-notes-card .text-center a {
    display: block !important;
    width: 72% !important;
    margin: 0 auto !important;
}

#block_22 .mother-notes-card .text-center img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#block_22 .mother-notes-card .new-order__content-title {
    margin: 0 0 12px !important;
}

#block_22 .mother-notes-card .new-order__content-title h5 {
    margin: 0 !important;
    color: var(--ref-navy) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

#block_22 .mother-notes-card .new-order__content-text {
    margin: 0 !important;
    padding: 0 0 15px !important;
    color: var(--ref-navy) !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

#block_22 .mother-notes-card .new-order__content-text p {
    margin: 0 0 15px !important;
    color: var(--ref-navy) !important;
    font-weight: 500 !important;
}

#block_22 .mother-notes-card .new-order__content-text ul {
    margin: 8px 0 0 !important;
    padding-left: 22px !important;
}

#block_22 .mother-notes-card .new-order__content-text li {
    color: var(--ref-navy) !important;
    font-weight: 500 !important;
}

#block_22 .mother-notes-card a {
    color: #086ee7 !important;
}

#block_22 .mother-support-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 43px !important;
    margin: 0 0 22px !important;
    padding: 9px 18px !important;
    color: #ffffff !important;
    background: #1678e8 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 0 #0d5db9 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

#block_22 .mother-support-btn:hover {
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Keep the user's own informational section, but remove the old blue-theme appearance. */

#block_22 .services-meaning-section {
    margin-top: 4px !important;
    padding-top: 18px !important;
    color: #314b67 !important;
    border-top: 1px dashed #cbd5df !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

#block_22 .services-meaning-section>h6,
#block_22 .services-meaning-section [class*="col-md-"]>strong {
    color: var(--ref-navy) !important;
}

#block_22 .services-meaning-section .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

#block_22 .services-meaning-section [class*="col-md-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Fix only the abbreviation/meaning spacing inside the information section. */

#block_22 .services-meaning-section ul>li {
    width: 100% !important;
    min-width: 0 !important;
}

#block_22 .services-meaning-section ul>li>span {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: baseline !important;
    column-gap: 6px !important;
    min-width: 0 !important;
}

#block_22 .services-meaning-section .service-short-code {
    display: block !important;
    min-width: 38px !important;
    color: var(--ref-navy) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

#block_22 .services-meaning-section .service-full-meaning {
    display: block !important;
    min-width: 0 !important;
    color: #314b67 !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1199.98px) {
    #block_22 #new-order-cats.platforms {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #block_22 .mother-notes-card .text-center a {
        width: 86% !important;
    }
}

@media (max-width: 991.98px) {
    #block_22 .new-order-form {
        display: block !important;
    }
    #block_22 .new-order-form>[class*="col-"]+[class*="col-"] {
        margin-top: 18px !important;
    }
    #block_22 .mother-notes-card .text-center a {
        width: 70% !important;
    }
}

@media (max-width: 575.98px) {
    #block_22 {
        padding-top: 6px !important;
    }
    #block_22 .container-fluid {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    #block_22 .component_card .card.mother-order-card,
    #block_22 .component_content_card .card.mother-notes-card {
        padding: 14px !important;
        border-radius: 9px !important;
    }
    #block_22 #new-order-cats.platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 6px !important;
        margin-bottom: 17px !important;
    }
    #block_22 #new-order-cats .platforms-item__with-icon {
        min-height: 43px !important;
        height: 43px !important;
        padding: 7px 10px !important;
    }
    #block_22 #new-order-cats .platforms-item__title {
        font-size: 11.5px !important;
    }
    #block_22 .mother-notes-card .text-center {
        margin-bottom: 22px !important;
    }
    #block_22 .mother-notes-card .text-center a {
        width: 100% !important;
    }
    #block_22 .mother-notes-card .new-order__content-text {
        font-size: 13px !important;
    }
}

/* V3 precision fixes: visible support CTA, full-width media, desktop labels/mobile icon-only. */

#block_22 .mother-notes-card .text-center {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

#block_22 .mother-notes-card .text-center>a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
}

#block_22 .mother-notes-card .text-center>a>img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}

#block_22 .mother-notes-card a.mother-support-btn,
#block_22 .mother-notes-card a.mother-support-btn:link,
#block_22 .mother-notes-card a.mother-support-btn:visited {
    display: inline-flex !important;
    width: auto !important;
    min-width: 122px !important;
    max-width: 100% !important;
    min-height: 43px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 19px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1678e8 !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 0 #0d5db9 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
}

#block_22 .mother-notes-card a.mother-support-btn:hover,
#block_22 .mother-notes-card a.mother-support-btn:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #0f70dd !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Desktop/tablet: icon and platform name remain visible. */

@media (min-width: 576px) {
    #block_22 #new-order-cats .platforms-item__title {
        display: block !important;
    }
}

/* Mobile: return to the original compact icon-only category selector. */

@media (max-width: 575.98px) {
    #block_22 #new-order-cats.platforms {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #block_22 #new-order-cats .platforms-item__with-icon {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 10px !important;
    }
    #block_22 #new-order-cats .platforms-item__title {
        display: none !important;
    }
    #block_22 #new-order-cats .platforms-item__icon,
    #block_22 #new-order-cats .platforms-item__icon svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex: 0 0 22px !important;
        margin: 0 !important;
    }
    #block_22 .mother-notes-card a.mother-support-btn {
        width: 100% !important;
    }
}

/* =========================================================
   SINGLE BALANCE + SPENT + ADD FUNDS
   Matches the New Order page: navy, pale blue, bright blue.
   Existing New Order logic remains unchanged.
   ========================================================= */

.wrapper-content__header .nwo-single-balance-wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 14px 7px;
}

#nwoSingleBalance {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 82px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #062b55;
    background: #ffffff;
    border: 1.2px dashed #cfe2f5;
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(30, 55, 77, .12), 0 2px 0 #b7d9f8;
}

#nwoSingleBalance::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -45px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(22, 120, 232, .055);
    pointer-events: none;
}

#nwoSingleBalance .nwo-single-balance__left {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

#nwoSingleBalance .nwo-single-balance__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d6fd7;
    background: #e8f3ff;
    border: 1px solid #d4e8fa;
    border-radius: 10px;
    box-shadow: 0 2px 0 #b7d9f8;
    font-size: 17px;
}

#nwoSingleBalance .nwo-single-balance__content {
    min-width: 0;
}

#nwoSingleBalance .nwo-single-balance__label {
    display: block;
    margin: 0 0 2px;
    color: #5e7590;
    font-size: 8.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .48px;
    text-transform: uppercase;
}

#nwoSingleBalance .nwo-single-balance__value {
    display: block;
    margin: 0;
    color: #062b55;
    -webkit-text-fill-color: #062b55;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.25px;
    overflow-wrap: anywhere;
}

#nwoSingleBalance .nwo-single-balance__spent {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: #6c8197;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 650;
}

#nwoSingleBalance .nwo-single-balance__spent-label {
    color: #6c8197;
}

#nwoSingleBalance .nwo-single-balance__spent-value {
    color: #173f68;
    -webkit-text-fill-color: #173f68;
    font-weight: 850;
}

#nwoSingleBalance .nwo-single-balance__add,
#nwoSingleBalance .nwo-single-balance__add:link,
#nwoSingleBalance .nwo-single-balance__add:visited {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 41px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1678e8;
    border: 0;
    border-radius: 9px;
    box-shadow: 0 4px 0 #0d5db9;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#nwoSingleBalance .nwo-single-balance__add:hover,
#nwoSingleBalance .nwo-single-balance__add:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #0f70dd;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #0d5db9;
    text-decoration: none !important;
    outline: none;
}

#nwoSingleBalance .nwo-single-balance__add:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0d5db9;
}

@media (max-width: 575.98px) {
    .wrapper-content__header .nwo-single-balance-wrap {
        padding: 8px 9px 5px;
    }
    #nwoSingleBalance {
        min-height: 76px;
        padding: 12px;
        gap: 9px;
        border-radius: 10px;
    }
    #nwoSingleBalance .nwo-single-balance__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 9px;
        font-size: 15px;
    }
    #nwoSingleBalance .nwo-single-balance__value {
        font-size: 17px;
    }
    #nwoSingleBalance .nwo-single-balance__spent {
        margin-top: 4px;
        font-size: 8.2px;
    }
    #nwoSingleBalance .nwo-single-balance__add {
        min-height: 37px;
        padding: 9px 10px;
        gap: 5px;
        font-size: 9.3px;
    }
}

@media (max-width: 350px) {
    #nwoSingleBalance {
        padding: 10px;
    }
    #nwoSingleBalance .nwo-single-balance__icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }
    #nwoSingleBalance .nwo-single-balance__value {
        font-size: 15px;
    }
    #nwoSingleBalance .nwo-single-balance__add span {
        display: none;
    }
    #nwoSingleBalance .nwo-single-balance__add {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }
}

/* =========================================================
   NEW ORDER HEADER BACKGROUND MATCH
   Matches the main New Order page background exactly.
   ========================================================= */

.wrapper-content>.wrapper-content__header,
.wrapper-content__header,
.wrapper-content__header .nwo-single-balance-wrap {
    background: #eef8ff !important;
    background-image: none !important;
}

.wrapper-content__header {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   CATEGORY + SERVICE OPTION BOXES — ORIGINAL WEBSITE COLORS
   Only the option row shape, border/line and service-ID badge are changed.
   Existing page colors, Twig values, filtering and order logic remain untouched.
   ========================================================= */

/* Keep the closed Category and Service fields in the page's original pale-blue style. */

#block_22 #neworder_category+.select2-container .select2-selection--single,
#block_22 #neworder_services+.select2-container .select2-selection--single {
    color: var(--ref-navy) !important;
    background: var(--ref-blue-soft) !important;
    background-image: none !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 0 var(--ref-blue-line) !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered,
#block_22 #neworder_services+.select2-container .select2-selection__rendered {
    color: var(--ref-navy) !important;
    -webkit-text-fill-color: var(--ref-navy) !important;
}

/* Applied only to the currently opened Category/Service Select2 dropdown. */

.nwo-original-category-dropdown,
.nwo-original-service-dropdown {
    overflow: hidden !important;
    padding: 8px !important;
    color: #062b55 !important;
    background: #ffffff !important;
    border: 1px solid #cfe2f5 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(30, 55, 77, .16) !important;
}

.nwo-original-category-dropdown .select2-search--dropdown,
.nwo-original-service-dropdown .select2-search--dropdown {
    padding: 0 0 8px !important;
    background: transparent !important;
}

.nwo-original-category-dropdown .select2-search__field,
.nwo-original-service-dropdown .select2-search__field {
    width: 100% !important;
    height: 42px !important;
    padding: 9px 12px !important;
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    caret-color: #1678e8 !important;
    background: #e8f3ff !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: 0 2px 0 #549bf7 !important;
    font-size: 13px !important;
}

.nwo-original-category-dropdown .select2-search__field::placeholder,
.nwo-original-service-dropdown .select2-search__field::placeholder {
    color: #6c8197 !important;
    -webkit-text-fill-color: #6c8197 !important;
}

.nwo-original-category-dropdown .select2-results,
.nwo-original-service-dropdown .select2-results,
.nwo-original-category-dropdown .select2-results__options,
.nwo-original-service-dropdown .select2-results__options {
    background: transparent !important;
}

.nwo-original-category-dropdown .select2-results__options,
.nwo-original-service-dropdown .select2-results__options {
    max-height: 524px !important;
    padding: 0 2px 0 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #8fc4f2 #eef8ff;
}

.nwo-original-category-dropdown .select2-results__options::-webkit-scrollbar,
.nwo-original-service-dropdown .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.nwo-original-category-dropdown .select2-results__options::-webkit-scrollbar-track,
.nwo-original-service-dropdown .select2-results__options::-webkit-scrollbar-track {
    background: #eef8ff;
    border-radius: 10px;
}

.nwo-original-category-dropdown .select2-results__options::-webkit-scrollbar-thumb,
.nwo-original-service-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background: #8fc4f2;
    border-radius: 10px;
}

/* Screenshot-like separated boxes, but using the page's original light colors. */

.nwo-original-category-dropdown .select2-results__option,
.nwo-original-service-dropdown .select2-results__option {
    position: relative !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 0 8px !important;
    padding: 10px 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #e8f3ff !important;
    border: 1px solid #d7e8f8 !important;
    border-left: 4px solid #549bf7 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 0 rgba(84, 155, 247, .38) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease !important;
}

.nwo-original-category-dropdown .select2-results__option:nth-child(even),
.nwo-original-service-dropdown .select2-results__option:nth-child(even) {
    background: #f3f9ff !important;
}

.nwo-original-category-dropdown .select2-results__option:last-child,
.nwo-original-service-dropdown .select2-results__option:last-child {
    margin-bottom: 0 !important;
}

/* Hover/selected stays light; no black, purple or dark dropdown background. */

.nwo-original-category-dropdown .select2-results__option--highlighted,
.nwo-original-service-dropdown .select2-results__option--highlighted,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #ffffff !important;
    border-color: #8fc4f2 !important;
    border-left-color: #1678e8 !important;
    box-shadow: 0 3px 0 rgba(84, 155, 247, .55), 0 6px 14px rgba(30, 55, 77, .08) !important;
    font-weight: 750 !important;
}

.nwo-original-category-dropdown .select2-results__option--highlighted,
.nwo-original-service-dropdown .select2-results__option--highlighted {
    transform: translateY(-1px) !important;
}

.nwo-original-category-dropdown .select2-results__option[aria-disabled="true"],
.nwo-original-service-dropdown .select2-results__option[aria-disabled="true"] {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.nwo-original-category-dropdown .select2-results__message,
.nwo-original-service-dropdown .select2-results__message {
    color: #5e7590 !important;
    -webkit-text-fill-color: #5e7590 !important;
    background: #f3f9ff !important;
    border-left-color: #d7e8f8 !important;
}

/* Category rows stay compact. */

.nwo-original-category-dropdown .select2-results__option {
    min-height: 42px !important;
}

/* Service rows use the same box layout as the supplied screenshot. */

.nwo-original-service-dropdown .select2-results__option {
    min-height: 60px !important;
    padding: 11px 13px !important;
}

.nwo-original-service-dropdown .nwo-service-id {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 24px !important;
    padding: 3px 7px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1678e8 !important;
    border: 1px solid #0d6fd7 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 0 #0d5db9 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.1px !important;
}

.nwo-original-service-dropdown .nwo-service-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
}

.nwo-original-service-dropdown .nwo-service-price {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: #173f68 !important;
    -webkit-text-fill-color: #173f68 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

@media (max-width: 575.98px) {
    .nwo-original-category-dropdown,
    .nwo-original-service-dropdown {
        padding: 7px !important;
        border-radius: 9px !important;
    }
    .nwo-original-category-dropdown .select2-results__options,
    .nwo-original-service-dropdown .select2-results__options {
        max-height: 350px !important;
    }
    .nwo-original-category-dropdown .select2-results__option {
        min-height: 40px !important;
        padding: 9px 10px !important;
        font-size: 12.5px !important;
    }
    .nwo-original-service-dropdown .select2-results__option {
        min-height: 56px !important;
        padding: 10px 9px !important;
        gap: 7px !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        min-width: 38px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 11px !important;
    }
    .nwo-original-service-dropdown .nwo-service-name,
    .nwo-original-service-dropdown .nwo-service-price {
        font-size: 12px !important;
    }
}

/* Only the requested layout order changes: Order -> Description -> existing Important Notes. */

#block_22 .new-order-form {
    display: block !important;
}

#block_22 .new-order-form>.col-lg-7,
#block_22 .new-order-form>.col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#block_22 .new-order-form>.col-lg-5 {
    margin-top: 18px !important;
}

#block_22 .sr-service-description-under-order {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
    width: 100%;
    margin-top: 18px;
}

#block_22 .sr-service-details,
#block_22 .sr-service-details * {
    box-sizing: border-box;
}

#block_22 .sr-service-details {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(121, 93, 255, .34);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(25, 27, 54, .08);
}

#block_22 .sr-service-details__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 14px 16px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(118deg, #6947ff 0%, #7d43ff 52%, #8e45f3 100%);
}

#block_22 .sr-service-details__header::before,
#block_22 .sr-service-details__header::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .13);
    transform: rotate(45deg);
}

#block_22 .sr-service-details__header::before {
    width: 150px;
    height: 150px;
    right: 55px;
    top: -102px;
}

#block_22 .sr-service-details__header::after {
    width: 95px;
    height: 95px;
    right: -34px;
    bottom: -67px;
}

#block_22 .sr-service-details__platform {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
}

#block_22 .sr-service-details__platform img {
    display: block;
    width: 46px !important;
    height: 46px !important;
    max-width: 100%;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

#block_22 .sr-service-details__heading {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

#block_22 .sr-service-details__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .75);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#block_22 .sr-service-details__heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 13.5px !important;
    font-weight: 750;
    line-height: 1.36 !important;
    overflow-wrap: anywhere;
}

#block_22 .sr-service-details__id {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    max-width: none;
    min-width: 58px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 9px;
    background: rgba(28, 15, 88, .18);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#block_22 .sr-service-details__body {
    padding: 17px;
    background: #ffffff;
}

#block_22 .sr-service-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#block_22 .sr-service-meta-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 62px;
    padding: 11px 12px;
    border: 1px solid #d9e7ea;
    border-radius: 12px;
    background: #f4fbfc;
}

#block_22 .sr-service-meta-card--wide {
    grid-column: 1 / -1;
}

#block_22 .sr-service-meta-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
}

#block_22 .sr-service-meta-card__icon img {
    display: block;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

#block_22 .sr-service-meta-card__content {
    min-width: 0;
    display: block;
}

#block_22 .sr-service-meta-card__content small {
    display: block;
    margin-bottom: 2px;
    color: #6c7a8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

#block_22 .sr-service-meta-card__content strong {
    display: block;
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#block_22 .sr-service-meta-card--wide .sr-service-meta-card__content strong {
    white-space: nowrap;
    text-overflow: ellipsis;
}

#block_22 .sr-service-description-block {
    margin-top: 17px;
}

#block_22 .sr-service-description-block__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

#block_22 .sr-service-description-block__title span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
}

#block_22 .sr-service-description-block__title span img {
    display: block;
    width: 29px !important;
    height: 29px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

#block_22 .sr-service-description-block__title h4 {
    margin: 0;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}

#block_22 #description_new.sr-auto-description {
    display: block;
    width: 100%;
    min-height: 190px;
    margin: 0;
    padding: 15px 16px 19px;
    border: 1px solid #d9e7ea;
    border-radius: 12px;
    background: #f4fbfc;
    color: #263247;
    font-size: 13px;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

#block_22 #description_new.sr-auto-description p:last-child,
#block_22 #description_new.sr-auto-description ul:last-child,
#block_22 #description_new.sr-auto-description ol:last-child {
    margin-bottom: 0;
}

#block_22 #description_new.sr-auto-description a {
    color: #4d44d5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#block_22 .sr-service-meta-card.is-hidden,
#block_22 .sr-service-description-block.is-hidden {
    display: none !important;
}

#block_22 .sr-description-placeholder {
    display: flex;
    align-items: center;
    min-height: 155px;
    color: #7b8798;
    font-size: 13px;
}

#block_22 #neworder_fields #service_description,
#block_22 #neworder_fields label[for="service_description"],
#block_22 #neworder_fields .sr-source-description-group,
#block_22 #neworder_fields .sr-source-average-group {
    display: none !important;
}

.dashboard.nightmode #block_22 .sr-service-details,
body.dark-mode #block_22 .sr-service-details,
html.dark-mode #block_22 .sr-service-details,
[data-theme="dark"] #block_22 .sr-service-details {
    border-color: #3a4062;
    background: #171a2b;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.dashboard.nightmode #block_22 .sr-service-details__body,
body.dark-mode #block_22 .sr-service-details__body,
html.dark-mode #block_22 .sr-service-details__body,
[data-theme="dark"] #block_22 .sr-service-details__body {
    background: #171a2b;
}

.dashboard.nightmode #block_22 .sr-service-meta-card,
.dashboard.nightmode #block_22 #description_new,
body.dark-mode #block_22 .sr-service-meta-card,
body.dark-mode #block_22 #description_new,
html.dark-mode #block_22 .sr-service-meta-card,
html.dark-mode #block_22 #description_new,
[data-theme="dark"] #block_22 .sr-service-meta-card,
[data-theme="dark"] #block_22 #description_new {
    border-color: #343a59 !important;
    background: #1d2135 !important;
}

.dashboard.nightmode #block_22 .sr-service-meta-card__content strong,
.dashboard.nightmode #block_22 .sr-service-description-block__title h4,
.dashboard.nightmode #block_22 #description_new,
.dashboard.nightmode #block_22 #description_new *,
body.dark-mode #block_22 .sr-service-meta-card__content strong,
body.dark-mode #block_22 .sr-service-description-block__title h4,
body.dark-mode #block_22 #description_new,
body.dark-mode #block_22 #description_new *,
html.dark-mode #block_22 .sr-service-meta-card__content strong,
html.dark-mode #block_22 .sr-service-description-block__title h4,
html.dark-mode #block_22 #description_new,
html.dark-mode #block_22 #description_new *,
[data-theme="dark"] #block_22 .sr-service-meta-card__content strong,
[data-theme="dark"] #block_22 .sr-service-description-block__title h4,
[data-theme="dark"] #block_22 #description_new,
[data-theme="dark"] #block_22 #description_new * {
    color: #e9edf7 !important;
}

.dashboard.nightmode #block_22 .sr-service-meta-card__content small,
body.dark-mode #block_22 .sr-service-meta-card__content small,
html.dark-mode #block_22 .sr-service-meta-card__content small,
[data-theme="dark"] #block_22 .sr-service-meta-card__content small {
    color: #aab4c8;
}

@media (max-width: 767.98px) {
    #block_22 .new-order-form>.col-lg-5 {
        margin-top: 15px !important;
    }
    #block_22 .sr-service-description-under-order {
        margin-top: 15px;
    }
    #block_22 .sr-service-details {
        border-radius: 14px;
    }
    #block_22 .sr-service-details__header {
        min-height: 66px;
        padding: 11px 12px;
        gap: 8px;
    }
    #block_22 .sr-service-details__platform {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
    #block_22 .sr-service-details__platform img {
        width: 36px !important;
        height: 36px !important;
    }
    #block_22 .sr-service-details__heading h3,
    #block_22 #sr-service-title {
        max-width: 100%;
        font-size: 11.5px !important;
        line-height: 1.34 !important;
        overflow-wrap: anywhere !important;
        word-break: normal;
    }
    #block_22 .sr-service-details__id {
        max-width: none;
        min-width: 58px;
        padding: 5px 8px;
        font-size: 9px;
    }
    #block_22 .sr-service-details__body {
        padding: 13px;
    }
    #block_22 .sr-service-meta-grid {
        gap: 9px;
    }
    #block_22 .sr-service-meta-card {
        min-height: 58px;
        padding: 9px 10px;
        gap: 9px;
    }
    #block_22 .sr-service-meta-card__icon {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }
    #block_22 .sr-service-meta-card__icon img {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
        max-height: 27px !important;
    }
    #block_22 .sr-service-meta-card__content small {
        font-size: 9px;
    }
    #block_22 .sr-service-meta-card__content strong {
        font-size: 11.5px;
    }
    #block_22 #description_new.sr-auto-description {
        min-height: 145px;
        padding: 13px 13px 18px;
        font-size: 12.5px;
        line-height: 1.6;
    }
    #block_22 .sr-description-placeholder {
        min-height: 112px;
    }
    #block_22 .sr-service-details__eyebrow {
        font-size: 7.5px !important;
        letter-spacing: .075em;
    }
}

@media (max-width: 420px) {
    #block_22 .sr-service-meta-grid {
        grid-template-columns: 1fr;
    }
    #block_22 .sr-service-meta-card--wide {
        grid-column: auto;
    }
}

/* Final hover/touch readability fix — keeps the original light website colors. */

.nwo-original-category-dropdown .select2-results__option:hover,
.nwo-original-service-dropdown .select2-results__option:hover,
.nwo-original-category-dropdown .select2-results__option--highlighted,
.nwo-original-service-dropdown .select2-results__option--highlighted,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-category-dropdown .select2-results__option--selected,
.nwo-original-service-dropdown .select2-results__option--selected {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #f3f9ff !important;
    background-image: none !important;
    border-color: #8fc4f2 !important;
    border-left-color: #1678e8 !important;
}

/* Stop the global theme from turning option text white/unclear on hover or touch. */

.nwo-original-category-dropdown .select2-results__option:hover *,
.nwo-original-category-dropdown .select2-results__option--highlighted *,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"] *,
.nwo-original-category-dropdown .select2-results__option--selected * {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
}

.nwo-original-service-dropdown .select2-results__option:hover .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option--highlighted .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-name {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
}

.nwo-original-service-dropdown .select2-results__option:hover .nwo-service-price,
.nwo-original-service-dropdown .select2-results__option--highlighted .nwo-service-price,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-price,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-price {
    color: #173f68 !important;
    -webkit-text-fill-color: #173f68 !important;
}

/* Service ID badge stays readable and unchanged. */

.nwo-original-service-dropdown .select2-results__option:hover .nwo-service-id,
.nwo-original-service-dropdown .select2-results__option--highlighted .nwo-service-id,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-id,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-id {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1678e8 !important;
}

/* Prevent click/touch from selecting the option text with the theme's blue/purple selection color. */

.nwo-original-category-dropdown .select2-results__option,
.nwo-original-category-dropdown .select2-results__option *,
.nwo-original-service-dropdown .select2-results__option,
.nwo-original-service-dropdown .select2-results__option * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.nwo-original-category-dropdown .select2-results__option::selection,
.nwo-original-category-dropdown .select2-results__option *::selection,
.nwo-original-service-dropdown .select2-results__option::selection,
.nwo-original-service-dropdown .select2-results__option *::selection {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
}

.nwo-original-category-dropdown .select2-results__option::-moz-selection,
.nwo-original-category-dropdown .select2-results__option *::-moz-selection,
.nwo-original-service-dropdown .select2-results__option::-moz-selection,
.nwo-original-service-dropdown .select2-results__option *::-moz-selection {
    color: inherit !important;
    background: transparent !important;
}

/* Mouse-down/touch-down also keeps the same light box and readable text. */

.nwo-original-category-dropdown .select2-results__option:active,
.nwo-original-category-dropdown .select2-results__option:focus,
.nwo-original-service-dropdown .select2-results__option:active,
.nwo-original-service-dropdown .select2-results__option:focus {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #f3f9ff !important;
    background-image: none !important;
    outline: none !important;
}

/* =========================================================
   MOBILE COMPACT DROPDOWN FIX
   Keeps the existing outer box design and original colors.
   Only reduces unnecessary height/gaps and removes the extra
   white box behind category/service names.
   ========================================================= */

/* Remove the theme's extra inner white rectangle behind option text/icons. */

.nwo-original-category-dropdown .select2-results__option>*,
.nwo-original-service-dropdown .select2-results__option>* {
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.nwo-original-category-dropdown .select2-results__option>* {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.nwo-original-service-dropdown .nwo-service-name,
.nwo-original-service-dropdown .nwo-service-price {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* Keep only the service-ID badge as a small box. */

.nwo-original-service-dropdown .nwo-service-id {
    background: #1678e8 !important;
    border: 1px solid #0d6fd7 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 0 #0d5db9 !important;
    padding: 3px 7px !important;
}

@media (max-width: 575.98px) {
    .nwo-original-category-dropdown,
    .nwo-original-service-dropdown {
        padding: 5px !important;
        border-radius: 8px !important;
    }
    .nwo-original-category-dropdown .select2-results__options,
    .nwo-original-service-dropdown .select2-results__options {
        max-height: 300px !important;
        padding-right: 1px !important;
    }
    /* Category list: same box look, but thinner and closer together. */
    .nwo-original-category-dropdown .select2-results__option {
        min-height: 36px !important;
        margin-bottom: 5px !important;
        padding: 7px 9px !important;
        gap: 6px !important;
        border-left-width: 4px !important;
        border-radius: 7px !important;
        box-shadow: 0 1px 0 rgba(84, 155, 247, .35) !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }
    /* Service list: compact 3-column row — ID | name | price. */
    .nwo-original-service-dropdown .select2-results__option {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 7px !important;
        min-height: 46px !important;
        margin-bottom: 5px !important;
        padding: 7px 8px !important;
        border-left-width: 4px !important;
        border-radius: 7px !important;
        box-shadow: 0 1px 0 rgba(84, 155, 247, .35) !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        min-width: 36px !important;
        min-height: 22px !important;
        padding: 3px 5px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        min-width: 0 !important;
        font-size: 11.3px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        align-self: center !important;
        margin-left: 0 !important;
        font-size: 10.8px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }
    .nwo-original-category-dropdown .select2-results__option:last-child,
    .nwo-original-service-dropdown .select2-results__option:last-child {
        margin-bottom: 0 !important;
    }
}

/* Extra-small phones: keep all three parts visible without creating tall rows. */

@media (max-width: 380px) {
    .nwo-original-service-dropdown .select2-results__option {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        column-gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        min-width: 33px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 10px !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        font-size: 10.7px !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        font-size: 10px !important;
    }
}

/* =========================================================
   MOBILE FULL SERVICE NAME FIX
   Keeps the compact box style, but removes every ellipsis/
   two-line clamp so the complete service name stays visible.
   ========================================================= */

@media (max-width: 575.98px) {
    /* Let every service row grow only as much as its full name needs. */
    .nwo-original-service-dropdown .select2-results__option {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        column-gap: 7px !important;
        row-gap: 2px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 7px 8px !important;
    }
    /* ID remains the only small badge and stays beside the full name. */
    .nwo-original-service-dropdown .nwo-service-id {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: start !important;
        margin-top: 1px !important;
    }
    /* Full service name: unlimited wrapping, no dots and no clipping. */
    .nwo-original-service-dropdown .nwo-service-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        font-size: 11.2px !important;
        line-height: 1.25 !important;
    }
    /* Price gets its own small line, so it no longer steals name width. */
    .nwo-original-service-dropdown .nwo-service-price {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: end !important;
        margin: 0 !important;
        padding-top: 1px !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }
    /* The selected Service field also shows its complete value instead of dots. */
    #block_22 #neworder_services+.select2-container .select2-selection--single {
        height: auto !important;
        min-height: 48px !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        height: auto !important;
        min-height: 46px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-right: 36px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
        font-size: 11.5px !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__arrow {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 380px) {
    .nwo-original-service-dropdown .select2-results__option {
        column-gap: 5px !important;
        padding: 6px !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        font-size: 10.7px !important;
        line-height: 1.23 !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        font-size: 10px !important;
    }
}

/* =========================================================
   FINAL MOBILE BALANCE FIX
   Full service names remain visible, but the rows now use a
   cleaner ID | full name | price layout with lighter spacing.
   No Twig, filtering, pricing or order logic is changed.
   ========================================================= */

@media (max-width: 575.98px) {
    .nwo-original-service-dropdown {
        padding: 5px !important;
    }
    .nwo-original-service-dropdown .select2-results__options {
        max-height: 340px !important;
        padding-right: 2px !important;
    }
    .nwo-original-service-dropdown .select2-results__option {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 62px !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 6px !important;
        padding: 8px 8px !important;
        border-left-width: 4px !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 0 rgba(84, 155, 247, .28) !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        min-width: 40px !important;
        min-height: 25px !important;
        margin: 0 !important;
        padding: 4px 5px !important;
        border-radius: 5px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        box-shadow: 0 1px 0 #0d5db9 !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #062b55 !important;
        -webkit-text-fill-color: #062b55 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        font-size: 12.4px !important;
        line-height: 1.28 !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #173f68 !important;
        -webkit-text-fill-color: #173f68 !important;
        font-size: 11.4px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    /* Keep the selected Service field natural: full text, but not oversized. */
    #block_22 #neworder_services+.select2-container .select2-selection--single {
        min-height: 54px !important;
        height: auto !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        min-height: 52px !important;
        height: auto !important;
        padding: 9px 38px 9px 12px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        font-size: 12.4px !important;
        line-height: 1.32 !important;
        font-weight: 550 !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__arrow {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 380px) {
    .nwo-original-service-dropdown .select2-results__option {
        grid-template-columns: 39px minmax(0, 1fr) 57px !important;
        column-gap: 6px !important;
        padding: 7px 6px !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        min-width: 37px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 10.6px !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        font-size: 11.8px !important;
        line-height: 1.26 !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        font-size: 10.7px !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        font-size: 11.9px !important;
    }
}

/* =========================================================
   FINAL CATEGORY SELECTED-STATE FIX
   - Every unselected category row uses one consistent color.
   - Hover remains subtle.
   - The actually selected category gets a clear pale-yellow
     highlight that matches the existing website accent.
   - Category/service logic is untouched.
   ========================================================= */

/* Remove the alternating category-row colors. */

.nwo-original-category-dropdown .select2-results__option,
.nwo-original-category-dropdown .select2-results__option:nth-child(even) {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #e8f3ff !important;
    background-image: none !important;
    border-color: #d7e8f8 !important;
    border-left-color: #549bf7 !important;
    box-shadow: 0 1px 0 rgba(84, 155, 247, .35) !important;
    font-weight: 650 !important;
    transform: none !important;
}

/* Only the row currently under the mouse/finger gets a light-blue hover. */

.nwo-original-category-dropdown .select2-results__option:hover:not(.nwo-current-selected):not([aria-selected="true"]),
.nwo-original-category-dropdown .select2-results__option--highlighted:not(.nwo-current-selected):not([aria-selected="true"]) {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #f3f9ff !important;
    background-image: none !important;
    border-color: #9ac9f2 !important;
    border-left-color: #1678e8 !important;
    box-shadow: 0 2px 0 rgba(84, 155, 247, .45) !important;
    font-weight: 700 !important;
    transform: none !important;
}

/* The chosen category stays clearly different after selection. */

.nwo-original-category-dropdown .select2-results__option.nwo-current-selected,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-category-dropdown .select2-results__option--selected,
.nwo-original-category-dropdown .select2-results__option.nwo-current-selected:hover,
.nwo-original-category-dropdown .select2-results__option.nwo-current-selected.select2-results__option--highlighted,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"].select2-results__option--highlighted {

    background: #fff5c7 !important;
    background-image: none !important;
    border-color: #f0cf63 !important;
    border-left-color: #ffb900 !important;
    box-shadow: 0 2px 0 rgba(225, 164, 0, .48), 0 0 0 1px rgba(255, 185, 0, .10) !important;
    font-weight: 800 !important;
    transform: none !important;
}

/* Keep all text/icons readable and remove any inner theme background. */

.nwo-original-category-dropdown .select2-results__option>*,
.nwo-original-category-dropdown .select2-results__option:hover>*,
.nwo-original-category-dropdown .select2-results__option--highlighted>*,
.nwo-original-category-dropdown .select2-results__option.nwo-current-selected>*,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"]>* {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   FINAL MOBILE POLISH
   - Category icon/text alignment corrected.
   - Closed Service selector stays one clean line.
   - Full service names remain available inside the opened list.
   - Selected service row has a subtle, readable accent.
   - No order/filter/Twig logic is changed.
   ========================================================= */

/* Closed Category field: keep the icon away from the edge and aligned with the text. */

#block_22 #neworder_category+.select2-container .select2-selection--single {
    min-height: 48px !important;
    height: 48px !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 38px 0 17px !important;
    line-height: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered img,
#block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_category+.select2-container .select2-selection__rendered i,
#block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"] {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    flex: 0 0 19px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Closed Service field: one clean row, exactly like Category. */

#block_22 #neworder_services+.select2-container .select2-selection--single {
    min-height: 48px !important;
    height: 48px !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered {
    display: block !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 39px 0 14px !important;
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    line-height: 46px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 13.2px !important;
    font-weight: 600 !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered>* {
    display: inline !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    line-height: inherit !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__arrow,
#block_22 #neworder_services+.select2-container .select2-selection__arrow {
    top: 0 !important;
    height: 46px !important;
    transform: none !important;
}

/* Selected Service result: clearly different, but still uses the website's light palette. */

.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-service-dropdown .select2-results__option--selected,
.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected:hover,
.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected.select2-results__option--highlighted,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #fff7d6 !important;
    background-image: none !important;
    border-color: #f0d36f !important;
    border-left-color: #ffb900 !important;
    box-shadow: 0 2px 0 rgba(225, 164, 0, .36), 0 0 0 1px rgba(255, 185, 0, .08) !important;
    transform: none !important;
}

.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-name {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    font-weight: 700 !important;
}

.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected .nwo-service-price,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-price,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-price {
    color: #173f68 !important;
    -webkit-text-fill-color: #173f68 !important;
}

.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected .nwo-service-id,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-id,
.nwo-original-service-dropdown .select2-results__option--selected .nwo-service-id {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;
    background: #ffcf33 !important;
    border-color: #e2aa00 !important;
    box-shadow: 0 1px 0 #d59f00 !important;
}

@media (max-width: 575.98px) {
    /* Opened list: full names remain visible without looking too thick or too tiny. */
    .nwo-original-service-dropdown .select2-results__option {
        display: grid !important;
        grid-template-columns: 43px minmax(0, 1fr) 61px !important;
        align-items: start !important;
        column-gap: 7px !important;
        row-gap: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 6px !important;
        padding: 8px 7px !important;
        border-radius: 9px !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        align-self: start !important;
        justify-self: start !important;
        min-width: 41px !important;
        min-height: 30px !important;
        padding: 0 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 11.2px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 12.8px !important;
        line-height: 1.32 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11.4px !important;
        line-height: 1.18 !important;
        font-weight: 750 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }
    #block_22 #neworder_category+.select2-container .select2-selection__rendered {
        padding-left: 16px !important;
        font-size: 13.4px !important;
        font-weight: 550 !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        padding-left: 14px !important;
        font-size: 13px !important;
        font-weight: 550 !important;
    }
}

@media (max-width: 380px) {
    .nwo-original-service-dropdown .select2-results__option {
        grid-template-columns: 40px minmax(0, 1fr) 57px !important;
        column-gap: 6px !important;
        padding: 7px 6px !important;
    }
    .nwo-original-service-dropdown .nwo-service-id {
        min-width: 38px !important;
        min-height: 28px !important;
        font-size: 10.8px !important;
    }
    .nwo-original-service-dropdown .nwo-service-name {
        font-size: 12.2px !important;
        line-height: 1.3 !important;
    }
    .nwo-original-service-dropdown .nwo-service-price {
        font-size: 10.8px !important;
    }
}

/* =========================================================
   FINAL SPACING + AUTOMATIC PRICE SEPARATOR FIX
   - Tightens Category icon/text spacing.
   - Tightens selected Service ID/name spacing.
   - Keeps the original colors and all existing logic.
   ========================================================= */

/* Category: remove the double gap created by both parent gap and icon margin. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered {
    padding-left: 12px !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span {
    gap: 5px !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered img,
#block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_category+.select2-container .select2-selection__rendered i,
#block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"] {
    margin: 0 !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Service: remove unused space before the ID and between ID/name. */

#block_22 #neworder_services+.select2-container .select2-selection__rendered {
    padding-left: 11px !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered>*,
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span>* {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered .badge,
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="badge"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service-id"] {
    margin: 0 5px 0 0 !important;
}

/* Keep the price aligned without adding any separator or dash. */

.nwo-original-service-dropdown .nwo-service-price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}

@media (max-width: 575.98px) {
    #block_22 #neworder_category+.select2-container .select2-selection__rendered {
        padding-left: 11px !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        padding-left: 10px !important;
    }
}

/* =========================================================
   FINAL CATEGORY ICON + SERVICE ID POLISH
   Visual-only correction for the closed Category/Service fields.
   ========================================================= */

/* Category: true 1:1 icon, no squeezing, and balanced spacing. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 38px !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span,
#block_22 #neworder_category+.select2-container .select2-selection__rendered>span>span {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered img,
#block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_category+.select2-container .select2-selection__rendered i,
#block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"] {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    flex: 0 0 21px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 21px !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Service: move the ID to the correct starting position and use site-blue. */

#block_22 #neworder_services+.select2-container .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 38px !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered>span,
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span>span {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#block_22 #neworder_services+.select2-container .select2-selection__rendered .badge,
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="badge"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service-id"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service_id"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 7px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1678e8 !important;
    background-image: none !important;
    border: 1px solid #0d6fd7 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    vertical-align: middle !important;
    transform: none !important;
}

@media (max-width: 575.98px) {
    #block_22 #neworder_category+.select2-container .select2-selection__rendered,
    #block_22 #neworder_services+.select2-container .select2-selection__rendered {
        padding-left: 12px !important;
    }
    #block_22 #neworder_category+.select2-container .select2-selection__rendered img,
    #block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
    #block_22 #neworder_category+.select2-container .select2-selection__rendered i,
    #block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex-basis: 20px !important;
        line-height: 20px !important;
    }
    #block_22 #neworder_services+.select2-container .select2-selection__rendered .badge,
    #block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="badge"],
    #block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service-id"],
    #block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service_id"] {
        min-width: 40px !important;
        height: 23px !important;
        min-height: 23px !important;
        margin-right: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 10.8px !important;
    }
}

/* =========================================================
   USER-FRIENDLY BOLD TEXT POLISH
   Keeps every existing size, spacing, color and function.
   Only increases text weight for clearer reading.
   ========================================================= */

/* Closed Category and Service fields: same size, clearer bold text. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered,
#block_22 #neworder_services+.select2-container .select2-selection__rendered {
    font-weight: 700 !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered span,
#block_22 #neworder_services+.select2-container .select2-selection__rendered span:not(.badge):not([class*="badge"]):not([class*="service-id"]):not([class*="service_id"]) {
    font-weight: 700 !important;
}

/* Open search/dropdown results: readable bold text without changing size. */

.nwo-original-category-dropdown .select2-results__option {
    font-weight: 700 !important;
}

.nwo-original-service-dropdown .nwo-service-name {
    font-weight: 700 !important;
}

/* The currently focused/selected result is slightly stronger. */

.nwo-original-category-dropdown .select2-results__option--highlighted,
.nwo-original-category-dropdown .select2-results__option[aria-selected="true"],
.nwo-original-category-dropdown .select2-results__option.nwo-current-selected,
.nwo-original-service-dropdown .select2-results__option--highlighted .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option[aria-selected="true"] .nwo-service-name,
.nwo-original-service-dropdown .select2-results__option.nwo-current-service-selected .nwo-service-name {
    font-weight: 800 !important;
}

/*
   Final visual correction only:
   - Keeps the existing Twig/order/description JavaScript logic untouched.
   - Aligns Description and Important Notes with the New Order card.
   - Uses the page's existing navy / pale-blue / bright-blue palette.
*/

/* The inserted description was missing the same horizontal column padding. */

#block_22 .sr-service-description-under-order {
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 10px !important;
}

#block_22 .new-order-form>.col-lg-5 {
    margin-top: 14px !important;
}

/* Compact service detail card — same visual language as the order form. */

#block_22 .sr-service-details {
    overflow: hidden !important;
    border: 1px solid #cfe2f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(30, 55, 77, .11), 0 2px 0 #b7d9f8 !important;
}

#block_22 .sr-service-details__header {
    min-height: 60px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    background: linear-gradient(118deg, #1678e8 0%, #0f70dd 55%, #0b63c7 100%) !important;
}

#block_22 .sr-service-details__header::before {
    width: 120px !important;
    height: 120px !important;
    right: 46px !important;
    top: -88px !important;
}

#block_22 .sr-service-details__header::after {
    width: 78px !important;
    height: 78px !important;
    right: -30px !important;
    bottom: -57px !important;
}

#block_22 .sr-service-details__platform {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
}

#block_22 .sr-service-details__platform img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

#block_22 .sr-service-details__eyebrow {
    margin-bottom: 1px !important;
    font-size: 8px !important;
    letter-spacing: .075em !important;
}

#block_22 .sr-service-details__heading h3 {
    font-size: 12.5px !important;
    line-height: 1.32 !important;
    font-weight: 750 !important;
}

#block_22 .sr-service-details__id {
    min-width: 54px !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
    background: rgba(4, 43, 85, .24) !important;
    font-size: 8.8px !important;
}

#block_22 .sr-service-details__body {
    padding: 12px !important;
    background: #ffffff !important;
}

/* Four compact information cells on wide screens instead of oversized 2-column rows. */

#block_22 .sr-service-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#block_22 .sr-service-meta-card,
#block_22 .sr-service-meta-card--wide {
    grid-column: auto !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 9px !important;
    background: #f5faff !important;
    box-shadow: 0 1px 0 rgba(84, 155, 247, .18) !important;
}

#block_22 .sr-service-meta-card__icon {
    flex: 0 0 31px !important;
    width: 31px !important;
    height: 31px !important;
}

#block_22 .sr-service-meta-card__icon img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
}

#block_22 .sr-service-meta-card__content small {
    margin-bottom: 1px !important;
    color: #6c8197 !important;
    font-size: 8.5px !important;
    letter-spacing: .03em !important;
}

#block_22 .sr-service-meta-card__content strong {
    color: #062b55 !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

#block_22 .sr-service-meta-card--wide .sr-service-meta-card__content strong {
    white-space: normal !important;
    text-overflow: clip !important;
}

#block_22 .sr-service-description-block {
    margin-top: 10px !important;
}

#block_22 .sr-service-description-block__title {
    gap: 7px !important;
    margin-bottom: 7px !important;
}

#block_22 .sr-service-description-block__title span {
    width: 25px !important;
    height: 25px !important;
}

#block_22 .sr-service-description-block__title span img {
    width: 24px !important;
    height: 24px !important;
}

#block_22 .sr-service-description-block__title h4 {
    color: #062b55 !important;
    font-size: 12.5px !important;
}

#block_22 #description_new.sr-auto-description {
    min-height: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 9px !important;
    background: #f5faff !important;
    color: #314b67 !important;
    font-size: 12px !important;
    line-height: 1.58 !important;
}

#block_22 .sr-description-placeholder {
    min-height: 52px !important;
    color: #6c8197 !important;
    font-size: 12px !important;
}

/* Important Notes: remove the unrelated red dashed styling and match the page. */

#block_22 .component_content_card .card.mother-notes-card {
    padding: 17px !important;
    overflow: hidden !important;
    border: 1px solid #cfe2f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(30, 55, 77, .11), 0 2px 0 #b7d9f8 !important;
}

#block_22 .mother-notes-card .text-center {
    margin: 0 0 15px !important;
}

#block_22 .mother-notes-card .text-center>a {
    overflow: hidden !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 10px !important;
    background: #eef8ff !important;
}

#block_22 .mother-notes-card .text-center>a>img {
    width: 100% !important;
    height: clamp(150px, 18vw, 235px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

#block_22 .mother-notes-card .new-order__content-title {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    border: 1px solid #d7e8f8 !important;
    border-left: 4px solid #1678e8 !important;
    border-radius: 8px !important;
    background: #e8f3ff !important;
}

#block_22 .mother-notes-card .new-order__content-title h5 {
    color: #062b55 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

#block_22 .mother-notes-card .new-order__content-text {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #314b67 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#block_22 .mother-notes-card .new-order__content-text p {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 8px !important;
    background: #f5faff !important;
    color: #314b67 !important;
    font-weight: 550 !important;
}

#block_22 .mother-notes-card .new-order__content-text ul {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 10px 11px 10px 30px !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 8px !important;
    background: #f5faff !important;
}

#block_22 .mother-notes-card a.mother-support-btn {
    min-height: 39px !important;
    margin: 0 0 14px !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 0 #0d5db9 !important;
    font-size: 12px !important;
}

#block_22 .services-meaning-section {
    margin-top: 0 !important;
    padding: 14px !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 10px !important;
    background: #f9fcff !important;
    color: #314b67 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#block_22 .services-meaning-section>h6 {
    margin-bottom: 11px !important;
    color: #062b55 !important;
    font-size: 13.5px !important;
}

#block_22 .services-meaning-section [class*="col-md-"]>strong {
    margin-bottom: 6px !important;
    color: #062b55 !important;
    font-size: 12px !important;
}

#block_22 .services-meaning-section .row {
    row-gap: 9px !important;
}

#block_22 .services-meaning-section [class*="col-md-"] {
    margin-bottom: 0 !important;
}

/* Tablet: balanced two-column detail cells. */

@media (max-width: 991.98px) {
    #block_22 .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #block_22 .mother-notes-card .new-order__content-text {
        grid-template-columns: 1fr !important;
    }
    #block_22 .mother-notes-card .new-order__content-text ul {
        grid-column: auto !important;
    }
}

/* Mobile: compact, readable and edge-aligned with the order card. */

@media (max-width: 575.98px) {
    #block_22 .sr-service-description-under-order {
        margin-top: 11px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #block_22 .new-order-form>.col-lg-5 {
        margin-top: 11px !important;
    }
    #block_22 .sr-service-details {
        border-radius: 10px !important;
    }
    #block_22 .sr-service-details__header {
        min-height: 56px !important;
        padding: 9px 10px !important;
        gap: 8px !important;
    }
    #block_22 .sr-service-details__platform,
    #block_22 .sr-service-details__platform img {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }
    #block_22 .sr-service-details__heading h3 {
        font-size: 10.8px !important;
    }
    #block_22 .sr-service-details__id {
        min-width: 49px !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
    }
    #block_22 .sr-service-details__body {
        padding: 9px !important;
    }
    #block_22 .sr-service-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }
    #block_22 .sr-service-meta-card,
    #block_22 .sr-service-meta-card--wide {
        min-height: 49px !important;
        padding: 7px 9px !important;
    }
    #block_22 .component_content_card .card.mother-notes-card {
        padding: 11px !important;
        border-radius: 10px !important;
    }
    #block_22 .mother-notes-card .text-center>a>img {
        height: 165px !important;
    }
    #block_22 .mother-notes-card .new-order__content-title {
        padding: 9px 10px !important;
    }
    #block_22 .mother-notes-card .new-order__content-title h5 {
        font-size: 13px !important;
    }
    #block_22 .mother-notes-card .new-order__content-text {
        font-size: 11.5px !important;
    }
    #block_22 .services-meaning-section {
        padding: 11px !important;
        font-size: 11.5px !important;
    }
}

/* =========================================================
   FINAL MOBILE/UI REFINEMENT
   - Keeps all Twig/order/description logic unchanged.
   - Restores Important Notes to the original plain marked list.
   - Makes the service information compact and user-friendly.
   ========================================================= */

/* Keep all three main sections on the same visual grid. */

#block_22 .sr-service-description-under-order,
#block_22 .new-order-form>.col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Description card: cleaner and lighter. */

#block_22 .sr-service-details {
    border: 1px solid #cfe2f5 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 55, 77, .09), 0 2px 0 #c7e0f7 !important;
}

#block_22 .sr-service-details__header {
    min-height: 58px !important;
    padding: 10px 13px !important;
    gap: 9px !important;
    background: linear-gradient(118deg, #1678e8 0%, #126fd7 58%, #0b63c7 100%) !important;
}

#block_22 .sr-service-details__platform,
#block_22 .sr-service-details__platform img {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    flex-basis: 35px !important;
}

#block_22 .sr-service-details__heading h3 {
    font-size: 12px !important;
    line-height: 1.32 !important;
    font-weight: 750 !important;
}

#block_22 .sr-service-details__eyebrow {
    margin-bottom: 1px !important;
    font-size: 7.8px !important;
    letter-spacing: .07em !important;
}

#block_22 .sr-service-details__id {
    min-width: 52px !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: 8.5px !important;
}

#block_22 .sr-service-details__body {
    padding: 11px !important;
}

#block_22 .sr-service-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#block_22 .sr-service-meta-card {
    min-height: 52px !important;
    padding: 8px 9px !important;
    gap: 7px !important;
    border: 1px solid #d9e9f6 !important;
    border-radius: 9px !important;
    background: #f7fbff !important;
    box-shadow: none !important;
}

#block_22 .sr-service-meta-card--wide {
    grid-column: 1 / -1 !important;
}

#block_22 .sr-service-meta-card__icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    flex-basis: 29px !important;
}

#block_22 .sr-service-meta-card__icon img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
}

#block_22 .sr-service-meta-card__content small {
    margin-bottom: 1px !important;
    font-size: 8.2px !important;
}

#block_22 .sr-service-meta-card__content strong {
    font-size: 11px !important;
    line-height: 1.28 !important;
}

#block_22 .sr-service-description-block {
    margin-top: 10px !important;
}

#block_22 .sr-service-description-block__title {
    margin: 0 0 7px !important;
    gap: 7px !important;
}

#block_22 .sr-service-description-block__title span,
#block_22 .sr-service-description-block__title span img {
    width: 24px !important;
    height: 24px !important;
}

#block_22 .sr-service-description-block__title h4 {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

#block_22 #description_new.sr-auto-description {
    min-height: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid #d9e9f6 !important;
    border-radius: 9px !important;
    background: #f7fbff !important;
    color: #314b67 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    box-shadow: none !important;
}

/* Important Notes: ONE clean section, no separate boxes around every line. */

#block_22 .component_content_card .card.mother-notes-card {
    padding: 16px !important;
    border: 1px solid #cfe2f5 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 55, 77, .09), 0 2px 0 #c7e0f7 !important;
}

#block_22 .mother-notes-card .text-center {
    margin: 0 0 17px !important;
}

#block_22 .mother-notes-card .text-center>a {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
}

#block_22 .mother-notes-card .text-center>a>img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
}

#block_22 .mother-notes-card .new-order__content-title {
    margin: 0 0 11px !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-bottom: 1px dashed #cbd5df !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#block_22 .mother-notes-card .new-order__content-title h5 {
    margin: 0 !important;
    color: #0b4e8c !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

#block_22 .mother-notes-card .new-order__content-text {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 15px !important;
    color: #1a4f80 !important;
    border: 0 !important;
    border-bottom: 1px dashed #cbd5df !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

#block_22 .mother-notes-card .new-order__content-text p {
    display: block !important;
    min-width: 0 !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    color: #1a4f80 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

#block_22 .mother-notes-card .new-order__content-text p:last-of-type {
    margin-bottom: 12px !important;
}

#block_22 .mother-notes-card .new-order__content-text ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 0 21px !important;
    color: #1a4f80 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: disc !important;
}

#block_22 .mother-notes-card .new-order__content-text li {
    margin: 0 !important;
    padding: 0 !important;
    color: #1a4f80 !important;
    background: transparent !important;
    font-weight: 500 !important;
}

#block_22 .mother-notes-card a.mother-support-btn {
    width: 100% !important;
    min-height: 42px !important;
    margin: 15px 0 18px !important;
    padding: 10px 16px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 0 #0d5db9 !important;
}

/* Restore the original flowing abbreviations section instead of another big box. */

#block_22 .services-meaning-section {
    margin: 0 !important;
    padding: 16px 0 0 !important;
    color: #314b67 !important;
    border: 0 !important;
    border-top: 1px dashed #cbd5df !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

#block_22 .services-meaning-section>h6 {
    margin: 0 0 13px !important;
    color: #0b4e8c !important;
    font-size: 14px !important;
}

#block_22 .services-meaning-section .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
    row-gap: 12px !important;
}

#block_22 .services-meaning-section [class*="col-md-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 0 !important;
}

#block_22 .services-meaning-section [class*="col-md-"]>strong {
    margin-bottom: 7px !important;
    padding-bottom: 5px !important;
    color: #0b4e8c !important;
    border-bottom: 1px solid #edf2f7 !important;
    font-size: 12.5px !important;
}

/* Tablet: keep details balanced. */

@media (max-width: 991.98px) {
    #block_22 .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: compact 2 × 2 service details, plain notes, clean spacing. */

@media (max-width: 575.98px) {
    #block_22 .sr-service-description-under-order,
    #block_22 .new-order-form>.col-lg-5 {
        margin-top: 10px !important;
    }
    #block_22 .sr-service-details {
        border-radius: 10px !important;
    }
    #block_22 .sr-service-details__header {
        min-height: 60px !important;
        padding: 9px 10px !important;
        gap: 8px !important;
    }
    #block_22 .sr-service-details__platform,
    #block_22 .sr-service-details__platform img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex-basis: 34px !important;
    }
    #block_22 .sr-service-details__heading h3 {
        font-size: 10.6px !important;
        line-height: 1.31 !important;
    }
    #block_22 .sr-service-details__id {
        min-width: 47px !important;
        padding: 4px 6px !important;
        font-size: 7.8px !important;
    }
    #block_22 .sr-service-details__body {
        padding: 9px !important;
    }
    #block_22 .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    #block_22 .sr-service-meta-card {
        min-height: 58px !important;
        padding: 7px 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }
    #block_22 .sr-service-meta-card--wide {
        grid-column: 1 / -1 !important;
    }
    #block_22 .sr-service-meta-card__icon {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        flex-basis: 27px !important;
    }
    #block_22 .sr-service-meta-card__icon img {
        width: 23px !important;
        height: 23px !important;
        max-width: 23px !important;
        max-height: 23px !important;
    }
    #block_22 .sr-service-meta-card__content small {
        font-size: 7.5px !important;
        letter-spacing: .02em !important;
    }
    #block_22 .sr-service-meta-card__content strong {
        font-size: 9.8px !important;
        line-height: 1.25 !important;
    }
    #block_22 .sr-service-description-block {
        margin-top: 9px !important;
    }
    #block_22 .sr-service-description-block__title h4 {
        font-size: 13px !important;
    }
    #block_22 #description_new.sr-auto-description {
        padding: 10px 11px !important;
        border-radius: 8px !important;
        font-size: 11.7px !important;
        line-height: 1.52 !important;
    }
    #block_22 .component_content_card .card.mother-notes-card {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    #block_22 .mother-notes-card .text-center {
        margin-bottom: 15px !important;
    }
    #block_22 .mother-notes-card .text-center>a,
    #block_22 .mother-notes-card .text-center>a>img {
        border-radius: 9px !important;
    }
    #block_22 .mother-notes-card .new-order__content-title {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }
    #block_22 .mother-notes-card .new-order__content-title h5 {
        font-size: 14px !important;
    }
    #block_22 .mother-notes-card .new-order__content-text {
        padding-bottom: 13px !important;
        font-size: 12px !important;
        line-height: 1.57 !important;
    }
    #block_22 .mother-notes-card .new-order__content-text p {
        margin-bottom: 9px !important;
    }
    #block_22 .mother-notes-card a.mother-support-btn {
        min-height: 40px !important;
        margin: 13px 0 16px !important;
        font-size: 12.5px !important;
    }
    #block_22 .services-meaning-section {
        padding-top: 14px !important;
        font-size: 11.7px !important;
    }
    #block_22 .services-meaning-section>h6 {
        margin-bottom: 11px !important;
        font-size: 13px !important;
    }
}

/* Very narrow phones: preserve readability without returning to tall giant rows. */

@media (max-width: 350px) {
    #block_22 .sr-service-meta-grid {
        grid-template-columns: 1fr !important;
    }
    #block_22 .sr-service-meta-card--wide {
        grid-column: auto !important;
    }
}

/* Final layout: Order and Description share the same centered width. */

#block_22 .new-order-form>.sr-service-description-column {
    flex: 0 0 58.333333% !important;
    width: 58.333333% !important;
    max-width: 58.333333% !important;
    margin: 14px auto 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#block_22 .sr-service-description-column .sr-service-description-under-order {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#block_22 .sr-service-description-column .sr-service-details {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
    #block_22 .new-order-form>.sr-service-description-column {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #block_22 .new-order-form>.sr-service-description-column {
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #block_22 .sr-service-description-column .sr-service-details {
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__body {
        padding: 10px !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    #block_22 .sr-service-description-column #description_new.sr-auto-description {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 10px 11px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 350px) {
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

/*
   Layout-only correction:
   - Preserves the original service-details colors, PNG icons, decorative header lines,
     typography, dynamic Twig values and JavaScript.
   - Desktop: order form on the left, original description card on the right.
   - Mobile/tablet: description returns below the order form.
*/

@media (min-width: 992px) {
    #block_22 .new-order-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
        column-gap: 22px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #block_22 .new-order-form>.col-lg-7:not(.sr-service-description-column) {
        flex: 0 0 calc(58.333333% - 11px) !important;
        width: calc(58.333333% - 11px) !important;
        max-width: calc(58.333333% - 11px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #block_22 .new-order-form>.sr-service-description-column {
        flex: 0 0 calc(41.666667% - 11px) !important;
        width: calc(41.666667% - 11px) !important;
        max-width: calc(41.666667% - 11px) !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-self: flex-start !important;
    }
    #block_22 .sr-service-description-column .sr-service-description-under-order {
        position: sticky !important;
        top: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* The original four-cell row becomes a balanced 2 x 2 grid in the side panel. */
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-card--wide {
        grid-column: 1 / -1 !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-card {
        min-width: 0 !important;
        min-height: 58px !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__header {
        min-height: 72px !important;
        height: auto !important;
        padding: 12px 14px !important;
        overflow: hidden !important;
    }
    /* Keep the original decorative ::before/::after pattern visible. */
    #block_22 .sr-service-description-column .sr-service-details__header::before,
    #block_22 .sr-service-description-column .sr-service-details__header::after {
        display: block !important;
        content: "" !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__heading {
        min-width: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__heading h3,
    #block_22 .sr-service-description-column #sr-service-title {
        display: -webkit-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 12.5px !important;
        line-height: 1.36 !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__id {
        flex: 0 0 auto !important;
        align-self: center !important;
    }
    #block_22 .sr-service-description-column #description_new.sr-auto-description {
        min-height: 190px !important;
        padding: 14px 15px 17px !important;
        font-size: 13px !important;
        line-height: 1.64 !important;
    }
}

@media (max-width: 991.98px) {
    #block_22 .new-order-form {
        display: block !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    #block_22 .new-order-form>.col-lg-7:not(.sr-service-description-column),
    #block_22 .new-order-form>.sr-service-description-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #block_22 .new-order-form>.sr-service-description-column {
        margin-top: 14px !important;
    }
    #block_22 .sr-service-description-column .sr-service-description-under-order {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 575.98px) {
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__heading h3,
    #block_22 .sr-service-description-column #sr-service-title {
        -webkit-line-clamp: 3 !important;
    }
}

@media (max-width: 350px) {
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

/*
   FINAL OVERRIDE — intentionally placed last.
   Desktop: real side-by-side layout.
   Mobile/tablet: description below the order form.
   Existing Twig, JS, PNG icons and decorative header artwork remain unchanged.
*/

@media (min-width: 1200px) {
    #block_22 .new-order-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1.22fr) minmax(390px, .78fr) !important;
        align-items: start !important;
        gap: 24px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    #block_22 .new-order-form>.col-lg-7:not(.sr-service-description-column),
    #block_22 .new-order-form>.sr-service-description-column {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-description-under-order {
        position: sticky !important;
        top: 18px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-card--wide {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #block_22 .new-order-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
        align-items: start !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    #block_22 .new-order-form>.col-lg-7:not(.sr-service-description-column),
    #block_22 .new-order-form>.sr-service-description-column {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-description-under-order {
        position: sticky !important;
        top: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* Professional depth without replacing the original design. */

#block_22 .sr-service-description-column .sr-service-details {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #bad7f4 !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 48px rgba(20, 61, 109, .10), 0 7px 18px rgba(84, 155, 247, .08), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

#block_22 .sr-service-description-column .sr-service-details__header {
    min-height: 76px !important;
    padding: 13px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
    box-shadow: inset 0 -1px 0 rgba(7, 71, 145, .16) !important;
}

/* Keep the original diagonal decorative artwork visible. */

#block_22 .sr-service-description-column .sr-service-details__header::before,
#block_22 .sr-service-description-column .sr-service-details__header::after {
    display: block !important;
    content: "" !important;
    opacity: 1 !important;
}

#block_22 .sr-service-description-column .sr-service-details__platform img {
    filter: drop-shadow(0 7px 11px rgba(4, 46, 96, .22)) !important;
}

#block_22 .sr-service-description-column .sr-service-details__heading h3,
#block_22 .sr-service-description-column #sr-service-title {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    font-weight: 780 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .10) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#block_22 .sr-service-description-column .sr-service-details__id {
    background: rgba(5, 55, 120, .22) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

#block_22 .sr-service-description-column .sr-service-details__body {
    padding: 15px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

#block_22 .sr-service-description-column .sr-service-meta-card {
    min-height: 62px !important;
    padding: 10px 11px !important;
    border: 1px solid #d5e5f5 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fe 100%) !important;
    box-shadow: 0 8px 18px rgba(27, 75, 125, .055), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

#block_22 .sr-service-description-column .sr-service-meta-card__icon {
    border-radius: 11px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%) !important;
}

#block_22 .sr-service-description-column .sr-service-meta-card__content small {
    color: #76869a !important;
    font-size: 8.8px !important;
    letter-spacing: .055em !important;
}

#block_22 .sr-service-description-column .sr-service-meta-card__content strong {
    color: #153553 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 780 !important;
}

#block_22 .sr-service-description-column .sr-service-description-block {
    margin-top: 14px !important;
}

#block_22 .sr-service-description-column .sr-service-description-block__title {
    margin-bottom: 9px !important;
}

#block_22 .sr-service-description-column .sr-service-description-block__title h4 {
    color: #123454 !important;
    font-size: 14.5px !important;
    font-weight: 820 !important;
}

#block_22 .sr-service-description-column #description_new.sr-auto-description {
    min-height: 190px !important;
    padding: 15px 16px 18px !important;
    border: 1px solid #d5e5f5 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
    box-shadow: 0 8px 18px rgba(27, 75, 125, .045), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    color: #38536f !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
}

#block_22 .sr-service-description-column #description_new.sr-auto-description strong,
#block_22 .sr-service-description-column #description_new.sr-auto-description b {
    color: #173653 !important;
}

@media (max-width: 991.98px) {
    #block_22 .new-order-form {
        display: block !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    #block_22 .new-order-form>.col-lg-7:not(.sr-service-description-column),
    #block_22 .new-order-form>.sr-service-description-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #block_22 .new-order-form>.sr-service-description-column {
        margin-top: 14px !important;
    }
    #block_22 .sr-service-description-column .sr-service-description-under-order {
        position: relative !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 575.98px) {
    #block_22 .sr-service-description-column .sr-service-details {
        border-radius: 13px !important;
        box-shadow: 0 12px 26px rgba(20, 61, 109, .09) !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__header {
        min-height: 68px !important;
        padding: 10px 11px !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__heading h3,
    #block_22 .sr-service-description-column #sr-service-title {
        font-size: 11px !important;
        line-height: 1.38 !important;
    }
    #block_22 .sr-service-description-column .sr-service-details__body {
        padding: 10px !important;
    }
    #block_22 .sr-service-description-column .sr-service-meta-card {
        min-height: 58px !important;
        padding: 8px 9px !important;
    }
    #block_22 .sr-service-description-column #description_new.sr-auto-description {
        min-height: 0 !important;
        padding: 12px 13px 15px !important;
        font-size: 12.5px !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 350px) {
    #block_22 .sr-service-description-column .sr-service-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   PLATFORM-AWARE SERVICE HEADER + SELECT ICON ALIGNMENT
   Visual-only refinement. Existing Twig/order logic remains unchanged.
   ========================================================= */

/* Default platform theme; JavaScript changes only these variables. */

#block_22 .sr-service-details {
    --sr-platform-bg: linear-gradient(118deg, #1877f2 0%, #1688ef 55%, #0d6fce 100%);
    --sr-platform-ink: #ffffff;
    --sr-platform-muted: rgba(255, 255, 255, .76);
    --sr-platform-line: rgba(255, 255, 255, .15);
    --sr-platform-chip: rgba(15, 65, 130, .22);
    --sr-platform-chip-border: rgba(255, 255, 255, .34);
    /* A restrained shadow on both sides, matching a premium desktop card. */
    box-shadow: -7px 0 18px rgba(14, 27, 46, .085), 7px 0 18px rgba(14, 27, 46, .085), 0 14px 34px rgba(25, 61, 109, .08) !important;
}

#block_22 .sr-service-details__header {
    color: var(--sr-platform-ink) !important;
    background: var(--sr-platform-bg) !important;
    transition: background .28s ease, color .20s ease !important;
}

#block_22 .sr-service-details__header::before,
#block_22 .sr-service-details__header::after {
    border-color: var(--sr-platform-line) !important;
}

#block_22 .sr-service-details__eyebrow {
    color: var(--sr-platform-muted) !important;
}

#block_22 .sr-service-details__heading h3,
#block_22 #sr-service-title {
    color: var(--sr-platform-ink) !important;
    -webkit-text-fill-color: var(--sr-platform-ink) !important;
}

#block_22 .sr-service-details__id {
    color: var(--sr-platform-ink) !important;
    -webkit-text-fill-color: var(--sr-platform-ink) !important;
    background: var(--sr-platform-chip) !important;
    border-color: var(--sr-platform-chip-border) !important;
}

/* Keep the platform logo crisp while the header colour changes. */

#block_22 .sr-service-details__platform {
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

#block_22 .sr-service-details[data-sr-light-platform="1"] .sr-service-details__platform {
    background: rgba(255, 255, 255, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* ---------------------------------------------------------
   CLOSED CATEGORY/SERVICE SELECTS
   The icon/ID receives its own fixed-width area and cannot be
   squeezed against the left edge or service text.
   --------------------------------------------------------- */

#block_22 #neworder_category+.select2-container .select2-selection--single,
#block_22 #neworder_services+.select2-container .select2-selection--single,
#block_22 #select-category-container .select2-selection--single,
#block_22 #select-service-container .select2-selection--single {
    overflow: hidden !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered,
#block_22 #neworder_services+.select2-container .select2-selection__rendered,
#block_22 #select-category-container .select2-selection__rendered,
#block_22 #select-service-container .select2-selection__rendered {
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 42px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    line-height: normal !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Covers image, SVG, Font Awesome and the common icon wrappers
   generated by different Select2 templates. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered img,
#block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_category+.select2-container .select2-selection__rendered i,
#block_22 #neworder_services+.select2-container .select2-selection__rendered img,
#block_22 #neworder_services+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_services+.select2-container .select2-selection__rendered i,
#block_22 #select-category-container .select2-selection__rendered img,
#block_22 #select-category-container .select2-selection__rendered svg,
#block_22 #select-category-container .select2-selection__rendered i,
#block_22 #select-service-container .select2-selection__rendered img,
#block_22 #select-service-container .select2-selection__rendered svg,
#block_22 #select-service-container .select2-selection__rendered i {
    display: inline-block !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    flex: 0 0 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    vertical-align: middle !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="icon"],
#block_22 #select-category-container .select2-selection__rendered [class*="icon"],
#block_22 #select-service-container .select2-selection__rendered [class*="icon"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Selected service ID badge, when the site template renders one. */

#block_22 #neworder_services+.select2-container .select2-selection__rendered .badge,
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service-id"],
#block_22 #select-service-container .select2-selection__rendered .badge,
#block_22 #select-service-container .select2-selection__rendered [class*="service-id"] {
    flex: 0 0 auto !important;
    min-width: 42px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
}

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span:not([class*="icon"]),
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span:not(.badge):not([class*="icon"]):not([class*="service-id"]),
#block_22 #select-category-container .select2-selection__rendered>span:not([class*="icon"]),
#block_22 #select-service-container .select2-selection__rendered>span:not(.badge):not([class*="icon"]):not([class*="service-id"]) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ---------------------------------------------------------
   OPEN CATEGORY/SERVICE LISTS
   Icons stay centred in a fixed column instead of touching the edge.
   --------------------------------------------------------- */

.nwo-original-category-dropdown .select2-results__option {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.nwo-original-category-dropdown .select2-results__option img,
.nwo-original-category-dropdown .select2-results__option svg,
.nwo-original-category-dropdown .select2-results__option i,
.nwo-original-service-dropdown .select2-results__option img,
.nwo-original-service-dropdown .select2-results__option svg,
.nwo-original-service-dropdown .select2-results__option i {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    vertical-align: middle !important;
}

.nwo-original-category-dropdown .select2-results__option [class*="icon"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

.nwo-original-service-dropdown .nwo-service-id {
    align-self: center !important;
    margin: 0 !important;
}

@media (max-width: 575.98px) {
    #block_22 #neworder_category+.select2-container .select2-selection__rendered,
    #block_22 #neworder_services+.select2-container .select2-selection__rendered,
    #block_22 #select-category-container .select2-selection__rendered,
    #block_22 #select-service-container .select2-selection__rendered {
        padding-left: 11px !important;
        padding-right: 38px !important;
        gap: 7px !important;
    }
    #block_22 .sr-service-details {
        box-shadow: -4px 0 12px rgba(14, 27, 46, .07), 4px 0 12px rgba(14, 27, 46, .07), 0 11px 25px rgba(25, 61, 109, .075) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #block_22 .sr-service-details__header {
        transition: none !important;
    }
}

/* =========================================================
   FINAL PAGE POLISH — VISUAL/STABILITY ONLY
   - Keeps the approved Category/Service left-start alignment.
   - Prevents logo/ID squeezing or clipping.
   - Keeps long selected text away from the Select2 arrow.
   - Stabilizes mobile width/overflow without changing box sizes.
   - No Twig, order, price, filtering, API or submit logic is changed.
   ========================================================= */

/* Select2 must be allowed to shrink inside Bootstrap columns without pushing the page sideways. */

#block_22 .select2-container,
#block_22 .select2-selection--single,
#block_22 .select2-selection__rendered {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Preserve the approved left-start position from V2. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered,
#block_22 #neworder_services+.select2-container .select2-selection__rendered,
#block_22 #select-category-container .select2-selection__rendered,
#block_22 #select-service-container .select2-selection__rendered {
    justify-content: flex-start !important;
    padding-left: 4px !important;
    padding-right: 42px !important;
    transform: translateX(-8px) !important;
    text-align: left !important;
}

/* Remove hidden nested offsets that can make the first visible item look pressed inward. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span,
#block_22 #neworder_category+.select2-container .select2-selection__rendered>span>span,
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span,
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span>span,
#block_22 #select-category-container .select2-selection__rendered>span,
#block_22 #select-service-container .select2-selection__rendered>span,
#block_22 #neworder_category+.select2-container .select2-selection__rendered>*,
#block_22 #neworder_services+.select2-container .select2-selection__rendered>*,
#block_22 #select-category-container .select2-selection__rendered>*,
#block_22 #select-service-container .select2-selection__rendered>* {
    margin-left: 0 !important;
}

/* Category logos stay true 1:1 and cannot be compressed by long text. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered img,
#block_22 #neworder_category+.select2-container .select2-selection__rendered svg,
#block_22 #neworder_category+.select2-container .select2-selection__rendered i,
#block_22 #neworder_category+.select2-container .select2-selection__rendered [class*="icon"],
#block_22 #select-category-container .select2-selection__rendered img,
#block_22 #select-category-container .select2-selection__rendered svg,
#block_22 #select-category-container .select2-selection__rendered i,
#block_22 #select-category-container .select2-selection__rendered [class*="icon"] {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    object-fit: contain !important;
}

/* Service ID stays intact and aligned; only the service name is allowed to shrink. */

#block_22 #neworder_services+.select2-container .select2-selection__rendered .badge,
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="badge"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service-id"],
#block_22 #neworder_services+.select2-container .select2-selection__rendered [class*="service_id"],
#block_22 #select-service-container .select2-selection__rendered .badge,
#block_22 #select-service-container .select2-selection__rendered [class*="badge"],
#block_22 #select-service-container .select2-selection__rendered [class*="service-id"],
#block_22 #select-service-container .select2-selection__rendered [class*="service_id"] {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
}

/* Long selected names never run under the dropdown arrow or make the row wider. */

#block_22 #neworder_category+.select2-container .select2-selection__rendered>span:not([class*="icon"]),
#block_22 #neworder_services+.select2-container .select2-selection__rendered>span:not(.badge):not([class*="badge"]):not([class*="service-id"]):not([class*="service_id"]),
#block_22 #select-category-container .select2-selection__rendered>span:not([class*="icon"]),
#block_22 #select-service-container .select2-selection__rendered>span:not(.badge):not([class*="badge"]):not([class*="service-id"]):not([class*="service_id"]) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Arrow keeps its own clean area and remains vertically centred. */

#block_22 #neworder_category+.select2-container .select2-selection__arrow,
#block_22 #neworder_services+.select2-container .select2-selection__arrow,
#block_22 #select-category-container .select2-selection__arrow,
#block_22 #select-service-container .select2-selection__arrow {
    right: 8px !important;
    z-index: 2 !important;
}

/* Dropdown stays above the page cards; no visual size change to its rows. */

.select2-container--open {
    z-index: 9999 !important;
}

/* Avoid accidental horizontal overflow on small screens while keeping all existing dimensions. */

@media (max-width: 575.98px) {
    #block_22,
    #block_22 .container-fluid,
    #block_22 .new-order-form,
    #block_22 .component_card,
    #block_22 .card,
    #block_22 .form-group {
        min-width: 0 !important;
    }
    #block_22 #neworder_category+.select2-container .select2-selection__rendered,
    #block_22 #neworder_services+.select2-container .select2-selection__rendered,
    #block_22 #select-category-container .select2-selection__rendered,
    #block_22 #select-service-container .select2-selection__rendered {
        padding-left: 4px !important;
        padding-right: 40px !important;
    }
}

/* Respect reduced-motion preference without affecting the normal design. */

@media (prefers-reduced-motion: reduce) {
    #block_22 *,
    #block_22 *::before,
    #block_22 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   NEW ORDER LUXURY BACKGROUND — VISUAL ONLY
   Theme: Titanium Pearl / Soft Imperial Lavender.
   Static layered colour for a premium, uncommon business look.
   No Twig, form, order, pricing, filtering, API or submit logic changed.
   ========================================================= */

.wrapper-content,
.wrapper-content>.wrapper-content__header,
.wrapper-content__header,
.wrapper-content__header .nwo-single-balance-wrap,
.wrapper-content>.wrapper-content__body,
.wrapper-content__body,
#block_22,
#block_22 .block-bg {
    background-color: #f3f1f6 !important;
    background-image: radial-gradient(circle at 10% 2%, rgba(107, 88, 176, .085) 0, rgba(107, 88, 176, 0) 31%), radial-gradient(circle at 91% 8%, rgba(55, 132, 187, .070) 0, rgba(55, 132, 187, 0) 29%), linear-gradient(135deg, #faf9fb 0%, #f3f1f6 46%, #f7f4f8 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* Keep the background completely stable during reload; no slide/fade from old theme layers. */

.wrapper-content,
.wrapper-content__header,
.wrapper-content__body,
#block_22,
#block_22 .block-bg {
    animation: none !important;
    transition: none !important;
}

#block_22 .block-bg {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
}

#service_description,
#service_average_time {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    color: var(--ref-navy) !important;
    background: var(--ref-blue-soft) !important;
    background-image: none !important;
    border: 1px solid #d7e8f8 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 0 var(--ref-blue-line) !important;
    outline: none !important;
    font-size: 13.5px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}










/* =========================================================
   PLATFORM BUTTONS
   Desktop design remains unchanged.
   Mobile: 16 platforms = exactly 4 columns x 4 rows.
========================================================= */

@media (max-width: 767px) {

    #block_22 #new-order-cats.platforms {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    #block_22 #new-order-cats .platforms-item,
    #block_22 #new-order-cats .platforms-item-col-4 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        flex: none !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;

        padding: 7px 8px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;

        border-radius: 11px !important;

        /* Keep the existing reference/design language */
        color: var(--ref-navy) !important;
        background: var(--ref-blue-soft) !important;
        background-image: none !important;
        border: 1px solid #d7e8f8 !important;
        box-shadow: 0 2px 0 var(--ref-blue-line) !important;

        font-family: inherit !important;
        transition: transform .15s ease,
                    box-shadow .15s ease,
                    filter .15s ease !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon:hover {
        transform: translateY(-1px) !important;
        filter: brightness(.99) !important;
        box-shadow: 0 3px 0 #9bcaf3 !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon:active {
        transform: translateY(1px) !important;
        box-shadow: 0 1px 0 #9bcaf3 !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon.active,
    #block_22 #new-order-cats .platforms-item__with-icon.selected,
    #block_22 #new-order-cats .platforms-item__with-icon.is-active,
    #block_22 #new-order-cats .platforms-item.active .platforms-item__with-icon {
        color: #fff !important;
        background: #1678e8 !important;
        border-color: #1678e8 !important;
        box-shadow: 0 2px 0 #1678e8 !important;
    }

    #block_22 #new-order-cats .platforms-item__icon,
    #block_22 #new-order-cats .platforms-item__icon svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        flex: 0 0 18px !important;
        display: block !important;
    }

    #block_22 #new-order-cats .platforms-item__title {
        display: block !important;
        min-width: 0 !important;
        max-width: calc(100% - 24px) !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: inherit !important;
        font-size: 11.5px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }
}

/* Very narrow phones: keep 4 columns so the 16 platforms
   never become 5+5+5+1 or leave a final single item. */
@media (max-width: 380px) {
    #block_22 #new-order-cats.platforms {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon {
        padding-left: 5px !important;
        padding-right: 5px !important;
        gap: 4px !important;
    }

    #block_22 #new-order-cats .platforms-item__icon,
    #block_22 #new-order-cats .platforms-item__icon svg {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;
        flex-basis: 17px !important;
    }

    #block_22 #new-order-cats .platforms-item__title {
        font-size: 10.5px !important;
        max-width: calc(100% - 21px) !important;
    }
}







@media (max-width: 767px) {

    #block_22 #new-order-cats .platforms-item__title {
        display: none !important;
    }

    #block_22 #new-order-cats .platforms-item__with-icon {
        justify-content: center !important;
        padding: 7px !important;
        gap: 0 !important;
    }

    #block_22 #new-order-cats .platforms-item__icon,
    #block_22 #new-order-cats .platforms-item__icon svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        flex: 0 0 20px !important;
    }
}




/* =========================================================
   SEARCH RESULTS DROPDOWN
   Match existing Select2 Results design
========================================================= */

.form-group {
    position: relative;
}

/* ---------------------------------------------------------
   Dropdown container
--------------------------------------------------------- */

#unique-dropdown {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 0 !important;

    width: 100% !important;
    max-height: 400px !important;

    padding: 8px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 9999 !important;

    color: #062b55 !important;
    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #cfe2f5 !important;
    border-radius: 10px !important;

    box-shadow: 0 12px 28px rgba(30, 55, 77, .16) !important;

    scrollbar-width: thin;
    scrollbar-color: #8fc4f2 #eef8ff;
}


/* ---------------------------------------------------------
   Search result item
   Same style as Select2 .select2-results__option
--------------------------------------------------------- */

#unique-dropdown .selectme {
    display: block !important;

    width: 100% !important;
    min-height: 42px !important;

    box-sizing: border-box !important;

    margin: 0 0 6px !important;
    padding: 10px 12px !important;

    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;

    background: #e8f3ff !important;
    background-image: none !important;

    border: 1px solid #d7e8f8 !important;
    border-left: 3px solid #549bf7 !important;

    border-radius: 9px !important;

    box-shadow: 0 1px 0 rgba(84, 155, 247, .35) !important;

    font-weight: 650 !important;
    line-height: 1.35 !important;

    cursor: pointer !important;

    text-decoration: none !important;

    transition:
        border-color .14s ease,
        background .14s ease,
        transform .14s ease,
        box-shadow .14s ease !important;
}


/* ---------------------------------------------------------
   Remove last item extra margin
--------------------------------------------------------- */

#unique-dropdown .selectme:last-child {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   Links / spans inside result
--------------------------------------------------------- */

#unique-dropdown .selectme a,
#unique-dropdown .selectme span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   Hover
   Same as existing Select2 hover
--------------------------------------------------------- */

#unique-dropdown .selectme:hover {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;

    background: #f3f9ff !important;
    background-image: none !important;

    border-color: #9ac9f2 !important;
    border-left-color: #1678e8 !important;

    box-shadow: 0 2px 0 rgba(84, 155, 247, .45) !important;

    transform: translateY(-1px) !important;
}


/* ---------------------------------------------------------
   Active / Selected
--------------------------------------------------------- */

#unique-dropdown .selectme.active,
#unique-dropdown .selectme.selected,
#unique-dropdown .selectme[aria-selected="true"] {
    color: #062b55 !important;
    -webkit-text-fill-color: #062b55 !important;

    background: #ffffff !important;
    background-image: none !important;

    border-color: #8fc4f2 !important;
    border-left-color: #1678e8 !important;

    box-shadow:
        0 3px 0 rgba(84, 155, 247, .55),
        0 6px 14px rgba(30, 55, 77, .08) !important;

    font-weight: 750 !important;
}


/* ---------------------------------------------------------
   Search keyword highlight
--------------------------------------------------------- */



/* ---------------------------------------------------------
   Custom badge
--------------------------------------------------------- */

#unique-dropdown .custom-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(37, 99, 235, .10) !important;
    color: #1d4ed8 !important;

    border: 1px solid rgba(37, 99, 235, .18) !important;

    box-shadow: none !important;

    border-radius: 6px !important;
}


/* ---------------------------------------------------------
   Scrollbar
--------------------------------------------------------- */

#unique-dropdown::-webkit-scrollbar {
    width: 6px !important;
}

#unique-dropdown::-webkit-scrollbar-track {
    background: #eef8ff !important;
    border-radius: 10px !important;
}

#unique-dropdown::-webkit-scrollbar-thumb {
    background: #8fc4f2 !important;
    border-radius: 10px !important;
}

#unique-dropdown::-webkit-scrollbar-thumb:hover {
    background: #549bf7 !important;
}


/* ---------------------------------------------------------
   Empty / no result message
--------------------------------------------------------- */

#unique-dropdown .select2-results__message,
#unique-dropdown .no-results,
#unique-dropdown .empty-results {
    color: #5e7590 !important;
    -webkit-text-fill-color: #5e7590 !important;

    background: #f3f9ff !important;

    border: 1px solid #d7e8f8 !important;
    border-left: 3px solid #d7e8f8 !important;

    border-radius: 9px !important;

    padding: 10px 12px !important;
}


/* ---------------------------------------------------------
   Clear button / typing state
--------------------------------------------------------- */

.search-dropdown.is-typing .input-wrapper__append {
    display: block !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    #unique-dropdown {
        top: calc(100% + 6px) !important;

        max-height: 360px !important;

        padding: 7px !important;

        border-radius: 10px !important;
    }

    #unique-dropdown .selectme {
        min-height: 42px !important;

        margin-bottom: 5px !important;

        padding: 9px 10px !important;

        border-radius: 8px !important;

        font-size: 12.5px !important;

        line-height: 1.3 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    #unique-dropdown {
        max-height: 340px !important;

        padding: 6px !important;
    }

    #unique-dropdown .selectme {
        min-height: 40px !important;

        padding: 8px 9px !important;

        font-size: 12px !important;
    }
}