/*
Template Name: DreamsChat - HTML Mobile Template
Author: Dreamguy's Technologies
Version: 1.1
*/

/*============================
 [Table of CSS]
 
 	1. Material Icons Font
	2. Basic CSS
	3. Header
	4. Login
	5. Chat
	6. Status
	7. Profile
	8. Settings
	9. Voice Call
	10. Splash Screen

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

/*-----------------
	1. Material Icons Font
-----------------------*/

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/MaterialIcons-Regular.eot);
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
		url(../fonts/MaterialIcons-Regular.woff) format('woff'),
		url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased; /* Support for all WebKit browsers. */
	text-rendering: optimizeLegibility; /* Support for Safari and Chrome. */
	-moz-osx-font-smoothing: grayscale; /* Support for Firefox. */
	font-feature-settings: 'liga'; /* Support for IE. */
}

/*-----------------
	2. Basic CSS
-----------------------*/

html, body {
	height: 100%;
	color: #000000;
	font-family: 'Poppins', sans-serif;
	font-size: 14px; 
	font-weight: 400;
	overflow-x: hidden;
}
* {
	box-sizing: border-box;
}
a:focus {
	outline: 0px solid;
}
img {
	max-width: 100%;
	height: auto;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 10px;
	font-weight: 500;
}
a {
	text-decoration: none;
	color: #777
}
a:hover {
	color: #ec4445;
	text-decoration: none;
}
a:active, a:hover {
	outline: 0 none;
}
p {
	margin: 0 0 1em;
}
ul {
	list-style: none; 
	margin: 0;
	padding: 0;
}
.clear {
	clear: both;
}
.text-center {
	text-align: center;
}
.custom-form input[disabled], .custom-form input[readonly] {
	background-color: #eee;
}
.text-success {
	color: #55ce63 !important;
}
.text-danger {
	color: #f62d51 !important;
}
.text-primary {
	color: #ff9b44 !important;
}
.text-warning {
	color: #ffbc34 !important;
}
.text-info {
	color: #009efb !important;
}
.rounded {
	border-radius: 50%;
}
.card-box {
	background-color: #fff;
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 15px;
	overflow: hidden;
	padding: 15px;
}
.text-muted {
	color: #777 !important;
}
.m-b-15 {
	margin-bottom: 15px !important;
}
.m-b-0 {
	margin-bottom: 0 !important;
}
.m-b-5 {
	margin-bottom: 5px !important;
}
.m-t-0 {
	margin-top: 0 !important;
}
.m-t-5 {
	margin-top: 5px !important;
}
.m-t-10 {
	margin-top: 10px !important;
}
.list input[type="date"], 
.list input[type="datetime-local"], 
.list input[type="email"], 
.list input[type="number"], 
.list input[type="password"], 
.list input[type="search"], 
.list input[type="tel"], 
.list input[type="text"], 
.list input[type="time"], 
.list input[type="url"], 
.list select {
	color: #333;
	font-size: 14px;
	height: 40px;
}
.list input[type="file"] {
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
}
.list ul:before {
	background-color: transparent;
}
.list ul:after {
	background-color: transparent;
}
.list .item-inner:after {
	background-color: transparent;
}
.block-strong:before {
	background-color: #e7e7e7;
}
.block-strong:after {
	background-color: #e7e7e7;
}
.links-list a:after {
	background-color: #e7e7e7;
}
.subnavbar:after {
	background-color: #e7e7e7;
}
.btn{
	font-size: 14px;
}
.block {
	margin: 0;
}
.list {
	margin: 0;
}
.list ul {
	background-color: transparent;
}
.list ul:before {
	background-color: transparent;
}
.list .item-content,
.list .item-inner {
	padding: 0;
}
.active-state {
	background-color: transparent !important;
}
.form-control,
.custom-select {
	height: 40px;
	color: #000;
	font-size: 14px;
	border:0;
	border-bottom: 1px solid #C3C3C3;
	padding-left: 0;
	padding-bottom: 0;
	outline: 0;
}
.custom-select {
    display: inline-block;
    width: 100%;
}
.form-control:focus,
.custom-select:focus {
	box-shadow: none;
	border-color: #C3C3C3;
	color: #000;
}
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

/*-----------------
	3. Header
-----------------------*/
.navbar {
	height: auto;
	padding: 19px 0 0 0;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}
.navbar:after {
	opacity: 0;
}
.navbar-inner {
	background: #1B5A90;
}
.navbar .nav-link {
	color: rgba(245,245,245,0.8);
	position: relative;
	padding: 0;
	display: inline-block;
}
.navbar .nav-link.active:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 3px;
	background-color: #fff;
}
.navbar .nav-link.active {
	color: #fff;
}
.nav-item {
	float: left;
	width: 21%;
	font-size: 14px;
	padding-right: 24px;
	font-weight: 500;
	position: relative;
}
.nav-item:first-child {
	width: 13%;
}
.nav-item:nth-child(2) {
	width: 19%;
}
.nav-item:last-child {
	padding-right: 0;
}
.navbar img {
	margin-top: 4px;
	max-width: 40px;
}
.back.link i {
	font-size: 25px;
}
.page {
	background: #fff;
}
.popover {
	width: 200px;
	background-color: #fff;
}
.popover .list .list-button:after {
	background-color: #ededed;
}
.ios .popover-angle:after {
	background-color: #fff;
}
.popover .list .list-button {
	color: #333;
	font-size: 14px;
	line-height: 40px;
}
.navbar ~ .main-wrapper, 
.navbar ~ *:not(.no-navbar) .main-wrapper {
	padding-top: 59px;
}
..navbar .title {
	color: #fff;
	font-size: 14px;
}
.header {
	background-image: url('../img/top-curve-bg.png');
	position: relative;
	width: 100%;
	height: 160px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: initial;
	padding: 20px 15px;
}
.header-small {
	height: 115px;
}
.top-profile {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	position: relative;
}
.top-profile + .top-profile {
	margin-top: 10px;
}
.avatar {
	width: 48px;
	height: 48px;
	display: inline-block;
}
.avatar img {
	border-radius: 50px;
}
.profile {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	width: 100%;
}
.profile:hover {
	color: #fff;
}
.profile .avatar {
	margin-right: 10px;
}
.search {
	display: flex;
	display: -webkit-flex;
	position: relative;
}
.search a {
	line-height: 0;
}
.search a + a {
	margin-left: 12px;
}
.search img {
	max-width: 18px;
}
.search .dropdown-menu {
	padding: 0;
}
.search .dropdown-item {
	line-height: normal;
	padding: 6px 12px;
	margin: 0;
	font-size: 13px;
}
.search .dropdown-item:hover:first-child {
	border-radius: .25rem .25rem 0 0;
}
.search .dropdown-item:hover:last-child {
	border-radius: 0 0 .25rem .25rem;
}
.dropdown-item:focus, 
.dropdown-item:hover {
	background-color: #e8e8e8;
}
.add-new-btn {
	position: absolute;
	right: 15px;
	bottom: 30px;
	z-index: 600;
}
.add-new-btn a {
	color: #fff;
	background-color: #ffa977;
	width: 30px;
	height: 30px;
	border-radius: 50px;
	font-size: 13px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.add-new-btn a.active-state {
	background-color: #ffa977 !important;
}
.search_chat {
	position: absolute;
	left: 0;
	top: 4px;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all .7s ease;
	-webkit-transition: all .7s ease;
	-ms-transition: all .7s ease;
}
.search_chat.show-search {
	opacity: 1;
	visibility: visible;
	transition: all .7s ease;
	-webkit-transition: all .7s ease;
	-ms-transition: all .7s ease;
}
.search_chat span {
	position: absolute;
	left: 13px;
	top: 14px;
	color: #660780;
}
.search_chat span.close-search {
	right: 13px;
	left: initial;
	top: 11px;
	cursor: pointer;
}
.search_chat .form-control {
	padding-left: 35px;
}

/*-----------------
	4. Login
-----------------------*/

.login-page {
	background-image: url(../../assets/img/login-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	padding-top: 40px;
}
.login-icon {
	text-align: center;
}
.login-top-icon {
	width: 150px;
	height: 150px;
	display: inline-block;
	margin: 0 auto;
	box-shadow: 0 5px 30px #00000029;
	background-color: #fff;
	border-radius: 100px;
	padding: 10px;
	position: relative;
}
.inner-top-icon {
	width: 120px;
	height: 120px;
	border-radius: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	background-image: linear-gradient(to right bottom, #650681, #67009b, #6100b8, #5000d7, #0f07f8);
	background-image: -webkit-linear-gradient(to right bottom, #650681, #67009b, #6100b8, #5000d7, #0f07f8);
	background-image: -ms-linear-gradient(to right bottom, #650681, #67009b, #6100b8, #5000d7, #0f07f8);
}
.inner-top-icon img {
	max-width: 70px;
}
.login-title {
	color: #3B3B3B;
	font-weight: 600;
	padding-top: 30px;
	padding-bottom: 25px;
	text-align: center;
}
.login-form .item-title {
	font-size: 13px;
	color: #595A5B;
	font-weight: 500;
}
.login-form ul li {
	padding-bottom: 20px;
}
.login-form input,
.login-form select {
	border:0;
	border-bottom: 1px solid #C3C3C3;
	width: 100%;
	padding-left: 0;
	padding-bottom: 0;
}
.bottom-submit {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	width: 100%;
	position: absolute;
	left: 15px;
	bottom: 30px;
	z-index: 99;
}
.bottom-submit .submit-btn {
	border-radius: 50px;
	width: 45px;
	height: 45px;
	background-color: #FFA977;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom-submit .submit-btn img {
	max-width: 20px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}
.bottom-submit .left ul li {
	width: 30px;
	height: 2px;
	background-color: #D3D3D3;
	margin-right: 5px;
	padding: 0;
	display: inline-block;
}
.bottom-submit .left ul li.active {
	background-color: #FFA977;
}
.bottom-submit .right {
	padding-right: 30px;
}
#partitioned {
    letter-spacing: 1em;
    border: 0;
    background-image: linear-gradient(to left, #FFA977 100%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 80px 1px;
    background-repeat: repeat-x;
    background-position-x: 50px;
    width: 200px;
    min-width: 200px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding-left: 2em;
    padding-right: 1em;
}
#partitioned::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #333;
    opacity: 1;
}
#partitioned::-moz-placeholder { /* Firefox 19+ */
    color: #333;
    opacity: 1;
}
#partitioned:-ms-input-placeholder { /* IE 10+ */
    color: #333;
    opacity: 1;
}
#partitioned:-moz-placeholder { /* Firefox 18- */
    color: #333;
    opacity: 1;
}
.otp-text {
	font-size: 13px;
	text-align: center;
}
.otp-text a {
	color: #FFA977;
}
.select-language .smart-select .item-content {
	border-bottom: 1px solid #C3C3C3;
	padding-bottom: 5px;
}
.select-language .item-title {
	padding-bottom: 5px;
}
.drop-down-col .select-language .item-title i {
	color: #FFA977;
}
.item-floating-label + .item-input-wrap, 
.item-label + .item-input-wrap {
	width: 100%;
}
.mobile-number {
	display: flex;
	display: -webkit-flex;
}
.mobile-number input {
	font-weight: 500;
	letter-spacing: 0.3em;
	padding-bottom: 4px;
}
.mobile-number .country-code {
	width: 16%;
}
.mobile-number .mobile-number-code {
	width: 86%;
	padding-left: 20px;
}

/*-----------------
	5. Chat
-----------------------*/

.chat-bg {
	background-image: url(../../assets/img/login-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
}
.camera-icon {
	position: relative;
}
.camera-icon img {
	max-width: 20px;
}
.chats {
	padding: 15px;
}
.chat-body {
	display: block;
	margin: 10px 0 0;
	overflow: hidden;
}
.chat-body:first-child {
	margin-top: 0;
}
.chat-bubble {
	display: block;
	width: 100%;
	float: left;
	margin-bottom: 10px;
}
.chat-content > p {
	margin-bottom: 0;
	word-wrap: break-word;
	font-size: 12px;
}
.chat-time {
	color: rgba(0, 0, 0, 0.5);
	display: block;
	font-size: 11px;
}
.chat-avatar {
	float: right;
}
.chat-avatar .avatar {
	line-height: 24px;
	height: 24px;
	width: 24px;
}
.chat-left .chat-avatar {
	float: left;
}
.chat-left .chat-body {
	margin-right: 0;
	margin-left: 30px;
}
.chat-left .chat-content {
	color: #888;
	float: left;
	position: relative;
}
.avatar:hover {
	color:#fff;
}
.avatar > img {
	width: 100%;
	display:block;
}
.chat-left .chat-time {
	color: #a3afb7;
}
.attach-list {
	color: #adb7be;
	padding: 5px 0 0;
	line-height: 24px;
	margin: 0;
	list-style: none;
}
.attach-list i {
	margin-right: 3px;
	font-size: 16px;
}
.attach-list a {
	font-size: 12px;
	word-wrap: break-word;
}
.edit-btn {
	border-radius: 40px;
	height: 36px;
	position: absolute;
	right: 15px;
	top: 15px;
	width: 36px;
}
.files-icon {
	background-color: #f3f7f9;
	border: 1px solid #e4eaec;
	border-radius: 4px;
	display: inline-block;
	height: 38px;
	line-height: 38px;
	text-align: center;
	width: 38px;
}
.files-icon i {
	color: #76838f;
	font-size: 20px;
}
.list.chat-list .item-inner:after {
	background: transparent;
}
.list.chat-list ul {
	background: transparent;
	border: 0;
}
.list.chat-list li {
	background-color: transparent;
	border-radius: 20px;
	margin-bottom: 20px;
	box-shadow: 0 3px 10px 0px rgba(123, 123, 123, 0.4);
	background-color: #fff;
}
.list.chat-list li:last-child {
	margin-bottom: 0;
}
.chat-list.media-list .item-media img {
	border-radius: 50%;
}
.profile-action {
	position: absolute;
	right: 5px;
	text-align: right;
	top: 10px;
}
.action-icon {
	color: #777 !important;
	display: inline-block;
	font-size: 18px;
	padding: 0 10px;
}
.chat-list-col {
	position: relative;
	padding-bottom: 15px;
	margin-top: -40px;
	padding-top: 28px;
}
.chat-list-col:after {
	content: "";
	display: table;
	clear: both;
}
.chat-list-col .container {
	padding: 0 15px;
}
.container {
	max-width: 100%;
}
.chat-title {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	font-size: 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #c5c5c5;
}
.chat-list-title i {
	position: relative;
	top: 4px;
}
.list.chat-list .item-title-row {
	padding-right: 0;
	padding-bottom: 2px;
}
.list.chat-list .item-title-row:before {
	display: none;
}
.list.chat-list .item-title-row .item-after {
	font-size: 10px;
	margin-left: 0;
}
.list.chat-list .item-text {
	font-size: 12px;
	line-height: 1.5;
	position: relative;
	color: #555;
	padding-left: 17px;
}
.list.chat-list .item-text .smile {
	vertical-align: middle;
}
.list.chat-list .item-text:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	background-image: url(../../assets/img/icons/gray-tick.png);
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 13px;
	height: 13px;
}
.list.chat-list .item-text.read:before {
	background-image: url(../../assets/img/icons/green-tick.png);
	width: 13px;
	height: 13px;
}
.list.chat-list .item-text.missed-call:before {
	background-image: url(../../assets/img/icons/missed-call-icon.svg);
	width: 13px;
	height: 13px;
}
.list.chat-list .item-text.income-call:before {
	background-image: url(../../assets/img/icons/incoming-call-icon.svg);
	width: 13px;
	height: 13px;
}
.list.chat-list .item-text.status-text {
	padding-left: 0;
}
.list.chat-list .item-text.status-text:before {
	display: none;
}
.msg-notification {
	position: absolute;
	right: 17px;
	top: 32px;
	width: 26px;
	height: 26px;
	background-color:#00DCB7;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	color: #fff;
	font-size: 13px; 
	border-radius: 50px;
}
.media-list .item-media, li.media-item .item-media {
	position: relative;
	padding: 0;
}
.media-list .item-media .online,
.media-list .item-media .offline {
	position: absolute;
	right: -4px;
	bottom: 7px;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	box-shadow: 0px 3px 6px #00000029;
	background-color: #fff;
}
.media-list .item-media .online:before,
.media-list .item-media .offline:before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 9px;
	height: 9px;
	background-color: #00DCB7;
	border-radius: 50px;
	box-shadow: 0px 3px 6px #00000029;
}
.media-list .item-media .offline:before {
	background-color: #858585;
}
.fixed-chat-col {
	position: fixed;
	right: -7px;
	bottom: -15px;
}
.chat-list-col .list {
	margin-top: 0px;
}
.chat-list-col .list .item-content {
	background-color: transparent !important;
	padding:12px;
}
.chat-top-icon {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}
.chat-top-icon .back-icon {
	margin-right: 11px;
	margin-left: 15px;
}
.chat-top-icon .item-media img {
	border-radius: 50%;
}
.messages-content .messages {
	padding: 0px 15px 67px;
}
.messages-content .messages .message-text {
	font-size: 13px;
}
.messages-content .messages .message-text .smile {
	vertical-align: middle;
}
.messages-content .message-footer {
	font-size: 11px;
	color: #858585;
	margin: 10px 0 0 0 !important;
}
.messages-content .message-sent,
.messages-content .message-received {
	margin-top: 30px;
	display: inline-block;
	width: 100%;
}
.messages-content .message-footer img {
	max-width: 13px;
}
.messages-content .message-sent .message-footer {
	text-align: right;
	float: right;
	clear: both;
}
.call-icon {
	position: relative;
	top: 3px;
}
.today-col {
	position: relative;
	max-width: 95%;
	width: 100%;
	text-align: center;
	margin: 25px auto 0;
	display: inline-block;
	clear: both;
}
.today-col:after {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 100%;
	border-bottom: 1px solid #f2f2f2;
}
.today-col span {
	font-size: 13px;
	display: inline-block;
	padding: 5px 22px;
	background-color: #F2F2F2;
	border-radius: 30px;
	position: relative;
	z-index: 9;
}
.followers-add {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	box-sizing: border-box;
	color: #ccc !important;
	display: inline-block;
	font-size: 2px !important;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 24px;
}
.followers-add:hover {
	border: 1px solid #8c8c8c;
	color: #8c8c8c;
}
.followers-add > i {
	box-sizing: border-box;
	color: #ccc !important;
	font-size: 18px !important;
	line-height: 22px;
	margin: 0 !important;
}
.completed-task-msg {
	margin-bottom: 30px;
	margin-left: 30px;
}
.file-attached {
	color: #333;
	font-size: 12px;
}
.file-attached i {
	font-size: 12px;
}
.task-attach-img > img {
	border: 1px solid #eaeaea;
	max-width: 100%;
}
.attach-img-download {
	margin-bottom: 5px;
}
.task-chat-user {
	color: #333;
	font-size: 13px;
}
.task-time {
	color: #a3afb7;
	display: inline-block;
	font-size: 11px;
}
.task-success {
	color: #55ce63;
	font-size: 13px;
}
.task-success a {
	color: #55ce63;
}
.task-assign {
	float: left;
	margin-bottom: 10px;
	width: 100%;
}
.assign-title {
	float: left;
	margin-right: 10px;
	margin-top: 5px;
}
.task-assign > a {
	box-sizing: border-box;
	float: left;
}
.task-followers {
	display: flex;
}
.task-followers .avatar {
	height: 24px;
	line-height: 24px;
	margin-right: 5px;
	width: 24px;
}
.followers-title {
	margin: 2px 10px 0 0;
	font-weight:bold;
}
.task-information {
	color: #95a1a9;
	font-size: 11px;
	line-height: 17px;
	min-width: 1px;
}
.task-info-line {
	overflow-wrap: break-word;
}
.task-user {
	color: #666 !important;
	font-weight: bold;
}
.task-information .task-time {
	display: inline-block;
	padding-left: 10px;
}
.action-circle {
	background: transparent;
	border: 1px solid #ccc;
	border-radius: 100%;
	height: 20px;
	width: 20px;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.action-circle .material-icons {
	color: #ccc;
	font-size: 18px;
	vertical-align: -3px;
}
.action-circle.completed {
	background: #35BA67;
	border: 1px solid #2fa65c;
}
.action-circle.completed .material-icons {
	color: #fff;
}
.action-circle .material-icons {
	font-size: 16px;
	vertical-align: -4px;
}
.message-received .message-bubble {
	background: #F2F2F2;
	border: 1px solid transparent;
	color: #000;
	border-radius: 140px 0 140px 140px;
	padding: 13px 15px;
	-webkit-mask-box-image: none !important;
	line-height: 1.5;
	width: 75%;
}
.message-sent .message-bubble {
	background: #650681;
	color: #fff;
	border-radius: 140px 140px 140px 0px;
	padding: 10px 15px;
	-webkit-mask-box-image: none;
	line-height: 1.5;
	width: 75%;
	float: right;
}
.message-sent {
	width: 75%;
	float: right;
}
.toolbar a.link {
	color: #333;
}
.message-avatar {
	height: 29px;
	margin-right: 10px;
	width: 29px;
}
.messages {
	padding-bottom: 67px;
	margin-top: -30px;
}
.list.task-list {
	margin: 15px 0;
}
.list.files-list {
	margin: 15px 0;
}
.subnavbar.task-subnavbar {
	margin: 0;
	padding: 0;
}
.messagebar.toolbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border: 1px solid #650681;
	border-radius: 50px;
	padding: 0 20px;
}
.messages-content .toolbar.messagebar textarea { 
	font-size: 13px;
	border: 0;
	background-color: #fff;
	padding-left: 46px;
	padding-right: 125px;
	padding-top: 12px;
	padding-bottom: 10px;
	height: 45px;
	background-image: url(../../assets/img/icons/emoji.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	background-size:25px;
	width: 100%;
}
.messages-content .toolbar-inner .send-btn {
	position: absolute;
	right: 16px;
	top: 9px;
}
.media-list .item-title, 
li.media-item .item-title {
	font-size: 16px;
}
.media-buttons {
	position: absolute;
	right: 19px;
	top: 12px;
}
.media-buttons ul li {
	display: inline-block;
	padding-right: 10px;
	position: relative;
}
.media-buttons ul li:last-child {
	padding-right: 0;
}
.media-buttons ul li img {
	max-width: 25px;
}
.back-btn {
	margin-right: 10px;
	line-height: 0;
}
.back-btn img {
	max-width: 20px;
}
.call-action {
	display: flex;
	display: -webkit-flex;
}
.call-action a {
	display: inline-block;
	margin-right: 20px;
}
.call-action a:last-child {
	margin-right: 0;
}
.call-action a.popover-open {
	margin-right: 0;
}
.person-list li {
	padding: 15px;
	display: flex;
	display: -webkit-flex;
	cursor: pointer;
	border-radius: 20px;
	background-color: #fff;
	margin-bottom: 10px;
	border: 0;
	box-shadow: 0 3px 10px 0px rgba(123, 123, 123, 0.4);
	position: relative;
}
.person-list li > a,
.person-list li > div {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	width: 100%;
}
.person-list li .avatar {
	margin-right: 1rem;
    display: inline-block;
    margin-bottom: 0;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    position: relative;
}
.avatar-group.group-col > div {
	display: flex;
	display: -webkit-flex;
}
.person-list .avatar > a > img, .person-list .avatar > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.avatar-xs .border {
	border-width: 2px;
}
.group_header {
	width: 1.5rem;
	height: 1.5rem;
}
.avatar-group .avatar-xs + .avatar-xs {
	margin-left: -.40625rem;
}
.avatar .avatar-title {
	color: #650681;
	background: #FFA977;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-size: 9px;
	border-radius: 50px;
	border: 1px dashed
}
.avatar-group {
	margin-right: auto;
	margin-left: 0;
	padding-left: 0px
}
.person-list li .avatar-group .avatar {
	width: 21px;
	height: 21px;
	margin-right: 0;
}
.admin-group {
	background-color: #FFA977;
	color: #fff;
	font-size: 13px;
	display: inline-block;
	padding: 9px 15px;
	border-radius: 50px;
	min-width: 120px;
	text-align: center;
}
.media-list .item-link .item-inner,
li.media-item .item-link .item-inner {
	padding-top: 2px;
	padding-right: 0;
}
.missed-call-details img{
	max-width: 16px;
	position: relative;
	top: 12px;
}
.missed-call-details.not-top img {
	top: 0;
}
.chat-list-col.contact-list {
	margin-top: -30px;
}
.chat-list-col.contact-list .media-list .item-link .item-inner,
.chat-list-col.contact-list li.media-item .item-link .item-inner {
	padding-top: 0px;
	padding-right: 0;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	min-height: inherit;
	height: auto;
}
.chat-list-col.contact-list .list.chat-list .item-title-row {
	padding-bottom: 0;
	width: 100%;
}
.list.chat-list ul li.unread .item-title-row {
	color: #ffa977;
}
.list.chat-list ul li.unread .item-text:after {
	content: "";
	position: absolute;
	right: 0;
	top: 7px;
	background-color: #ffa977;
	width: 8px;
	height: 8px;
	border-radius: 50px;
}
.chat-list-col.contact-list .list.chat-list .missed-call-details img {
	top: 0;
}
.chat-list-col.contact-list .list.chat-list .missed-call-details + .missed-call-details {
	margin-left: 20px;
}
.custom-file-upload {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.chat-list-col.contact-list .item-checkbox {
	padding: 0;
	min-height: inherit;
	position: relative;
}
.chat-list-col.contact-list .item-checkbox .icon-checkbox {
	margin-right: 0;
}
.chat-list-col.contact-list label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox {
	background-color: #660881;
	border-color: #660881;
}
.chat-list-col.contact-list .bottom-submit {
	bottom: 15px;
}
.chat-list-col.contact-list .bottom-submit .right {
	padding-right: 15px;
}
.dialog-button {
	font-size: 14px;
}
.invite-link {
	display: inline-block;
	padding: 6px 15px;
	font-size: 13px;
	color: #fff;
	background-color: #63057f;
	border-radius: 50px;
}
.invite-link:hover {
	color: #fff;
}
.avatar-away::before, 
.avatar-offline::before, 
.avatar-online::before {
	content: "";
	position: absolute;
	display: block;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	top: -2px;
	left: -1px;
	border: 3px solid #fff;
}
.avatar-online::before {
    background-color: #34D859;
}
.avatar-away::before {
    background-color: #D1D2D5;
}
.avatar-offline::before {
    background-color: #ff0100;
}
.person-list li .person-list-body {
	flex: 1;
	position: relative;
	min-width: 0px;
	display: flex;
	display: -webkit-flex;
}
.person-list li .person-list-body > div:first-child {
	min-width: 0px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	flex: 1;
}
.person-list li .person-list-body h5 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: .2rem;
	color: #181C2F;
}
.person-list li.unread .person-list-body h5 {
	color: #ffa977;
}	
.person-list li .person-list-body p {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0;
    color: #181C2F;
    font-size: 13px;
}
.person-list li .person-list-body p:before {
	content: "";
	background-image: url(../../assets/img/icons/gray-tick.png);
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 13px;
	height: 13px;
	vertical-align: middle;
	margin-right: 6px;
}
.person-list li .person-list-body p.read:before {
	background-image: url(../../assets/img/icons/green-tick.png);
}
.person-list li .person-list-body p.missed-call:before {
	background-image: url(../../assets/img/icons/missed-call-icon.svg);
	width: 13px;
	height: 13px;
}
.person-list li .person-list-body p.income-call:before {
	background-image: url(../../assets/img/icons/incoming-call-icon.svg);
	width: 13px;
	height: 13px;
}
.person-list li .person-list-body p.no-read:before {
	background-image: none;
	width: 0px;
	margin: 0;
}
.person-list li .person-list-body .last-chat-time {
	padding-left: 10px;
    position: relative;
}
.person-list li.unread .person-list-body .last-chat-time:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	background-color: #ffa977;
	width: 8px;
	height: 8px;
	border-radius: 50px;
}
.media-col ul li + li {
	margin-top: 15px;
}
.checkbox-col {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 20px;
}
.checkbox-col input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #d0d0d0;
  border-radius: 50px;
}
.checkbox-col:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox-col input:checked ~ .checkmark {
  background-color: #670982;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-col input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-col .checkmark:after {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-----------------
	6. Status
-----------------------*/

.status-col {
	margin-top: -20px;
}
.top-profile.status-top-profile .profile {
	color: #242424;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.top-profile.status-top-profile .sub-title,
.top-profile.status-top-profile .sub-title i {
	color: #919191;
	font-size: 12px;
	display: inline-block;
} 
.top-profile.status-top-profile .main-title {
	width: 100%;
	display: inline-block;
	color: #333;
}
.top-profile.status-top-profile .profile .avatar {
	border: 2px dashed #FFA977;
	border-radius: 50px;
	padding: 4px;
	width: 60px;
	height: 60px;
	position: relative;
}
.top-profile.status-top-profile.without-circle .profile .avatar {
	border: 0;
}
.top-profile.status-top-profile .profile .avatar i {
	position: absolute;
	right: 0;
	bottom: -7px;
	color: #fff;
	background-color: #FFA977;
	font-size: 10px;
	border-radius: 50px;
	padding: 10px;
	border:2px solid #fff;
	width: 20px;
	height: 20px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.status-title h6 {
	color: #650681;
	font-size: 16px;
	padding-top: 20px;
	margin-bottom: 20px;
}
.view-status,
.view-status i {
	font-size: 14px;
}
.view-status i {
	margin-right: 6px;
}
.view-status a {
	color: #919191;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}
.status-slide .swiper-container {
	margin: 20px -15px 14px 0;
}
.status-slide .swiper-container img {
	width: 100%;
}
.profile-details {
	margin: 0 auto 0 0;
}
.status-view-popup .chat-list-col .chat-list {
	height: 100vh;
	overflow-y: auto;
	padding: 10px 15px;
}
.status-view-popup .block {
	background-color: #fff;
}
.status-view-popup .modal-content {
	border-radius: 10px;
}
.status-view-popup .modal-content .chat-list-col ul {
	padding: 0 15px;
}
.status-header {
	background-color: #680a83 !important;
	color: #fff;
	font-size: 14px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	padding: 20px 15px;
	border-radius: 8px 8px 0 0;
}
.status-header h4 {
	margin-bottom: 0;
	font-size: 16px;
}
.right-action {
	display: flex;
	display: -webkit-flex;
}
.right-action a {
	color: #fff;
	font-size: 16px;
	margin-right: 15px;
}
.right-action a:last-child {
	margin-right: 0;
}
.status-view-popup .chat-list-col {
	margin-top: 0;
	padding-top: 10px;
	overflow-y: auto;
	margin: 0 -15px;
	padding-bottom: 0;
}
.media-section li.swipeout + li.swipeout {
	margin-top: 15px
} 
/*-----------------
	7. Profile
-----------------------*/

.account-profile {
	background-image: url(../../assets/img/profile-bg.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: cover;
	min-height: 280px;
	display: inline-block;
	width: 100%;
	padding: 16px 0;
	position: relative;
}
.profile-picture {
	width: 170px;
	height: 170px;
	border-radius: 100px;
	margin: 0 auto;
}
.profile-picture img {
	border-radius: 100px;
}
.name-details {
	padding-top: 12px;
	padding-right: 60px;
}
.name-details.group-title {
	padding-top: 37px;
}
.name-details h4 {
	font-weight: 600;
	font-size: 22px;
	color: #fff;
	margin-bottom: 0;
}
.seen-details {
	font-size: 11px;
	color: #fff;
}
.profile-cam {
	position: absolute;
	right: 24px;
	bottom: 20px;
}
.profile-cam a {
	background-color: #FFA977;
	border: 2px solid #fff;
	border-radius: 100px;
	width: 45px;
	height: 45px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.profile-cam a.active-state {
	background-color: #FFA977 !important;
}
.profile-cam a img {
	max-width: 22px;
}
.title-col {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	padding-top: 15px;
	align-items: center;
	-webkit-align-items: center;
}
.toggle-btn + .drop-down-col {
	padding-top: 15px;
}
.title-col h6 {
	color: #650681;
	font-size: 16px;
	font-weight: 500;
}
.media-section {
	padding-bottom: 15px;
}
.media-details {
	font-weight: 500;
}
.media-details i {
	font-size: 12px;
	color: #0F07F8;
	margin-left: 5px;
}
.media-section .swiper-container {
	margin-right: -15px;
}
.media-section .swiper-container img {
	width: 100%;
}
.drop-down-col {
	padding: 10px 0;
}
.drop-down-col label {
	font-weight: 500;
}
.drop-down-col + .title-col {
	border-top: 1px solid #dbdbdb;
	margin-top: 12px;
}
.drop-down-col .item-title {
	font-size: 14px;
	color: #242424;
	font-weight: 500;
	position: relative;
}
.drop-down-col .smart-select {
	position: relative;
}
.drop-down-col .item-title i {
	position: absolute;
	right: 0;
	top: 2px;
	color: #0F07F8;
	font-size: 16px;
}
.sheet-modal .toolbar {
	font-size: 14px;
	background-color: #ffa977;
}
.sheet-modal .list li {
	font-size: 14px;
	padding-left: 15px;
	border-bottom: 1px solid #d9d9d9;
}
.sheet-modal .toolbar a.link {
	color: #fff;
}
.description-col input[type=text] {
	border-bottom: 1px solid #C3C3C3;
	width: 100%;
	padding-bottom: 5px;
	font-size: 13px;
}
.description-col {
	padding-bottom: 10px;
}
.add-more-btn {
	display: inline-block;
	border: 2px dashed #FFA977;
	color: #FFA977;
	font-size: 13px;
	padding:6px 15px;
	border-radius: 50px;
}
.add-more-btn:hover {
	color: #FFA977;
}
.save-btn {
	text-align: center;
	padding-top: 40px;
}
.gradient-btn {
	color: #fff;
	display: inline-block;
	font-weight: 600;		
	padding: 9px 20px;
	border-radius: 50px;
	background: rgba(100,6,129,1);
	background: -moz-linear-gradient(left, rgba(100,6,129,1) 0%, rgba(15,7,247,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(100,6,129,1)), color-stop(100%, rgba(15,7,247,1)));
	background: -webkit-linear-gradient(left, rgba(100,6,129,1) 0%, rgba(15,7,247,1) 100%);
	background: -o-linear-gradient(left, rgba(100,6,129,1) 0%, rgba(15,7,247,1) 100%);
	background: -ms-linear-gradient(left, rgba(100,6,129,1) 0%, rgba(15,7,247,1) 100%);
	background: linear-gradient(to right, rgba(100,6,129,1) 0%, rgba(15,7,247,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#640681', endColorstr='#0f07f7', GradientType=1 );
}
.drop-down-col input[type="text"]{
	width: 100%;
	font-size: 14px;
	border-bottom: 1px solid #C3C3C3;
}
.drop-down-col .item-input-wrap {
	position: relative;
	padding-top: 2px;
}
.drop-down-col .open-toast-button {
	position: absolute;
    right: 0;
    top: 2px;
    font-size: 13px;
    color: #0f07f8;
    font-weight: 500;
}
.drop-down-col.name-change {
	margin-bottom: 8px;
}
.toast-bottom .button,
.toast .toast-text {
	color: #fff;
	font-size: 13px;
}

/*-----------------
	8. Settings
-----------------------*/

.settings-col {
	margin-top: -15px;
	padding-bottom: 25px;
}
.pt-10 {
	padding-top: 10px;
}
.settings-details {
	padding-top: 25px;
}
.settings-details ul li {
	font-weight: 500;
	display: inline-block;
	width: 100%;
	padding-left: 12px;
}
.settings-details ul li a {
	color: #242424;
	border: 1px solid #c4c4c4;
	border-radius: 50px;
	padding: 13px 10px 13px 38px;
	display: inline-block;
	width: 100%;
	position: relative;
}
.settings-details ul li a span {
	background-color: #FFA977;
	width: 35px;
	height: 35px;
	position: absolute;
	left: -10px;
	top: 5px;
	border-radius: 50px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	color: #fff;
}
.settings-details ul li + li {
	margin-top: 15px;
}
.toggle-btn {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	padding: 15px 0 0;
}
.toggle-btn .item-title {
	color: #242424;
	font-weight: 500;
	display: block;
}
.toggle-btn .sub-text {
	font-size: 12px;
	color: #555;
}
.switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 22px;
	margin-left: 15px;
}
.switch input {
	display:none;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ca2222;
	-webkit-transition: .4s;
	transition: .4s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider {
  	background-color: #2ab934;
}
input:focus + .slider {
  	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  	-webkit-transform: translateX(18px);
  	-ms-transform: translateX(18px);
  	transform: translateX(18px);
}
.on {
  	display: none;
}
.on, .off {
  	color: white;
  	position: absolute;
  	transform: translate(-50%,-50%);
  	top: 50%;
  	left: 50%;
  	font-size: 10px;
}
input:checked+ .slider .on {
	display: block;
}
input:checked + .slider .off {
	display: none;
}
.slider.round {
  	border-radius: 34px;
}
.slider.round:before {
  	border-radius: 50%;
}
.photo-browser .navbar-photo-browser {
	padding: 28px 15px;
}
.photo-browser .navbar-photo-browser .navbar-inner {
	background-color: #650681;
}
.photo-browser .navbar-photo-browser .navbar-inner .popup-close {
	font-size: 14px;
}

/*-----------------
	9. Voice Call
-----------------------*/

.call-wrapper {
	bottom: 0;
	left: 0;
	overflow: auto;
	padding-bottom: inherit;
	padding-top: inherit;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.call-inner {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100vh;
}
.call-view {
	display: table-cell;
	height: 100%;
	float: none;
	padding: 0;
	position: static;
	vertical-align: top;
}
.call-window {
	display: table;
	height: 100%;
	table-layout: fixed;
	width: 100%;
	background-image: url(../../assets/img/login-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 9999;
	background-color: rgba(100,6,129,1);
	background-color: -moz-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(100,6,129,1)), color-stop(100%, rgba(15,7,248,1)));
	background-color: -webkit-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -o-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -ms-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#640681', endColorstr='#0f07f8', GradientType=1 );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
}
.call-userinfo {
	text-align: center;
	padding-top: 10px;
	display: inline-block;
	clear: both;
	width: 100%;
}
.call-contents {
	display: table-row;
	height: 100%;
}
.call-content-wrap {
	height: 100%;
	position: relative;
	width: 100%;
}
.voice-call-avatar {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
.voice-call-avatar .call-avatar {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	height: 70px;
	margin: 15px;
	padding: 4px;
	width: 70px;
}
.call-duration {
	color: #fff;
	display: block;
	font-size: 17px;
}
.voice-call-avatar .call-timing-count {
	padding: 5px;
}
.voice-call-avatar .username {
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
}
.call-icons {
	bottom: 0px;
	left: 0;
	padding: 15px;
	position: absolute;
	right: 0;
	text-align: center;
	z-index: 99;
	max-width: 250px;
	margin: 0 auto;
}
.call-icons .call-items {
	border-radius: 5px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.call-icons .call-items .call-item {
	display: inline-block;
	text-align: center;
	margin-right: 5px;
	width: 28%;
	padding: 7px 0;
}
.call-icons .call-items .call-item:last-child {
	margin-right: 0;
}
.call-icons .call-items .call-item a {
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	width: 50px;
}
.call-icons .call-items .call-item a i {
	width: 18px;
	height: 18px;
	font-size: 16px;
	line-height: 40px;
}
.call-icons .call-items .call-item.end_call {
	width: 60px;
	padding-top: 20px;
} 
.call-icons .call-items .call-item.end_call a {
	width: 60px;
	height: 60px;
}
.user-video {
	bottom: 0;
	left: 0;
	overflow: auto;
	position: absolute;
	right: 0;
	top: 0;
	z-index:10;
}
.user-video img {
	width: 100%;
	max-width: 100%;
	height: 100vh;
	max-height: 100%;
	display: block;
	margin: 0 auto;
	object-fit: cover;
}
.user-video video {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	display: block;
	margin: 0 auto;
}
.my-video {
	bottom: 150px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 99;
}
.my-video ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.my-video ul li {
	float: left;
	width: 90px;
}
.my-video ul li img {
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 6px;
}
.call-users {
	position: absolute; 
	z-index: 99;
	bottom: 70px;
	right: 20px;
}
.call-users ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.call-users ul li {
	float: left;
	width: 50px;
	margin-left: 10px;
}
.call-users ul li a {
	display: inline-block;
}
.call-users ul li img {
	border-radius: 6px;
	padding: 2px;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
}
.call-mute {
	background-color: rgba(0, 0, 0, 0.5);
	border: 3px solid transparent;
	border-radius: 6px;
	color: #fff;
	display: none;
	font-size: 20px;
	height: 50px;
	line-height: 50px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 50px;
}
.call-users ul li a:hover .call-mute {
	display: block;
}
.user-details {
	padding: 20px 15px;
	position: relative;
	z-index: 99;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.call-icons .call-items .call-item.end_call a {
	background-color: #f06060;
	color: #fff;
}
.call-icons .call-items .call-item.end_call a i {
	line-height: 17px;
	margin-top: 11px;
}
.user-img {
	float: left;
	margin-right: 5px;
}
.user-img img {
	border-radius: 50%;
	display: flex;
	height: 30px;
	width: 30px;
}
.call-username {
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
}
.chat-link {
	color: #fff;
	float: right;
	font-size: 22px;
	width: 100%;
	text-align: right;
}
.chat-link a {
	color: #fff;
}
.call-duratiton-avatar {
	position: absolute;
	left: 50%;
	top: 120px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.call-duratiton-avatar .call-avatar {
	width: 140px;
	height: 140px;
	border-radius: 100%;
	padding: 5px;
	background-color: #fff;
	margin-bottom: 15px;
}
.call-duratiton-avatar .username,
.call-duratiton-avatar .call-timing-count {
	font-size: 16px;
	text-align: center;
	color: #fff;
	width: 100%;
	display: block;
}
.call-icons.video-call .call-items {
	position: relative;
	z-index: 9;
	max-width: 200px;
	margin: 0 auto;
}
.call-icons.video-call .call-items .call-item.end_call {
	width: 50px;
}
.call-icons.video-call .call-items .call-item.end_call a {
	width: 50px;
	height: 50px;
}
.call-icons.video-call {
	max-width: 100%;
}
.call-icons.video-call:after {
	content: "";
	background: -moz-linear-gradient(top, rgba(0,0,0,0.985) 0%, rgba(0,0,0,0) 100%); 
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%); 
	background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 170px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/*-----------------
	10. Splash Screen
-----------------------*/

.splash-screen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-image: url(../../assets/img/login-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 9999;
	background-color: rgba(100,6,129,1);
	background-color: -moz-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(100,6,129,1)), color-stop(100%, rgba(15,7,248,1)));
	background-color: -webkit-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -o-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	background-color: -ms-linear-gradient(-45deg, rgba(100,6,129,1) 0%, rgba(15,7,248,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#640681', endColorstr='#0f07f8', GradientType=1 );
	transition: all .7s ease;
	-webkit-transition: all .7s ease;
	-ms-transition: all .7s ease;
}
.splash-screen.hide-screen {
	transition: all .7s ease;
	-webkit-transition: all .7s ease;
	-ms-transition: all .7s ease;
	opacity: 0;
	visibility: hidden;
}
.splash-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.splash-logo img {
	max-width: 160px;
}

@media only screen and (min-width: 768px) {
	.header {
		background-image: none;
		background-color: #650681;
		height: 120px;
	}
	.header-small {
		height: 80px;
	}
	.chat-list-col,
	.status-col,
	.chat-list-col.contact-list,
	.settings-col,
	.messages {
		padding-top: 25px;
		margin-top: 0;
	}
	.add-new-btn {
		bottom: -14px;
	}
}