.server-options {
			display: flex;
			flex-wrap: wrap;
			margin: 0 80px 20px;
			grid-gap: 20px;
			justify-content: center;
		}

		.option-item {
			width: 33%;
			padding: 10px;
			border-radius: 8px;
			box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 34%) !important;
		}

		.option-item.green {
			background: linear-gradient(to right, #1aa51a, #004000);
		}

		.option-item.red {
			background: linear-gradient(to right, #d81432, #6a202b);
		}

		.option-item.blue {
			background: linear-gradient(to right, #006bbe, #004072);
		}

		.option-item.yellow {
			background: linear-gradient(to right, #efcc00, #605805);
		}

		.option-item.black {
			background: linear-gradient(to right, #999, #000);
		}

		.status-text {
			font-size: .8em;
			color: #fff;
			margin-bottom: 20px;
			text-align: center;
			line-height: 14px;
		}

		.btn-primary.red {
			border-color: #6a202b !important;
			background: linear-gradient(to bottom, #d81432, #6a202b) !important;
		}

		.btn-primary.red:hover {
			background: linear-gradient(to bottom, #6a202b, #d81432) !important;
		}		

		.btn-primary.green {
			border-color: #004000 !important;
			background: linear-gradient(to bottom, #1aa51a, #004000) !important;
		}

		.btn-primary.green:hover {
			background: linear-gradient(to bottom, #004000, #1aa51a) !important;
		}

		.fullscreen-overlay {
			padding-top: 50px;
			width: 100vw;
			height: 100vh;
			background: #fff;
			position: fixed;
			bottom: -100vh;
			left: 0;
			z-index: 999999;
			transition: bottom 1s ease-in-out;
		}

		.fullscreen-overlay.active {
			bottom: 0;
		}

		.close-button {
			position: absolute;
			top: 65px;
			right: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 2em;
			color: #000;
			font-weight: bold;
			transition: background 0.3s;
			z-index: 99999;
		}

		.close-button.menu {
			right: auto;
			left: 25px;
		}

		.video-process-wrap {

		}

		.fullscreen-mobile {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}

		#camera-stream {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.video-process-wrap {
			position: absolute;
			left: 0;
			bottom: 25px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.stream-button {
			position: absolute;
			bottom: 5px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2px solid black;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
			cursor: pointer;
			transition: background 0.3s;
			z-index: 99999;
		}

		.stream-button.active {
			background: #ff51514f;
		}

		.live-messages-wrap {
			position: absolute;
			bottom: 100px;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			max-height: 100px;
			background: transparent;
			z-index: 99999;
			overflow: hidden;
		}

		.live-messages-highlight {
			padding: 5px;
			font-size: 1.5em;
			text-align: center;
			color: #fff;
			text-shadow: 1px 1px 2px #000;
		}

		.live-messages-histories {
			padding: 5px;
		}

		.live-messages-histories-wrap {
			display: grid;
			grid-template-columns: 50px 1fr;
			grid-gap: 3px;
			font-size: .8em;
			color: #ccc;
		}

		.message-box-wrap {
			position: fixed;
			left: 50%;
			bottom: 90px;
			transform: translateX(-50%);
			width: 70%;
			z-index: 999999;
			display: none;
		}

		.clients-box-wrap {
			position: fixed;
			left: 50%;
			bottom: 100px;
			transform: translateX(-50%);
			width: 70%;
			z-index: 999999;
			display: none;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
		}		

		.icon-refresh.animation {
			display: inline-block;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		.countries-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			max-width: 500px;
			margin: 20px auto;
			align-items: baseline;
			grid-auto-rows: 35px;
		}

		.countries-checkbox {
			height: 20px;
			margin: 0;
			margin-top: 10px;			
		}

		.statistics-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			max-width: 500px;
			margin: 20px auto;
		}

		.statistics-container div {
			padding: 5px 10px;
		}

		.statistics-container div:nth-child(even) {
			text-align: right;
		}

		.statistics-container div:nth-child(odd) {
			font-size: .8em;
		}

		.statistics-container div:nth-child(4n+3),
.statistics-container div:nth-child(4n+4) {
			background-color: #ccc;
		}

		.excluded-countries {
			font-size: .8em;
		}

		.viewers-wrap {
			display: flex;
			grid-gap: 5px;
			flex-wrap: wrap;
		}

		.viewer-wrap {
			display: grid;
			grid-template-columns: auto auto auto;
			grid-column-gap: 2px;
			background: #004072;
			color: #fff;
			padding: 2px 0 1px 4px;
			box-shadow: 2px 2px 4px #ccc;
			border-radius: 4px;
			align-items: center;
			cursor: pointer;
		}

		.viewer-wrap.active {
			background: #993132;
		}

		a.opt {
			font-size: 0.8em;
		}

		.dropdown-menu.open {
			max-width: 90%;
		}

		a.opt span.text {
			max-width: 95%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: inline-block;
		}

		.footer-container {
			position: fixed;
			width: 100vw;
			left: 0;
			bottom: 0;
			z-index: 999999;

			/*height: 50px;
			background: red;*/
		}

		.footer-wrap {
			display: flex;
			justify-content: center;
			position: relative;
			width: 100%;
		}

		.footer-wrapper {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-column-gap: 10px;
			align-items: end;
			margin: 0 20px;
			padding: 5px 5px 10px;
			font-size: 3em;
			position: relative;
			bottom: -110px;
			transition: bottom 1s ease-in-out;
		}

		.footer-wrapper.active {
			bottom: 0;
		}

		.footer-wrapper > span {
			filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
			cursor: pointer;
		}

		.camera-container {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;

			/*background: red;*/
		}

		.camera-wrap {
			position: relative;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.live-broadcasting-wrap {
			width: 75px;
			height: 75px;
			background: #fff;
			border-radius: 50%;
			padding: 11px;
			text-align: center;
		}

		.live-broadcasting-wrap.active {
			background: #ff7d7d;
		}

		.data-container {
			height: calc(100vh - 200px);
			display: flex;
			flex-direction: column;
		}

		.data-wrap {
			width: 500px;
			padding: 10px 20px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);

			flex: 1;
			overflow-y: auto;
			min-height: 0;
		}

		.chat-wrap {
			width: 33%;
			position: absolute;
			bottom: -100vh;
			padding: 10px 0 20px;
			transition: bottom 1s ease-in-out;

			/*height: 100px;
			background: #fff;*/
		}

		.chat-wrap.active {
			bottom: 0;
		}

		.clients-list {
			position: absolute;
			left: -33%;
			top: 0;
			width: 500px;
			height: 100vh;
			z-index: 99999;
			transition: left 1s ease-in-out;

			/*background: #fff;*/
		}

		.clients-list.active {
			left: 0;
		}

		.unread-badge {
			position: absolute;
			top: -3px;
			right: 25px;
			background-color: red;
			color: white;
			font-size: 10px;
			padding: 2px 5px;
			border-radius: 10px;
			font-weight: bold;
			min-width: 18px;
			text-align: center;
			line-height: 1;
		}

		@media screen and (max-width: 768px) {
			.server-options {
				margin: 0;
			}

			.option-item {
				width: 90%;
			}

			.footer-wrapper {
				padding: 5px 5px 30px;
			}

			.data-wrap {
				width: 100%;
			}

			.chat-wrap {
				width: 100%;
			}

			.clients-list {
				width: 100vw;
				left: -100vw;
			}

			.unread-badge {
				right: 7px;
			}

		}

		.chat-wrapper {
			transition: height 0.2s ease;
			overflow: auto;
			padding: 10px;
			padding-bottom: 30px;
		}

		.chat-wrapper-icons {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-column-gap: 5px;
			justify-items: center;
			margin: 0 10px;
		}

		.chat-wrapper-message {
			/*display: grid;
			grid-template-columns: 1fr 32px;
			grid-column-gap: 5px;
			align-items: end;*/
			padding: 0 10px 10px 10px;
		}

		.new-message-wrapper {
			position: relative;
			width: 100%;
			box-shadow: -5px 10px 12px rgba(0, 0, 0, 0.5);
		}

		.new-message-wrapper textarea {
			width: 100%;
			min-height: 40px;
			padding: 10px 10px 40px 10px;
			overflow-y: hidden;
			resize: none;
			z-index: 1;
			position: relative;
			background: #ffffffc2;
			transition: height 0.5s ease;
		}

		.new-message-overlay {
			position: absolute;
			top: -25px;
			left: 0;
			background: rgba(0, 0, 0, 0.6);
			color: white;
			padding: 2px 6px;
			border-radius: 8px;
			font-size: 12px;
			z-index: 2;
			pointer-events: none;
		}

		.new-message-icons-wrap1 {
			font-size: 1.8em;
			cursor: pointer;
			color: #ff0104;
			filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
			position: absolute;
			right: 15px;
			bottom: 10px;
			top: auto;
			z-index: 9;
			width: fit-content;
			height: fit-content;
			pointer-events: none;
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-end;
			justify-content: space-between;
			pointer-events: auto;
			grid-column-gap: 10px;
		}

		.new-message-icons-wrap {
			width: 100%;
			position: absolute;
			bottom: 0;
		}

		.new-message-icons-wrapper {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: 0 10px;
		}

		[id='new-message-send-btn'] {
			z-index: 9999999;
			font-size: 1.7em;
			cursor: pointer;
			filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
			/* color: #ff0104; */			
		}

		.chat-messages-wrap {
			display: flex;
			flex-direction: column-reverse;
			overflow-y: auto;
			max-height: 100%;
		}

		.chat-messages-wrap {
			scrollbar-width: thin;
			scrollbar-color: #999 transparent; /* barva posuvníku a pozadí */
		}

		/* Webkit (Chrome, Safari) */
		.chat-messages-wrap::-webkit-scrollbar {
			width: 6px;
		}

		.chat-messages-wrap::-webkit-scrollbar-track {
			background: transparent;
		}

		.chat-messages-wrap::-webkit-scrollbar-thumb {
			background-color: #999;
			border-radius: 3px;
		}

		.chat-messages-left-container {
			display: grid;
			grid-template-columns: auto 25%;
			margin-bottom: 20px;
		}

		.chat-messages-left-wrapper {
			display: flex;
			justify-content: flex-start;
			margin-left: 5px;
			min-width: 75%;
			max-width: 100%;
			position: relative;
		}

		.chat-messages-left-wrap {
			background: #ebfff9;
			padding: 5px 10px;
			box-shadow: 5px 10px 12px rgba(0, 0, 0, 0.5);
			border-radius: 10px;
			margin: unset;
			position: relative;
		}

		.chat-message-left-data {
			display: flex;
			justify-content: flex-start;
			font-size: .8em;
			margin-bottom: 5px;
			color: #bbb;
		}

		.chat-message-left-message {
			display: grid;
			grid-template-columns: 1fr 25px;
			align-items: flex-end;
			color: #797979;
			font-size: .9em;
			line-height: 16px;
			word-break: break-word;
			overflow-wrap: anywhere;
			transform: scaleY(0.9);
		}

		.chat-messages-right-container {
			display: grid;
			grid-template-columns: 25% auto;
			margin-bottom: 20px;
		}

		.chat-messages-right-wrapper {
			display: flex;
			justify-content: flex-end;
			margin-right: 5px;
			min-width: 75%;
			max-width: 100%;
			position: relative;
		}

		.chat-messages-right-wrap {
			background: #ffebeb; /* nová barva */
			padding: 5px 10px;
			box-shadow: -5px 10px 12px rgba(0, 0, 0, 0.5);
			border-radius: 10px;
			margin: unset;
			position: relative;
			min-width: 50%;
			max-width: 100%;
		}

		.chat-message-right-data {
			display: flex;
			justify-content: flex-start;
			font-size: .8em;
			margin-bottom: 5px;
			color: #bbb;
			text-align: left;
		}

		.chat-message-right-client {
			background: rgba(0, 0, 0, 0.6);
			color: white;
			padding: 2px 6px;
			border-radius: 8px;
			width: fit-content;
			margin-bottom: 5px;
			font-size: .8em;
		}

		.chat-message-right-message {
			display: grid;
			grid-template-columns: 1fr 25px;
			align-items: flex-end;
			color: #444;
			font-size: .9em;
			line-height: 16px;
			text-align: left;
			transform: scaleY(0.9);
		}

		#clients-wrapper {
			max-height: 100%;
			overflow-y: auto;
			padding: 0;
			margin: 0;
			background-color: #fff;
			border-right: 1px solid #ddd;
			font-family: sans-serif;
			z-index: 999999;
		}

		.client-wrapper {
			display: flex;
			align-items: center;
			padding: 12px 16px;
			border-bottom: 1px solid #f0f0f0;
			cursor: pointer;
			transition: background 0.2s;
		}

		.client-wrapper:hover {
			background-color: #f5f5f5;
		}

		.client-wrapper.selected {
			background-color: #e6f7ff;
		}

		.client-label {
			display: grid;
			align-items: start !important;
			grid-template-columns: 0 5fr repeat(3, 28px);
			align-items: center;
			width: 100%;
			gap: 8px;
			cursor: pointer;
			padding: 8px 0;
		}

		.client-label.global {
			grid-template-areas: 
				"photo nickname unread invite waiting" ;
		}

		.client-label input[type="radio"] {
			display: none;
		}

		.client-data {
			grid-column: 2;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.client-name {
			font-weight: 500;
			font-size: 16px;
			color: #111;
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			grid-column-gap: 5px;
		}

		.client-preview {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			color: #666;
		}

		.client-credits {
			display: grid;
			grid-template-columns: 73% auto;
			grid-column-gap: 10px;
			align-items: center;
		}

		.client-credits-title {
			font-size: .8em;
		}

		.client-credits-value-wrap {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.client-credits-value {
			line-height: 1.5em;
		}

		.client-credits-icon {
			font-size: 1.5em;
			margin-left: 5px;
		}

		.preview-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 80%;
			font-size: .8em;
			/*color: #a1a1a1;*/
		}

		.preview-time {
			min-width: 40px;
			text-align: right;
			font-size: .8em;
			/*color: #a1a1a1;*/
		}

		.client-icon {
			font-size: 1.6em;
		}

		.chat-submenu {
			position: absolute;
			right: 30px;
			width: max-content;
			border: 1px solid #ccc;
			padding: 10px;
			background: #000000a8;
			color: #fff;
			font-size: 0.9em;
			display: flex;
			flex-direction: column;
			grid-row-gap: 5px;
			box-shadow: 5px 10px 12px rgba(0, 0, 0, 0.5);
		}

		.submenu-item {
			display: grid;
			grid-template-columns: 14px 1fr;
			grid-column-gap: 10px;
			align-items: center;
		}

		.icon-legend {
			/*font-size: 0.85em;*/
			color: #ccc;
			padding: 5px 10px;
			display: flex;
			flex-direction: column;
			grid-row-gap: 5px;
		}
		.icon-legend .client-icon {
			display: inline-block;
			width: 20px;
			text-align: center;
		}

		.options-head {
			background: rgba(0, 0, 0, 0.6);
			color: white;
			padding: 7px 7px 5px 8px;
			border-radius: 6px;
		}

		.server-status {
			display: grid;
			grid-template-columns: 100px 1fr;
			color: #a1a1a1;
			font-size: .8em;
		}

		.credits-status-wrap {
			display: grid;
			grid-template-columns: auto 60px 30px;
			grid-column-gap: 5px;
			align-items: center;
		}

		.list-admin-clients {
			margin-top: 20px;
			max-height: 400px;
			overflow-y: auto;
			padding-right: 5px;
			box-sizing: border-box;
			position: relative;
			left: 0;
			width: 100%;
		}

		.admin-streamer-data {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-column-gap: 10px;
			grid-row-gap: 5px;
			font-size: .8em;
			color: #a1a1a1;
			align-items: center;
			align-content: center;
			padding-right: 5px;

			max-height: 400px;
			overflow-y: auto;
			overflow-x: hidden;
			scrollbar-width: thin;
			scrollbar-color: #888 #f1f1f1;
		}

		.admin-streamer-data::-webkit-scrollbar {
			width: 6px;
		}
		.admin-streamer-data::-webkit-scrollbar-thumb {
			background-color: #888;
			border-radius: 4px;
		}
		.admin-streamer-data::-webkit-scrollbar-track {
			background-color: #f1f1f1;
		}

		.admin-streamer-data > *:nth-child(even) {
			text-align: right;
		}

#pin-keypad {
	width: fit-content;
	margin: 10px auto;
	text-align: center;
}

.keypad-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	width: fit-content;
}

.key {
	width: 51px;
	height: 51px;
	/*font-size: 1.2em;*/
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border: none;
	background-color: #f2f2f2;
	border-radius: 6px;
	transition: box-shadow 0.2s, transform 0.1s;
}

.key#clear,
.key#submit {
	font-size: 0.8em;
}

#pin-keypad.disabled .key {
	pointer-events: none;
	opacity: 0.4;
}

.key.active {
	background-color: #dcdcdc;
}

#keypad-pin {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border: none;
	background-color: #f2f2f2;
	border-radius: 6px;
	transition: box-shadow 0.2s, transform 0.1s;
    width: 163px;
    color: #a1a1a1;
    font-size: 0.8em;

	overflow-x: auto !important;
	white-space: nowrap;
	/*direction: rtl;
	text-align: left;*/
}

#keypad-pin:focus {
	outline: none;
	/*box-shadow: none;*/
}

.pin-box {
    background: #cd0606;
    color: #fff;
    width: fit-content;
    position: absolute;
    font-size: 2.5em;
    border-radius: 8px;
    padding: 5px 4px 4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.list-admin-clients-head {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    grid-column-gap: 9px;
    padding-right: 21px;
    align-items: stretch;
}

.list-admin-clients-head-item {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-size: .8em;
	padding: 5px 2px 5px 1px;
	color: #ccc;
	background: #000;
}

.pulse-caution {
    top: -3px;
    left: 37%;
    width: 18px;
    height: 18px;
    font-weight: bold !important;
    color: yellow;
    font-size: 0.5em;
    position: absolute;
    animation: pulseScale 2s infinite ease-in-out;
}

@keyframes pulseScale {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.icon-broadcom-wrap {
	position: relative;
	display: inline-block;
	bottom: 0;
}

.client-preview-item {
	display: grid;
	grid-template-columns: 1fr 40px;
	padding: 0 5px;
	background-color: transparent;
	transition: background-color 0.5s ease;
	color: #a1a1a1;
}


.client-update-1min { background-color: #fff0f0; color: #999999;}
.client-update-2min { background-color: #ffe0e0; color: #999999; }
.client-update-3min { background-color: #ffc0c0; color: #7a7a7a; }
.client-update-4min { background-color: #ff8080; color: #fff; }
.client-update-5min { background-color: #ff0000; color: #fff; }