.hint{
    border: 2px solid red;
}

.hint_green{
    border: 2px solid green;
}
#hint_on.--air {
    border-radius: 8px;
    position: relative;
    display: inline-flex;
    margin-left: 15px;
    box-sizing: border-box;
    text-decoration: none;
    margin-top: 12px;
    margin-right: 0;
    background: var(--ui-color-design-selection-bg);
}

#hint_on.--air.hint_disabled {
    background: var(--ui-color-design-plain-na-focused-bg);
}
#hint_on.--air .hint_icon {
    width: 24px;
    height: 24px;
    margin: 4px;
    background-color: var(--ui-color-design-plain-na-content);
}
#hint_on.--air.hint_icon {
    width: 24px;
    height: 24px;
    margin: 4px;
    background-color: var(--ui-color-design-plain-na-content);
}
#hint_on{
    width:34px;
    height: 34px;
    float:left;
    margin-right:15px;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='-0.5' y='0.5' width='38' height='38' rx='7.5' transform='matrix(-1 0 0 1 38 0)' stroke='white'/%3E%3Cpath d='M13.471 11.5789L12.547 12.5016L13.9219 13.8758L14.8446 12.9531L13.4704 11.5789H13.471ZM25.5296 11.5789L24.1548 12.9531L25.0781 13.8758L26.4523 12.5023L25.529 11.5789H25.5296ZM19.5 11.9884C19.2834 11.9911 19.0642 12.0035 18.8438 12.0304C18.8372 12.0304 18.8306 12.0291 18.8241 12.0304C16.1623 12.3356 14.0439 14.4861 13.6758 17.1361C13.3818 19.2689 14.2612 21.2029 15.7266 22.4484C16.326 22.96 16.7314 23.662 16.875 24.4369V28.3744H18.3713C18.5996 28.7661 19.0163 29.0306 19.5 29.0306C19.9837 29.0306 20.4004 28.7661 20.6287 28.3744H22.125V25.7494H22.1867V24.9697C22.1867 24.0077 22.6867 23.0377 23.4992 22.2837C24.5859 21.1956 25.4062 19.6502 25.4062 17.875C25.4062 14.6331 22.7379 11.9583 19.5 11.9884ZM19.5 13.3009C22.0364 13.2655 24.0938 15.3419 24.0938 17.875C24.0938 19.2492 23.4572 20.4593 22.5758 21.34L22.5968 21.361C21.721 22.1687 21.1547 23.2568 20.9956 24.4375H18.1252C17.9808 23.3127 17.4984 22.224 16.5869 21.443C15.4273 20.4587 14.7363 18.9755 14.9673 17.3008C15.2541 15.2336 16.9314 13.5713 18.9868 13.3436C19.1565 13.3199 19.3274 13.3059 19.4987 13.3016L19.5 13.3009ZM10.3125 17.875V19.1875H12.2812V17.875H10.3125ZM26.7188 17.875V19.1875H28.6875V17.875H26.7188ZM13.9219 23.1867L12.5477 24.5602L13.471 25.4836L14.8439 24.1094L13.9219 23.1867ZM25.0781 23.1867L24.1554 24.1094L25.529 25.4836L26.4523 24.5602L25.0781 23.1867ZM18.1875 25.75H20.8125V27.0625H18.1875V25.75Z' fill='white'/%3E%3C/svg%3E");
    cursor: pointer;
    color: grey;
}

#hint_on.hint_disabled
{
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='-0.5' y='0.5' width='38' height='38' rx='7.5' transform='matrix(-1 0 0 1 38 0)' stroke='grey'/%3E%3Cpath d='M13.471 11.5789L12.547 12.5016L13.9219 13.8758L14.8446 12.9531L13.4704 11.5789H13.471ZM25.5296 11.5789L24.1548 12.9531L25.0781 13.8758L26.4523 12.5023L25.529 11.5789H25.5296ZM19.5 11.9884C19.2834 11.9911 19.0642 12.0035 18.8438 12.0304C18.8372 12.0304 18.8306 12.0291 18.8241 12.0304C16.1623 12.3356 14.0439 14.4861 13.6758 17.1361C13.3818 19.2689 14.2612 21.2029 15.7266 22.4484C16.326 22.96 16.7314 23.662 16.875 24.4369V28.3744H18.3713C18.5996 28.7661 19.0163 29.0306 19.5 29.0306C19.9837 29.0306 20.4004 28.7661 20.6287 28.3744H22.125V25.7494H22.1867V24.9697C22.1867 24.0077 22.6867 23.0377 23.4992 22.2837C24.5859 21.1956 25.4062 19.6502 25.4062 17.875C25.4062 14.6331 22.7379 11.9583 19.5 11.9884ZM19.5 13.3009C22.0364 13.2655 24.0938 15.3419 24.0938 17.875C24.0938 19.2492 23.4572 20.4593 22.5758 21.34L22.5968 21.361C21.721 22.1687 21.1547 23.2568 20.9956 24.4375H18.1252C17.9808 23.3127 17.4984 22.224 16.5869 21.443C15.4273 20.4587 14.7363 18.9755 14.9673 17.3008C15.2541 15.2336 16.9314 13.5713 18.9868 13.3436C19.1565 13.3199 19.3274 13.3059 19.4987 13.3016L19.5 13.3009ZM10.3125 17.875V19.1875H12.2812V17.875H10.3125ZM26.7188 17.875V19.1875H28.6875V17.875H26.7188ZM13.9219 23.1867L12.5477 24.5602L13.471 25.4836L14.8439 24.1094L13.9219 23.1867ZM25.0781 23.1867L24.1554 24.1094L25.529 25.4836L26.4523 24.5602L25.0781 23.1867ZM18.1875 25.75H20.8125V27.0625H18.1875V25.75Z' fill='grey'/%3E%3C/svg%3E");
}


.enjoyhint .enjoyhint_next_btn, .enjoyhint .hint_button_next
{
    width: unset;
    height: unset ;
    padding: 12px 16px ;
    border-radius: 4px ;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-wrap;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #5BCCEF ;
    font-family: 'Segoe UI', Arial, sans-serif ;
    border: 1px solid #5BCCEF;
    z-index: 100000;
}
.enjoyhint .hint_button_next:hover
{
    background-color: #4092ac;
    border: 1px solid #4092ac;
}
.enjoyhint .hint_button_next:active {
    border: 1px solid #4092ac;
}

.enjoyhint .enjoyhint_skip_btn, .enjoyhint .hint_button_skip
{
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 4px ;
    background: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    width: unset;
    height: unset;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-left: 35px;
    z-index: 100000;
}
.enjoyhint .hint_button_skip:hover
{
    background: none;
    border: 1px solid #fff;
    color: #fff;
}

.enjoyhint .enjoyhint_close_btn {
    z-index: 100000;
    width: 21px;
    height: 21px;
    border: none;
}

.enjoyhint .enjoyhint_close_btn:hover {
    background: none;
}

.enjoyhint .enjoyhint_close_btn::after {
    top: calc(50% - 1px);
    left: calc(50% - 4px);
}

.enjoyhint .enjoyhint_close_btn::before {
    top: calc(50% - 1px);
    left: calc(50% - 4px);
}

.enjoyhint .enjoyhint_close_btn::after,
.enjoyhint .enjoyhint_close_btn::before {
    width: 7px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
}

.enjoyhint .enjoyhint_close_btn:hover::after,
.enjoyhint .enjoyhint_close_btn:hover::before {
    background: #fff;
}

.enjoyhint .enjoyhint_close_btn:active {
    border: none;
    background: none;
}

.enjoyhint .enjoy_hint_label {
    min-width: 310px;
    max-width: 540px;
    background-color: rgba(51, 51, 51, 0.7);
    padding: 30px 30px 90px;
    border-radius: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    backdrop-filter: blur(50px);
    line-height: 20px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
}
.enjoyhint.without-btns .enjoy_hint_label {
    padding: 30px 30px 40px;
}

.enjoy_hint_title {
    word-break: break-word;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 20px;
}

.enjoy_hint_content {
    padding: 20px;
    background: #333;
    border-radius: 10px;
    word-break: break-word;
    max-height: 460px;
    overflow: auto;
}

.enjoyhint.light .enjoy_hint_label {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
}

.enjoyhint.light .enjoy_hint_title {}

.enjoyhint.light .enjoy_hint_content {
    background: #fff;
}

.enjoyhint.light .enjoyhint_close_btn::after,
.enjoyhint.light .enjoyhint_close_btn::before {
    width: 7px;
    height: 1px;
    background: rgba(51, 51, 51, 0.5);
}

.enjoyhint.light .enjoyhint_close_btn:hover::after,
.enjoyhint.light .enjoyhint_close_btn:hover::before {
    background: #333;
}

.enjoyhint.light .enjoyhint_skip_btn, .enjoyhint.light .hint_button_skip
{
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 4px ;
    background: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    width: unset;
    height: unset;
    color: rgba(83, 92, 105, 0.5);
    text-transform: uppercase;
    margin-left: 35px;
    z-index: 100000;
}
.enjoyhint.light .hint_button_skip:hover
{
    background: none;
    border: 1px solid #535c69;
    color: #535c69;
}

.enjoy_hint_label h1, .enjoy_hint_label h2, .enjoy_hint_label h3,
.enjoy_hint_label h4, .enjoy_hint_label h5, .enjoy_hint_label h6
{
    color:white!important;

}
.hint_mess
{
    background-color: green;
    padding: 10px 30px 10px 10px;
    font-size: 16px;
    color: white;

}
#hint_mess{
    padding-right: 30px;
}
#bx-panel .hint_icon{
    background: scroll transparent url('/bitrix/js/main/core/images/panel/top-panel-sprite-2.png') no-repeat -265px -1647px!important;
}

#hidden_enj {
    display: none;
}

div#enjoy_hint_counter {
    font-size: 20px;
    line-height: 27px;
    color: rgba(51, 51, 51, 0.5);
    margin-left: auto;
}

#enjoy_top_container{
    display: flex;
}
/* Tour: on "click" steps the highlighted element must be clickable to advance.
   The full-screen .enjoyhint container (pointer-events:auto) otherwise intercepts
   the click. Scoped via .ithive-clickthrough (added by hint code only for such
   steps), so normal steps keep the page fully blocked. */
.enjoyhint.ithive-clickthrough,
.enjoyhint.ithive-clickthrough .enjoyhint_svg_wrapper {
    pointer-events: none;
}
.enjoyhint.ithive-clickthrough .enjoyhint_disable_events,
.enjoyhint.ithive-clickthrough .enjoyhint_next_btn,
.enjoyhint.ithive-clickthrough .enjoyhint_skip_btn,
.enjoyhint.ithive-clickthrough .enjoyhint_close_btn,
.enjoyhint.ithive-clickthrough .enjoy_hint_label {
    pointer-events: all;
}

/* ==== Native hint popup (see hint.popup.js) ================================ */

/* Keep enjoyhint's highlight — the grey dimming overlay with the cut-out shape is
   drawn on the KineticJS canvas (#kinetic_container), so it must stay visible.
   Only hide enjoyhint's own popup chrome: the text label, the connector arrow
   (.enjoyhint_svg_wrapper) and the buttons. The buttons stay in the DOM (opacity,
   not display) so the native popup can trigger them programmatically. */
.enjoyhint.ithive-native-popup .enjoy_hint_label,
.enjoyhint.ithive-native-popup #enjoyhint_label,
.enjoyhint.ithive-native-popup .enjoyhint_svg_wrapper,
.enjoyhint.ithive-native-popup .enjoyhint_next_btn,
.enjoyhint.ithive-native-popup .enjoyhint_skip_btn,
.enjoyhint.ithive-native-popup .enjoyhint_close_btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Lift above the enjoyhint overlay (z-index 2010) and its blockers (2011/2012).
   Scoped to our class so no other .popup-window is affected. */
.popup-window.ithive-hint-popup {
    z-index: 2100 !important;
}

.ithive-hint-popup .popup-window-content {
    padding: 0;
}

.ithive-hint-popup__inner {
    width: 360px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
}

.ithive-hint-popup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 6px;
}

.ithive-hint-popup__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-color-base-1, #202b39);
    overflow-wrap: anywhere;
}

.ithive-hint-popup__counter {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ui-color-base-4, #a8adb4);
}

.ithive-hint-popup__close {
    flex: 0 0 auto;
    cursor: pointer;
    --ui-icon-set__icon-size: 20px;
    --ui-icon-set__icon-color: var(--ui-color-base-4, #a8adb4);
}

.ithive-hint-popup__close:hover {
    --ui-icon-set__icon-color: var(--ui-color-base-1, #202b39);
}

/* Content: capped height/width so very tall or wide inserts stay contained. */
.ithive-hint-popup__body {
    padding: 4px 16px 12px;
    max-height: 55vh;
    overflow: auto;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ui-color-base-2, #333);
    overflow-wrap: anywhere;
}

/* Cap any inserted media/tables to the popup width even if the pasted markup
   carries its own inline width (content can be arbitrarily large). */
.ithive-hint-popup__body img,
.ithive-hint-popup__body video,
.ithive-hint-popup__body iframe {
    max-width: 100% !important;
    height: auto;
}

.ithive-hint-popup__body table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

.ithive-hint-popup__footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 16px 14px;
}

/* ---- Dark theme ---------------------------------------------------------- */
.popup-window.ithive-hint-popup--dark,
.ithive-hint-popup--dark .popup-window-content {
    background: #2a3138;
}

.ithive-hint-popup--dark .ithive-hint-popup__title {
    color: #eef2f6;
}

.ithive-hint-popup--dark .ithive-hint-popup__body {
    color: #c4cbd2;
}

.ithive-hint-popup--dark .ithive-hint-popup__counter {
    color: #8b939c;
}

.ithive-hint-popup--dark .ithive-hint-popup__close {
    --ui-icon-set__icon-color: #8b939c;
}

.ithive-hint-popup--dark .ithive-hint-popup__close:hover {
    --ui-icon-set__icon-color: #eef2f6;
}

/* The popup's angle arrow defaults to a dark (near-black) fill in dark mode —
   match it to the popup background instead. */
.ithive-hint-popup--dark .popup-window-angly--arrow {
    background: #2a3138 !important;
}