:root {
        --chat-tab-back                     : black;
        --chat-tab-text                     : white;
        --chat-settings-back                : white;
        --chat-settings-border              : black;
        --chat-settings-text                : black;
        --chat-body-back                    : white;
        --chat-body-border                  : black;
        --chat-body-divider                 : #777;
        --chat-msg-text                     : black;
        --chat-msg-odd-text                 : var(--chat-msg-text);
        --chat-msg-odd-back                 : #FFFDE2;
        --chat-msg-attribution-text         : rgba(0,0,0,0.6);
        --chat-text-box-back                : #CCF;
        --chat-text-box-text                : black;
        --chat-party-back-0                 : white;
        --chat-party-back-1                 : #FFFDE2;
    }

    #chat {
        position            : fixed;
        bottom              : 0px;
        right               : 8px;
        z-index             : 100;
        width               : 200px;
    }
    #chat.open {
        top                 : 70px;
    }

    .chat_tab {
        background          : var(--chat-tab-back);
        color               : var(--chat-tab-text);
        cursor              : pointer;
        height              : 14px;
        line-height         : 14px;
        min-width           : 100px;
        padding             : 3px 5px;
        position            : relative;
        border-top-left-radius              : 5px;
        border-top-right-radius             : 5px;
    }
    #chat .chat_tab {
        padding             : 0px;
        width               : 100px;
        margin-left         : 100px;
    }
    #chat.open .chat_tab {
        margin-left         : 0px;
    }
    .chat_menu_icon {
        display             : none;
    }
    #chat.open .chat_menu_icon {
        display             : block;
        position            : absolute;
        top                 : 2px;
        left                : 3px;
        background          : url('/images/icons/chat_menu.gif');
        width               : 12px;
        height              : 12px;
    }

    .chat_notification_icon {
        display             : none;
        position            : absolute;
        top                 : -8px;
        left                : 92px;
        background          : url('/images/icons/red_circle.19.png');
        width               : 19px;
        height              : 19px;
        font-size           : 12px;
        line-height         : 19px;
        text-align          : center;
        color               : white;
    }
    .chat_notification_icon.inactive {
        background          : url('/images/icons/grey_circle.19.png');
    }
    .gn_notification_icon {
        display             : block;
        top                 : -5px;
        left                : -15px;
    }
    .gn_inline_notification_icon {
        display             : inline-block;
        position            : relative;
        top                 : inherit;
        left                : inherit;
    }

    #chat_settings {
        position            : absolute;
        top                 : 0px;
        right               : 198px;
        min-height          : 40px;
        width               : 200px;
        background          : var(--chat-settings-back);
        border              : 2px solid var(--chat-settings-border);
        padding             : 3px;
        color               : var(--chat-settings-text);
        display             : block;
        text-align          : left;
    }
    #chat_settings.hidden {
        display             : none;
    }
    #chat_settings p {
        margin              : 2px 0px;
        padding             : 0px;
    }

    .chat_body {
        background          : var(--chat-body-back);
        border              : 2px solid var(--chat-body-border);
    }
    #chat .chat_body {
        border-bottom       : none;
        height              : 100%;
        display             : none;
    }
    #chat.open .chat_body {
        display             : block;
    }

    .chat_msgs_holder {
        background          : #999999;
        overflow-y          : scroll;
    }
    .chat_inline .chat_msgs_holder {
        height              : 300px;
    }
    #chat .chat_msgs_holder {
        background          : #999999;
        /*position            : fixed;
        top                 : 86px;
        right               : 10px;
        bottom              : 50px;*/
        height: calc(100% - 65px);
        width               : 196px;
        overflow-y          : scroll;
    }

    .chat_msgs {
        background          : var(--chat-body-back);
    }

    .chat_msgs div.chat_msg, .chat_msgs div.chat_alert {
        border-bottom       : 1px solid var(--chat-body-divider);
        padding             : 5px;
        color               : var(--chat-msg-text);
        text-align          : left;
    }
    .chat_msgs div.chat_alert {
        background          : #888;
        color               : white;
        font-style          : italic;
        padding             : 1px 5px;
    }

    .chat_msgs div.chat_msg:nth-child(even) {
        background          : var(--chat-msg-odd-back);
        color               : var(--chat-msg-odd-text);
    }
    .chat.chat_inline .chat_msg.party_0 {
        background          : var(--chat-party-back-0);
    }
    .chat.chat_inline .chat_msg.party_1 {
        background          : var(--chat-party-back-1);
    }

    .chat_msg p {
        padding             : 0px;
        margin              : 0px;
        overflow-wrap       : break-word;
    }

    .chat_msg p.pinged {
        font-weight         : bold;
    }

    .chat_msg p.attribution, .chat_msg p.attribution a {
        margin-top          : 4px;
        color               : var(--chat-msg-attribution-text);
        font-style          : italic;
        font-size           : 10px;
    }

    .chat_box {
        height              : 50px;
        padding             : 0px;
        width               : 100%;
        box-sizing          : border-box;
    }
    #chat .chat_box {
        position            : absolute;
        left                : 0px;
        bottom              : 0px;
        border-left         : 2px solid var(--chat-body-border);
        border-right        : 2px solid var(--chat-body-border);
        border-top          : 1px solid var(--chat-body-divider);
    }

    .chat_box .chat_submit textarea.chat_text_box {
        margin              : 0px;
        height              : 50px;
        min-height          : 50px;
        border              : 0px;
        background          : var(--chat-text-box-back);
        color               : var(--chat-text-box-text);
        padding             : 3px;
        box-sizing          : border-box;
        width               : 100%;
    }

    body.chat_open #main_body_decorative {
        margin-right    : 210px;
    }
    body.chat_open #main_footer_content {
        margin-right    : 210px;
    }

    /* ****************************************************************** */
    /* CHAT ON MOBILE
    /* ****************************************************************** */

	@media screen and (max-width: 900px) {

		 body.chat_open #main_body_decorative {
			margin-right    	: 0px;
			position        	: relative;
		 }
		 
		 body.chat_open #main_footer_content {
			margin-right    	: 0px;
		 }
		
		 #chat {
			position            : inherit;
			width               : 100%;
			overflow            : hidden;
			border-bottom		: 5px solid var(--chat-body-border);
		 }
		 
		 .chat_open #chat {
			height              : 400px;
			border-bottom		: 2px solid var(--chat-body-border);
		 }

		 #chat .chat_body {
			width               : auto;
			height              : 496px;
			border-width        : 2px;
		}

		 #chat_tab {
			margin-left			: 0px;
		}

		 #chat_settings {
			position            : inherit;
			width				: auto;
			border-bottom		: 0px;
		}

		 #chat .chat_msgs_holder {
			position            : inherit;
			width               : auto;
			height              : 348px;
			overflow-y          : scroll;
		}

		 #chat .chat_box {
			position            : inherit;
			width               : auto;
			height              : 47px;
			padding             : 0px;
			margin              : 0px;
			border-left         : none;
			border-right        : none;
			border-bottom       : none;
			border-top          : 1px solid var(--chat-body-border);
		}

		 #chat .chat_text_box {
			width               : 100%;
			height              : 36px;
			padding             : 2px;
			margin              : 0px;
		}
    }