@font-face {
	font-family: "Century gothic";
	src: url('GOTHIC.TTF');
}
@font-face {
	font-family: "Century gothic";
	font-style: italic;
	src: url('GOTHICI.TTF');
}
@font-face {
	font-family: "Century gothic";
	font-weight: bold;
	src: url('GOTHICB.TTF');
}
@font-face {
	font-family: "Century gothic";
	font-style: italic;
	font-weight: bold;
	src: url('GOTHICBI.TTF');
}

@keyframes blink { 0%{ background-color:#ff0000; } 50%{ background-color:#880000; } 100%{ background-color:#ff0000; } }

* { 	margin: 0px; padding: 0px; }
body { color: #ffffff; font-size: 14px; font-family: 'century gothic',verdana,arial,helvetica,sans-serif; text-align: left; background-color:#3c3c3c; min-width: 600px; }

a:link, a:visited, a:active	{ text-decoration: none; color: inherit; }
a:hover, a:focus  { text-decoration: none; }
img { border: 0px; }

input[type=text], input[type=number], input[type=password], input[type=color], input[type=date], select, option 
{
	background-color: #3c3c3c;
    border:solid 1px #aaaaaa;
    color: #ffffff;
    height: 20px;
}

input[disabled]
{
	opacity:0.3;
}

input[data-error="1"] 
{
    background-color: #b12626;
}

textarea
{
    background-color: #3c3c3c;
    border:solid 1px #aaaaaa;
    color: #ffffff;
	font-family: arial,verdana,helvetica,sans-serif; 
}

input[type=button], input[type=submit]
{
    cursor: pointer; border-radius: 6px; height: 20px; width:120px;
}

input:focus , select:focus, option:focus { outline:solid 0px #BD914B; border:solid 1px #BD914B;}
input[type=range]:focus { border:solid 0px; };

li
{
	list-style-type: none; background-color: #3c3c3c;
}

#login { border-radius: 20px; padding: 30px; background-image:url('../img/background.png'); border: 1px solid #ffffff; width: 560px; height: 130px; }

#haut_de_page
{
	border: 0px solid #000000; 
	
	background: -webkit-linear-gradient(#3f3f3f, #1d1818);
	background:    -moz-linear-gradient(#3f3f3f, #1d1818);
	background:     -ms-linear-gradient(#3f3f3f, #1d1818);
	background:      -o-linear-gradient(#3f3f3f, #1d1818);
	background:         linear-gradient(#3f3f3f, #1d1818);
	
	width: 100%; min-width: 400px; height: 50px; margin: 0px; padding: 0px;
}

#haut_de_page div.logo				{ float: left; width: 100px; height: 50px; text-align: left; border-right: solid 1px #ffffff; }
#haut_de_page div.label				{ float: left; height: 50px; margin-left: 10px; overflow: hidden; }
#haut_de_page div.bouton				{ cursor: pointer; float: right; width: 50px; height: 50px; }
#haut_de_page div.bouton	div.image	{ position:absolute; width: 50px; height: 50px; z-index: 1; }
#haut_de_page div.bouton	div.texte	{ position:absolute; width: 50px; height: 50px; z-index: 2; text-align: center; font-size: 10px; font-family: arial; line-height:50px; }
#haut_de_page div.bouton	div.texte p	{ display:inline-block; vertical-align:middle; line-height:normal; text-align: center; }

#bandeau_connexion
{
	border: 0px solid #000000; 
	width: 100%; min-width: 400px; height: 40px; margin: 0px;
	font-family: arial,verdana,helvetica,sans-serif; 
	text-align: right;
	color: #b7b7b7; 
	font-size: 14px; 
	text-align: center; 
	line-height:40px; 
	animation-duration: 1s; animation-iteration-count:infinite; /*alerte quand la config du pop a ete modifiee via le designer*/
}

div.group		{ position:relative; border: 1px solid #000000; left: 3px; right: 3px; width: auto; height: auto; /*background: rgba(72,72,72,0.4);*/ }
div.title			
{
	position: absolute; 
	border: 0px solid #000000; 
	background: -webkit-linear-gradient(#3f3f3f, #1d1818);
	background:    -moz-linear-gradient(#3f3f3f, #1d1818);
	background:     -ms-linear-gradient(#3f3f3f, #1d1818);
	background:      -o-linear-gradient(#3f3f3f, #1d1818);
	background:         linear-gradient(#3f3f3f, #1d1818);
	width: 100%; height: 30px; margin: 0px; padding: 0px; overflow: hidden; word-break: break-all;
}
div.content 	{ position: absolute; top:30px; bottom:40px; width:100%; border: 0px solid red; padding:0px; overflow:auto; }
div.footer 	{ position: absolute; bottom:0px; width: 100%; height: 40px; margin-top: 10px; background: #484848; }

#page_content 
{ 
	position: absolute; 
	border: 0px solid #000000; 
	background-color:#3c3c3c;
	width: 100%; min-width: 400px; margin: 0px;
	width:100%; height:auto;
	top:90px; bottom:0px;
	font-family: arial,verdana,helvetica,sans-serif; 
}

/*generique*/
#page_content #pop_panel  { position: absolute; left:0px; top:0px; right:0px; bottom:0px; border: 0px solid #00ff00; overflow:auto; }
#page_content #param_dyn	 { position: absolute; right:0px; bottom: 0px; z-index:2; background-color:transparent; display:none;  border: 1px solid #000000; height:100%; }

#param_tabs, #designer_tabs { overflow-x:hidden; overflow-y:auto; }

#div_userLogin { margin-left:10px; padding-left:18px; background-position: left; background-repeat: no-repeat; }
#div_userLogin[data-otherusers="0"] { background-image:url('../img/ico_mini_user.png'); }
#div_userLogin:not([data-otherusers="0"]) { background-image:url('../img/ico_mini_users.png'); }

#pop_panel .expanded_panel { display:none; }
#pop_panel[data-expandpanel="1"] .expanded_panel { display:block; }

#pop_panel .layerlist { display:none; overflow:hidden; text-overflow: ellipsis; width: 160px; height:11px; color:#787878; font-size:11px; }
#pop_panel[data-expandpanel="1"] .layerlist { display:block; }

div.panelgroup	{ position: relative; display: inline-block; vertical-align:top; background-color:#2f2f2f; border: 1px solid #787878; margin: 5px; clear: both; font-size:12px; padding: 3px 3px 3px 3px; }
div.panelgroup 	div.panelNbuttons	{ position: relative; display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	{ position: relative; margin: 5px; height: 150px; width: 150px; clear: both; text-align: center; line-height:150px; overflow: hidden; color: #000000; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.thumbnails 		{ position: absolute; bottom:0px; width: 150px; z-index: 1; background-color:transparent; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.thumbnails img 	{ float:left; /*background-color:rgba(0,0,0,0.3);*/ }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.thumbnails span.nbmedia { position: absolute; right:0px; bottom:0px; height: 18px; background-color:black; color:#ffffff; font-size:12px; line-height:18px; padding:2px; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.warningfps 		{ position: absolute; visibility:hidden; top:3px; right: 3px; z-index:10; background-color:transparent; height: 20px; width: 20px; background-image:url('../img/icon_mini_warning.png'); }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.warningfps[data-checkframerate="false"] 	{ visibility:visible; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.texte 			{ position: absolute; height: 150px; width: 150px; z-index: 5; }
div.panelgroup 	div.panelNbuttons 	div.panelbutton	div.texte span.label	{ margin:10px; width:130px; display:inline-block; vertical-align:middle; line-height:normal; /* on rétablit le line-height */ overflow: hidden; word-wrap:break-word; }

div.panelgroup 	div.panelNbuttons 	div.actions	div.line1					{ position: relative; width:100%; height:42px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.line1 div.cameraprod		{ float:left; height:35px; width:35px; margin-left:5px; font-size:12px; color:#ffffff; background-image:url('../img/menu_cameraptz.png'); background-repeat: no-repeat; background-size:35px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.line1 div.cameraprod.selectedParams	{ background-image:url('../img/menu_cameraptz_on.png'); }
div.panelgroup	div.panelNbuttons 	div.actions	div.line1 div.countdown		{ float:left; visibility:hidden; border-radius: 15px; background-color:transparent; height:24px; line-height:26px; width:60px; margin:5px; text-align:center; padding:0px; font-size:14px; font-weight:bold; color:#ffffff; 
																			  animation-duration: 1s; animation-iteration-count:infinite; border: 1px solid #565656; }
div.panelgroup	div.panelNbuttons 	div.actions	div.line1 div.infos					{ float:right; background-image:url('../img/btn_pop_infos.png'); height: 40px; width: 40px; background-size:contain; margin-right:5px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.line1 div.infos.selectedParams 	{ float:right; background-image:url('../img/btn_pop_infos_on.png'); height: 40px; width: 40px; }

div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	{ width:100%; }
div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	div.load		{ float:left; background-image:url('../img/btn_pop_load.png'); height: 20px; width: 20px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	div.play		{ float:left; margin-left:10px; background-image:url('../img/btn_pop_play.png'); height: 20px; width: 20px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	div.next		{ float:left; margin-left:10px; background-image:url('../img/btn_pop_next.png'); height: 20px; width: 20px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	div.stop		{ float:left; margin-left:10px; background-image:url('../img/btn_pop_stop.png'); height: 20px; width: 20px; }
div.panelgroup	div.panelNbuttons 	div.actions	div.expanded_panel	div.togglestatus		{ float:left; margin-left:15px; background-image:url('../img/btn_togglebutton.png'); height: 20px; width: 30px; }

div.panelgroup 	div.panelNbuttons 	div.panelbutton[data-state="LOADED"] + div.actions div.expanded_panel div.load { background-image:url('../img/btn_pop_load_on.png');  }
div.panelgroup 	div.panelNbuttons 	div.panelbutton[data-state="ON"] + div.actions div.expanded_panel div.play { background-image:url('../img/btn_pop_play_on.png');  }
div.panelgroup 	div.panelNbuttons 	div.panelbutton[data-state="OFF"] + div.actions div.expanded_panel div.stop { background-image:url('../img/btn_pop_stop_on.png');  }
div.panelgroup 	div.panelNbuttons 	div.panelbutton:not([data-state="OFF"]) + div.actions div.expanded_panel div.togglestatus { background-image:url('../img/btn_togglebutton_on.png');  }

div.feedbutton { font-size:16px; background-color:#3c3c3c; }
div.feedCamera { position: absolute; top:5px; width: 150px; z-index: 1; background-color:transparent; height:27px; line-height:normal; text-align:left; padding-left:35px; font-size:10px; background-image:url('../img/menu_cameraptz.png'); background-repeat: no-repeat; background-position: bottom 3px left 3px; background-size:30px; }
div.feedId { float:left; line-height:30px; margin:5px; font-size:28px; font-weight:bold; color:#787878; }
div.feedAdd { position: absolute; bottom:3px; right: 3px; z-index:20; cursor: pointer; background-color:transparent; height: 30px; width: 30px; background-image:url('../img/btn_add.png'); }
div.feedAdd.selectedParams { background-image:url('../img/btn_add_on.png'); }
div.feedEditlabel { position: absolute; bottom:3px; right: 36px; z-index:18; cursor: pointer; background-color:transparent; height: 30px; width: 30px; background-image:url('../img/btn_editlabel.png'); }
div.feedErase { position: absolute; bottom:3px; right: 3px; z-index:20; cursor: pointer; background-color:transparent; height: 30px; width: 30px; background-image:url('../img/btn_erase.png'); }
div.feedbutton[data-state="OFF"] div.feedEditlabel, div.feedbutton[data-state="OFF"] div.feedErase { display:block; }
div.feedbutton:not([data-state="OFF"]) div.feedEditlabel, div.feedbutton:not([data-state="OFF"]) div.feedErase { display:none; }
div.feedIcon	{ position: absolute; bottom:0px; width: 75px; height:42px; line-height:normal; z-index: 1; background-color:transparent; }
div.feedType 	{ display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word;
					width:75px; height:60px; background-color:#323232; border: 1px solid #787878; border-top-left-radius: 3px; margin: 2px; 
					font-size:10px; }

div.feedType img { height:40px; margin-top:3px; }

div#feedTabs { margin:30px 5px 20px 5px; width:auto; /*min-height:450px;*/ padding-bottom:10px; border: 1px solid #000000; background-color:#2f2f2f; }

div.feedMultiview { height:27px; width:48px; margin:10px; border: 1px solid #000000; background-color:#3c3c3c; }
div.feedMultiview[data-state="ON"] { background: -webkit-linear-gradient(#faefc7, #c2a161);
									 background:    -moz-linear-gradient(#faefc7, #c2a161);
									 background:     -ms-linear-gradient(#faefc7, #c2a161);
									 background:      -o-linear-gradient(#faefc7, #c2a161);
									 background:         linear-gradient(#faefc7, #c2a161);   }

div#feedMultiviewConfig { height:180px; width:320px; margin:10px 10px 0 10px; background-color:#000000; }
div.feedMultiviewConfigButtons { height:34px; margin-left:9px; margin-right:9px; background-color:#484848; }

div.multiview_transfo { float:left; border:1px solid #787878; box-sizing:border-box; text-align:center; overflow:hidden; }
div.multiview_transfo select { max-width:100%; font-family:arial; font-size:12px; }

div.groupTitle { width:auto; margin-left:4px; margin-right:4px; text-align:center; background-color:#787878; color:#2f2f2f; line-height:1.5em; font-weight:bold; }

div.libmedia 	{ display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word;
					width:110px; height:85px; background-color:#323232; border: 1px solid #787878; border-top-left-radius: 3px; margin: 2px; 
					font-size:10px; cursor: pointer; }
					
div.feedType.selected,
div.libmedia.selected { color:#000000;
						background: -webkit-linear-gradient(#faefc7, #c2a161);
						background:    -moz-linear-gradient(#faefc7, #c2a161);
						background:     -ms-linear-gradient(#faefc7, #c2a161);
						background:      -o-linear-gradient(#faefc7, #c2a161);
						background:         linear-gradient(#faefc7, #c2a161);  }

div.libmedia img { height:45px; margin-top:3px; }	

textarea.editablefile { width:calc(100% - 5px); height:calc(100% - 5px); font-family:verdana,arial; }

div.param_dyn_title			
{
	border: 0px solid #000000; 
	background: -webkit-linear-gradient(#3f3f3f, #1d1818);
	background:    -moz-linear-gradient(#3f3f3f, #1d1818);
	background:     -ms-linear-gradient(#3f3f3f, #1d1818);
	background:      -o-linear-gradient(#3f3f3f, #1d1818);
	background:         linear-gradient(#3f3f3f, #1d1818);
	width: 100%; height: 20px; padding: 0px; overflow: hidden; word-break: break-all;
	text-align: center; line-height:20px;
}
div.param_dyn_label
{
	display:inline-block;width:100px;
}

table.param_dyn_audioshuffling { width:100%; border-collapse: collapse; border: 1px solid #787878; }
table.param_dyn_audioshuffling td { text-align: center; border: 1px solid #787878; color:#ffffff; }
table.param_dyn_audioshuffling td[data-checked="false"] div { visibility:hidden; }
table.param_dyn_audioshuffling td.entete { background-color:#323232; }

input.param_dyn_checkbox { margin-top:10px; margin-bottom:10px; }
input.param_dyn_number,
input.param_dyn_volume_value { width:60px; margin-top:10px; margin-bottom:10px; }

div.param_dyn_text,
select.param_dyn_text,
textarea.param_dyn_text,
input.param_dyn_text,
input.param_dyn_range { width:calc(100% - 10px); margin-top:10px; margin-bottom:10px; word-break: break-all; }

select.param_dyn_presets { width:calc(100% - 30px); margin-top:10px; margin-bottom:10px; word-break: break-all; }

input.param_dyn_timecode { width:37px; }

div.huebar { background-image:url('../img/huebar.png'); background-size:calc(100% - 10px) 100%; background-repeat: no-repeat;}
div.colorhuepreview { width:20px; height:20px; margin-left:5px; vertical-align: middle;}

p.param_streamout,
p.param_ptz { height: 30px; line-height: 30px; text-align: left; padding-left:17px;
					background-image:url('../img/icon_collapsed.png'); background-position: left 50%; background-repeat: no-repeat; }
p.param_streamout[data-expanded="1"],
p.param_ptz[data-expanded="1"] { background-image:url('../img/icon_expanded.png'); }

p.param_ptz[data-expanded="0"] + div.div_group_content { display:none; }
p.param_ptz[data-expanded="1"] + div.div_group_content { display:block; }
div.paramdyn_camera_alert { text-align:center; color: #787878; font-weight:bold; }
div.paramdyn_camera_controllers:empty + div.paramdyn_camera_buttons { display:none; }
div.paramdyn_camera_buttons { margin-bottom:10px; margin-top:30px; text-align:center; }

div.param_ptz_status { display: inline-block; height:15px; width:15px; background-repeat:no-repeat; background-position:bottom left; }
div.param_ptz_status[data-connected="0"] { background-image:url('../img/icon_mini_disconnected.png'); }
div.param_ptz_status[data-connected="1"] { background-image:url('../img/icon_mini_connected.png'); }

div.param_transfo_preview,
div.param_template_preview { position: relative; margin-left:calc((100% - 200px)/2); width:200px; outline:solid 1px #acacac; background:#2f2f2f; overflow:hidden; }
div.param_transfo_preview_curvalue { position:absolute; background:#444444; z-index:1; }
div.param_transfo_preview_newvalue { position:absolute; background:rgba(0,200,0,0.5); z-index:2; }

div.preset_marker { height:52px; width:100px; text-align:center; background-color:#323232; border: 1px solid #242424; border-radius:5px; box-shadow: 0px 3px 3px #242424; overflow:hidden; }
div.preset_marker:active { color:#000000; 
							background: -webkit-linear-gradient(#faefc7, #c2a161);
							background:    -moz-linear-gradient(#faefc7, #c2a161);
							background:     -ms-linear-gradient(#faefc7, #c2a161);
							background:      -o-linear-gradient(#faefc7, #c2a161);
							background:         linear-gradient(#faefc7, #c2a161);  }
div.preset_marker div.num { color: #acacac; font-size:12px; line-height:18px; }
div.preset_marker div.name { font-size:14px; }

li.ui-state-default:not(.ui-tabs-active) img.loopmode { opacity:0.3; }
li.ui-state-default:not(.ui-tabs-active) img.mutemode { opacity:0.3; }

/*designer*/
#page_content #pop_designer 	{ position: absolute; left:0px; top:0px; right:0px; bottom:30px; border: 0px solid #00ff00; overflow:auto; text-align: center; }
#page_content #designer_edit	 { position: absolute; right:0px; bottom: 0px; z-index:2; background-color:transparent; display:none;  border: 1px solid #000000; height:100%; }
#frame_popDesigner { width: calc(100% - 10px); height: calc(100% - 20px);  }					

.selectedToAdd { color:#000000; 
				background: -webkit-linear-gradient(#faefc7, #c2a161);
				background:    -moz-linear-gradient(#faefc7, #c2a161);
				background:     -ms-linear-gradient(#faefc7, #c2a161);
				background:      -o-linear-gradient(#faefc7, #c2a161);
				background:         linear-gradient(#faefc7, #c2a161);  }

.newbutton_variables { width:100px; margin-top:10px; margin-bottom:10px; }
.newbutton_editablefile, .newbutton_dynamicItem, .newbutton_dynamicSetting {  margin-top:5px; margin-bottom:5px; }

div.template .collapse_icon { display: inline-block; width:15px; height:10px; background-position: left -3px; background-repeat: no-repeat; }
div.template[data-expanded="0"] .collapse_icon { background-image:url('../img/icon_collapsed.png'); }
div.template[data-expanded="1"] .collapse_icon { background-image:url('../img/icon_expanded.png'); }

/*admin*/
div.div_group { width:70%; min-width:400px; border: 1px solid #000000; overflow:auto; }
div.div_group_title 		{ position:relative; 
							border: 0px solid #000000; 
							background: -webkit-linear-gradient(#3f3f3f, #1d1818);
							background:    -moz-linear-gradient(#3f3f3f, #1d1818);
							background:     -ms-linear-gradient(#3f3f3f, #1d1818);
							background:      -o-linear-gradient(#3f3f3f, #1d1818);
							background:         linear-gradient(#3f3f3f, #1d1818);
							width: 100%; height: 30px; margin: 0px; padding: 0px; overflow: hidden; word-break: break-all; }
div.div_group_content 	{ position:relative; width: 100%; margin-top: 10px; overflow:auto; }
div.div_group_footer 	{ position:relative; width: 100%; height: 40px; line-height: 40px; margin-top: 10px; background: #484848; }
table.div_group_table  	{ width:100%; }
table.div_group_table 	thead		{ background: -webkit-linear-gradient(#3f3f3f, #1d1818);
										background:    -moz-linear-gradient(#3f3f3f, #1d1818);
										background:     -ms-linear-gradient(#3f3f3f, #1d1818);
										background:      -o-linear-gradient(#3f3f3f, #1d1818);
										background:         linear-gradient(#3f3f3f, #1d1818); }
table.div_group_table 	thead tr td 	{ padding:5px; }
table.div_group_table 	tbody tr td 	{ padding:5px; border-bottom: 1px solid #222222; }

table#table_panel_list div[data-status="OFF"] { display:none; }
table#table_panel_list div[data-status="PLAYING"] img:not([data-status="PLAYING"]) { display:none; }
table#table_panel_list div[data-status="LOADED"] img:not([data-status="LOADED"]) { display:none; }

div.div_user_line { padding:5px; border-bottom: 1px solid #222222; }

/*ptz*/
div#div_ptz_camera { display: inline-block; width:240px; height:400px; border: 1px solid #000000; overflow:hidden; vertical-align: top; }
div#div_ptz_settings { display: inline-block; min-width:300px; width:calc(100% - 270px); height:400px; border: 1px solid #000000; overflow:hidden; vertical-align: top; }
div#div_ptz_camera_list, 
div#div_ptz_camera_configure,
div#div_ptz_camera_new { width:100%; height:100% }
div#div_ptz_camera div.div_group_content,
div#div_ptz_settings div.div_group_content { height: calc(100% - 90px); overflow:auto; }

div#div_ptz_camera p.empty,
div#div_ptz_settings p.empty { font-size:16px; color: #787878; font-weight:bold; }
div#div_ptz_settings div.div_group_footer { display: inline-block; }
div#div_ptz_camera div.camera { text-align:left; border: 2px solid #787878; width:210px; margin-left:auto; margin-right:auto; margin-bottom:5px; background-repeat: no-repeat; background-position: bottom 7px left 7px; }
div#div_ptz_camera div.camera[data-connected="0"] { background-image:url('../img/icon_mini_disconnected.png'); }
div#div_ptz_camera div.camera[data-connected="1"] { background-image:url('../img/icon_mini_connected.png'); }
div#div_ptz_camera div.camera.cameraSelected { background-color:#484848; border: 2px solid #bd914b;  }
div.camera div.camera_labels { width:100%; overflow:hidden; padding-bottom:3px; }
div.camera div.camera_name { font-size:14px; margin:5px; font-weight:bold; }
div.camera div.camera_type { font-size:12px; margin:5px 0px 0px 30px; }
div.camera div.camera_host { font-size:12px; margin:0px 0px 0px 30px; color:#acacac; }
select#select_ptz_settings { max-width:100px; }
div.camera.disabled { opacity:0.5; }

div#btn_ptz_tally { width:30px; height:30px; vertical-align:middle; }
div#btn_ptz_tally[data-preview="0"][data-program="0"] { background-image:url('../img/btn_tally.png'); }
div#btn_ptz_tally[data-preview="1"][data-program="0"] { background-image:url('../img/btn_tally_preview.png'); }
div#btn_ptz_tally[data-preview="1"][data-program="1"] { background-image:url('../img/btn_tally_preview_program.png'); }
div#btn_ptz_tally[data-preview="0"][data-program="1"] { background-image:url('../img/btn_tally_program.png'); }

div.setting_joystick { position: relative; display: inline-block; width:160px; height:160px; margin:20px; vertical-align:top; }
div.joystick_cursor { z-index:10;
					 position: absolute; width:40px; height:40px; border-radius: 20px;
						background: -webkit-linear-gradient(#faefc7, #c2a161);
						background:    -moz-linear-gradient(#faefc7, #c2a161);
						background:     -ms-linear-gradient(#faefc7, #c2a161);
						background:      -o-linear-gradient(#faefc7, #c2a161);
						background:         linear-gradient(#faefc7, #c2a161); }
div.joystick_area { z-index:0; position: absolute; width:100%; height:100%; border-radius: 50%; border: 1px solid #787878; margin:0px;}
div.joystick_area_n { z-index:1; position: absolute; width:50px; height:22px; top:0px; left:55px; background-image:url('../img/arrown.png'); background-position: top 1px left 5px; background-repeat: no-repeat; }
div.joystick_area_s { z-index:2; position: absolute; width:50px; height:20px; bottom:0px; left:55px; background-image:url('../img/arrows.png'); background-position: bottom 1px left 5px; background-repeat: no-repeat; }
div.joystick_area_e { z-index:3; position: absolute; width:22px; height:50px; top:55px; right:0px; background-image:url('../img/arrowe.png'); background-position: top 5px right 1px; background-repeat: no-repeat; }
div.joystick_area_w { z-index:4; position: absolute; width:22px; height:50px; top:55px; left:0px; background-image:url('../img/arroww.png'); background-position: top 5px left 1px; background-repeat: no-repeat; }
div.joystick_area_center { z-index:5; position: absolute; top:24px; left:24px; width:110px; height:110px; border-radius: 50%; border: 1px solid #787878; background-color:#2f2f2f; }

div.setting_controller { position: relative; display: inline-block; vertical-align:top; width:80px; height:180px; margin:20px 5px; font-size:11px; }
div.controller_area { position: relative; width:40px; height:140px; border: 1px solid #787878; margin-left:auto; margin-right:auto; }
div.controller_symbols { position: relative; width:100%; height:20px; font-size:10px; line-height:20px; overflow:hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
div.controller_remote { position: relative; width:100%; height:100px; }
div.controller_remote_bg { position: absolute; z-index:0; width:2px; height:100%; left:19px; background:#ffffff;  }
div.controller_remote_cursor { position: absolute; z-index:1; width:30px; height:20px; left:5px; border-radius: 10px; 
								background: -webkit-linear-gradient(#faefc7, #c2a161);
								background:    -moz-linear-gradient(#faefc7, #c2a161);
								background:     -ms-linear-gradient(#faefc7, #c2a161);
								background:      -o-linear-gradient(#faefc7, #c2a161);
								background:         linear-gradient(#faefc7, #c2a161); }
select.controller_preset { width:100%; line-height: 20px; margin-top: 10px; font-size: 0.8em; }
select.controller_preset:empty { display: none; }

select.presetlist { width:calc(100% - 10px); line-height: 20px; margin-top: 3px; font-size: 0.8em; }

div.setting_switcher { position: relative; display: inline-block; vertical-align:top; width:90px; margin-top:10px; font-size:11px; }
div.switcher_area  { width:42px; height:24px; margin-left:auto; margin-right:auto; border-radius:12px; border: 1px solid #787878; }
div.switcher_cursor  { width:20px; height:20px; margin-left:auto; margin-right:auto; border-radius:10px; background-color:#787878; margin-top:2px; margin-left:2px; }
div.switcher_area[data-on="1"] div.switcher_cursor { margin-left:20px; 
													background: -webkit-linear-gradient(#faefc7, #c2a161);
													background:    -moz-linear-gradient(#faefc7, #c2a161);
													background:     -ms-linear-gradient(#faefc7, #c2a161);
													background:      -o-linear-gradient(#faefc7, #c2a161);
													background:         linear-gradient(#faefc7, #c2a161); }

#div_meters { padding:30px; box-sizing:border-box; text-align:center; }

p.height30		{ height: 30px; line-height: 30px; text-align: left; margin-left: 5px; }
p.height40		{ height: 40px; line-height: 40px; text-align: left; margin-left: 5px; }
.padding30		{ padding: 30px; }
.width33pct		{ width: 33.33333%; }
.width50pct		{ width: 50%; }
.width66pct		{ width: 66.66666%; }
.width100pct	{ width: 100%; }
.width70		{ width: 70px; }		
.width150		{ width: 150px; }
.height33pct	{ height: 33.33333%; }
.height50pct	{ height: 50%; }
.height66pct	{ height: 66.66666%; }
.height100pct	{ height: 100%; }
.reduced		{ font-size: 0.7em; }
.bold			{ font-weight: bold; }
.modified::after { content: "*"; }
.century		{ font-family: 'century gothic',verdana,arial,helvetica,sans-serif; }
.floatright 		{ float: right; text-align: right; }
.floatleft 		{ float: left; text-align: left; }
.marginright5	{ margin-right: 5px; }
.marginright10	{ margin-right: 10px; }
.marginright25	{ margin-right: 25px; }
.marginleft5	{ margin-left: 5px; }
.marginleft10	{ margin-left: 10px; }
.marginleft12	{ margin-left: 12px; }
.marginleft30	{ margin-left: 30px; }
.marginleft40	{ margin-left: 40px; }
.margintop1		{ margin-top: 1px; }
.margintop3		{ margin-top: 3px; }
.margintop5		{ margin-top: 5px; }
.margintop8		{ margin-top: 8px; }
.margintop10	{ margin-top: 10px; }
.margintop12	{ margin-top: 12px; }
.margintop30	{ margin-top: 30px; }
.marginbottom3	{ margin-bottom: 3px; }
.marginbottom5	{ margin-bottom: 5px; }
.marginbottom10	{ margin-bottom: 10px; }
.minheight400 	{ min-height: 400px; }
.fontsize24		{ font-size: 24px; }
.fontsize16		{ font-size: 16px; }
.fontsize13		{ font-size: 13px; }
.fontsize12		{ font-size: 12px; }
.fontsize10		{ font-size: 10px; }
.fontsize8		{ font-size: 8px; }
.maxheight18	{ max-height: 18px; } 
.maxheight30	{ max-height: 30px; }
.cliquable		{ cursor: pointer; }
.discret		{ color: #acacac; }
.success		{ color: #10a834; }
.warning		{ color: #e1932e; }
.error			{ color: #ff0000; }
.colorwhite		{ color: #ffffff; }
.clear			{ clear: both; }
.border			{ border: 1px solid #000000; }
.textleft 		{ text-align: left; }
.textcenter 		{ text-align: center; }
.overflow		{ white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;}
.normal, .controlbutton:hover, .controlbutton:focus { opacity: 1; filter:alpha(opacity=100); -khtml-opacity: 1; }
.transparent, .controlbutton { opacity: 0.4; filter:alpha(opacity=40); -khtml-opacity: 0.40; }
.visible 		{ visibility: normal; }
.invisible 		{ visibility: hidden; }
.hidden 			{ display: none; }
.block 			{ display: block; }
.inline			{ display: inline; }
.inlineblock	{ display: inline-block; }
.workbreak		{ word-break: break-all; }
.verticalalign 	{ vertical-align:middle; }
.verticatop	 	{ vertical-align:top; }

/*waiting animation*/
.lds-ellipsis[data-play="0"] { visibility: hidden; }
.lds-ellipsis[data-play="1"] { visibility: visible; }
.lds-ellipsis[data-play="0"] div { animation-play-state: paused; }
.lds-ellipsis[data-play="1"] div { animation-play-state: running; }

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 10px;
}
.lds-ellipsis div {
  position: absolute;
  top: 0px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
}
.lds-ellipsis div:nth-child(1) {
  left: 0px;
  animation-name: lds-ellipsis1;
}
.lds-ellipsis div:nth-child(2) {
  left: 0px;
  animation-name: lds-ellipsis2;
}
.lds-ellipsis div:nth-child(3) {
  left: 20px;
  animation-name: lds-ellipsis2;
}
.lds-ellipsis div:nth-child(4) {
  left: 40px;
  animation-name: lds-ellipsis3;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 0);
  }
}