.icingchat {
    display: none;
}

.icingchat > div {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
}

.icingchat > div.list.active {
	display: block;
}

.icingchat > div.chat,
.icingchat > div.list {
	width: 350px;
    height: 400px;
    background: #FFF;
	bottom: 60px;
    border: 1px solid #CCC;
    border-radius: 3px;
    display: block;
}

.icingchat > div.list {
    right: 20px;
}

.icingchat > div.list:after,
.icingchat > div.list:before,
.icingchat > div.chat:after,
.icingchat > div.chat:before {
    content: '';
    display: block;
    position: absolute;
    right: 35px;
    width: 0;
    height: 0;
    border-style: solid;
}

.icingchat > div.list:after,
.icingchat > div.chat:after {
    bottom: -20px;
    border-color: #FFF transparent transparent transparent;
    border-width: 10px;
}

.icingchat > div.list:before,
.icingchat > div.chat:before {
    bottom: -24px;
    right: 33px;
    border-color: #CCC transparent transparent transparent;
    border-width: 12px;
}

.icingchat > div.list > header,
.icingchat > div.chat > header {
    width: 100%;
    padding: 15px 10px;
    background: #173c67;
    color: #FFF;
    display: flex;
    cursor: pointer;
}

.icingchat > div.list > header > p,
.icingchat > div.chat > header > p {
    flex: 1;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icingchat > div.list > header > i.fa.fa-close,
.icingchat > div.chat > header > i.fa.fa-close {
	font-size: 20px;
}

.icingchat > div.list > ul,
.icingchat > div.chat > ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;
    height: calc(100% - 52px);
    overflow: auto;
}

.icingchat > div.chat > ul {
    height: calc(100% - 102px);
    padding: 10px;
}

.icingchat > div.chat > footer {
    height: 50px;
    border-top: 1px solid #CCC;
    background: #F6F6F6;
    padding: 7px 10px;
    display: flex;
}

.icingchat > div.chat > footer > i.fa {
    cursor: pointer;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    line-height: 35px;
    text-align: center;
}

.icingchat > div.chat > footer > input[type='text'] {
    flex: 1;
}

.icingchat > div.chat:after {
    border-color: #f6f6f6 transparent transparent transparent;
}

.icingchat > div.list > ul > li {
    width: 100%;
    padding: 20px 10px;
    border-bottom: 1px solid #CCC;
    cursor: pointer;
}

.icingchat > div.list > ul > li > p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1;
}

.icingchat > div.list > ul > li > p > span {
    padding: 8px;
    border: 1px solid #CCC;
    background: #F6F6F6;
    display: inline-block;
    border-radius: 3px;
    margin-right: 5px;
}

.icingchat > div.chat {
    right: 140px;
}

.icingchat > div.buttons {
	right: 10px;
}

.icingchat > div.buttons > button {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 20px;
    background-color: #f6f7f9;
    border: 1px solid #dddfe2;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 8px 25px;
}

.icingchat > div.buttons > button:hover {
	background: #edeef1;
}

.icingchat > div.buttons > button > span {
    padding: 0 8px;
    border: 1px solid #CCC;
    background: #F6F6F6;
    display: inline-block;
    border-radius: 3px;
    margin-right: 5px;
}

.icingchat > div.chat > ul > li {
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 10px;
    position: relative;
}

#notifications > div > ol > li.warn {
    display: block;
    text-align: center;
    padding: 10px 0;
}

.icingchat > div.list > ul > li.warn,
.icingchat > div.chat > ul > li.warn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto!important;
    border-bottom: 0;
    width: 250px;
    height: 90px;
    line-height: 1;
    text-align: center;
}

#notifications > div > ol > li > i.fa,
.icingchat > div.list > ul > li.warn > i.fa,
.icingchat > div.chat > ul > li.warn > i.fa {
    color: #ff6363!important;
    min-width: auto!important;
    min-height: auto!important;
    line-height: inherit!important;
    font-size: 22px!important;
    margin-bottom: 5px!important;
}
#notifications > div > ol > li > p,
.icingchat > div.list > ul > li.warn > p,
.icingchat > div.chat > ul > li.warn > p {
    color: #717171!important;
    font-weight: 600!important;
}

.icingchat > div.chat > ul > li > div {
    float: left;
    text-align: left;
    max-width: 100%;
    background: #479ccf;
    border-radius: 10px;
    padding: 15px;
}

.icingchat > div.chat > ul > li > div > p {
    color: #FFF;
    margin-bottom: 0px;
}

.icingchat > div.chat > ul > li.isMe > div > small {
    right: 5px;
}

.icingchat > div.chat > ul > li > div > small {
    position: absolute;
    left: 5px;
    bottom: 0;
    font-size: 10px;
}

.icingchat > div.chat > ul > li > div > p:first-of-type {
    font-weight: bold;
    font-size: 12px;
}

.icingchat > div.chat > ul > li.isMe > div {
    float: right;
    text-align: right;
    background: #F6F6F6;
}

.icingchat > div.chat > ul > li.isMe > div > p {
    color: #000;
    word-break: break-all;
}

.icingchat > div.chat > ul > li.isMe > div > ul.images {
    justify-content: flex-end;
}

.icingchat > div.chat > ul > li > div > ul.images {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 10px;
}

.icingchat > div.chat > ul > li > div > ul.images > li {
    margin-bottom: 10px;
    margin-left: 10px;
    flex-grow: 1;
    min-width: 33%;
    flex: 1;
}

.icingchat > div.chat > ul > li > div > ul.images > li > img {
    
}

#notifications {
    height: 63px;
}

#notifications > div > small {
    border-radius: 50%;
    color: #FFF;
    background: #469cd0;
    width: 16px;
    height: 16px;
    position: absolute;
    text-align: center;
    line-height: 16px;
    font-size: 7px;
    margin: 6px 0 0 35px;
}

#notifications > div > i.fa.fa-bell-o {
    padding: 19px;
    font-size: 25px;
    cursor: pointer;
    color: #FFF;
}
#notifications > div > ol {
    position: absolute;
    background: #FFF;
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(154, 157, 160, 0.15);
    padding: 0;
    margin: 0;
    list-style: none;
    width: 320px;
    right: 0;
    max-height: 370px;
    overflow: auto;
}

#notifications > div > ol > li {
    display: flex;
    cursor: pointer;
}

#notifications > div > ol > li.active {
    background: #F6F6F6;
}

#notifications > div > ol > li > i.fa {
    min-width: 50px;
    max-width: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    font-size: 22px;
}

#notifications > div > ol > li > i.fa[color='lightBlue'] {
    background: #03a9f4;
 }
 
 #notifications > div > ol > li > i.fa[color='blue'] {
    background: #2195f2;
 }
 
 #notifications > div > ol > li > i.fa[color='red'] {
    background: #f44336;
 }
 
 #notifications > div > ol > li > i.fa[color='green'] {
    background: #009587;
 }
 
 #notifications > div > ol > li > i.fa[color='yellow'] {
    background: #ffeb3b;
 }
 
 #notifications > div > ol > li > i.fa[color='orange'] {
    background: #ff9800;
 }
 
 #notifications > div > ol > li > i.fa[color='purple'] {
    background: #673ab6;
 }
 
 #notifications > div > ol > li > i.fa[color='pink'] {
    background: #e81e63;
 }

#notifications > div > ol > li > i.fa[color='black'] {
    background: black;
}

#notifications > div > ol > li > div {
    flex: 1;
    padding: 5px 10px;
    overflow: hidden;
}

#notifications > div > ol > li > div > p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#notifications > div > ol > li > div > p:first-of-type {
    font-weight: 600;
}

#notifications > div > ol > li > div > p:last-of-type {
    font-size: 13px;
}

#chat_upload {
    display: none;
}

.icingchat .files {
    width: 250px;
    position: absolute;
    bottom: 70px;
    left: -40px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 3px;
    display: block!important;
}

.icingchat .files:after, .files:before {
    content: '';
    display: block;
    position: absolute;
    left: 56px;
    width: 0;
    height: 0;
    border-style: solid;
    display: block!important;
}

.icingchat .files:after {
    bottom: -20px;
    border-color: #f6f6f6 transparent transparent transparent;
    border-width: 10px;
    display: block!important;
}

.icingchat .files:before {
    bottom: -24px;
    left: 54px;
    border-color: #CCC transparent transparent transparent;
    border-width: 12px;
    display: block!important;
}

.icingchat .files > footer {
    padding: 10px 5px;
    background: #f6f6f6;
    border-top: 1px solid #CCC;
    display: block!important;
}

.icingchat .files > footer > .btn {
    width: calc(100% - 10px);
    display: block!important;
}

.icingchat .files > ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 10px 10px 0 10px;
}

.icingchat .files > ul > li {
    word-wrap: break-word;
    background: #F6F6F6;
    position: relative;
    margin-bottom: 10px;
    margin-left: 10px;
    flex-grow: 1;
    min-width: 33%;
    flex: 1;
    display: block!important;
}

.icingchat .files > ul > li > i.fa {
    position: absolute;
    z-index: 2;
    top: 3px;
    right: 3px;
    color: #FFF;
    text-shadow: 0 0 3px #000;
    cursor: pointer;
    display: block!important;
}

/* .files > ul > li > img {
} */