:root{
	--accent:91,138,254;
	--round:4px;
	--background:#F8F9FD;
	--card:#FFF;
	--text-color:#6b7c93;
	--box-shadow:0 0 0 1px #d8e1ed;
	--abstract-text:#000;
	--btn-text:#FFF;
	--border-color:#e7edf3;
	--input-border-color:#d0dbe5;
	--input-background:#FBFCFD;
	--drop-shadow:rgba(0,0,0,.1);
}
body.dark{
	--background:#10101a;
	--card:#171725;
	--text-color:#879ebd;
	--abstract-text:#FFF;
	--border-color:#252538;
	--input-border-color:#383851;
	--btn-text:#000;
	--box-shadow:0 0 0 1px #252538;
	--input-background:#1e1e2f;
	--drop-shadow:rgba(0,0,0,.5);
}
body{
	background-color:var(--background);
}
body.dark .selector.active{
	background-color:#1F2948;
}
::selection{
	background:rgba(var(--accent),.5);
}.disabled{pointer-events:none;}

.card{
	background-color:var(--card);
	border-radius:var(--round);
	box-shadow:var(--box-shadow);
	position:relative;
	overflow:hidden;
	transition:0.2s;
	margin-bottom:16px;
}
.card.hollow{
	background:none;
}
.card.background{
	background-color:var(--background);
}
.click{
	cursor:pointer;
	transition:0.3s!important;
	position:relative;
}
.click:hover,.click-block:hover{
	z-index:1;
	box-shadow:0 0 0 2px rgb(var(--accent))!important;
	transition:0s!important;
}

.card-group{border-radius:var(--round);position:relative;}

.card-group .card-group{box-shadow:none;}

.card-group>.card{
	border-radius:0;
	margin:0;
}
.card-group>.card:first-child,.card-group>:not(.card) + .card{
	border-top:0;border-top-left-radius:var(--round);border-top-right-radius:var(--round);
}
.card-group>.card:last-child{border-bottom-left-radius:var(--round);border-bottom-right-radius:var(--round);}

.card>.nav{padding-top:16px;padding-bottom:16px;}

.card-split{
	margin:12px 0px;
	border-bottom: solid 1px var(--border-color);
}

.expand{
	overflow-y:hidden;
	overflow-x:unset;
	transition:0.2s;
}

.loader{
	position:absolute;
	inset:0;
	background-color:inherit;
	margin:0!important;
	border-radius:var(--round);
	display:flex;
	align-items:center;
	justify-content: center;
	transition:0.2s;
	opacity:0;
}
.loader.show{opacity:1;}
.loader:after{
	content:"";
	width:10px;
	height:10px;
	border:solid 2px rgb(var(--accent));
	border-radius:99px;
	border-top-color:transparent;
	animation:spin 1s linear infinite;
}
.btn>.loader:after{border-color:#FFF;border-top-color:transparent;}

.text{
	margin:8px 0;
}

p{margin:0 0 7px 0;}

.heading{
	font-size:20px;
	margin-bottom:5px;
	color:var(--abstract-text);
}
.heading.S{font-size:15px;}
.heading.L{font-size:25px;}

.dialog{
	position:fixed;
	inset:0;
	z-index:100;
	transition:0.2s;
	opacity:0;
	backdrop-filter: blur(4px);
}

.dialog>.screencenter>.container>.card{margin-bottom:0px;}

body.dark .dialog>.screencenter>.container{
	box-shadow: 0 18px 100px 15px rgba(0, 0, 0, .8);
}
.dialog>.screencenter>.container{
	box-shadow: 0 18px 100px 15px rgba(16,16,32, .15);
}

.dropdown{
	position:fixed;
	top:0;
	left:0;
	z-index:150;
	transition:opacity 0.2s;
	margin-top:10px;
	box-shadow:0 28px 60px var(--drop-shadow);
}

.dropdown:before{
	    content: "";
    transform: rotate(45deg);
    border: solid 1px var(--border-color);
    z-index: 1;
    position: absolute;
    left: 50%;
    top: -5px;
    margin-left: -6px;
    box-shadow: var(--box-shadow);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%);
    width: 10px;
    height: 10px;
    background: var(--card);
}
.dropdown>.card{margin-bottom:0;}

.dialog.show{
	opacity:1;
}

.tag{
    color: rgb(var(--accent));
    background-color: rgba(var(--accent),.1);
    padding: 4px 8px;
    margin: 4px 0;
    display: inline-block;
    border-radius: 3px;
	font-weight:bold;
	position:relative;
	display:inline-flex;
	align-items: center;
	box-sizing: border-box;
}
.tag.dot:before {
    content: "";
    border-radius: 5px;
    z-index: 1;
	margin-right:6px;
	border:solid 2px;
}

.tag.hollow{
	background-color: var(--background);
    color: var(--abstract-text);
    font-weight: normal;
}

.tag.S{
	opacity: 0.7;
    font-size: 9pt;
}

.alert{
	padding: 9px 12px;
    font-weight: bold;
    border-radius: var(--round);
    border-left: solid 3px;
	background-color: var(--background);
}

.tabs{
	margin-bottom:8px;
}

.tabs>a{
	color:var(--text-color);
	opacity:0.7;
	transition:0.2s;
}
.tabs.block>a.btn{
	display:block;
	text-align:center;
	width:180px;
	align-self: stretch;
}

.tabs.block>a.btn>*{
	display:block;
	width:100%;
	text-wrap: wrap;
}
.tabs.block>a.btn>i{
	font-size:40px;
}
.tabs.block>a.btn>label{
	font-size:20px;
}
.tabs.boxed{
	gap:0;
}
.tabs.boxed>a{
	box-shadow: 0 0 0 1px var(--text-color);
    border: 0;
    margin-right: 1px;
	border-radius:0;
	padding: 7px 12px;
}
.tabs.boxed>a:first-child{
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}
.tabs.boxed>a:last-child{
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
.tabs>a:hover{
	color:rgb(var(--accent));
	opacity:1;
}
.tabs>a.active{
	color:rgb(var(--accent));
	background-color: rgba(var(--accent),.1);
	opacity:1;
	box-shadow: 0 0 0 1px rgb(var(--accent));
}
.tabs .btn.add{
	border-style:dashed;
	width:unset!important;
}

.tabs>a.disabled{color:#b8c3d3;}

.tabs.rich>a{display:block;text-align:center;}

.selection>div{
	width:200px;
	transition:0.3s;
	cursor:pointer;
}

.selection>div>i{
	font-size:40px;
	color:rgb(var(--accent));
	margin:20px 0;
}

.selection .heading{
	color:rgb(var(--accent));
}

.tooltip{
	position: absolute;
    bottom: calc(100% + 8px);
    background-color: #000;
    color: #FFF;
    padding: 6px 11px;
    border-radius: var(--round);
	pointer-events:none;
	opacity:0;
	transition:0.2s;
}
.tooltip:after {
    content: "";
    transform: rotate(45deg);
    border: solid 6px #000;
    z-index: -1;
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -6px;
}

.has-tooltip:hover>.tooltip{opacity:1;}

[color='grey']{background-color:rgba(82, 133, 155,.1);color:rgb(82, 133, 155);}
[color='green']{background-color:rgba(48, 167, 117,.1);color:rgb(48, 167, 117);}
[color='yellow']{background-color:rgba(183,135,49,.1);color:rgb(183,135,49);}
[color='red']{background-color:rgba(197,22,46,.1);color:rgb(197,22,46);}
[color='purple']{background-color:rgba(118, 41, 165,.1);color:rgb(118, 41, 165);}

.checkout-dot{
	width:70px!important;
	height:47px;
	border-radius:5px;
	box-shadow:0 3px 6px rgba(0,0,0,.15);
	text-align:center;
	padding-top:3px;
	display:inline-block;
}
.checkout-dot>div{height:15px;}
.checkout-dot>div:before{
	content:"";
	width:30px;
	margin-right:10px;
	display:inline-block;
	height:6px;
	margin-bottom:5px;
	background-color:var(--custom);
	border-radius:99px;
	opacity:0.6;
	vertical-align:middle;
}
.checkout-dot>div:after{
	content:"";
	vertical-align:middle;
	width:10px;
	display:inline-block;
	height:10px;
	margin-bottom:5px;
	background-color:var(--custom);
	border-radius:99px;
}
.checkout-dot>a{
    background-color: var(--custom);
    border-radius: 99px;
    display: block;
    height: 12px;
    margin: 0 9px;
	position:relative;
}
.checkout-dot>a:before{content:"BUY";font-size:8px;color:#FFF;position:absolute;width:100%;left:0;margin-top:1px;}


.wrapflex.text-copy{
    overflow: hidden;
    overflow-wrap: anywhere;
}

img.preview{
	width:100px;
	height:100px;
	object-fit: cover;
	border-radius:4px;
}

.list>div{
	padding-top:8px;
	padding-bottom:6px;
	border-bottom:solid 2px var(--background);
}
.list>div:last-child{
	border-bottom:0;
}

.element-detail{
	
}

.element-detail>div{
	width:246px;
}

.element-detail>div:last-child{border:0;}

.element-detail>div>div{
	font-weight:bold;
	margin-bottom:10px;
	display:block;
}

.selector{
	border-bottom:solid 2px rgb(var(--accent));
	cursor:pointer;
	overflow:unset;
	z-index:1;
	color:rgb(var(--accent));
}
.selector>div{
	color:var(--text-color);
}
.selector>.heading{
	color:rgb(var(--accent));
}
.selector.active{
	background-color: #D8E3FD;
}

.selector.active:after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: inherit;
    border: solid 2px rgb(var(--accent));
    border-width: 2px 0 0 2px;
    bottom: -7px;
    left: 50%;
    margin-left: -7px;
    transform: rotate(-135deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%);
}

.breadcrum{
    padding: 2px 6px;
    position: absolute;
    top: 21px;
    z-index: 10;
}

.sidebar-contents:not(.open) .breadcrum{
	margin-left:30px;
}

.steps{
	margin-bottom:15px;
	align-items: baseline;
}
.steps>div{
	position:relative;
}
.steps span{
	background-color:rgb(var(--accent));
	color:#FFF;
	border-radius:99px;
	padding:4px 9px;
	font-size:12pt;
	margin-bottom:5px;
	display:inline-block;
}

.steps>.focus~ div span{
	background-color:var(--background);
	color:var(--text-color);
}
.steps>.focus div{
	color:rgb(var(--accent));
}

.steps span:after{
	content:"";
	position:absolute;
	width:83%;
	top:14px;
	margin-left:9%;
	z-index:0;
	height:1px;
	background-color:rgb(var(--accent));
}

.steps>.focus span:after,.steps>.focus~ div span:after{
	background-color:var(--border-color);
}

.steps>div:last-child span:after{
	display:none;
}

.breadcrum>span{
	display:inline-block;
	margin:0;
	text-transform: capitalize;
}
.breadcrum>span:after{
	content:"/";
	margin:0 0 0 8px;
	font-weight:bold;
}
.breadcrum>span:last-child{
	color:rgb(var(--accent));
}
.breadcrum>span:last-child:after{
	content:"";
}

@media only screen and (max-width: 400px) {
	
	.element-detail>div{
		width:100%;
		margin-right:0!important;
		border-right:0;
	}
	
}

@media only screen and (max-width: 750px) {
	
	.steps span{
		padding: 3px 7px;
        font-size: 10pt;
	}
	.steps span:after{
		top: 11px;
		margin-left: 27%;
        width: 52%;
	}
	.steps div{
		font-size:8pt;
	}
	
	.breadcrum{
		position:unset;
		padding: 8px 0;
		margin-left:0px!important;
	}
	
}.btn{
	padding:4px 12px;
	white-space: nowrap;
	position: relative;
	text-decoration: none;
	cursor:pointer;
	border-radius:8px;
	border:solid 2px transparent;
	
	transition:0.2s;
	display:inline-flex;
	align-items:center;
	user-select:none;
	justify-content: center;
	box-sizing: border-box;
	
}
.btn.hollow{
	background-color:var(--input-background);
	border:solid 1px var(--border-color);
	color:var(--text-color);
}
.btn.solid{
	background-color:rgb(var(--accent));
	color:var(--btn-text);
}
.btn:not(.solid):hover{
	background-color: rgba(var(--accent),.1);
	transition:0s;
}
.btn.solid:hover{
	background-color:rgba(var(--accent),0.8);
	transition:0s;
}
.btn>*{margin-left:2px;margin-right:2px;pointer-events:none;}

.btn>.complete{
	position:absolute;
	inset:0;
	background-color:#FFF;
	border:solid 2px #36C69C;
	margin: -6px -2px;
    border-radius: 6px;
	color:#36C69C;
	display:inline-flex;
	justify-content: center;
	align-items:center;
}

.btn small{color:var(--text-color);}

.btn.S{
	padding:1px 6px;
}
.btn>i{
	font-size: 22px;
}
.btn>i:last-child{
	margin-right:-4px;
	margin-left:3px;
}
.btn>i:first-child{
	margin-right:3px;
	margin-left:-4px;
}
.btn>i:first-child:last-child{
	margin-right:-4px;
	margin-left:-4px;
}

.inputwrap{
	margin-bottom:10px;
	flex:1;
}

.inputwrap.connected{
	margin:0;
	
}
.inputwrap.connected .wrapflex{
	border-radius:0;
	margin-bottom:-1px;
}

.inputwrap.connected .wrapflex:last-child{
	border-bottom-width:1px;
	border-bottom-left-radius:var(--round);
	border-bottom-right-radius:var(--round);
}

.input-under{
	display: flex;
    justify-content: space-between;
}

.inputwrap .wrapflex{
	border:solid 1px var(--input-border-color);
	border-radius:var(--round);
	position:relative;
	display:flex;
	align-items:center;
	transition:0.2s;
	padding:0 14px;
	background-color:var(--input-background);
}
.inputwrap.focus .wrapflex{
	border-color:rgb(var(--accent));
}
.inputwrap .wrapflex>.input{
	background:none;
	border:0;
	outline:0;
	padding:12px 0;
	font-family: 'Muli', sans-serif;
	box-sizing:border-box;
	min-height: 100%;
    width: 100%!important;
	color: var(--abstract-text);
}

select option{
	background-color:var(--background);
}

input.input::-webkit-calendar-picker-indicator{
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.inputwrap.readonly .wrapflex{
	background-color:#f5f8fb;
	border-color:transparent;
}

.inputwrap .checkboxflex{
	display:flex;
	align-items:center;
}
.inputwrap .checkboxflex>.input{position:absolute;display:none;}
.inputwrap .checkboxflex>a{
	border: solid 1px var(--border-color);
    display: inline-block;
    padding: 0px 2px;
    margin-right: 9px;
    border-radius: var(--round);
	color:transparent;
	transition:0.2s;
	user-select:none;
}
.checkboxflex>a>i{font-size:17pt;pointer-events:none;    margin-top: 1px;}
.checkboxflex>a.checked{background-color:rgb(var(--accent));border-color:transparent;}
.checkboxflex>a.checked>i{color:#FFF;}

.inputwrap.slide{
	max-width:65px;
	margin-bottom:0;
}

.inputwrap.slide .checkboxflex{
    flex-wrap: wrap;
    justify-content: center;
}

.inputwrap.slide .checkboxflex>a{
	width: 100%;
    border-radius: 99px;
	height:24px;
	position:relative;
	background-color:var(--background);
	margin-bottom:4px;
	margin-right:0;
	max-width: 50px;
}
.inputwrap.slide .checkboxflex>a.checked{
	background-color:rgb(var(--accent));
}

.inputwrap.slide .checkboxflex>a>i{display:none;}

.inputwrap.slide .checkboxflex>a:after{
	content:"";
	position:absolute;
	background-color:var(--btn-text);
	border-radius:99px;
	width:16px;
	height:16px;
	top:3px;
	left:4px;
	margin-left: 0;
	transition:0.3s;
	border: solid 1px var(--border-color);
}
.inputwrap.slide .checkboxflex>a.checked:after{
	left:100%;
	margin-left: -20px;
}

.inputwrap.slide label{
	font-size: smaller;
}

form.disabled .inputwrap{
	opacity:0.3;
	pointer-events:none;
}
form.disabled .btn{pointer-events:none;}

.wrapflex>i{
	padding: 0 13px;
	pointer-events:none;
	transition:0.2s;
}
.wrapflex>i.fix-right{
	position: absolute;
    right: 0px;
    pointer-events: none;
}
.wrapflex>span{pointer-events:none;}
.wrapflex.focus>i{color:rgb(var(--accent));}
.inputwrap.error .wrapflex{border-color:rgb(255,0,0);}

.inputwrap .form-error{
	color:red;
	opacity:0;
	transition:0.2s;
}
.inputwrap.error .form-error{opacity:1;}


.footer{
	position:sticky;
	transition:0s!important;
	bottom:0;
}

@media screen and (min-width:600px){
	.form-siblings .inputwrap{display:flex;}
	.form-siblings .inputwrap>label{width:130px;margin-top: 10px;text-align:right;}
	.form-siblings .inputwrap>div{padding-left:20px;flex:1;}
	
	.form-siblings .form-default .inputwrap{display:block!important;}
	.form-siblings .form-default .inputwrap>div{padding-left:0px;}
	
}


.media-input{
	border:dashed 2px var(--border-color);
	padding:20px;
	overflow:hidden;
	position:relative;
	text-align:center;
	border-radius: 4px;
	transition:0.2s;
}

.media-input>i{
    font-size: 40px;
    color: rgb(var(--accent));
    border: solid 1px var(--border-color);
    border-radius: 99px;
    padding: 20px;
    margin: 20px 0;
    display: inline-block;
	
}



.media-input.clickable:hover{
	border-color:rgb(var(--accent));
	cursor:pointer;
	transition:0s;
}

.media-input img{
	max-height: 200px;
	border-radius:5px;
}

.media>.card{
	width:150px;
	height:230px;
	cursor:pointer;
	border:solid 2px var(--card);
	overflow:hidden;
}

.media>.card:hover{
	border-color:rgb(var(--accent));
}

.media .image{
	width:100%;
	height:150px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.media .upload{
	
	position:relative;
	background-color:var(--card);
}

.media .upload>div{
	text-align:center;
	color:rgb(var(--accent));
	pointer-events:none;
}
.media .upload>input{
	position:absolute;
	margin:-500px;
	width:500%;
	height:500%;
	cursor:pointer;
}

.media .upload>div>i{font-size:50px;display:block;margin: 41px 0 0;}a{
	cursor:pointer;
	color:rgb(var(--accent));
}
.placeholder{
	text-align:center;
	padding:20px 0;
}
.placeholder>i{
	color:rgb(var(--accent));
	font-size: 90pt;
	margin-bottom:10px;
}

.pad{padding:16px;}

.pb{padding-bottom:15px;}
.mb{margin-bottom:15px;}

.or{
	padding:23px 0;
	text-align:center;
	position:relative;
}

.or:before{
    content: "";
    left: 0;
    right: 0;
    border-bottom: solid 1px var(--border-color);
    position: absolute;
	top:50%;
}
.or:after{
    content: "OR";
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50px;
    background-color: #FFF;
    margin-left: -25px;
    top: calc(50% - 7px);
    font-size: 8pt;
}

@media screen and (min-width:799px){
	::-webkit-scrollbar {width: 6px;height:6px;}
	::-webkit-scrollbar-thumb{background: #d7e1ea;}
}
@media screen and (max-width:800px){
	.screencenter.max-small{padding:0;}
	
	/*.siblings:not(.stay) .grow{flex:unset;width:100%!important;}*/
}.sidebar{
	width:250px;
	height:100%;
	position:absolute;
	left:-250px;
	transition:0.2s;
	z-index:20;
	box-shadow:var(--box-shadow);
	background-color:var(--card);
	box-sizing:border-box;
}
body>.sidebar{position:fixed;}
.sidebar.super{
	position:fixed;
	top:0;
	width:100%;
	max-width:420px;
	left:-420px;
	z-index:125;
}

.sidebar>.menu-btn{
	position:absolute;
	right:-38px;
	top:6px;
	padding:6px 8px;
	background-color:rgba(var(--accent),.2);
	color:rgb(var(--accent));
	border-radius:var(--round);
	transition:0.2s;
	z-index:100;
}
.sidebar>.menu-btn>i{font-size:12pt;margin-top: 2px;}
.sidebar>.menu-btn>i:after{content:"menu";}

.sidebar .scroller{padding:20px;padding-top:56px;box-sizing: border-box;width:100%;}

.sidebar-contents{
	top:0;
	left:0;
	right:0;
	background-color:var(--background);
	position:relative;
	min-width:250px;
	transition:0.2s;
	box-sizing: border-box;
	min-height:100%;
	padding:10px;
}
body>.sidebar-contents{
	position:absolute;
	padding-top: 70px;
}

.sidebar.open{left:0px;}
.sidebar-contents.open{margin-left:250px;}

.sidebar.open>.menu-btn{right:6px;}
.sidebar.open>.menu-btn>i:after{content:"west";}

.topbar{
	height:60px;
	position:fixed;
	top:0;
	right:0px;
	background-color:var(--background);
	width: 100%;
    text-align: right;
	z-index:10;
	margin:0 10px;
}
.nav .group{
	margin-left:12px;
	position:relative;
}
.nav>.group{margin-left:0;}

.nav .group>a{
	padding:7px 6px;
	display:flex;
	align-items:center;
	margin:2px 0;
	font-weight:bold;
	color:var(--abstract-text);
	cursor:unset;
}

.nav .items>a,.nav>a{
	padding:7px 6px;
	display:flex;
	align-items:center;
	color:var(--text-color);
	transition:0.2s;
	border-radius:var(--round);
	margin:2px 0;
	text-decoration:none;
}

.nav a.disabled{opacity:0.4;}

.nav a>i{margin-right:10px;color:rgb(var(--accent));}


.nav .items>a.active,.nav .items>a:hover,.nav>a:hover{
	background-color:rgba(var(--accent),.1);
	color:rgb(var(--accent));
}
.nav .group>a.active:not(:hover){
	color:var(--abstract-text);
	background:none;
}

.nav .items{
	padding-left:34px;
	position:relative;
	overflow:hidden;
	transition:0.2s;
}
.nav .items.addons{
	padding-left:0;
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

.nav .items.addons > a{
	width:33%;
	text-align:center;
	display:block;
	font-size:9pt;
	padding:7px 0;
	box-sizing:border-box;
}

.addon{
	background-color: rgb(var(--accent));
    color: #FFF;
    border-radius: 5px;
	padding: 2px;
	box-sizing:border-box;
}

.addon.L{
	
	font-size: 40px;
	width:50px;
	height:50px;
	text-align:center;
}
.addon>img{
	max-width:50px;
	max-height:40px;
}
.addon.material-symbols-outlined{
	padding-top:4px;
}
.nav .items:not(.addons):before{
	content: "";
    position: absolute;
    width: 3px;
    left: 16px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(var(--accent),.2);
	border-radius:5px;
}

.sidebar .sidebar-btn{
	z-index: 1;
    top: 6px;
    width: 171px;
    left: 7px;
	padding-bottom:6px;
	background-color: rgba(var(--accent),.2);
	position:absolute;
}
.sidebar .addon{
	position: absolute;
    right: 6px;
    padding: 4px;
	font-size:16px;
}

.tabs .addon{display:none;}.applications{
	margin:20px 0;
}

.applications>div{
	
	padding:20px;
	cursor:pointer;
	
	width:150px;
	
}
.applications>.click:after{
	content:"";
}.calendar{
	padding-bottom:5px;
	margin:1px;
}
.calendar>.siblings{margin-bottom:5px;}
.calendar .grid>div{
    width: calc(14.28% - 1px);
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    transition: 0.2s;
    box-shadow: 0 0 0 1px #ced6e1;
    margin: 0.5px;
    text-align:center;
    box-sizing: border-box;
}
.calendar .grid>div.day{
	color:rgb(var(--accent));
	
	min-height: 77px;
}
.calendar .grid>div.outer{
	color:#bcc4cf;
}
.calendar .grid>div>*{display:block;}

.calendar .timeslots>*{display:flex;margin-bottom:2px;}
.calendar .timeslots .btn{padding:1px;}
.calendar .timeslots .siblings>*{margin:0;}
.calendar .timeslots .card{padding:0;}.chart canvas{
	
	width:100%;
	height:500px;
	
}

.chart-total .label{
	font-size:13pt;
	color:var(--abstract-text);
}

.chart-total .value{
	min-width:100px;
}
.chart-total .value.L{
	font-size:15pt;
	color:rgb(var(--accent));
}

.chart-boxes{
	display:flex;
	padding:10px 2px;
	flex-wrap: wrap;
}
.chart-boxes>div{
	flex:0 0 50px;
	text-align:center;
	border:solid 1px var(--border-color);
	margin:2px;
	padding:10px 0;
}
.chart-boxes>.max{
	border-color:rgb(var(--accent));
	color:rgb(var(--accent));
}

@media screen and (max-width: 600px){
	
	.chart-total{
	    width: 100%;
        flex: unset;
		margin-right:0!important;
	}
	
}.colorpicker{
	display:inline-block;
	width:30px;
	height:25px;
	border-radius:99px;
	background-color:blue;
	font-size: 20px;
	color:#FFF;
	text-align:center;
	padding-top:3px;
	pointer-events:none;
}
.colorpicker:after{
		content:"colorize";
	font-family:"Material Symbols Outlined";
}

.colorpicker_dropdown .color_item{
	border:solid 2px var(--card);
	outline:solid 2px var(--card);
	display:inline-block;
	width:18px;
	height:18px;
	margin:-1px 0px;
	border-radius:99px;
	cursor:pointer;
	transition:0.2s;
	z-index:1;
	position: relative;
}
.colorpicker_dropdown .color_item:hover,.colorpicker_dropdown .color_item.active{
	outline-color:rgb(var(--accent));
	transition:0s;
	z-index:2;
}.datalist{
	
	
	
}

.datalist .headings>div{
	font-weight:bold;
	margin-bottom:0;
	padding:10px 0px;
}
.datalist .headings>div:last-child{border-right:0;}

.datalist .grid{
	
}

.datalist .grid>div{
	
	border-top:solid 1px var(--border-color);
	opacity:1;
	transition:0.2s;
	pointer-events:auto;
}
.datalist .grid>div.animate{
	opacity:0;
	pointer-events:none;
}
.datalist .grid>div>div{
	padding: 10px 0px;
}
.datalist .grid>div.clickable:hover{
	cursor:pointer;
	transition:0s;
	background-color:var(--background);
}

.datalist .filter{
	margin-bottom:15px;
}

.datalist .filter>*,.datalist .filter .inputwrap{
	margin-bottom:0;
}
@media screen and (max-width:500px){
	
	.datalist .grid>div,.datalist .headings{
		flex-wrap: nowrap;
	}
	
	.datalist .grid>div>div,.datalist .headings>div{
		width:33%;
		flex:unset;
	}
	
	.datalist .grid>div>div:nth-child(n+4),.datalist .headings>div:nth-child(n+4){
		display:none;
	}
	
}.datepicker{
	width:300px;
}
.datepicker .grid>div{
	width: 14.28%;
	padding:8px 0;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	border-radius:var(--round);
	transition:0.2s;
}
.datepicker .grid>div.day{
	cursor:pointer;
	color:rgb(var(--accent));
	margin:2px 0;
}
.datepicker .grid>div.day:not(.active):hover{
	transition:0s;
	background-color: rgba(var(--accent),.2);
}
.datepicker .grid>div.outer{
	color:#bcc4cf;
}
.datepicker .grid>div.locked{
	color:#bcc4cf;
	pointer-events:none;
}

.datepicker .grid>div.day.today{
	box-shadow:0 0 1px 1px rgb(var(--accent));
}

.datepicker .grid>div.active,.datepicker .nav a.active{
	background-color: rgb(var(--accent));
	color:#FFF;
}
.datepicker .day.fill{
	background-color: rgba(var(--accent),.1);
	border-radius:0;
}

.datepicker .nav{
	overflow:auto;
}

.datepicker .day.fill.start{
	border-top-left-radius:100px;
	border-bottom-left-radius:100px;
}
.datepicker .day.fill.end{
	border-top-right-radius:100px;
	border-bottom-right-radius:100px;
}
.timepicker .nav{
	overflow:auto;
}
.timepicker .clock{
	color: #FFF;
    background-color: rgb(var(--accent));
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
    margin-bottom: 9px;
    border-radius: var(--round);
}.editlist{
	box-shadow:none;
	touch-action: pan-y;
}

.editlist .siblings.fixed>.btn{width:auto!important;}

.editlist.drag-state{
	pointer-events:none;
}

.card .editlist{
	margin:2px;
}

.drag-handle{
    width: 50px!important;
    height: 35px;
    margin-right: 12px;
    position: relative;
    cursor: move;
    cursor: grab;
}
.drag-handle:before,.drag-handle:after{
	content:"";
	position:absolute;
	background-color:rgba(var(--accent),.25);
	height:4px;
	left:10px;
	right:10px;
	top:10px;
	transition:0.2s;
}
.drag-handle:hover:before,.drag-handle:hover:after{background-color:rgba(var(--accent),.8);transition:0s;}
.drag-handle:after{bottom:10px;top:auto;}

.dragging{
	position:absolute;
	transition:0s!important;
	box-sizing: border-box;
	z-index:1000;
	pointer-events:none;
	width:100%;
	max-width:500px;
	box-shadow:var(--box-shadow)!important;
}
.dragging.return{
	transition:0.2s!important;
	max-width:1000px;
}

.dragging>*:not(.drag-keep,.drag-handle){
	display:none;
}

.drop-placeholder{border:dashed 2px transparent;height:0;transition:0.1s;margin:-2px 0;}
.drop-placeholder.show{border-color:rgb(var(--accent));background-color:rgba(var(--accent),.3);height:50px;margin:0;}.schedule-list .month-label{
    padding: 4px 12px;
    display:inline-block;
    text-align: center;
	border:solid 1px var(--border-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--text-color);
	border-width: 1px 1px 0 1px;
}
.schedule-list .group{
	transition:opacity 0.3s;
}.multistatus{
	padding:6px;
	border-radius:4px;
	border:solid 1px #d8e1ed;
	transition:0.2s;
	position:relative;
}
.multistatus:hover{
	border-color:rgb(var(--accent));
	transition:0s;
}
.multistatus>div{
	font-size:12px;
}
.multistatus:after{
	content:"keyboard_arrow_down";
	font-family:"Material Symbols Outlined";
	position:absolute;
	right:5px;
	top:6px;
	font-size:15px;
}.theme-preview{
	max-width:200px;
	border:solid 1px var(--border-color);
	padding:12px;
	box-sizing:border-box;
	border-radius:5px;
	font-size:10px;
	position:relative;
	background-color:#FFF;
	overflow:hidden;
}
.theme-preview.dark{background-color:#121416;color:#9eadc1;}

.theme-preview>div{pointer-events:none;}

.theme-preview .box{
	padding:4px 6px;
	border:solid 1px #dee7f1;
	margin-right:0;
}
.theme-preview.dark .box{
	border-color:#333f4f;
}
.theme-preview .btn{padding:3px 6px;margin-right:0;border-radius:2px;}
.theme-preview i{font-size:12px;}
.theme-preview>.btn{
    width: 100%;
    box-sizing: border-box;
}

.theme-preview .heading{
	font-size:12px;
}

.theme-preview:after{
    content: "PREVIEW ONLY";
    opacity: 0;
    background-color: var(--background);
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: 0.2s;
    text-align: center;
    padding-top: 35px;
    font-size: 14px;
    font-weight: bold;
}
.theme-preview:hover:after{
	opacity:0.95;
}
.theme-preview.select{
	cursor:pointer;
}
.theme-preview.select:after{
	content:"APPLY THEME";
}