/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
	--font-base: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--color-bg: #202229;
	--color-surface: #282a31;
	--color-surface-alt: #202229;
	--color-border: #363940;
	--color-border-strong: #44484f;
	--color-text: #d5d6d8;
	--color-muted: #928d86;
	--color-accent: #efb450;
	--focus-outline: #efb450;
}

body.light-mode {
	--color-bg: #fff;
	--color-surface: #7f7f7f;
	--color-surface-alt: #fff;
	--color-border: #202229;
	--color-border-strong: #202229;
	--color-text: #202229;
	--color-muted: #202229;
	--focus-outline: #202229;
}


/* #Site Styles
================================================== */

/* ### general ### */
html,
body {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 12px;
	color: var(--color-text);
	line-height: 1.5;
	transition: background-color 0.3s ease, color 0.3s ease;
}

body {
	background: var(--color-bg);
}

	body.light-mode {
		background: var(--color-bg);
	}

input,
select,
textarea {
	font-family: var(--font-base);
	font-size: 12px;
	color: var(--color-text);
}

img {
	display: block;
	border: 0;
	max-width: 100%;
	width: 100%;
	height: auto;
}

p {
	margin-bottom: 0;
}

ul,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--focus-outline);
	outline-offset: 2px;
}

#blazor-error-ui {
	background: #f3f3f3;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .reload {
		margin-right: 1rem;
	}

	#blazor-error-ui .dismiss {
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
		cursor: pointer;
	}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

a {
	color: var(--color-text);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	display: inline-block;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

.h1,
h1 {
	font-size: 24px;
}

.h2,
h2 {
	font-size: 24px;
}

.h3,
h3 {
	font-size: 20px;
}

.h4,
h4 {
	font-size: 16px;
}

.h5,
h5 {
	font-size: 12px;
}

.h6,
h6 {
	font-size: 11px;
}

.green-icon {
	fill: green;
}

.logo-yellow {
	color: #efb450;
}
/* ### global classes ### */
.centered {
	padding-right: calc((100% - 1628px) / 2);
	padding-left: calc((100% - 1628px) / 2);
}

.centered-xl {
	padding-right: calc((100% - 1666px) / 2);
	padding-left: calc((100% - 1666px) / 2);
}

.history {
	color: cornflowerblue;
}

.history-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.history-stack .surface-card,
.history-stack .freezerBox,
.history-stack .pagination-box,
.history-stack .history-search-card {
	width: 100%;
}

/* ### wrapper ### */
#wrapper {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100%;
	overflow: auto;
}

/* ### main container ### */
#mainCntr {
	width: 100%;
	position: relative;
	padding: 1rem;
}

/* ### top box ### */
.topBox {
	padding-top: 15px;
	padding-bottom: 15px;
	background: linear-gradient(90deg, rgba(30,33,57,1) 32%, rgba(149,43,58,1) 50%);
}

	.topBox .js-usp-slider {
		width: 472px;
		margin: 0 auto;
	}

	.topBox .item {
		margin-right: 56px;
		color: #fff;
	}

		.topBox .item:last-child {
			margin-right: 0;
		}

/* ### header box ### */
.headerBox {
	padding-top: 21px;
	padding-bottom: 20px;
	border-bottom: 1px solid #44484f;
}

	.headerBox .logo {
		color: #fff;
		padding-left: 16px;
	}

		.headerBox .logo img {
			max-width: 100%;
			width: 64px;
			height: 62px;
		}

		.headerBox .logo span {
			color: #d5d6d8;
			display: inline-block;
			margin-left: 21px;
			margin-top: 6px;
			font-size: 14px;
		}

		.headerBox .logo b {
			color: #fff;
			font-size: 40px;
			display: inline-block;
			margin-right: 7px;
			font-weight: 600;
		}

/* ### header light mode ### */
body.light-mode .headerBox {
	border-bottom: 1px solid var(--color-border);
}

body.light-mode .logo span {
	color: var(--color-text);
}

body.light-mode .logo b {
	color: #000;
}

/* ### user box ### */
.userBox {
	position: relative;
	padding-top: 20px;
	font-size: 14px;
	cursor: pointer;
}

	.userBox ul {
		display: none;
	}

	.userBox .user {
		background: transparent;
		border: none;
		color: inherit;
		display: inline-flex;
		align-items: center;
		padding: 0;
	}

	.userBox.open ul {
		display: block;
	}

	.userBox .user:after {
		margin-left: 8px;
		content: "\e900";
		font-family: 'icomoon', sans-serif;
		vertical-align: middle;
		display: inline-block;
		font-size: 5px;
	}

	.userBox .user:before {
		margin-top: -1px;
		background-image: url('../images/profile.svg');
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: inline-block;
		width: 13px;
		height: 16px;
		margin-right: 12px;
		vertical-align: middle;
	}

	.userBox ul {
		position: absolute;
		top: 47px;
		right: 0;
		padding: 6px;
		border: 2px solid #32353c;
		border-radius: 5px;
		width: 140px;
		text-align: left;
		z-index: 4;
		background: var(--color-surface-alt);
	}

	.userBox li {
		font-size: 11px;
	}

		.userBox li a {
			padding: 7px 5px;
			background: transparent;
			display: block;
			color: #928d86;
		}

		.userBox li a.active,
		.userBox li a:hover {
			background: var(--color-surface);
			color: var(--color-text);
		}

	.userBox li form {
		margin: 0;
	}

	.userBox li button {
		padding: 7px 5px;
		background: transparent;
		display: block;
		color: #928d86;
		border: none;
		text-align: left;
		width: 100%;
		font-size: 11px;
		cursor: pointer;
	}

		.userBox li button:hover {
			background: var(--color-surface);
			color: var(--color-text);
		}

textarea {
	background: var(--color-surface-alt);
	outline: none;
	border: none;
	width: 100%;
	font-size: 20px;
	font-family: var(--font-base);
	color: var(--color-text);
	text-align: left;
	resize: none;
	white-space: normal;
	line-height: 1.5;
	padding: 8px;
	border-radius: 6px;
}

/* ### user light mode ### */
body.light-mode .userBox span {
	color: var(--color-text);
}

body.light-mode .user:after {
	color: var(--color-text);
}

body.light-mode .userBox .user:before {
	background: url('../images/user-black.png') no-repeat;
}

body.light-mode .userBox ul {
	background: #7f7f7f;
}

body.light-mode .userBox li a {
	color: #000;
}

	body.light-mode .userBox li a.active,
	body.light-mode .userBox li a:hover {
		background: #282a31;
		color: #d5d6d8;
	}

body.light-mode .userBox li button {
	color: #000;
}

	body.light-mode .userBox li button:hover {
		background: #282a31;
		color: #d5d6d8;
	}

/* ### content container ### */
#contentCntr {
	width: 100%;
}

/* ### dashboard box ### */
.dashboardBox {
	min-height: 100%;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 0;
	align-items: stretch;
}

/* ### left container ### */
#leftCntr {
	width: 100%;
	/*border-right: 1px solid #44484f;*/
	max-width: none;
	border-right: 1px solid #30333d;
	background: #1d1f26;
	padding-top: 24px;
}

body.light-mode #leftCntr {
	border-right: 1px solid #fff;
}

/* ### right container ### */
#rightCntr {
	width: 100%;
}

/* ### left box ### */
.leftBox {
	position: relative;
	height: calc(100vh - 156px);
	display: flex;
	flex-direction: column;
}

	.leftBox ul {
		width: 100%;
		flex: 1 1 auto;
	}

	.leftBox .nav-link {
		position: relative;
		display: block;
		padding: 13px 15px 13px 15px;
		color: #fff;
	}

		.leftBox .nav-link:before {
			content: '';
			width: 1px;
			background: #efb450;
			height: 44px;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			visibility: hidden;
		}

		.leftBox .nav-link.active,
		.leftBox .nav-link:hover {
			background: #282a31;
		}

			.leftBox .nav-link.active:before,
			.leftBox .nav-link:hover:before {
				opacity: 1;
				visibility: visible;
			}

body.light-mode .leftBox {
	background: #7f7f7f;
}

#leftCntr footer,
.leftBox footer,
.leftBox .footer {
	margin-top: auto;
}

/* ### toggle-mm ### */
.toggle-mm {
	position: absolute;
	top: 57px;
	right: 23px;
	z-index: 9;
	display: none;
	width: 18px;
	height: 29px;
	border-radius: 50%;
	transition: all 0.3s;
	cursor: pointer;
}

	.toggle-mm div {
		margin: 4px auto;
		width: 18px;
		height: 2px;
		background-color: #d5d6d8;
		transition: all 0.4s;
		backface-visibility: hidden;
	}

	.toggle-mm .one {
		margin: 10px auto 4px;
	}

	.toggle-mm.on .one {
		transform: rotate(45deg) translate(6px, 5px);
	}

	.toggle-mm.on .two {
		opacity: 0;
	}

	.toggle-mm.on .three {
		float: none;
		transform: rotate(-45deg) translate(4px, -3px);
	}

/* ### right box ### */
.rightBox {
	position: relative;
	padding: 24px;
	height: calc(100vh - 156px );
	overflow: auto;
}

/* ### view box ### */
.viewBox {
	padding: 0;
}

	.viewBox .change,
	.viewBox .switch {
		color: #fff;
		font-size: 10px;
	}

		.viewBox .change:before,
		.viewBox .switch:before {
			content: '';
			margin-right: 7px;
			display: inline-block;
			vertical-align: middle;
		}

		.viewBox .change:before {
			background-image: url('../images/switch.svg');
			background-repeat: no-repeat;
			background-size: contain;
			height: 11px;
			width: 13px;
		}

		.viewBox .switch:before {
			background-image: url('../images/lightmode.svg');
			background-repeat: no-repeat;
			background-size: contain;
			height: 7px;
			width: 13px;
		}

body.light-mode .switch,
body.light-mode .change {
	color: var(--color-text);
}

body.light-mode .viewBox .change:before {
	background: url('../images/spinner-black.png') no-repeat;
}

body.light-mode .viewBox .switch:before {
	background: url('../images/eye-black.png') no-repeat;
}

/* ### export box ### */
.exportBox {
	padding: 8px 8px 10px 8px;
	background: #282a31;
	border: 1px solid #363940;
	margin-bottom: 1rem;
}

	.exportBox.id {
		padding: 10px 8px 8px 15px;
	}

body.light-mode .exportBox {
	background: #7f7f7f;
}

/* ### filter alert box ### */
.alert-filter {
	background: #282a31;
	border: 1px solid #363940;
	margin-bottom: 1rem;
	padding: 1rem;
}


/* ### search box ### */
.search-box { /*max-width: 575px;*/
	position: relative;
}

	.search-box .box {
		max-width: 391px;
	}

	.search-box .form-control {
		padding: 5px 15px 5px 36px;
		max-width: 526px;
		width: 100%;
		height: 34px;
		color: var(--color-text);
		font-size: 11px;
		border: 2px solid var(--color-border);
		background: var(--color-surface-alt);
		border-radius: 0;
	}

		.search-box .form-control:focus {
			outline: inherit;
			box-shadow: inherit;
		}

	.search-box input::placeholder {
		color: var(--color-border-strong);
	}

	.search-box .search-icn {
		position: absolute;
		top: 7px;
		left: 5px;
		font-size: 16px;
	}

	.search-box button {
		background: transparent;
		border: 0;
		cursor: pointer;
	}

body.light-mode .search-box .form-control {
	background: #fff;
}

body.light-mode .search-icn .icon-search:before {
	color: #000;
}

/* ### records box ### */
.recordsbox {
	max-width: 350px;
}

.records {
	/*max-width: 391px;*/
	padding: 6px 8px 8px 8px;
	background: var(--color-surface-alt);
	border: 2px solid var(--color-border);
	height: 34px;
}

.page-size-list {
	list-style-type: none;
	padding: 0;
	display: flex;
	margin: 0 auto;
}

	.page-size-list li {
		cursor: pointer;
		border-radius: 4px;
		transition: background-color 0.3s;
		padding: 3px 15px 2px;
		border: 2px solid transparent;
		background: transparent;
		color: #928d86;
		font-size: 12px;
	}

		/*		.page-size-list li:hover {
			background-color: #e2e6ea;
		}*/

		.page-size-list li.active,
		.page-size-list li:hover {
			/*			font-weight: bold;*/
			background: var(--color-surface-alt);
			color: var(--color-text);
		}

/* ### filter box ### */
.filter-box {
	max-width: 447px;
}

	.filter-box .filter { /*max-width: 475px;*/
		padding: 6px 8px 8px 8px;
		background: var(--color-surface-alt);
		border: 2px solid var(--color-border);
		height: 34px;
	}

	.filter-box ul {
		margin: 0 auto;
	}
	/*.filter-box li:first-child,
.filter-box li:last-child { margin-right: 0; }*/
	.filter-box li:first-child:after {
		display: none;
	}

	.filter-box li {
		position: relative;
		display: inline-block;
		margin-right: 16px;
		font-size: 11px;
		cursor: pointer;
	}
	/*.filter-box .filter-drop:hover {
	font-weight: normal;*/ /* Bold text on hover */
	/*}*/
	.filter-box .filter-drop {
		position: relative;
		padding-right: 16px;
	}

		.filter-box .filter-drop:after {
			position: absolute;
			top: 5px;
			right: 0;
			margin-left: 5px;
			content: "\e900";
			font-family: 'icomoon', sans-serif;
			vertical-align: middle;
			display: inline-block;
			font-size: 5px;
		}
	/*.filter-box li.is_active .select-check { display: block; }*/
	.filter-box .select-check.is_active {
		display: block; /* Visible when is_active class is added */
	}

	.filter-box .select-check {
		padding: 10px 10px 10px 10px;
		background: #282a31;
		border: 1px solid #363940;
		border-radius: 5px;
		position: absolute;
		top: 34px;
		right: -14px;
		width: 184px;
		z-index: 1;
		display: none;
	}
		/*.filter-box .select-check:hover {font-weight:normal}*/

		.filter-box .select-check:after {
			top: -12px;
			right: 10px;
			border-color: rgba(61, 53, 60, 0);
			border-bottom-color: #282a31;
			border-width: 6px;
			margin-left: -6px;
		}

		.filter-box .select-check:before {
			top: -14px;
			right: 9px;
			border-color: rgba(54, 57, 64, 0);
			border-bottom-color: #363940;
			border-width: 7px;
			margin-left: -7px;
		}

	.filter-box label {
		display: flex;
		align-items: center;
		cursor: pointer;
		margin-right: 11px;
	}

		.filter-box label:last-child {
			margin-right: 0;
		}

	.filter-box span {
		display: block;
		margin-right: 6px;
	}

	.filter-box input[type='checkbox'] {
		cursor: pointer;
		height: 11px;
		width: 11px;
		border: 1px solid var(--color-border-strong);
		background: var(--color-surface-alt);
		appearance: none;
		border-radius: 0;
		margin-top: -2px;
	}

	.filter-box .form-check-input:checked:before {
		border: 1px solid var(--color-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		background: url('../images/check.png') no-repeat center center;
		height: 11px;
		width: 11px;
		content: '';
	}

	.filter-box .form-check-input:focus {
		outline: inherit;
		box-shadow: inherit;
	}

body.light-mode .filter {
	background: #fff;
}

body.light-mode .filter-box li {
	color: #000;
}

	body.light-mode .filter-box li:after {
		color: #000;
	}

.form-check-input:checked[type=checkbox] {
	background: none;
}

body.light-mode .filter-box .select-check {
	background: #fff;
}

	body.light-mode .filter-box .select-check:before {
		border-bottom-color: #fff;
	}

	body.light-mode .filter-box .select-check:after {
		border-bottom-color: #fff;
	}

body.light-mode .form-check-input:checked:before {
	margin-top: -1px;
	margin-left: -1px;
}

/* ### upload box ### */
.upload-box {
	position: relative;
	padding: 7px 11px 5px 11px;
	background: var(--color-surface-alt);
	border: 2px solid var(--color-border);
	height: 34px;
	cursor: pointer;
}

	.upload-box.open ul {
		display: block;
	}

	.upload-box span {
		display: inline-block;
		text-decoration: underline;
		font-size: 11px;
		color: #d5d6d8;
	}

		.upload-box span:before {
			background-image: url('../images/export.svg');
			background-repeat: no-repeat;
			background-size: contain;
			height: 18px;
			width: 13px;
			display: inline-block;
			margin-right: 8px;
			vertical-align: middle;
			content: '';
			margin-top: -3px;
		}

	.upload-box ul {
		position: absolute;
		top: 38px;
		right: 0;
		padding: 6px;
		border: 2px solid #32353c;
		border-radius: 5px;
		width: 160px;
		text-align: center;
		z-index: 4;
		background: var(--color-surface-alt);
		display: none;
	}

	.upload-box li {
		font-size: 11px;
	}

		.upload-box li a {
			padding: 7px 5px;
			background: transparent;
			display: block;
			color: #928d86;
		}

			.upload-box li a.active,
			.upload-box li a:hover {
				background: var(--color-surface);
				color: var(--color-text);
			}

body.light-mode .upload-box {
	background: #fff;
}

	body.light-mode .upload-box span {
		color: #000;
	}

		body.light-mode .upload-box span:before {
			background: url('../images/upload-black.png') no-repeat;
		}

	body.light-mode .upload-box ul {
		background: #7f7f7f;
	}

	body.light-mode .upload-box li a {
		color: #000;
	}

		body.light-mode .upload-box li a.active,
		body.light-mode .upload-box li a:hover {
			background: #282a31;
			color: #d5d6d8;
		}

/* ### id box ### */
.id-box h1 {
	margin-bottom: 0;
}

/* ### freezer box ### */
.freezerBox {
	margin-bottom: 1rem;
}

	.freezerBox .table-toolbar {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}

	.freezerBox .records-dropdown {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.freezerBox .records-dropdown label {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-muted);
	}

	.freezerBox .records-dropdown-select {
		appearance: none;
		background: var(--color-surface-alt);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		border-radius: 999px;
		padding: 6px 32px 6px 12px;
		font-size: 12px;
		min-width: 120px;
		cursor: pointer;
	}

	.freezerBox .records-dropdown-select:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

@media (max-width: 768px) {
	.freezerBox .table-toolbar {
		justify-content: flex-start;
	}
}

	.freezerBox .row {
		margin: 0 -12px;
	}

	.freezerBox .left {
		flex: 0 0 auto;
		width: 77.9%;
		padding: 0 12px;
		position: relative;
	}

	.freezerBox #history.left {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 12px;
		position: relative;
	}

	.freezerBox .right {
		flex: 0 0 auto;
		width: 22.1%;
		padding: 0 12px;
	}

	.freezerBox .box {
		padding: 33px 15px 34px;
		background: #282a31;
		border: 1px solid #363940;
		margin-bottom: 6px;
	}

		.freezerBox .box span {
			display: block;
			color: #efb450;
			font-size: 14px;
			margin-bottom: 12px;
		}

		.freezerBox .box h2 {
			margin-bottom: 0;
			font-weight: 500;
		}

	.freezerBox .freezer {
		position: relative;
		max-width: 272px;
		margin: 0 auto;
	}

	.freezerBox .tooltips {
		position: absolute;
		top: 95px;
		left: 44px;
		width: 145px;
		z-index: 2;
	}

	.freezerBox.inner .left .box {
		padding: 0 0 12px 0;
	}

	.freezerBox .counting {
		padding: 14px 17px 11px;
		text-align: center;
		border-bottom: 1px solid #474b52;
	}
	/*.freezerBox .counting:after { margin-left: 7px; content: "\e900"; font-family: 'icomoon', sans-serif; vertical-align: middle; display: inline-block; font-size: 5px; }*/
	.freezerBox .icon-warning {
		font-size: 16px;
	}

		.freezerBox .icon-warning:before {
			color: #41454e;
		}

	.freezerBox .yellow.icon-warning:before {
		color: #f5d700;
	}

	.freezerBox .slick-arrow {
		position: absolute;
		top: 45%;
		font-size: 0;
		background: transparent;
		border: 0;
		z-index: 2;
	}

	.freezerBox .slick-prev {
		left: 160px;
	}

	.freezerBox .slick-next {
		right: 160px;
		transform: rotate(-180deg);
	}

	.freezerBox .slick-prev:before {
		transition: all 0.3s;
		content: "\e907";
		font-family: 'icomoon', sans-serif;
		font-size: 90px;
		color: #efb450;
	}

	.freezerBox .slick-next:before {
		transition: all 0.3s;
		content: "\e907";
		font-family: 'icomoon', sans-serif;
		font-size: 90px;
		color: #efb450;
	}

	.freezerBox .slick-arrow.slick-disabled:before {
		color: #474b52;
	}

body.light-mode .freezerBox .box {
	background: #7f7f7f;
}

body.light-mode .freezerBox .slick-prev:before,
body.light-mode .freezerBox .slick-next:before {
	color: #fff;
}
/* ### table box ### */
.table-second {
	padding: 2px 2px 2px 1px;
	margin-bottom: 3.5px;
	background: #2a2a2c;
}

	.table-second th {
		width: 20%;
		font-size: 10px;
		color: darkgrey;
		padding-bottom: 4px;
	}

	.table-second td {
		width: 20%;
	}

		.table-second td a {
			background: #4bbb24;
			display: block;
			height: 9.2px;
			width: 100%;
		}

			.table-second td a:hover {
				background: #d5d6d8;
			}

		.table-second td.empty a {
			background: #9da1a9;
		}

			.table-second td.empty a:hover {
				background: #d5d6d8;
			}

/* ### table box ### */
.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-box {
	background: #282a31;
	border: 1px solid #363940;
	padding-bottom: 10px;
	overflow-x: auto;
	border-radius: 16px;
}

	.table-box th {
		padding: 18px 15px 13px 15px;
		border-bottom: 1px solid #363940;
		font-weight: 500;
	}

		.table-box th:after {
			background: url('../images/up-down-arrow.png') no-repeat;
			height: 11px;
			width: 9px;
			display: inline-block;
			vertical-align: middle;
			content: '';
			margin-left: 7px;
		}

	.table-box td {
		padding: 15px 15px 11px 15px;
		font-weight: 400;
		font-size: 11px;
	}

		.table-box td.orange {
			color: #efb450;
			background: #33353c;
		}

	.table-box .id {
		position: relative;
		display: inline-block;
		margin-left: 7px;
	}

	.table-box .position {
		display: inline-block;
	}

	.table-box .table-box .id:after {
		height: 1px;
		width: 100%;
		background: #64656a;
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.table-box .circle {
		height: 9px;
		width: 9px;
		background: #4c9a3d;
		border-radius: 50%;
		display: inline-block;
	}

		.table-box .circle.red {
			background: #ae6c48;
		}

	.table-box input[type='checkbox'] {
		cursor: pointer;
		height: 11px;
		width: 11px;
		border: 1px solid var(--color-border-strong);
		background: var(--color-surface-alt);
		border-radius: 50%;
		appearance: none;
	}

	.table-box .form-check-input:checked:before {
		margin-top: -1px;
		margin-left: -1px;
		border: 1px solid var(--color-accent);
		display: flex;
		background: url('../images/check.png') no-repeat center center;
		height: 11px;
		width: 11px;
		content: '';
		border-radius: 50%;
	}

	.table-box .form-check-input:focus {
		outline: inherit;
		box-shadow: inherit;
	}

body.light-mode .table-box {
	background: #7f7f7f;
}

	body.light-mode .table-box input[type='checkbox'] {
		background: #fff;
	}

	body.light-mode .table-box .form-check-input:checked:before {
		background: url('../images/check-black.png') no-repeat center center;
		border: 1px solid #000;
		display: flex;
	}

	body.light-mode .table-box td.orange {
		background: #fff;
	}

/* ### pagination box ### */
.pagination-box {
	padding: 10px 10px 10px 23px;
	background: #282a31;
	border: 1px solid #363940;
	margin-bottom: 28px;
}

	.pagination-box p {
		font-size: 10px;
		color: var(--color-muted);
	}

	.pagination-box a {
		padding: 3px 15px 2px;
		border: 2px solid transparent;
		background: transparent;
		color: var(--color-muted);
		font-size: 12px;
	}

		.pagination-box a.active,
		.pagination-box a:hover {
			background: var(--color-surface-alt);
			border: 2px solid var(--color-border);
			color: var(--color-text);
		}

	.pagination-box li:first-child a,
	.pagination-box li:last-child a {
		font-size: 10px;
	}

	.pagination-box button {
		padding: 3px 15px 2px;
		border: 2px solid transparent;
		background: transparent;
		color: var(--color-muted);
		font-size: 12px;
	}

		/*		.pagination-box button:hover {
			background-color: #e2e6ea;
		}*/

		.pagination-box button.active,
		.pagination-box button:hover {
			background: var(--color-surface-alt);
			border: 2px solid var(--color-border);
			color: var(--color-text);
		}

	.pagination-box span {
		margin: 0 5px;
		color: #666;
	}

.pagination-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}


body.light-mode .pagination-box {
	background: #7f7f7f;
}

	body.light-mode .pagination-box a.active,
	body.light-mode .pagination-box a:hover {
		background: #fff;
		border: 2px solid #000;
		color: #000;
	}

	body.light-mode .pagination-box p {
		color: #d1d2d4;
	}

	body.light-mode .pagination-box a {
		color: #d1d2d4;
	}

/* ### extreme box ### */
.extremeBox .row {
	margin: 0 0px;
}

.extremeBox .item {
	margin-bottom: 15px;
	padding: 0 11px;
}

.extremeBox .box {
	width: 49.6%;
	padding: 38px 15px 45px;
	background: #282a31;
	border: 1px solid #363940;
	margin-bottom: 6px;
}

	.extremeBox .detail-master-column {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

		.extremeBox .detail-master-column > .col {
			width: 100%;
		}

		.extremeBox .detail-master-column > .log-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-top: 0;
		}

			.extremeBox .detail-master-column > .log-box .gap {
				flex: 1;
				display: flex;
			}

				.extremeBox .detail-master-column > .log-box .gap .log {
					flex: 1;
					height: auto;
				}

	.extremeBox .detail-summary-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

		.extremeBox .detail-summary-grid .detail-card {
			width: 100%;
			padding: 24px 16px;
			margin-bottom: 0;
		}

@media (max-width: 768px) {
	.extremeBox .detail-summary-grid {
		grid-template-columns: 1fr;
	}
}

	.extremeBox .box:nth-of-type(+n +3) {
		margin-bottom: 0;
	}

	.extremeBox .box span {
		display: block;
		color: #efb450;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.extremeBox .box h2 {
		margin-bottom: 0;
		font-weight: 500;
		position: relative;
		display: inline-block;
	}

	.extremeBox .box:nth-child(2) h2:after {
		height: 1px;
		width: 100%;
		background: #d5d6d8;
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
	}

	.extremeBox .box:last-child h2#greenDot:before {
		content: '';
		height: 12px;
		width: 12px;
		background: #4c9a3d;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 9px;
	}

	.extremeBox .box:last-child h2#redDot:before {
		content: '';
		height: 12px;
		width: 12px;
		background: #dc3545;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 9px;
	}

body.light-mode .extremeBox .box {
	background: #7f7f7f;
}

/* ### alert box ### */
.alert-box {
	background: #282a31;
	border: 1px solid #363940;
	min-height: 100%;
}

	.alert-box .title {
		padding: 17px 17px 18px;
		margin-bottom: 0;
		border-bottom: 1px solid #363940;
	}

	.alert-box .gap {
		padding-right: 13px;
	}

	.alert-box .alert {
		padding: 0 17px;
		height: 225px;
		overflow-y: scroll;
	}

	.alert-box p {
		position: relative;
		padding: 21px 50px 17px 35px;
		font-size: 9px;
		border-bottom: 1px solid #363940;
		line-height: 1.65;
	}

		.alert-box p:before {
			position: absolute;
			top: 18px;
			left: 0;
			content: '\e906';
			font-family: 'icomoon', sans-serif;
			font-size: 16px;
			color: #f5d700;
		}

body.light-mode .alert-box {
	background: #7f7f7f;
}

/* ### notes box ### */
.notes-box {
	background: #282a31;
	border: 1px solid #363940;
	min-height: 100%;
}

	.notes-box .heading {
		padding: 13px 13px 12px 17px;
		border-bottom: 1px solid #363940;
		margin: 0 0 15px;
	}

	.notes-box .title {
		margin-bottom: 0;
	}

	.notes-box .gap {
		padding: 0 13px 15px;
	}

	.notes-box .plus {
		height: 33px;
		width: 33px;
		border: 1px solid #363940;
		border-radius: 50%;
		background: var(--color-surface-alt);
	}

	.notes-box .notes {
		min-height: 420px;
		max-height: 620px;
		overflow-y: auto;
		padding: 0 8px 0 0;
		scrollbar-width: thin;
	}

	.notes-box .note-editor {
		width: 100%;
		min-height: 320px;
		resize: vertical;
	}

	.notes-box .notes-content {
		margin: 0;
		line-height: 1.65;
		font-size: 0.95rem;
		white-space: pre-wrap;
	}

	.notes-box .notes-empty {
		margin: 0;
		color: rgba(213, 214, 216, 0.6);
		font-style: italic;
		text-align: center;
		padding: 2rem 1rem;
		border: 1px dashed rgba(213, 214, 216, 0.3);
		border-radius: 8px;
	}

body.light-mode .notes-box {
	background: #7f7f7f;
}

/* ### log box ### */
.log-box {
	background: #282a31;
	border: 1px solid #363940;
	margin-top: 15px;
}

	.log-box .heading {
		padding: 17px 16px 17px;
		border-bottom: 1px solid #363940;
	}

	.log-box .status {
		padding: 15px 0 8px;
		margin: 0 15px 16px;
		border-bottom: 1px solid #363940;
	}

	.log-box .stamp {
		font-size: 12px;
		width: 50%;
	}

		.log-box .stamp:last-child {
			padding-left: 23px;
		}

		.log-box .stamp:after {
			background: url('../images/up-down-arrow.png') no-repeat;
			height: 11px;
			width: 9px;
			display: inline-block;
			vertical-align: middle;
			content: '';
			margin-left: 7px;
		}

	.log-box .title {
		margin-bottom: 0;
	}

	.log-box .frame {
		font-size: 14px;
		font-weight: 500;
	}

	.log-box .detail-log-table-wrapper {
		padding: 0 15px 20px;
		flex: 1;
		display: flex;
		max-height: 350px;
	}

		.log-box .detail-log-table-wrapper .table-responsive {
			width: 100%;
		}

		.log-box .detail-log-table {
			width: 100%;
			min-width: 480px;
			border-collapse: collapse;
		}

			.log-box .detail-log-table th,
			.log-box .detail-log-table td {
				text-align: left;
				padding: 10px 12px;
				border-bottom: 1px solid #363940;
				font-size: 0.9rem;
			}

			.log-box .detail-log-table th {
				text-transform: uppercase;
				font-size: 0.75rem;
				letter-spacing: 0.05em;
				color: rgba(213, 214, 216, 0.8);
			}

@media (max-width: 575px) {
	.log-box .detail-log-table {
		min-width: 360px;
		font-size: 0.85rem;
	}

	.log-box .detail-log-table th,
	.log-box .detail-log-table td {
		padding: 8px 10px;
	}
}

		.log-box .frame:after {
			margin-left: 5px;
			content: "\e900";
			font-family: 'icomoon', sans-serif;
			vertical-align: middle;
			display: inline-block;
			font-size: 5px;
		}

	.log-box .gap {
		padding-right: 13px;
	}

	.log-box .log {
		padding: 0 15px;
		height: 225px;
		overflow-y: scroll;
	}

	.log-box .left {
		width: 50%;
	}

	.log-box .right {
		width: 50%;
		padding-left: 33px;
	}

	.log-box .timing {
		font-size: 12px;
		margin-bottom: 6.5px;
		white-space: nowrap;
		overflow: hidden;
	}

	.log-box .circle {
		height: 9px;
		width: 9px;
		background: #4c9a3d;
		border-radius: 50%;
		margin-bottom: 15.1px;
		margin-top: 5px;
	}

		.log-box .circle.orange {
			background: #ae6c48;
		}

body.light-mode .log-box {
	background: #7f7f7f;
}

/* ### copyright Box ### */
.copyright {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px 10px 15px 20px;
	border-top: 1px solid #44484f;
	width: 100%;
}

	.copyright p {
		font-size: 10px;
		margin-bottom: 0;
	}

/* ### tooltip container ### */
.tooltip-inner {
	padding: 3px 10px !important;
	font-size: 7px;
	background-color: #fff;
	color: #282a31;
	opacity: 1 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #fff;
	display: none;
}

.scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: transparent;
	border: 2px solid #44484f;
}

.scrollbar::-webkit-scrollbar {
	width: 8px;
	border-radius: 10px;
	border: 2px solid #44484f;
}

.scrollbar::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #44484f;
}


/* #Media Queries
================================================== */

@media only screen and (max-width: 1700px) {
	.centered {
		padding-left: 15px;
		padding-right: 15px;
	}

	.headerBox .logo {
		padding-left: 0;
	}

	.viewBox {
		padding: 0;
	}

	.exportBox {
		margin-bottom: 15px;
	}

	.table-box td {
		padding: 10px 10px 10px 10px;
	}

	.table-box th {
		padding: 13px 15px 13px 15px;
	}
}



@media only screen and (max-width: 1400px) {
	.filter-box {
		width: 43%;
	}

	.freezerBox .slick-prev {
		left: 20px;
	}

	.freezerBox .slick-next {
		right: 20px;
	}

	.copyright {
		position: static
	}
}



@media screen and (max-device-width: 1199px) and (orientation: landscape) {
	.leftBox {
		height: 100%;
	}

	.rightBox {
		height: 100%;
	}
}

@media only screen and (max-width: 1024px) {
	.dashboardBox {
		grid-template-columns: clamp(220px, 24vw, 260px) 1fr;
	}

	#rightCntr {
		width: 100%;
	}

	#rightCntr .dashboard-grid {
		display: block;
		width: 100%;
	}

	#rightCntr .search-card,
	#rightCntr .summary-grid,
	#rightCntr .filter-panel-modern,
	#rightCntr .freezerBox,
	#rightCntr .pagination-box {
		width: 100%;
		min-width: 0;
	}

	.filter-box {
		width: 49%;
	}
}

@media only screen and (max-width: 1260px) {
	#leftCntr {
		width: 15%;
	}

	#rightCntr {
		width: 83%;
	}

	.leftBox {
		height: 100%;
	}

	.rightBox {
		height: 100%;
		padding: 24px;
	}


	.search-box {
		width: 100%;
		min-width: 300px; /*margin-bottom: 10px;*/
	}

		.search-box .form-control {
			max-width: 100%;
		}

	.filter-box {
		width: 100%;
	}

	.recordsbox {
		width: 80%;
	}

	.freezerBox .left {
		width: 100%;
	}

	.freezerBox .right {
		width: 100%;
	}

	.table-box {
		margin-bottom: 20px;
	}

	.extremeBox .item {
		width: 100%;
	}
}

/* Force consistent layout for nav/content and dashboard grid on tablet/desktop */
@media (min-width: 768px) {
	#leftCntr {
		width: 260px !important;
	}

	#rightCntr {
		width: calc(100% - 260px) !important;
	}

	.dashboardBox {
		grid-template-columns: 260px 1fr !important;
	}
}

@media only screen and (max-width: 767px) {
	.toggle-mm {
		display: block;
	}

	#leftCntr {
		width: 100%;
		min-height: auto;
		padding-top: 0px;
	}

	#rightCntr {
		width: 100%;
		padding: 12px;
	}

	.rightBox {
		padding: 0;
	}


	.topBox .js-usp-slider {
		width: 100%;
		text-align: center;
	}

	.topBox .item {
		margin-right: 0;
	}

	.userBox {
		margin-right: 34px;
	}

		.userBox span {
			display: none;
		}

		.userBox .user:after {
			display: none;
		}

		.userBox .user:before {
			margin-right: 0;
		}

	.viewBox .switch {
		display: none;
	}

	.headerBox .logo b {
		font-size: 30px;
	}

	.headerBox .logo span {
		font-size: 11px;
	}

	.leftBox {
		position: relative;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		background: var(--color-surface-alt);
		transition: opacity 0.3s ease;
	}

		.leftBox.open {
			max-height: none;
			opacity: 1;
			visibility: visible;
			overflow: visible;
			padding-bottom: 12px;
		}

	.filter-box {
		width: 50%;
	}

	.filter:before {
		background-image: url('../images/filter-menu.svg');
		background-repeat: no-repeat;
		background-size: contain;
		height: 14px;
		width: 13px;
		display: inline-block;
		margin-right: 6px;
		vertical-align: middle;
		content: '';
	}

	.filter-box .select-check {
		position: unset;
		left: auto;
		top: auto;
	}

	.filter-box li {
		display: block;
	}

	/*.freezerBox .right { display: none; }*/
	.filter-box .filter {
		max-width: 83px;
		height: auto;
	}

	.filter-box li {
		margin-right: 0;
	}

		.filter-box li:first-child:after {
			display: block;
		}

		.filter-box li:after {
			position: absolute;
			top: 5px;
			right: 0;
		}

	.filter-box .phone-checkboxes {
		display: none;
	}

		.filter-box .phone-checkboxes ul {
			margin-top: 0;
			padding: 10px 10px 10px 10px;
			background: #282a31;
			border: 1px solid #363940;
			border-radius: 5px;
			z-index: 1;
			width: 130px;
		}

	.id-box h1 {
		font-size: 20px;
	}

	.filter-box .select-check:before,
	.filter-box .select-check:after {
		display: none;
	}

	#rightCntr .dashboard-grid {
		display: block;
		width: 100%;
	}

	#rightCntr .search-card,
	#rightCntr .summary-grid,
	#rightCntr .filter-panel-modern,
	#rightCntr .freezerBox,
	#rightCntr .pagination-box {
		width: 100%;
		min-width: 0;
	}
}

.search-bar-modern {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #282a31;
	border: 1px solid #3b3e48;
	border-radius: 40px;
	padding: 12px 16px;
}

	.search-bar-modern input {
		flex: 1;
		border: none;
		background: transparent;
		color: inherit;
	}

.filter-panel-modern {
	margin-top: 20px;
	background: #1d1f26;
	border: 1px solid #30333d;
	border-radius: 16px;
	padding: 18px;
	width: 100%;
}

.filter-panel-header {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.2em;
	margin-bottom: 12px;
	color: #8c8f98;
}

.filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
	gap: 16px;
}

.filter-card {
	background: #242731;
	border-radius: 12px;
	padding: 12px;
	border: 1px solid rgba(255,255,255,0.05);
}

	.filter-card header {
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.2em;
		color: #8c8f98;
		margin-bottom: 10px;
	}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.1);
	cursor: pointer;
	color: #d5d6d8;
	transition: all .2s ease;
	background: #1f2129;
}

	.filter-chip input {
		accent-color: #efb450;
	}

	.filter-chip.active {
		border-color: #efb450;
		background: rgba(239,180,80,0.15);
	}

.filter-panel-modern .filter-grid {
	width: 100%;
}

@media (min-width: 992px) {
	.filter-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.surface-card {
	background: #1d1f26;
	border: 1px solid #30333d;
	border-radius: 16px;
	padding: 16px;
	width: 100%;
}

#rightCntr .dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) minmax(280px, 1fr);
	grid-template-areas:
		"search summary"
		"filters summary"
		"table summary"
		"pagination summary";
	grid-auto-rows: min-content;
	gap: 16px;
	align-items: start;
	width: 100%;
}

@media (max-width: 500px) {
	#rightCntr {
		padding: 12px;
	}

	#rightCntr .dashboard-grid {
		display: block;
		width: 100%;
	}

	#rightCntr .search-card,
	#rightCntr .summary-grid,
	#rightCntr .filter-panel-modern,
	#rightCntr .freezerBox,
	#rightCntr .pagination-box {
		width: 100%;
		min-width: 0;
	}

	#rightCntr .summary-grid {
		position: static;
		top: auto;
	}
}

#rightCntr .search-card {
	grid-area: search;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px !important;
}

#rightCntr .summary-grid {
	grid-area: summary;
	display: flex;
	flex-direction: column;
	gap: 12px;
	top: 0;
	align-self: start;
}

	#rightCntr .summary-grid .box {
		margin-bottom: 0;
	}

#rightCntr .filter-panel-modern {
	grid-area: filters;
	margin-top: 0;
	padding: 16px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#rightCntr .freezerBox {
	grid-area: table;
	width: 100%;
}

#rightCntr .pagination-box {
	grid-area: pagination;
	width: 100%;
}

#rightCntr .recordsbox {
	max-width: none !important;
	width: 100% !important;
	margin-top: 8px;
}

#rightCntr .search-bar-modern {
	width: 100% !important;
	padding: 12px 16px !important;
}

#rightCntr .freezerBox .row,
#rightCntr .freezerBox .left,
#rightCntr .freezerBox .right {
	margin: 0;
	padding: 0;
	width: 100%;
}

#rightCntr .freezerBox .table-box {
	padding: 0;
}

#rightCntr .temps-list p {
	margin: 4px 0;
}

.summary-card h2 {
	margin-bottom: 0;
}

/* Keep search/filter layout consistent with mobile look on wider screens */
#rightCntr .filter-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 12px !important;
}

#rightCntr .filter-card {
	padding: 14px !important;
	border-radius: 12px !important;
	background: #1f2129 !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
}

@media (max-width: 1100px) {
	#rightCntr .dashboard-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"search"
			"summary"
			"filters"
			"table"
			"pagination";
		gap: 12px;
	}

}

/* force dashboard grid layout on all viewports */
#rightCntr .dashboard-grid {
	display: grid !important;
}

.empty-hint {
	font-size: 12px;
	color: #7b7e88;
}


.pagination-box {
	padding: 10px 10px 10px 10px;
}

	.pagination-box a {
		padding: 2px 10px 1px;
	}

.extremeBox .box {
	width: 100%;
}

	.extremeBox .box:nth-of-type(+n +3) {
		margin-bottom: 6px;
	}

.freezerBox .slick-arrow {
	top: 50%;
}

.freezerBox .slick-prev:before,
.freezerBox .slick-next:before {
	font-size: 30px;
}

.copyright {
	text-align: center;
	position: unset;
	bottom: auto;
	left: auto;
	right: auto;
}

	.copyright p br {
		display: none;
	}



@media only screen and (max-width: 479px) {
	.toggle-mm {
		top: 57px;
	}

	.leftBox {
		top: 132px;
	}

	.headerBox .logo span {
		font-size: 7px;
		margin-left: 10px;
	}

	.headerBox .logo b {
		font-size: 23px;
	}

	.headerBox .logo img {
		width: 39px;
	}

	.freezerBox .slick-arrow {
		top: auto;
		bottom: -60px;
	}

	.freezerBox.inner .left .box {
		padding: 0 0 70px 0;
	}
}

@media only screen and (max-width: 359px) {
	.pagination-box p {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}

	.pagination-box ul {
		width: 100%;
		justify-content: center;
	}
}



#rightCntr .dashboard-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) 320px;
	grid-template-areas:
		"search summary"
		"filters summary"
		"table table"
		"pagination pagination";
	grid-auto-rows: min-content;
	gap: 16px;
	align-items: start;
	width: 100%;
}

#rightCntr .search-card {
	grid-area: search;
	display: flex;
	flex-direction: column;
	gap: 12px;
}



	#rightCntr .summary-grid .box {
		margin-bottom: 0;
	}

#rightCntr .filter-panel-modern {
	grid-area: filters;
	margin-top: 0;
	padding: 16px !important;
	border-radius: 16px !important;
}

#rightCntr .freezerBox {
	grid-area: table;
	width: 100%;
}

#rightCntr .pagination-box {
	grid-area: pagination;
	width: 100%;
}

#rightCntr .temps-list p {
	margin: 4px 0;
}

.summary-card h2 {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.dashboardBox {
		grid-template-columns: 1fr;
	}

		#rightCntr .dashboard-grid {
			grid-template-columns: 1fr;
			grid-template-areas:
				"search"
				"summary"
				"filters"
				"table"
				"pagination";
		}

		#rightCntr .summary-grid {
			position: static;
			top: auto;
		}

	.leftBox {
		position: relative;
		top: auto;
		height: auto;
	}
}

@media (max-width: 767px) {
	.dashboardBox {
		grid-template-columns: 1fr;
	}

	#rightCntr {
		padding: 12px 0 0 0;
	}

	.leftBox {
		position: relative;
		left: 0;
		width: 100%;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		background: var(--color-surface-alt);
		transition: opacity 0.3s ease;
		padding: 0;
	}

		.leftBox.open {
			max-height: none;
			opacity: 1;
			visibility: visible;
			overflow: visible;
			padding-bottom: 12px;
			padding-top: 12px;
		}
}