.tips {
	float:right;
	color:#fff;
	background:#191a1bc7 ;
	border-radius:5px;
	padding:10px;
	font-size:20px;
}
.card {
	font-family:'Montserrat', sans-serif;
}
.avatar {
    height: 40px;
    width: 40px;
	margin-right:10px;
}
.list-group-item:hover, .list-group-item:focus {
    background: rgba(24,32,23,0.37);
    cursor: pointer;
}
.chatbox {
    height: 80vh !important;
    overflow-y: scroll;
}
.message-box {
    height: 76vh !important;
    overflow-y: scroll;display:flex; flex-direction:column-reverse;
}
.single-message {
    background: #f1f0f0;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    width: fit-content;
}
.received {
    margin-right: auto !important;
}
.sent {
    margin-left: auto !important;
    background :#191a1bc7;
    color: white!important;
}
.sent small {
    color: white !important;
}
.link:hover {
    list-style: none !important;
    text-decoration: none;
}
.online-icon {
    font-size: 11px !important;
}
#file-area {
    cursor: pointer;
}
#file-area > label > input {
    display: none !important;
}
body {
    background: url(/img/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
	position:relative;
	z-index:0;
}

#main-section {
	color:#fff;
}
.navbar-brand span:first-child {
	background: -webkit-linear-gradient(#F2A65A, #772F1A);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.navbar-brand span:last-child {
	background: -webkit-linear-gradient(#F5F7FA, #B8C6DB);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#jumbotron-section {
	text-align:center;
	color:#fff;
	padding:10% 0px 0px 0px;
}
#jumbotron-section h1 {
    background: #000;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
    background-color: #191a1bc7 !important;
    display: table;
    margin: 0 auto;
    padding: 30px 30px 40px 30px;
    border-radius: 10px;
	position:relative;
	border: 2px dashed #343434;
	color:#F5F7FA;
}
#jumbotron-section h1 span {
		background: -webkit-linear-gradient(#F5F7FA, #B8C6DB);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.action-btn {
	background-color: #191a1bc7;
    display: inline-block;
    margin:30px 20px;
    padding: 15px 20px;
    border-radius: 5px;
	position:relative;
	font-size:22px;
	color:#fff;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
    border: 2px dashed #343434;
	pisition:ralative;
}
.action-btn span {
			background: -webkit-linear-gradient(#F5F7FA, #B8C6DB);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.action-btn:hover  {
	text-decoration:none;
}
.action-btn:hover span {
	background: -webkit-linear-gradient(#F2A65A, #772F1A);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.action-btn.login, .action-btn.register {
	position:relative;
}
@media(min-width:900px) {
	.action-btn.login:after, .action-btn.register:after {
		width: 15px;
		height: 15px;
		display: block;
		position: absolute;
		bottom: 7px;
		left: 45%;
		top: -55px;
		background-color: #181e21;
		border: 4px solid #787878;
		border-radius: 50%;
		content: '';
	}
	.action-btn.login:before {
		content: '';
		position: absolute;
		top: -49px;
		left: 48.25%;
		transform: translateX(-50%);
		width: 3px;
		height: 100%;
		background: linear-gradient(to bottom, #F2A65A 30%, #772F1A 70%, #3c1e10 100%);
		border-radius:10px;
		box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
		z-index: 1;
	}
	.action-btn.register:before {
		content: '';
		position: absolute;
		top: -49px;
		left: 49%;
		transform: translateX(-50%);
		width: 3px;
		height: 100%;
		background: linear-gradient(to bottom, #F2A65A 30%, #772F1A 70%, #3c1e10 100%);
		border-radius:10px;
		box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
		z-index: 1;
	}
}
.login-btn {
		background: -webkit-linear-gradient(#F2A65A, #772F1A);
		color:#fff;
		border:0px;
		font-size:16px;
		padding:5px 10px;
		border-radius:5px;
}
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  display:table;
}

#customers td, #customers th {
  border: 1px solid #444;
  padding: 8px;
}
#customers tr {
	background:#fff;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #181e21;
  color: white;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.pagination > nav > span{

    margin: 0 15px;
}
@media(max-width:800px) {
	.chatbox {
		height:auto  !important;
	}
	.message-box {
		height: auto !important;
		min-height:50vh;
	}
	#jumbotron-section h1 {
		display:block;
	}
	.action-btn {
		margin:10px;
	}
}