.graphic{
	aspect-ratio: 16 / 9;
	overflow:hidden;
	line-height:1.4;
	background-color:#FFF;
}
.frame{
	background-color:#FFF;
	font-size:12pt;
	color:#000;
	overflow:hidden;
	position:relative;
	text-align:left;
	color:#6b7c93;
	border-radius:5px;
	width:1200px;
	transform-origin:0 0;
	transform:scale(1);
}
.frame .flex{
	display:flex;
	justify-content:center;
	align-items: center;
	gap:10px
}
.frame div{
	flex:1;
}
.frame.dashboard{
	display: flex;
    justify-content: center;
    align-items: stretch;
	background-color:#F8F9FD;
}
.frame.dashboard>.sidebar{
	background-color:#FFFFFF;
	border-right:solid 1px #e8ecf1; 
}

.frame .sidebar>.group{
	padding: 10px 14px;
	position:relative;
}
.frame .sidebar>.group:after{
	content:"";
	width:4px;
	position:absolute;
	top:55px;
	bottom:0;
	left:25px;
	border-radius:10px;
	background-color:rgb(var(--theme),.2);
}

.frame .sidebar>.group>i{
	color: rgb(var(--theme));
    padding-top: 6px;
    font-size: 20pt;
}
.frame .sidebar>.group>span{
	display: inline-block;
    padding: 8px;
    color: #000;
    font-weight: bold;
    vertical-align: top;
}
.frame .sidebar>.group>div{
	padding:8px;
	padding-left:40px;
}

.frame .heading{
	font-size:14pt;
	color:rgb(var(--theme));
}
.frame .mb{
	margin-bottom:12px;
}
.frame .pad{
	padding:16px;
}
.frame .card{
	background-color:#FFF;
}
.frame .heading{
	
}
.frame .text-right{
	text-align:right;
}
.frame .tag{
	background-color:#EAF6F1;
	color:#36AA79;
	padding:3px 10px;
	margin-top:4px;
	margin-bottom:4px;
	display:inline-block;
	border-radius:4px;
	font-weight:bold;
}
.frame .tag.S{
	font-size:8pt;
}
.frame .tag.grey{
	color:#52859B;
	background-color:#EDF3F5;
}
.frame p{margin:0;}

.frame i{
	font-size:16pt;
}
.frame .total{
	font-size:24pt;
	color:#000;
}
.frame .textcolor{
	color:rgb(var(--theme));
}
.frame .textgreen{
	color:#36AA79;
}
.frame .menubtn{
	display:inline-block;
	margin-top:0;
	margin-bottom:4px;
	padding:3px 6px;
	background-color:rgba(var(--theme),0.1);
	border-radius:5px;
}
.frame svg{
	width:100%;
}
.chart-axis>div{
	text-align:center;
	padding:5px;
}
.frame .chart-axis>div:after{
	content:"";
	position:absolute;
	border-left:dashed 2px #EDF3F5;
	top: 0;
    bottom: 30px;
	margin-left: -34px;
}

.frame .tabs{
	display:flex;
}
.frame.checkout .tabs{
	gap:10px;
}

.frame.app .theme{
	background:rgb(var(--theme));
	color:#FFF;
}
.frame.app .tabs{
	align-items:baseline;
}
.frame.app .tabs .indicator{
	height:5px;
	border-radius:10px;
	background-color:#FFF;
	margin:0 30px;
	margin-top:5px;
}
.frame.app .tabs>div{
	text-align:center;
	color:#FFF;
}
.frame.app .tabs>div>i{
	font-size:32px;
}
.frame.checkout .tabs>span{
	flex:1;
	display: inline-block;
    padding: 6px 12px;
    box-shadow: 0 0 0 1px #dee7f1;
	border-radius:5px;
	text-align:center;
	font-weight:bold;
}
.frame.dashboard .tabs>span{
	font-size:10pt;
	display: inline-block;
    padding: 6px 12px;
    box-shadow: 0 0 0 1px #9CC4DF;
    margin-right: 1px;
}
.frame.dashboard .tabs>span:first-child{
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}
.frame.dashboard .tabs>span:last-child{
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
}
.frame.dashboard .tabs>span.active{
	color:rgb(var(--theme));
	z-index:1;
	box-shadow: 0 0 0 1px rgb(var(--theme));
	background-color:rgba(var(--theme),.1)
}
.frame.checkout .tabs>span.active{
	color:rgb(var(--theme));
	border-bottom:solid 2px rgb(var(--theme));
}
.frame .chart-overlay{
	position: absolute;
    top: 0;
	bottom:30px;
    z-index: 1;
	border-left:dashed 2px #8898AC;
	padding-left:10px;
	padding-top:80px;
}
.frame .intro{
	opacity:0;
	transition:0.2s;
}
.frame .chart-cover{
	position:absolute;
	inset:0;
	background-color:#FFF;
	z-index:10;
	transition:0.4s;
}
.frame .slider{
	flex:unset;
	width:100px;
	display:flex;
	justify-content:center;
	border-radius:6px;
	overflow:hidden;
}
.frame .button{
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(var(--theme));
	text-align:center;
	color:#FFF;
	padding:6px;
	border-radius:5px;
}
.frame .slider>.button{
	border-radius:0;
	font-size:14pt;
	padding-left:0;
	padding-right:0;
	padding-top:2px;
}
.frame .slider>div:nth-child(2){
	text-align:center;
	border:solid 1px #dee7f1;
	border-width:1px 0 1px 0;
	padding-top:4px;
}
.frame .price{
	flex:unset;
	width:100px;
	text-align:right;
}
.frame .underline{
	border-bottom:solid 1px #dee7f1;
}
.frame .steps>div{
	text-align:center;
	padding-top:40px;
	position:relative;
	font-size:10pt;
	font-weight:bold;
}
.frame .steps>div:before{
	content:"";
	width:20px;
	height:20px;
	border:solid 2px #dee7f1;
	border-radius:99px;
	position:absolute;
	top:10px;
	left:50%;
	margin-left:-10px;
}
.frame .steps>div:not(:last-child):after{
	content:"";
	width:90px;
	height:1px;
	background-color:#dee7f1;
	position:absolute;
	top:20px;
	left:50%;
	margin-left:30px;
}
.frame .steps>div.active{
	color:rgb(var(--theme));
}
.frame .steps>div.active:before{
	border-color:rgb(var(--theme));
}
.frame .pages{
	position:relative;
	overflow:hidden;
}
.frame .pages>div{
	transform:translateX(100%);
	position:absolute;
	inset:0;
	transition:0.4s;
}
.frame .pages>div.active{
	opacity:1;
}
.frame .input{
	border:solid 1px #dee7f1;
	padding: 10px 16px;
    border-radius: 5px;
}
.frame .icon{
	padding:40px;
	border-radius:99px;
	border:solid 5px rgb(var(--theme));
	margin:0;
	font-size:50pt;
	color:rgb(var(--theme));
	margin:20px 0;
}
.frame .list>div{
	transition:0.2s;
}