.hint{
    border: 2px solid red;
}

.hint_green{
    border: 2px solid green;
}

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