#users { padding-top: 50px; }
#users .filters { position: fixed; top: 0px; height: 50px; z-index: 1; padding: 10px 10px 0px 10px; box-sizing: border-box; }
body.rtl #users .filters { left: 0px; }
#users .filters select { display: block; height: 30px; width: 100%; min-width: 80px; max-width: 120px; color: #dddddd; background: #222222; font-size: 14px; border: none; border-radius: 0px; box-sizing: border-box; padding: 0 4px; }

#userview .userchat #sayhello { background: #222222; margin-top: -20px; }
#userview .userchat #sayemoji { margin-top:  20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 0px; }
#userview .userchat #sayemoji .emoji { background: #222222; margin: 0px 5px 0px 5px; display: inline-block; vertical-align: middle; min-width: 28px; box-sizing: border-box; border-radius: 5px; font-size: 14px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; }
#userview .userchat #sayemoji .emoji:hover { opacity: 0.85; }

#userview .userinfo  { background: #202020; box-shadow: none; }
#userview .usertabs { position: absolute; top: 173px; left: 0px; right: 0px; height: 30px; font-size: 0px; z-index: 3; }
#userview .usertabs .tab { cursor: pointer; display: inline-block; box-sizing: border-box; width: 20%; font-size: 16px; text-align: center; background: #1a1a1a; height: 30px; line-height: 30px; }
body.rtl #userview .usertabs .tab { border-left: 2px solid #202020; }
body.ltr #userview .usertabs .tab { margin-right: 2px solid #202020; }
#userview .usertabs .tab:hover { background: #222222;  }
#userview [data-tab-content] { display: none; }
#userview[data-tab="main"] .usertabs .tab[data-tab-name="main"] { background: #333333;  }
#userview[data-tab="main"] [data-tab-content="main"] { display: block;  }
#userview[data-tab="chat"] .usertabs .tab[data-tab-name="chat"] { background: #333333;  }
#userview[data-tab="chat"] [data-tab-content="chat"] { display: block;  }
#userview[data-tab="properties"] .usertabs .tab[data-tab-name="properties"] { background: #333333;  }
#userview[data-tab="properties"] [data-tab-content="properties"] { display: block;  }
#userview[data-tab="preferences"] .usertabs .tab[data-tab-name="preferences"] { background: #333333;  }
#userview[data-tab="preferences"] [data-tab-content="preferences"] { display: block;  }
#userview[data-tab="images"] .usertabs .tab[data-tab-name="images"] { background: #333333;  }
#userview[data-tab="images"] [data-tab-content="images"] { display: block;  }
#userview .usercontent { flex-grow: 1; position: relative; }
#userview .usercontent .usercontentwrap { padding: 13px 10px 40px 10px; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
#userview .usercontent .property { margin-bottom: 20px; }
#userview .usercontent .property .name { margin-bottom: 5px; }
#userview .usercontent .property .value { color: rgba(255,255,255,0.5); }
#userview .usercontent .property .value-text { text-align: justify; }
#userview .usercontent .property .value select { display: block; height: 20px; width: 100%; min-width: 80px; max-width: 120px; color: #dddddd; background: #222222; font-size: 14px; border: none; border-radius: 0px; box-sizing: border-box; padding: 0 4px; } 
#userview .usercontent .property .value textarea { line-height: 20px; height: 104px; padding: 2px 4px 2px 4px; font-family: arial; font-size: 14px; resize: none; display: block;  width: 100%; max-width: 240px;  background: #222222; color: #dddddd; font-size: 16px; border: none; border-radius: 0px; box-sizing: border-box;  } 
#userview .usercontent .property .value input[type=checkbox] { position: relative; top: 1px; width: 12px; height: 12px; border: none; outline: none; background: #222222; } 
body.rtl #userview .usercontent .property .value-range { direction: ltr; text-align: right; }
#userview .usercontent .updatebutton { position: fixed; bottom: 10px;  }
body.rtl #userview .usercontent .updatebutton { left: 15px;  }  
body.ltr #userview .usercontent .updatebutton { right: 15px;  }  
#userview .usercontent .updatebutton button { color: #dddddd; background: #222222; font-size: 14px; min-width: 80px; height: 30px; line-height: 30px; border: none; padding: 0px 8px 0px 8px; box-sizing: border-box; cursor: pointer; text-align: center; }
#userview .usercontent .updatebutton button:hover { opacity: 0.85; }
#userview .usercontent .updateerror  { background: #dc2f3f; color: #dddddd; position: fixed; left: 15px; right: 15px; bottom: 10px; height: 30px; line-height: 30px; text-align: center; white-space: nowrap; overflow: hidden; }

#userview .usercontent .images { position: absolute; left: 5px; right: 5px; bottom: 2px; top: 5px;  }

#userview .usercontent .images .image { position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px;  display: none; overflow: hidden; }
#userview .usercontent .images .image img { display: block; object-fit: cover /* cover or contain */ ; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
#userview .usercontent .images .image:first-child { display: block; }

#userview .usercontent .images .image .no { font-size: 24px; color: rgba(255,255,255,0.5); position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); }
#userview .usercontent .images .image .remove { z-index: 9; display: none; position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; background: #222222; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20); color: #dddddd; font-size: 20px; text-align: center; line-height: 24px; cursor: pointer; }
#userview .usercontent .images .image.havevalue .remove { display: block; }
#userview .usercontent .images .image .remove:hover { background: #333333; } 

#userview .usercontent .images .image .upload-button {  z-index: 9; position: absolute; left: 50%; bottom: 13px; transform:translateX(-50%); }
#userview .usercontent .images .image .upload { margin: 0px auto 0px auto; width: 100px; height: 30px; position: relative; cursor: pointer;  }
#userview .usercontent .images .image .upload input { position: absolute; left:0px;top:0px;width:100%;height:100%;display:block; opacity:0.01; cursor: pointer; }
#userview .usercontent .images .image .upload button { white-space: nowrap; position: absolute; left:0px;top:0px;width:100%;height:100%;display:block; font-size: 15px; color: #dddddd; padding: 0px 12px 0px 12px; cursor: pointer; background: #222222; border: none; text-decoration: none; line-height: 30px; text-shadow: 1px 1px 1px rgb(0 0 0 / 0%); box-shadow: 0 0 0 0.5px rgba(50,50,93,.17), 0 2px 5px 0 rgba(50,50,93,.1), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08), 0 0 0 0 transparent!important; }
#userview .usercontent .images .image .upload:hover button { background: #333333;  }


#userview .usercontent .imagecover  { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; box-shadow: inset 0px -100px 50px -50px rgba(0,0,0,0.95); }
#userview .usercontent .imagenav  { position: absolute; top: 0px; bottom: 0px; width: 50%; cursor: pointer; }
#userview .usercontent .imagenav.imagenav-prev { left: 0px;  }
#userview .usercontent .imagenav.imagenav-next { right: 0px;  }
#userview .usercontent .imagenav  .icon { color: #cccccc; font-size: 16px; position: absolute; bottom: 20px;  }
#userview .usercontent .imagenav  .icon:hover { color: #777777; }
#userview .usercontent .imagenav.imagenav-prev .icon { left: 20px; }
#userview .usercontent .imagenav.imagenav-next .icon { right: 20px; }

#userview .userinfo .properties { position: absolute; top: 42px; height: 96px;  }
body.rtl #userview .userinfo .properties { left: 8px; right: 154px; }
body.ltr #userview .userinfo .properties { left: 154px; right: 8px; }

#userview .uservideo  { background: #1a1a1a; box-shadow: none; }
#userview .uservideo .screen1 { background: #1a1a1a; }
#userview .uservideo .screen1.min { bottom: auto; right: auto; left: 3%; top: 3%; }
#userview .uservideo .screen2 video  { background: #1a1a1a; }
#userview .videobuttons  { z-index: 4; }
body.rtl #userview #VideoRing { left: 17px; top: 170px; bottom: auto;  margin-left: 0px; }
body.ltr #userview #VideoRing { right: 17px; left: auto; top: 170px; bottom: auto;  margin-left: 0px; }
body.rtl #userview #VideoCall { left: 17px; top: 170px; bottom: auto; margin-left: 0px; }
body.ltr #userview #VideoCall { right: 17px; left: auto; top: 170px; bottom: auto;  margin-left: 0px; }
#userview #VideoCallEnd { display: none; }
body.rtl #userview #VideoCallEnd { left: 17px; right: auto; top: 170px; bottom: auto;  margin-right: 0px;  }
body.ltr #userview #VideoCallEnd { right: 17px; left: auto; top: 170px; bottom: auto;  margin-left: 0px;  }
#userview[data-mode=ring] #VideoCall { display: none; }
#userview[data-mode=ring] #VideoRing { display: block; }
#userview[data-mode=video] #VideoCall { display: none; }
#userview[data-mode=video] #VideoCallEnd { display: block; }

#userview .userinfo .image { top: 39px; }
body.rtl #userview .userinfo .image { right: 32px; }
body.ltr #userview .userinfo .image { left: 32px; }

#userview .userinfo .property { }
#userview .userinfo .property .label { color: #888888; display: inline-block; white-space: nowrap; vertical-align: middle; }
body.rtl #userview .userinfo .property .label { padding-left: 5px; }
body.ltrs #userview .userinfo .property .label { padding-right: 5px; }
#userview .userinfo .property .value { color: #ffffff; display: inline-block; white-space: nowrap; vertical-align: middle; }
#userview .userinfo .property .value.link { color: #4F87CF; cursor: pointer; }
#userview .userinfo .property .value.link:hover { color: #006FFF; }
#userview .userinfo .property.blink .value  { animation: blink-animation 1s steps(5, start) infinite; color: yellow; }
@keyframes blink-animation { to { visibility: hidden; } }
    
#userview .userchat .messages .out  	span { background: #292929; color: #E9EDEF; font-size: 14px; }
#userview .userchat .messages .in  	span { background: #eeeeee; color: #111B21; font-size: 14px; }
	
#zingglogin  { background: #333333; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; box-sizing: border-box;  }
#zingglogin .head { text-align: center; position: absolute; left:0px;right:0px;bottom:100%; margin-bottom: 20px; }
#zingglogin .head .image img { max-height: 120px; }
#zingglogin  .steps { position: absolute; left: 10px; right: 10px; top: 0px; bottom: 0px; }
#zingglogin  .step { transform:translate(-50%,-50%); border-radius: 8px; box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.40); background: #F8F8F8; display: none; width: 100%; max-width: 480px; position: absolute; left: 50%; top: 50%;  box-sizing: border-box; }
body.mobilekeyboard #zingglogin  .step { transform:translate(-50%,0%); }
#zingglogin  .step .body { padding: 20px 20px 80px 20px; min-height: 190px; }    
#zingglogin  .step .body .text { font-size: 16px; padding-bottom: 2px; }    
#zingglogin  .step .body .remarks {  font-size: 14px; padding-bottom: 16px; opacity: 0.65; }    
#zingglogin  .step .body .error { display: none; color: #dc2f3f; font-size: 16px; padding: 16px; }    
#zingglogin  .step .body .errorshow { display: block;  }    
#zingglogin  .step .body .input .range { border-collapse: collapse; }    
#zingglogin  .step .body .input .range td { padding: 0px; } 
#zingglogin  .step .body .input .range td.sep { padding: 0px 10px 0px 10px; font-size: 16px; } 
#zingglogin  .step .body .input .date { border-collapse: collapse; direction: ltr; }    
#zingglogin  .step .body .input .date td { padding: 0px; } 
body.rtl #zingglogin  .step .body .input .date td { direction: rtl; } 
#zingglogin  .step .body .input .date td.sep { padding: 0px 10px 0px 10px; font-size: 16px; } 
#zingglogin  .step .body .input textarea { line-height: 20px; height: 142px; padding: 10px 16px 10px 16px; font-family: arial; font-size: 16px; color: #333333;  resize: none; display: block;  width: 100%; min-width: 100%; max-width: 320px; color: #333333; font-size: 16px; border: 1px solid #dddfe2; border-radius: 8px; box-sizing: border-box;  } 
#zingglogin  .step .body .input input { display: block; height: 40px; width: 100%; min-width: 120px; max-width: 320px; color: #333333; font-size: 16px; border: 1px solid #dddfe2; border-radius: 8px; box-sizing: border-box; padding: 0 16px; } 
#zingglogin  .step .body .input input[name=name] { max-width: 220px; } 
#zingglogin  .step .body .input input[name=code] { direction: ltr; max-width: 120px; text-align: center; } 
#zingglogin  .step .body .input select { display: block; height: 40px; width: 100%; min-width: 80px; max-width: 120px; color: #333333; font-size: 16px; border: 1px solid #dddfe2; border-radius: 8px; box-sizing: border-box; padding: 0 16px; } 
#zingglogin  .step .body .input select[name=relationship] { max-width: 220px; } 
#zingglogin  .step .body .input select[name=purpose] { max-width: 220px; } 
#zingglogin  .step .body .input .hobbies  { font-size: 0px; } 
#zingglogin  .step .body .input .hobbies .hobby  { display: inline-block; white-space: nowrap; width: 33.33%; margin-bottom: 8px; } 
#zingglogin  .step .body .input .hobbies .hobby  input { display: inline-block; vertical-align: middle; height: 12px; width: 12px; min-width: 0px; padding: 0px; margin: 0px; } 
#zingglogin  .step .body .input .hobbies .hobby  label { display: inline-block; vertical-align: middle; font-size: 14px; margin: 0px; padding: 0px 5px 0px 5px; position: relative; top: -1px; } 
#zingglogin  .step .nav { font-size: 0px; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 80px; }    
#zingglogin  .step .nav .first { position: absolute; top: 0px; bottom: 0px; padding: 20px;  }    
body.rtl #zingglogin  .step .nav .first { right: 0px;}  
body.ltr #zingglogin  .step .nav .first { left: 0px;}  
#zingglogin  .step .nav .last { position: absolute; top: 0px; bottom: 0px; padding: 20px;  }    
body.rtl #zingglogin  .step .nav .last { left: 0px; text-align: left; }      
body.ltr #zingglogin  .step .nav .last { right: 0px; text-align: right; }      
#zingglogin  .step .nav button { background: transparent; color: rgba(0,0,0,0.5); border: none; text-decoration: none; cursor: pointer; font-size: 16px; border-radius: 8px; box-sizing: border-box; display: inline-block; text-align: center; height: 40px; line-height: 40px; padding: 0px 16px 0px 16px; }    
#zingglogin  .step .nav button:hover { color: rgba(0,0,0,0.95); }    
#zingglogin  .step .nav button.skip { margin: 0px 10px 0px 10px; }    
#zingglogin  .step .nav button.next { color: #FFFFFF; background: #1877F2; border: none; text-decoration: none; cursor: pointer; font-size: 16px; border-radius: 8px; box-sizing: border-box; display: inline-block; text-align: center; height: 40px; line-height: 40px; padding: 0px 16px 0px 16px; }    
#zingglogin  .step .nav button.next:hover { color: #FFFFFF; background: #166FE5; }    
#zingglogin .profilepreview { margin: 10px auto 20px auto; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20); display: block; width: 90px; height: 90px; background: white; border-radius: 50%; overflow: hidden; box-sizing: border-box; border: 3px solid rgba(255,255,255,0.5); }
#zingglogin .profilepreview img { object-fit: cover; display: block; width: 100%; height: 100%; }
#zingglogin .upload-wrap { padding-bottom: 20px; }
#zingglogin .upload { margin: 0px auto 0px auto; width: 100px; height: 30px; position: relative; cursor: pointer;  }
#zingglogin .upload input { position: absolute; left:0px;top:0px;width:100%;height:100%;display:block; opacity:0.01; cursor: pointer; }
#zingglogin .upload button { white-space: nowrap; position: absolute; left:0px;top:0px;width:100%;height:100%;display:block; font-size: 12px; color: #444444; padding: 0px 12px 0px 12px; cursor: pointer; background: white; border: none; text-decoration: none; line-height: 30px; text-shadow: 1px 1px 1px rgb(0 0 0 / 0%); box-shadow: 0 0 0 0.5px rgba(50,50,93,.17), 0 2px 5px 0 rgba(50,50,93,.1), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08), 0 0 0 0 transparent!important; }
#zingglogin .upload:hover button { background: #fafafa;  }
#zingglogin .userimages  { font-size: 0px; }
#zingglogin .userimage  {  display: inline-block; vertical-align: top;  margin-bottom: 15px; position: relative; }
body.rtl #zingglogin .userimage  {  margin-left: 15px; }
body.ltr #zingglogin .userimage  {  margin-right: 15px; }
#zingglogin .userimage .preview { margin: 0px auto 2px auto; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20); display: block; width: 85px; height: 85px; background: white; border-radius: 4px; overflow: hidden; box-sizing: border-box; border: 3px solid rgba(255,255,255,0.5); }
#zingglogin .userimage .preview img { object-fit: cover; display: block; width: 100%; height: 100%; }
#zingglogin .userimage .upload { width: 85px; }
#zingglogin .userimage .remove { display: none; position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; background: white; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20); color: black; border-radius: 50%; font-size: 20px; text-align: center; line-height: 24px; cursor: pointer; }
#zingglogin .userimage.haveimage .remove { display: block; }
#zingglogin .userimage .remove:hover { background: #dc2f3f; color: white; } 
    
#account { width: 0px; }    
#account.opened  { width: auto; }    
#account .back { display: none; }    
#account.opened .back { display: block; }    
#account .name { display: none; }    
#account .info { display: none; }    
#account .arrow { display: none; }  
#account .count { z-index: 9999999; }  
body.rtl #account .count { right: 32px; left:auto; }  
body.ltr #account .count { left: 32px; right:auto; }  
/* .ad-announcement { bottom: auto; top: 24px; }  */
#bottombar { position: fixed;  bottom: 0px; z-index: 3000; font-size: 0px; text-align: center; }
body.rtl #bottombar { left: 20px; }
body.ltr #bottombar { right: 20px; }
@media all and (max-width: 700px) { #bottombar { left: 20px; right: 20px; } }
#bottombar .items { background: #1a1a1a; box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 20%); border-radius: 5px 5px 0px 0px;  padding: 0px 5px 0px 5px; display: inline-block; position: relative; bottom: -15px; }
#bottombar .item { cursor: pointer; background: #222222; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 20%); position: relative; top: -25px; margin: 0px 5px 0px 5px; display: inline-block; vertical-align: middle; width: 48px; height: 48px; line-height: 48px; text-align: center; }
#bottombar .item i { font-size: 24px; line-height: 48px; }
#bottombar .item:hover { background: #333333; }