/* ==========================================================
   MONSIS CHAT
========================================================== */


.mysp_monsis_chat{

	width:100%;

	height:100%;

	overflow-y:auto;

	padding:15px;

	box-sizing:border-box;

	background:#f5f5f5;

	border-radius:12px;

}


/* ==========================================================
   DATE
========================================================== */

.mysp_monsis_chat_date{

	text-align:center;

	margin:18px 0;

	font-size:13px;

	color:#666;

}


.mysp_monsis_chat_date span{

	background:#e5e5e5;

	padding:5px 12px;

	border-radius:20px;

}



/* ==========================================================
   ITEM
========================================================== */

.mysp_monsis_chat_item{

	max-width:75%;

	margin-bottom:12px;

	padding:10px 14px;

	border-radius:12px;

	position:relative;

	box-sizing:border-box;

	word-wrap:break-word;

	overflow-wrap:break-word;

}



/* ==========================================================
   PARENT LEFT
========================================================== */

.mysp_monsis_chat_item.left{

	margin-right:auto;

	background:#dcf8c6;

	border-top-left-radius:3px;

}



/* ==========================================================
   GURU RIGHT
========================================================== */

.mysp_monsis_chat_item.right{

	margin-left:auto;

	background:#ffffff;

	border-top-right-radius:3px;

}



/* ==========================================================
   SENDER
========================================================== */

.mysp_monsis_chat_sender{

	font-size:12px;

	font-weight:600;

	margin-bottom:5px;

	color:#555;

}



/* ==========================================================
   MESSAGE
========================================================== */

.mysp_monsis_chat_message{

	font-size:14px;

	line-height:1.5;

	color:#222;

	white-space:normal;

}



/* ==========================================================
   TIME
========================================================== */

.mysp_monsis_chat_time{

	text-align:right;

	font-size:11px;

	color:#777;

	margin-top:5px;

}



/* ==========================================================
   EMPTY
========================================================== */

.mysp_monsis_chat_empty{

	text-align:center;

	padding:30px;

	color:#777;

	font-size:14px;

}



/* ==========================================================
   CHAT MODAL
========================================================== */


.mysp_monsis_chat_modal{

	display:none;

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.5);

	z-index:999999;

	align-items:center;

	justify-content:center;

	padding:20px;

	box-sizing:border-box;

}



.mysp_monsis_chat_modal.show{

	display:flex;

}



/* ==========================================================
   CHAT BOX
========================================================== */

.mysp_monsis_chat_box{

	background:#fff;

	width:100%;

	max-width:600px;

	height:80vh;

	max-height:700px;

	border-radius:15px;

	position:relative;

	padding:20px;

	box-sizing:border-box;

	display:flex;

	flex-direction:column;

	overflow:hidden;

}



/* ==========================================================
   CHAT CONTENT
========================================================== */

.mysp_monsis_chat_content{

	flex:1;

	min-height:0;

	padding-top:20px;

	overflow:hidden;

}



/* ==========================================================
   CHAT CLOSE BUTTON
========================================================== */

.mysp_monsis_chat_close{

	position:absolute;

	top:10px;

	right:10px;

	z-index:10;


	width:32px;

	height:32px;


	background:#fff;

	color:red;


	border:1px solid #ddd;

	border-radius:50%;


	display:flex;

	align-items:center;

	justify-content:center;


	font-size:18px;

	font-weight:600;


	padding:0;

	margin:0;


	line-height:1;


	cursor:pointer;


	box-sizing:border-box;

}



.mysp_monsis_chat_close:hover{

	background:black;

	color:red;

	font-weight:bold;

}



/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:600px){


	.mysp_monsis_chat_box{

		height:90vh;

		padding:15px;

	}


	.mysp_monsis_chat_item{

		max-width:90%;

	}


}