/** sprite: widgeticons; sprite-image: url('../i/icons/widgeticons.png'); sprite-layout: vertical */

html,body {
    height:100%; /*opera resize the fix*/
}
body {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: #ffffff;
    color:#000000;
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
}
div {
    scrollbar-width: thin;
    scrollbar-color: #dadada #eeeeee;
    /*scrollbar-gutter: stable;*/
}
div::-webkit-scrollbar {
    width: 9px;
}
div::-webkit-scrollbar-track {
    background-color: #eeeeee;
    border-radius: 20px;
}
div::-webkit-scrollbar-thumb {
    background-color: #dadada;
    border-radius: 20px;
    border: transparent;
}
div::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
}
a {
    color:#1D6E9C;
    text-decoration: none;
}
a:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

a:hover,
a:active {
    outline: 0;
}
a:hover {
    text-decoration: underline;
}
.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}
/* ie7 fix */
form {
    margin:0;
    padding:0;
}
.nosel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img {
    border: 0;
}
.hidden {
    display:none;
}
.chat {
    position:absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;

    /* 3 - 0 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.chat.inFrame {
    border-bottom:1px solid #bcbcbc;
}
/* HEADER */
.chatHeaderWrapper {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 2;
    padding-right: 4px;
}
.chatUsersHeaderWrapper {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    height: 30px;
}
.noFilter .chatUsersHeaderWrapper {
    display: none;
}
.menuItem {
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto;
}
.menuItemRight {
    /*float: right;*/
}

.chatHeaderWrapper .menuItem .goog-inline-block {
    display: flex;
    min-width: 0;
    align-items: center;
}

.chatHeaderWrapper .menuItem.nickItem, .chatHeaderWrapper .menuItem.statusItem,
.chatHeaderWrapper .menuItem.accountItem {
    display: none;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}
.chatHeaderWrapper .menuItem.nickItem {
    padding-left: 4px;
}
.chatHeaderWrapper .menuItem.accountItem i, .chatHeaderWrapper .menuItem.statusItem {
    flex-shrink: 0;
}

.chatHeaderWrapper .menuItem.loadingItem {
    cursor: default;
    flex: 0 1 auto;
}
.chatHeaderWrapper .menuItem.loadingItem:hover {
    background-color: transparent;
}
.chatHeaderWrapper .menuItem.loadingItem i {
    width: 18px;
    height: 6px;
    background: transparent url(../i/loading.png) no-repeat left top;
    display: block;
    flex-shrink: 0;
}

.chatHeaderWrapper .menuItem.nickItem i {
    vertical-align: top;
}

a.goog-menuitem {
    display: block;
    cursor: default;
}
a.goog-menuitem:hover {
    text-decoration: none;
}

.forAccount, a.forAccount {
    display: none;
}
.hasAccount .forAccount {
    display: block;
}

.forNick, a.forNick {
    display: none;
}

.hasNick .forNick {
    display: block;
}
.chatHeaderWrapper .goog-menu-button-open, .chatHeaderWrapper .goog-menu-button-hover {
    background-color: #397597;
}

.forMod, a.forMod {
    display: none;
}
/* block default */
.hasMod .forMod {
    display: block;
}

.chatHeaderWrapper .menuItem .text {
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
    line-height: 30px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
    /*text-shadow: 1px 1px 0 #666666;*/
    filter: dropshadow(color=#366e8e, offx=1, offy=1);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.chatHeaderWrapper .caret {
    width: 0;
    height: 0;
    flex-shrink: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;
    display: block;
    content: "";
    -webkit-filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3));
}

i.logoIcon {
    width:20px;
    height:17px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;
    position:relative;
    background-color:transparent;
    background-image: url(../i/logo.png); /** sprite-ref: widgeticons; */
    background-repeat: no-repeat;
    margin-top: 8px;
}


.chatHeaderWrapper .menuItem.expandItem {
    display: none;
}
.chatEnableNewWindow .chatHeaderWrapper .menuItem.expandItem {
    display: flex;
}
.chatHeaderWrapper .menuItem.controlItem {
    padding-left: 0;
    padding-right: 0;
    cursor: default;
    flex: 0 1 auto;
}
.chatHeaderWrapper .menuItem.controlItem:hover {
    background-color: transparent;
}
.chatHeaderWrapper .menuItem.controlItem i:hover {
    background-color: rgba(0,0,0,0.2);
}

.menuItem i.minimizeIcon, .menuItem i.closeIcon, .menuItem i.expandIcon {
    width: 19px;
    height: 19px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center center;
    flex-shrink: 0;
}
.menuItem i.minimizeIcon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACdJREFUeNpi/P//PwMuwMSABww6SRYgxuoXRiDAp9OYEcbAJgsQYADHnAR7Gf1PwQAAAABJRU5ErkJggg==');
}
.menuItem i.closeIcon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAYAAAArzdW1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEBJREFUeNpi+A8FDGgAWZwRJgDmAAEa3wSuCFkCBmAKgOAsLiuMoZiBkEmMeE3A8AwuKzB8hyR5Fi0kwOIAAQYAtjBLZYrvon4AAAAASUVORK5CYII=');
}
.menuItem i.expandIcon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlJREFUeNpi/A8EDAQAIxAwMRAHjFmgOkxwqQBaeAZEsyCJncVnJLFWD6RCFmSf4Q1LWDgRUggQYABThw0VXmHoNAAAAABJRU5ErkJggg==');
}

.menuItem .nickIcon {
    display: block;
}
.menuItem .content .nickIcon {
    margin-right: 7px;
}
.chatHeaderWrapper .menuItem.statusItem {
    padding-left: 4px;
    padding-right: 2px;
}

.leftBlock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.inFrame .leftBlock {
    border-left: 1px solid #bcbcbc;
}

/* ROOMS AND MESSAGES AND Users */
.chatMessagesAndUsers {
    position:absolute;
    left:0;
    right:0;
    top:30px;
    bottom:0;
    z-index: 1;
}
.chatRoomsAndMessages {
    position:absolute;
    left:0;
    right:111px;
    top:0;
    bottom:0;
}
/* ROOMS */
.chatRoomsWrapper {
    /*position:absolute;*/
    left:0;
    margin-left: 6px;
    right:0;
    top:6px;
    height:30px;

    display: flex;
    /*border-bottom: 1px solid #e1e1e1;*/
    /*background-color: #f8f8f8;*/
    position: relative;
    /*overflow: hidden;*/
}
.scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    /*background-color: rgba(255, 255, 255, 0.9);*/
    border: none;
    width: 30px;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s ease;
    opacity: 1;
    position: relative;
}

/*.scroll-btn:hover {*/
/*    background-color: rgba(240, 240, 240, 0.9);*/
/*}*/

.scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.scroll-btn svg {
    width: 18px;
    height: 18px;
}

/* Notification indicator on scroll buttons */
.scroll-notification {
    position: absolute;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff3b30;
    display: none;
}

.scroll-left .scroll-notification {
    left: 3px;
}

.scroll-right .scroll-notification {
    right: 3px;
}

.scroll-btn.has-notification .scroll-notification {
    display: block;
}

/* Highlighted state for scroll buttons with notifications */
/*.scroll-btn.has-notification:not(:disabled) {*/
/*    background-color: rgba(255, 245, 245, 0.9);*/
/*    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.3);*/
/*}*/

.scroll-btn.has-notification:hover:not(:disabled) {
    background-color: rgba(255, 240, 240, 0.9);
}
/* Show scroll buttons when needed */
.has-overflow .scroll-btn {
    display: flex;
}

/* Badge counter */
.notification-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff3b30;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    display: none;
}

.scroll-btn.has-multiple-notifications .notification-counter {
    display: flex;
}
.chatRoomsContainer {
    /*overflow:hidden;*/
    /*white-space:nowrap;*/
    /*position:relative;*/

    display: flex;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
    flex-grow: 1;
}
.chatRoomsContainer::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.chatRooms {
    /*height:25px;*/
    /*overflow:visible;*/
    /*float:left;*/
    /*min-width:100%;*/

    display: flex;
    flex-wrap: nowrap;
    min-width: 100%;
    gap: 6px;
}
.chatRoom {
    padding: 0 6px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    /*border-right: 1px solid #e1e1e1;*/
    cursor: pointer;
    position: relative;
    min-width: auto;
    background-color:#eaeaea;
    transition: background-color 0.2s;
}
/*.chatRoom.active {*/
    /*background-color: white;*/
    /*border-bottom: 2px solid #3a7cff;*/
    /*font-weight: bold;*/
/*}*/
/*.chatRoom:hover {*/
/*    background-color: #efefef;*/
/*}*/
.chatRoom .nick {
    margin-left: 8px;
    margin-right: 8px;
}

/* Responsive styles */
@media (max-width: 768px) {
    /*.chatRoom {*/
    /*    padding: 10px 12px;*/
    /*}*/

    .scroll-btn {
        width: 24px;
    }

    /*.chatRoom .nick {*/
    /*    font-size: 14px;*/
    /*}*/
}

@media (max-width: 480px) {
    .chatRoom {
        padding: 0 10px;
    }
}
/*.chatRooms ul {*/
/*    list-style-type:none;*/
/*    margin:0;*/
/*    padding:0;*/
/*}*/
/*.chatRooms ul li {*/
/*    margin:0 6px 0 0;*/
/*    padding:0;*/

/*    display: -moz-inline-stack;*/
/*    display: inline-block;*/
/*    vertical-align: top;*/
/*    zoom: 1;*/
/*    *display: inline;*/
/*}*/
/*.chatRooms ul li.chatApplication {*/
/*    border: 0;*/
/*    margin:0 0 0 8px;*/
/*}*/
/*.chatRooms ul li a {*/
/*    display:block;*/
/*    text-decoration:none;*/
/*    !*color:#000;*!*/
/*    height:25px;*/
/*    line-height:25px;*/
/*    padding:0 8px;*/
/*    background-color:#eaeaea;*/
/*    outline:0;*/
/*    position:relative;*/
/*    cursor: pointer;*/
/*}*/

.chatHeaderWrapper, .chatRoom.active, .chatRoom.blink, .chatRoom:hover,
.chatRoomsButton a:hover, .closeIconWrapper > .closeIconColor, .chatWindow .header,
.chatSendControlsWrapper div.buttonWrapper a.sendMessageButton, .chatSendControlsWrapper .buttons a.register,
.nickIcon .filler {
    background-color:#4d9dcb;
    color: #ffffff;
}
/*.chatRooms ul li.active a {*/
/*    cursor: default;*/
/*}*/
/*.chatRooms ul li.chatApplication a {*/
/*    background-color: transparent;*/
/*    padding: 0;*/
/*}*/
/*.chatRooms ul li.chatApplication a:hover, .chatRooms ul li.chatApplication a:focus, .chatRooms ul li.blink.chatApplication a {*/
/*    background-color:transparent;*/
/*    text-decoration: underline;*/
/*}*/

/*.chatRooms ul li.active.chatApplication a {*/
/*    background-color:transparent;*/
/*}*/
.icon {
    width:16px;
    height:16px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;
    position:relative;
    margin-right:4px;
}
.icon.right {
    margin-right: 0;
    margin-left: 4px;
}
/*.chatRooms ul li.chatApplication .icon {*/
/*    background-image: url(../i/icons/application.png); !** sprite-ref: widgeticons; *!*/
/*}*/
.chatRooms .cnt {
    /*background-color: #f2391b;*/
    /*color: #ffffff;*/
    /*padding: 0 3px;*/
    /*margin-left: 4px;*/
    /*font-size: 12px;*/
    /*font-weight: bold;*/
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff3b30;
    position: absolute;
    top: 2px;
    left: 3px;
    display: none;
}
.chatRoom.has-notification .cnt {
    display: block;
}
.closeIconWrapper {
    width:12px;
    height:12px;
    cursor:pointer;
    display: none;
}
.chatRoom .closeIconWrapper {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #666;
    margin-left: 4px;
    visibility: hidden;
    transition: background-color 0.2s;
}
.chatRoom.closeable .closeIconWrapper {
    visibility: visible;
}

.chatRoom:hover .closeIconWrapper, .chatRoom.active .closeIconWrapper {
    background-color: rgba(255, 255, 255, 0.7);
}

.chatRoom:hover .closeIconWrapper:hover {
    background-color: #ffffff;
    color: #000000;
}
/*.chatRooms .closeIconWrapper {*/
/*    position:absolute;*/
/*    right:-6px;*/
/*    top:7px;*/
/*}*/
.closeIconWrapper > .closeIconColor {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    top: 2px;
}
.closeIconWrapper > i.closeIcon {
    width:12px;
    height:12px;
    background-image: url(../i/icons/tclose.png); /** sprite-ref: widgeticons; */
    background-repeat: no-repeat;
    position:absolute;
    right:0;
    top:0;
}

.chatRoomsButton {
    position: absolute;
    right: 0;
    top: 6px;
}
.chatRoomsButton a {
    display: block;
    line-height: 25px;
    padding: 0 8px;
}
.chatRoomsButton a:hover {
    text-decoration: none;
}
/* CHAT MESSAGES */
.chatMessagesWrapper {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 41px;
    bottom: 44px;
    right: 0;
}
.entered .chatMessagesWrapper {
    bottom: 95px;
}
.entered.tb2 .chatMessagesWrapper {
    bottom: 119px;
}
.chatMessagesContainer {
    position:absolute;
    left:0;
    top:3px;
    bottom:3px;
    right:0;
    overflow-y:auto;
    overflow-x:hidden;
    /*word-break: break-all;*/
    word-wrap: break-word;
    -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
.chatMessagesContainer .loadPrev {
    text-align: center;
    padding: 1px 0 2px 0;
}
.chatMessagesContainer .loadPrev a {
    text-decoration: none;
    border-bottom: 1px dotted #000;
    color: #000;
}
.chatMessagesScrollBottom {
    position: absolute;
    right: 14px;
    bottom: 3px;
    padding: 4px 7px 4px 20px;
    background-repeat: no-repeat;
    background-image: url(../i/icons/bottom.svg?2);
    background-position: 5px center;
    background-size: 12px;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #cccccc;
    font-size: 12px;
}
.chatMessagesClean {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../i/icons/clean.png); /** sprite-ref: widgeticons; */
    cursor: pointer;
    display: none;
    opacity: 0.3;
}
.scrolled .chatMessagesClean {
    right: 10px;
}
.chatMessage {
    position:relative;
    padding: 0.4em 22px 0.4em 41px;
}
.chatMessage.msg-deleted {
    opacity: 0.6;
}
.chatMessage.msg-minor {
    padding-top:0.1em;
    padding-bottom:0.1em;
}
.chatMessage.msg-has-actions {
    padding-left: 12px;
}
.chatMessage.msg-minor .text {
    opacity: 0.4;
    font-style: italic;
    display: block;
}
.chatMessage.msg-minor .text a {
    color: inherit;
}
.chatMessage .time {
    margin-left: 0.2em;
    color: #666666;
    font-size: 10px;
    /* very important for arabic names */
    unicode-bidi: embed;
}
.chatMessage .from-line {
    margin-bottom: 0.4em;
    white-space: nowrap;
}
.chatMessage .text {
    line-height: 1.3;
}
.chatMessage:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.chatSizeMode0 .chatMessage, .chatSizeMode0 .chatErrorMessage {
    padding-right: 0;
}
.chatErrorMessage {
    color:#aa0000;
}
.chatErrorMessage.success {
    color:#00aa00;
}
.chatErrorMessage.info {
    color:#000000;
}
.chatMessage.hl {
    background-color: #FFF3DA;
}
.chatMessage .info {
    position:absolute;
    top: 0.4em;
    right: 0.4em;
    color:#666666;
    font-size:10px;
    display: none;
    white-space: nowrap;
    cursor: pointer;
}
.chatMessage .time {
    -moz-text-shadow: 1px 1px 0 #ffffff;
    -webkit-text-shadow: 1px 1px 0 #ffffff;
    text-shadow: 1px 1px 0 #ffffff;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#ffffff')";
}
.chatMessage .toarr {
    padding: 0 2px;
    opacity: 0.5;
}
.chatMessage .smiley {
    cursor: pointer;
}
a.from {
    color: #000000;
}
.chatMessage a.from {
    font-weight: bold;
}
.chatMessage .msg-avatar {
    position: absolute;
    left: 7px;
    top: 8px;
    width: 25px;
    height: 36px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../i/av/a.jpg);
    border-radius: 6px;
}

/* say to */
.chatMessage .pw {
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-image: url(../i/unread.svg);
    background-size: contain;
    display: none;
    margin-left: 0.6em;
    font-size: 10px;
    vertical-align: middle;
}
.chatMessage.unread .pw {
   display: inline-block;
}

/* check */

.chatMessage > .info > .check {
    margin-left: 1px;
}

.chatMessage > .info > .check > i {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../i/check_hover.svg);
    background-size: contain;
    opacity: 0.2;
}
.chatMessage.active > .info > .check > i {
    background-image: url(../i/check.svg);
    opacity: 1;
}
.chatMessage.active {
    background-color: #eeeeee;
}

.chatMessage:not(.msg-has-actions):not(.msg-minor):hover > .info, .chatMessage.active:not(.msg-has-actions):not(.msg-minor) > .info {
    display: block;
}
.chatMessage.unread:hover {
    background: none;
}

.chatMessage img.resized, .chatErrorMessage img.resized {
    cursor: pointer;
}

/* Markdown */
.chatMessage p {
    margin: 0.2em 0;
}
.chatMessage h1,
.chatMessage h2,
.chatMessage h3,
.chatMessage h4,
.chatMessage h5,
.chatMessage h6 {
    margin: 0.5em 0 0.3em 0;
    font-weight: bold;
    line-height: 1.2;
}
.chatMessage h1 { font-size: 1.4em; }
.chatMessage h2 { font-size: 1.3em; }
.chatMessage h3 { font-size: 1.2em; }
.chatMessage h4 { font-size: 1.1em; }
.chatMessage h5 { font-size: 1em; }
.chatMessage h6 { font-size: 0.9em; opacity: 0.9; }
.chatMessage ul,
.chatMessage ol {
    margin: 0.4em 0;
    padding-left: 1.5em;
}
.chatMessage li {
    margin: 0.2em 0;
}
.chatMessage blockquote {
    margin: 0.4em 0;
    padding: 0.2em 0.8em;
    border-left: 3px solid rgba(128, 128, 128, 0.3);
    opacity: 0.9;
}
.chatMessage code {
    padding: 0.1em 0.3em;
    background: rgba(128, 128, 128, 0.15);
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}
.chatMessage pre {
    margin: 0.4em 0;
    padding: 0.5em;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    overflow-x: auto;
}
.chatMessage pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}
.chatMessage hr {
    margin: 0.5em 0;
    border: none;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
}
.chatMessage table {
    margin: 0.4em 0;
    border-collapse: collapse;
    font-size: 0.95em;
}
.chatMessage th,
.chatMessage td {
    padding: 0.3em 0.5em;
    border: 1px solid rgba(128, 128, 128, 0.3);
}
.chatMessage th {
    font-weight: bold;
    background: rgba(128, 128, 128, 0.1);
}
.chatMessage img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.chatMessage strong,
.chatMessage b {
    font-weight: bold;
}
.chatMessage em,
.chatMessage i {
    font-style: italic;
}
.chatMessage del,
.chatMessage s {
    text-decoration: line-through;
}
.chatMessage a code {
    color: inherit;
}
.chatMessage .spoiler {
    background: rgba(128, 128, 128, 0.8);
    color: transparent;
    border-radius: 3px;
    padding: 0.1em 0.3em;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
}
.chatMessage .spoiler:hover,
.chatMessage .spoiler:active {
    background: rgba(128, 128, 128, 0.2);
    color: inherit;
    user-select: text;
}

.chatMessagesTab {
    visibility:hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
}
.chatMessagesTab.active {
    visibility:visible;
}
.chatMessagesTab:focus {
    outline: none;
}
.chatSplitter {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    right: 102px;
    cursor: e-resize;
}
.chatSplitter div {
    position: absolute;
    height: 6px;
    top: 50%;
    left: 50%;
    width: 5px;
    margin-top: -3px;
    margin-left: -2px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../i/icons/right.gif); /** sprite-ref: widgeticons; */
    cursor: pointer;
    display: none;
}
.chatSplitter:hover div {
    display: block;
}
.chatSplitter.right {
    cursor: pointer;
}
.chatSplitter.right div {
    background-image: url(../i/icons/left.gif); /** sprite-ref: widgeticons; */
}
.chatSplitter.right:hover {
    background-color: #cccccc;
}
.inFrame .chatSplitter.right {
    border-right: 1px solid #bcbcbc;
}
.chatUsersAndFilter {
    position:absolute;
    top:0;
    right:0;
    bottom: 0;
    width: 100px;
    border-left: 1px solid #BCBCBC;
}
/* USERS FILTER */
.chatUsersFilter {
    position:absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 0;
    padding-left: 12px;
    padding-top: 2px;
    border: 1px solid #eee;
}
.chatUsersFilter input {
    padding: 1px 6px 1px 6px;
    width: 100%;
    height: 100%;
    margin-left: -12px;
    margin-top: -2px;
    border: 0;
    font-size: 12px;
    display: block;
}
.chatUsersFilter .clearIcon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 1px;
    margin-top: -8px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../i/icons/clean.png); /** sprite-ref: widgeticons; */
    cursor: pointer;
    display: none;
}

/* USERS LIST */
.chatUsersWrapper {
    position: absolute;
    top: 0;
    /* todo uncomment */
    /*bottom: 89px;*/
    bottom: 0;
    right: 0;
    left: 0;
}
.noFilter .chatUsersWrapper {
    top: 0;
}
.inFrame .chatUsersAndFilter {
    border-right: 1px solid #bcbcbc;
}
.chatUsersWrapper a.findMore {
    margin-left: 4px;
    display: block;
    margin-top: 4px;
    text-decoration: underline;
}
.chatUsersContainer {
    position:absolute;
    left:3px;
    top:4px;
    bottom:1px;
    right:0;
    overflow-y:auto;
}
.chatUsers {
    padding:0;
}
.chatUser {
    padding:0 0 0 3px;
}
.chatUsers ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
.chatUsers ul li {
    padding:3px 3px;
    margin: 0;
    /*width: 100%;*/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
.chatUsers ul li.away, .chatUsers ul li.dnd {
    opacity: 0.5;
}
.chatUsers ul li div {
    margin-left: 21px;
}

.chatUsers .nickIcon {
    float: left;
}

.chatUsersTab {
    visibility:hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:36px;
}
.chatUsersTab.private {
    background-color: #eeeeee;
    top:0;
}
.chatUsersTab.active {
    visibility:visible;
}
.chatUsersTab:focus {
    outline: none;
}

/* USER POPUP */

.chatUserPopupWrapper {
    visibility: hidden;
    position:absolute;
    top:0;
    left:0;
    border:1px solid #cccccc;
    background-color: #ffffff;
    z-index:6;
    box-shadow: 0px 4px 18px #888;
    -moz-box-shadow: 0px 4px 18px #888;
    -webkit-box-shadow: 0px 4px 18px #888;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.chatUserPopupWrapper .chatUserPopupContainer {
    padding:8px 9px;
}

.chatUserPopupWrapper .head {
    padding-bottom: 8px;
    width: auto;
    overflow: hidden;
}
.chatUserPopupWrapper .head > .info {
    float: left;
    font-weight: bold;
    cursor: pointer;
}
.chatUserPopupWrapper .head > .mod {
    border-left: 1px solid #cccccc;
    margin-left: 4px;
    padding-left: 4px;

    float: left;
    text-decoration: underline;
    cursor: pointer;
}
.chatUserPopupWrapper.moderate .head > .info {
    font-weight: normal;
    text-decoration: underline;
}
.chatUserPopupWrapper.moderate .head > .mod {
    float: left;
    font-weight: bold;
    text-decoration: none;
    cursor: default;
}

.chatUserPopupWrapper .nickIcon {
    margin-right: 2px;
}

.chatUserPopupWrapper .menu {
    font-size:12px;
    margin:0 10px 0 0;
    padding:0;
    list-style-type:none;
    float:left;
}
.chatUserPopupWrapper .menu li {
    padding: 0 0 4px 0;
}
.chatUserPopupWrapper .menu a {
    color: #000;
}
.chatUserPopupWrapper .menu .icon {
    vertical-align: -3px;
}
.chatUserPopupWrapper .menu > .removeFriend {
    display: none;
}
.chatUserPopupWrapper .avatar {
    width:55px;
    height: 80px;
    float:left;
    margin-right: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.chatUserPopupWrapper.registered .avatar {
    cursor: pointer;
}
.chatUserPopupWrapper .body > .moderate {
    display: none;
}
.chatUserPopupWrapper .body > .moderate .nickid .icon {
    vertical-align: top;
}
.chatUserPopupWrapper .body > .moderate .content > div {
    line-height: 160%;
}
.chatUserPopupWrapper .body > .moderate .content > div.banned {
    color: red;
}
.chatUserPopupWrapper .body > .moderate .content .value {
    font-weight: bold;
}
.chatUserPopupWrapper.moderate .body > .view {
    display: none;
}
.chatUserPopupWrapper.moderate .body > .moderate {
    display: block;
}
.chatUserPopupWrapper .body > .moderate > .content > ul.menu {
    padding-top: 3px;
    padding-bottom: 4px;
}
.chatUserPopupWrapper .body > .moderate > .content > ul.menu > li {
    font-weight: bold;
    float: left;
    margin-left: 9px;
}
.chatUserPopupWrapper .body > .moderate > .content > ul.menu > li:first-child {
    margin-left: 0;
}
.chatUserPopupWrapper .more {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.chatUserPopupWrapper .more span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #999999 transparent transparent transparent;
    display: inline-block;
    content: "";
}

.chatUserPopupWrapper .body > .view .menu > .info {
    display: none;
}

.chatUserPopupWrapper.registered .body > .view .menu > .info {
    display: block;
}

/* goog menu */
.goog-menu {
    background: #fff;
    border-color: #ccc #666 #666 #ccc;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    font: normal 13px Arial, sans-serif;
    margin: 0;
    outline: none;
    padding: 4px 0;
    position: absolute;
    z-index: 20000; /* Arbitrary, but some apps depend on it... */
}

.goog-menuitem {
    color: #000;
    font: normal 13px Arial, sans-serif;
    list-style: none;
    margin: 0;
    /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
    padding: 4px 7em 4px 28px;
    white-space: nowrap;
}

/* BiDi override for the resting state. */
/* @noflip */
.goog-menuitem.goog-menuitem-rtl {
    /* Flip left/right padding for BiDi. */
    padding-left: 7em;
    padding-right: 28px;
}

/* If a menu doesn't have checkable items or items with icons, remove padding. */
.goog-menu-nocheckbox .goog-menuitem,
.goog-menu-noicon .goog-menuitem {
    padding-left: 12px;
}

/*
 * If a menu doesn't have items with shortcuts, leave just enough room for
 * submenu arrows, if they are rendered.
 */
.goog-menu-noaccel .goog-menuitem {
    padding-right: 20px;
}

.goog-menuitem-content {
    color: #000;
    font: normal 13px Arial, sans-serif;
}

/* State: disabled. */
.goog-menuitem-disabled .goog-menuitem-accel,
.goog-menuitem-disabled .goog-menuitem-content {
    color: #ccc !important;
}
.goog-menuitem-disabled .goog-menuitem-icon {
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

/* State: hover. */
.goog-menuitem-highlight,
.goog-menuitem-hover {
    background-color: #d6e9f8;
    /* Use an explicit top and bottom border so that the selection is visible
     * in high contrast mode. */
    border-color: #d6e9f8;
    border-style: dotted;
    border-width: 1px 0;
    padding-bottom: 3px;
    padding-top: 3px;
}

/* State: selected/checked. */
.goog-menuitem-checkbox,
.goog-menuitem-icon {
    background-repeat: no-repeat;
    height: 16px;
    left: 6px;
    position: absolute;
    right: auto;
    vertical-align: middle;
    width: 16px;
}

/* BiDi override for the selected/checked state. */
/* @noflip */
.goog-menuitem-rtl .goog-menuitem-checkbox,
.goog-menuitem-rtl .goog-menuitem-icon {
    /* Flip left/right positioning. */
    left: auto;
    right: 6px;
}

.goog-option-selected .goog-menuitem-checkbox,
.goog-option-selected .goog-menuitem-icon {
    /* Client apps may override the URL at which they serve the sprite. */
    background: url(../../global/i/icons/editortoolbar.png) no-repeat -512px 0;
}

/* Keyboard shortcut ("accelerator") style. */
.goog-menuitem-accel {
    color: #999;
    /* Keyboard shortcuts are untranslated; always left-to-right. */
    /* @noflip */ direction: ltr;
    left: auto;
    padding: 0 6px;
    position: absolute;
    right: 0;
    text-align: right;
}

/* BiDi override for shortcut style. */
/* @noflip */
.goog-menuitem-rtl .goog-menuitem-accel {
    /* Flip left/right positioning and text alignment. */
    left: 0;
    right: auto;
    text-align: left;
}

/* Mnemonic styles. */
.goog-menuitem-mnemonic-hint {
    text-decoration: underline;
}

.goog-menuitem-mnemonic-separator {
    color: #999;
    font-size: 12px;
    padding-left: 4px;
}

/* submenus */
/* State: resting. */
/* @noflip */
.goog-submenu-arrow {
    color: #000;
    left: auto;
    padding-right: 6px;
    position: absolute;
    right: 0;
    text-align: right;
}

/* BiDi override. */
/* @noflip */
.goog-menuitem-rtl .goog-submenu-arrow {
    text-align: left;
    left: 0;
    right: auto;
    padding-left: 6px;
}

/* State: disabled. */
.goog-menuitem-disabled .goog-submenu-arrow {
    color: #ccc;
}

/* windows */

.chatWindowsWrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    right:0;
    height: 0;
}
.chatWindowsWrapper.modalWin {
    height: auto;
    bottom: 0;
    background-image: url(../../global/i/p.gif);
    background-color: rgba(0,0,0,0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#66000000', endColorstr='#66000000');
}
.chatWindow {
    position: absolute;
    left: 0;
    top:0;
    border-left: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
    background-color: #ffffff;
    display: none;
    box-shadow: 0px 4px 18px #888;
    -moz-box-shadow: 0px 4px 18px #888;
    -webkit-box-shadow: 0px 4px 18px #888;
    opacity: 0.5;
    filter: Alpha(Opacity=50);
}
.chatWindow .header {
    padding: 3px 23px 3px 8px;
    margin: 0 -1px 0 -1px;
    position: relative;

    white-space: nowrap;

    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;

}
.chatWindow.active {
    opacity: 1;
    filter: Alpha(Opacity=100);
}
.chatWindow .header .close {
    position: absolute;
    right: 2px;
    top: 1px;
    height: 19px;
    width: 19px;
    background-color:transparent;
    background-position: center center;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAYAAAArzdW1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEBJREFUeNpi+A8FDGgAWZwRJgDmAAEa3wSuCFkCBmAKgOAsLiuMoZiBkEmMeE3A8AwuKzB8hyR5Fi0kwOIAAQYAtjBLZYrvon4AAAAASUVORK5CYII=');
    background-repeat: no-repeat;
}
.chatWindow .header .close:hover {
    background-color: rgba(0,0,0,0.2);
}
.chatWindow.active .header .close {
    cursor: pointer;
}
.chatWindow .contentWrapper {
    position: relative;
}
.chatWindow .contentContainer {
    overflow: hidden;
}
.chatWindow.withscrollInFuture .contentContainer {
    margin-right: 10px;
}
.chatWindow.withscroll .contentContainer {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}
.chatWindow .content {
    padding: 6px 8px;
}
.chatWindow .content p {
    margin:0;
    padding: 0.3em 0;
}

.chatWindow .error {
    color: #b94a48;
    background-color: #f2dede;
    margin-bottom: 5px;
    padding: 8px 8px 8px 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #eed3d7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
}

.chatWindow .error.vip-required {
    background-color: #f0f7fb;
    border-color: #4d9dcb;
    color: #333333;
    text-shadow: none;
}

.chatWindow .error a.vip-upgrade-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 0 3px;
    background-color: #4d9dcb;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
    text-shadow: none;
}

.chatWindow .error a.vip-upgrade-button:hover {
    background-color: #3a7caa;
    text-decoration: none;
}

/* CHAT SEND CONTROLS */
.chatSendControlsWrapper, .chatSignInWrapper  {
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 0;
}
.chatSignInWrapper {
    display: block;
    left: 0;
    right: -6px;
    height: 40px;
    border-top: 1px solid #BCBCBC;
    background-color: #EEE;
}
.entered .chatSignInWrapper {
    display: none;
}
.chatSendControlsWrapper {
    display: none;
    height: 90px;
}
.entered .chatSendControlsWrapper{
    display: block;
}

.chatSendControlsWrapper div.textareaWrapper {
    position: absolute;
    left:0;
    top:0;
    bottom: 37px;
    right: 0;
    margin-right: 10px; /* = textfield-padding-left + textfield-padding-right + textfield-border-left-width + textfield-border-right-width*/
    margin-bottom: 10px; /* = textarea-padding-top + textarea-padding-bottom + textarea-border-top-width + textarea-border-bottom-width*/
}
.chatSendControlsWrapper div.textareaWrapper.paddingFix {
    margin-right: 30px; /* 10 + 20 */
}
.chatSendControlsWrapper div.textareaWrapper textarea {
    resize: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 4px;
    border: 1px solid #bcbcbc;
    background-color: inherit;
    overflow: auto;
    display: block;
    position: absolute;
    line-height: 16px;
}
.chatSendControlsWrapper div.textareaWrapper textarea:disabled {
    background-color: #f2f2f2;
    color: #666666;
}
.chatSendControlsWrapper div.textareaWrapper.paddingFix textarea {
    padding-right: 24px;
}
.chatSendControlsWrapper div.textareaWrapper textarea:focus {
    outline: none;
}
.chatSendControlsWrapper div.textareaWrapper > i.smileys {
    position: absolute;
    width: 16px;
    height: 16px;
    right: -5px;
    top: 4px;
    display: block;
    cursor: pointer;
    background-position: 0 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/smileys.png); /** sprite-ref: widgeticons; */
}
.chatSendControlsWrapper div.textareaWrapper.paddingFix > i.smileys {
    right: -25px;
}

.chatSendControlsWrapper div.textareaWrapper.withScroll > i.smileys {
    right: 12px;
}

.chatSendControlsWrapper div.textareaWrapper.withScroll.paddingFix > i.smileys {
    right: -8px;
}

.smileysContainer {
    top: -10000px;
    border: 1px solid #cccccc;
    background-color: #fff;
    position: absolute;
    z-index: 4;
    box-shadow: 3px 3px 6px #cccccc;
    -moz-box-shadow: 3px 3px 6px #cccccc;
    -webkit-box-shadow: 3px 3px 6px #cccccc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.smileysContainer > .selector {
    display: none;
}
.smileysContainer > .selector > select {
    margin: 4px 4px 2px 4px;
    max-width: 83%;
}
.smileysContainer.withSelector > .selector {
    display: block;
}
.smileysContainer > .contentContainer {
    overflow-y: auto;
    margin-right: 0;
    position: relative;
}
.smileysContainer .content {
    padding: 1px;
}
.smileysContainer .content > div {
    margin: 1px;
    cursor: pointer;
    padding: 2px;
    position: relative;
    display: -moz-inline-box; /* Ignored by FF3 and later. */
    display: inline-block;
    font-size: 0;
    vertical-align: bottom;
}
.smileysContainer .content > div.paid {
    opacity: 0.5;
}
.smileysContainer .content > div:hover {
    background-color: #cccccc;
}
.smileysContainer .content > div.paid:hover {
    opacity: 1;
}
.smileysContainer .content > div > img {
    vertical-align: bottom;
}

.chatSendControlsWrapper div.buttonWrapper {
    position: absolute;
    right: 0;
    bottom: 6px;
    height: 25px;
    line-height: 25px;
}
.chatSendControlsWrapper div.buttonWrapper a.sendMessageButton {
    float: right;
    height: 100%;
    padding: 0 8px;
}
.chatSendControlsWrapper div.buttonWrapper a.sendMessageButton:hover {
    text-decoration: none;
}
.chatSendControlsWrapper .buttons {
    position: absolute;
    bottom: 6px;
    left:0;
    height: 25px;
    line-height: 25px;
}
.chatSendControlsWrapper .buttons a {
    float:left;
    margin-left: 10px;
    text-decoration: none;
    color:#000;
    cursor: pointer; /* for ie7 */
}
.chatSendControlsWrapper .buttons a span {
    display: inline-block; /* ie7 hasLayout hack */
}
.chatSendControlsWrapper .buttons a:first-child {
    margin-left: 0;
}
.chatSendControlsWrapper .buttons a.right {
    float:right;
}
.chatSendControlsWrapper .buttons a.register {
    margin-right: 6px;
    height: 100%;
    padding: 0 8px;
}

/* LOGIN PROMT */
.chatSignInWrapper .loginPromt {
    margin-top: 7px;
    margin-left: 8px;
}

.chatAPanel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 89px;
    background-color: #eeeeee;
    /*border-top: 1px solid #fac981;*/
    border-left: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
    text-align: center;
    line-height: 80px;
    /* todo uncomment */
    visibility: hidden;
}
.chatAPanel div {
    padding: 4px;
}

.chatMessagesLoading {
    position: absolute;
    left: 50%;
    top: 0;
    width: 32px;
    height: 16px;
    margin-left: -23px; /* - 32/2 - scrollBarWidth */
    display: none;
    background: transparent url(../i/loading_messages.gif) no-repeat left top;
}

.settingsIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/settings.svg);
    background-size: contain;
}
.controlPanelIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/controlpanel.svg);
    background-size: contain;
}
.galleryIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/gallery.png); /** sprite-ref: widgeticons; */
}
.privateIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/private.svg);
    background-size: contain;
}
.giftIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/gift.png); /** sprite-ref: widgeticons; */
}
.mentionIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/mention.svg);
    background-size: contain;
}
.infoIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/profile.svg);
    background-size: contain;
}
.subscriptionsIcon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url(../i/icons/vip.svg);
    background-size: 16px;
}
.ignoreIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/ignore.svg);
    background-size: contain;
}
.unignoreIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/unignore.svg);
    background-size: contain;
}
.sendIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/send.png); /** sprite-ref: widgeticons; */
}

.addIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/add.png); /** sprite-ref: widgeticons; */
}

.removeIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/remove.png); /** sprite-ref: widgeticons; */
}

.mobileIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/mobile.png); /** sprite-ref: widgeticons; */
}
.rulesIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/rules.png); /** sprite-ref: widgeticons; */
}
.administrationIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/administration.png); /** sprite-ref: widgeticons; */
}
.bannedIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/banned.svg);
    background-size: contain;
}
.linkIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/link.svg);
    background-size: contain;
}
.historyIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/history.png); /** sprite-ref: widgeticons; */
}
.usersIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/users.svg);
    background-size: contain;
}
.newsIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/news.png); /** sprite-ref: widgeticons; */
}
.reloadIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(../i/icons/reload.svg);
}
.takeChatIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/takechat.svg);
    background-size: contain;
}

.leaveIcon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/icons/leave.svg);
    background-size: contain;
}

.editIcon {
    width: 10px;
    height: 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../i/edit.gif); /** sprite-ref: widgeticons; */
    vertical-align: baseline;
}

/* login form */
#loginForm .loginNick {
    padding: 6px 8px;
    text-align: center;
    width: 80%;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#loginForm .captchaValue {
    padding: 2px 0;
    text-align: center;
}
#loginForm .loginButton {
    display: inline-block;
    padding: 6px 16px;
    width: auto;
    min-width: 120px;
    font-weight: bold;
    border: 1px solid #4d9dcb;
    background: #4d9dcb;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}
#loginForm .loginButtonWrapper {
    margin: 12px 0;
}
#loginForm .loginButton:hover {
    background: #3d8ab8;
    border-color: #3d8ab8;
}
#loginForm .social a i {
    margin:0;
}
#loginForm .social a:first-child {
    margin-left: 0;
}
#loginForm .social a {
    margin-left: 7px;
}

#loginForm .loginSection {
	margin: 4px 8px;
}

#loginForm .loginSectionTitle {
	font-weight: bold;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#loginForm .refreshProfilesLink {
	text-decoration: none;
	padding: 0;
    background-color: transparent;
	border: none;
	cursor: pointer;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 3px;
	opacity: 0.4;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	background-size: 16px 16px;
	background-position: center;
    margin: 0 8px 0 0;
}

#loginForm .refreshProfilesLink:hover {
	background-color: rgba(0, 0, 0, 0.05);
	opacity: 1;
}

#loginForm .loginDivider {
	margin: 6px 0;
	text-align: center;
	position: relative;
	color: #666;
}

#loginForm .loginDivider:before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	border-top: 1px solid #ddd;
}

#loginForm .loginDivider span {
	background: #fff;
	padding: 0 4px;
	position: relative;
}

#loginForm .loginAccountButtons {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

#loginForm .loginAccountButtons .loginAccountButton {
	padding: 3px;
	border: 1px solid transparent;
	background: transparent;
}

#loginForm .loginAccountButtons .loginAccountButton i {
	margin: 0;
}

#loginForm .loginAccountButtons .moreOptionsIcon {
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #f9f9f9;
	box-sizing: border-box;
}

#loginForm .loginAccountButtons .loginMoreProvidersToggle:hover .moreOptionsIcon {
	background-color: #f0f0f0;
	border-color: #999;
}

#loginForm .loginMoreProvidersList.hidden {
	display: none;
}

.alignCenter {
    text-align: center;
}

/* Profile selection styles */
#loginForm .profilesList {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#loginForm .profilesList > li {
    padding: 2px 8px;
    margin: 0 0 3px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

#loginForm .profilesList > li:hover {
    background: #f9f9f9;
    border-color: #e0e0e0;
}

#loginForm .profilesList > li.selected {
    background: #f0f7fa;
    border-color: #b8d9e8;
}

#loginForm .profilesList > li.createProfileListItem {
    cursor: pointer;
    border: 1px dashed #ccc;
    margin-top: 4px;
}

#loginForm .profilesList > li.createProfileListItem.hidden {
    display: none;
}

#loginForm .profilesList > li.createProfileListItem:hover {
    background: #f0f7ff;
    border-color: #4d9dcb;
}

#loginForm .createProfileTrigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

#loginForm .createProfileIcon {
    font-size: 18px;
    font-weight: bold;
    color: #4d9dcb;
    line-height: 1;
}

#loginForm .createProfileText {
    color: #4d9dcb;
    font-size: 13px;
    font-weight: normal;
}

#loginForm .profilesList > li.createProfileListItem:hover .createProfileIcon,
#loginForm .profilesList > li.createProfileListItem:hover .createProfileText {
    color: #3a7a9a;
}

#loginForm .profileItem {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

#loginForm .profileItem label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}

#loginForm .profileItem input[type="radio"] {
    margin: 0;
}

#loginForm .profileInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

#loginForm .profileName {
    font-weight: normal;
    color: #333;
    font-size: 13px;
}

#loginForm .profileNameAs {
    color: #888;
    font-weight: normal;
}

#loginForm .profilePerChatNameInput {
    margin-top: 3px;
    display: none;
}

#loginForm .profilesList > li.selected .profilePerChatNameInput {
    display: block;
}

#loginForm .profilePerChatNameInput input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    box-sizing: border-box;
}

#loginForm .profileActions {
    position: relative;
    display: flex;
    align-items: center;
}

#loginForm .profileActionsBtn {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-size: 16px 16px !important;
    border-radius: 3px;
    opacity: 0.4;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

#loginForm .profileActionsBtn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

#loginForm .profilesList > li:hover .profileActionsBtn {
    opacity: 0.6;
}

#loginForm .profilesList > li:hover .profileActionsBtn:hover {
    opacity: 1;
}

#loginForm .profileActionsMenu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 150px;
    white-space: nowrap;
}

#loginForm .profileActionsMenu.show {
    display: block;
}

#loginForm .profileActionsMenu a {
    display: block;
    padding: 6px 12px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
}

#loginForm .profileActionsMenu a:hover {
    background: #f0f0f0;
}

#loginForm .loginSection.createProfileSection {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

#loginForm .loginSection.createProfileSection.collapsed {
    display: none;
}

#loginForm .createProfileSection .vipRequired {
    background: transparent;
    border: none;
}

#loginForm .profileCountMessage {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    padding: 4px 0;
}

#loginForm .createProfileInput {
    margin-top: 6px;
}

#loginForm .createProfileInput input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* status */
.nickIcon {
    width: 18px;
    height: 18px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    position:relative;
}
.goog-menuitem-icon.nickIcon {
    position: absolute;
    display: block;
}
.nickIcon .filler {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
}
/*.vip .nickIcon .filler {*/
    /*background-color: #996262;*/
/*}*/
.nickIcon .mask {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../i/status/mask_user.png); /** sprite-ref: widgeticons; */
}

.vip .nickIcon .mask {
    background-image: url(../i/status/mask_vip_user.png); /** sprite-ref: widgeticons; */
}

.male .nickIcon .mask {
    background-image: url(../i/status/mask_male.png); /** sprite-ref: widgeticons; */
}

.vip.male .nickIcon .mask {
    background-image: url(../i/status/mask_vip_male.png); /** sprite-ref: widgeticons; */
}

.female .nickIcon .mask {
    background-image: url(../i/status/mask_female.png); /** sprite-ref: widgeticons; */
}

.vip.female .nickIcon .mask {
    background-image: url(../i/status/mask_vip_female.png); /** sprite-ref: widgeticons; */
}

.nickIcon .status {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 11px;
    height: 10px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.away .nickIcon > .filler > .mask > .status {
    background-image: url(../i/status/away.png); /** sprite-ref: widgeticons; */
}

.dnd .nickIcon > .filler > .mask > .status {
    background-image: url(../i/status/dnd.png); /** sprite-ref: widgeticons; */
}

.invis .nickIcon > .filler > .mask > .status {
    background-image: url(../i/status/invis.png); /** sprite-ref: widgeticons; */
}

/*.online > .nickIcon > .filler > .mask > .status {*/
    /*background-image: none;*/
/*}*/

/* privates */
.chatRoom .nickIcon {
    /*margin-top:4px;*/
    /*margin-right: 2px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* admin & moders icons */
.groupIcon {
    vertical-align: top;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: none;
    margin-left: 4px;
}
.admin .groupIcon {
    background-image: url(../i/icons/admin.png);
    display: inline-block;
}
.moderator .groupIcon {
    background-image: url(../i/icons/moderator.png);
    display: inline-block;
}

/* alerts */
.chatovodAlert {
    position: absolute;
    padding: 8px 11px;
    font-weight: bold;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    text-align: center;
    z-index: 100;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    box-shadow: 0px 4px 18px #888;
    -moz-box-shadow: 0px 4px 18px #888;
    -webkit-box-shadow: 0px 4px 18px #888;
}
.chatovodAlert.error {
    color: #aa0000;
}
.chatovodAlert.success {
    color: #00aa00;
}

/*
 * Default rule; only Safari, Webkit, and Opera handle it without hacks.
 */
.goog-inline-block {
    position: relative;
    display: -moz-inline-box; /* Ignored by FF3 and later. */
    display: inline-block;
}

/*
 * Pre-IE7 IE hack.  On IE, "display: inline-block" only gives the element
 * layout, but doesn't give it inline behavior.  Subsequently setting display
 * to inline does the trick.
 */
* html .goog-inline-block {
    display: inline;
}

/*
 * IE7-only hack.  On IE, "display: inline-block" only gives the element
 * layout, but doesn't give it inline behavior.  Subsequently setting display
 * to inline does the trick.
 */
*:first-child+html .goog-inline-block {
    display: inline;
}

/* toolbars */

/*
 * Styles used by goog.ui.ToolbarRenderer.
 */

.goog-toolbar {
    /* Client apps may override the URL at which they serve the image. */
    background: #fafafa url(//ssl.gstatic.com/editor/toolbar-bg.png) repeat-x bottom left;
    border-bottom: 1px solid #d5d5d5;
    cursor: default;
    font: normal 12px Arial, sans-serif;
    margin: 0;
    outline: none;
    padding: 2px;
    position: relative;
    zoom: 1; /* The toolbar element must have layout on IE. */
}

/*
 * Styles used by goog.ui.ToolbarButtonRenderer.
 */

.goog-toolbar-button {
    margin: 0 2px;
    border: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    text-decoration: none;
    list-style: none;
    vertical-align: middle;
    cursor: default;
    outline: none;
}

/* Pseudo-rounded corners. */
.goog-toolbar-button-outer-box,
.goog-toolbar-button-inner-box {
    border: 0;
    vertical-align: top;
}

.goog-toolbar-button-outer-box {
    margin: 0;
    padding: 1px 0;
}

.goog-toolbar-button-inner-box {
    margin: 0 -1px;
    padding: 3px 4px;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-toolbar-button-inner-box {
    /* IE6 needs to have the box shifted to make the borders line up. */
    left: -1px;
}

/* Pre-IE7 BiDi fixes. */
* html .goog-toolbar-button-rtl .goog-toolbar-button-outer-box {
    /* @noflip */ left: -1px;
}
* html .goog-toolbar-button-rtl .goog-toolbar-button-inner-box {
    /* @noflip */ right: auto;
}


/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .goog-toolbar-button-inner-box {
    /* IE7 needs to have the box shifted to make the borders line up. */
    left: -1px;
}

/* IE7 BiDi fix. */
*:first-child+html .goog-toolbar-button-rtl .goog-toolbar-button-inner-box {
    /* @noflip */ left: 1px;
    /* @noflip */ right: auto;
}

/* Safari-only hacks. */
::root .goog-toolbar-button,
::root .goog-toolbar-button-outer-box {
    /* Required to make pseudo-rounded corners work on Safari. */
    line-height: 0;
}

::root .goog-toolbar-button-inner-box {
    /* Required to make pseudo-rounded corners work on Safari. */
    line-height: normal;
}

/* Disabled styles. */
.goog-toolbar-button-disabled {
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

.goog-toolbar-button-disabled .goog-toolbar-button-outer-box,
.goog-toolbar-button-disabled .goog-toolbar-button-inner-box {
    /* Disabled text/border color trumps everything else. */
    color: #333 !important;
    border-color: #999 !important;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-toolbar-button-disabled {
    /* IE can't apply alpha to an element with a transparent background... */
    background-color: #f0f0f0;
    margin: 0 1px;
    padding: 0 1px;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .goog-toolbar-button-disabled {
    /* IE can't apply alpha to an element with a transparent background... */
    background-color: #f0f0f0;
    margin: 0 1px;
    padding: 0 1px;
}

/* Only draw borders when in a non-default state. */
.goog-toolbar-button-hover .goog-toolbar-button-outer-box,
.goog-toolbar-button-active .goog-toolbar-button-outer-box,
.goog-toolbar-button-checked .goog-toolbar-button-outer-box,
.goog-toolbar-button-selected .goog-toolbar-button-outer-box {
    border-width: 1px 0;
    border-style: solid;
    padding: 0;
}

.goog-toolbar-button-hover .goog-toolbar-button-inner-box,
.goog-toolbar-button-active .goog-toolbar-button-inner-box,
.goog-toolbar-button-checked .goog-toolbar-button-inner-box,
.goog-toolbar-button-selected .goog-toolbar-button-inner-box {
    border-width: 0 1px;
    border-style: solid;
    padding: 3px;
}

/* Hover styles. */
.goog-toolbar-button-hover .goog-toolbar-button-outer-box,
.goog-toolbar-button-hover .goog-toolbar-button-inner-box {
    /* Hover border style wins over active/checked/selected. */
    border-color: #a1badf !important;
}

/* Active/checked/selected styles. */
.goog-toolbar-button-active,
.goog-toolbar-button-checked,
.goog-toolbar-button-selected {
    /* Active/checked/selected background color always wins. */
    background-color: #dde1eb !important;
}

.goog-toolbar-button-active .goog-toolbar-button-outer-box,
.goog-toolbar-button-active .goog-toolbar-button-inner-box,
.goog-toolbar-button-checked .goog-toolbar-button-outer-box,
.goog-toolbar-button-checked .goog-toolbar-button-inner-box,
.goog-toolbar-button-selected .goog-toolbar-button-outer-box,
.goog-toolbar-button-selected .goog-toolbar-button-inner-box {
    border-color: #729bd1;
}

/* Pill (collapsed border) styles. */
.goog-toolbar-button-collapse-right,
.goog-toolbar-button-collapse-right .goog-toolbar-button-outer-box,
.goog-toolbar-button-collapse-right .goog-toolbar-button-inner-box {
    margin-right: 0;
}

.goog-toolbar-button-collapse-left,
.goog-toolbar-button-collapse-left .goog-toolbar-button-outer-box,
.goog-toolbar-button-collapse-left .goog-toolbar-button-inner-box {
    margin-left: 0;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-toolbar-button-collapse-left .goog-toolbar-button-inner-box {
    left: 0;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .goog-toolbar-button-collapse-left
.goog-toolbar-button-inner-box {
    left: 0;
}


/*
 * Styles used by goog.ui.ToolbarMenuButtonRenderer.
 */

.goog-toolbar-menu-button {
    margin: 0 2px;
    border: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    text-decoration: none;
    list-style: none;
    vertical-align: middle;
    cursor: default;
    outline: none;
}

/* Pseudo-rounded corners. */
.goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-inner-box {
    border: 0;
    vertical-align: top;
}

.goog-toolbar-menu-button-outer-box {
    margin: 0;
    padding: 1px 0;
}

.goog-toolbar-menu-button-inner-box {
    margin: 0 -1px;
    padding: 3px 4px;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-toolbar-menu-button-inner-box {
    /* IE6 needs to have the box shifted to make the borders line up. */
    left: -1px;
}

/* Pre-IE7 BiDi fixes. */
* html .goog-toolbar-menu-button-rtl .goog-toolbar-menu-button-outer-box {
    /* @noflip */ left: -1px;
}
* html .goog-toolbar-menu-button-rtl .goog-toolbar-menu-button-inner-box {
    /* @noflip */ right: auto;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .goog-toolbar-menu-button-inner-box {
    /* IE7 needs to have the box shifted to make the borders line up. */
    left: -1px;
}

/* IE7 BiDi fix. */
*:first-child+html .goog-toolbar-menu-button-rtl
  .goog-toolbar-menu-button-inner-box {
    /* @noflip */ left: 1px;
    /* @noflip */ right: auto;
}

/* Safari-only hacks. */
::root .goog-toolbar-menu-button,
::root .goog-toolbar-menu-button-outer-box,
::root .goog-toolbar-menu-button-inner-box {
    /* Required to make pseudo-rounded corners work on Safari. */
    line-height: 0;
}

::root .goog-toolbar-menu-button-caption,
::root .goog-toolbar-menu-button-dropdown {
    /* Required to make pseudo-rounded corners work on Safari. */
    line-height: normal;
}

/* Disabled styles. */
.goog-toolbar-menu-button-disabled {
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

.goog-toolbar-menu-button-disabled .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-disabled .goog-toolbar-menu-button-inner-box {
    /* Disabled text/border color trumps everything else. */
    color: #333 !important;
    border-color: #999 !important;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-toolbar-menu-button-disabled {
    /* IE can't apply alpha to an element with a transparent background... */
    background-color: #f0f0f0;
    margin: 0 1px;
    padding: 0 1px;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .goog-toolbar-menu-button-disabled {
    /* IE can't apply alpha to an element with a transparent background... */
    background-color: #f0f0f0;
    margin: 0 1px;
    padding: 0 1px;
}

/* Only draw borders when in a non-default state. */
.goog-toolbar-menu-button-hover .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-active .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-open .goog-toolbar-menu-button-outer-box {
    border-width: 1px 0;
    border-style: solid;
    padding: 0;
}

.goog-toolbar-menu-button-hover .goog-toolbar-menu-button-inner-box,
.goog-toolbar-menu-button-active .goog-toolbar-menu-button-inner-box,
.goog-toolbar-menu-button-open .goog-toolbar-menu-button-inner-box {
    border-width: 0 1px;
    border-style: solid;
    padding: 3px;
}

/* Hover styles. */
.goog-toolbar-menu-button-hover .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-hover .goog-toolbar-menu-button-inner-box {
    /* Hover border color trumps active/open style. */
    border-color: #a1badf !important;
}

/* Active/open styles. */
.goog-toolbar-menu-button-active,
.goog-toolbar-menu-button-open {
    /* Active/open background color wins. */
    background-color: #dde1eb !important;
}

.goog-toolbar-menu-button-active .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-active .goog-toolbar-menu-button-inner-box,
.goog-toolbar-menu-button-open .goog-toolbar-menu-button-outer-box,
.goog-toolbar-menu-button-open .goog-toolbar-menu-button-inner-box {
    border-color: #729bd1;
}

/* Menu button caption style. */
.goog-toolbar-menu-button-caption {
    padding: 0 4px 0 0;
    vertical-align: middle;
}

/* Dropdown style. */
.goog-toolbar-menu-button-dropdown {
    width: 7px;
    /* Client apps may override the URL at which they serve the sprite. */
    background: url(../../global/i/icons/editortoolbar.png) no-repeat -388px 0;
    vertical-align: middle;
}


/*
 * Styles used by goog.ui.ToolbarSeparatorRenderer.
 */

.goog-toolbar-separator {
    margin: 0 2px;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #f7f7f7;
    padding: 0;
    width: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    vertical-align: middle;
    line-height: normal;
    font-size: 120%;
    overflow: hidden;
}


/*
 * Additional styling for toolbar select controls, which always have borders.
 */

.goog-toolbar-select .goog-toolbar-menu-button-outer-box {
    border-width: 1px 0;
    border-style: solid;
    padding: 0;
}

.goog-toolbar-select .goog-toolbar-menu-button-inner-box {
    border-width: 0 1px;
    border-style: solid;
    padding: 3px;
}

.goog-toolbar-select .goog-toolbar-menu-button-outer-box,
.goog-toolbar-select .goog-toolbar-menu-button-inner-box {
    border-color: #bfcbdf;
}
/* editor toolbar */
/* Common base style for all icons. */
.tr-icon {
    width: 16px;
    height: 16px;
    background: url(../../global/i/icons/editortoolbar.png) no-repeat;
    vertical-align: middle;
}

.goog-color-menu-button-indicator .tr-icon {
    height: 14px;
}

/* Undo (redo when the chrome is right-to-left). */
.tr-undo,
.goog-toolbar-button-rtl .tr-redo {
    background-position: 0;
}

/* Redo (undo when the chrome is right-to-left). */
.tr-redo,
.goog-toolbar-button-rtl .tr-undo {
    background-position: -16px;
}

/* Font name. */
.tr-fontName .goog-toolbar-menu-button-caption {
    color: #246;
    width: 16ex;
    height: 16px;
    overflow: hidden;
}

/* Font size. */
.tr-fontSize .goog-toolbar-menu-button-caption {
    color: #246;
    width: 8ex;
    height: 16px;
    overflow: hidden;
}

/* Bold. */
.tr-bold {
    background-position: -32px;
}

/* Italic. */
.tr-italic {
    background-position: -48px;
}

/* Underline. */
.tr-underline {
    background-position: -64px;
}

/* Foreground color. */
.tr-foreColor {
    height: 14px;
    background-position: 0;
    background-image: url(../i/icons/forecolor.svg);
    background-size: contain;
}

/* Background color. */
.tr-backColor {
    height: 14px;
    background-position: -96px;
}

/* Link. */
.tr-link {
    font-weight: bold;
    color: #009;
    text-decoration: underline;
}

/* Insert image. */
.tr-image {
    background-position: -112px;
}

/* Insert drawing. */
.tr-newDrawing {
    background-position: -592px;
}

/* Insert special character. */
.tr-spChar {
    font-weight: bold;
    color: #900;
}

/* Increase indent. */
.tr-indent {
    background-position: -128px;
}

/* Increase ident in right-to-left text mode, regardless of chrome direction. */
.tr-rtl-mode .tr-indent {
    background-position: -400px;
}

/* Decrease indent. */
.tr-outdent {
    background-position: -144px;
}

/* Decrease indent in right-to-left text mode, regardless of chrome direction. */
.tr-rtl-mode .tr-outdent {
    background-position: -416px;
}

/* Bullet (unordered) list. */
.tr-insertUnorderedList {
    background-position: -160px;
}

/* Bullet list in right-to-left text mode, regardless of chrome direction. */
.tr-rtl-mode .tr-insertUnorderedList {
    background-position: -432px;
}

/* Number (ordered) list. */
.tr-insertOrderedList {
    background-position: -176px;
}

/* Number list in right-to-left text mode, regardless of chrome direction. */
.tr-rtl-mode .tr-insertOrderedList {
    background-position: -448px;
}

/* Text alignment buttons. */
.tr-justifyLeft {
    background-position: -192px;
}
.tr-justifyCenter {
    background-position: -208px;
}
.tr-justifyRight {
    background-position: -224px;
}
.tr-justifyFull {
    background-position: -480px;
}

/* Blockquote. */
.tr-BLOCKQUOTE {
    background-position: -240px;
}

/* Blockquote in right-to-left text mode, regardless of chrome direction. */
.tr-rtl-mode .tr-BLOCKQUOTE {
    background-position: -464px;
}

/* Remove formatting. */
.tr-removeFormat {
    background-position: -256px;
}

/* Spellcheck. */
.tr-spell {
    background-position: -272px;
}

/* Left-to-right text direction. */
.tr-ltr {
    background-position: -288px;
}

/* Right-to-left text direction. */
.tr-rtl {
    background-position: -304px;
}

/* Insert iGoogle module. */
.tr-insertModule {
    background-position: -496px;
}

/* Strike through text */
.tr-strikeThrough {
    background-position: -544px;
}

/* Subscript */
.tr-subscript {
    background-position: -560px;
}

/* Superscript */
.tr-superscript {
    background-position: -576px;
}

/* Insert drawing. */
.tr-equation {
    background-position: -608px;
}

/* Edit HTML. */
.tr-editHtml {
    color: #009;
}

/* "Format block" menu. */
.tr-formatBlock .goog-toolbar-menu-button-caption {
    color: #246;
    width: 12ex;
    height: 16px;
    overflow: hidden;
}

.tr-pencil {
    background-position: -336px;
}

.tr-color {
    background-position: -320px;
}

#toolbar1 {
    float: left;
}

#toolbar1 .goog-toolbar {
    background: none;
    border-bottom: 0;
}

.toolbar2Wrapper {
    position: absolute;
    left:0;
    bottom: 90px;
    right: 0;
}


/* Color indicator. */
.goog-color-menu-button-indicator {
    border-bottom: 4px solid #f0f0f0;
}

/* Thinner padding for color picker buttons, to leave room for the indicator. */
.goog-color-menu-button .goog-menu-button-inner-box,
.goog-toolbar-color-menu-button .goog-toolbar-menu-button-inner-box {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}


.goog-palette {
    cursor: default;
    outline: none;
}

.goog-palette-table {
    border: 1px solid #666;
    border-collapse: collapse;
    margin: 5px;
}

.goog-palette-cell {
    border: 0;
    border-right: 1px solid #666;
    cursor: pointer;
    height: 18px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    width: 18px;
}


.goog-palette-cell .goog-palette-colorswatch {
    border: none;
    font-size: x-small;
    height: 18px;
    position: relative;
    width: 18px;
}

.goog-palette-cell-hover .goog-palette-colorswatch {
    border: 1px solid #fff;
    height: 16px;
    width: 16px;
}

.goog-palette-cell-selected .goog-palette-colorswatch {
    /* Client apps may override the URL at which they serve the sprite. */
    background: url(../../global/i/icons/editortoolbar.png) no-repeat -368px 0;
    border: 1px solid #333;
    color: #fff;
    font-weight: bold;
    height: 16px;
    width: 16px;
}

.goog-palette-customcolor {
    background-color: #fafafa;
    border: 1px solid #eee;
    color: #666;
    font-size: x-small;
    height: 15px;
    position: relative;
    width: 15px;
}

.goog-palette-cell-hover .goog-palette-customcolor {
    background-color: #fee;
    border: 1px solid #f66;
    color: #f66;
}

.goog-menuseparator {
    border-top: 1px solid #ccc;
    margin: 4px 0;
    padding: 0;
}

/* Heading size preview in toolbar dropdown */
.headingH1 .goog-menuitem-content {
    font-size: 1.4em;
    font-weight: bold;
}
.headingH2 .goog-menuitem-content {
    font-size: 1.3em;
    font-weight: bold;
}
.headingH3 .goog-menuitem-content {
    font-size: 1.2em;
    font-weight: bold;
}

.toggleButton .goog-toolbar-button-inner-box {
    font-weight: bold;
    color: #1D6E9C;
    font-style: italic;
    text-decoration: underline;
    -moz-text-shadow: 1px 1px 0 #ffffff;
    -webkit-text-shadow: 1px 1px 0 #ffffff;
    text-shadow: 1px 1px 0 #ffffff;
    /* For IE 8-9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#ffffff')";
}
.moreButton .goog-toolbar-menu-button-caption {
    display: none;
}
.goog-menuitem {
    padding-right: 2em;
}
.goog-menubar {
    cursor: default;
    outline: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.goog-menubar .goog-menu-button-dropdown {
    display: none;
}
.goog-slider-horizontal {
    position: relative;
    overflow: hidden;
    width: 149px;

    height: 23px;
    background: url(../i/slider_back.png) no-repeat 0 center;
}
.goog-slider-thumb {
    background-color: #000;
    position: absolute;
    width: 11px;
    height: 22px;
    top: 0;
    background: url(../i/slider_thumb.png) no-repeat 0 0;
}
.volumeIcon {
    background-image: url(../i/icons/volume.png);
}
.bellIcon {
    background-image: url(../i/icons/bell.svg);
    background-size: contain;
}
.roomsIcon {
    background-image: url(../i/icons/rooms.svg);
    background-size: contain;
}
#soundsVolumeMenuItem .volumeIcon {
    margin-top:3px;
}
.goog-submenu-arrow {
    background: url(../../global/i/rarrow.png) no-repeat center center;
    text-indent: 1000px;
    width: 10px;
    overflow: hidden;
}
.tr-send-image {
    background-image: url(../i/icons/send_image.svg);
    background-size: 16px 16px;
}
.ignored-placeholder {
    text-decoration: underline dotted;
    cursor: pointer;
    text-underline-offset: 2px;
    color: #333;
    display: inline;
}

/* Autocomplete styles for @ mentions */
.ac-renderer {
    font: normal 13px Arial, sans-serif;
    position: absolute;
    background: #fff;
    border: 1px solid #666;
    box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
    z-index: 10000;
    max-width: 300px;
}

.ac-row {
    cursor: pointer;
    padding: .4em;
}

.ac-highlighted {
    font-weight: bold;
}

.ac-active {
    background-color: #b2b4bf;
}