form.chat * {
    transition: all .5s;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

form.chat {
    margin: 0;
    cursor: default;
    /*position: inherit;*/
    position: absolute;
    top: 51px;
    left: 0;
    right: 0;
    /*bottom: 0;*/
    height: 95%;
    /*top: 0;*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}

    form.chat span.spinner {
        -moz-animation: loading-bar 1s 1;
        -webkit-animation: loading-bar 1s 1;
        animation: loading-bar 1s 1;
        display: block;
        height: 2px;
        background-color: #00e34d;
        transition: width 0.2s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4
    }

    form.chat .messages {
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
        position: relative;
        height: 100%;
        width: 100%;
        padding: 2% 3%;
        border-bottom: 1px solid #ecf0f1;
    }

    form.chat ::-webkit-scrollbar {
        width: 3px;
        height: 1px;
        transition: all .5s;
        z-index: 10;
    }

    form.chat ::-webkit-scrollbar-track {
        background-color: white;
    }

    form.chat ::-webkit-scrollbar-thumb {
        background-color: #bec4c8;
        border-radius: 3px;
    }

    form.chat .message {
        display: block;
        width: 98%;
        padding: 0.5%;
    }

        form.chat .message p {
            margin: 0;
        }

    form.chat .myMessage,
    form.chat .fromThem {
        max-width: 50%;
        word-wrap: break-word;
        margin-bottom: 20px;
    }

    form.chat .message:hover .myMessage {
        -webkit-transform: translateX(-130px);
        transform: translateX(-130px);
    }

    form.chat .message:hover .fromThem {
        -webkit-transform: translateX(130px);
        transform: translateX(130px);
    }

    form.chat .message:hover date {
        opacity: 1;
    }

    form.chat .myMessage, .fromThem {
        position: relative;
        padding: 10px 20px;
        color: white;
        border-radius: 25px;
        clear: both;
        font: 400 15px 'Open Sans', sans-serif;
    }

    form.chat .myMessage {
        background: #007bff; /*#00e34d;*/
        color: white;
        float: right;
        clear: both;
        border-bottom-right-radius: 20px 0px\9;
    }

        form.chat .myMessage:before {
            content: "";
            position: absolute;
            z-index: 1;
            bottom: -2px;
            right: -8px;
            height: 19px;
            border-right: 20px solid #007bff; /*#00e34d;*/
            border-bottom-left-radius: 16px 14px;
            -webkit-transform: translate(0, -2px);
            transform: translate(0, -2px);
            border-bottom-left-radius: 15px 0px\9;
            transform: translate(-1px, -2px)\9;
        }

        form.chat .myMessage:after {
            content: "";
            position: absolute;
            z-index: 1;
            bottom: -2px;
            right: -42px;
            width: 12px;
            height: 20px;
            background: white;
            border-bottom-left-radius: 10px;
            -webkit-transform: translate(-30px, -2px);
            transform: translate(-30px, -2px);
        }

    form.chat .fromThem {
        background: #E5E5EA;
        color: black;
        float: left;
        clear: both;
        border-bottom-left-radius: 30px 0px\9;
    }

        form.chat .fromThem:before {
            content: "";
            position: absolute;
            z-index: 2;
            bottom: -2px;
            left: -7px;
            height: 19px;
            border-left: 20px solid #E5E5EA;
            border-bottom-right-radius: 16px 14px;
            -webkit-transform: translate(0, -2px);
            transform: translate(0, -2px);
            border-bottom-right-radius: 15px 0px\9;
            transform: translate(-1px, -2px)\9;
        }

        form.chat .fromThem:after {
            content: "";
            position: absolute;
            z-index: 3;
            bottom: -2px;
            left: 4px;
            width: 26px;
            height: 20px;
            background: white;
            border-bottom-right-radius: 10px;
            -webkit-transform: translate(-30px, -2px);
            transform: translate(-30px, -2px);
        }

    form.chat date {
        position: absolute;
        top: 10px;
        font-size: 14px;
        white-space: nowrap;
        vertical-align: middle;
        color: #8b8b90;
        opacity: 0;
        z-index: 4;
    }

    form.chat .myMessage date {
        right: 105%;
    }

    form.chat .fromThem date {
        left: 105%;
    }

    form.chat input {
        font: 400 13px 'Open Sans', sans-serif;
        border: 0;
        padding: 0 15px;
        height: 40px;
        outline: 0;
    }

        /*form.chat input[type='text'] {
            width: 73%;
            height: 40px;
            float: left;
        }*/
    form.chat .myimage {
        width: 10%;
        height: 35px;
        vertical-align:middle;
        align-content:safe center;
        background-color: transparent;
        border: 0px;
        outline: none;
        background-image: url('../images/imagednld1.png');
        background-repeat: no-repeat;
        /*top: 36vh;
        left: 50%;
        width: 28%;
        height: 28%;*/
        /*background-size: 100%;*/
        /*margin-left: -14%;*/
        cursor: pointer;
    }

    form.chat .myText {
        height: 40px;
        display: block;
    }

    form.chat input[value='Send'] {

        height: 40px;
        width: 100px;
        background: #007bff; /*transparent*/
        color: white; /*#007bff*/
        font-weight: 700;
        text-align: center;
        float: right;
        display: inline-block;
    }

    form.chat .myMessage, form.chat .fromThem {
        font-size: 12px;
    }

    form.chat .message:hover .myMessage {
        transform: translateY(18px);
        -webkit-transform: translateY(18px);
    }

    form.chat .message:hover .fromThem {
        transform: translateY(18px);
        -webkit-transform: translateY(18px);
    }

    form.chat .myMessage date {
        top: -20px;
        left: auto;
        right: 0;
        font-size: 12px;
    }
    
    form.chat .fromThem date {
        top: -20px;
        left: auto;
        left: 0;
        font-size: 12px;
    }

    form.chat .myMessage,
    form.chat .fromThem {
        max-width: 90%;
    }

@-moz-keyframes loading-bar {
    0% {
        width: 0%;
    }

    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes loading-bar {
    0% {
        width: 0%;
    }

    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}

@keyframes loading-bar {
    0% {
        width: 0%;
    }

    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}

/* DEMO */
.iphone {
    width: 100%; /*300px;*/
    height: 100%; /*609px;*/
    /*background-image: url('http://www.adobewordpress.com/tasarim/images/iphone6.png');*/
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
}

.border {
    position: absolute;
    top: 51px;
    /*top: 12.3%;*/
    right: 3%;
    left: 3%;
    bottom: 12%;
    overflow: hidden;
}

a.article {
    position: fixed;
    bottom: 15px;
    left: 15px;
    display: table;
    text-decoration: none;
    color: white;
    background-color: #00e34d;
    padding: 10px 20px;
    border-radius: 25px;
    font: 400 15px 'Open Sans', sans-serif;
}
.LastSSN {
    position: center;
    vertical-align: middle;
    border: thick;
    border-width: medium;
    border-color: blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    text-align: center;
}

.SessionEnded {
    font-size: medium;
    align-content: center;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    font-weight: 400;
}

.SessionButton {
    font-size: large;
    align-content: center;
    vertical-align: middle;
    text-decoration-color: white;
    color: white;
    text-align: center;
    background-color: cornflowerblue;
    font-weight: 700;
    border-width: thin;
    border-color: blue;
    width: 90%;
    height: 60px;
    padding: 2px 2px 2px 2px;
    margin-bottom: 4px;
    margin-top: 4px;
}

    .SessionButton:active {
        font-size: large;
        align-content: center;
        vertical-align: middle;
        text-decoration-color: white;
        color: floralwhite;
        text-align: center;
        background-color: dodgerblue;
        font-weight: 700;
        border-width: thin;
        border-color: white;
        width: 93%;
        height: 64px;
        padding: 2px 2px 2px 2px;
        margin-bottom: 4px;
        margin-top: 4px;
    }

.remindarea {
    display: normal;
    position: page;
    top: 0;
    width: 100%;
    height: 50px;
    padding: 2% 3%;
    border-bottom: 1px solid blue;
}
form.chat .messageHolder {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    height: 90%;/*90vh;*/
    width: 100%;
    /*padding: 2% 3%;*/
    background-color: white;
    border-bottom: 1px solid #ecf0f1;
    /*border: 2px solid #000000;*/
}

    form.chat.messageHolder .messages {
        display: block;
        overflow-x: hidden;
        position: relative;
        height: 100%;
        width: 100%;
        padding: 2% 3%;
        /*border-bottom: 1px solid #ecf0f1;*/
    }
.image-upload > input {
    display: none;
}

.startbutton {
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/imagednld1.png');
    background-repeat: no-repeat;
    /*top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;*/
    background-size: 100%;
    /*margin-left: -14%;*/
    cursor: pointer;
}


.customfileupload {
    cursor: pointer;
    height: 0px;
    text-align:left;
    visibility: hidden;
    display: inline-block;
    position: relative;
    width: 0px;
}

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
    display: none;
    visibility: hidden;
}

#clnm-secure-client-active {
    height: 100%;
    width: 100%;
    position: absolute;
}

    #clnm-secure-client-active.chat-mode #clnm-secure-client-toggle-chat-button,
    #clnm-secure-client-active.chat-mode #clnm-secure-client-video-chat {
        display: none;
    }

    #clnm-secure-client-active.chat-mode #clnm-secure-client-chat {
        height: 100%;
        width: 100%;
    }

#clnm-secure-client-video-chat {
    z-index: 3;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
}

#clnm-secure-client-toggle-chat-button {
    height: 4.25em;
    width: 4.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    opacity: 0.6;
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

    #clnm-secure-client-toggle-chat-button i {
        font-size: 2em;
    }

#clnm-secure-client-toggle-chat-button:hover {
    opacity: 1;
}

#clnm-secure-client-chat.hide-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    width: 50%;
    height: 100%
}

#clnm-secure-client-chat.hide-bottom {
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

#clnm-secure-client-video-chat.show-chat-bottom {
    animation: clnm-secure-client-video-chat-show-chat-bottom;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

#clnm-secure-client-video-chat.hide-chat-bottom {
    animation: clnm-secure-client-video-chat-hide-chat-bottom;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

#clnm-secure-client-video-chat.show-chat-right {
    animation: clnm-secure-client-video-chat-show-chat-right;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

#clnm-secure-client-video-chat.hide-chat-right {
    animation: clnm-secure-client-video-chat-hide-chat-right;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

@keyframes clnm-secure-client-video-chat-show-chat-bottom {
    from { height: 100%; }
    to { height: 50%; }
}

@keyframes clnm-secure-client-video-chat-hide-chat-bottom {
    from { height: 50%; }
    to { height: 100%; }
}

@keyframes clnm-secure-client-video-chat-show-chat-right {
    from { width: 100%; }
    to { width: 50%; }
}

@keyframes clnm-secure-client-video-chat-hide-chat-right {
    from { width: 50%; }
    to { width: 100%; }
}
.chatsurveyinside button {
    cursor: pointer;
    padding: 0;
    /*font-size: unset;*/
    box-shadow: unset;
    min-height: auto;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Roboto,Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol" !important;
    line-height: initial;
    border-style: solid;
    color: #0033A0;
    width: auto;
    cursor: pointer;
    margin: 4px 8px 4px 0;
    padding: 4px 9px !important;
    font-size: 14px;
    text-align: left;
    transition: 0.3s;
    word-break: break-word;
    line-height: 14px;
    white-space: normal;
    border-color: #0033A0;
    border-width: 1px;
    border-radius: 5px;
    background-color: white;
}

.chatsruveybutton {
    color: #0033A0;
    cursor: pointer;
    margin: 4px 8px 4px 0;
    padding: 4px 9px !important;
    font-size: 14px;
    text-align: left;
    transition: 0.3s;
    word-break: break-word;
    line-height: 14px;
    white-space: normal;
    border-color: #0033A0;
    border-width: 1px;
    border-radius: 5px;
    background-color: white;
}
.chatsurveybutton:active {
    color: #0033A0;
    cursor: pointer;
    margin: 4px 8px 4px 0;
    padding: 4px 9px !important;
    font-size: 14px;
    text-align: left;
    transition: 0.3s;
    word-break: break-word;
    line-height: 14px;
    white-space: normal;
    border-color: #0033A0;
    border-width: 1px;
    border-radius: 5px;
    background-color: floralwhite;
}

form.chat .checkboxes {
    color: white;
    padding: 20px;
    /*    background: #998297;*/
    background: #00243;
    max-width: 200px;
    margin: 20px auto;
    font-family: sans-serif;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Roboto,Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol" !important;
}
    form.chat .checkboxes:active {
        color: floralwhite;
        padding: 20px;
        /*    background: #998297;*/
        background: #00243;
        max-width: 204px;
        margin: 20px auto;
        font-family: sans-serif;
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Roboto,Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol" !important;
    }
/*    box-shadow: unset;
    min-height: auto;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Roboto,Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol" !important;
    line-height: initial;
    border-style: solid;
    background-color: lightgray;
    width: auto;
    cursor: pointer;
    margin: 4px 8px 4px 0;
    padding: 4px 9px !important;
    font-size: 14px;
    text-align: left;
    transition: 0.3s;
    word-break: break-word;
    line-height: 14px;
    white-space: normal;
    border-color: lightgray;
    border-width: 1px;
    border-radius: 5px;
}*/
checkboxes .form-item {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    background: lightgray;
    /*    background-color: rgb(239, 239, 239), rgb(59, 59, 59);*/
}

.checkboxes label {
    /*background: rgb(239, 239, 239), rgb(59, 59, 59);
    cursor: pointer;
    margin: 4px 8px 4px 0;
    padding: 4px 9px !important;
    font-size: 14px;
    text-align: left;
    transition: 0.3s;
    word-break: break-word;
    line-height: 14px;
    white-space: normal;*/
/*    border-color: rgb(239, 239, 239), rgb(59, 59, 59);*/
    /*border-color: red;
    border-width: 1px;
    border-radius: 5px;
    color: black;
        padding: 10px;*/
/*    background: rgba(255,255,255,0.5);*/
background: lightgray;
    display: block;
    color: rgba(0,0,0,.75);
}
.checkboxes label:hover
    {
        cursor: pointer;
    }

.checkboxes input {
    margin-right: 5px;
}
.checkboxes input:disabled
    {
        color: lightblue;
    }

.checkboxes.disabled {
    background-color: rgb(239, 239, 239), rgb(59, 59, 59);
}

#sideNav {
    position: fixed;
    top: 2em;
}

chatnav {
    position: fixed;
    z-index: 999;
    height: 0;
    width: auto;
    overflow: hidden;
    top: 1.5em;
    left: .5em;
    display: inline-block;
    background: #1f8efa;
    border-radius: 0 0 10px 10px;
}

.nav-item-X {
    text-decoration: none;
    height:40px;
    text-align: left;
    padding: .5em 2em;
    display: block;
    color: white;
    text-anchor: start;
}

.nav-item {
    text-decoration: none;
    text-align: left;
    padding: .5em 2em;
    display: block;
    color: white;
    text-anchor: start;    
}
.nav-item:hover
{
    text-decoration: none;
    background-color: lightblue;
    text-align: left;
    padding: .5em 2em;
    display: block;
    color: white;
    text-anchor: start;   
}

.clnmcircle {
    width: 500px;
    height: 500px;
    line-height: 5px;
    border-radius: 50%;
    font-size: 14px;
    color: white;
    text-align: center;
    background: blue;
}

.clnmcircltext {
    width: 100%;
    height: 100%;
    /*BLUE BG*/
    background: radial-gradient( ellipse at center, rgba(0, 128, 172, 1) 0%, rgba(0, 128, 172, 1) 70%, rgba(0, 128, 172, 0) 70.3% );
    /*RED BG
  background: radial-gradient(
    ellipse at center,
    rgba(210, 20, 20, 1) 0%,
    rgba(210, 20, 20, 1) 70%,
    rgba(210, 20, 20, 0) 70.3%
  );*/
    position: relative;
    margin: 0;
    color: white;
}
.clnmcirclewrapper {
    float:left;
    width: 30px;
    height: 30px;
    position: relative;
    margin: 1vh auto 0; /*OPTIONAL MARGIN*/
}
/*.clnmcircltext p {
    font-size: 16px;
    font-style: normal;
    height: 100%;
    line-height: 2;
    padding: 10px;
    text-align: center;
    text-shadow: 10.5px 10.5px 10px rgba(0, 0, 0, 0.3);
}
*/
.clnmcircltext p {
    font-size: 16px;
    font-style: normal;
    height: 100%;
    line-height: 2;
    padding: 0;
    text-align: center;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

mycircle {
    /*    position: relative;
    width: 500px;
    height: 500px;
    margin: 50px;
    background: -webkit-linear-gradient(blue,white);
    color: black;
    border-radius: 250px;*/
    width: 50px;
    height: 50px;
    border-radius: 25px;
    font-size: 9px;
    color: #fff;
    line-height: 25px;
    text-align: center;
    background: #000
}