/* ===============================================

     IMPORT CSS FILE /////////////////////////////////////////////////////////// */



@import url('reset.css');

@import url('fonts.css');

@import url('default.css');

@import url('style.css');

@import url('quickstyle.css');

/* ===============================================

     DOCUMENT /////////////////////////////////////////////////////////// */



body {

    position: relative;

    /*font: 14px 'Lato Regular', Arial;*/

    color: #444c63;

    overflow-x: hidden;

}

html, body {

    background: #f1f1f1;

    margin: 0;

    overflow: hidden;

    /*font-family: 'Poppins', sans-serif;*/

    font: normal 12px Arial;

    position: relative;

    /*font: 14px 'Lato Regular', Arial;*/

    color: #444c63;

    /*overflow-x: hidden;*/

}

.pdLR5 {

    padding-left: 5px;

    padding-right: 5px;

}

.chat_container {

    margin: auto;

    position: relative;

    width: 100vw;

    height: 100vh;

}

.chat_container .chat {

    position: absolute;

    width: 100%;

    height: calc(100% - 80px);

    bottom: 0;

    margin: auto;

    left: 0;

    right: 0;

    background: white;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    -webkit-transform: scale(0);

    transform: scale(0);

    box-shadow: 0 5px 60px 10px rgba(0, 0, 0, 0.12);

}



.out-group-bubble {

    display: flex;

    justify-content: flex-end;

}

.group-bubble {

    position: fixed;

    width: 65px;

    height: 65px;

    top: 50%;

    left: 0px;

    display: flex;

    justify-content: flex-end;

}

.bubble {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: transparent;

    background-size: cover;

    border: 2px solid transparent;

    cursor: pointer;

}

.group-bubble-chat {

    display: none;

    order:0;

}

.bubble__span {

    position: absolute;

    left: 70px;

    background: #333;

    border-radius: 10px;

    padding: 5px;

    color: white;

    /*font-family: 'Roboto';*/

    opacity: 0;

}

.group-bubble-chat:active, .bubble:active {}



.chat-thread {

    padding: 20px;

    margin: 10px;

    list-style: none;

    background: #fff;

    /*overflow: auto;*/

}

.chat-thread li {

    position: relative;

    clear: both;

    display: inline-block;

    padding: 10px 20px 10px 15px;

    margin-bottom: 10px;

    font: 14px;

    border-radius: 25px;

}

.chat-thread .message-mit {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    float: right;

}



.chat-thread .message-mit  div.content-chat-sub {

    background: rgba(210, 231, 247, 0.6);

    padding: 10px 20px 10px 15px;

    margin-bottom: 10px;

    border-radius: 25px;

}



.chat-thread .message-mit  div.content-chat-sub > p{

    color: #000;

    font-size: 14px;

    padding: 5px 0;

    text-align: right;

}



.chat-thread .message-mit .content-chat-sub{

    text-align: right;

}



.chat-thread .message-dest {

    /*background: #CFD8DC;*/

    /*border: 1px solid #a5c9d9;

    background: transparent;*/

    float: left;

    /*font-size: 14px;*/

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

}



.chat-thread .message-dest  div.content-chat-sub{

    /*background: #CFD8DC;*/

    border: 1px solid #a5c9d9;

    background: transparent;

    /*float: left;*/

    /*font-size: 14px;*/



    /*background: #d2e7f7 ;*/

    padding: 10px 20px 10px 15px;

    margin-bottom: 10px;

    border-radius: 25px;

}



.chat-thread .message-dest  div.content-chat-sub > p{

    /*background: #CFD8DC;*/

   /* border: 1px solid #a5c9d9;

    background: transparent;

    float: left;*/

    color: #000;

    font-size: 14px;

    padding: 5px 0;

    text-align: right;

}



.chat-thread .loading .material-icons {

    /*color: rgba(200, 200, 200, 0.8);*/

    color: #000;

    font-size: 8px;

    padding: 1px;

    margin-bottom: 5px;

}



.time-chat{

    color: rgba(29, 24, 24, 0.7);

}



.chat-thread .loading .material-icons:nth-child(1) {

    -webkit-animation: writing 1.2s infinite alternate;

    animation: writing 1.2s infinite alternate;

}

.chat-thread .loading .material-icons:nth-child(2) {

    -webkit-animation: writing 1.2s infinite 0.2s alternate;

    animation: writing 1.2s infinite 0.2s alternate;

}

.chat-thread .loading .material-icons:nth-child(3) {

    -webkit-animation: writing 1.2s infinite 0.3s alternate;

    animation: writing 1.2s infinite 0.3s alternate;

}

@-webkit-keyframes bounce {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0);

    }

    60% {

        -webkit-transform: scale(1.1);

        transform: scale(1.1);

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}

@keyframes bounce {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0);

    }

    60% {

        -webkit-transform: scale(1.1);

        transform: scale(1.1);

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}

@-webkit-keyframes writing {

    0% {

        -webkit-transform: translateY(0px);

        transform: translateY(0px);

    }

    50% {

        -webkit-transform: translateY(5px);

        transform: translateY(5px);

    }

    100% {

        -webkit-transform: translateY(-5px);

        transform: translateY(-5px);

    }

}

@keyframes writing {

    0% {

        -webkit-transform: translateY(0px);

        transform: translateY(0px);

    }

    50% {

        -webkit-transform: translateY(5px);

        transform: translateY(5px);

    }

    100% {

        -webkit-transform: translateY(-5px);

        transform: translateY(-5px);

    }

}

.clicktoggle {

    display: block!important;

    animation: bounce 0.4s ease-out forwards 0.2s;

}

.haschoose {

    border: 2px solid #327ebb ;

    padding: 2px;

    background: transparent;

}

.haschoose::after {

    content: '';

    display: block;

    width: 0;

    height: 0;

    border-left: 15px solid rgba(0, 0, 0, 0);

    border-bottom: 15px solid rgba(0, 0, 0, 0);

    border-top: 15px solid #327ebb ;

    border-right: 15px solid rgba(0, 0, 0, 0);

    text-align: center;

    /*margin: -5px auto 0;*/

    margin: 0px auto 0;

}



.bubble-sub {

    width: 65px;

    height: 65px;

    position: fixed;

    z-index: 1;

    /*order: 0;*/

    outline: -webkit-focus-ring-color auto 0px;

    outline: auto 0px;

    padding: 0;

    border-radius: 50%;

    order: 1;

}



.bubble-sub .bubble{

    position: relative;

    height: 65px;

    width: 65px;

    border-radius: 50%;

}



.bubble-sub .bubble .messageSwait{

    position: absolute;

    height: 20px;

    width: 20px;

    background: red;

    top: 0;left: 0;

    z-index: 10;

    font-size: 10px;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



.bubble-sub figure {

    height: 100%;

    width: 100%;

    overflow: hidden;

    margin: auto;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    position: relative;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

}

/*.bubble-sub figure:after {

    background: transparent;

    content: '';

    position: absolute;

    z-index: 2;

    height: 100%;

    width: 100%;

}*/

.bubble-sub figure img {

    position: absolute;

    z-index: 1;

    pointer-events: none;

    display: block;

    /*height: 100%;

    width: 100%;*/

    width: 80px;

    height: 80px;

    top: -3px;

    background: #fff;

}

.position_unset {

    position: unset;

}

.position_fixed {

    position: fixed;

}

.none {

    display: none !important;

}

.z-index9 {

    z-index: 9;

}

.order0 {

    order: 0;

}

.order1 {

    order: 1;

}

/*////////////////////////////drog drap/////////////////////////*/



.group-bubble .bubble-sub {

    background: transparent;

    border: unset;

}

.group-bubble .bubble-sub.group-bubble-chat {

    margin-left: 0;

}

.draggable-element {

    display: inline-block;

    margin: 0 5px;

    cursor: move;

}







/*///////////////////////chat content///////////////////////////*/

.chat-main{

	display: flex;

	justify-content: space-between;

	flex-direction: column;

	height: 100%;

}



.chat-main-user{

    /*background: #0b7ac8;

    background: -moz-linear-gradient(-45deg, #0b7ac8 0%, #69a7d9 100%);

    background: -webkit-linear-gradient(-45deg, #0b7ac8 0%,#69a7d9 100%);

    background: linear-gradient(135deg, #0b7ac8 0%,#69a7d9 100%);*/

    background: #cce1f2;

}



.head-chat{

	height: 50px;

	/*background-color: #018fe5;

    background: -moz-linear-gradient(right, #018fe5 70%, #3b9fdd 30%);

    background: -o-linear-gradient(right, #018fe5 70%, #3b9fdd 30%);

    background: -ms-linear-gradient(right, #018fe5 70%, #3b9fdd 30%);

    background: -webkit-gradient(linear,right top,left bottom,color-stop(0.7, #018fe5),color-stop(0.3, #3b9fdd));

*/

    /*background: #d2e7f7 ;*/

    /*background: #81b4de ;*/



    /*background: rgba(255, 255, 255, 0.45) none repeat scroll 0 0;*/

    /*background: #015591 none repeat scroll 0 0;*/

    background: #cce1f2 none repeat scroll 0 0;

    



	/*border-top-right-radius: 10px;

	border-top-left-radius: 10px;*/

	color: #fff;

	display: flex;

	justify-content: space-between;

	box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.30);

}



.head-chat-info{

	flex: 1;

    justify-content: center;

    align-items: flex-start;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.head-chat-info > h2{

    font-family: 'Oswald', Arial;

    color: #000;

}



.head-chat-setting{

	/*width: 150px;*/

	display: flex;

	justify-content: flex-end;

	align-items: center;



}



.head-chat-setting a{

	padding: 0 10px;

}



.content-chat{

	flex: 1;

	overflow-y: auto;

    background: #fff;

}



.footer-chat{

	width: 100%;

    height: 50px;

    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.07);

    display: flex;

    background: #cce1f2;    

    border-top: 1px solid rgba(128, 128, 128, 0.2);

}



.footer-chat button{

	background: transparent;

	border: none;

	cursor: pointer;

}



.footer-chat-icon{

	width: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

}



.footer-chat-icon button{

	padding: 10px;

}



.chat_container .chat .footer-chat .input {

    background: #cce1f2;

    width: 100%;

    height: 35px;

    display: block;

    border: none;

    padding: 3px;

    font-size: 14px;

    border-bottom: 2px solid rgba(0, 0, 0, 0.15);

}

.chat_container .chat .footer-chat .send {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 50px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    font-size: 40px;

    color: #1E88E5;

}



.group-file-voice-img{

	display: flex;

	padding: 0 10px;

}



.group-file-voice-img button{

	padding: 10px;

}



.chat-main-user,

.chat-main-admin{

	display: flex;

	flex-direction: column;

	height: calc(100% - 80px);

}



.chat-main-admin .content-chat{

	overflow-y: auto;

	flex: 1;

    background: #fff;

}



.chat-main-admin .content-chat ul > li{

	padding: 10px;

}

.chat-main-admin .content-chat ul > li > button{

	width: 100%;

    vertical-align: middle;

}



.chat-main-admin button{

	background: transparent;

	

	cursor: pointer;



}



.chat-main-admin > .head-chat > .head-chat-search{

	flex: 1;

	margin: auto 0;

	display: flex;

	justify-content: flex-start;

}



.chat-main-admin > .head-chat > .head-chat-search button{

	

	/*width: 100%;*/

}



.chat-main-admin > .head-chat > .head-chat-search button *{

	margin: auto 0;

}



.chat-main-admin > .head-chat > .head-chat-search form{

	flex: 1;

}

.chat-main-admin > .head-chat > .head-chat-search input{

	margin-left: 10px;

	text-align: left;

	/*flex: 1;*/

	width: 100%;

	padding: 7px;

	font-size: 14px;

	background: transparent;

	/*color: rgba(249, 249, 249, 0.82);*/

    color: #000;

	cursor:pointer; 

}



.chat-main-admin > .head-chat > .head-chat-search input::-webkit-input-placeholder { /* Edge */

  /*color: rgba(249, 249, 249, 0.82);*/

  color: #000;

}



.chat-main-admin > .head-chat > .head-chat-search input:-ms-input-placeholder { /* Internet Explorer 10-11 */

  /*color: rgba(249, 249, 249, 0.82);*/

  color: #000;

}



.chat-main-admin > .head-chat > .head-chat-search input::placeholder {

  /*color: rgba(249, 249, 249, 0.82);*/

  color: #000;

  opacity: 1; /* Firefox */

}



.chat-main-admin > .head-chat button{

	padding:0 10px;

}



.chat-main-admin > .head-chat > .head-chat-search p{

	flex: 1;

	margin: auto;

}



.content-chat-main{

	display: flex;

	justify-content: space-between;

}



.content-chat-main-img{

	border-radius: 50%;

	height: 45px;

	width: 45px;

	overflow: hidden;

}



.content-chat-main-img figure{

	display: flex;

	justify-content: center;;

	align-items: center;

}

.content-chat-main-info{

	flex: 1;

	padding: 5px 10px;

	/*margin: auto 0;*/

	text-align: left;

	border-bottom: 1px solid #8e8d8d;

}



.content-chat-main-info h2{

	font-size: 16px;

}



.content-chat-main-info p{

	font-size: 12px;

}

.content-chat-main-info-title{

	display: flex;

	justify-content: space-between;

}

.content-chat-main-info-title p{

	color: #8e8d8d;

}



input[type=text] {

  /*width: 100%;

  padding: 12px 20px;

  margin: 8px 0;*/

  display: inline-block;

  /*border: 1px solid #ccc;

  border-radius: 4px;*/

  box-sizing: border-box;

}

.drop-area__item{

    /*background: red;*/

}



.drop-area__item > i{

    color: #fff;

    background: rgba(3, 3, 3, 0.25);

    padding: 10px;

    border-radius: 50%;

    height: 50px;

    width: 50px;

    font-size: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #fff;



}



.head-chat-setting{

    position: relative;

    z-index: 999;

}

.head-chat-setting-mode{

    position: absolute;

    top:100%;

    left: auto;

    right: 15px;

    padding: 10px;

    background: #fff;

    width: 200px;

    color: #000;

    box-shadow: 1px 1px 2px 1px rgba(145, 187, 220, 0.35);

    display: none;

    /*opacity: 0;*/

    transition: all linear 300ms;
    height: 50vh;
    overflow: auto;

}



.head-chat-setting-mode-noti{

    display: flex;

    justify-content: space-between;

    flex-direction: row;

    flex: 1;

}



.head-chat-setting-mode-noti > h2{

    color: #0f8fa2;

    margin: auto 0;

}



.head-chat-setting-mode > .separator-right{

    height: 2px;

    border-bottom: 1px solid #c3e1e4;

    border-top: 1px solid rgba(255, 255, 255, 0.6);

    border-radius: 0 50% 50% 0;

    -webkit-border-radius: 0 50% 50% 0;

    margin: 10px 0;

}



.radio-field-2 {

    display: inline-block;

    position: relative;

    width: 16px;

    height: 16px;

}



.radio-field-2 > i {

    background: #fff none no-repeat scroll center center;

    border: 1px solid #5DAFDC;

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 2;

    border-radius: 50%;

    -webkit-border-radius: 50%;

}



.radio-field-2 > input[type="radio"] {

    background: transparent;

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 3;

    opacity: 0;

    cursor: pointer;

}



.radio-field-2 > input[type="radio"]:checked + i {

    background-image: url('../images/radio-form-1-blue.svg');

    background-size: 100% 100%;

}





.checkedbox-toggle-1 {

    display: inline-block;

    position: relative;

    height: 32px;

    width: 62px;

    border-radius: 40px;

    border: 1px solid #D1E5F4;

}



.checkedbox-toggle-1 > input {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 3;

    opacity: 0;

    cursor: pointer;

}



.checkedbox-toggle-1 > i {

    background: #FFF;

    border: 2px solid #81B4DE;

    position: absolute;

    z-index: 2;

    height: 18px;

    width: 18px;

    border-radius: 50%;

    top: 6px;

    left: 6px;

    transition: all linear .1s;

}



.checkedbox-toggle-1 > input:checked ~ i {

    left: 36px;

    border-color: #FFF;

}



.checkedbox-toggle-1 > span {

    position: absolute;

    z-index: 1;

    padding: 0 8px;

    height: 100%;

    width: 100%;

    top: 0;

    right: 0;

    background: #FFF;

    border-radius: inherit;

    text-align: right;

}



.checkedbox-toggle-1 > span:before {

    color: #81B4DE;

    content: "No";

    font-family: Arial;

    font-size: 12px;

    font-weight: bold;

    line-height: 30px;

    text-transform: uppercase;

}



.checkedbox-toggle-1 > input:checked ~ i ~ span {

    background: #81B4DE;

    text-align: left;

}



.checkedbox-toggle-1 > input:checked ~ i ~ span:before {

    content: "Yes";

    color: #FFF;

}





.checkedbox-toggle-1.auto-name > input:checked ~ i {

    left: auto;

    right: 6px;

}       



.checkedbox-toggle-1.auto-name > span:before {

    content: attr(data-label-unchecked);

}



.checkedbox-toggle-1.auto-name > input:checked ~ i ~ span:before {

    content: attr(data-label-checked);

}