*{
border:0;
padding:0;
margin:0;
}
html[dir="rtl"] *{
direction:rtl;
} 
a{
color: inherit;
text-decoration: none;
}
html,body{
height: 100%;
text-align: center;
cursor:default;
}
body{
background: url("../img/bg-vintage.png") repeat center center fixed;
background-attachment: fixed;
background-position: center;
/* background-size: 100% auto; */
background-color: rgba(0,0,0,1);
}
#wrapper ,.wrapper_center{
text-align: center;
max-width: 960px;
/* height: 100%; */
vertical-align: middle;
display: block;
margin: 0px auto;
min-width: 320px;
}
.wrapper_center{
display: table;
}
.wrapper_cell{
display: table-cell;
vertical-align: middle;
}
/* Orange style box */
.orn_box ,.orn_box_d,.orn_box_f,.orn_pan_fx,.orn_pan_fl,.orn_pan_one,.orn_pan_two{
/* background-color: red; */
display: block;
width: 320px;
height: 200px;
/* overflow: auto; */
position: relative;
float: left;
/* bottom: 0px; */
/* top: 0px; */
/* position: static; */
/* padding: 0px; */
}
/* Orange style box double */
.orn_box_d{
width: 640px;
}
/* Orange style box full */
.orn_box_f{
width: 960px;
}
/* Orange style panel fixed */
.orn_pan_fx{
width: 960px;
height: 50px;
}
/* Orange style panel fixed 1/3 */
.orn_pan_one{
width: 320px;
height: 50px;
}
/* Orange style panel fixed 2/3 */
.orn_pan_two{
width: 640px;
height: 50px;
}
/* Orange style panel float */
.orn_pan_fl{
width: 100%;
max-width: 960px;
min-width: 320px;
height: 50px;
}
/* Orange style colours borders backgrounds*/
.orn_s{
display: block;
/* height: auto; */
/* width: auto; */
box-shadow: 0 0 3px 2px black;
border: 2px solid white;
border-radius: 4px;
/* margin: 4px; */
background-color: rgb(255,125,0);
background-color: rgba(255,125,0,0.8);
color: black;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 14px;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
position: absolute;
overflow: auto;
}

/* .orn_s_after{
clear:both;
} */
/* Orange style title internal*/
.orn_tit_int{
background-color: white; 
border-bottom: 2px solid black;
border-radius: 0 0 4px 4px;
min-height: 22px;
font-weight: bold;
}
/* Orange style title buttom*/
.orn_tit_but{
/* background-color: white;
border-top: 2px solid black;
border-radius: 4px 4px 0 0;
min-height: 22px;
bottom: 0px;
position: absolute;
width: 100%; */
background-color: white;
border-top: 2px solid black;
border-radius: 4px 4px 0 0;
min-height: 22px;
bottom: 0px;
position: absolute;
width: 100%;
padding: 6px 0px
}
.orn_sub::after{
/* display: block; */
/* width: 100%; */
/* height: auto; */
/* position: relative; */
content: ":";
text-align: right;
margin: 0 2px;
float: right;
}
html[dir="rtl"]  .orn_sub::after{
float: left;
}
/* Orange style subject inside DIV*/
.orn_sub{
width: 98px;
text-align: right;
float: left;
font-weight: bold;
}
html[dir="rtl"] .orn_sub{
text-align: left;
float: right;
}
/* Orange style subject content inside DIV*/
.orn_sub_cnt{
word-wrap: break-word;
width: 192px;
/* display: block; */
min-height: 20px;
float: left;
text-align: justify;
/* background-color: yellowgreen; */
margin-top:1px;
margin-bottom:1px;
position:static;
}
html[dir="rtl"] .orn_sub_cnt{
float:right;
text-align:right;
}
/* Orange style button container*/
.orn_but{
width: 80px;
height: 50px;
float:left;
}

/* Orange style button 1/4*/
.orn_but_fur{
width: 64px;
position: relative;
min-height: 26px;
line-height: 26px;
float: left;
margin: 4px 8px;
padding: 2px;
}
/* Orange style button 1/4*/
html[dir="rtl"] .orn_but_fur{
float:left;
}

/* Orange style full overlay pop-up window*/
.ful_pop{
display: none;
height: 100%;
width: 100%;
top:0;
left:0;
bottom: 0;
right: 0;
position: fixed;
overflow:auto;
z-index: 1000;
text-align: center;
background-color: rgba(0,0,0,0.7);
}
/* Orange style internal message window*/
.pop_red{
display: block;
vertical-align: middle;
text-align: center;
/* max-height: 300px;
max-width: 200px; */
box-shadow: 0 0 3px 2px black;
border: 2px solid white;
border-radius: 4px;
margin: 0 auto;
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.7);
position:relative;
}
img{
max-width: 100%;
max-height: 100%;
}

/* Chat boxes */
span.chat_right,span.chat_left{
margin:1px;
border: 2px solid white;
margin-right: 10px;
line-height: 24px;
border-radius: 4px;
padding: 0 2px;
min-width: 24px;
max-width: 200px;
/* display: block; */
 float: right;
/* text-align: justify; */
background-color: #90B8F5;
text-align: center;
}
span.chat_left{
float:left;
margin-left:10px;
margin-right:0px;
background-color: rgb(218, 218, 67);
}
span.chat_time{
border-bottom: 2px solid white;
border-top: 2px solid white;
border-radius: 4px;
font-size: 12px;
float:right;
}
span.chat_left + span.chat_time{
float:left;
}
.inner-text{
width:100%;
float:left;
}
#conv_msg{
resize: none;
/* height: 42px;*/
width: 216px; 
float: left;
/* font-size: 14px; */
background-color: #90B8F5;
border: 2px solid white;
border-radius: 4px;
margin: 0px 4px;
}
html[dir="rtl"] #conv_msg{
float:right;
}
#con_msg::after,.chat_right::after {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid white;
content: "";
display: block;
float: right;
/* position: relative; */
/* line-height: 24px; */
margin: 4px -10px 4px 0;
}
.chat_left::before {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
content: "";
display: block;
float: left;
/* position: relative; */
/* line-height: 24px; */
margin: 4px 0 4px -10px;
}

.ove_a{
overflow: auto;
}
.bg_col_none{
background-color:initial  !important;
}
/* Show images boxes */
#user_images_show > img{
border: 1px solid black;
border-radius: 4px;
margin:0 2px;
}
/**/

.usr_avt_2_0{
background-image: url("../css/img/avatar_2_0.png");
}
.usr_avt_2_1{
background-image: url("../css/img/avatar_2_1.png");
}
.usr_avt_2_2{
background-image: url("../css/img/avatar_2_2.png");
}
.usr_avt_2_3{
background-image: url("../css/img/avatar_2_3.png");
}
.usr_avt_1_0{
background-image: url("../css/img/avatar_1_0.png");
}
.usr_avt_1_1{
background-image: url("../css/img/avatar_1_1.png");
}
.usr_avt_1_2{
background-image: url("../css/img/avatar_1_2.png");
}
.usr_avt_1_3{
background-image: url("../css/img/avatar_1_3.png");
}

img[class*="usr_avt"]{
background-position: center center;
background-size: contain;
min-height: 100px;
min-width: 100px;
background-repeat: no-repeat;
max-height: 230px;
background-color: rgb(255,125,0);
transition: all .2s;

}
img[class*="usr_avt"]:hover{
background-color: rgb(90,90,90);

}
.usr_avt_1{
background-image: url("../css/img/avatar_1.png");
}
.usr_avt_1:hover{
background-image: url("../css/img/avatar_10.png");
background-color:black;
}
.usr_avt_0{
background-image: url("../css/img/avatar_0.png");
}
.usr_avt_0:hover{
background-image: url("../css/img/avatar_00.png");
background-color:black;
}
.small_avatar{
box-shadow: 0 0 3px 2px black;
border: 2px solid white;
border-radius: 4px;
max-width:100px;
max-height:100px;
}

.ovr_flw_hid{
overflow: hidden;
}

.mrg_top_24{
margin-top: 24px;
}
/* custom for search name include margin top inside inner div */
.user_block_name, .user_block_msg{
box-shadow: 0 0 3px 2px black;
border: 2px solid white;
border-radius: 4px;
margin-top: -33px;
/* top: -30px; */
/* display: inline-flex; */
position: absolute;
background-color: rgb(255,125,0);
background-color: rgba(255,125,0,0.8);
width: 120px;
height: 20px;
display: block;
margin-top: -21px;
margin-left: 192px;
/* z-index: 10; */
font-weight: bold;
text-align: center;
}
.user_block_msg{
margin-left: 4px;
width:30px;
}
html[dir="rtl"]  .user_block_msg{
margin-right: 4px;
}
.user_block_name{
overflow: hidden;
text-overflow: ellipsis;
}
html[dir="rtl"]  .user_block_name{
margin-right: 192px;
}
.usr_msg{
/* background-attachment: fixed; */
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 20px;
display: block;
}
.msg_rec{
background-image: url("../css/img/msg_rec.png");
}
.msg_rec_opn{
background-image: url("../css/img/msg_rec_opn.png");
}
.msg_snd{
background-image: url("../css/img/msg_snd.png");
}
.msg_snd_opn{
background-image: url("../css/img/msg_snd_opn.png");
}
.navigate_block{
box-shadow: 0 0 3px 2px black;
box-shadow: 0 0 3px 2px black;
border: 2px solid white;
border-radius: 4px;
margin: 0px 6px;
background-color: rgb(255,125,0);
background-color: rgba(255,125,0,0.8);
line-height: 31px;
min-width: 30px;
width: 30px;
/* display: block; */
/* max-width: 60px; */
/* position: relative; */
padding: 2px 8px;
/* margin-left: 30px; */
font-size: 14px;
}

.elm_dis{
cursor:default;
background-color: rgb(245, 241, 222);
}
.elm_sel{
cursor:default;
background-color: rgb(255, 255, 0);
}
.marg_auto{
float:none;
/*margin: 0px auto; */
margin-left: auto;
margin-right: auto;
}
/* Selecting language */
#lang_select_call{
position: fixed;
height: 40px;
width: 40px;
top: 0px;
left: 0;
z-index: 50;
}
#lang_select img{
max-height:100px;
max-width:100px;
padding:10px;
transition:all 1s;
-webkit-transition:all 1s;
}
#lang_select img:hover{
max-height:120px;
max-width:120px;
padding:0;
}
/* END */
[data-css=wrong]{
background-color:rgb(255,0,0);
}

textarea{
resize: none;
}