@import url(fonts.css);

* {
	scroll-behavior: smooth;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}

/* variables

$baseColor : #e74c3c;
$fontColor : #fff;
*/
.rc_32_panel_top{
	border-radius: 0px 0px 16px 16px;
	padding: 4px;
}

.rc_32_panel{
	border-radius: 16px;
	padding: 4px;
}

.basic_panel_bg{
	background-color:#e0e0e0;
}
.big_av_circle{
	width: 128px;
	height: 128px;
	display: block;
    border-radius: 64px;
	cursor: pointer;
    text-align: center;
    margin: 15px; 
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 128px 128px;
	outline: white solid 5px;
}
.big_av_circle:hover{
	cursor: pointer;
    outline: white solid 5px;
}
.circle_lang_flag{
	width: 48px;
	height: 48px;
	display: block;
    border-radius: 24px;
	cursor: pointer;
    text-align: center;
    padding: 5px; 
    margin-top: 1px;
    margin-bottom: 1px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 48px 48px;
	outline: white solid 5px;
}
.circle_lang_flag:hover{
	outline: black solid 5px;
}
.circle_lang_flag_active{
	width: 48px;
	height: 48px;
	display: block;
	cursor: pointer;
    border-radius: 24px;
    text-align: center;
    padding: 5px; 
    margin-top: 1px;
    margin-bottom: 1px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 48px 48px;
	outline: orange solid 5px;
}
.circle_lang_flag_active:hover{
	outline: black solid 5px;
}
.cam_wrapper{
	background-color:#fff;
}
.camInsert{
    position: absolute; 
    top: 0; 
    left: 0;
    min-width: 100%;
	border-radius: 16px !important;
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    zbackground-size: cover;
    zoverflow: hidden;
}
.cam_contol{
	position: relative; 
	top: 20  !important; 
	left: 0;
	z-index: 100;
}
.cam_bottom_contol{
	position: absolute;
	min-width: 100%;
	bottom: 0  !important;
	left: 0;
	z-index: 100;
}
.q_orange_button{
	display: block;
	max-width: 200px;
	min-width: 120px;
	cursor: pointer;
	border-radius: 4px !important;
	background-color:#2c87ef;
	text-decoration: none;
	color: white;
	padding: 7px;
	text-align: center;
	font-size: 12px;
}
.q_orange_button:hover{
	background-color: orange;
}
.b_orange_button{
	display: block;
	max-width: 100%;
	min-width: 120px;
	cursor: pointer;
	border-radius: 4px !important;
	background-color:#2c87ef;
	color: white;
	text-decoration: none;
	padding: 7px;
	font-weight: none;
	text-align: center;
	text-shadow: none;
	font-size: 15px;
}
.b_orange_button:hover{
	background-color: orange;
}
.tfs{
	font-size: 25px;
	margin-left: 3px;
	margin-right: 3px;
	color: green;
}
.text_H1{
  display: inline-block;
  color: black;
  font: 16px "Montserrat", Arial, sans-serif;
  font-weight: bold;
  xx-moz-transform: translateY(0.25em);
  xx-ms-transform: translateY(0.25em);
  xx-webkit-transform: translateY(0.25em);
  xxtransform: translateY(0.25em);
}
.text_H2{
	color: black;
  font: 16px/1.4em "Montserrat", Arial, sans-serif;
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}
.lobby_badge{	
	border-radius: 8px;
	border: 2px solid #e0e0e0;
	background-color: yellow;
}
.gigant_code{
	color: black;
	font: 130px "Montserrat", Arial, sans-serif;
	font-weight: bold;
}
.chatus{
	display: block;
	width: 48px;
	height: 48px;
	z-index: 9998;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background-image: url('assets/chatus.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 48px 96px;
}

.chatus:hover{
	background-position: 0px -48px;
	cursor: pointer;
}


.cp_panel_button{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 48px;
	overflow: hidden;
	border-radius: 6px;
	background-color: #e0e0e0;
	background-repeat: no-repeat;
	background-position: 10px 5px;
	background-size: 32px 32px;
	padding-left: 50px;
	padding-right: 10px;
	padding-top: 15px;
	color: black;
	font-size: 12px;
	font-weight: bold;
}
.cp_panel_button:hover{
	background-color: orange;
}
.cp_panel_button#song_mgt{
	background-image: url('assets/048.png');
}
.cp_panel_button#perf_mgt{
	background-image: url('assets/zer-1.png');
}
.cp_panel_button#dist_mgt{
	background-image: url('assets/fan1.png');
}
.cp_panel_button#msgs_mgt{
	background-position: 10px 10px;
	background-image: url('assets/011.png');
}
.cp_panel_button#part_mgt{
	background-position: 10px 7px;
	background-image: url('assets/001.png');
}
.cp_panel_button#room_mgt{
	background-position: 10px 7px;
	background-image: url('assets/002.png');
}
.cp_panel_button#bckp_dbc{
	background-position: 10px 7px;
	background-image: url('assets/019.png');
}
.cp_panel_button#add_song{
	background-image: url('assets/49750.png');
}
.cp_panel_button#add_perf{
	padding-top: 8px;
	background-image: url('assets/zer-1.png');
}
.cp_panel_button#add_dist{
	background-image: url('assets/fan1.png');
}
.cp_panel_button#cp_messages{
	background-image: url('assets/49750.png');
}
.paginator_cc{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 48px;
	min-width: 48px;
	overflow: hidden;
	border-radius: 6px;
	background-color: #e0e0e0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 15px;
	color: black;
	font-size: 12px;
	font-weight: bold;
}
.paginator_aa{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 48px;
	min-width: 48px;
	overflow: hidden;
	border-radius: 6px;
	background-color: orange;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 15px;
	color: black;
	font-size: 12px;
	font-weight: bold;
}
.paginator_na{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 48px;
	width: 100%; /* The element tries to take up 100% of its parent's width */
	min-width: 48px;
	overflow: hidden;
	border-radius: 6px;
	background-color: #e0e0e0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 15px;
	color: black;
	font-size: 12px;
	font-weight: bold;
}
.mini_ed{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 16px;
	width: 100%; /* The element tries to take up 100% of its parent's width */
	min-width: 16px;
	overflow: hidden;
	border-radius: 3px;
	background-color: #e0e0e0;
	background-repeat: no-repeat;
	background-position: 1px 0px;
	background-size: 16px 16px;
}
.mini_ed#play{
	background-image: url('assets/035.png');
}
.mini_ed#edit{
	background-image: url('assets/024.png');
}
.mini_ed#delete{
	background-image: url('assets/020.png');
}
.mini_tag{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	height: 16px;
	width: 100%; /* The element tries to take up 100% of its parent's width */
	min-width: 16px;
	overflow: hidden;
	border-radius: 3px;
	background-color: #e0e0e0;
	color: black;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 16px 16px;
}
.mini_tag#sex_U{
	background-image: url('assets/043.png');
}
.mini_tag#sex_M{
	background-image: url('assets/032.png');
}
.mini_tag#sex_F{
	background-image: url('assets/033.png');
}
.line_even{
	background-color: #010d1b;
}
.line_odd{
	background-color: #011d30;
}
.page_panel{
	border-radius: 16px;
	border: 5px solid #e0e0e0;
	width: 80%;
	height: 300px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 100%;
	background-color:rgba(0, 0, 0, 0.5);
}
.page_panel#begin_new{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/bg05.webp');
}
.page_panel#join_room{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/bg08.jpg');
	background-size: 100% auto;
}
.page_panel#my_rooms{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/bg07.jpg');
	background-size: 100% auto;
}
.page_panel_w{
	font-size: 12px;
	font-weight: bold;
	padding: 10px;
	text-shadow:
    -2px -2px 0 #000, /* Top-left shadow */
    2px -2px 0 #000,  /* Top-right shadow */
    -2px 2px 0 #000,  /* Bottom-left shadow */
    2px 2px 0 #000;   /* Bottom-right shadow */
	color: white;
	border-radius: 8px;
	border: 3px solid #e0e0e0;
	width: 90%;
	background-color:rgba(255, 255, 255, 0.5);
}
.tag_container{
	color: white;
	border-radius: 5px;
	border: 2px solid #e0e0e0;
	padding: 10px;
	font-weight: none;
	text-shadow: none;
	width: 100%;
	height: 100px;
	background-color:rgba(0, 0, 0, 0.5);
}
.input_big{
	color: white;
	border-radius: 5px;
	text-align: center;
	border: 2px solid #e0e0e0;
	padding: 10px;
	font-size: 25px !important;
	font-weight: none;
	text-shadow: none;
	width: 100%;
	height: 35px;
	background-color:rgba(0, 0, 0, 0.5);
}
.panel_header{
	font-size: 20px;
	font-weight: bold;
	padding: 10px;
	text-shadow:
    -2px -2px 0 #000, /* Top-left shadow */
    2px -2px 0 #000,  /* Top-right shadow */
    -2px 2px 0 #000,  /* Bottom-left shadow */
    2px 2px 0 #000;   /* Bottom-right shadow */
	color: white;
}
.room_panel{
	display: inline-block;
	text-align: center;
	width: 128px;
	height: 128px;
	margin: 5px;
	overflow: hidden;
	border-radius: 8px;
	border: 2px solid #e0e0e0;
	background-repeat: no-repeat;
	background-color:rgba(0, 0, 0, 0.5);
	background-image: url('assets/k_r_bg.png');
	font-weight: bold;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
	color: white;
}
.room_panel#kr_bg_00{	background-position: 0px 0px; }
.room_panel#kr_bg_01{	background-position: -128px 0px; }
.room_panel#kr_bg_02{	background-position: -256px 0px; }
.room_panel#kr_bg_03{	background-position: -384px 0px; }
.room_panel#kr_bg_04{	background-position: 0px -128px; }
.room_panel#kr_bg_05{	background-position: -128px -128px; }
.room_panel#kr_bg_06{	background-position: -256px -128px; }
.room_panel#kr_bg_07{	background-position: -384px -128px; }
.room_panel#kr_bg_08{	background-position: 0px -256px; }
.room_panel#kr_bg_09{	background-position: -128px -256px; }
.room_panel#kr_bg_10{	background-position: -256px -256px; }
.room_panel#kr_bg_11{	background-position: -384px -256px; }
.room_panel#kr_bg_12{	background-position: 0px -384px; }
.room_panel#kr_bg_13{	background-position: -128px -384px; }
.room_panel#kr_bg_14{	background-position: -256px -384px; }
.room_panel#kr_bg_15{	background-position: -384px -384px; }
.room_table{
	padding: 0px;
	margin: 0px -1px;
	width: 110px;
	height: 120px;
}
.small_a{
	display: inline-block;
	text-decoration: none;
}
.small_a:hover{
	background-color: orange;
}
.small_a#micro_del{
	width: 16px;
	height: 16px;
	background-image: url('assets/020.png');
	background-size: 16px 16px;
	background-color: white;
	background-repeat: no-repeat;
}
.small_a#medium_cog{
	width: 16px;
	height: 16px;
	background-image: url('assets/025.png');
	background-size: 16px 16px;
	background-repeat: no-repeat;
}
.small_a#medium_add{
	width: 32px;
	height: 32px;
	background-image: url('assets/021.png');
	background-size: 32px 32px;
	background-repeat: no-repeat;
}
.lobby_button_lb{
	display: block;
	width: 100%;
	height: 100px;
	padding-top: 36px;
	text-align: center;
	text-decoration: none;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: white;
	border-radius: 8px;
	zborder: 2px solid #e0e0e0;
	background-position: 0px 0px;
	background-image: url('assets/lbab.png');
	background-size: 100px 100px;
	background-repeat: no-repeat;
	background-color: silver;
}
.lobby_button_lb:hover{
	background-color: white;
}
.lobby_button_rk{
	display: block;
	width: 100%;
	height: 100px;
	padding-top: 36px;
	text-align: center;
	text-decoration: none;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: white;
	border-radius: 8px;
	zborder: 2px solid #e0e0e0;
	background-position: right 0px;
	background-image: url('assets/og.png');
	background-size: 100px 100px;
	background-repeat: no-repeat;
	background-color: silver;
}
.lobby_button_rk:hover{
	background-color: white;
}
.lobby_button_cc{
	display: block;
	width: 200px;
	height: 100px;
	padding-top: 70px;
	text-align: center;
	text-decoration: none;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: white;
	border-radius: 8px;
	zborder: 2px solid #e0e0e0;
	background-position: center 10px;
	background-image: url('assets/025.png');
	background-size: 64px 64px;
	background-repeat: no-repeat;
	background-color: silver;
}
.lobby_button_cc:hover{
	background-color: white;
}
.lobby_button_rr{
	display: block;
	width: 200px;
	height: 100px;
	padding-top: 70px;
	text-align: center;
	text-decoration: none;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: white;
	border-radius: 8px;
	zborder: 2px solid #e0e0e0;
	background-position: center 10px;
	background-image: url('assets/026.png');
	background-size: 64px 64px;
	background-repeat: no-repeat;
	background-color: silver;
}
.lobby_button_rr:hover{
	background-color: white;
}
.MP_CODE_TBL{
	border-radius: 8px;
	border: 2px solid #e0e0e0;
	background-color:rgba(0, 0, 0, 0.3);
	padding: 10px;
}
.MP_ECODE_INP{
	text-align: center;
}
.MP_ECODE_INP_RL{
	text-align: center;
	direction: rtl;
}

.char_ph {
	width: 100px;
	height: 130px;
	position: relative; /* Essential for 'top' animation */
	margin-top: 50px;
}
.char_pic{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: 2px solid #e0e0e0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url('assets/4138771.png');
	background-color: white;
	background-size: 100px 100px;
}
.char_name{
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: white;
	background-color: orange;
}
.fant_red{
	position: absolute;
	top: 200px;
	right: 20px;
	z-index: 10000;
	width: 500px;
	zheight: 150px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-image: url('assets/fan_bg_r.png');
	background-size: 500px auto;
}
.func{
	width: 300px;
	zheight: 150px;	
	text-align: center;
	padding-top: 20px;
	margin-bottom: 20px;
	font: 20px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
	color: yellow;
}
.small_tag{
	border-radius: 6px;
	font-size: 10px;
	font-weight: bold;
	cursor: pointer;
	color: yellow;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	margin: 2px;
	background-color: blue;
}

.clear_shadow{
	text-shadow: none;
}

.profile_ed_button{
	display: inline-block;
	width:	32px;
	height:	32px;
	text-decoration: none;
	border-radius: 5px;
	border: 3px solid #000;
	background-repeat: no-repeat;	
}
.profile_ed_button:hover{
	border-color: #fff;
	background-color: orange;
}

.profile_ed_button#edname{
	background-position: 6px 5px;
	background-image: url('assets/024.png');
	background-size: 16px auto;
}
.profile_ed_button#sxU{
	background-position: 5px 5px;
	background-image: url('assets/044.png');
	background-size: 16px auto;
}
.profile_ed_button#sxF{
	background-position: 5px 5px;
	background-image: url('assets/033.png');
	background-size: 16px auto;
}
.profile_ed_button#sxM{
	background-position: 6px 5px;
	background-image: url('assets/032.png');
	background-size: 16px auto;
}
.sex_sel{
	border-color: #fff;
	background-color: orange;
}

.full .clr-field button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  cursor: pointer;
}
.buba{
	border: 0px;
	background-color: #e0e0e0;
	cursor: pointer;
	height: 32px;
}
.pe_input{
	text-align: center;
	color: black;
	border-radius: 5px;
	text-align: center;
	border: 3px solid black;
	padding: 10px;
	font: 16px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	text-shadow: none;
	height: 32px;
	background-color: #e0e0e0;
}

.av_thumb_container{
	display: block;
	width: 1024px;
	text-align: center;
	overflow-x: auto;/*clip;*/
	overflow-y: auto;
}
.av_thumb{
	display: inline-block;
	border-radius: 10px;
	cursor: pointer;
	padding: 10px;
	border: 3px solid black;
	background-size: cover;
	background-repeat: no-repeat;
}
.av_thumb:hover{
	border-color: orange;
}
.pp_ed_bbtn{
	display: inline-block;
	border-radius: 10px;
	cursor: pointer;
	border: 3px solid black;
	background-repeat: no-repeat;
	height: 48px;
	width: 100%;
}
.pp_ed_bbtn#back{
	background-position: 50% 50%;
	background-image: url('assets/lbab.png');
	background-size: 44px auto;
}
.pp_ed_bbtn#avatars{
	background-position: 50% 50%;
	background-image: url('assets/077.png');
	background-size: 32px auto;
}
.pp_ed_bbtn#camera{
	background-position: 50% 50%;
	background-image: url('assets/iris.png');
	background-size: 48px auto;
}
.pp_ed_bbtn#galery{
	background-position: 50% 50%;
	background-image: url('assets/pic_gals.png');
	background-size: 48px auto;
}
.flying_top_ph{
	position: fixed;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 5000;
}
.ftp_action{
	display: block;
	border-radius: 10px;
	cursor: pointer;
	border: 3px solid black;
	background-repeat: no-repeat;
	background-color: #e0e0e0;
	text-decoration: none;
	font: 16px "Montserrat", Arial, sans-serif;
	font-weight: bold;
	padding-top: 11px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
	height: 48px;
}
.cam-div{
	position: relative;
	left: 50%;
	width: 100%;
	top: -800px;
	transform: translate(-50%, 0%);
	z-index: 1;
}
.cam-overlay-div{
	position: relative;
	left: 50%;
	width: 100%;
	height: 800px;
	transform: translate(-50%, 0%);
	background-position: 50% 50%;
	background-image: url('assets/db.svg');
	background-size: cover;
	z-index: 2;
}