.chatTextArea {
    border: 0;
    padding: 10px;
}

.marginbototm {
    margin-bottom: 15px;
}

.vc-duration {
    padding: 5px;
    color: #FFF;
    margin-bottom: 7px;
    border-radius: 22px;
    color: #ffffff;
}

ul.chatScreenSmall {
     
        list-style-type: none;
    padding: 18px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 90px) !important;
    width: 33% !important;
    bottom: 40px;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /*height: 52%;*/
}

.msj {
    float: left;
    background: white;
}

.macro {
    margin-top: 5px;
    width: 85%;
    border-radius: 5px;
    padding: 5px;
    display: flex;
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    float: left;
    padding-right: 10px;
}

.text-l {
    float: left;
    padding-right: 10px;
}

.text > p:first-of-type {
    width: 100%;
    margin-top: 0;
    margin-bottom: auto;
    line-height: 13px;
    font-size: 12px;
    word-break: break-word;
}

.text-box-message {
    width: 90%;
    display: flex;
    flex-direction: column;
}


.text {
    width: 85%;
    display: flex;
    flex-direction: column;
}


.text > p:last-of-type {
    width: 100%;
    text-align: right;
    color: silver;
    margin-bottom: -7px;
    margin-top: auto;
}

.MessageTxtArea {
    margin-top: 5px;
    width: 100%;
    border-radius: 5px;
    padding: 5px;
    display: flex;
}

.msj-rta {
    float: right;
    background: #fff;
}

.macro {
    margin-top: 5px;
    width: 85%;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    border:1px solid #e4e4e4;
}

.text-r {
    float: right;
    padding-left: 10px;
}

.msj:before {
    width: 0;
    height: 0;
    content: "";
    top: -5px;
    left: -15px;
    position: relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #fff transparent transparent;
    
}

.msj-rta:after {
    width: 0;
    height: 0;
    content: "";
    top: -5px;
    left: 15px;
    position: relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: #fff transparent transparent transparent;
    
}

.main-chat-section {
    /*max-height: 510px;
    overflow: auto;*/
}


.chat-send-text {
    width: 100%;
    text-align: right;
    padding: 10px 10px 0 10px;
    color: #555;
}

.chat-rec-text {
    width: 100%;
    text-align: left;
    padding: 10px 10px 0 10px;
    color: #555;
}

.textarea-width {
    width: 30%;
    float: left;
}

.send-btn {
    font-size: 30px;
    padding-top: 13px;
    cursor: pointer;
    float: left;
    padding-left: 10px;
}

#VideoConsultDiv #AdvertisingVideo video {
    width: 50%;
    display: block;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #cccaca;
}

.chattextbox {
    position: fixed;
    width: 100%;
    resize: none;
    bottom: 0;
}

ul.listText {
    padding:0;
}


ul.listText li{
        background-color: #f9f9f9;
    list-style-type: none;
    padding: 5px;
    border-bottom: 1px solid #E4E0E0;
}

.arrow_box {
	position: relative;
	background: #fff;
    padding:8px;
    margin-bottom:25px;
    border: 1px solid #cccaca;
    border-radius: 6px;
    /*-webkit-box-shadow: -4px 2px 12px 1px rgba(0,0,0,0.26);
    -moz-box-shadow: -4px 2px 12px 1px rgba(0,0,0,0.26);
    box-shadow: -4px 2px 12px 1px rgba(0,0,0,0.26);*/
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 15%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

ul.wizard-head-video {
    list-style:none !important;
    padding-left:0;
}

ul.wizard-head-video li {
    list-style: none !important;
    display: -webkit-box !important;
    float: left !important;
    position: relative !important;
    padding: 5px 10px 5px 10px !important;
    /*border-right: 1px solid #ccc !important;*/
    border: 1px solid #ccc !important;
    width: 50%;
}


.form-wizard .form-wizard-levels-video {
    padding-left: 0;
    width: 100%;
}



ul.wizard-head-video li a:hover, a:active, a:focus {
    /*text-decoration: underline !important;*/
}

.endCallBtn {
    padding-left: 15px;
    float:left;
    cursor: pointer;
    width: 80px;
}

.startCallBtn {
    padding-right: 15px;
    cursor: pointer;
     width: 80px;
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .videoTabs {
      display: none !important;
  }
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .video-consult {
        background: white;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1;
        bottom: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }


    .chatScreenFullpage {
    height: calc(100% - 90px) !important;
    width: 25% !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
}

    ul.chatScreenSmall {
            width: 33% !important;
        list-style-type: none;
        padding: 18px;
        /* position: absolute; */
        bottom: 44px;
        display: flex;
        flex-direction: column;
        /*height: calc(100% - 210px) !important;*/
        overflow-y: auto;
        height:70%;
    }

    .videoTabs {
      display: none !important;
  }
}

@media (min-width: 270px) and (max-width: 480px) {
    .MessageTxtAreaSection {
    margin-top: 5px;
    width: 100% !important;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
}
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
    .MessageTxtAreaSection {
    margin-top: 5px;
    width: 100% !important;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
}



    .MessageTxtAreaSectionSmall {
    margin-top: 5px !important;
    width: 100% !important;
    border-radius: 5px !important;
    padding: 5px !important;
    bottom: 0 !important;
    position: fixed !important;
    padding-left: 15px !important;
}
    #ChatbarSide {
        top: 34px !important;
    }

      ul.chatScreenSmall {
        width: 100% !important;
        list-style-type: none;
        padding: 18px;
        /* position: absolute; */
        bottom: 52px;
        display: flex;
        flex-direction: column;
        /*height: 400px;*/
        overflow-y: auto;
        height: calc(100% - 120px) !important;
        /*height:77%*/
    }

    .text-box-message {
        width: 75%;
        display: flex;
        flex-direction: column;
    }

    #VideoConsultDiv #AdvertisingVideo video {
        width: 100% !important;
        display: block;
        margin: 0 auto;
        padding: 15px;
        border: 1px solid #eee;
    }

    .video-consult {
        background: white;
        width: 100%;
        height: 100% !important;
        display: none;
        position: fixed;
        z-index: 1003 !important;
        bottom: 0;
        padding:0;
        overflow-y:auto;
        overflow-x:hidden;
    }

    .collapse-iframe {
        height: 84% !important;
        width: 100%;
        border: none;
        background-color: #fff;
    }

    #WaitingText { 
        padding-left:0px !important;
        margin-top: 5px;
    }

    #ChatbarSide {
        display: none;
    }

    #loadingDiv {
        left:0px !important;
    }

    #loadingDiv img {
        width:100% !important;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 300px) and (max-width: 480px) {
  

    .MessageTxtAreaSectionSmall {
    margin-top: 5px !important;
    width: 100% !important;
    border-radius: 5px !important;
    padding: 5px !important;
    bottom: 0 !important;
    position: fixed !important;
    padding-left: 15px !important;
}

    #ChatbarSide {
        top: 34px !important;
    }


      ul.chatScreenSmall {
        width: 100% !important;
        list-style-type: none;
        padding: 18px;
        /* position: absolute; */
        /*bottom: 200px;*/
        display: flex;
        flex-direction: column;
        height: calc(100% - 150px) !important;
        overflow-y: auto;
        /*height:78%;*/
    }

    .text-box-message {
        width: 75%;
        display: flex;
        flex-direction: column;
    }

    #VideoConsultDiv #AdvertisingVideo video {
        width: 100% !important;
        display: block;
        margin: 0 auto;
        padding: 15px;
        border: 1px solid #eee;
    }

    .video-consult {
        background: white;
        width: 100%;
        height: 100% !important;
        display: none;
        position: fixed;
        z-index: 1003 !important;
        bottom: 0;
        padding:0;
        overflow-y:auto;
        overflow-x:hidden;
    }

    .collapse-iframe {
        height: 84% !important;
        width: 100%;
        border: none;
        background-color: #fff;
    }

    #WaitingText { 
        padding-left:0px !important;
        margin-top: 5px;
    }

    #ChatbarSide {
        display: none;
    }

    #loadingDiv {
        left:0px !important;
    }

    #loadingDiv img {
        width:100% !important;
    }
}

.MessageTxtAreaSection {
    margin-top: 5px;
    width: 25%;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
    padding-left: 15px !important;
}

.MessageTxtAreaSectionSmall {
    margin-top: 5px;
    width: 33%;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
    padding-left: 15px !important;
}


.chat-heading-full-page {
    background-color:#428bca;
    padding:10px;
    width:100%;
    color:#fff;
}


.send-btn-full-page {
    font-size: 30px;
    cursor: pointer;
    float: left;
}


.chatScreenFullpage {
    height: calc(100% - 90px) !important;
    width: 25% !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
        padding: 18px;
        list-style-type: none;

}


@media screen and (max-width: 768px) {
.chatScreenFullpage {
    height: calc(100% - 90px) !important;
    width: 100% !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
}    
.MessageTxtAreaSection {
    margin-top: 5px;
    width: 100%;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
}

    .chat-sectionWidth-full {
        width:100% !important;
    }

}


@media screen and (max-width: 1024px) {
.chatScreenFullpage {
    height: calc(100% - 90px) !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
}    
.MessageTxtAreaSection {
    margin-top: 5px;
    width: 25%;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
}

.MessageTxtAreaSectionSmall {
    margin-top: 5px;
    width: 33%;
    border-radius: 5px;
    padding: 5px;
    bottom: 0;
    position: fixed;
    padding-left: 15px !important;
}


/*.chat-sectionWidth-full {
        width:25% !important;
    }*/

}

/*@media screen and (max-width: 699px) and (min-width: 520px*/

@media only screen and (max-width: 1569px) and (min-width: 1025px)  {
 
       .chatScreenFullpage {
    height: calc(100% - 90px) !important;
    width: 25% !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
}



ul.chatScreenSmall {
    list-style-type: none;
    padding: 18px;
    display: flex;
    flex-direction: column;
    /*height: calc(100% - 352px) !important;*/
    width: 33% !important;
    bottom: 40px !important;
    position: fixed !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width:52%;
    

}

}







.videofixedbottom {
    text-align: center; 
    padding: 15px;
    border: 1px solid #cccaca;
}



.arrow_box li {
    list-style-type:none;
    font-weight:normal;
    font-family:Arial;
    color:#838483;
}

.buttonbgClose {
    background-color: #eee;
    padding: 8px 15px;
}


.blueButtonclose {
    border: none;
    border-radius: 2px;
    /*border-bottom: 3px solid #3db66e;*/
    height: 25px;
    background: #428bca;
    color: #fff;
    font-weight: 100;
    margin: 0;
}

.chat-status-heading {
    text-align: center;
    font-style: italic;
}


.echo-test-btn {
	background-color: #0087cb;
    border: 1px solid #337fed;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 3px;
    text-decoration: none;
    margin-left: 5px;
}


.video-connect-btn {
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    padding: 9px 3px;
    text-decoration: none;
    text-align: center;
}

    .enabled {
        background-color: #0087cb;
        border: 1px solid #337fed;
        cursor: pointer;
    }

.disabled {
    background-color: #C0C0C0;
    border: 1px solid #C0C0C0;
    cursor:default;
}