/* Minification failed. Returning unminified contents.
(709,1): run-time error CSS1019: Unexpected token, found '}'
(731,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(732,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(750,5): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(751,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(764,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(765,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(777,1): run-time error CSS1019: Unexpected token, found '}'
 */
.close-chat-popup {
    color: #e0e1e1;
    left: 10px;
    font-size: 30px;
    position: absolute;
    cursor: pointer;
}

.chat-channel-container {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 40px;
    right: 10px;
    left: 10px;
    bottom: 0px;
}

.members-img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 30px;
    cursor: pointer;
    z-index: 10;
}

.mobile-message-icon {
    width: 30px;
    height: 30px;
    left: 10px;
    position: absolute;
    top: 9px;
    cursor: pointer;
}

.member-count {
    position: absolute;
    right: 10px;
    color: #9492a0;
    cursor: pointer;
    z-index: 10;
}

.back-img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 4px;
    cursor: pointer;
    z-index: 10;
}

.title-text {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-image {
    border-radius: 50%;
    height: 3vw;
    width: 3vw;
    display: inline-block;
    background-color: rgb(224, 225, 225);
    text-align: center;
    margin-right: 1vw;
}

.member-image span {
    display: inline-block;
    color: #4d4b56;
    font-size: 42px;
    margin-top: 20px;
}

.compose-input .form-group {
    display: inline-block;
    min-width: 80%;
}

.send-img {
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-right: 15px;
}

.attachment-img {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: left;
    margin-left: 10px;
}

.date-of-message {
    color: #9492a0;
    font-weight: normal;
    float: right;
}

.section-divider {
    width: 97%;
    height: 1px;
    background-color: #4d4b56;
    margin: auto;
    margin-bottom: 7px;
    margin-top: 10px;
}

.message-typing {
    color: #e0e1e1;
    padding-left: 10px;
    padding-right: 35px;
}

.compose-input {
    height: 40px;
    position: fixed;
    background-color: #1a191f;
    left: 0;
    right: 0;
    bottom: 0;
}

.channel-row {
    cursor: pointer;
    color: #e0e1e1;
    margin-bottom: 15px;
    font-weight: 300;
}

.unread-bullet {
    height: 10px;
    width: 10px;
    display: inline-block;
    background-color: #daca94;
    border-radius: 50%;
    float: right;
    margin-right: 15px;
    margin-top: 9px;
}

.chat-page-title {
    text-align: center;
    color: #e0e1e1;
    font-size: 18px;
    font-weight: 300;
    border-bottom: 1px solid #4d4b56;
    margin-bottom: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
}

#close-preview {
    font-size: 25px;
    top: 5px;
    left: 5px;
    cursor: pointer;
}

.preview-overflow-container {
    text-overflow: ellipsis;
    width: 300px;
    display: inline-block;
    overflow: hidden;
}

.attachment-bubble {
    font-weight: normal;
    background-color: #daca94;
    color: #1a191f;
    border-radius: 20px;
    padding: 5px 10px 5px 0px;
    max-width: 220px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

#floating-close-bubble {
    font-size: 60px;
    top: 24px;
    left: 20px;
    color: #232228;
}

.boxshadow {
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
}


/* Responsive Media Queries */
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    .mobile-element {
        display: block;
    }

    .desktop-element {
        display: none;
    }

    .telestration-toolbox.desktop-element, .bookmark-container.desktop-element {
        display: none;
    }

    .chat-area-container {
        position: fixed;       
        background-color: #1a191f;
        padding: 10px;
        overflow: hidden;
        height: 100%;
        width: 100%;
        top: 0;
        z-index: 100000;
    }

    .preview-message {
        width: 100%;
        height: 75px;
        background-color: #1a191f;
        color: #e0e1e1;
        position: fixed;
        bottom: 25px;
        z-index: 200000;
        top: 0;
        right: 0;
    }

    .chat-floating-button {
        position: fixed;
        bottom: 25px;
        right: 10px;
        height: 60px;
        width: 60px;
        background-color: #daca94;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
        line-height: 60px;
        text-align: center;
    }

    .floating-button-img {
        height: 50px;
        width: 50px;
    }

    .floating-button-img-large {
        height: inherit;
        width: inherit;
    }
}

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .mobile-element {
        display: block;
    }

    .desktop-element {
        display: none;
    }   
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .mobile-element {
        display: block;
    }

    .desktop-element {
        display: none;
    }
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
    .mobile-element {
        display: block;
    }

    .desktop-element {
        display: none;
    }
}

@media (min-width:1025px) {
    .chat-floating-button {
        position: fixed;
        bottom: 25px;
        right: 25px;
        height: 75px;
        width: 75px;
        background-color: #daca94;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
        line-height: 75px;
        text-align: center;
    }

}

@media screen-only (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1024px) and (device-height: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1024px) and (device-height: 768px) and (-webkit-min-device-pixel-ratio: 1) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1366px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1080px) and (device-height: 810px) and (-webkit-min-device-pixel-ratio: 1) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1080px) and (device-height: 810px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1366px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1112px) and (device-height: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) and (pointer: coarse) 
    ,(device-width: 1112px) and (device-height: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) and (pointer: coarse) {
    .mobile-element {
        display: block;
    }

    .desktop-element {
        display: none;
    }
}

@media (min-width:1025px) and (pointer: fine) { /* big landscape tablets, laptops, and desktops */
    .mobile-element {
        display: none;
    }

    .desktop-element {
        display: block;
    }

    .telestration-toolbox.desktop-element, .bookmark-container.desktop-element {
        display: inline-block;
    }    
        
    .chat-area-container {
        position: fixed;
        height: 500px;
        width: 300px;
        bottom: 125px;
        right: 25px;
        background-color: #1a191f;
        z-index: 10;
        padding: 10px;
        overflow: hidden;
        top: auto;
    }

        .chat-area-container.briefcaseBottom {
            bottom: 225px;
        }

    .preview-message {
        width: 400px;
        height: 75px;
        background-color: #1a191f;
        color: #e0e1e1;
        position: fixed;
        bottom: 25px;
        right: 125px;
        z-index: 10;
        top: auto;
    }


    .chat-floating-button {
        position: fixed;
        bottom: 25px;
        right: 25px;
        height: 75px;
        width: 75px;
        background-color: #daca94;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
        line-height: 75px;
        text-align: center;
    }

    .floating-button-img {
        height: 50px;
        width: 50px;
    }

    .floating-button-img-large {
        height: inherit;
        width: inherit;
    }
}

@media (min-width:1280px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
    .mobile-element {
        display: none;
    }

    .desktop-element {
        display: block;
    }
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-1-16 13:24:48
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.15s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-center 0.15s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}
@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.rotate-in-2-cw {
    -webkit-animation: rotate-in-2-cw 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: rotate-in-2-cw 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes rotate-in-2-cw {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotate-in-2-cw {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotate-out-2-ccw {
    -webkit-animation: rotate-out-2-ccw 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: rotate-out-2-ccw 0.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes rotate-out-2-ccw {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}
@keyframes rotate-out-2-ccw {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0;
    }
}

.swing-in-bottom-fwd {
    -webkit-animation: swing-in-bottom-fwd 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-bottom-fwd 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@-webkit-keyframes swing-in-bottom-fwd {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 1;
    }
}
@keyframes swing-in-bottom-fwd {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 1;
    }
}

.swing-out-bottom-bck {
    -webkit-animation: swing-out-bottom-bck 0.25s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
    animation: swing-out-bottom-bck 0.25s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
}

@-webkit-keyframes swing-out-bottom-bck {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 0;
    }
}
@keyframes swing-out-bottom-bck {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        opacity: 0;
    }
}

@media (min-width:320px) {
    .notify-in {
        -webkit-animation: notify-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: notify-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes notify-in {
        0% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }
    @keyframes notify-in {
        0% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }

    .notify-out {
        -webkit-animation: notify-out 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: notify-out 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @-webkit-keyframes notify-out {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }
    }
    @keyframes notify-out {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }
    }

}

@media (min-width:1025px) and (pointer: fine) {
    .notify-in {
        -webkit-animation: notify-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: notify-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes notify-in {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes notify-in {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    .notify-out {
        -webkit-animation: notify-out 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: notify-out 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @-webkit-keyframes notify-out {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    }

    @keyframes notify-out {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    }
}
