@import url(jquery.mCustomScrollbar.min.css);
@import url(sweetalert2.min.css);
@import url(bootstrap.rtl.min.css?v=1.2);
:root {
	--primary-color:#2a3042;
	--secondary-color:#82181a;
}
*:focus{
	outline:none !important;
}
body{
	word-spacing: -1px;
	background: #181818;
	color: white;
}
.mCSB_inside>.mCSB_container{
	margin-right: 0 !important;
}
.warpper {
	@apply flex;
}
.main {
	width: 50%;
	margin: auto;
	flex: 0 0 auto;
	background-color: #141414;
	background-image:url('../images/chat-bg-pattern-dark.ad38368a9e8140d0ac7d.png');
	background-size: cover;
}

#header{
	background-color:#1e1e1e;
	display: flex;
	padding: 20px;
	align-items: center;
	border: 1px solid #232323;
	border-top: 0;
	height: 80px;
}
#header h2{
	font-size: 1.2em;
    font-weight: 600;
	margin-left: 10px;
	margin-bottom: 0;
}
.footer{
	background-color:#1e1e1e;
	display: flex;
	align-items: center;
	border: 1px solid #232323;
	border-bottom: 0;
	height: 80px;
	position: fixed;
	width: 50%;
	bottom: 0;
}
.footer__send{
	background-color: transparent;
	border: 0;
	color: white;
	padding: 20px;
}
.footer__text{
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 0;
	font-size: 16px;
	color: white;
	outline: none;
	padding: 10px;
}
.messenger{
	height: calc(100vh - 160px);
	overflow-x: hidden;
	overflow-y: auto;
	word-break: break-all;
	border-left: 1px solid #232323;
	border-right: 1px solid #232323;
	position:relative;
}
.message-container{
	padding: 20px; 
	display: flex;
    flex-direction: column;
	gap: 15px;
}
.message {
	padding: 8px 12px;
	border-radius: 14px;
}
.message .pm {
	word-break: break-all;
	white-space: pre-wrap;
}
.message .sender {
	font-size: 12px;
	color: #797979;
	display: flex;
	margin-bottom: 4px;
}
.message.self .sender {
	justify-content:end;
}
.message.other .sender {
	justify-content:start;
}
.message.self {
	background-color: #0c0c0c;
	align-self: end;
	border-top-right-radius: 0; 
}
.message.other {
	background-color: #272727;
	align-self: start;
	border-top-left-radius: 0; 
}

.login-container{
	display: flex;
	align-items: center;
	justify-items: center;
	flex-direction: column;
	width: 50%;
	margin: auto;
}
.login {
	height: calc(100vh);
	overflow-x: hidden;
	overflow-y: auto;
	word-break: break-all;  
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 50%;
}
.form-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	margin-bottom: 20px;
}
.invalid-feedback{
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
}
.form-group input {
	outline: none;
	background-color:#0c0c0c;
	padding: 16px;
	border-radius: 8px;
	border: 0;
	color: white;
}
.form-group label {
	margin-bottom: 9px;
}
.form-group label span{
	color: red;
}
.login__button {
	background-color: var(--secondary-color);
    border-radius: 8px;
    cursor: pointer;
    padding: 16px;
    transition-duration: 0.2s;
    transition-property: all;
    outline-style: none;
	border: 0;
	color: white;
	margin-top: 10px;
}
.login__button:hover{
	background-color: #a7191b;
}
.relogin{
	position: fixed;
	inset: 0;
	background-color: #000000c9;
	display: flex;
	align-items: center; 
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	font-size: 15px;
}
.notice{
	margin-top:10px;
	font-size:13px;
}
.loading-message{
	position:absolute;
	top:80px;
	left:0;
	right:0;
	display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.spinner-holder{
	background:#0c0c0c;
	border-radius:100px;
	display:flex;
	align-items:center;
	justify-content:center;
	height:40px;
	width:40px;
}
#newMsgBtn{
	position:fixed;
	right:45px;
	bottom:120px;
	background:#353535;
	color:white;
	z-index:10;
	border:0;
	border-radius:100px;
	height:40px;
	width:40px;
	display:none;
}
@media only screen and (max-width: 991px) {
	#header{
		height: 60px;
	}
	.main {
		width: 100%;
		flex: auto;
	}
	.footer{
		width: 100%;
	}
	.messenger{
		height: calc(100vh - 140px);
	}
	.login-container{
		width: 80%;
	}
	.login {
		width: 100%;
	}
	.message-container{
		padding-bottom:90px;
	}
}