.flim-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    padding: 5px;
    border-radius: 5px;
    overflow: visible;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-shadow: 0 1px 0 #fff !important;
}

.scroll-left-btn,
.scroll-right-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.3s, transform 0.2s ease-in-out;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	overflow: visible;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	transition: 0.2s;
}

.scroll-left-btn:hover, .scroll-right-btn:hover {
    background: #4255d4;
}
/* Ensuring icons are centered */
.scroll-left-btn i,
.scroll-right-btn i {
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.scroll-left-btn { left: 10px; }
.scroll-right-btn { right: 10px; }

.flim {
    flex-grow: 1;
    min-width: 98% !important;
    position: relative;
    overflow: auto;
    white-space: nowrap;
    max-height: calc(100vh - 30vh) !important;
}

.rtable {
    display: table;
    width: 100%;
    min-width: 95% !important;
    max-width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: auto;
    position: relative;
}

/* Фиксируем первую строку при вертикальном скролле */
.rtable thead th {
	position: sticky;
	top: 0;
background: rgb(50, 36, 36, 0.8);
  backdrop-filter: blur(40px);
  border-radius:4px;
	color: #FFF;
	text-shadow:none !important;
	border: 1px solid #ccc;
	padding: 8px 10px;
	font-size: 14px;
	z-index: 7;
	text-align: center;
	text-shadow:none !important;
	
	
}

/* Фиксируем первый столбец при горизонтальном скролле */
.rtable td:first-child{
	
}

.rtable tbody th:first-child {
	position: sticky;
	left: 0;
	border: 0.5px solid;
	padding: 8px 10px;
	font-size: 14px;
	z-index: 5;
	text-align: center;
	/*background-color: #434B70 !important;*/
background: rgb(50, 36, 36, 0.8);
  backdrop-filter: blur(40px);
  border-radius:4px;
	color: #FFF;
	text-shadow:none !important;
	/* Новые свойства для ограничения длины */
	max-width: 50px; /* или любое значение по желанию */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: all 0.3s ease;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
}

/* Обеспечиваем корректное наложение первой ячейки (угол) */
.rtable thead th:first-child {
	z-index: 7;
	text-align: center;
}

.rtable tbody td {
    font-size: 15px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 14px 20px;
    vertical-align: middle;
	z-index: 7;
}

.rtable tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

/* Включаем отображение кнопок при необходимости */
.scroll-left-btn.show,
.scroll-right-btn.show {
    opacity: 1 !important;
}