.hero{
	position:relative;
	height:100vh;
	padding:var(--navbar-height) var(--grid-xs);
	z-index:2;
}

@media(min-width:400px){
	.hero{
		padding:var(--navbar-height) var(--grid-sm) 0;
	}
}

@media(min-width:576px){
	.hero{
		padding:var(--navbar-height) var(--grid-lg) 0;
	}
}

.hero-container {
	display:flex;
	flex-direction:column;
	row-gap: var(--grid-xl);
	width:100%;
	height:100%;
	padding:var(--grid-xl) var(--grid-md) 0
}

.hero-container h1 {
	font-size:var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.125em;
	color:var(--mb-surface);
	width:100%;
	max-width:17ch;
}

.hero-container p {
	font-size: var(--mb-font-size-lead);
	font-weight: var(--mb-font-weight-lead);
	line-height: 1.6em;
	color:var(--mb-surface);
	max-width:21em;
}

.hero .lava-mask-container {
	height: 100vh;
	padding-bottom:var(--grid-xs)
}

.hero .lava-mask{
	display:flex;
	flex-direction: column;
	justify-content:flex-end;
	align-items:center;
	height:100%;
	border-radius: var(--mb-border-radius-xxl);
	-webkit-border-radius: var(--mb-border-radius-xxl);
	-moz-border-radius: var(--mb-border-radius-xxl);
	-ms-border-radius: var(--mb-border-radius-xxl);
	-o-border-radius: var(--mb-border-radius-xxl);
	outline:100vh solid var(--mb-background);
}

@media(min-width:992px){
	.hero {
		padding:var(--navbar-height) 5vw;
	}
	
	.hero-container h1 {
		margin-bottom:5vh
	}
}

.hero .hero-graphics-bg{
	position:relative;
	display: flex;
	flex-direction:column;
	align-self:flex-end;
	width:66%;
	max-width: 30rem;
	aspect-ratio:4 / 5;
	margin-right:8vw;
	margin-bottom:calc(0px - 30vh + 5vw);
	padding:5vw;
	row-gap:20%;
	border-radius: var(--mb-border-radius-lg);
	-webkit-border-radius: var(--mb-border-radius-lg);
	-moz-border-radius: var(--mb-border-radius-lg);
	-ms-border-radius: var(--mb-border-radius-lg);
	-o-border-radius: var(--mb-border-radius-lg);
	overflow: hidden;
	background-color:rgba(255, 255, 255, 0.08);
	z-index:-1;
}

.hero .hero-graphics-bg span{
	position: relative;
	display: block;
	content:'';
	background-repeat:no-repeat;
	background-size: contain;
}

.hero .hero-graphics-bg span:first-child{
	width:33%;
	max-width:10rem;
	aspect-ratio:1 / 1;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.44 32.44'%3e%3cpath fill='rgba%28255, 255, 255, 0.1%29'  d='m29.33,13.11h-10V3.11c0-1.72-1.39-3.11-3.11-3.11s-3.11,1.39-3.11,3.11v10H3.11c-1.72,0-3.11,1.39-3.11,3.11s1.39,3.11,3.11,3.11h10v10c0,1.72,1.39,3.11,3.11,3.11s3.11-1.39,3.11-3.11v-10h10c1.72,0,3.11-1.39,3.11-3.11s-1.39-3.11-3.11-3.11Z'/%3e%3c/svg%3e");
}

.hero .hero-graphics-bg span:last-child{
	width:100%;
	height:100%;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 181.85 145.34'%3e%3cpath fill='rgba%28255, 255, 255, 0.1%29'  d='m144.28,11.97H3.94c-2.18,0-3.94-1.77-3.94-3.94V3.94C0,1.76,1.77,0,3.94,0h140.33c2.18,0,3.94,1.77,3.94,3.94v4.09c0,2.18-1.77,3.94-3.94,3.94h0Zm37.57,67.73h0c0-2.18-1.77-3.94-3.94-3.94H3.94c-2.18,0-3.94,1.77-3.94,3.94h0c0,2.18,1.77,3.94,3.94,3.94h173.96c2.18,0,3.94-1.77,3.94-3.94h0Zm0,30.85h0c0-2.18-1.77-3.94-3.94-3.94H3.94c-2.18,0-3.94,1.77-3.94,3.94h0c0,2.18,1.77,3.94,3.94,3.94h173.96c2.18,0,3.94-1.77,3.94-3.94h0Zm0,30.85h0c0-2.18-1.77-3.94-3.94-3.94H3.94c-2.18,0-3.94,1.77-3.94,3.94h0c0,2.18,1.77,3.94,3.94,3.94h173.96c2.18,0,3.94-1.77,3.94-3.94h0Z'/%3e%3c/svg%3e");
}

.hero .hero-graphics {
	position:absolute;
	display: none;
	justify-content: flex-end;
	width:100%;
	height:100%;
	max-height:30rem;
	top:calc(60vh - 5vw);
	right:calc(0px - 1vw);
}

.hero .hero-graphics .graphics-container{
	position: relative;
	display: block;
	width:100%;
	max-width:42rem;
	height:100%;
}

.hero .hero-graphics .graphics-container > span {
	--mb-elevation-dark-shadow-color: var(--mb-on-tertiary-container-rgb);
	--mb-elevation-light-shadow-color: var(--mb-primary-rgb);
	--mb-elevation-ambient-shadow-color: var(--mb-tertiary-rgb);
	position:absolute;
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mb-border-radius-md);
	-webkit-border-radius: var(--mb-border-radius-md);
	-moz-border-radius: var(--mb-border-radius-md);
	-ms-border-radius: var(--mb-border-radius-md);
	-o-border-radius: var(--mb-border-radius-md);
	box-shadow: 
	22px 22px 40px -4px rgba(var(--mb-elevation-dark-shadow-color), 0.2),	
	-22px -22px 40px -4px rgba(var(--mb-elevation-light-shadow-color), 0.25), 	
	0px 0px 40px rgba(var(--mb-elevation-ambient-shadow-color), 0.1);
}

.hero .hero-graphics .graphics-container span.hg1 {
	width:5.4rem;
	height:5.4rem;
	padding:1.4rem;
	top:0;
	left:40%;
	background-color:var(--mb-surface-variant);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.hero .hero-graphics .graphics-container span .product-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	background-color: var(--mb-surface);
}

.hero .hero-graphics .graphics-container span.hg1 .product-icon{
	border:1px solid transparent;
	background-image:	linear-gradient(var(--mb-surface), var(--mb-surface)), 	linear-gradient(to right, rgba(0, 153, 153, 1), rgba(103, 184, 73, 1));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.hero .hero-graphics .graphics-container span.hg2{
	width:7.2rem;
	height:7.2rem;
	padding:1.6rem;
	top:20%;
	left:25%;
	background-color: var(--mb-tertiary-container);
}

.hero .hero-graphics .graphics-container span.hg2 .product-icon{
	border:1px solid var(--mb-tertiary);
	border-radius:var(--mb-border-radius-sm);
	-webkit-border-radius:var(--mb-border-radius-sm);
	-moz-border-radius:var(--mb-border-radius-sm);
	-ms-border-radius:var(--mb-border-radius-sm);
	-o-border-radius:var(--mb-border-radius-sm);
}

.hero .hero-graphics .graphics-container span.hg3{
	padding:1.4rem;
	width:40%;
	height:4.6rem;
	bottom:30%;
	left:8%;
	background-color:var(--mb-primary-container);
}

.hero .hero-graphics .graphics-container span.hg3 .search-bar{
	position:relative;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	width:100%;
	height:100%;
	background-color:var(--mb-surface);
	border:1px solid var(--mb-outline-variant);
	border-radius:var(--mb-border-radius-xs);
	overflow:hidden;
	-webkit-border-radius:var(--mb-border-radius-xs);
	-moz-border-radius:var(--mb-border-radius-xs);
	-ms-border-radius:var(--mb-border-radius-xs);
	-o-border-radius:var(--mb-border-radius-xs);
}

.hero .hero-graphics .graphics-container span.hg3 .search-btn{
	display:flex;
	justify-content:center;
	align-items:center;
	width:25%;
	height:100%;
	background-color: rgba(var(--mb-outline-variant-rgb), 0.5);
}

.hero .hero-graphics .graphics-container span.hg4 {
	flex-direction: column;
	align-items:flex-start;
	row-gap:var(--grid-sm);
	width:40%;
	height:60%;
	bottom:20%;
	right: 8%;
	background-color: var(--mb-background);
	padding:var(--grid-lg);
}

.hero .hero-graphics .graphics-container span.hg4 h2{
	font-size:var(--mb-font-size-title-md);
	font-weight: var(--mb-font-weight-title);
	color: var(--mb-error);
	padding-bottom:0.6em;
}

.hero .hero-graphics .graphics-container span.hg4 ul.index-text {
	list-style: none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	row-gap:1.2rem;
	width:100%;
	height:100%;
}

.hero .hero-graphics .graphics-container span.hg4 ul.index-text li.it-inner{
	display: flex;
	column-gap:var(--grid-xs);
	align-items:center;
}

.hero .hero-graphics .graphics-container span.hg4 ul.index-text li.it-inner p{
	font-size: var(--mb-font-size-label-md);
	margin:0;
}

.hero .hero-graphics .graphics-container span.hg4 ul.index-text li.it-inner span{
	display:block;
	width:100%;
	height:40%;
	background-image:var(--mb-gradient);
	border-radius:0.2rem;
	-webkit-border-radius:0.2rem;
	-moz-border-radius:0.2rem;
	-ms-border-radius:0.2rem;
	-o-border-radius:0.2rem;
}

@media(min-width:576px){
	.hero .hero-graphics {
		display: flex;
	}
}

@media(min-width:1200px){
	.hero .hero-graphics {
		max-height:36rem;
		top:calc(55vh - 3vw);
		right:4vw;
	}
}

@media(min-width:1600px){
	.hero .hero-graphics-bg{
		max-width: 40rem;
	}

	.hero .hero-graphics {
		max-height:40rem;
		top:calc(50vh - 3vw);
	}

	.hero .hero-graphics .graphics-container{
		max-width:48rem;
	}
}

.intro{
	position:relative;
	display:flex;
	align-items: center;
	justify-content: center;
	min-height:calc(70vh + 20vw);
	padding:0 var(--grid-lg);
	margin-top:-2px;
	border-bottom-left-radius: var(--mb-border-radius-xxl);
	border-bottom-right-radius: var(--mb-border-radius-xxl);
	z-index:1
}

.intro h2{
	font-family:var(--mb-font-headings);
	font-size: var(--mb-font-size-headline-lg);
	font-weight: var(--mb-font-weight-headline);
	line-height: 1.2em;
	color:var(--mb-primary);
	width:100%;
	white-space: pre-wrap;
	max-width: 26ch;
}

@media(min-width:768px){
	.intro{
		padding: 0 var(--grid-xl)
	}
}

@media(min-width:992px){
	.intro{
		min-height:100vh;
		padding:0 10vw;
	}
}

.secure-review, .docsorter {
	position: relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	row-gap:8vh;
	margin-top:calc(0px - var(--mb-border-radius-xxl) - 2px);
}

.secure-review{
	padding:0 var(--grid-md) 10vh;
	background-image:linear-gradient(to bottom, var(--mb-background) 0%, var(--mb-surface-variant) 20%);
	z-index: 0;
	border-bottom-left-radius: var(--mb-border-radius-xxl);
	border-bottom-right-radius: var(--mb-border-radius-xxl);
}

.docsorter{
	padding:8vh var(--grid-md) 10vh;
	z-index:-1;
}

.section-head {
	width:100%;
	margin-top:20vh;
}

.section-head h1{
	font-size:var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
}

.sr-container{
	display:grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
	"title" "screen" "features";
	row-gap: 8vh;
	width:100%;
	max-width:40rem;
	min-height: 100vh;
	padding: var(--grid-lg) 0
}

.sr-container h3 {
	grid-area: title;
	font-size: var(--mb-font-size-title-md);
	font-weight: var(--mb-font-weight-title);
	line-height: 1.2em;
	color:var(--mb-on-surface);
	max-width:40rem;
}

.sr-container .list-secondary{
	grid-area:features;
	justify-self:center
}

@media(min-width:992px){	
	.secure-review, .docsorter{
		padding:20vh 12vw;
		row-gap:40vh;
	}

	.sr-container{
		grid-template-rows: auto 1fr;
		grid-template-columns: 44vw auto;
		grid-template-areas:
		"screen title" "screen features";
		row-gap: var(--grid-lg);
		column-gap: 5vw;
		max-width:initial;
	}

	.sr-container.sr_mat-dash, .sr-container.ds-1{
		margin-top:50vh;
	}
}

#screenLg, #screenLg2{display: none;}

.screen-container{
	position:relative;
	width:100%;
	aspect-ratio:3.5 / 2;
}

.sr-container .screen-container{
	grid-area:screen;
}

.product-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	padding:5% 1% 1% 6%;
	border-radius:var(--mb-border-radius-md);
	-webkit-border-radius:var(--mb-border-radius-md);
	-moz-border-radius:var(--mb-border-radius-md);
	-ms-border-radius:var(--mb-border-radius-md);
	-o-border-radius:var(--mb-border-radius-md);
	box-shadow:var(--mb-elevation-4-shadow);
}

.secure-review .product-screen, .ds-3_screen .product-screen{
	background-color:var(--mb-surface);
	background-image:url(../img/sr_bg.png);
	background-repeat:no-repeat;
	background-size: 99%;
	background-position: 1% center;
}

.product-screen .screen-bg {
	width: 100%;
	height:100%;
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center;
	border-radius:var(--mb-border-radius-sm);
	-webkit-border-radius:var(--mb-border-radius-sm);
	-moz-border-radius:var(--mb-border-radius-sm);
	-ms-border-radius:var(--mb-border-radius-sm);
	-o-border-radius:var(--mb-border-radius-sm);
}

.md-screen .screen-bg {
	background-image: url(../img/md_bg.png);
}

.md-screen .list-primary, .users-screen .list-primary{
	position:absolute;
	top:25%;
	row-gap: 2%;
	height:100%;
}

.md-screen .list-primary{
	width:52%;
	right: -2%;
}

.users-screen .list-primary{
	width:63%;
	left: 10%;
}

.md-screen .list-primary li, .users-screen .list-primary li{
	column-gap:2%;
	padding:4%;
	border-radius: var(--mb-border-radius-xs);
	-webkit-border-radius: var(--mb-border-radius-xs);
	-moz-border-radius: var(--mb-border-radius-xs);
	-ms-border-radius: var(--mb-border-radius-xs);
	-o-border-radius: var(--mb-border-radius-xs);
}

.md-screen .list-primary li .list-icon, .users-screen .list-primary li .list-icon{
	width:2rem;
	height:2rem;
	border-radius:var(--mb-border-radius-xs);
	-webkit-border-radius:var(--mb-border-radius-xs);
	-moz-border-radius:var(--mb-border-radius-xs);
	-ms-border-radius:var(--mb-border-radius-xs);
	-o-border-radius:var(--mb-border-radius-xs);
}

.md-screen .list-primary li .list-icon span, .users-screen .list-primary li .list-icon span{
	font-variation-settings:
	'wght' 200,
	'GRAD' 0,
	'opsz' 24;
	font-size:1rem;
}

.md-screen .list-primary li p, .users-screen .list-primary li p{
	font-size: var(--mb-font-size-label-sm);
}

.mr-screen .screen-bg {
	background-image: url(../img/records_bg.png);
}

.mr-screen .components {
	position:absolute;
	display:flex;
	flex-direction: column;
	width:86%;
	top: 25%;
	left:10%;
}

.mr-screen .components .records-section {
	width: 100%;
}

.mr-screen .components .record{
	position:absolute;
	display: block;
	aspect-ratio:4 / 5;
	padding:1rem;
	border-radius: var(--mb-border-radius-xs);
	-webkit-border-radius: var(--mb-border-radius-xs);
	-moz-border-radius: var(--mb-border-radius-xs);
	-ms-border-radius: var(--mb-border-radius-xs);
	-o-border-radius: var(--mb-border-radius-xs);
	box-shadow: var(--mb-elevation-3-shadow);
	overflow: hidden;
}

.mr-screen .components .record img{
	width:100%;
}

.mr-screen .components .record.rec-1{
	width:25%;
	top:-20%;
	right:8%;
	background-color: var(--mb-secondary);
}

.mr-screen .components .record.rec-2{
	width:30%;
	top:20%;
	right:24%;
	background-color:var(--mb-tertiary)
}

.rad-screen .screen-bg {
	background-image: url(../img/radiology_bg.png);
}

.rad-screen .components {
	position:absolute;
	display:flex;
	justify-content: center;
	width:86%;
	height:70%;
	top: 25%;
	left:10%;
	border-radius:var(--mb-border-radius-xs);
	-webkit-border-radius:var(--mb-border-radius-xs);
	-moz-border-radius:var(--mb-border-radius-xs);
	-ms-border-radius:var(--mb-border-radius-xs);
	-o-border-radius:var(--mb-border-radius-xs);
	background-color:black;
	overflow:hidden;
}

.rad-screen .components .x-ray{
	display: block;
	width: 100%;
	height:100%;
	background-image: url(../img/xray_top.png);
	background-repeat:no-repeat;
	background-position:top right;
	background-size: contain
}

.rad-screen .components .x-ray p{
	position:absolute;
	font-size:clamp(0.4rem, 1vw, 0.6rem);;
	text-transform:uppercase
}

.rad-screen .components .x-ray .top-left{
	top: 18%;
	left:2%;
	color:var(--mb-warning)
}

.rad-screen .components .x-ray .top-right{
	top: 18%;
	right:2%;
	text-align:right;
	color:var(--mb-warning)
}

.rad-screen .components .x-ray .center-left,
.rad-screen .components .x-ray .center-right{
	top:55%;
	color:white
}

.rad-screen .components .x-ray .center-left{
	left:2%
}

.rad-screen .components .x-ray .center-right{
	right:2%;
}

.rad-screen .components .radiology-img{
	position:absolute;
	height:120%;
	bottom:-15%;
	mix-blend-mode: screen;
	transform-origin:center
}

.users-screen .screen-bg {
	background-image: url(../img/users_bg.png);
}

@media(min-width:992px){
	#screenLg{
		position:absolute;
		display: flex;
		width:44vw;
		margin-top: 15vh;
		transform-origin: left top;
		transform:scale(1.3);
		-webkit-transform:scale(1.3);
		-moz-transform:scale(1.3);
		-ms-transform:scale(1.3);
		-o-transform:scale(1.3);
	}

	#screenLg .product-screen .screen-bg img{
		position:absolute;
		width:100%;
		top:0;
		left:0;
	}

	#screenLg .product-screen .screen-bg {
		position: relative;
		width: 100%;
		height:100%;
		padding:1rem;
	}

	.product-screen .screen-bg #bg2,
	.product-screen .screen-bg #bg3,
	.product-screen .screen-bg #bg4{
		opacity: 0;
	}

	.sr-container .product-screen{
		opacity:0;
		background-color:transparent;
		box-shadow:none;
		background-image:none;
	}

	.md-screen .list-primary{
		top:15%;
	}

	.md-screen .list-primary{
		width:56%;
	}
	
	.users-screen .list-primary{
		top:35%
	}
	
	.md-screen .list-primary li, .users-screen .list-primary li{
		column-gap:5%;
	}
	
	.md-screen .list-primary li .list-icon span, .users-screen .list-primary li .list-icon span{
		font-size:1.25rem;
	}
}

.docsorter .screen-container:not(.ds-3_screen) .product-screen {
	background-color:#f7f7f7;
	align-items: stretch;
	justify-content: space-between;
	padding:2%;
	column-gap:1%;
	border-radius:var(--mb-border-radius-sm);
	-webkit-border-radius:var(--mb-border-radius-sm);
	-moz-border-radius:var(--mb-border-radius-sm);
	-ms-border-radius:var(--mb-border-radius-sm);
	-o-border-radius:var(--mb-border-radius-sm);
}

.docsorter .product-screen .col1, 
.docsorter .product-screen .col2{
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	height:100%;
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:5%;
}

.docsorter .product-screen .col1{
	width:44%;
	background-color:var(--mb-background);
	background-image: url(../img/ds_col1_bg.png);
}

.docsorter .product-screen .col2{
	width:55%;
	background-color:#767676;
	background-image: url(../img/ds_col2_bg.png);
}

.docsorter .product-screen .list-primary{
	height:80%;
	row-gap:5%;
	width:86%;
}

.docsorter .product-screen .list-primary li{
	column-gap:4%;
	padding:4%;
	min-height: 3.2rem;
	border-radius: var(--mb-border-radius-xs);
	-webkit-border-radius: var(--mb-border-radius-xs);
	-moz-border-radius: var(--mb-border-radius-xs);
	-ms-border-radius: var(--mb-border-radius-xs);
	-o-border-radius: var(--mb-border-radius-xs);
	overflow:hidden;
	box-shadow: 
	12px 12px 24px -3px rgba(var(--mb-elevation-dark-shadow-color), 0.12),
	-12px -12px 24px -3px rgba(var(--mb-elevation-light-shadow-color), 0.1);
}

.docsorter .product-screen li .list-icon{
	width:2rem;
	height:2rem;
	border-radius:var(--mb-border-radius-xs);
	-webkit-border-radius:var(--mb-border-radius-xs);
	-moz-border-radius:var(--mb-border-radius-xs);
	-ms-border-radius:var(--mb-border-radius-xs);
	-o-border-radius:var(--mb-border-radius-xs);
}

.ds-1_screen .product-screen .list-primary{
	margin-top:20%;
}

.ds-1_screen .product-screen .list-primary li{
	min-height:2.8rem; 
}

.ds-2_screen .product-screen li .list-icon{
	width:0;
	transform:scale(0);
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transform-origin: left center;
}

.docsorter .product-screen li .list-icon h1{
	font-size:1rem;
}

.docsorter .product-screen li p{
	font-size: var(--mb-font-size-label-sm);
}

.ds-1_screen .record, 
.ds-2_screen .record,
#screenLg2 .record{
	--mb-elevation-dark-shadow-color: var(--mb-on-surface-rgb);
	--mb-elevation-light-shadow-color: var(--mb-outline-variant-rgb);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding:5%;
	border-radius: var(--mb-border-radius-xs);
	-webkit-border-radius: var(--mb-border-radius-xs);
	-moz-border-radius: var(--mb-border-radius-xs);
	-ms-border-radius: var(--mb-border-radius-xs);
	-o-border-radius: var(--mb-border-radius-xs);
	box-shadow:     12px 12px 24px -3px rgba(var(--mb-elevation-dark-shadow-color), 0.12),
	-12px -12px 24px -3px rgba(var(--mb-elevation-light-shadow-color), 0.3);
}

.ds-1_screen .record .cross{
	width: 30%;
}

.ds-1_screen .record.rec-4{
	width:55%;
	height:75%;
	background-color: var(--mb-primary-container);
}

.ds-1_screen .record.rec-4 .cross{
	fill: var(--mb-error)
}

.ds-1_screen .record.rec-4 .rec-text{
	fill: var(--mb-primary)
}

.docsorter .index {
	--mb-elevation-dark-shadow-color: var(--mb-on-surface-rgb);
	--mb-elevation-light-shadow-color: var(--mb-outline-variant-rgb);
	width:55%;
	height:75%;
	background-color: var(--mb-background);
	box-shadow:     12px 12px 24px -3px rgba(var(--mb-elevation-dark-shadow-color), 0.12),
	-12px -12px 24px -3px rgba(var(--mb-elevation-light-shadow-color), 0.3);
}

.docsorter .index h2{
	font-size:var(--mb-font-size-title-sm);
	color: var(--mb-error);
	padding-bottom:0.6em;
}

.docsorter .index ul.index-text {
	list-style: none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	height:100%;
	justify-content:space-between;
}

.docsorter .index ul.index-text li.it-inner{
	display: flex;
	column-gap:var(--grid-xs);
	align-items:center;
}

.docsorter .index ul.index-text li.it-inner p{
	font-size: var(--mb-font-size-label-sm);
	margin:0;
}

.docsorter .index ul.index-text li.it-inner span{
	display:block;
	width:100%;
	height:40%;
	background-image:var(--mb-gradient);
	border-radius:0.2rem;
	-webkit-border-radius:0.2rem;
	-moz-border-radius:0.2rem;
	-ms-border-radius:0.2rem;
	-o-border-radius:0.2rem;
}

.ds-3_screen .screen-bg {
	background-image: url(../img/ds-sr_bg.png);
}

.ds-3_screen .col1{
	width:44%;
	background-color:transparent !important;
	background-image: none !important;
	margin-top:7%;
	margin-left:41%;
	transform:scale(0.85);
	-webkit-transform:scale(0.85);
	-moz-transform:scale(0.85);
	-ms-transform:scale(0.85);
	-o-transform:scale(0.85);
	transform-origin:top left;
}
@media(max-width:575px){
	.ds-3_screen .list-primary, .ds-3_screen .list-primary li{
		width:50vw;
	}
}

@media(min-width:992px){
	#screenLg2{
		position:absolute;
		display: flex;
		width:44vw;
		margin-top: 15vh;
		transform-origin: left top;
		transform:scale(1.3);
		-webkit-transform:scale(1.3);
		-moz-transform:scale(1.3);
		-ms-transform:scale(1.3);
		-o-transform:scale(1.3);
	}

	#screenLg2 .screen-container{
		position:relative;
		display:flex;
		width:100%;
		aspect-ratio:3.5 / 2;
	}

	#screenLg2 .screen-container .product-screen {
		background-color:var(--mb-surface);
	}

	#screenLg2 .product-screen .screen-bg {
		position:absolute;
		width:97%;
		top:2%;
		transform:translateZ(-100px);
		-webkit-transform:translateZ(-100px);
		-moz-transform:translateZ(-100px);
		-ms-transform:translateZ(-100px);
		-o-transform:translateZ(-100px);
}

	#screenLg2 .product-screen .screen-bg .img-mask{
		position:relative;
		display: block;
		top:0;
		width: 0;
		height:97%;
		overflow:hidden;
		background-color: white;
	}

	#screenLg2 .product-screen .screen-bg img{
		position:absolute;
	}

	#screenLg2 .product-screen .screen-bg img#bg5{
		top:1%;
		width:99%;
		border-radius:var(--mb-border-radius-xs);
		-webkit-border-radius:var(--mb-border-radius-xs);
		-moz-border-radius:var(--mb-border-radius-xs);
		-ms-border-radius:var(--mb-border-radius-xs);
		-o-border-radius:var(--mb-border-radius-xs);
}

	#screenLg2 .product-screen .screen-bg img#bg6{
		height:100%;
	}

	#screenLg2 .screen-container .product-screen .screen-lg_row{
		position:absolute;
		display: flex;
		align-items:center;
		width:96%;
		height:95%;
	}

	#screenLg2 .screen-container .product-screen .col1,
	#screenLg2 .screen-container .product-screen .col2{
		background-color:transparent;
		background-image: none;
		height:100%;
	}

	#screenLg2 .screen-container .product-screen .col1{
		padding:6% var(--grid-md) var(--grid-sm);
	}

	#screenLg2 .product-screen .list-primary{
		row-gap: 5%;
		width:100%;
	}

	#screenLg2 .product-screen .list-primary .list-icon{
		width:0;
		transform:scale(0);
		-webkit-transform:scale(0);
		-moz-transform:scale(0);
		-ms-transform:scale(0);
		-o-transform:scale(0);
		transform-origin: left center;
	}

	.docsorter .product-screen .list-primary li{
		column-gap:5%;
		min-height:2.8rem;
	}

	.docsorter .product-screen .list-primary li p{
		font-size: var(--mb-font-size-label-sm);
	}

	#screenLg2 .screen-container .product-screen .col1 .li-inner{
		display:flex;
		column-gap:var(--grid-sm);
		align-items: center;
	}	

	#screenLg2 .screen-container .product-screen .col2{
		flex-direction: row;
		justify-content:flex-start;
		column-gap:var(--grid-lg);
		align-items:center;
		padding-top:0;
		overflow:hidden;
	}

	#screenLg2 .record{
		width:auto;
		aspect-ratio: 4 / 5;
		padding:6% !important;
	}

	#screenLg2 .record .cross{
		width: 30%;
		fill: var(--mb-error)
	}
	
	#screenLg2 .record.rec-1{
		height:60%;
		background-color: var(--mb-tertiary-container);
	}

	#screenLg2 .record.rec-1 .rec-text{
		fill: var(--mb-tertiary)
	}
	
	#screenLg2 .record.rec-2{
		height:70%;
		background-color: var(--mb-secondary-container);
	}

	#screenLg2 .record.rec-2 .rec-text{
		fill: var(--mb-secondary)
	}
	
	#screenLg2 .record.rec-3{
		height:50%;
		background-color: var(--mb-surface-variant);
	}

	#screenLg2 .record.rec-3 .rec-text{
		fill: var(--mb-on-surface-variant)
	}
	
	#screenLg2 .record.rec-4{
		height:75%;
		background-color: var(--mb-primary-container);
	}

	#screenLg2 .record.rec-4 .rec-text{
		fill: var(--mb-primary)
	}
	
	#screenLg2 .index {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding:5%;
		border-radius: var(--mb-border-radius-xs);
		-webkit-border-radius: var(--mb-border-radius-xs);
		-moz-border-radius: var(--mb-border-radius-xs);
		-ms-border-radius: var(--mb-border-radius-xs);
		-o-border-radius: var(--mb-border-radius-xs);
		height:60%;
		aspect-ratio:4 / 5;
	}
	
	#screenLg2 .index h2{
		margin-bottom:1rem;
	}
}

@media(max-width:575px){
	.list-primary{
		transform:scale(0.75) translateY(-10%);
		-webkit-transform:scale(0.75) translateY(-10%);
		-moz-transform:scale(0.75) translateY(-10%);
		-ms-transform:scale(0.75) translateY(-10%);
		-o-transform:scale(0.75) translateY(-10%);
}
}