/** Fonts */
@font-face {
	font-family: 'OpenSans-Regular';
	src: url(OpenSans/OpenSans-Regular.eot?v=1.1.0);
	src: url(OpenSans/OpenSans-Regular.eot?#iefix&v=1.1.0) format("embedded-opentype"),
       url(OpenSans/OpenSans-Regular.woff2?v=1.1.0) format("woff2"),
       url(OpenSans/OpenSans-Regular.woff?v=1.1.0) format("woff"),
       url(OpenSans/OpenSans-Regular.ttf?v=1.1.0) format("truetype"),
       url(OpenSans/OpenSans-Regular.svg?v=1.1.0#Regular) format("svg");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSans-Bold';
	src: url(OpenSans/OpenSans-Bold.eot?v=1.1.0);
	src: url(OpenSans/OpenSans-Bold.eot?#iefix&v=1.1.0) format("embedded-opentype"),
       url(OpenSans/OpenSans-Bold.woff2?v=1.1.0) format("woff2"),
       url(OpenSans/OpenSans-Bold.woff?v=1.1.0) format("woff"),
       url(OpenSans/OpenSans-Bold.ttf?v=1.1.0) format("truetype"),
       url(OpenSans/OpenSans-Bold.svg?v=1.1.0#Bold) format("svg");
	font-weight: 600;
	font-style: normal;
}

/** Custom Scrollbar */
.scroll{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #121212;
    scrollbar-highlight-color: #121212;
    scrollbar-3dlight-color: #121212;
    scrollbar-darkshadow-color: #121212;
    scrollbar-track-color: #121212;
    scrollbar-arrow-color: #121212;
}
.scroll::-webkit-scrollbar {
    width: 8px;
}
 
/* Track */
.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    
    background: #333333;
}
 
/* Handle */
.scroll::-webkit-scrollbar-thumb {    
	background: #222222;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 10px;
}
.scroll .increment-button ,.scroll .decrement-button {
    -fx-background-color:transparent;
    /*-fx-border-color:derive(gray,80%);*/
    -fx-padding:10px;
}

/** Placeholder */
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder
{
	color: #d0cfcf !important;
}

/** Bootstrap */
html,
body{
	background: #070819;
	font-family: 'OpenSans-Regular';
}
.input-group-text{
    background: #212332;
    border: 1px solid #212332;
	border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;
}
.form-control, 
.form-control:focus{
    background: #212332;
    border: 1px solid #212332;
	border-bottom-left-radius: 50px;
	border-top-left-radius: 50px;
	color: #fff;
	font-size: 14px;
}
hr{
    border-bottom: 1px solid rgb(100, 100, 100);
    margin-top: .5rem;
    margin-bottom: .5rem;
}
button:focus{
	outline: 0px;
}

/** Custom */
.chat-box{
	background: #070819;
}
#txtName{
	border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;
}
#chat_history{
    margin-bottom: 108px !important;
	overflow: auto;
}
.media-body{
	background: #212332;
	border-radius: 6px 0px 6px 6px;
	padding: 10px;
	position: relative;
}
.media-body:after {
    content: "";   
    position: absolute;  
	top: 0px;	
    right: -18px;
    border-bottom: 18px solid transparent;
    border-left: 18px solid #212332;
}
.name{
    font-family: 'OpenSans-Bold';
    font-size: 12px;
    color: #ed6900;
    text-transform: capitalize;
}
.disconnected .name{
	color: #a4bf00;
}
.time_date{
	color: #fff;
    font-size: 10px;
    float: right;
}
.msg{
    font-size: 14px;
    color: #fff;
}
.icon-user{
    width: 40px;
    height: 40px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    background: #ed6900;
    margin-left: 1.5rem;
}
.disconnected .icon-user{
	background: #a4bf00;
	margin-right: 1.5rem;
    margin-left: 0;
}