@charset "utf-8";
/* CSS Document */

.table-list-img-circle {
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}

.-table-conteiner { display: block; padding: 4px 0; }

.-table { display: grid; grid-template-columns: auto; list-style: none; padding: 0; margin: 16px 0; border: 1px solid var(--bg-color-4); border-radius: var(--border-radius); overflow: hidden; text-align: left; width: 100%; }
.-table > li { 
	position: relative; 
	padding: 12px 8px 12px 12px; 
	background: var(--bg-color-1); 
	color: #333;

	border-right: 1px solid var(--bg-color-4);
	border-bottom: 1px solid var(--bg-color-4);

	display: grid;
    align-content: center;
    justify-content: left;
}

.-table > li.col-end { border-right: none; }

.-table > li.row:after, .-table > li.col-1.row-cur:after { content: ''; position: absolute; width: 10000px; height: 0; pointer-events: none; background: #54BA3C29; left: -4000px; top: 0; z-index: 1; transition: all .4s ease; }
.-table > li.row:hover:after, .-table > li.col-1.row-cur:after { height: 100%; background: #54BA3C14; }

.-table > li, .-table > li a { color: var(--color-primary); }

.-table-2 { grid-template-columns: repeat(2, auto); }
.-table-3 { grid-template-columns: repeat(3, auto); }
.-table-4 { grid-template-columns: repeat(4, auto); }
.-table-5 { grid-template-columns: repeat(5, auto); }
.-table-6 { grid-template-columns: repeat(6, auto); }
.-table-7 { grid-template-columns: repeat(7, auto); }
.-table-8 { grid-template-columns: repeat(8, auto); }
.-table-9 { grid-template-columns: repeat(9, auto); }
.-table-10 { grid-template-columns: repeat(10, auto); font-size: 12px; }
.-table-11 { grid-template-columns: repeat(11, auto); font-size: 12px; }
.-table-12 { grid-template-columns: repeat(12, auto); font-size: 11px; }
.-table-13 { grid-template-columns: repeat(13, auto); font-size: 11px; }
.-table-14 { grid-template-columns: repeat(14, auto); font-size: 10px; }
.-table-15 { grid-template-columns: repeat(15, auto); font-size: 10px; }
.-table-16 { grid-template-columns: repeat(16, auto); font-size: 10px; }
.-table-17 { grid-template-columns: repeat(17, auto); font-size: 10px; }
.-table-18 { grid-template-columns: repeat(18, auto); font-size: 10px; }
.-table-19 { grid-template-columns: repeat(19, auto); font-size: 10px; }
.-table-20 { grid-template-columns: repeat(20, auto); font-size: 10px; }

.-table-colspan-2 { grid-column: span 2; }
.-table-colspan-3 { grid-column: span 3; }
.-table-colspan-4 { grid-column: span 4; }

.-table-rowspan-2 { grid-row: span 2; }
.-table-rowspan-3 { grid-row: span 3; }
.-table-rowspan-4 { grid-row: span 4; }

.-table-6, .-table-7 > li.row, .-table-8 > li.row, .-table-9 > li.row { font-size: 14px; }

.-table > li.row-even { background: var(--bg-color-7); }
.-table > .row-header { background: var(--bg-color-1); color: var(--bg-color-6); user-select: none; font-weight: 600; }

.-table > li:first-child { border-top-left-radius: 8px; }
.-table-1 > li:nth-of-type(1),
.-table-2 > li:nth-of-type(2),
.-table-3 > li:nth-of-type(3),
.-table-4 > li:nth-of-type(4),
.-table-5 > li:nth-of-type(5),
.-table-6 > li:nth-of-type(6),
.-table-7 > li:nth-of-type(7),
.-table-8 > li:nth-of-type(8),
.-table-9 > li:nth-of-type(9) { border-top-right-radius: 8px; }

.-table > li:last-child { border-bottom-right-radius: 8px; }
.-table-1 > li:nth-last-child(1),
.-table-2 > li:nth-last-child(2),
.-table-3 > li:nth-last-child(3),
.-table-4 > li:nth-last-child(4),
.-table-5 > li:nth-last-child(5),
.-table-6 > li:nth-last-child(6),
.-table-7 > li:nth-last-child(7),
.-table-8 > li:nth-last-child(8),
.-table-9 > li:nth-last-child(9) { border-bottom-left-radius: 8px; }

.table-list-img img { max-width: 100%; height: auto; max-height: 30px; object-fit: contain; border-radius: 8px; }

.table-list-img-circle { position: relative; display: inline-block; border-radius: 50%; width: 33px; height: 33px; border: 1px solid #fff; overflow: hidden; z-index: 1; }
.table-list-img-circle img { width: 100%; height: 100%; object-fit: cover; }
.table-list-img-circle:hover { transform: scale(3.5); z-index: 5; }
.table-list-img-circle a { display: block; width: 100%; height: 100%; opacity: 1 !important; }


@media (max-width: 768px) {
	.-table > .row-header { display: none; }
	.-table { grid-template-columns: 1fr; }
	.-table, .-table > li { text-align: right; }
	.-table > li { border-bottom-color: #b0d9f9; justify-content: space-between; gap: 8px; grid-template-columns: max-content auto; text-align: right; }
	.-table > li:before { content: attr(data-header); font-weight: bold; }
	
	.-table-1 > li:nth-of-type(1n),
	.-table-2 > li:nth-of-type(2n),
	.-table-3 > li:nth-of-type(3n),
	.-table-4 > li:nth-of-type(4n),
	.-table-5 > li:nth-of-type(5n),
	.-table-6 > li:nth-of-type(6n),
	.-table-7 > li:nth-of-type(7n),
	.-table-8 > li:nth-of-type(8n),
	.-table-9 > li:nth-of-type(9n) { border-bottom: 2px solid var(--color-primary); }
}
