/* CHAT INDICATOR SIZE */
.chat-indicator { width: 100%; height: 50px; border: 0; border-collapse: collapse; }
.chat-indicator td { padding: 0; }

    /* CHAT ICON */
    .chat-indicator .square-32px { cursor: pointer; margin-left: 12px; margin-right: 12px; cursor: pointer; float: left; }

    /* CHAT NICKNAME */
    .chat-indicator .chat-nickname { margin-right: 16px; }

    /* CHAT MESSAGE */
    .chat-indicator .chat-message { width: 100%; position: relative; }
    .chat-indicator .chat-message .triangle-parent { position: absolute; margin-top: 12px; }
    .chat-indicator .chat-message .chat-message-inner { position: absolute; left: 0; top: 12px; right: 16px; height: 26px; line-height: 26px; padding-left: 10px; padding-right: 10px; background-color: #046b94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .chat-indicator .chat-message .triangle { position: absolute; top: 10px; left: -10px; width: 10px; height: 10px; cursor: pointer; background: url('/bitrix/templates/metro/images/triangles/triangles.png') no-repeat 0 0; }

    /* CHAT MESSAGE OLD */
    .chat-indicator .chat-message-old .triangle { background-position: 0 -56px; }
    .chat-indicator .chat-message-old .chat-message-inner { background-color: #404040; color: #fff; }

    .chat-indicator .chat-online-users { margin-left: auto; margin-right: auto; text-align: center; width: 400px; height: 20px; margin-top: 4px; }

/* CHAT WINDOW */

    /* TOP SEPARATE */
    .common-chat-top-separate { height: 24px; background-color: #046b94; position: relative; }
    .common-chat-top-separate .square-16px { position: absolute; right: 10px; top: 4px; cursor: pointer; }
    .common-chat-top-separate .dots-container { padding-top: 9px; width: 35px; height: 15px; cursor: n-resize; }
    .common-chat-top-separate:hover  { cursor: pointer; }
    .common-chat-top-separate:hover .icon-16px-hide { opacity: 1; }
    .common-chat-top-separate-active .icon-16px-hide { background-position: 0 -20px; opacity: 1; }

    /* MESSAGES */
    .common-chat-messages-container { padding: 6px 10px 0; overflow: hidden; background-color: #0e0e0e; }
    .triangle { background: url('/bitrix/templates/metro/images/triangles/triangles.png') no-repeat; }

    /* CHAT MESSAGES */
    .common-chat-messages .messages { border: 0; border-collapse: collapse; }
    .common-chat-messages .messages td { padding: 0; }
    .common-chat-messages .messages tr/*:not(:first-of-type)*/ td { padding-bottom: 10px; }

    /* MESSAGE CHAT */
    .common-chat-messages .message-text { word-break: break-all; margin-right: 40px; }

    /* MESSAGE CENSURE */
    .common-chat-messages .message-censure { color: #f00; text-decoration: line-through; }

    /* USER AVATAR */
    .common-chat-messages .user-avatar { width: 32px; }
    .common-chat-messages .user-avatar > div { position: relative; }
    .common-chat-messages .user-avatar .icon-16px-delete { position: absolute; top: -2px; left: -4px; cursor: pointer; }
    .common-chat-messages .user-avatar > div > div, .common-chat-messages .user-avatar img { width: 32px; height: 32px; background-color: #000; text-align: center; }

    /* USER NICKNAME */
    .common-chat-messages .user-nickname {  }
    .common-chat-messages .user-nickname > div { padding-left: 10px; width: 90px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

    /* USER MESSAGE */
    .common-chat-messages .user-message { width: 100%; }
    .common-chat-messages .user-message > div { position: relative; padding: 10px; margin-left: 20px; }
    .common-chat-messages .triangle { position: absolute; top: 10px; left: -10px; width: 10px; height: 10px; }

    /* TIME */
    /*.common-chat-messages .time { margin-top: 6px; } */

    /* NEW COMMENT */
    .common-chat-messages-post { padding: 16px 10px 16px; background-color: #000; }
    .common-chat-no-auth { padding: 24px 10px 24px; }
    .common-chat-messages .comment-send { width: 100%; }
    .common-chat-messages .comment-send-area { position: relative; width: 100%; height: 30px; }
    .common-chat-messages .comment-send-area > div > div { position: absolute; left: 20px; top: 0; right: 0; }
    .common-chat-messages textarea { display: block; position: absolute; left: 0; top: 0; right: 0; padding-left: 10px; padding-right: 10px; resize: none; height: 23px; padding-top: 7px; white-space: nowrap; overflow: hidden; }
    .common-chat-messages .label-textarea { color: #404040; position: absolute; padding-left: 10px; padding-right: 10px; height: 23px; padding-top: 7px; z-index: 1; }

    /* COLORS */
        /* NO FOCUS */
        .common-chat-messages .comment-send .triangle { background-position: 0 -84px; }
        .common-chat-messages textarea { background-color: #bfbfbf; color: #404040; width: 100%; }
        /* FOCUS & HOVER */
        .common-chat-messages textarea:focus/*, .common-chat-messages textarea:hover*/ { background-color: #fff; color: #000; }
        .common-chat-messages textarea:focus + .triangle/*, .common-chat-messages textarea:hover + .triangle*/ { background-position: 0 -70px; }
        /* SUBMIT BUTTON */
        .common-chat-messages button { display: block; margin-left: 30px; margin-top: -4px; cursor: pointer; }

    /* COLORS */
        /* ADMIN */
        .common-chat-messages .admin .user-message > div { background-color: #046B94; }
        .common-chat-messages .admin .triangle { background-position: 0 0; }
        .common-chat-messages .admin .time { color: #c4c4c4; }
        /* DEFAULT */
        .common-chat-messages .default .user-message > div { background-color: #262626; }
        .common-chat-messages .default .triangle { background-position: 0 -98px; }
        .common-chat-messages .default .time { color: #666; }
        /* ME */
        .common-chat-messages .me .user-message > div { background-color: #404040; }
        .common-chat-messages .me .triangle { background-position: 0 -56px; }
        .common-chat-messages .me .time { color: #c4c4c4; }

    /* IS MODER */
    .common-chat-messages .messages .hide-message { display: none; position: absolute; right: 50px; top: 9px; cursor: pointer; }
    .common-chat-messages .messages .censure-message { display: none; position: absolute; right: 70px; top: 9px; cursor: pointer; }
    .common-chat-messages .user-avatar .icon-16px-delete { display: none; }

    .common-chat-messages .user-ban .user-nickname div { color: #f00; text-decoration: line-through; }

    /* */
    .common-chat-messages .moderation .user-avatar:hover .icon-16px-delete { display: block; }
    .common-chat-messages .moderation .user-message:hover .hide-message { display: block; }
    .common-chat-messages .moderation .user-message:hover .censure-message { display: block; }
    .common-chat-messages .moderation .message-text { margin-right: 78px; }



    /* HIDE */
    .common-chat-messages .messages .hide { opacity: .4; }