/*

//    .oooooo..o   .oooooo.   ooooo     ooo ooooooooo.     .oooooo.   oooooooooooo 
//   d8P'    `Y8  d8P'  `Y8b  `888'     `8' `888   `Y88.  d8P'  `Y8b  `888'     `8 
//   Y88bo.      888      888  888       8   888   .d88' 888           888         
//    `"Y8888o.  888      888  888       8   888ooo88P'  888           888oooo8    
//       `"Y88b  888      888  888       8   888`88b.    888           888    "       __ __ __
//   oo     .d8P `88b    d88'  `88.    .8'   888  `88b.  `88b    ooo   888       o   /  (_ (_ 
//   8""88888P'   `Y8bood8P'     `YbodP'    o888o  o888o  `Y8bood8P'  o888ooooood8   \____)__)

*/

html,body { padding:0; margin:0;}
body { position:absolute; width:100%; height:100%; background-color:#333; color:#fff; font-family:sans-serif; -webkit-text-size-adjust:100%; padding:7px; box-sizing:border-box; }

.centerbox { display:flex; justify-content:center; }

.dev_btn { margin:7px; }

.dev_box_sphaeren { display:flex; flex-direction:column; }
	.dev_sphaere {  position:relative; display:flex; align-items:center; height:77px; background-color:#444; border-radius:7px; padding:7px; margin:7px 0; box-sizing:border-box; }
	.dev_sphaere.SELECTED { background-color:#544; }
		.dev_sphaere_item { margin:0 21px; }
		.dev_sphaere_name { width:150px; font-weight:bold; }
		.gui_devpanel_sync { display:flex; }
	.dev_sphaere_latency { position:absolute; top:45px; left:28px; font-size:12px; font-family:monospace; opacity:0.5; }

.dev_sphaere_dirbox { position:relative; font-family:monospace; margin-top:7px; }
	.dev_sphaere_dirlayer { margin:1px; }
		.dev_sphaere_dir { display:inline-block; position:relative; background-color:#555; border-radius:3px; padding:0px 3px; }

.icon { height:24px; width:24px; background-repeat:no-repeat; background-position:center center; cursor:pointer; }

.GUI_DISPLAY_OFF { display:none; }

.gui_switch { position:relative; top:3px; display:flex; flex-direction:column; align-items:center; margin:0 14px; }
	.switch_label { width:74px; margin-top:6px; user-select:none; text-align:center; font-size: 12px; }
		.SWITCH_OFF { background-image:url(/img/toggle-off.svg); }
		.SWITCH_ON { background-image:url(/img/toggle-on.svg); }

.gui_button { position:relative; top:3px; display:flex; flex-direction:column; align-items:center; margin:0 14px; }
	.gui_button .icon { background-image:url(/img/transfer-circle.svg); }
	.gui_button .icon.CONFIRM { background-image:url(/img/transfer-circle-confirm.svg); }
	.gui_button .icon.OK { background-image:url(/img/transfer-circle-ok.svg); pointer-events:none; }
	.gui_button .icon.install { background-image:url(/img/install.svg); }
	.GUI_DEACTIVATED { opacity:0.3; pointer-events:none; filter:blur(1px); }
	.GUI_ACTIVATED { opacity:1; pointer-events:auto; filter:none; }

.devbtn { display:none; margin:0 7px; }