.clnm-nurse-chat-window-dialog {
    position: absolute;
    z-index: 999;
    bottom: 100%;
    right: 0;
    background-color: white;
    border: solid 1px black;
    height: 55vh;
    width: 20vw;
    transform-origin: top left;
    transition: top 500ms, left 500ms, height 500ms, width 500ms, margin 500ms;
}

.clnm-nurse-chat-window-dialog-initial-hide {
    transform: scale(0);
}

.clnm-nurse-chat-window-dialog-show {
    animation-name: clnmNurseChatOpen;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

.clnm-nurse-chat-window-dialog-hide {
    animation-name: clnmNurseChatClose;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

.clnm-nurse-chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.clnm-nurse-chat-window-header {
    cursor: move;
    z-index: 1000;
    border-bottom: solid 1px black;
    display: flex;
    padding-right: 4px;
}

.clnm-nurse-video-chat-window-header {
    z-index: 1000;
    border-bottom: solid 1px black;
    display: none;
    padding-right: 4px;
}

.clnm-nurse-chat-window-header-icon {
    font-size: .75em;
    padding: .25em;
    cursor: pointer;
}

.clnm-nurse-chat-window-header-icon:hover {
    background-color: lightgray;
}

.clnm-nurse-chat-window-body {
    flex: 1;
    height: 100%;
    position: relative;
}

.clnm-nurse-chat-window-body-chat {
    height: 100%;
    width: 20vw;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.clnm-nurse-video-chat-window-body-chat {
    width: 20%;
    height: 50%;
    bottom: 0;
    left: 0px;
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.clnm-nurse-chat-window-body-video-chat {
    height: 100%;
    width: 100%;
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
    transition: width 500ms;
}

.clnm-nurse-chat-window-body-patient-flyout {
    padding: 6px;
    height: 100%;
    flex-direction: column;
    min-width: 20vw;
    overflow: hidden;
    border: solid 1px black;
    background-color: white;
}

.clnm-nurse-video-chat-window-body-patient-flyout {
    padding: 6px;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-bottom: solid 1px black;
    background-color: white;
    width: 20%;
    height: 50%;
    top: 0;
    left: 0px;
    position: absolute;
}

.clnm-nurse-video-chat-window-body-patient {
    height: 100%;
    width: 100%;
    position: absolute;
}

.clnm-nurse-chat-window-body-patient-open {
    height: 55vh;
    bottom: -1px;
    right: 100%;
    position: absolute;
    overflow-x: hidden;
    animation-name: clnmNurseChatPatientOpen;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.clnm-nurse-chat-window-body-patient-close {
    height: 55vh;
    bottom: -1px;
    right: 100%;
    position: absolute;
    overflow-x: hidden;
    animation-name: clnmNurseChatPatientClose;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.clnm-nurse-chat-window-messages {
    flex: 1;
    overflow-y: scroll;
}

.clnm-nurse-chat-icon {
    height: 100%;
    align-items: center;
    display: inline-flex;
    color: blue;
    font-size: 1.5em;
    cursor: pointer;
    position: relative;
}

.clnm-nurse-chat-icon-tool-tip {
    position: absolute;
    bottom: 100%;
    right: 0;
    visibility: hidden;
    cursor: auto;
    background-color: white;
    font-size: .6em;
    border: solid 1px black;
    border-radius: 4px 4px;
    color: black;
    padding: 6px;
}

.clnm-nurse-chat-icon:hover .clnm-nurse-chat-icon-tool-tip {
    visibility: visible;
    z-index: 100000;
}

.clnm-nurse-chat-icon-unread {
    -webkit-animation: pulse-animation 2s infinite;
    animation: pulse-animation 2s infinite
}

@keyframes clnmNurseChatUnreadMessage {
    0% { background-color: white; }
    50% { background-color: orange; }
    100% { background-color: white; }
}

@keyframes clnmNurseChatPatientOpen {
    from { width: 2vw; }
    to { width: 20vw; }
}

@keyframes clnmNurseChatPatientClose {
    from { width: 20vw; }
    to { width: 0vw; }
}

@keyframes clnmNurseChatOpen {
    from {
        transform: scale(0);
        top: 0;
        left: 0;
        margin: 0;
    }
    to { transform: scale(1); }
}

@keyframes clnmNurseChatClose {
    from { 
        transform: scale(1); 
    }
    to {
        transform: scale(0);
        top: 0;
        left: 0;
        margin: 0;
    }
}