:root{    
    
    /* colors */

	--main-color:					rgba(255,255,255,1);
	--main-color-a098:				rgba(255,255,255,0.98);
	--main-color-a09:				rgba(255,255,255,0.9);
	--main-color-a08:				rgba(255,255,255,0.8);
	--main-color-a07:				rgba(255,255,255,0.75);
	--main-color-a06:				rgba(255,255,255,0.6);
	--main-color-a05:				rgba(255,255,255,0.5);

	--text-color:					rgba(0,0,0,1);

	--highlight-colorX:				rgba(160,160,160,1);

    --button-color:					rgba(255,255,255,1);
    --button-text-color:			#333;
    --button-text-highlight-color:	#FFF;

	--info-button-color:			rgba(0,118,222,1);

    /* sizes */

	--room-info-width-big:			500px;
	--room-info-height-big:			100vh;
	--room-info-height-small:		34px;

	--dash-board-height:			34px;

    /* misc */

	--border-radius-plane:			12px;
	--border-radius-button:			8px;
	
    /* icons */

    --icon-file-pdf:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M240 112L128 112C119.2 112 112 119.2 112 128L112 512C112 520.8 119.2 528 128 528L208 528L208 576L128 576C92.7 576 64 547.3 64 512L64 128C64 92.7 92.7 64 128 64L261.5 64C278.5 64 294.8 70.7 306.8 82.7L429.3 205.3C441.3 217.3 448 233.6 448 250.6L448 400.1L400 400.1L400 272.1L312 272.1C272.2 272.1 240 239.9 240 200.1L240 112.1zM380.1 224L288 131.9L288 200C288 213.3 298.7 224 312 224L380.1 224zM272 444L304 444C337.1 444 364 470.9 364 504C364 537.1 337.1 564 304 564L292 564L292 592C292 603 283 612 272 612C261 612 252 603 252 592L252 464C252 453 261 444 272 444zM304 524C315 524 324 515 324 504C324 493 315 484 304 484L292 484L292 524L304 524zM400 444L432 444C460.7 444 484 467.3 484 496L484 560C484 588.7 460.7 612 432 612L400 612C389 612 380 603 380 592L380 464C380 453 389 444 400 444zM432 572C438.6 572 444 566.6 444 560L444 496C444 489.4 438.6 484 432 484L420 484L420 572L432 572zM508 464C508 453 517 444 528 444L576 444C587 444 596 453 596 464C596 475 587 484 576 484L548 484L548 508L576 508C587 508 596 517 596 528C596 539 587 548 576 548L548 548L548 592C548 603 539 612 528 612C517 612 508 603 508 592L508 464z"/></svg>');
    --icon-file-doc:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M256 96L128 96C110.3 96 96 110.3 96 128L96 512C96 529.7 110.3 544 128 544L208 544L208 576L128 576C92.7 576 64 547.3 64 512L64 128C64 92.7 92.7 64 128 64L261.5 64C278.5 64 294.8 70.7 306.8 82.7L429.3 205.3C441.3 217.3 448 233.6 448 250.6L448 400.1L416 400.1L416 256.1L320 256.1C284.7 256.1 256 227.4 256 192.1L256 96.1zM402.7 224L288 109.3L288 192C288 209.7 302.3 224 320 224L402.7 224zM272 448L304 448C330.5 448 352 469.5 352 496L352 560C352 586.5 330.5 608 304 608L272 608C263.2 608 256 600.8 256 592L256 464C256 455.2 263.2 448 272 448zM288 576L304 576C312.8 576 320 568.8 320 560L320 496C320 487.2 312.8 480 304 480L288 480L288 576zM424 448L440 448C462.1 448 480 465.9 480 488L480 568C480 590.1 462.1 608 440 608L424 608C401.9 608 384 590.1 384 568L384 488C384 465.9 401.9 448 424 448zM416 488L416 568C416 572.4 419.6 576 424 576L440 576C444.4 576 448 572.4 448 568L448 488C448 483.6 444.4 480 440 480L424 480C419.6 480 416 483.6 416 488zM512 488C512 465.9 529.9 448 552 448L568 448C590.1 448 608 465.9 608 488L608 496C608 504.8 600.8 512 592 512C583.2 512 576 504.8 576 496L576 488C576 483.6 572.4 480 568 480L552 480C547.6 480 544 483.6 544 488L544 568C544 572.4 547.6 576 552 576L568 576C572.4 576 576 572.4 576 568L576 560C576 551.2 583.2 544 592 544C600.8 544 608 551.2 608 560L608 568C608 590.1 590.1 608 568 608L552 608C529.9 608 512 590.1 512 568L512 488z"/></svg>');

    --icon-info:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="white"  d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM208 352c-8.8 0-16 7.2-16 16s7.2 16 16 16l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0 0-112c0-8.8-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0 0 96-32 0zm48-168a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>');
    --icon-share:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M512 160C512 124.7 483.3 96 448 96C412.7 96 384 124.7 384 160C384 165.6 384.7 171 386 176.1C388.6 186.3 393.7 195.5 400.6 203C400.9 203.4 401.2 203.7 401.6 204C413.3 216.3 429.7 223.9 448 223.9C483.3 223.9 512 195.2 512 159.9zM357.5 192C354 182 352 171.2 352 160C352 107 395 64 448 64C501 64 544 107 544 160C544 213 501 256 448 256C417.7 256 390.6 241.9 373 220L250.5 288C254 298 256 308.8 256 320C256 331.2 254.1 342 250.5 352L373 420C390.6 398 417.6 384 448 384C501 384 544 427 544 480C544 533 501 576 448 576C395 576 352 533 352 480C352 468.8 353.9 458 357.5 448L235 380C217.4 402 190.4 416 160 416C107 416 64 373 64 320C64 267 107 224 160 224C190.3 224 217.4 238.1 235 260L357.5 192zM206.4 275.9C194.7 263.6 178.3 256 160 256C124.7 256 96 284.7 96 320C96 355.3 124.7 384 160 384C178.3 384 194.7 376.3 206.4 364.1C213.1 357.1 218.2 348.5 221.1 339.1C221.4 338.1 221.7 337.2 221.9 336.2C223.2 331.1 223.9 325.6 223.9 320.1C223.9 314.6 223.2 309.1 221.9 304C219.3 293.8 214.2 284.6 207.3 277.1C207 276.7 206.7 276.4 206.3 276.1zM448 544C483.3 544 512 515.3 512 480C512 444.7 483.3 416 448 416C429.7 416 413.3 423.6 401.6 435.9C401.3 436.2 400.9 436.6 400.6 436.9C393.7 444.4 388.7 453.6 386 463.8C384.7 468.9 384 474.3 384 479.9C384 515.2 412.7 543.9 448 543.9z"/></svg>');
	--icon-search:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%23222" d="M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z"/></svg>');
    --icon-help:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path fill="%23222" d="M80 160c0-35.3 28.7-64 64-64l32 0c35.3 0 64 28.7 64 64l0 3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74l0 1.4c0 17.7 14.3 32 32 32s32-14.3 32-32l0-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7l0-3.6c0-70.7-57.3-128-128-128l-32 0C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>');

    --icon-building:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L272 528L272 448C272 430.3 286.3 416 304 416L336 416C353.7 416 368 430.3 368 448L368 528L448 528C456.8 528 464 520.8 464 512L464 128C464 119.2 456.8 112 448 112L192 112zM128 128C128 92.7 156.7 64 192 64L448 64C483.3 64 512 92.7 512 128L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM224 176C224 167.2 231.2 160 240 160L272 160C280.8 160 288 167.2 288 176L288 208C288 216.8 280.8 224 272 224L240 224C231.2 224 224 216.8 224 208L224 176zM368 160L400 160C408.8 160 416 167.2 416 176L416 208C416 216.8 408.8 224 400 224L368 224C359.2 224 352 216.8 352 208L352 176C352 167.2 359.2 160 368 160zM224 304C224 295.2 231.2 288 240 288L272 288C280.8 288 288 295.2 288 304L288 336C288 344.8 280.8 352 272 352L240 352C231.2 352 224 344.8 224 336L224 304zM368 288L400 288C408.8 288 416 295.2 416 304L416 336C416 344.8 408.8 352 400 352L368 352C359.2 352 352 344.8 352 336L352 304C352 295.2 359.2 288 368 288z"/></svg>');
    --icon-seats:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M160 112C151.2 112 144 119.2 144 128L144 320L296 320L296 128C296 119.2 288.8 112 280 112L160 112zM496 320L496 128C496 119.2 488.8 112 480 112L360 112C351.2 112 344 119.2 344 128L344 320L496 320zM544 320L544 322.7C562.6 329.3 576 347.1 576 368L576 416C576 436.9 562.6 454.7 544 461.3L544 552C544 565.3 533.3 576 520 576C506.7 576 496 565.3 496 552L496 464L344 464L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552L296 464L144 464L144 552C144 565.3 133.3 576 120 576C106.7 576 96 565.3 96 552L96 461.3C77.4 454.7 64 436.9 64 416L64 368C64 347.1 77.4 329.3 96 322.7L96 128C96 92.7 124.7 64 160 64L280 64C295.1 64 309 69.3 320 78C331 69.2 344.9 64 360 64L480 64C515.3 64 544 92.7 544 128L544 320zM120 416L528 416L528 368L112 368L112 416L120 416z"/></svg>');

    --icon-map:						url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path fill="%23222" d="M408 120c0 8.6-1.8 18.3-5 28.6c-5.7 18.4-15.6 38.8-27.4 59.2l-.1 .2c-3.1 5.4-6.3 10.7-9.6 16c-4.4 7-8.9 14-13.5 20.8l-.4 .6c-18.1 26.9-36.7 51.1-49.2 66.6c-7.7 9.6-22 9.6-29.6 0c-12.4-15.5-31.1-39.7-49.2-66.6c-18.4-27.3-36.3-57.5-46.7-84.4c-.8-2.1-1.6-4.2-2.3-6.3c-4.4-12.6-7-24.4-7-34.6c0-4.7 .3-9.3 .8-13.8C175.6 46.4 226.4 0 288 0c66.3 0 120 53.7 120 120zM352 300.6c13.5-18.2 28.8-39.9 42.7-62.4c1.8-2.9 3.6-5.8 5.3-8.8l0 224.3 128-46.5 0-252.9L419.3 193.8c2.2-4.7 4.4-9.3 6.3-14c5.9-14 11-29.2 13.2-44.2l105-38.2c7.4-2.7 15.6-1.6 22 2.9s10.2 11.8 10.2 19.7l0 304c0 10.1-6.3 19.1-15.8 22.6l-176 64c-5.3 1.9-11.1 1.9-16.4 0L200 449.5l-167.8 61c-7.4 2.7-15.6 1.6-22-2.9S0 495.8 0 488L0 184c0-10.1 6.3-19.1 15.8-22.6L136 117.7c0 .8 0 1.5 0 2.3c0 15.1 3.7 30.7 8.9 45.6L48 200.8l0 252.9 128-46.5 0-177.7c1.8 3 3.5 5.9 5.3 8.8c13.9 22.5 29.1 44.2 42.7 62.4l0 106.6 128 46.5 0-153.1zM288 152a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>');

    --icon-spinner:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 180C291.3 180 268 156.7 268 128C268 99.3 291.3 76 320 76C348.7 76 372 99.3 372 128C372 156.7 348.7 180 320 180zM320 480C337.7 480 352 494.3 352 512C352 529.7 337.7 544 320 544C302.3 544 288 529.7 288 512C288 494.3 302.3 480 320 480zM512 352C494.3 352 480 337.7 480 320C480 302.3 494.3 288 512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352zM96 320C96 302.3 110.3 288 128 288C145.7 288 160 302.3 160 320C160 337.7 145.7 352 128 352C110.3 352 96 337.7 96 320zM495.4 223.8C473.5 245.7 438.1 245.7 416.2 223.8C394.3 201.9 394.3 166.5 416.2 144.6C438.1 122.7 473.5 122.7 495.4 144.6C517.3 166.5 517.3 201.9 495.4 223.8zM161.6 478.4C149.1 465.9 149.1 445.6 161.6 433.1C174.1 420.6 194.4 420.6 206.9 433.1C219.4 445.6 219.4 465.9 206.9 478.4C194.4 490.9 174.1 490.9 161.6 478.4zM433.1 478.4C420.6 465.9 420.6 445.6 433.1 433.1C445.6 420.6 465.9 420.6 478.4 433.1C490.9 445.6 490.9 465.9 478.4 478.4C465.9 490.9 445.6 490.9 433.1 478.4zM150.3 150.3C169.1 131.5 199.4 131.5 218.2 150.3C237 169.1 237 199.4 218.2 218.2C199.4 237 169.1 237 150.3 218.2C131.5 199.4 131.5 169.1 150.3 150.3z"/></svg>');
    --icon:							url('data:image/svg+xml;utf8, ');

	--icon-chevron-down:			url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 640"><path fill="%23222" d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/></svg>');
    --icon-chevron-left:			url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path fill="%23DDD" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>');
	--icon-chevron-right:			url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path fill="%23DDD" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');
	--icon-chevron-right-white:		url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path fill="%23FFF" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');
	--icon-chevron-right-black:		url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path fill="%23222" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');

    --icon-list:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em"   viewBox="0 0 512 512"><path fill="%23222" d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>');
    --icon-settings:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1em"   viewBox="0 0 512 512"><path fill="%23222" d="M223.3 37.8c.4-1.5 1.3-2.8 2.4-3.8c9.9-1.3 20-2 30.3-2s20.4 .7 30.3 2c1.1 1 1.9 2.3 2.4 3.8l13.7 47.7c3.5 12.1 12.2 21.1 22.5 26.1c7.6 3.6 14.8 7.8 21.7 12.5c9.4 6.5 21.7 9.5 33.9 6.5l48.2-12c1.5-.4 3-.3 4.4 .2c5.4 6.9 10.4 14.2 14.9 21.8l4.3 7.4c4.2 7.5 7.9 15.3 11.2 23.3c-.3 1.5-1 2.9-2.1 4L426.8 211c-8.7 9-12.2 21.1-11.3 32.5c.3 4.1 .5 8.3 .5 12.5s-.2 8.4-.5 12.5c-.9 11.4 2.6 23.5 11.3 32.5l34.5 35.7c1.1 1.1 1.8 2.5 2.1 4c-3.3 8-7 15.8-11.2 23.4l-4.2 7.3c-4.6 7.6-9.6 14.8-14.9 21.8c-1.4 .5-2.9 .5-4.4 .2l-48.2-12c-12.2-3-24.4 0-33.9 6.5c-6.9 4.7-14.1 8.9-21.7 12.5c-10.3 4.9-19.1 14-22.5 26.1l-13.7 47.7c-.4 1.5-1.3 2.8-2.4 3.8c-9.9 1.3-20 2-30.3 2s-20.4-.7-30.3-2c-1.1-1-1.9-2.3-2.4-3.8l-13.7-47.7c-3.5-12.1-12.2-21.1-22.5-26.1c-7.6-3.6-14.8-7.8-21.7-12.5c-9.4-6.5-21.7-9.5-33.9-6.5l-48.2 12c-1.5 .4-3 .3-4.4-.2c-5.4-7-10.4-14.2-15-21.8l-4.2-7.3c-4.2-7.5-7.9-15.3-11.2-23.4c.3-1.5 1-2.9 2.1-4L85.2 301c8.7-9 12.2-21.1 11.3-32.5c-.3-4.1-.5-8.3-.5-12.5s.2-8.4 .5-12.5c.9-11.4-2.6-23.5-11.3-32.5L50.7 175.2c-1.1-1.1-1.8-2.5-2.1-4c3.3-8 7-15.8 11.2-23.4l4.2-7.3c4.6-7.6 9.6-14.8 15-21.8c1.4-.5 2.9-.5 4.4-.2l48.2 12c12.2 3 24.4 0 33.9-6.5c6.9-4.7 14.1-8.9 21.7-12.5c10.3-4.9 19.1-14 22.5-26.1l13.7-47.7zM256 0c-13 0-25.9 1-38.4 2.9c-1.7 .3-3.4 .8-5 1.6c-9.5 4.9-16.9 13.6-20 24.5L178.9 76.7c-.6 2.2-2.5 4.5-5.6 6c-9.1 4.3-17.8 9.4-26 15c-2.8 1.9-5.8 2.4-8 1.8l-48.2-12C80.2 84.8 69 86.9 60 92.6c-1.5 .9-2.8 2.1-3.9 3.5C49 105 42.4 114.3 36.5 124.1l-.1 .3L32 132l-.1 .3c-5.4 9.8-10.2 19.9-14.3 30.4c-.6 1.6-1 3.3-1.1 5c-.5 10.8 3.3 21.6 11.2 29.8l34.5 35.7c1.6 1.7 2.7 4.4 2.4 7.8c-.4 5-.6 10-.6 15s.2 10.1 .6 15c.3 3.4-.8 6.2-2.4 7.8L27.7 314.6c-7.9 8.2-11.7 19-11.2 29.8c.1 1.7 .5 3.4 1.1 5c4.1 10.5 8.9 20.6 14.3 30.4l.1 .3 4.4 7.6 .1 .3c5.9 9.8 12.4 19.2 19.6 28.1c1.1 1.4 2.4 2.6 3.9 3.5c9 5.7 20.2 7.8 31.1 5.1l48.2-12c2.2-.6 5.2-.1 8 1.8c8.2 5.7 16.9 10.7 26 15c3.1 1.5 4.9 3.8 5.6 6L192.6 483c3.1 10.8 10.5 19.5 20 24.5c1.6 .8 3.2 1.4 5 1.6C230.1 511 243 512 256 512s25.9-1 38.4-2.9c1.7-.3 3.4-.8 5-1.6c9.5-4.9 16.9-13.6 20-24.5l13.7-47.7c.6-2.2 2.5-4.5 5.6-6c9.1-4.3 17.8-9.4 26-15c2.8-1.9 5.8-2.4 8-1.8l48.2 12c10.9 2.7 22.1 .7 31.1-5.1c1.5-.9 2.8-2.1 3.9-3.5c7.1-8.9 13.6-18.2 19.5-28l.1-.3L480 380l.1-.3c5.4-9.7 10.2-19.9 14.3-30.4c.6-1.6 1-3.3 1.1-5c.5-10.8-3.3-21.6-11.2-29.8l-34.5-35.7c-1.6-1.7-2.7-4.4-2.4-7.8c.4-5 .6-10 .6-15s-.2-10.1-.6-15c-.3-3.4 .8-6.2 2.4-7.8l34.5-35.7c7.9-8.2 11.7-19 11.2-29.8c-.1-1.7-.5-3.4-1.1-5c-4.1-10.5-8.9-20.6-14.3-30.4l-.1-.3-4.4-7.6-.1-.3c-5.9-9.8-12.4-19.2-19.5-28c-1.1-1.4-2.4-2.6-3.9-3.5c-9-5.7-20.2-7.8-31.1-5.1l-48.2 12c-2.2 .6-5.2 .1-8-1.8c-8.2-5.7-16.9-10.7-26-15c-3.1-1.5-4.9-3.8-5.6-6L319.4 29c-3.1-10.8-10.5-19.5-20-24.5c-1.6-.8-3.2-1.4-5-1.6C281.9 1 269 0 256 0zM200 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm144 0a88 88 0 1 0 -176 0 88 88 0 1 0 176 0z"/></svg>');

    --icon-checkbox:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 448 512"><path fill="%23222" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"/></svg>');
    --icon-checkbox-selected:		url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 448 512"><path fill="%23222" d="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');

	--icon-exit: 					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 320 512"><path fill="%23222" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>');
	--icon-fullscreen:				url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 448 512'><path fill='%23222' d='M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H48v100c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v24c0 6.6 5.4 12 12 12h100v100c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-24c-6.6 0-12 5.4-12 12v100H300c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-24c0-6.6-5.4-12-12-12H48V332c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z'/></svg>");
	--icon-fullscreen-shrink:		url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 448 512'><path fill='%23222' d='M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v100h100c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-24c-6.6 0-12 5.4-12 12v100H12c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h100v100c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12zm176 0V368h100c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12z'/></svg>");

    --icon-play:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 384 512"><path fill="%23222" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
    --icon-pause:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 320 512"><path fill="%23222" d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>');
    --icon-stop:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 384 512"><path fill="%23222" d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>');

    --icon-load:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 576 512"><path fill="%23222" d="M352 448c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 64c0-17.7 14.3-32 32-32l128 0 0 112c0 26.5 21.5 48 48 48l112 0 0 64 32 0 0-92.1c0-12.7-5.1-24.9-14.1-33.9L254.1 14.1c-9-9-21.2-14.1-33.9-14.1L64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-80-32 0 0 80zm-.5-288L240 160c-8.8 0-16-7.2-16-16l0-111.5c2.8 .7 5.4 2.1 7.4 4.2L347.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4zm123.8 52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L521.4 304 208 304c-8.8 0-16 7.2-16 16s7.2 16 16 16l313.4 0-68.7 68.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l96-96c6.2-6.2 6.2-16.4 0-22.6l-96-96z"/></svg>');
    --icon-save:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path fill="%23222" d="M480 448c0 17.7-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32l0-80-32 0 0 80c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-284.1c0-12.7-5.1-24.9-14.1-33.9L382.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 192 32 0 0-192c0-17.7 14.3-32 32-32l128 0 0 112c0 26.5 21.5 48 48 48l112 0 0 256zm-.5-288L368 160c-8.8 0-16-7.2-16-16l0-111.5c2.8 .7 5.4 2.1 7.4 4.2L475.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4zM283.3 212.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L329.4 304 16 304c-8.8 0-16 7.2-16 16s7.2 16 16 16l313.4 0-68.7 68.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l96-96c6.2-6.2 6.2-16.4 0-22.6l-96-96z"/></svg>');
    --icon-delete:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path fill="%23222" d="M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80l13.7 0L416 80l8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-11.6 0L388.4 452.7c-2.5 33.4-30.3 59.3-63.8 59.3l-201.1 0c-33.5 0-61.3-25.9-63.8-59.3L35.6 128 24 128c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48.1 0 13.7 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM83.7 128l23.8 321.2c.6 8.4 7.6 14.8 16 14.8l201.1 0c8.4 0 15.3-6.5 16-14.8L364.3 128 83.7 128zm62.2 81.9c7.8-7.8 20.5-7.8 28.3 0L224 259.7l49.9-49.9c7.8-7.8 20.5-7.8 28.3 0s7.8 20.5 0 28.3L252.3 288l49.9 49.9c7.8 7.8 7.8 20.5 0 28.3s-20.5 7.8-28.3 0L224 316.3l-49.9 49.9c-7.8 7.8-20.5 7.8-28.3 0s-7.8-20.5 0-28.3L195.7 288l-49.9-49.9c-7.8-7.8-7.8-20.5 0-28.3z"/></svg>');

    --icon-settings-dot:			url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.1em" viewBox="0 0 512 512"><path fill="%23222" d="M223.3 37.8c.4-1.5 1.3-2.8 2.4-3.8c9.9-1.3 20-2 30.3-2s20.4 .7 30.3 2c1.1 1 1.9 2.3 2.4 3.8l13.7 47.7c3.5 12.1 12.2 21.1 22.5 26.1c7.6 3.6 14.8 7.8 21.7 12.5c9.4 6.5 21.7 9.5 33.9 6.5l48.2-12c1.5-.4 3-.3 4.4 .2c5.4 6.9 10.4 14.2 14.9 21.8l4.3 7.4c4.2 7.5 7.9 15.3 11.2 23.3c-.3 1.5-1 2.9-2.1 4L426.8 211c-8.7 9-12.2 21.1-11.3 32.5c.3 4.1 .5 8.3 .5 12.5s-.2 8.4-.5 12.5c-.9 11.4 2.6 23.5 11.3 32.5l34.5 35.7c1.1 1.1 1.8 2.5 2.1 4c-3.3 8-7 15.8-11.2 23.4l-4.2 7.3c-4.6 7.6-9.6 14.8-14.9 21.8c-1.4 .5-2.9 .5-4.4 .2l-48.2-12c-12.2-3-24.4 0-33.9 6.5c-6.9 4.7-14.1 8.9-21.7 12.5c-10.3 4.9-19.1 14-22.5 26.1l-13.7 47.7c-.4 1.5-1.3 2.8-2.4 3.8c-9.9 1.3-20 2-30.3 2s-20.4-.7-30.3-2c-1.1-1-1.9-2.3-2.4-3.8l-13.7-47.7c-3.5-12.1-12.2-21.1-22.5-26.1c-7.6-3.6-14.8-7.8-21.7-12.5c-9.4-6.5-21.7-9.5-33.9-6.5l-48.2 12c-1.5 .4-3 .3-4.4-.2c-5.4-7-10.4-14.2-15-21.8l-4.2-7.3c-4.2-7.5-7.9-15.3-11.2-23.4c.3-1.5 1-2.9 2.1-4L85.2 301c8.7-9 12.2-21.1 11.3-32.5c-.3-4.1-.5-8.3-.5-12.5s.2-8.4 .5-12.5c.9-11.4-2.6-23.5-11.3-32.5L50.7 175.2c-1.1-1.1-1.8-2.5-2.1-4c3.3-8 7-15.8 11.2-23.4l4.2-7.3c4.6-7.6 9.6-14.8 15-21.8c1.4-.5 2.9-.5 4.4-.2l48.2 12c12.2 3 24.4 0 33.9-6.5c6.9-4.7 14.1-8.9 21.7-12.5c10.3-4.9 19.1-14 22.5-26.1l13.7-47.7zM256 0c-13 0-25.9 1-38.4 2.9c-1.7 .3-3.4 .8-5 1.6c-9.5 4.9-16.9 13.6-20 24.5L178.9 76.7c-.6 2.2-2.5 4.5-5.6 6c-9.1 4.3-17.8 9.4-26 15c-2.8 1.9-5.8 2.4-8 1.8l-48.2-12C80.2 84.8 69 86.9 60 92.6c-1.5 .9-2.8 2.1-3.9 3.5C49 105 42.4 114.3 36.5 124.1l-.1 .3L32 132l-.1 .3c-5.4 9.8-10.2 19.9-14.3 30.4c-.6 1.6-1 3.3-1.1 5c-.5 10.8 3.3 21.6 11.2 29.8l34.5 35.7c1.6 1.7 2.7 4.4 2.4 7.8c-.4 5-.6 10-.6 15s.2 10.1 .6 15c.3 3.4-.8 6.2-2.4 7.8L27.7 314.6c-7.9 8.2-11.7 19-11.2 29.8c.1 1.7 .5 3.4 1.1 5c4.1 10.5 8.9 20.6 14.3 30.4l.1 .3 4.4 7.6 .1 .3c5.9 9.8 12.4 19.2 19.6 28.1c1.1 1.4 2.4 2.6 3.9 3.5c9 5.7 20.2 7.8 31.1 5.1l48.2-12c2.2-.6 5.2-.1 8 1.8c8.2 5.7 16.9 10.7 26 15c3.1 1.5 4.9 3.8 5.6 6L192.6 483c3.1 10.8 10.5 19.5 20 24.5c1.6 .8 3.2 1.4 5 1.6C230.1 511 243 512 256 512s25.9-1 38.4-2.9c1.7-.3 3.4-.8 5-1.6c9.5-4.9 16.9-13.6 20-24.5l13.7-47.7c.6-2.2 2.5-4.5 5.6-6c9.1-4.3 17.8-9.4 26-15c2.8-1.9 5.8-2.4 8-1.8l48.2 12c10.9 2.7 22.1 .7 31.1-5.1c1.5-.9 2.8-2.1 3.9-3.5c7.1-8.9 13.6-18.2 19.5-28l.1-.3L480 380l.1-.3c5.4-9.7 10.2-19.9 14.3-30.4c.6-1.6 1-3.3 1.1-5c.5-10.8-3.3-21.6-11.2-29.8l-34.5-35.7c-1.6-1.7-2.7-4.4-2.4-7.8c.4-5 .6-10 .6-15s-.2-10.1-.6-15c-.3-3.4 .8-6.2 2.4-7.8l34.5-35.7c7.9-8.2 11.7-19 11.2-29.8c-.1-1.7-.5-3.4-1.1-5c-4.1-10.5-8.9-20.6-14.3-30.4l-.1-.3-4.4-7.6-.1-.3c-5.9-9.8-12.4-19.2-19.5-28c-1.1-1.4-2.4-2.6-3.9-3.5c-9-5.7-20.2-7.8-31.1-5.1l-48.2 12c-2.2 .6-5.2 .1-8-1.8c-8.2-5.7-16.9-10.7-26-15c-3.1-1.5-4.9-3.8-5.6-6L319.4 29c-3.1-10.8-10.5-19.5-20-24.5c-1.6-.8-3.2-1.4-5-1.6C281.9 1 269 0 256 0zM200 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm144 0a88 88 0 1 0 -176 0 88 88 0 1 0 176 0z"/></svg>');
}

html	
{
	height: 	100%;
	width: 		100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: 		antialiased;
    font-weight: 			400;
}

body {
	border:			0;
	margin: 		0;
	padding:		0;
	overflow: 		hidden;
	font-size: 		100%;
	font-family: 	"regular";
	color:			var(--text-color);
}

hr {
	width:	90%;
	border:	1px solid #CCC;
}



/* ==== rooms panel ================================== */

#rooms-panel {
	position: 		absolute;
	left:			50%;
	transform: 		translateX(-50%);
	bottom:			0px;
	height:			0px;
	width:			80%;
	max-width:		1000px;
	border-radius: 	var(--border-radius-plane) var(--border-radius-plane) 0 0;
	box-sizing: 	;
	overflow:		hidden;
	background:		var(--main-color-a07);
	backdrop-filter: blur(4px);
  	-webkit-backdrop-filter: blur(4px);
	transition:  	height 0.2s ease;
}
#rooms-panel.open {
	height:			50vh;	
	padding:		20px 40px 20px 40px;
}

#rooms-panel #typesorlevels-list {
    position: 		absolute;
    width: 			20%;
    height: 		calc(100% - 40px);
    padding:		10px;
    overflow: 		scroll;
	box-sizing: 	border-box;
}

#rooms-panel #rooms-list {
    position: 		absolute;
	left:			calc(20% + 30px);
    width: 			25%;
    height: 		calc(100% - 40px);
    padding:		10px;
    overflow: 		scroll;
	box-sizing: 	border-box;
}
#rooms-panel #rooms-list li:hover {
	text-decoration: underline;
}

#rooms-panel #room-detail {
    position: 		absolute;
    padding-top:	10px;
	left:			calc(45% + 30px);
    width: 			calc(55% - 60px);
    height: 		calc(100% - 40px);
    padding:		5px 10px 5px 10px;
    overflow: 		scroll;
	box-sizing: 	border-box;
}

#rooms-panel ul {
	margin:			0px;
	padding:		0px;
}
#rooms-panel li {
	list-style: 	none;
	font-size:		110%;
	padding:		5px;
	cursor: 		pointer;
	border-radius: 	var(--border-radius-button);
	overflow: 		hidden;
	display: 		flex;
    align-items: 	center;
    justify-content:space-between;
    position: 		relative;
}
#rooms-panel li:after {
	content:			"";
	display:			inline-block;
	position: 			absolute;
	right:				0px;
	width: 				16px;
	height: 			16px;
	margin:				6px 0px 0px 0px;
    background-image: 	var(--icon-chevron-right-black);
    background-repeat: 	no-repeat;
}
#rooms-panel li:hover {
	background: rgba(0,0,0,0.1);
}
#rooms-panel li:active {
	background: rgba(0,0,0,0.3) !important;
}
#rooms-panel li.selected {
	background: rgba(0,0,0,0.2);
}


/* ==== seatings panel ================================== */

#seatings-panel {
	position: 		absolute;
	left:			50%;
	transform: 		translateX(-50%);
	bottom:			0px;
	height:			0px;
	width:			80%;
	max-width:		1000px;
	border-radius: 	var(--border-radius-plane) var(--border-radius-plane) 0 0;
	box-sizing: 	;
	overflow:		hidden;
	background:		var(--main-color-a07);
	backdrop-filter: blur(4px);
  	-webkit-backdrop-filter: blur(4px);
	transition:  	height 0.2s ease;
}
#seatings-panel.open {
	height:			50vh;	
	padding:		20px 40px 20px 40px;
}

.matrix table {
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0px;
	cursor: default;
}

.matrix th, .matrix td {
	padding: 10px;
	border-width: 0px;
	text-align: center;
	color: #fff;
	color: var(--color-matrix-text);
	border-color: #fff;
	border-color: var(--color-matrix-border);
	border-style: solid;
}

.matrix tr > th:first-child, .matrix tr > td:first-child {
	text-align: left;
}

.matrix th {
	border-bottom-width: 2px;
}
.matrix th.hover {
	background-color: rgba(0,0,0,0.1);
}

.matrix td {
	padding: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-width: 0px;
	text-align: center;
	color: #fff;
	color: var(--color-matrix-text);
	border-color: #fff;
	border-color: var(--color-matrix-border);
	border-style: solid;
}
.matrix td.hover {
	background-color: rgba(0,0,0,0.1);
}
.matrix td.hover-centrum-cell {
	background-color: rgba(0,0,0,0.2);
	text-decoration: underline;
}
.matrix td.hover-centrum-cell:active {
	background-color: rgba(0,0,0,0.4);
}
.matrix td.noclick {
  text-decoration: none;
}
.matrix td.noclick:active {
	background-color: rgba(0,0,0,0.2) !important;
}


/* ==== search panel ================================== */

#search-panel {
	position: 		absolute;
	left:			50%;
	transform: 		translateX(-50%);
	bottom:			0px;
	height:			0px;
	width:			80%;
	max-width:		800px;
	border-radius: 	var(--border-radius-plane) var(--border-radius-plane) 0 0;
	box-sizing: 	;
	overflow:		hidden;
	background:		var(--main-color-a07);
	backdrop-filter: blur(4px);
  	-webkit-backdrop-filter: blur(4px);
	transition:  	height 0.2s ease;
}
#search-panel.open {
	height:			50vh;	
	padding:		20px 40px 20px 40px;
}


#search-panel #tab-bar {
	position: 		relative;
	left: 			50%; 
	transform: 		translateX(-50%);
}

#search-panel #tab-content {
	display:		inline-block;
	position: 		relative;
	width: 			100%;
	height: 		100%;
	border-radius:	var(--border-radius-plane);
	padding: 		0.5em 2em 2em 2em;
	box-sizing: 	border-box;
	overflow:		scroll;
}

#search-panel #input-panel {
    position: 		absolute;
	width: 			fit-content;
    height: 		50px;
	left: 			50%; 
	transform: 		translateX(-50%);
}

#search-panel #start-button {
	position: relative;
	margin: -1px 0px 0px 10px;
}
#search-panel #start-button::before {
	content:			"";
	display:			inline-block;
	width: 				16px;
	height: 			16px;
	margin-left:		-4px;
	margin-right:		8px;
    background-image: 	var(--icon-search);
    background-repeat: 	no-repeat;
}

#search-panel #message {
	position: 		absolute;
	top: 			150px;
	width:			100%;
	font-size: 		150%;
	text-align: 	center;
}

#search-panel .input-box {
	display: 			inline-block;
	width: 				120px;
	padding: 			5px;
	border-radius: 		20px;
	background-color:	var(--main-color-a06);
}
#search-panel .input-box input {
	font-size: 			100%;
	margin: 			0px 15px 0px 15px;
	width: 				calc(100% - 30px);
	border: 			none;
	border-radius: 		20px;
	background-color:	rgba(0,0,0,0);
}
#search-panel #keyword-input-box{
	width:	200px;
}

#search-panel #result-panel {
    position: 		absolute;
    top:			50px;
    height: 		calc(100% - 110px);
	width:			100%;
	left: 			50%; 
	transform: 		translateX(-50%);
	border-radius: 	var(--border-radius-plane);
	background:		rgba(255,255,255,0.4);
}

#search-panel #result-list {
    position: 		absolute;
    width: 			33%;
    height: 		100%;
    padding:		10px;
    overflow: 		scroll;
	box-sizing: 	border-box;
}
#search-panel #result-list li:hover {
	text-decoration: underline;
}

#search-panel #result-detail {
    position: 		absolute;
    padding-top:	10px;
	left:			33%;
    width: 			66%;
    height: 		100%;
    padding:		5px 10px 5px 10px;
    overflow: 		scroll;
	box-sizing: 	border-box;
}

#search-panel ul {
	margin:		0px;
	padding:	0px;
}
#search-panel li {
	list-style: 	none;
	font-size:		110%;
	padding:		5px;
	cursor: 		pointer;
	border-radius: 	var(--border-radius-button);
}
#search-panel li:after {
	content:			"";
	display:			inline-block;
	position: 			absolute;
	right:				10px;
	width: 				16px;
	height: 			16px;
	margin:				6px 0px 0px 0px;
    background-image: 	var(--icon-chevron-right-black);
    background-repeat: 	no-repeat;
}
#search-panel li:hover {
	background: rgba(0,0,0,0.1);
}
#search-panel li:active {
	background: rgba(0,0,0,0.3) !important;
}
#search-panel li.selected {
	background: rgba(0,0,0,0.2);
}

#goto-button {
	position:		relative;
	top: 			0px;
	left: 			calc(100% - 140px);
	width: 			140px;
	background:		#444;
	color:			#FFF;
}
#goto-button:after {
	content:			"";
	display:			inline-block;
	width: 				16px;
	height: 			16px;
	margin:				0px -6px -2px 6px;
    background-image: 	var(--icon-chevron-right-white);
    background-repeat: 	no-repeat;
}
#goto-button:hover {
	background:	#222 !important;
}
#goto-button:active {
	background:	#000 !important;
}


/* ==== dash-board ==================================== */

dash-board {
	position: 		absolute;
	bottom:			0px;
	height:			var(--dash-board-height);
	width:			fit-content;
	left: 			50%; 
	transform: 		translateX(-50%);
	border: 		solid 2px rgba(0,0,0,0);
	border-right: 	solid 4px rgba(0,0,0,0);
	border-radius: 	var(--border-radius-button) var(--border-radius-button) 0 0;
	background:		var(--main-color-a06);
	box-sizing: 	border-box;
	z-index: 		99999;
}

dash-board button {
	display:	inline-block;
	position:	 relative;
	margin: 	 0 -0.1em 0 0;
	padding: 	 0.3em 0.6em;
	gap: 		 0.5em;
	font-weight: 400;
	background-color: rgba(0,0,0,0);
}
dash-board button:hover {
	background-color: rgba(0,0,0,0.1);
}
dash-board button:active {
	background-color: rgba(0,0,0,0.3);
}
dash-board button:before {
	content:			"";
	display:			inline-block;
	width: 				1em;
	height: 			1em;
    background-repeat: 	no-repeat;
    background-position:center;
    background-size: 	0.8em;
}

dash-board button#rooms:before {
    background-image: 	var(--icon-building);
    background-size: 	1em;
    background-position: 0 0.15em;
}

dash-board button#seatings:before {
    background-image: 	var(--icon-seats);
    background-size: 	1em;
    background-position: -0.1em 0.15em;
}

dash-board button#map:before {
    background-image: 	var(--icon-map);
    background-size: 	1em;
    background-position: 0em 0.2em;
    margin-right:		0.3em;
}

dash-board button#search:before {
    background-image: 	var(--icon-search);
    background-size: 	1em;
    background-position: 0em 0.1em;
}

dash-board button#share:before {
    background-image: 	var(--icon-share);
    background-size: 	1em;
    background-position: 0em 0.1em;
}

dash-board button#help:before {
    background-image: 	var(--icon-help);
    background-size: 	0.6em;
    background-position: 0.1em 0.1em;
}

dash-board button#fullscreen:before {
    background-image: 	var(--icon-fullscreen);
    background-position: 0.1em 0.2em;
}
dash-board button#fullscreen.active:before {
    background-image: 	var(--icon-fullscreen-shrink);
    background-position: 0.1em 0.2em;
}


/* ==== room info ==================================== */

#room-info {
	position: 		absolute;
	left:			0px;
	bottom:			0px;
	width:			0px;
	height:			0px;
	border-radius: 	0 var(--border-radius-plane) 0 0;
	padding-left:	calc( var(--room-info-height-small) + 5px );
	box-sizing: 	border-box;
	overflow:		hidden;
	background:		var(--main-color-a06);
	backdrop-filter: blur(4px);
  	-webkit-backdrop-filter: blur(4px);
	transition:  	height 0.2s ease, width 0.2s ease;
}

#room-info.big {
	width:			var(--room-info-width-big);
	height:			var(--room-info-height-big);
	padding-top:	15px;
	padding-left:	20px;
	box-shadow:		2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}

#room-info.small {
	left:			0px;
	width:			fit-content;
	height:			var(--room-info-height-small);
	padding-top:	2px;
	padding-left:	calc( var(--room-info-height-small) + 0.5em);
	padding-right:  1em;
}
#room-info.small.noinfo {
	left:			-35px;
	cursor: 		default;
	pointer-events: none;
}
#room-info.small:hover:not(.noinfo) {
	filter: 	brightness(90%);
	cursor: 	pointer;
}
#room-info.small:active:not(.noinfo) {
	filter: 	brightness(70%);
	cursor: 	pointer;
}

#room-info.hidden {
	height: 0px;
}

#room-info button#info {
	position: 		absolute;
	opacity:		1;
	left:			0px;
	top:			0px;
	width:			var(--room-info-height-small);
	height:			var(--room-info-height-small);
	border-radius: 	0;
	margin:			0px;
	background-color:	 var(--info-button-color);
    background-image: 	 var(--icon-info);
	background-repeat: 	 no-repeat;
    background-size: 	 calc(var(--room-info-height-small) - 12px) calc(var(--room-info-height-small) - 12px);
    background-position: 0.4em 0.4em;
	transition:  		 0.3s ease;
}
#room-info.big button#info {
	opacity:	0;
}

#room-info.small button#exit, #room-info.hidden button#exit {
	display:	none;
}
#room-info.big button#exit {
	display:	inline-block;
}

#room-info #room {
	display: 		inline-block;
	position: 		relative;
	width:			100%;
	font-size: 		120%;
	margin-top: 	0.1em;
	white-space: 	nowrap;
	overflow: 		hidden;
}
#room-info.big #room {
	font-size: 		240%;
	margin-top: 	-10px;
	margin-left: 	10px;
}

#room-info #level {
	display: 		inline-block;
	position: 		relative;
	top: 			-0.4em;
	width:			98%;
	margin-left: 	10px;
	font-size: 		140%;
	white-space: 	nowrap;
	overflow: 		hidden;
}
#room-info.small #level, #room-info.hidden #level {
	display:	none;
}

#room-info #tab-bar {
	position: 	relative;
	left: 		50%;
	transform:	translateX(-54%);
}
#room-info.small #tab-bar, #room-info.hidden #tab-bar {
	display:	none;
}

#room-info #tab-content {
	position: 		relative;
	left: 			10px;
	width: 			calc(100% - 50px);
	height: 		calc(100% - 140px);
	display:		inline-block;
	border-radius:	var(--border-radius-plane);
	XXXpadding: 		0em 2em 2em 2em;
	margin-top:		0.5em;
	box-sizing: 	border-box;
	overflow:		scroll;
}
#room-info.small #tab-content, #room-info.hidden #tab-content {
	display:	none;
}
#room-info #tab-content img {
	margin-top: 	0.5em;
	width: 			100%;
	border-radius:	10px;
}

#room-info h2
{
	margin: 		10px 0px 5px 0px;
	font-weight: 	400;
	font-family: 	'bold';
}
#room-info p
{
	margin: 		5px 0px 10px 0px;
}


/* ==== map frame ==================================== */

#map-frame {
	position:		absolute;
	width: 			40vh;
	height: 		40vh;
	right: 			10px;
	bottom:			10px;
	border: 		2px solid #FFF;
	background: 	#FFF;
	border-radius:	6px;
	box-shadow:		0 0 10px rgba(0,0,0,0.5);
	transition: 	width 0.3s ease, height 0.3s ease;
}
#map-frame.big {
	width: 			33vw;
	height: 		calc(100vh - 20px);
}


/* ==== progress bar ================================= */

#progress-container {
	position: 		absolute;
	top: 			50%;
	left: 			50%;
	transform:		translateX(-50%);
	width: 			300px;
	padding: 		25px;
	text-align: 	center;
	border-radius:	12px;
	background:		var(--main-color-a06);
	backdrop-filter: blur(4px);
	box-sizing: 	border-box;
}
#progress-bar {
	height: 		16px;
	width: 			0%;
	background: 	#333;
	transition: 	width 0.2s;
	border-radius: 	10px;
	margin-top: 	5px;
	margin-bottom: 	10px;
}
#progress-text {
	font-family: 	"bold";
	color: 			#333;
}
#info-text {
	position:		absolute;
	bottom: 		5px;
	font-family: 	"regular";
	font-size:		80%;
	color: 			#333;
	text-align: 	center;
}

.map #progress-container {
	left:		0px;
	transform: none;
}

/* ==== customer logo ================================= */

#logo {
	width: 		20vw;
	max-width:  250px;
	position:	absolute;
	right: 		0px;
	top: 		0px;
}


/* ==== help-box ===================================== */

#help-box {
	position:		absolute;
	display: 		none;
	top:			calc(50vh - 300px);
	left:			calc(50vw - 450px);
	height: 		600px;
	width: 			900px;
	border-radius: 	10px;
	overflow: 		hidden;
	box-shadow:		2px 2px 4px 2px rgba(0, 0, 0, 0.2);
	background:		var(--main-color-a07);
	backdrop-filter: blur(10px);
  	-webkit-backdrop-filter: blur(4px);
  	justify-content: center;
	z-index: 		9999;
}
#help-box.open {
	display: flex;
}

#help-box tab-bar {
	margin-top:	30px;
}

#help-box tab {
	min-width: 		82px;
}

#help-box tab-bar-content {
	width:			calc(100% - 8rem);
	height:			calc(100% - 70px - 3rem);
	border-radius:	8px;
	background:		var(--main-color-a06);
	display:		flex;
	align-items: 	flex-start;
	justify-content: center;
	overflow: 		scroll;
}

#help-box tab-bar-content img {
	display: 	block;
	width:		100%;
}

/* ==== menu-box ===================================== */

#menu-box {
	position:		absolute;
	display: 		none;
	top:			10px;
	left:			10px;
	height: 		calc(100vh - 20px);
	width: 			400px;
	border:			solid 2px #FFF;
	border-radius: 	10px;
	overflow: 		hidden;
  	background: 	var(--main-color-a08);
	backdrop-filter: blur(10px);
	box-shadow:		2px 2px 4px 2px rgba(0, 0, 0, 0.4);
  	justify-content: center;
	z-index: 		9999;
}
#menu-box.open {
	display: flex;
}

#menu-box list {
	height : calc(100% - 50px)
}

#menu-box #load-data-button {
	left:			15px;
	bottom:			5px;
	display: 		inline-flex;
  	align-items: 	center;
	background:		var(--main-color);
}
#menu-box #load-data-button button-icon {
	width:			1.5em;
	height:			1.5em;
	margin-right:	0.5em;
	mask: 			var(--icon-load) no-repeat center / 1.5em;
	-webkit-mask: 	var(--icon-load) no-repeat center / 1.5em;
	background:		var(--button-text-color);
}

#menu-box #save-data-button {
	right:			15px;
	bottom:			5px;
	display: 		inline-flex;
  	align-items:	center;
	background:		#FFF;
}
#menu-box #save-data-button button-icon {
	width:			1.8em;
	height:			1.5em;
	margin-left:	-0.2em;
	margin-right:	0.5em;
	mask: 			var(--icon-save) no-repeat center / 1.4em;
	-webkit-mask: 	var(--icon-save) no-repeat center / 1.4em;
	background:		var(--button-text-color);
}


/* ==== slide-show ==================================== */

#slide-show {
	display:		none;
	opacity: 		0;
	position:		absolute;
	height: 		100vh;
	width:			100vw;
	background:		var(--main-color-a098);
	z-index:		999999;
	transition: 	opacity 0.5s ease;
}

#slide-show #images-row {
	display:		flex;
	position:		absolute;
	height: 		100vh;
	transition: 	0.4s ease;
	overflow-x: 	auto;
}

#slide-show .slide-show-image {
	position:		relative;
	height: 		100vh;
	width:			100vw;
	background-position: center;
	background-size:	 auto 90%;
	background-repeat:   no-repeat;
}

#slide-show button#prev {
 	top:			calc(50vh - 50px);
 	left:			10px;
 	height:			100px;
 	width:			100px;
 	border-radius:  50%;
 	background:		rgba(0,0,0,0);
}
#slide-show button#prev:before {
	content:			"";
	display:			inline-block;
	width: 				100%;
	height: 			100%;
    background-image: 	var(--icon-chevron-left);
    background-size: 	3em;
    background-position:center;
    background-repeat: 	no-repeat;
}

#slide-show button#next {
 	top:			calc(50vh - 50px);
 	right:			10px;
 	height:			100px;
 	width:			100px;
 	border-radius:  50%;
 	background:		rgba(0,0,0,0);
}
#slide-show button#next:before {
	content:			"";
	display:			inline-block;
	width: 				100%;
	height: 			100%;
    background-image: 	var(--icon-chevron-right);
    background-size: 	3em;
    background-position:center;
    background-repeat: 	no-repeat;
}

/* ==== welcome screen ==================================== */

.welcome-screen {
	position: 		absolute;
	width: 			100vw;
	height: 		100vh;
	background:		rgba(255,255,255,0.9);
	z-index: 		999999;
	display: 		flex;
	justify-content: center;
	align-items: 	center;
	transition: 	opacity 0.5s;
}

.welcome-screen .svg-wrapper {
	width: 			65%;
	height: 		auto;
	max-height: 	90%;
	display: 		inline-block;
	border-radius: 	20px;
	overflow: 		hidden;
}

.welcome-screen svg {
	width: 		100%;
	height: 	auto;
}

.welcome-screen svg img {
	border-radius: 	20px;
}

.welcome-screen svg .clickable {
	fill: transparent; 
	pointer-events: all;
}

.welcome-screen svg .clickable:hover {
	cursor: pointer;
}

/* ==== route-player ================================= */

route-player, route-recorder {
	position:		absolute;
	display: 		none;
	height: 		60px;
	width: 			400px;
	bottom:			50px;
	left:			calc(50vw - 200px);
	border:			solid 2px #FFF;
	border-radius: 	30px;
	overflow: 		hidden;
	box-shadow:		2px 2px 4px 2px rgba(0, 0, 0, 0.4);
  	background: 	#FFF;
  	flex-direction: column;
  	align-items: 	center;
	z-index: 		9999;
}
route-player.open, route-recorder.open {
	display: flex;
}

route-player span {
	font-size: 90%;
}

route-player #route-name {
	margin-top: 4px;
}
route-player #route-pos {
	width: 280px;
}
route-player #route-info {
	font-size: 80%;
}
route-player #route-pos-slider {
	width:	calc(100% - 120px);
}

route-player button.play {
    height:			54px;
    width:			54px;
	left: 			0px;
	top:			0px;
    box-shadow:		none;
}
route-player button.play:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-play);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			0px 0 0 -8px;
}
route-player button.pause:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-pause);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			0px 0 0 -8px;
}
route-player button.exit {
    height:			54px;
    width:			54px;
	right: 			0px;
	top:			0px;
    box-shadow:		none;
}
route-player button.exit:before {
	margin: 		0 0 0 -8px;
}

/* ==== route-recorder ================================= */

route-recorder {
	background: #F00;
}

route-recorder button.stop {
    margin-top: 	3px;
    height:			54px;
    width:			54px;
	right: 			0px;
	top:			0px;
    box-shadow:		none;
}
route-recorder button.stop:hover {
	background-color:	#DDD !important;
}
route-recorder button.stop:active {
	background-color:	#AAA !important;
}
route-recorder button.stop:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-stop);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			0px 0 0 -8px;
}

#route-recorder-info {
	position: 		absolute;
	left: 			30px;
	top: 			18px;
	color: 			#FFF;
	font-size: 		140%;
	animation: 		fadeInOut 2s infinite;
}
@keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


/* ==== editor dialogs ================================= */

data-editor {
	display: 		none;
	position:		absolute;
	width: 			50vh;
	height: 		30vh;
	top:			calc(50vh - 15vh);
	left:			calc(50vw - 25vh);
	padding:		0 3em 0 3em;
	border:			solid 2px #FFF;
	border-radius: 	12px;
	overflow: 		hidden;
	box-shadow:		2px 2px 8px 2px rgba(0, 0, 0, 0.4);
  	background: 	var(--main-color-a08);
  	backdrop-filter: blur(10px);
	z-index: 		9999;
	pointer-events: auto;
	box-sizing: 	border-box;
}

data-editor button.delete {
	left:	0.5em;
	bottom:	0.25em;
}

data-editor button.save {
	right:	0.5em;
	bottom:	0.25em;
}

data-editor input[type="text"], data-editor textarea {
	width: 		calc(100% - 80px) !important;
}

data-editor h2 {
	width: 			200px;
	height: 		34px;
	margin-top: 	0px;
	margin-bottom: 	1.2em;
	padding-top: 	4px;
	border-radius: 	0px 0px 10px 10px;
	background-color: #FFF;
}

data-editor div {
	display:		flex;
	margin-bottom: 0.4em;
}

data-editor span {
	display:	inline-block;
	width:		60px;
}


/* ==== head up display / HUD ========================= */

#HUD {
  visibility: 		hidden;
  position: 		fixed;
  bottom: 			50px;
  left: 			50%;
  transform: 		translateX(-50%);
  display: 			inline-block;
  background: 		rgba(0, 0, 0, 0.7);
  color: 			#fff;
  padding: 			10px 20px;
  border-radius: 	10px;
  font-size: 		140%;
  white-space: 		nowrap;
  z-index: 			9999;
}



/* ==== tabs ========================================= */

/*
tab-bar {
	position:		absolute;
	top:			0px;
	height:			2em;
	border:			solid 2px #FFF;
	border-radius:	1em;
	background:		#FFF;
	display: 		inline-flex;
	margin-bottom:  0.25em;
}

tab {
	min-width: 		60px;
	display: 		inline-block;
 	padding: 		0.3rem 1rem;
	border-radius:	1em;
	cursor: 		pointer;
	text-align: 	center;
	background:		#FFF;
}

tab:hover {
	filter: 	brightness(90%);
}
tab:active {
	filter: 	brightness(70%);
}
tab.selected, tab.selected:hover {
	background:		var(--highlight-color);
	color:			var(--button-text-highlight-color);
	filter: 		brightness(100%);
}

tab-bar-content {
	position:		absolute;
	top:			70px;
	width:			calc(100% - 2rem);
	height:			calc(100% - 70px - 1rem);
	border-radius:	8px;
	overflow-y: 	auto;
	text-align: 	center;
}
*/


tab-bar {
	position:		absolute;
	top:			0px;
	height:			2em;
	border-radius:	1em;
	display: 		inline-flex;
	margin-bottom:  0.25em;
	background: 	rgba(0,0,0,0.1);
}
tab-bar:hover {
	background: 	rgba(0,0,0,0.1);
}

tab {
	min-width: 		60px;
	display: 		inline-block;
 	padding: 		0.3rem 1rem;
	border-radius:	1em;
	cursor: 		pointer;
	text-align: 	center;
}

tab:hover {
	background: 	rgba(0,0,0,0.1);
}
tab:active {
	background: 	rgba(0,0,0,0.2);
}
tab.selected, tab.selected:hover {
	background:		rgba(0,0,0,0.4);
	color:			#FFF;
	filter: 		brightness(100%);
}

tab-bar-content {
	position:		absolute;
	top:			70px;
	width:			calc(100% - 2rem);
	height:			calc(100% - 70px - 1rem);
	border-radius:	8px;
	overflow-y: 	auto;
	text-align: 	center;
}


/* ==== popup-menu =================================== */

popup-menu {
	position: 		absolute;
	padding: 		0.5rem;
	border: 		1px solid #ccc;
	box-shadow: 	0 4px 10px rgba(0,0,0,0.1);
	border-radius:	6px;
	background: 	#FFF;
	z-index: 		9999;
}

popup-item {
	display: 		block;
	padding: 		0.25rem 0.5rem;
	background: 	#FFF;
	cursor: 		pointer;
	position: 		relative;
}
popup-item:hover {
  filter: 	brightness(90%) !important;
}
popup-item:active {
  filter: 	brightness(70%);
}

popup-item.checkbox:after {
	content: 		var(--icon-checkbox);
	display:		inline-block;
	position: 		absolute;
	right:			10px;
}
popup-item.checkbox.selected:after {
	content: 		var(--icon-checkbox-selected);
	display:		inline-block;
	position: 		absolute;
	right:			10px;
}

popup-item.has-submenu:after {
    content: 	var(--icon-chevron-right);
    position: 	absolute;
    right:		10px;
}


/* ==== popup-button =================================== */

popup-button
{
	display: 			inline-block;
	padding: 			5px 10px 5px 13px;
	background-color:	var(--main-color-a06);
	border-radius: 		20px;
	cursor: 			pointer;
}
popup-button::after
{
	content:			"";
	display:			inline-block;
	width: 				10px;
	height: 			10px;
    background-image: 	var(--icon-chevron-down);
    background-position:center;
    background-repeat: 	no-repeat;
    margin-left:		5px;
}

/* ==== buttons ====================================== */

/*
button {
    display:		inline-block;
    position:		absolute;
    border:			none;
    color:			var(--button-text-color);
    border-radius: 	8px;
    padding:		8px 16px;
    text-align:		center;
    font-size:		16px;
    font-weight:	bold;
    margin:			4px 2px;
    cursor:			pointer;
    white-space:	nowrap; 
    background:		var(--main-color);
}
button:hover {
	filter: 	brightness(90%);
}
button:active {
	filter: 	brightness(70%);
}
button.round {
	border-radius: 50%;
}
*/

button {
    display:		inline-block;
    position:		absolute;
    border:			none;
    color:			#000;
    border-radius: 	8px;
    padding:		8px 16px;
    text-align:		center;
    font-size:		16px;
    font-weight:	bold;
    margin:			4px 2px;
    cursor:			pointer;
    white-space:	nowrap; 
	background: 	rgba(255,255,255,1);
}
button:hover {
	background: 	rgba(0,0,0,0.2) !important;
}
button:active {
	background: 	rgba(0,0,0,0.4) !important;
}
button.round {
	border-radius: 50%;
}

button.fullscreen {
 	height:		40px;
 	width:		40px;
    left: 		-8px;
    top: 		-8px;
    background: #FFF;
}
button.fullscreen:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-fullscreen);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			-6px 0 0 -14px;
}
button.fullscreen.shrink:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-fullscreen-shrink);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			-6px 0 0 -14px;
}

button.exit {
 	height:			40px;
 	width:			40px;
    right: 			-8px;
    top: 			-8px;
    background: 	rgba(0,0,0,0);
}
button.exit:before {
	content:			"";
	display:			inline-block;
	width: 				40px;
	height: 			40px;
    background-image: 	var(--icon-exit);
    background-size: 	20px;
    background-position:center;
    background-repeat: 	no-repeat;
    margin: 			-5px 0 0 -19px;
}

#map-exit {
    background: 	rgba(255,255,255,0.6);
}
#map-exit:hover {
    background: 	rgba(200,200,200,0.6) !important;
}
#map-exit:active {
    background: 	rgba(128,128,128,0.6) !important;
}

#map-fullscreen {
    background: 	rgba(255,255,255,0.6);
}
#map-fullscreen:hover {
    background: 	rgba(200,200,200,0.6) !important;
}
#map-fullscreen:active {
    background: 	rgba(128,128,128,0.6) !important;
}

button.delete {
   background: 	rgba(128,128,128,0.5) !important;
}

button.spinner:before{
	content:			"";
	display:			inline-block;
	width: 				20px;
	height: 			20px;
	background-size: 	20px;
	background-position:center;
    background-image: 	var(--icon-spinner) !important;
    background-repeat: 	no-repeat;
    animation: 			spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/*
button-icon {
	width: 		1em;
	height: 	1em;
	display:	block;
	background: var(--main-color);
}
*/


/* ==== list ========================================= */

list {
    display: 			inline-block;
    width: 				100%;
    height: 			100%;
    box-sizing: 		border-box;
	background: 		rgba(255,255,255,0.4);
	border: 			solid 2px #FFF;
	border-radius:		8px;
	cursor: 			default;
	-webkit-user-select:none; /* Safari */        
	-moz-user-select: 	none; /* Firefox */
	-ms-user-select: 	none; /* IE10+/Edge */
	user-select: 		none; /* Standard */
	scrollbar-color: 	rgba(0,0,0,0.1) rgba(0,0,0,0);
	scrollbar-width: 	thin;
}

list list-header {
	display:			inline-block;
	width:				100%;
	height:				26px;
	font-weight: 		600;
	background:			#DDD;
	padding:			3px 5px 0px 5px;
	border-radius: 		6px 6px 0px 0px;
	box-sizing: 		border-box;
}
list list-header span {
	display:			inline-block;
	white-space:		nowrap;
    text-overflow:		ellipsis;
}

list list-header span.sortdown {
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 5px;
}
list list-header span.sortup {
	font-weight: 800;
	text-decoration: overline;
	text-overline-offset: 5px;
}

list list-content {
    display: 		inline-block;
    width: 			100%;
    height: 		100%;
    overflow-y: 	auto;    
}

list list-header + list-content {
    height: 		calc(100% - 30px); /* 30px = list-header */
}

list list-item {
    width: 			100%;
    padding: 		6px 12px 6px 12px;
    box-sizing: 	border-box;
    white-space:	nowrap;
    overflow: 		hidden;
	margin-bottom: 	-4px;
	text-align: 	left;
    display: 		flex;
	align-items: 	center;
	gap: 			0.5em;
}
list list-item:hover {
    background-color: rgba(255,255,255,0.5);
}     
list list-item:active {
    background-color: rgba(255,255,255,1);
}     

list list-item span {
	display:			inline-block;
	white-space:		nowrap;
    text-overflow:		ellipsis;
    overflow: 			hidden;
    line-height: 		150%;
	vertical-align: 	middle;
    width:				calc(100% - 40px); /* 2 x dots = 40px */

}

list list-item icon {
    width: 		26px;
	height:		26px;
}

list list-group {
	display:	block;
	padding: 	5px 5px 0px 10px;
	box-sizing: border-box;
}
list list-group list-group {
	padding-left: 	20px;
}
list list-group list-group list-group {
	padding-left: 	20px;
}
list list-group list-group list-group list-group {
	padding-left: 	20px;
}

list list-group > list-group-header {
	width: 			100%;
	display: 		inline-block;
	white-space: 	nowrap;
	overflow: 		hidden;
	text-overflow: 	ellipsis;
	font-weight: 	bold;
	margin-bottom: 	-8px;
}
list list-group.closed > list-group-header:before {
	content:		var(--icon-chevron-right);
	display:		inline-block;
	width:			22px;
	vertical-align: middle;
	margin-left:	5px;
}
list list-group.open > list-group-header:before {
	content:		var(--icon-chevron-down);
	display:		inline-block;
	width:			22px;
	vertical-align: middle;
	margin-right:	5px;
}

list list-group > list-group-content {
	display:	inline-block;
}
list list-group.closed > list-group-content {
	display:	none;
}
list list-group.open > list-group-content {
	display: 	inline;
}
list list-group > list-group-content list-item {
	padding-left: 	20px;
	vertical-align: middle;
}
list list-group > list-group-content list-item label {
	width: 			calc(100% - 60px);
	display: 		inline-block;
	white-space: 	nowrap;
	overflow: 		hidden;
	text-overflow: 	ellipsis;
	vertical-align: middle;
}

list input.list-search {
	float:					right;
	width:					150px;
	margin-bottom:			5px;
	background-image: 		var(--icon-search);
	background-repeat: 		no-repeat;
	background-position: 	right 5px center;
}



/* ==== input ========================================= */

input[type="text"], textarea {
    width: 			200px;
    height: 		24px;
    font-size:		14px;
    border:			0px;
    border-radius: 	4px; 
    padding: 		2px 2px 2px 6px;
	box-sizing: 	border-box;
	outline: 		none;
	box-shadow: 	none;
}
textarea {
    height: 	48px;
}

/* ==== color dot ========================================= */

color-dot
{
	display: 		inline-block;
	height:			16px;
	width: 			16px;
	border-radius:	50%;
	background:		#FFF;
}

/* ==== icon dot ========================================= */

icon-dot
{
	display: 		inline-block;
	height:			18px;
	width: 			18px;
	border-radius:	50%;
}
icon-dot.settings::after
{
    content: var(--icon-settings-dot);
    display: inline-block;
}


/* file icon =================== */

a.file
{
  	display: 	flex;
  	align-items: center;
  	gap: 		10px;
	margin: 	6px;
	padding: 	10px;
	height: 	30px;
	width: 		90%;
	color: 		var(--button-text-color);
	text-decoration: none;
	border-radius: var(--border-radius-button);
}
a.file:hover
{
	background: rgba(0,0,0,0.1);
}
a.file:active
{
	filter: 	rgba(0,0,0,0.3);
}

a.file[href$=".pdf"]:before
{
	display:	inline-block;
	content: 	"";
	height:		2em;
	width:		2em;
    background-image: 	var(--icon-file-pdf);
    background-size: 	2em;
}}
a.file[href$=".doc"]:before
{
	content: "";
	height:		10em;
	width:		10em;
    background-image: 	var(--icon-file-doc);
	background-repeat: 	no-repeat;
    background-size: 	1em;
}