html {
	height:100%;
}
body {
	height:100%;
	width:100vw;
	overflow:hidden;
	/* font-family: 'Noto Sans TC', sans-serif; */
	font-family: var(--md-sys-typescale-body-large-font-family-name);
	/*font-family: FLiHei, "Microsoft JhengHei", sans-serif;*/
}
textarea {
	font-family: var(--md-sys-typescale-body-large-font-family-name);
}
* {
	box-sizing:border-box;
	-webkit-tap-highlight-color: transparent;
} 
/************/
*::-webkit-scrollbar {
  width:6px;
  height:6px;
}
.ai-mobile *::-webkit-scrollbar {
  width:2px;
  height:2px;
}
*::-webkit-scrollbar-track ,
.scroller::-webkit-scrollbar-track {
	background:transparent;
}
*::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb {
	/* background-color:rgba(255,255,255,0);
	border-radius:0.25rem; */
	visibility: hidden;
}
*:hover::-webkit-scrollbar-thumb,
.scroller:hover::-webkit-scrollbar-thumb {
	background-color:rgba(0,0,0,0.25);
	transition: background-color 0.25s;
	visibility: visible;
}
body.dark *:hover::-webkit-scrollbar-thumb,
body.dark .scroller:hover::-webkit-scrollbar-thumb {
	background-color:rgba(255,255,255,0.25);
	transition: background-color 0.25s;
	visibility: visible;
}
*::-webkit-scrollbar-corner,
.scroller::-webkit-scrollbar-corner {
	background-color:transparent;
}
/*******ai-page*************/
.ai-page {
	position:absolute;
	left:0px;
	top:0px;
	width:100vw;
	height:100%;
	z-index:100;
}
.ai-modal {
	overflow:hidden;
}
.ai-open .ai-modal.ai-inherit-inout,
.ai-in .ai-modal.ai-inherit-inout,
.ai-modal.ai-open,
.ai-modal.ai-in {
	background-color:rgba(0,0,0,0.3);
	-webkit-animation-name: ai-modalin;
	-moz-animation-name: ai-modalin;
	animation-name: ai-modalin;
}
.ai-modal.ai-transparent.ai-open,
.ai-modal.ai-transparent.ai-in {
	background-color:rgba(0,0,0,0.01);
	animation-name: ai-modalin-0;
}
.ai-modal.ai-1.ai-open,
.ai-modal.ai-1.ai-in {
	background-color:rgba(0,0,0,0.1);
	animation-name: ai-modalin-1;
}
.ai-modal.ai-5.ai-open,
.ai-modal.ai-5.ai-in {
	background-color:rgba(0,0,0,0.5);
	animation-name: ai-modalin-5;
}
.ai-modal.ai-8.ai-open,
.ai-modal.ai-8.ai-in {
	background-color:rgba(0,0,0,0.8);
	animation-name: ai-modalin-8;
}

.ai-close .ai-modal.ai-inherit-inout,
.ai-out .ai-modal.ai-inherit-inout,
.ai-modal.ai-close,
.ai-modal.ai-out {
	background-color:rgba(0,0,0,0);
	-webkit-animation-name: ai-modalout;
	-moz-animation-name: ai-modalout;
	animation-name: ai-modalout;
}
.ai-modal.ai-transparent.ai-close,
.ai-modal.ai-transparent.ai-out {
	background-color:rgba(0,0,0,0.01);
	animation-name: ai-modalout-0;
}
.ai-modal.ai-1.ai-close,
.ai-modal.ai-1.ai-out {
	background-color:rgba(0,0,0,0.01);
	animation-name: ai-modalout-1;
}
.ai-modal.ai-5.ai-close,
.ai-modal.ai-5.ai-out {
	background-color:rgba(0,0,0,0.01);
	animation-name: ai-modalout-5;
}
.ai-modal.ai-8.ai-close,
.ai-modal.ai-8.ai-out {
	background-color:rgba(0,0,0,0.01);
	animation-name: ai-modalout-8;
}

@keyframes ai-modalin {
	from {background-color:rgba(0,0,0,0);}
	to {background-color:rgba(0,0,0,0.3);}
}
@keyframes ai-modalin-0 {
	from {background-color:rgba(0,0,0,0);}
	to {background-color:rgba(0,0,0,0.01);}
}
@keyframes ai-modalin-1 {
	from {background-color:rgba(0,0,0,0);}
	to {background-color:rgba(0,0,0,0.1);}
}
@keyframes ai-modalin-5 {
	from {background-color:rgba(0,0,0,0);}
	to {background-color:rgba(0,0,0,0.5);}
}
@keyframes ai-modalin-8 {
	from {background-color:rgba(0,0,0,0);}
	to {background-color:rgba(0,0,0,0.8);}
}

@keyframes ai-modalout {
	from {background-color:rgba(0,0,0,0.3);}
	to {background-color:rgba(0,0,0,0);}
}
@keyframes ai-modalout-0 {
	from {background-color:rgba(0,0,0,0.01);}
	to {background-color:rgba(0,0,0,0);}
}
@keyframes ai-modalout-1 {
	from {background-color:rgba(0,0,0,0.1);}
	to {background-color:rgba(0,0,0,0);}
}
@keyframes ai-modalout-5 {
	from {background-color:rgba(0,0,0,0.5);}
	to {background-color:rgba(0,0,0,0);}
}
@keyframes ai-modalout-8 {
	from {background-color:rgba(0,0,0,0.8);}
	to {background-color:rgba(0,0,0,0);}
}
/******from JQM********/
.ai-open, .ai-in {
	animation-timing-function: ease-out;
	animation-duration: 225ms;
    animation-fill-mode: forwards;
	display:block;
}
.ai-close, .ai-out {
	animation-timing-function: ease-in;
	animation-duration: 225ms;
    animation-fill-mode: forwards;
}
@keyframes ai-fadein {
    from { opacity:0; }
    to { opacity: 1; }
}
@keyframes ai-fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.ai-open .ai-fade.ai-inherit-inout, 
.ai-in .ai-fade.ai-inherit-inout, 
.ai-fade.ai-open,
.ai-fade.ai-in {
	animation-duration:350ms;
	animation-name: ai-fadein;
	opacity: 1;
}
.ai-close .ai-fade.ai-inherit-inout, 
.ai-out .ai-fade.ai-inherit-inout, 
.ai-fade.ai-close,
.ai-fade.ai-out {
	animation-duration:350ms;
	animation-name: ai-fadeout;
	opacity: 0;
}
.ai-pop {
	transform-origin: 50% 50%;
}
.ai-open .ai-pop.ai-inherit-inout, 
.ai-in .ai-pop.ai-inherit-inout, 
.ai-pop.ai-open,
.ai-pop.ai-in {
	transform: scale(1);
	animation-name: ai-popin;
	animation-duration: 350ms;
    opacity: 1;
}
.ai-close .ai-pop.ai-inherit-inout, 
.ai-out .ai-pop.ai-inherit-inout, 
.ai-pop.ai-close,
.ai-pop.ai-out {
	animation-name: ai-popout;
	animation-duration:350ms;
	opacity: 0;
}
@keyframes ai-popin {
    from {
        transform: scale(.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes ai-popout {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.8);
        opacity: 0;
    }
}
@keyframes ai-slideinfromright {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes ai-slideinfromleft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
@keyframes ai-slideouttoleft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes ai-slideouttoright {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.ai-open .ai-slider2l.ai-inherit-inout, 
.ai-in .ai-slider2l.ai-inherit-inout, 
.ai-slider2l.ai-open,
.ai-slider2l.ai-in {
	transform: translateX(0);
	animation-name: ai-slideinfromright;
}
.ai-close .ai-slider2l.ai-inherit-inout, 
.ai-out .ai-slider2l.ai-inherit-inout, 
.ai-slider2l.ai-close,
.ai-slider2l.ai-out {
	transform: translateX(100%);
	animation-name: ai-slideouttoright;
}
.ai-open .ai-slidel2r.ai-inherit-inout, 
.ai-in .ai-slidel2r.ai-inherit-inout, 
.ai-slidel2r.ai-open,
.ai-slidel2r.ai-in {
	transform: translateX(0);
	animation-name: ai-slideinfromleft;
}
.ai-close .ai-slidel2r.ai-inherit-inout, 
.ai-out .ai-slidel2r.ai-inherit-inout, 
.ai-slidel2r.ai-close,
.ai-slidel2r.ai-out {
	transform: translateX(-100%);
	animation-name: ai-slideouttoleft;
}
.ai-open .ai-slidefade.ai-inherit-inout, 
.ai-in .ai-slidefade.ai-inherit-inout, 
.ai-slidefade.ai-open,
.ai-slidefade.ai-in {
	transform: translateX(0);
	animation-name: ai-fadein;
	animation-duration: 200ms;
}
.ai-close .ai-slidefade.ai-inherit-inout, 
.ai-out .ai-slidefade.ai-inherit-inout, 
.ai-slidefade.ai-close,
.ai-slidefade.ai-out {
	transform: translateX(-100%);
	animation-name: ai-slideouttoleft;
	animation-duration:350ms;
}
.ai-open .ai-slidedown.ai-inherit-inout, 
.ai-in .ai-slidedown.ai-inherit-inout, 
.ai-slidedown.ai-open,
.ai-slidedown.ai-in {
	transform: translateY(0);
	animation-name: ai-slideinfromtop;
	animation-duration:350ms;
}
.ai-close .ai-slidedown.ai-inherit-inout, 
.ai-out .ai-slidedown.ai-inherit-inout, 
.ai-slidedown.ai-close,
.ai-slidedown.ai-out {
	animation-name: ai-slideouttotop;
	animation-duration:350ms;
	transform: translateY(-120%);
}
@keyframes ai-slideinfromtop {
    from { transform: translateY(-120%); }
    to { transform: translateY(0); }
}

.ai-open .ai-slideup.ai-inherit-inout, 
.ai-in .ai-slideup.ai-inherit-inout, 
.ai-slideup.ai-open,
.ai-slideup.ai-in {
	transform: translateY(0);
	animation-name: ai-slideinfrombottom;
	animation-duration:350ms;
}
.ai-close .ai-slideup.ai-inherit-inout, 
.ai-out .ai-slideup.ai-inherit-inout, 
.ai-slideup.ai-close,
.ai-slideup.ai-out {
	animation-name: ai-slideouttobottom;
	animation-duration:350ms;
}
@keyframes ai-slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes ai-slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/**********************************/
.animator {
	transform: none;
	animation-duration:500ms;
}
.animator.up.animate{
	transform: translateY(0);
	animation-name: kf_animator_up;
}
@keyframes kf_animator_up {
    from { transform: translateY(100%);}
    to { transform: translateY(0);}
}
/**********************************/

.ai-zoom {
	transform-origin: 50% 50%;
}
.ai-open .ai-zoom.ai-inherit-inout, 
.ai-in .ai-zoom.ai-inherit-inout, 
.ai-zoom.ai-open,
.ai-zoom.ai-in {
	transform: scale(1);
	animation-name: ai-zoomin;
	animation-duration: 450ms;
    opacity: 1;
}
.ai-close .ai-zoom.ai-inherit-inout, 
.ai-out .ai-zoom.ai-inherit-inout, 
.ai-zoom.ai-close,
.ai-zoom.ai-out {
	animation-name: ai-zoomout;
	animation-duration: 450ms;
	opacity: 0;
}
@keyframes ai-zoomin {
    from {
        transform: scale(.1);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes ai-zoomout {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.1);
        opacity: 0;
    }
}
/**/
.ai-scalex {
	transform-origin: 50% 50%;
}
.ai-open .ai-scalex.ai-inherit-inout, 
.ai-in .ai-scalex.ai-inherit-inout, 
.ai-scalex.ai-open,
.ai-scalex.ai-in {
	transform: scaleX(1);
	animation-name: ai-scalexin;
	animation-duration: 450ms;
    opacity: 1;
}
.ai-close .ai-scalex.ai-inherit-inout, 
.ai-out .ai-scalex.ai-inherit-inout, 
.ai-scalex.ai-close,
.ai-scalex.ai-out {
	animation-name: ai-scalexout;
	animation-duration:450ms;
	opacity: 0;
}
@keyframes ai-scalexin {
    from {
        transform: scaleX(.1);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}
@keyframes ai-scalexout {
    from {
        transform: scaleX(1);
        opacity: 1;
    }
    to {
        transform: scaleX(.1);
        opacity: 0;
    }
}
/**/
.ai-scaley {
	transform-origin: 50% 50%;
}
.ai-open .ai-scaley.ai-inherit-inout, 
.ai-in .ai-scaley.ai-inherit-inout, 
.ai-scaley.ai-open,
.ai-scaley.ai-in {
	transform: scaleY(1);
	animation-name: ai-scaleyin;
	animation-duration: 450ms;
    opacity: 1;
}
.ai-close .ai-scaley.ai-inherit-inout, 
.ai-out .ai-scaley.ai-inherit-inout, 
.ai-scaley.ai-close,
.ai-scaley.ai-out {
	animation-name: ai-scaleyout;
	animation-duration:450ms;
	opacity: 0;
}
@keyframes ai-scaleyin {
    from {
        transform: scaleY(.1);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}
@keyframes ai-scaleyout {
    from {
        transform: scaleY(1);
        opacity: 1;
    }
    to {
        transform: scaleY(.1);
        opacity: 0;
    }
}
/*****************/
.ai-bk-empty{
	background: -webkit-linear-gradient(135deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), -webkit-linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
	background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), -moz-linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
	background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
	/*background-size:50px 50px;*/
}
.ai-bk-transparent{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");
}
.ai-background-wait{
background-image:
    radial-gradient(
      #eee 65%,
      transparent 70%
      ),
    radial-gradient(
      #eee 65%,
      transparent 70%
      ),
    radial-gradient(
      #eee 65%,
      transparent 70%
      ),
    radial-gradient(
      #eee 65%,
      transparent 70%
      ) !important;
  
  background-repeat: no-repeat;
  
  background-size: 
    1em 1em, 
    1em 1em, 
    1em 1em, 
    1em 1em !important;
  background-position: 
    calc(50% - 1.6em) 50%,
    calc(50% - 1.6em) 50%,
    50% 50%,
    calc(50% + 1.6em) 50%;
  
  animation: loadrunner .6s infinite;
  }

@keyframes loadrunner {
  0% {  
    background-size: 
      0em 0em, 
      1em 1em, 
      1em 1em, 
      1em 1em !important;;
    background-position: 
      calc(50% - 1.6em) 50%,
      calc(50% - 1.6em) 50%,
      50% 50%,
      calc(50% + 1.6em) 50%;   
    }
  100% {  
    background-size: 
      1em 1em, 
      1em 1em, 
      1em 1em, 
      0em 0em !important;;
    background-position: 
      calc(50% - 1.6em) 50%,
      50% 50%,
      calc(50% + 1.6em) 50%,
      calc(50% + 1.6em) 50%;    
    }
  }
 
/*****************color****************/
body.dark input {
	color-scheme: dark;
}
body mvc-page {
	background-color: var(--md-sys-color-surface);
	color:var(--md-sys-color-on-surface);
}
body {
	--autofill-color:rgba(255,255,255,0.1);
	--md-comp-color-panel-backdrop:rgba(255, 255, 255, 0.5);
	--md-comp-color-backdrop30:rgba(255,255,255,.3);
}
body.dark{
	--autofill-color:rgba(0,0,0,0.1);
	--md-comp-color-panel-backdrop:rgba(255, 255, 255, 0.2);
	--md-comp-color-backdrop30:rgba(0,0,0,.3);
}
.flex-center {
	display:flex;align-items:center;justify-content:center;
	&.column {
		flex-direction: column;
	}
}


.backdrop-blur5 {
	background-color: var(--md-comp-color-backdrop30);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.backdrop-blur10 {
	background-color: var(--md-comp-color-backdrop30);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.backdrop-blur2 {
	background-color: var(--md-comp-color-backdrop30);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/****************/
a {
  text-decoration: none;
}
.ai-page {
  /* font-family: FLiHei, "Microsoft JhengHei", sans-serif;
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-weight: normal; */

  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}
@media only screen and (min-width: 0) {
 html, .ai-page{
	font-family: var(--md-sys-typescale-body-medium-font-family-name);
	font-style: var(--md-sys-typescale-body-medium-font-family-style);
	font-weight: var(--md-sys-typescale-body-medium-font-weight);
	font-size: var(--md-sys-typescale-body-medium-font-size);
	letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
	line-height: var(--md-sys-typescale-body-medium-line-height);
  }
}
@media only screen and (min-width: 992px) {
  html,.ai-page{
    font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	line-height: var(--md-sys-typescale-body-large-line-height);
	}
}
@media only screen and (min-width: 1200px) {
 html, .ai-page{
	font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	line-height: var(--md-sys-typescale-body-large-line-height);
  }
}
/* .material-icons {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
} */
.material-icons {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
}
/* .material-icons.filled,
.material-symbols-outlined.filled {
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
} */



body {
	--md-sys-shadow0:none;
	--md-sys-shadow1:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	--md-sys-shadow15:0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
	--md-sys-shadow2:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
	--md-sys-shadow3:0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
	--md-sys-shadow4:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
	--md-sys-shadow5:0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
	--md-app-background-logo:
		linear-gradient(217deg, rgb(from var(--md-sys-color-tertiary) r g b / 0.7), rgba(255, 0, 0, 0) 70.71%),
		linear-gradient(127deg, rgb(from var(--md-sys-color-primary) r g b / 0.7), rgba(0, 255, 0, 0) 70.71%),
		linear-gradient(336deg, rgb(from var(--md-sys-color-secondary) r g b / 0.7), rgba(0, 0, 255, 0) 70.71%);
}
body.dark{
	--md-sys-shadow0:none;
	--md-sys-shadow1:0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12), 0 3px 1px -2px rgba(255, 255, 255, 0.2);
	--md-sys-shadow15:0 3px 3px 0 rgba(255, 255, 255, 0.14), 0 1px 7px 0 rgba(255, 255, 255, 0.12), 0 3px 1px -1px rgba(255, 255, 255, 0.2);
	--md-sys-shadow2:0 4px 5px 0 rgba(255, 255, 255, 0.14), 0 1px 10px 0 rgba(255, 255, 255, 0.12), 0 2px 4px -1px rgba(255, 255, 255, 0.3);
	--md-sys-shadow3:0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 0.3);
	--md-sys-shadow4:0 8px 10px 1px rgba(255, 255, 255, 0.14), 0 3px 14px 2px rgba(255, 255, 255, 0.12), 0 5px 5px -3px rgba(255, 255, 255, 0.3);
	--md-sys-shadow5:0 16px 24px 2px rgba(255, 255, 255, 0.14), 0 6px 30px 5px rgba(255, 255, 255, 0.12), 0 8px 10px -5px rgba(255, 255, 255, 0.3);
}
.shadow0,
.ai-shadow.ai-0 {
  box-shadow: none !important;
}
.shadow1,
.ai-shadow.ai-1 {
  	box-shadow: var(--md-sys-shadow1);
}
.shadow15,
.ai-shadow.ai-15 {
	box-shadow: var(--md-sys-shadow15);
}
.shadow2,
.ai-shadow.ai-2 {
	box-shadow: var(--md-sys-shadow2);
}
.shadow3,
.ai-shadow.ai-3 {
	box-shadow: var(--md-sys-shadow3);
}
.shadow4,
.ai-shadow.ai-4 {
	box-shadow: var(--md-sys-shadow4);
}
.shadow5,
.ai-shadow.ai-5 {
	box-shadow: var(--md-sys-shadow5);
}


/********* loader *****************/
/*
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
change color border-color:#0dc5c1 transparent transparent transparent;
*/
.lds-ring {
  	display: block;
  	position: relative;
  	width:36px;
  	height:36px;
}
.lds-ring div {
  	box-sizing: border-box;
  	display: block;
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	margin: 3px;
  	border: 3px solid transparent;
  	border-radius: 50%;
  	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color:var(--md-sys-color-primary) transparent transparent transparent;/
}
.lg .lds-ring {
  	width:48px;
  	height:48px;	
}
.lg .lds-ring div {
  	margin: 4px;
  	border-width: 4px;
}
.sm .lds-ring {
  	width: 18px;
  	height: 18px;
}
.sm .lds-ring div {
  	margin: 2px;
  	border-width: 2px;
}
.lds-ring div:nth-child(1) {
  	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}
/*****
<div class="lds-circle"></div>
*/
/********/

audio:focus,
video:focus{
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
}

#xrdcount {
	display:none;
	position:absolute;
	/* background-color:red; */
	background-color:var(--md-sys-color-error);
	border-radius:50%;
	/* color:white; */
	color:var(--md-sys-color-on-error);
	text-align: center;font-size:10px;min-width: 16px;height: 16px;line-height: 16px;
	right:0px;
	top:calc(50% - 8px);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0px 1000px var(--autofill-color) inset !important;
	box-shadow: 0 0 0px 1000px var(--autofill-color) inset !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--autofill-color) inset !important;
	box-shadow: 0 0 0px 1000px var(--autofill-color) inset !important;
	background-color:var(--autofill-color) !important;
	transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color:var(--md-sys-color-outline-variant) !important;
}
textarea, input, .ai-input {
	position:relative;
	display: block;
    cursor: pointer;
    background-color: transparent;
	color:var(--md-sys-color-on-surface);
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    margin:0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: default !important;
    transition: all 0.3s;
	&:invalid {
		color:var(--md-sys-color-error);
	}
}
/******/
/***********/
mvc-page {
	.scroller{
		position:absolute;
		left:0px;top:0px;
		right:0px;bottom:0px;
		overflow-x:hidden;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		touch-action:pan-y;
		touch-action:auto;
		&.pan-xy {
			overflow-x:auto;
			touch-action:pan-y pan-x;
			touch-action:auto;
			* {
				touch-action:pan-y pan-x !important;
				touch-action:auto;
			}
		}
		* {
			touch-action:pan-y;
			touch-action:auto;
		}
	}
}
.md-field {
	position:relative;
	background-color: var(--md-sys-color-surface-container-highest);
	min-height:56px;
	border-radius:4px 4px 0 0;
	padding:8px 16px;
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:16px;/* 12+4  for supporting text*/
	border-bottom:1px solid var(--md-sys-color-on-surface-variant);
	&:has( > .material-icons+label) {
		padding-left:12px;
	}
	&:has( > label+.material-icons) {
		padding-right:12px;
	}
	> .material-icons {
		color:var(--md-sys-color-on-surface-variant);
	}
	> label {
		position:absolute;
		color:var(--md-sys-color-on-surface-variant);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		top : calc(50% - var(--md-sys-typescale-body-large-line-height) / 2);
		transition:all .3s ease-in-out;
		pointer-events: none;
		white-space: nowrap;
		display:flex;
	}
	&:has(>.material-icons:first-child) > label{
		left:52px;/* 12+24+16 */
	}
	&:is([required]) > label:before{
		position:relative;
		content:'*';
		color:var(--md-sys-color-error);
		padding-right:4px;
	}
	> :is(.input,textarea,input), >.input :is(input, textarea){
		flex-grow: 1;
		padding-top:0px;
		padding-bottom: 0px;
		color:var(--md-sys-color-on-surface);
		caret-color: var(--md-sys-color-primary);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		min-height:var(--md-sys-typescale-body-large-line-height);
		cursor:pointer;
		.ios &:is(input[type="date"],input[type="datetime-local"]){
			width:100%;
		}
	}
	> :is(div.input){
		cursor:default;
	}
	&:has(label) {
		> .input,> textarea,> input{
			margin-top : calc( var(--md-sys-typescale-body-small-line-height) - 1px );
			align-self : flex-end;
		}
	}
	&::after{
		position:absolute;
		content:'';
		left:50%;
		width:0%;
		bottom:0px;
		height:2px;
		background-color:var(--md-sys-color-on-surface-variant);
		transition: 0.3s;
	}
	> .supporting-text {
		position: absolute;
		left: 0px;
		top: 100%;
		right: 0px;
		padding:4px 16px 0 16px;
		color:var(--md-sys-color-on-surface-variant);
		font-weight: var(--md-sys-typescale-body-small-font-weight);
		font-size: var(--md-sys-typescale-body-small-font-size);
		letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
		line-height: var(--md-sys-typescale-body-small-line-height);
	}
	&[disabled] {
		pointer-events: none;
		background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.04);
		border-bottom:1px solid rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		> .material-icons,
		> label,
		> .input, > textarea, > input,
		> .supporting-text {
			color:var(--md-sys-color-on-surface);
			opacity:0.38;
		}
	}
	&:hover{
		border-bottom:1px solid var(--md-sys-color-on-surface);
		&::before {
			position:absolute;
			content:'';
			left:0px;top:0px;width:100%;height:100%;
			content:' ';
			background-color: var(--md-sys-color-on-surface);
			opacity: 0.08;
			pointer-events: none;
		}
		&::after {
			background-color: var(--md-sys-color-on-surface);
		}
		> label, > .material-icons, > .supporting-text{
			color:var(--md-sys-color-on-surface-variant);
		}
		> .input, textarea, .input{
			color:var(--md-sys-color-on-surface);
		}
	}
	&:focus-within{
		&::before {
			display:none;
		}
		&::after {
			left:0px;
			width:100%;
			background-color: var(--md-sys-color-primary);
			transition: 0.3s;
		}
		> label {
			color:var(--md-sys-color-primary);
		}
		> .input, textarea, input{
			color:var(--md-sys-color-on-surface);
		}
		> .supporting-text {
			color:var(--md-sys-color-on-surface-variant);
		}
	}
	&.active > label,
	&:focus-within > label,
	&:has(input, .input, textarea):has(.placeholder-hidden,[placeholder-hidden]) > label,
	&:has(input, .input, textarea):not(:has(:placeholder-shown, .placeholder-shown)) > label{
		top : 8px;
		transition:all .3s ease-in-out;
		font-weight: var(--md-sys-typescale-body-small-font-weight);
		font-size: var(--md-sys-typescale-body-small-font-size);
		letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
		line-height: var(--md-sys-typescale-body-small-line-height);
	}
	&:has(:invalid, .invalid){
		border-bottom:1px solid var(--md-sys-color-error);
		> .material-icons {
			color:var(--md-sys-color-on-surface-variant);
		}
		> label , > .supporting-text,  & > label ~ .material-icons {
			color:var(--md-sys-color-error);
		}
		> .input, > textarea, > input {
			color:var(--md-sys-color-on-surface);
		}
		&:hover{
			border-bottom:1px solid var(--md-sys-color-on-error-container);
			> .material-icons {
				color:var(--md-sys-color-on-surface-variant);
			}
			> label, & > label ~ .material-icons {
				color:var(--md-sys-color-on-error-container);
			}
			> .supporting-text {
				color:var(--md-sys-color-error);
			}
			> .input, > textarea, > input {
				color:var(--md-sys-color-on-surface);
			}
			&::before{
				background-color:var(--md-sys-color-on-surface);
				opacity: 0.08;
				pointer-events: none;
			}
		}
		&:focus-within{
			&::after {
				left:0px;
				width:100%;
				height:1px;
				background-color:var(--md-sys-color-error);
				transition: 0.3s;
			}
			> .material-icons {
				color:var(--md-sys-color-on-surface-variant);
			}
			> label, .supporting-text, & > label ~ .material-icons {
				color: var(--md-sys-color-error);
			}
			>.input, > textarea, > input {
				color:var(--md-sys-color-on-surface);
				caret-color: var(--md-sys-color-error);
			}
		}
	}
}
/*********---------------************/
.md-field-outline {
	position:relative;
	min-height:56px;
	border-radius:4px;
	border:2px solid transparent;
	padding:8px 16px;
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:16px;/* 12+4  for supporting text*/
	label::after {
		position:relative;
		content:' ';
		flex-grow:0;
		height:0px;
		transition: all 0.12s;
		transition-delay: 0.08s;
		border-color: var(--md-sys-color-outline);
	}
	&::before {
		position:absolute;
		content:'';
		border-top: 1px solid;
		border-left: 1px solid;
		border-top-left-radius: 4px;
		left:0px;
		top:0px;
		margin-right: 4px;
		width: 16px;
		height:4px;
		/* border-color: var(--md-sys-color-outline); */
		color:var(--md-sys-color-on-surface);
	}
	&::after {
		position:absolute;
		content:'';
		left:0px;top:0px;
		right:0px;bottom:0px;
		pointer-events: none;
		border-radius:4px;
		border:1px solid var(--md-sys-color-outline);
	}
	&:has([placeholder-hidden], .placeholder-hidden)::after,
	&:not(:has(:placeholder-shown, .placeholder-shown))::after {
		border:1px solid;
		border-top:0; 
	}
	&:has( > .material-icons:first-child) {
		padding-left:12px;
	}
	&:has( > label+.material-icons) {
		padding-right:12px;
	}
	> .material-icons {
		color:var(--md-sys-color-on-surface-variant);
	}
	> label {
		position:absolute;
		color:var(--md-sys-color-on-surface-variant);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		top : calc(50% - var(--md-sys-typescale-body-large-line-height) / 2);
		transition:all .3s ease-in-out;
		pointer-events: none;
		white-space: nowrap;
		display:flex;
	}
	&:has(>.material-icons:first-child) > label{
		left:52px;/* 12+24+16 */
	}
	&:is([required]) > label::before{
		position:relative;
		content:'*';
		color:var(--md-sys-color-error);
		padding-right:4px;
	}
	> :is(.input, input, textarea), >.input :is(input, textarea){
		flex-grow: 1;
		color:var(--md-sys-color-on-surface);
		caret-color: var(--md-sys-color-primary);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		cursor:pointer;
		:has(:invalid, .invalid) &{
			caret-color: var(--md-sys-color-error);
		}
	}
	> .supporting-text {
		position: absolute;
		left: 0px;
		top: 100%;
		right: 0px;
		padding:4px 16px 0 16px;
		color:var(--md-sys-color-on-surface-variant);
		font-weight: var(--md-sys-typescale-body-small-font-weight);
		font-size: var(--md-sys-typescale-body-small-font-size);
		letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
		line-height: var(--md-sys-typescale-body-small-line-height);
	}
	&[disabled] {
		pointer-events: none;
		> .material-icons,
		> label,
		> .input, > textarea, > input,
		> .supporting-text {
			color:var(--md-sys-color-on-surface);
			opacity:0.38;
		}
		&::after, &::before, > label::after{
			border-width: 1px;
			border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12) !important;
		}
	}
	&:hover{
		> label {
			color:var(--md-sys-color-on-surface);
		}
		> .material-icons, > .supporting-text{
			color:var(--md-sys-color-on-surface-variant);
		}
		> .input, textarea, .input{
			color:var(--md-sys-color-on-surface);
		}
		&::after, &::before, > label::after {
			border-color:var(--md-sys-color-on-surface);
		}
		&::before {
			position:absolute;
			content:'';
			border-top: 1px solid;
			border-left: 1px solid;
			border-top-left-radius: 4px;
			left:0px;
			top:0px;
			margin-right: 4px;
			width: 16px;
			height:4px;
			background-color: transparent;
			border-color: var(--md-sys-color-on-surface);
		}
	}
	&:focus-within{
		> label{
			color:var(--md-sys-color-primary);
		}
		>.material-icons, .supporting-text{
			color:var(--md-sys-color-on-surface-variant);
		}
		> .input, textarea, input{
			color:var(--md-sys-color-on-surface);
		}
		> label::after {
			left:4px;
			border-top: 2px solid var(--md-sys-color-primary);
			border-right:2px solid var(--md-sys-color-primary);
		}
		&::after{
			left:0px;top:0px;right:0px;bottom:0px;
			transition:none;
			border:2px solid var(--md-sys-color-primary);
			border-top:0; 
		}
		&::before,
		&:hover::before{
			border-color:var(--md-sys-color-primary);
			border-width:2px;
		}
	}
	&.active > label,
	&:focus-within > label,
	&:has(input, textarea, .input):has([placeholder-hidden], .placeholder-hidden) > label,
	&:has(input, textarea, .input):not(:has(:placeholder-shown, .placeholder-shown)) > label{
		font-weight: var(--md-sys-typescale-body-small-font-weight);
		font-size: var(--md-sys-typescale-body-small-font-size);
		letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
		line-height: var(--md-sys-typescale-body-small-line-height);
		top : -8px;
		left:20px !important;
		transition:all .3s ease-in-out;
		/* color:var(--md-sys-color-on-surface-variant); */
		right:2px;
	}
	&.active > label::after,
	&:focus-within > label::after,
	/* &:has(>.input .item) > label::after, */
	&:has([placeholder-hidden], .placeholder-hidden) > label::after,
	&:not(:has(:placeholder-shown, .placeholder-shown)) > label::after {
		position:relative;
		content:' ';
		border-top-right-radius: 4px;
		top:8px;
		left:2px;
		height:4px;
		flex-grow:1;
		border-top:1px solid;
		border-right:1px solid;
	}
	&:focus-within > label::after {
		border-top:2px solid;
		border-right:2px solid;
	}

	&:has(:invalid, .invalid){
		> .material-icons {
			color:var(--md-sys-color-on-surface-variant);
		}
		> label , > .supporting-text,  & > label ~ .material-icons {
			color:var(--md-sys-color-error);
		}
		> .input, > textarea, > input {
			color:var(--md-sys-color-on-surface);
		}
		&::before, > label:after{
			border-color:var(--md-sys-color-error);
		}
		&::after{
			border-color:var(--md-sys-color-error);
		}
		&:hover{
			> .material-icons {
				color:var(--md-sys-color-on-surface-variant);
			}
			> label, & > label ~ .material-icons {
				color:var(--md-sys-color-on-error-container);
			}
			> .supporting-text {
				color:var(--md-sys-color-error);
			}
			> .input, > textarea, > input {
				color:var(--md-sys-color-on-surface);
			}
			&::before, > label:after{
				border-color:var(--md-sys-color-on-error-container);
			}
			&::after{
				border-color:var(--md-sys-color-on-error-container);
			}
		}
		&:focus-within:hover,
		&:focus-within{
			> .material-icons {
				color:var(--md-sys-color-on-surface-variant);
			}
			> label, .supporting-text, & > label ~ .material-icons {
				color: var(--md-sys-color-error);
			}
			>.input, > textarea, > input {
				color:var(--md-sys-color-on-surface);
				caret-color: var(--md-sys-color-error);
			}
			&::before, > label:after{
				border-color:var(--md-sys-color-error);
			}
			&::after{
				border-color:var(--md-sys-color-error);
			}
		}
	}
}


/**************************************/

button.md-chip {
	appearance:none;
}
.md-chip-assist {
	position:relative;
	display:flex;
	align-items: center;
	gap:8px;
	border-radius: 8px;
	border:1px solid var(--md-sys-color-outline);
	background-color: var(--md-sys-color-surface-container-low);
	color:var(--md-sys-color-on-surface);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	line-height: var(--md-sys-typescale-label-large-line-height);
	height:32px;
	padding:0 16px;
	cursor: pointer;
	&:has( > .material-icons) {
		padding-left:8px;
	}
	.material-icons:first-of-type {
		font-size: 18px;
		color:var(--md-sys-color-primary);
	}
	&:hover:before {
		position:absolute;
		content:'';
		left:0px;top:0px;right:0px;bottom:0px;
		background-color: var(--md-sys-color-on-surface);
		opacity: 0.08;
		pointer-events: none;
	}
	&[disabled] {
		pointer-events: none;
		border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
		background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
		color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		.material-icons:first-of-type {
			color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		}
	}
	&:active {
		box-shadow: var(--md-sys-shadow1);
		&:before {
			position:absolute;
			content:'';
			left:0px;top:0px;right:0px;bottom:0px;
			background-color: var(--md-sys-color-on-surface);
			opacity: 0.1;
			pointer-events: none;
		}
	}
}

.md-chip-filter {
	position:relative;
	display: flex;
	align-items: center;
	border-radius: 8px;
	height:32px;
	padding:0 16px;
	gap:8px;
	border:1px solid var(--md-sys-color-outline);
	background-color:var(--md-sys-color-surface-container-low);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	line-height: var(--md-sys-typescale-label-large-line-height);
	color:var(--md-sys-color-on-surface-variant);
	cursor:pointer;
	white-space:nowrap;
	transition: all 0.35s;
	&:has(.material-icons:first-child){
		padding-left:8px;
	}
	&:has(.material-icons:last-child){
		padding-right: 8px;
	}
	&.selected {
		border-color:var(--md-sys-color-secondary-container);
		/* border-width:0px; */
		box-shadow: var(--md-sys-shadow1);
		background-color:var(--md-sys-color-secondary-container);
		color:var(--md-sys-color-on-secondary-container);
		.material-icons {
			color:var(--md-sys-color-on-secondary-container);
		}
		&::before {
			position:relative;
			font-family: 'Material Symbols Outlined';
			content:'check';
			color:var(--md-sys-color-primary);
			font-size:20px;
			transition: all 0.35s;
		}
	}
	.material-icons:first-of-type {
		font-size: 18px;
		color:var(--md-sys-color-on-surface-variant);
		&:first-of-type{
			color:var(--md-sys-color-primary);
		}
		&:last-of-type{
			color:var(--md-sys-color-on-surface-variant);
		}
	}
	.supporting-text {
		color:var(--md-sys-color-outline);
		--md-sys-typescale-label-medium-font-family-name: Roboto;
		--md-sys-typescale-label-medium-font-family-style: Medium;
		--md-sys-typescale-label-medium-font-weight: 500;
		--md-sys-typescale-label-medium-font-size: 12px;
		--md-sys-typescale-label-medium-line-height: 16px;
		--md-sys-typescale-label-medium-letter-spacing: 0.50px;
	}
	
	&[disabled] {
		pointer-events: none;
		background-color: rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
		color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
	}
	&:active {
		border-color:var(--md-sys-color-on-surface-variant);
		color:var(--md-sys-color-on-surface-variant);
		&.selected{
			color:var(--md-sys-color-on-secondary-container);
		}
		&::after {
			position:absolute;
			content:' ';
			left:0px;top:0px;right:0px;bottom:0px;
			border-radius: 8px;
			background-color:var(--md-sys-color-on-surface-variant);
			opacity: 0.1;
			pointer-events: none;
		}
		&.selected::after{
			background-color:var(--md-sys-color-on-secondary-container);
		}
		&.selected::before {
			position:relative;
			font-family: 'Material Symbols Outlined';
			content:'check';
			color:var(--md-sys-color-primary);
			font-size: 20px;
		}
	}
	&:hover {
		box-shadow:none;
		color:var(--md-sys-color-on-surface-variant);
		&.selected {
			box-shadow: var(--md-sys-shadow1);
			color:var(--md-sys-color-on-secondary-container);
		}
		&::after {
			position:absolute;
			left:0px;top:0px;width:100%;height:100%;
			border-radius: 8px;
			content:' ';
			background-color: var(--md-sys-color-on-surface-variant);
			opacity: 0.08;
			pointer-events: none;
		}
		&.selected::after {
			background-color: var(--md-sys-color-on-secondary-container);
	    }
	    &.selected::before {
			position:relative;
			font-family: 'Material Symbols Outlined';
			content:'check';
			color:var(--md-sys-color-secondary);
			font-size:20px;
		}
	}
}
.md-chip-input {
	position:relative;
	display: flex;
	align-items: center;
	border-radius: 8px;
	height:32px;
	padding:0 12px;
	gap:8px;
	border:1px solid var(--md-sys-color-outline);
	background-color:var(--md-sys-color-surface-container-low);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	line-height: var(--md-sys-typescale-label-large-line-height);
	color:var(--md-sys-color-on-surface-variant);
	&:has(:last-child.material-icons){
		padding-right:8px;
	}
	&:has(:first-child.material-icons){
		padding-left:8px;
	}
	&:has(:first-child:is(mvc-image)){
		padding-left:4px;
	}
	&.selected{
		color:var(--md-sys-color-on-secondary-container);
	}
	.material-icons:first-of-type{
		font-size: 18px;
		color:var(--md-sys-color-on-surface-variant);
	}
	&.selected .material-icons:first-of-type{
		font-size: 18px;
		color:var(--md-sys-color-primary)
	}
	.material-icons:last-of-type{
		font-size: 18px;
		color:var(--md-sys-color-on-surface-variant);
	}
	&.selected .material-icons:last-of-type{
		font-size: 18px;
		color:var(--md-sys-color-on-secondary-container);
	}
	mvc-image {
		width:24px;
		height:24px;
		border-radius: 50%;
		overflow: hidden;
	}
	&[disabled] {
		pointer-events: none;
		border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
		background-color: rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
		color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		.material-icons {
			color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		}
		mvc-image{
			opacity: 0.38;
		}
	}
	&:hover {
		color:var(--md-sys-color-on-surface-variant);
		&.selected {
			color:var(--md-sys-color-on-secondary-container);
		}
		&::before {
			position:absolute;
			left:0px;top:0px;width:100%;height:100%;
			content:' ';
			background-color:var(--md-sys-color-on-surface-variant);
			opacity: 0.08;
			pointer-events: none;
		}
		&.selected::before {
			background-color:var(--md-sys-color-on-secondary-container);
		}
		.material-icons:first-of-type {
			color:var(--md-sys-color-primary);
		}
		.material-icons:last-of-type {
			color:var(--md-sys-color-on-surface-variant);
		}
		&.selected .material-icons:last-of-type {
			color:var(--md-sys-color-on-secondary-container);
		}
	}
	&:active {
		border-color:var(--md-sys-color-on-surface-variant);
		color:var(--md-sys-color-on-surface-variant);
		&.selected {
			color:var(--md-sys-color-on-secondary-container);
		}
		&::before {
			position:absolute;
			left:0px;top:0px;width:100%;height:100%;
			content:' ';
			background-color:var(--md-sys-color-on-surface-variant);
			opacity: 0.1;
			pointer-events: none;
		}
		&.selected::before {
			background-color:var(--md-sys-color-on-secondary-container);
		}
		.material-icons:first-of-type {
			color:var(--md-sys-color-primary);
		}
		&selected .material-icons:first-of-type {
			color:var(--md-sys-color-primary);
		}
		.material-icons:lastt-of-type {
			color:var(--md-sys-color-on-surface-variant);
		}
		&.selected .material-icons:last-of-type {
			color:var(--md-sys-color-on-secondary-container);
		}
	}
}
mvc-checkbox {
	position:relative;
	display: flex;
	align-items: center;
	gap:8px;
	padding-right: 16px;
	white-space: nowrap;
	&:has(.md-checkbox:hover) {
		overflow:visible;
	}
	&.waves-effect{
		display:flex;
	}
	#content_ {
		display:flex;
	}
}
/* input checkbox */
.md-field .md-checkbox,
mvc-input.md-checkbox,
.md-checkbox {
	position:relative;
	width:18px;height:18px;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 2px;
	border:2px solid var(--md-sys-color-on-surface-variant);
	input[type="checkbox"]{
		position:absolute;
		left:0px;top:0px;
		width:18px ;
		height:18px;
		appearance: none;
	}
	mvc-checkbox.selected &,
	&:has(:checked, .selected), &.selected {
		background-color: var(--md-sys-color-primary);
		border-color:var(--md-sys-color-primary);
		&:has(:invalid, .invalid), &.invalid{
			background-color: var(--md-sys-color-error);
			border-color:var(--md-sys-color-error);
		}
		&::after {
			color:var(--md-sys-color-on-primary);		
			&.invalid, &:has(:invalid, .invalid){
				color:var(--md-sys-color-on-error);
			}
		}
	}
	mvc-checkbox.invalid &,
	&:has(:invalid, .invalid), &.invalid{
		border-color:var(--md-sys-color-error);
	}
	&::after{
		position:absolute;
		font-family: 'Material Symbols Outlined';
		font-size: 18px;
		content: "check";
		font-feature-settings: 'liga';
		left:-2px;
		top:-4px;
		height:18px;
		width:18px;
		pointer-events: none;
		color:transparent;
	}
	mvc-checkbox[disabled] &,
	&:has([disabled]),&[disabled] {
		pointer-events: none;
		border:2px solid var(--md-sys-color-on-surface);
		opacity:0.38;
		&::after {
			color:transparent;		
		}
		mvc-checkbox.selected &,
		&.selected, &:has(:checked, .selected){
			background-color: var(--md-sys-color-on-surface);
			border-color: var(--md-sys-color-on-surface);
			opacity: 0.38;
			&::after{
				color:var(--md-sys-color-surface);
				opacity: 0.38;
			}
		}
	}
	&:hover {
		overflow:visible;
		border-color:var(--md-sys-color-on-surface);
		mvc-checkbox.selected &,
		&:has(:checked),&.selected{
			background-color: var(--md-sys-color-primary);
			border-color:var(--md-sys-color-primary);
		}
		mvc-checkbox.invalid &,
		&:has(:invalid, .invalid), &.invalid{
		background-color: var(--md-sys-color-error);
		border-color:var(--md-sys-color-error);
		}
		&::before {
			position:absolute;
			left:-11px;top:-11px;right:-11px;bottom:-11px;
			content:' ';
			background-color: var(--md-sys-color-on-surface);
			opacity: 0.08;
			border-radius: 50%;
			mvc-checkbox.selected &,
			&:has(:checked),&.selected {
				background-color: var(--md-sys-color-primary);
			}
			mvc-checkbox.invalid &,
			&:has(:invalid, .invalid),&.invalid {
				background-color: var(--md-sys-color-error);
			}
		}
		&::after {
			color:transparent;
			mvc-checkbox.selected &,
			&:has(:checked), &.selected {
				color:var(--md-sys-color-on-primary);
				&:has(:invalid), &.invalid {
					color:var(--md-sys-color-on-error);
				}
			}
		}
	}
	&:focus-within {
		border-color:var(--md-sys-color-on-surface);
		mvc-checkbox.selected &,
		&:has(:checked), &.selected{
			background-color: var(--md-sys-color-primary);
			border-color:var(--md-sys-color-primary);
		}
		mvc-checkbox.invalid &,
		&:has(:invalid, .invalid), &.invalid{
			border-color: var(--md-sys-color-error);
			mvc-checkbox.selected &,
			&:has(:checked, .selected), &.selected {
				background-color: var(--md-sys-color-error);
				border-color:var(--md-sys-color-error);
			}
		}
		&::before {
			position:absolute;
			left:-11px;top:-11px;right:-11px;bottom:-11px;
			content:'';
			background-color:var(--md-sys-color-on-surface);
			opacity: 0.1;
			border-radius: 50%;
			mvc-checkbox.selected &,
			&:has(:checked),&.selected {
				background-color: var(--md-sys-color-primary);
			}
			mvc-checkbox.invalid &,
			&:has(:invalid, .invalid), &.invalid {
				background-color: var(--md-sys-color-error);
			}
		}
		&::after {
			color:transparent;
			mvc-checkbpx.selected &,
			&:has(:checked, .selected),&.selected{
				color:var(--md-sys-color-on-primary);
			}
			mvc-checkbox.invalid &,
			&:has(:checked:invalid),&.selected:has(:invalid, .invalid){
				color:var(--md-sys-color-on-error);
			}
		}
	}
}

mvc-radio {
	position:relative;
	display: flex;
	align-items: center;
	gap:8px;
	padding-right: 16px;
	white-space: nowrap;
	&.waves-effect{
		display:flex;
	}
	#content_ {
		display:flex;
	}
}
/* input radio */
.md-field .md-radio,
mvc-input.md-radio,
.md-radio {
	position:relative;
	width:20px;height:20px;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 50%;
	border:2px solid var(--md-sys-color-on-surface-variant);
	input[type="radio"]{
		position:absolute;
		left:0px;top:0px;
		width:20px ;
		height:20px;
		appearance: none !important;
	}
	mvc-radio.selected &,
	&:has(:checked), &.selected {
		border-color: var(--md-sys-color-primary);
		&::after{
			position:absolute;
			content:' ';
			left:3px;top:3px;
			width: 10px;
			height:10px;
			border-radius:50%;
			background-color:var(--md-sys-color-primary);
		}
	}
	mvc-radio[disabled] &,
	&[disabled],&:has([disabled]){
		pointer-events: none;
		border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		&.selected, &:has(:checked, .selected){
			border-color:rgb(from var(--md-sys-color-primary) r g b / 0.38);
			&::after{
				background-color: var(--md-sys-color-primary);
				opacity: 0.38;
			}
		}
	}
	&:hover {
		overflow:visible;
		&::before {
			position:absolute;
			left:-10px;top:-10px;right:-10px;bottom:-10px;
			content:' ';
			background-color: var(--md-sys-color-on-surface);
			opacity: 0.08;
			border-radius: 50%;
			mvc-radio.selected &,
			&.selected,&:has(:checked, selected){
				background-color: var(--md-sys-color-primary);
			}
		}
	}
	&:focus-within::before {
		position:absolute;
		left:-10px;top:-10px;right:-10px;bottom:-10px;
		content:'';
		background-color:var(--md-sys-color-on-surface);
		opacity: 0.1;
		border-radius: 50%;
		mvc-radio.selected &,
		&.selected,&:has(:checked, .selected){
			background-color: var(--md-sys-color-primary);
		}
	}
}
/* input radio */
.md-field .md-switch,
mvc-input.md-switch,
.md-switch {
	position:relative;
	width:52px;height:32px;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius:16px;
	border:2px solid var(--md-sys-color-outline);
	background-color:var(--md-sys-color-surface-container-highest);
	transition: all 0.3s;
	input[type="checkbox"]{
		position:absolute;
		left:0px;top:0px;
		width:52px ;
		height:32px;
		border-radius:16px;
		appearance: none !important;
	}
	&.selected, &:has(:checked, .selected) {
		background-color:var(--md-sys-color-primary);
		transition: all 0.3s;
		&::after {
			width:20px;height:20px;
			background-color:var(--md-sys-color-on-primary);
			left:24px;
			top:4px;
			transition: all 0.3s;
		}
	}
	&::after{
		position:absolute;
		pointer-events: none;
		content:'';
		border-radius:50%;
		width:16px;height:16px;
		background-color:var(--md-sys-color-outline);
		top:6px;left:4px;
		transition: all 0.3s;
	}
	&[disabled], &:has([disabled]) {
		pointer-events: none;
		background-color:var(--md-sys-color-on-surface);
		opacity: 0.12;
		&.selected,&:has(:checked, .selected, [disabled]:checked, [disabled].selected){
			border:2px solid var(--md-sys-color-on-surface);
			background-color:var(--md-sys-color-surface-container-highest);
			&:after{
				background-color:var(--md-sys-color-on-surface);
				opacity: 1;
			}
		}
		&::after {
			background-color:var(--md-sys-color-surface);
			opacity: 0.38;
		}
	}
	&:hover {
		overflow:visible;
		background-color:var(--md-sys-color-surface-container-highest);
		border-color:var(--md-sys-color-outline);
		&.selected, &:has(:checked, .selected) {
			background-color:var(--md-sys-color-primary);
			&:before{
				position:absolute;
				content:'';
				left:14px;
				top:-6px;
				width:40px;
				height:40px;
				border-radius: 100%;
				background-color: var(--md-sys-color-primary);
				opacity: 0.08;
			}
			&::after{
				background-color:var(--md-sys-color-primary-container);
			}
		}
		&::before {
			position:absolute;
			content:'';
			left:-8px;
			top:-6px;
			width:40px;
			height:40px;
			border-radius: 100%;
			background-color: var(--md-sys-color-on-surface);
			opacity: 0.08;
		}
		&:after {
			background-color: var(--md-sys-color-on-surface-variant);
		}
	}
	&:focus-within{
		background-color:var(--md-sys-color-surface-container-highest);
		border-color:var(--md-sys-color-outline);
		&.selected, &:has(:checked, .selected){
			background-color:var(--md-sys-color-primary);
			&::before{
				background-color: var(--md-sys-color-primary);
				opacity:0.1;
			}
			&::after{
				background-color: var(--md-sys-color-primary-container);
			}
		}
		&:before{
			background-color:var(--md-sys-color-on-surface);
			opacity: 0.1;
		}
		&:after{
			background-color:var(--md-sys-color-on-surface-variant);
		}
	}
}


/* mdlist */
.md-list {
	position:relative;
	padding:8px 16px 8px 16px;
	display:flex;
	flex-direction: row;
	gap:16px;
	align-items: center;
	background-color: var(--md-sys-color-surface);
	min-height:56px;
	&:first-of-type{
		border-radius: 8px 8px 0 0;
	}
	&:last-of-type{
		border-radius: 0 0 8px 8px;
	}
	/* .radius-list & {
		&:first-of-type{
			border-radius: 8px 8px 0 0;
		}
		&:last-of-type{
			border-radius: 0 0 8px 8px;
		}
	} */
	&.l3{
		padding:12px 16px 12px 18px;
	}
	&.l3:has(mvc-image),&:has(mvc-image){
		padding-left:0px;
	}
	>.material-icons {
		font-size: 24px;
		color:var(--md-sys-color-on-surface-variant);
		&.medium {
			font-size:40px;
		}
		&.large {
			font-size:56px;
		}
	}
	.material-icons:last-of-type {
		color:var(--md-sys-color-on-surface-variant);
	}
	.icon:last-of-type{
		color:var(--md-sys-color-on-surface);
		.md-list.selected  & {
			color:var(--md-sys-color-primary);
		}
	}
	>div:has(.headline, .supporting-text, .overline){
		flex-grow: 1;
	}
	.headline {
		flex-grow: 1;
		color:var(--md-sys-color-on-surface);
		font-family: var(--md-sys-typescale-body-large-font-family-name);
		font-style: var(--md-sys-typescale-body-large-font-family-style);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	}
	.supporting-text{
		color:var(--md-sys-color-on-surface-variant);
		font-family: var(--md-sys-typescale-body-medium-font-family-name);
		font-style: var(--md-sys-typescale-body-medium-font-family-style);
		font-weight: var(--md-sys-typescale-body-medium-font-weight);
		font-size: var(--md-sys-typescale-body-medium-font-size);
		letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
		line-height: var(--md-sys-typescale-body-medium-line-height);
		overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	}
	.supporting-text:last-of-type{
		color:var(--md-sys-color-on-surface-variant);
		font-family: var(--md-sys-typescale-label-small-font-family-name);
		font-style: var(--md-sys-typescale-label-small-font-family-style);
		font-weight: var(--md-sys-typescale-label-small-font-weight);
		font-size: var(--md-sys-typescale-label-small-font-size);
		letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
		line-height: var(--md-sys-typescale-label-small-line-height);
		overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	}
	.overline {
		color:var(--md-sys-color-on-surface-variant);
		font-family: var(--md-sys-typescale-label-small-font-family-name);
		font-style: var(--md-sys-typescale-label-small-font-family-style);
		font-weight: var(--md-sys-typescale-label-small-font-weight);
		font-size: var(--md-sys-typescale-label-small-font-size);
		letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
		line-height: var(--md-sys-typescale-label-small-line-height);
		overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	}
	.divider {
		position:absolute;
		left:16px;bottom:0px;right:16px;
		height:1px;
		background-color:var(--md-sys-color-outline);
	}
	>.avatar,mvc-image.avatar {
		position:relative;
		width:40px;height:40px;
		border-radius: 100%;
		overflow: hidden;
		.text {
			position:absolute;
			margin:auto;
			color:var(--md-sys-color-on-primary-container);
			font-family: var(--md-sys-typescale-title-medium-font-family-name);
			font-style: var(--md-sys-typescale-title-medium-font-family-style);
			font-weight: var(--md-sys-typescale-title-medium-font-weight);
			font-size: var(--md-sys-typescale-title-medium-font-size);
			letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
			line-height: var(--md-sys-typescale-title-medium-line-height);
		}
	}
	mvc-image, .image {
		position:relative;
		width:56px;
		height:56px;
		&.small{
			width:40px;
			height:40px;
		}
		.md-list.l3 &  {
			width:64px;
			height:64px;
		}
	}
	&[disabled] {
		:is(.material-icons, .headline){
			color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
		}
		&::before {
			position:absolute;
			content:'';
			left:0px;top:0px;width:100%;height:100%;
			background-color:var(--md-sys-color-on-surface);
			opacity:0.1;
			pointer-events: none;
		}
	}
	&:focus-within {
		:is(label, .label){
			color:var(--md-sys-color-on-surface);
		}
	}
	&:hover {
		.headline{
			color:var(--md-sys-color-on-surface);
		}
		&:focus-within :is(.icon, .material-icons),
		:is(.icon, .material-icons){
			color:var(--md-sys-color-on-surface-variant);
		}
		&::before{
			position:absolute;
			content:'';
			left:0px;top:0px;width:100%;height:100%;
			background-color:var(--md-sys-color-on-surface);
			opacity:0.08;
			pointer-events: none;
		}
	}
	&:focus-within:before,
	&:hover:focus-within:before {
		position:absolute;
		content:'';
		left:0px;top:0px;width:100%;height:100%;
		background-color:var(--md-sys-color-secondary);
		opacity:0.1;
		pointer-events: none;
	}
	&.selected .material-icons,
	&:hover .material-icons,
	&:focus-within .material-icons,
	&:hover:focus-within .material-icons{
		font-variation-settings: 'FILL' 1;
		transition: all 300ms;
	}
}


/* buttons */
.md-button {
	position: relative;
	height:40px;
	font-family: var(--md-sys-typescale-label-large-font-family-name);
	font-style: var(--md-sys-typescale-label-large-font-family-style);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	line-height: var(--md-sys-typescale-label-large-line-height);
	cursor: pointer;
	padding:0 12px 0 12px;
	border-radius: 20px;
	display:inline-flex;
	white-space: nowrap;
	align-items: center;
	gap:8px;
	color:var(--md-sys-color-primary);
	justify-content: center;
}
.md-button:has(:first-child.material-icons) {
	padding:0px 16px 0px 12px;
}
.md-button .material-icons{
	font-size: 18px;
	color:var(--md-sys-color-primary);
}
.md-button[disabled] {
	pointer-events: none;
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button[disabled] .material-icons {
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button:hover {
	color:var(--md-sys-color-primary);
}
.md-button:hover .material-icons{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.08;
}
.md-button:active {
	color:var(--md-sys-color-primary);
}
.md-button:active .material-icons {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.1;
}
/* elevated */
.md-button.elevated {
	padding:0 24px;
	border-radius: 20px;
	display:inline-flex;
	align-items: center;
	gap:8px;
	box-shadow: var(--md-sys-shadow1);
	color:var(--md-sys-color-primary);
	background-color: var(--md-sys-color-surface-container-low);
}
.md-button.elevated:has(:first-child.material-icons) {
	padding-left:16px;
}
.md-button.elevated .material-icons{
	font-size: 18px;
	color:var(--md-sys-color-primary);
}
.md-button.elevated[disabled] {
	pointer-events: none;
	background-color:rgb(from var(--md-sys-color-on-surface) r g b /0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
	box-shadow: var(--md-sys-shadow0);
}
.md-button.elevated[disabled] .material-icons {
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button.elevated:hover {
	box-shadow: var(--md-sys-shadow2);
	color:var(--md-sys-color-primary);
}
.md-button.elevated:hover .material-icons{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button.elevated:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.08;
}
.md-button.elevated:active {
	box-shadow: var(--md-sys-shadow1);
	color:var(--md-sys-color-primary);
}
.md-button.elevated:active .material-icons {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button.elevated:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.1;
}
/* filled */
.md-button.filled {
	padding:0 24px;
	border-radius: 20px;
	display:inline-flex;
	align-items: center;
	gap:8px;
	color:var(--md-sys-color-on-primary);
	background-color: var(--md-sys-color-primary);
}
.md-button.filled:has(:first-child.material-icons) {
	padding-left:16px;
}
.md-button.filled .material-icons{
	font-size: 18px;
	color:var(--md-sys-color-on-primary);
}
.md-button.filled[disabled] {
	pointer-events: none;
	background-color:rgb(from var(--md-sys-color-on-surface) r g b /0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
	box-shadow: var(--md-sys-shadow0);
}
.md-button.filled[disabled] .material-icons {
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button.filled:hover {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-primary);
}
.md-button.filled:hover .material-icons{
	color:var(--md-sys-color-on-primary);
}
.md-button.filled:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-on-primary);
	opacity: 0.08;
}
.md-button.filled:active {
	color:var(--md-sys-color-on-primary);
}
.md-button.filled:active .material-icons {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-primary);
}
.md-button.filled:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-on-primary);
	opacity: 0.1;
}
/* tonal */
.md-button.tonal {
	padding:0 24px;
	border-radius: 20px;
	display:inline-flex;
	align-items: center;
	gap:8px;
	box-shadow: var(--md-sys-shadow0);
	color:var(--md-sys-color-on-secondary-container);
	background-color: var(--md-sys-color-secondary-container);
}
.md-button.tonal:has(:first-child.material-icons) {
	padding-left:16px;
}
.md-button.tonal .material-icons{
	font-size: 18px;
	color:var(--md-sys-color-on-secondary-container);
}
.md-button.tonal[disabled] {
	pointer-events: none;
	background-color:rgb(from var(--md-sys-color-on-surface) r g b /0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
	box-shadow: var(--md-sys-shadow0);
}
.md-button.tonal[disabled] .material-icons {
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button.tonal:hover {
	color:var(--md-sys-color-on-secondary-container);
}
.md-button.tonal:hover .material-icons{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-secondary-container);
}
.md-button.tonal:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-on-secondary-container);
	opacity: 0.08;
}
.md-button.tonal:active {
	color:var(--md-sys-color-on-secondary-container);
}
.md-button.tonal:active .material-icons {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-secondary-container);
}
.md-button.tonal:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-on-secondary-container);
	opacity: 0.1;
}
/* outline */
.md-button.outline {
	padding:0 24px;
	border-radius: 20px;
	display:inline-flex;
	align-items: center;
	gap:8px;
	color:var(--md-sys-color-primary);
	border:1px solid var(--md-sys-color-outline);
	background-color: transparent;
}
.md-button.outline:has(:first-child.material-icons) {
	padding-left:16px;
}
.md-button.outline .material-icons{
	font-size: 18px;
	color:var(--md-sys-color-primary);
}
.md-button.outline[disabled] {
	pointer-events: none;
	border-color:rgb(from var(--md-sys-color-on-surface) r g b /0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button.outline[disabled] .material-icons {
	color:rgb(from var(--md-sys-color-on-surface) r g b /0.38);
}
.md-button.outline:hover {
	color:var(--md-sys-color-primary);
}
.md-button.outline:hover .material-icons{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button.outline:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.08;
}
.md-button.outline:active {
	color:var(--md-sys-color-primary);
}
.md-button.outline:active .material-icons {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.md-button.outline:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 20px;
	background-color:var(--md-sys-color-primary);
	opacity: 0.1;
}

/* md-fab */
.md-fab {
	position:relative;
	width:56px;height:56px;
	border-radius: 16px;
	background-color: var(--md-sys-color-primary-container);
	box-shadow: var(--md-sys-shadow1);
	display:flex;
	align-items: center;
	justify-content: center;
}
.md-fab .material-icons{
	font-size: 24px;
	color:var(--md-sys-color-on-primary-container);
}
.md-fab.small {
	width:40px;height:40px;
	border-radius: 12px;
}
.md-fab.small .material-icons{
	font-size: 24px;
}
.md-fab.large {
	width:96px;height:96px;
	border-radius: 28px;
}
.md-fab.large .material-icons{
	font-size: 36px;
}
.md-fab:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 16px;
	background-color:var(--md-sys-color-on-primary-container);
	opacity: 0.08;
}
.md-fab.small:before {
	border-radius: 12px;
}
.md-fab.large:before {
	border-radius: 28px;
}
.md-fab:active:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color:var(--md-sys-color-on-primary-container);
	opacity: 0.1;
}
/* icon button */
.material-icons.button {
	position:relative;
	width:40px;height:40px;
	border-radius: 100%;
	color:var(--md-sys-color-on-surface-variant);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.material-icons.button.selected{
	color:var(--md-sys-color-primary);
}
.material-icons.button[disabled]{
	pointer-events: none;
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
}
.material-icons.button:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
.material-icons.button:hover.selected{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
.material-icons.button:hover:before {
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.08;
}
.material-icons.button.selected:hover:before {
	background-color: var(--md-sys-color-primary);
}
.material-icons.button:active {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant)
}
.material-icons.button:active.selected {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.material-icons.button:active:before {
	position:absolute;
	content:'';
	left:-4px;top:-4px;right:-4px;bottom:-4px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.1;
}
.material-icons.button.selected:active:before {
	background-color: var(--md-sys-color-primary);
	opacity: 0.1;
}
/* filled default is selected*/
.material-icons.button.filled.selectable {
	background-color: var(--md-sys-color-surface-container-highest);
	color:var(--md-sys-color-primary);
}
.material-icons.button.filled,
.material-icons.button.filled.selectable.selected{
	background-color: var(--md-sys-color-primary);
	color:var(--md-sys-color-on-primary);
}
.material-icons.button.filled[disabled]{
	background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
}
.material-icons.button.filled.selectable:hover{
	color:var(--md-sys-color-primary);
}
.material-icons.button.filled:hover,
.material-icons.button.filled.selectable.selected:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-primary);
}
.material-icons.button.filled.selectable:hover:before{
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 100%;
	background-color: var(--md-sys-color-primary);
	opacity: 0.08;
}
.material-icons.button.filled:hover:before,
.material-icons.button.filled.selectable.selected:hover:before{
	background-color: var(--md-sys-color-on-primary);
	opacity: 0.08;
}
.material-icons.button.filled.selectable:active{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-primary);
}
.material-icons.button.filled:active,
.material-icons.button.filled.selectable.selected:active{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-primary);
}
.material-icons.button.filled.selectable:active:before{
	position:absolute;
	content:'';
	left:-4px;top:-4px;right:-4px;bottom:-4px;
	border-radius: 100%;
	background-color: var(--md-sys-color-primary);
	opacity: 0.1;
}
.material-icons.button.filled:active:before,
.material-icons.button.filled.selectable.selected:active:before{
	background-color: var(--md-sys-color-on-primary);
	opacity: 0.1;
}
/* tonal default is selected*/
.material-icons.button.tonal.selectable {
	background-color: var(--md-sys-color-surface-container-highest);
	color:var(--md-sys-color-on-surface-variant);
}
.material-icons.button.tonal,
.material-icons.button.tonal.selectable.selected{
	background-color: var(--md-sys-color-secondary-container);
	color:var(--md-sys-color-on-secondary-container);
}
.material-icons.button.tonal[disabled]{
	background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
}

.material-icons.button.tonal.selectable:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
.material-icons.button.tonal:hover,
.material-icons.button.tonal.selectable.selected:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-secondary-container);
}
.material-icons.button.tonal.selectable:hover:before{
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.08;
}
.material-icons.button.tonal:hover:before,
.material-icons.button.tonal.selectable.selected:hover:before{
	background-color: var(--md-sys-color-on-secondary-container);
	opacity: 0.08;
}
.material-icons.button.tonal.selectable:active {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
.material-icons.button.tonal:active,
.material-icons.button.tonal.selectable.selected:active{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-secondary-container);
}
.material-icons.button.tonal.selectable:active:before{
	position:absolute;
	content:'';
	left:-4px;top:-4px;right:-4px;bottom:-4px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.1;
}
.material-icons.button.tonal:active:before,
.material-icons.button.tonal.selectable.selected:active:before{
	background-color: var(--md-sys-color-on-secondary-container);
	opacity: 0.1;
}
/* outline default is unselected*/
.material-icons.button.outline,
.material-icons.button.outline.selectable {
	/* background-color: var(--md-sys-color-surface-container-highest); */
	background-color: transparent;
	color:var(--md-sys-color-on-surface-variant);
	border:1px solid var(--md-sys-color-outline);
}
/* .material-icons.button.outline, */
.material-icons.button.outline.selectable.selected{
	background-color: var(--md-sys-color-inverse-surface);
	color:var(--md-sys-color-inverse-on-surface);
}
.material-icons.button.outline[disabled]{
	background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
	border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
}
.material-icons.button.outline:hover,
.material-icons.button.outline.selectable:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
/* .material-icons.button.outline:hover, */
.material-icons.button.outline.selectable.selected:hover{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-inverse-on-surface);
}
.material-icons.button.outline:hover:before,
.material-icons.button.outline.selectable:hover:before{
	position:absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.08;
}
/* .material-icons.button.tonal:hover:before, */
.material-icons.button.outline.selectable.selected:hover:before{
	background-color: var(--md-sys-color-inverse-on-surface);
	opacity: 0.08;
}
.material-icons.button.outline:active,
.material-icons.button.outline.selectable:active {
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-on-surface-variant);
}
/* .material-icons.button.outline:active, */
.material-icons.button.outline.selectable.selected:active{
	font-variation-settings: 'FILL' 1;
	color:var(--md-sys-color-inverse-on-surface);
}
.material-icons.button.outline:active:before,
.material-icons.button.outline.selectable:active:before{
	position:absolute;
	content:'';
	left:-4px;top:-4px;right:-4px;bottom:-4px;
	border-radius: 100%;
	background-color: var(--md-sys-color-on-surface-variant);
	opacity: 0.1;
}
/* .material-icons.button.outline:active:before, */
.material-icons.button.outline.selectable.selected:active:before{
	background-color: var(--md-sys-color-inverse-on-surface);
	opacity: 0.1;
}
:has( > .md-segment-button) {
	position: relative;
	width:100%;
	max-width: 320px;
	display:flex;
	white-space:nowrap;
}
.md-segment-button {
	flex-grow:1;
	position:relative;
	height:40px;
	display:flex;
	padding:0 12px;
	gap:8px;
	align-items: center;
	justify-content: center;
	font-family: var(--md-sys-typescale-label-large-font-family-name);
	font-style: var(--md-sys-typescale-label-large-font-family-style);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	line-height: var(--md-sys-typescale-label-large-line-height);
	color:var(--md-sys-color-on-surface);
	background-color:transparent;
	border-color: var(--md-sys-color-outline);
	cursor:pointer;
}
.md-segment-button:first-child:nth-last-child(1){
	width:100%;
}
.md-segment-button:first-child:nth-last-child(2),
.md-segment-button:first-child:nth-last-child(2) ~ .md-segment-button{
	width:50%;
}
.md-segment-button:first-child:nth-last-child(3),
.md-segment-button:first-child:nth-last-child(3) ~ .md-segment-button{
	width:33.333%;
}
.md-segment-button:first-child:nth-last-child(4),
.md-segment-button:first-child:nth-last-child(4) ~ .md-segment-button{
	width:25%;
}
.md-segment-button:first-child:nth-last-child(5),
.md-segment-button:first-child:nth-last-child(5) ~ .md-segment-button{
	width:20%;
}
.segment-height-1 .md-segment-button{
	height:36px;
	/* border-radius:18x; */
}
.segment-height-2 .md-segment-button{
	height:32px;
	/* border-radius:16px; */
}
.segment-height-3 .md-segment-button{
	height:28px;
	/* border-radius:14px;*/
} 
.md-segment-button:after{
	position:absolute;
	content:'';
}
.md-segment-button::only-child {
	border-radius:20px;
	border:1px solid;
}
.md-segment-button:first-child {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border:1px solid;
}
.md-segment-button:not(:first-child) {
	border-top:1px solid;
	border-bottom:1px solid;
	border-right:1px solid;
}
.md-segment-button:last-child {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	/* border:1px solid; */
}
/*first child of only 2 child  */
/* .md-segment-button:first-child:nth-last-child(2) { 
	border-right: 0;
} */
.md-segment-button.selected {
	color:var(--md-sys-color-on-secondary-container);
	background-color:var(--md-sys-color-secondary-container);
}
.md-segment-button .material-icons {
	font-size: 18px;
	color:var(--md-sys-color-on-surface);
}
.md-segment-button.selected .material-icons {
	color:var(--md-sys-color-on-secondary-container);
}
/* disable */
.md-segment-button[disabled]{
	pointer-events: none;
	border-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.12);
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
}
.md-segment-button[disabled] .material-icons{
	color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
}
/* hover */
.md-segment-button:hover {
	color:var(--md-sys-color-on-surface);
}
.md-segment-button.selected:hover {
	color:var(--md-sys-color-on-secondary-container);
}
.md-segment-button:hover .material-icons {
	color:var(--md-sys-color-on-surface);
}
.md-segment-button.selected:hover .material-icons{
	color:var(--md-sys-color-on-secondary-container);
}
.md-segment-button:hover:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.08;
}
.md-segment-button.selected:hover:before {
	background-color: var(--md-sys-color-on-secondary-container);
}
/* active */
.md-segment-button:active {
	color:var(--md-sys-color-on-surface);
}
.md-segment-button.selected:active {
	color:var(--md-sys-color-on-secondary-container);
}
.md-segment-button:active .material-icons {
	color:var(--md-sys-color-on-surface);
}
.md-segment-button.selected:active .material-icons{
	color:var(--md-sys-color-on-secondary-container);
}
.md-segment-button:active:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.1;
}
.md-segment-button.selected:active:before {
	background-color: var(--md-sys-color-on-secondary-container);
}
/* card elevated*/
.md-card.elevated {
	background-color: var(--md-sys-color-surface-container-low);
	box-shadow: var(--md-sys-shadow1);
}
.md-card.elevated .material-icons {
	color:var(--md-sys-color-primary);
}
.md-card.elevated[disabled] {
	background-color: rgb(from var(--md-sys-color-surface) r g b / 0.38);
}
.md-card.elevated:hover {
	box-shadow: var(--md-sys-shadow2);
}
.md-card.elevated:hover:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.08;
}
.md-card.elevated:active {
	box-shadow: var(--md-sys-shadow0);
	border:1px solid var(--md-sys-color-on-surface);
}
.md-card.elevated:active:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.1;
}
/* filled */
.md-card,
.md-card.filled {
	position:relative;
	background-color: var(--md-sys-color-surface-container-highest);
	box-shadow: var(--md-sys-shadow0);
}
.md-card .material-icons,
.md-card.filled .material-icons {
	color:var(--md-sys-color-primary);
}
.md-card[disabled],
.md-card.filled[disabled] {
	box-shadow: var(--md-sys-shadow0);
	background-color: rgb(from var(--md-sys-color-surface-variant) r g b / 0.38);
}
.md-card:hover,
.md-card.filled:hover {
	box-shadow: var(--md-sys-shadow1);
}
.md-card:hover:before,
.md-card.filled:hover:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.08;
}
.md-card:active,
.md-card.filled:hover {
	box-shadow: var(--md-sys-shadow0);
}
.md-card:active:before,
.md-card.filled:active:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.1;
}
/* card outline*/
.md-card.outline {
	background-color: var(--md-sys-color-surface);
	box-shadow: var(--md-sys-shadow0);
	border:1px solid var(--md-sys-color-outline-variant);
}
.md-card.outline .material-icons {
	color:var(--md-sys-color-primary);
}
.md-card.outline[disabled] {
	box-shadow: var(--md-sys-shadow0);
	/* background-color: rgb(from var(--md-sys-color-surface) r g b / 0.38); */
	background-color: transparent;
	border:1px solid rgb(from var(--md-sys-color-outline) r g b / 0.12);
}
.md-card.outline:hover {
	box-shadow: var(--md-sys-shadow1);
	border:1px solid var(--md-sys-color-outline-variant);
}
.md-card.outline:hover:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.08;
}
.md-card.outline:active {
	box-shadow: var(--md-sys-shadow0);
}
.md-card.outline:active:before {
	position: absolute;
	content:'';
	left:0px;top:0px;right:0px;bottom:0px;
	background-color: var(--md-sys-color-on-surface);
	opacity: 0.1;
}
/* dialog */
.md-dialog {
	position: relative;
	padding:24px;
	border-radius: 28px;
	width:fit-content;
	min-width: 280px;
	max-width: 560px;
	display:flex;
	flex-direction: column;
	gap:16px;
	background-color: var(--md-sys-color-surface-container-high);
	box-shadow: var(--md-sys-shadow3);
	> .material-icons:first-child, > mvc-image  {
		margin:0 auto;
		color:var(--md-sys-color-secondary);
	}
	> .headline,>label,>.label {
		text-align: center;
		color:var(--md-sys-color-on-surface);
		font-family: var(--md-sys-typescale-headline-small-font-family-name);
		font-style: var(--md-sys-typescale-headline-small-font-family-style);
		font-weight: var(--md-sys-typescale-headline-small-font-weight);
		font-size: var(--md-sys-typescale-headline-small-font-size);
		letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
		line-height: var(--md-sys-typescale-headline-small-line-height);
	}
	> .supporting-text {
		color:var(--md-sys-color-on-surface-variant);
		font-family: var(--md-sys-typescale-body-medium-font-family-name);
		font-style: var(--md-sys-typescale-body-medium-font-family-style);
		font-weight: var(--md-sys-typescale-body-medium-font-weight);
		font-size: var(--md-sys-typescale-body-medium-font-size);
		letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
		line-height: var(--md-sys-typescale-body-medium-line-height);
	}
	> .buttons{
		position:relative;
		padding-top:8px;
		display:flex;
		align-items: center;
		justify-content: flex-end;
	}
	&:active > .buttons .md-button,
	&:hover > .buttons .md-button{
		color:var(--md-sys-color-primary) !important;
	}
	&:active:before,
	&:hover:before {
		position:absolute;
		content:'';
		left:0px;top:0px;right:0px;bottom:0px;
		background-color: var(--md-sys-color-primary);
		opacity: 0.08;
		border-radius: 28px;
	}
	&:active:before {
		opacity: 0.1;
	}
}
/* md-search */
.md-search {
	position:relative;
	height:56px;
	display:flex;
	align-items: center;
	gap:12px;
	padding:0 16px;
	border-radius: 28px;
	background-color: var(--md-sys-color-surface-container-high);
	color:var(--md-sys-color-on-surface-variant);
	font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	line-height: var(--md-sys-typescale-body-large-line-height);
	&:has(>:first-child:is(.material-icons)){
		padding-left: 12px;
	}
	&:has(>:last-child:is(.material-icons)){
		padding-right: 12px;
	}
	&:first-child:is(.material-icons) {
		color:var(--md-sys-color-on-surface);
	}
	&:last-child:is(.material-icons) {
		color:var(--md-sys-color-on-surface-variant);
	}
	.input{
		flex-grow: 1;
		color:var(--md-sys-color-on-surface);
		position:relative;width:90%; 
		flex-grow:1;min-width:1px;border: 0;margin: 0;padding: 0;
		height: auto;box-shadow: none;
		background:transparent;
	}
	.placeholder{
		display:none;
		position:absolute;
		overflow:hidden;
		text-overflow: ellipsis;
		pointer-events: none;
		color:var(--md-sys-color-outline);
	}
	&:has(input:placeholder-shown, .placeholder-shown) .placeholder {
		display:block;
	}
	&:active:before,
	&:hover:before {
		position:absolute;
		content:'';
		left:0px;top:0px;right:0px;bottom:0px;
		background-color: var(--md-sys-color-on-surface);
		opacity: 0.08;
		border-radius: 28px;
		overflow:hidden;
	}
	&:active:before{
		opacity: 0.1;
	}
}
mvc-page:has(>.md-search-page){
	background-color:rgb(from var(--md-sys-color-scrim) r g b / 0.4);
}
.md-search-page {
	display:flex;flex-direction: column;width:100%;height:100%;
	mvc-page > & {
		position:relative;
		width:100%;
		max-width: 640px;
		margin:0 auto;
		background-color: var(--md-sys-color-surface-container-low);
		box-shadow: var(--md-sys-shadow1);
	}
	.md-header {
		position: relative;
		flex-shrink: 0;
		flex-wrap: wrap;
		height:auto !important;
		padding:16px 16px 8px 16px;
		padding-top:calc(16px + var(--safe-area-top));
		gap:0px 16px;
		background-color: var(--md-sys-color-surface);
		>.search-box {
			/* margin:16px 0 4px 0; */
			margin:8px 0 4px 0;
			flex-basis:100%;display:flex;align-items: center;flex-grow: 1;
			mvc-search{
				flex-grow: 1;
			}
			mvc-open-panel{
				flex-shrink: 0;
			}
		}
		>mvc-search{
			/* margin: 16px 0 4px 0; */
			margin: 8px 0 4px 0;
			flex-basis: 100%;
		}
		>mvc-tag-panel{
			flex-basis:100%;
		}
	}
	>.container,>.grid-area {
		flex-grow: 1;
		position:relative;
		margin:0 16px 16px 16px;
		/* .scroller {
			background-color:var(--md-sys-color-surface-container);
		} */
	}
}
mvc-page.layout-grid {
	display:flex;flex-direction: column;width:100%;height:100%;
	> * {
		flex-shrink: 0;
	}
	.md-header {
		background-color: transparent;
	}
	mvc-grid {
		flex-grow:1;
		flex-shrink: 1;;
		margin:8px 16px 16px 16px;
	}
}


/* /md-drawer */
.md-drawer {
	position:relative;
	display:block;
	background-color: var(--md-sys-color-surface); 
	/**/
	width:320px;
	width:288px;
	/**/
	height:fit-content;
	/* min-height: -webkit-fill-available; */ /*safrei not work*/
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	padding:0 12px 0 12px;
	body.ai-xs &,body.ai-sm &{
		width:100%;
	}
	&.modal {
		background-color: var(--md-sys-color-surface-container-low);
		box-shadow: var(--md-sys-shadow1);
	}
	.headline{
		display:flex;
		height:56px;
		padding-left:16px;
		gap:12px;
		align-items: center;
		color:var(--md-sys-color-on-surface-variant);
		font-family: var(--md-sys-typescale-title-small-font-family-name);
		font-style: var(--md-sys-typescale-title-small-font-family-style);
		font-weight: var(--md-sys-typescale-title-small-font-weight);
		font-size: var(--md-sys-typescale-title-small-font-size);
		letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
		line-height: var(--md-sys-typescale-title-small-line-height);
	}
	.divider {
		height:1px;
		margin:0 12px;
		background-color: var(--md-sys-color-outline);
	}
	.item {
		position:relative;
		height:56px;width:100%;
		display:flex;
		flex-direction:row;
		white-space:nowrap;
		align-items: center;
		gap:12px;
		padding:0 24px 0 16px;
		border-radius:28px;
		transform: translateZ(0px);
		label, .label{
			flex-grow: 1;
			font-family: var(--md-sys-typescale-label-large-font-family-name);
			font-style: var(--md-sys-typescale-label-large-font-family-style);
			font-weight: var(--md-sys-typescale-label-large-font-weight);
			font-size: var(--md-sys-typescale-label-large-font-size);
			letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
			line-height: var(--md-sys-typescale-label-large-line-height);
			color:var(--md-sys-color-on-surface-variant);
			&.selected{
				color:var(--md-sys-color-on-secondary-container);
			}
		}
		.material-icons{
			color:var(--md-sys-color-on-surface-variant);
			&.selected{
				color:var(--md-sys-color-on-secondary-container);
			}
		}
		.badge, mvc-unread {
			color:var(--md-sys-color-on-surface-variant);
			font-family: var(--md-sys-typescale-title-large-font-family-name);
			font-style: var(--md-sys-typescale-title-large-font-family-style);
			font-weight: var(--md-sys-typescale-title-large-font-weight);
			font-size: var(--md-sys-typescale-title-large-font-size);
			letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
			line-height: var(--md-sys-typescale-title-large-line-height);
		}
		&:hover {
			background-color:rgb(from var(--md-sys-color-on-surface) r g b / 0.08);
			label, .label {
				color:var(--md-sys-color-on-surface);
			}
			.material-icons{
				font-variation-settings: 'FILL' 1;
				color:var(--md-sys-color-on-surface);
			}
			&.selected {
				background-color:rgb(from var(--md-sys-color-on-secondary-container) r g b / 0.08);
				label, .label{
					color:var(--md-sys-color-on-secondary-container);
				}
				.material-icons {
					font-variation-settings: 'FILL' 1;
					color:var(--md-sys-color-on-secondary-container);
				} 
			}
		}
		&::before {
			position:absolute;
			content:' ';
			left:50%;top:0px;
			width:0%;height:100%;
			border-radius:28px;
			background-color: var(--md-sys-color-secondary-container);
			transition: all 0.3s;
			z-index:-1;
		}
		/* &:has(+.md-drawer .item.selected)::before, */
		&.selected::before {
			left:0px;width:100%;
		}
	}
	/** extand by shawn*/
	.md-drawer {
		width:-webkit-fill-available;
		height:fit-content;
		display:none;
		padding: 0 0 0 32px;
	}
	.item.expander {
		padding-right:36px;
		&:not(:has(+ .expandable .item)){
			display:none;
		}
	}
	.item.expander::after{
		position:absolute;
		font-family: 'Material Symbols Outlined';;
		content: "arrow_drop_down";
		font-size:18px;
		right:12px;
	}
	.item.expander.expand::after{
		transition:transform 0.3s;
		transform:rotate(180deg);
	}
}
.expander {
	cursor: pointer;
}
/*.avatar*/
.avatar {
	position:relative;
	border-radius: 100%;
	overflow: hidden;
	display:flex;
	align-items: center;
	justify-content: center;
	width:24px;height:24px;
	font-size:24px;
	flex-shrink: 0;
	flex-grow: 0;
	.material-icons {
		pointer-events: none;
		color:var(--md-sys-color-outline);
		font-size: inherit;
	}
	&.s88 {
		width:88px;height:88px;
		font-size:80px;
	}
	&.s72 {
		width:64px;height:64px;
		font-size:64px;
	}
	&.s64 {
		width:64px;height:64px;
		font-size:48px;
	}
	&.s40 {
		width:40px;height:40px;
		font-size:32px;
	}
	&.s30 {
		width:30px;height:30px;
		font-size:24px;
	}
	&:hover {
		.material-icons {
			font-variation-settings: 'FILL' 1;
		}
	}
	&:has(img.ai-file) {
		.material-icons {
			display:none;
		}
	}
}

/* badge */
.md-badge {
	position:absolute;
	min-width:6px;
	height:6px;
	border-radius: 3px;
	background-color:var(--md-sys-color-error);
	color:var(--md-sys-color-on-error);
	cursor:default;
	display:none;
	font-family: var(--md-sys-typescale-label-small-font-family-name);
	font-style: var(--md-sys-typescale-label-small-font-family-style);
	font-weight: var(--md-sys-typescale-label-small-font-weight);
	font-size: var(--md-sys-typescale-label-small-font-size);
	letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
	line-height: var(--md-sys-typescale-label-small-line-height);
	text-align: center;
	&:has(:is(label, .label)) {
		min-width:16px;height:16px;
		border-radius: 8px;
		padding: 0 4px;
	}
	>:is(label, .label){
		display:block;
		color:var(--md-sys-color-on-error);
	}
	mvc-tabs .tab & {
		left:calc(50% + 6px);
		top:8px;
		&:has(:is(label, .label)){
			left:50%;
			top:8px;
		}
	}
	mvc-grid .col-head &{
		left:calc(50% + 6px);
		top:8px;
	}
	.md-navbar .item & {
		left:50%;
		top:0px;
		z-index:1;
	}
	:is(.ai-lg, .ai-xl) .md-navbar .item &, 
	.md-drawer .item & {
		position:relative;
		left:auto;
		top:auto;
		height:20px;
		background-color: transparent;
		font-family: var(--md-sys-typescale-label-large-font-family-name);
		font-style: var(--md-sys-typescale-label-large-font-family-style);
		font-weight: var(--md-sys-typescale-label-large-font-weight);
		font-size: var(--md-sys-typescale-label-large-font-size);
		letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
		line-height: var(--md-sys-typescale-label-large-line-height);
		:is(label, .label) {
			color:var(--md-sys-color-on-surface-variant);
		}
	}
	.md-list & {
		left:32px;
		top:calc(50% -  16px);
	}
	.md-button & {
		top:0px;
	}
	
}

.md-menu {
	position:relative;
	padding:8px 12px 8px 12px;
	border-radius: 4px;
	width:minmax(112px, 280px);
	background-color: var(--md-sys-color-surface-container);
	box-shadow: var(--md-sys-shadow2);
	display:flex;
	flex-direction: column;
	align-items: center;
	.item {
		height:48px;
		&.selected{
			background-color:var(--md-sys-color-secondary-container);
		}
		>:is(label, .label){
			flex-grow: 1;
			color:var(--md-sys-color-on-surface);
			font-family: var(--md-sys-typescale-label-large-font-family-name);
			font-style: var(--md-sys-typescale-label-large-font-family-style);
			font-weight: var(--md-sys-typescale-label-large-font-weight);
			font-size: var(--md-sys-typescale-label-large-font-size);
			letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
			line-height: var(--md-sys-typescale-label-large-line-height);
			.item.selected &{
				color:var(--md-sys-color-on-secondary-container);
			}
		}
		> .material-icons,>.avatar {
			color:var(--md-sys-color-on-surface-variant);
		}
		&[disabled] {
			>:is(label, .label, .material-icons){
				color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
			}
		}
		&:hover {
			>:is(label, .label){
				color:var(--md-sys-color-on-surface);
			}
			>:is(.material-icons,.avatar,mvc-image){
				color:var(--md-sys-color-on-surface-variant);
			}
			&::before{
				position:absolute;
				left:0px;top:0px;width:100%;height:100%;
				background-color:var(--md-sys-color-on-surface);
				opacity: 0.08;
			}
		}
		&:focus-within {
			>:is(label, .label){
				color:var(--md-sys-color-on-surface);
			}
			>:is(.material-icons,.avatar,mvc-image){
				color:var(--md-sys-color-on-surface-variant);
			}
			&::before{
				position:absolute;
				left:0px;top:0px;width:100%;height:100%;
				background-color:var(--md-sys-color-on-surface);
				opacity: 0.1;
			}
		}
	}
	.divider {
		width:100%;
		height:1px;
		padding:8px 0px;
		background-color:var(--md-sys-color-surface-variant);
	}
}
.md-bottom-sheet{
	position:relative;
	width:100%;
	max-width: 640px;
	margin:0 auto;
	/* margin:56px 56px 0px 56px;
	.ai-xs &{
		margin:72px 0px 0px 0px;
	} */
	background-color: var(--md-sys-color-surface-container-low);
	box-shadow: var(--md-sys-shadow1);
	border-radius: 28px 28px 0 0;
	.drag-handle {
		background-color:var(--md-sys-color-on-surface-variant);
		opacity:0.4;
		width:32px;
		height:4px;
		margin:14px auto;
	}
	/* padding:32px 16px 16px 16px; */
	padding:32px 16px 16px 16px;
	&:has(.drag-handle){
		padding-top:0px;
	}
	&:has(.md-header) {
		padding-left: 0px;
		padding-right: 0px;
	}
	.md-header, .md-header.small {
		padding-top:0px; /*dont add safe-area*/
		height:64px;
	}
}

.md-bottom-sheet-page {
	background-color:rgb(from var(--md-sys-color-scrim) r g b / 0.4);
	.scroller{
		background-color: transparent;
		display:flex;justify-content: center;
		/* align-items: center; */
		scroll-behavior: smooth;
		.md-bottom-sheet {
			position:absolute;
			top: calc(100% - 32px);
			.md-bottom-sheet-page.closable & {
				top:100%;
			}
		}
	}
}


mvc-input, input {
	width:-webkit-fill-available;
}
/****MVC****/
mvc-object, mvc-object-array, mvc-val-array,mvc-val-map, mvc-yid, mvc-uid{
	display:block;
}
mvc-open-page mvc-yid .watermark {
	display:none;
}
mvc-val-map {
	cursor:default;
}
/* .mvc {
	position:relative;
} */
mvc-openurl {
	cursor:pointer;
	&[disabled] {
		pointer-events: none;
		color:rgb(from var(--md-sys-color-on-surface) r g b / 0.38);
	}
}
mvc-links {
	display:block;
}

mvc-links-editor,
mvc-files-editor {
	position:relative;
	display:flex;
	justify-content: space-around;
	flex-direction: column;
	width:100%;
	.md-button {
		height:32px;
		width:min-content;
		align-self: flex-end;
	}
	mvc-files {
		padding:0px 16px;
	}
}

.md-video-editor,
.md-image-editor,
mvc-video-editor,
mvc-image-editor {
	position:relative;
	width:100%;
	display:flex;
	flex-direction: column;
	aspect-ratio: 4/3;
	&.rate1-1 {
		aspect-ratio: 1/1;
	}
	&.rate4-1 {
		aspect-ratio: 4/1;
	}
	&.rate4-3 {
		aspect-ratio: 4/3;
	}
	&.rate16-9 {
		aspect-ratio: 16/9;
	}
	&:has(.md-button) {
		padding-top:16px;
	}
	&:has(.avatar) {
		width:fit-content;
	}
	.md-button {
		height:32px;
		width:min-content;
		align-self: flex-end;
	}
	mvc-video,
	mvc-image{
		display:block;
		position:relative;
		border:1px dashed var(--md-sys-color-outline);
		border-radius: 8px;
		overflow: hidden;
		cursor:pointer;
		aspect-ratio: 4/3;
		width:100%;
		&.avatar {
			border-radius: 100%;
			aspect-ratio: 1/1;
			&.s24 {
				width: 24px;
			}
			&.s30{
				width:30px;
			}
			&.s40{
				width:40px;
			}
			&.s64{
				width:64px;
			}
			&.s72{
				width:72px;
			}
			&.s88{
				width:88px;
			}
		}
		.rate1-1 & {
			aspect-ratio: 1/1;
			width:100%;
		}
		.rate4-1 & {
			aspect-ratio: 4/1;
			width:100%;
		}
		video,
		img {
			object-fit: contain;
		}
		.watermark {
			position:absolute;
			pointer-events: none;
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap:8px;
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			color:var(--md-sys-color-outline);
			.ai-file & {
				display:none;
			}
			.material-icons {
				pointer-events: none;
				font-size: 24px;
				&.medium {
					font-size:40px;
				}
				&.large {
					font-size:56px;
				}
			}
			.headline {
				font-family: var(--md-sys-typescale-label-large-font-family-name);
				font-style: var(--md-sys-typescale-label-large-font-family-style);
				font-weight: var(--md-sys-typescale-label-large-font-weight);
				font-size: var(--md-sys-typescale-label-large-font-size);
				letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
				line-height: var(--md-sys-typescale-label-large-line-height);
			}
			.supporting-text{
				font-family: var(--md-sys-typescale-label-medium-font-family-name);
				font-style: var(--md-sys-typescale-label-medium-font-family-style);
				font-weight: var(--md-sys-typescale-label-medium-font-weight);
				font-size: var(--md-sys-typescale-label-medium-font-size);
				letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
				line-height: var(--md-sys-typescale-label-medium-line-height);
			}
		}
	}
}
/*****/
mvc-images {
	position: relative;
	display:block;
	overflow:hidden;
	border-radius: 16px;;
	.container{
		position:relative;
		width:100%;
		height:100%;
		overflow-x: auto ;
		display:flex;
		white-space:nowrap;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		touch-action: pan-x;
		touch-action:auto;
		border-radius: 16px;
		/** LEO */
		overscroll-behavior-x: contain;
		/****/
		mvc-images.indicator-outside &{
			height:calc(100% - 8px);
		}
		&::-webkit-scrollbar {
			height:0px;
			width:0px;
		}
		* {
			touch-action:auto;
		}
		mvc-image {
			width:100%;
			flex-shrink: 0;
			scroll-snap-align:center;
			/** LEO ***/
			scroll-snap-stop: always;
			/*****/
			aspect-ratio: 4/3;
			img {
				object-fit: cover;
			}
			mvc-images.aspect-height &, mvc-images-editor.aspect-height &{
				width:auto;
				height:100%;
				scroll-snap-align:start;
			}
		}
	}
	mvc-indicator {
		bottom: 16px;
		mvc-images.indicator-outside{
			bottom:0px;
		}
		mvc-images.aspect-height & {
			display:none;
		}
	}
}
mvc-images-editor {
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	width:100%;
	.md-button {
		height:32px;
		width:min-content;
		align-self: flex-end;
	}
	mvc-images {
		display: block;
		aspect-ratio: 4/3;
		width:100%;
		flex-shrink: 0;
		border:1px dashed var(--md-sys-color-outline);
		mvc-images-editor.indicator-outside{
			.container {
				height:calc(100% - 8px);
			}
		}
		mvc-images-editor.aspect-height &{
			width:auto;
			height:100%;
			height:calc(100% - 32px);
			scroll-snap-align:start;
		}
		.md-field:has(label) mvc-images-editor.aspect-height  &{
			height:calc(100% - 32px);
		}
		mvc-indicator {
			bottom:16px;
			mvc-images-editor.indicator-outside{
				bottom:0px;
			}
			mvc-images-editor.aspect-height & {
				display:none;
			}
		}
		.watermark {
			mvc-images:has(.ai-file) &{
				display:none;
			}
			position:absolute;
			pointer-events: none;
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap:8px;
			left:0px;top:0px;width:100%;height:100%;
			color:var(--md-sys-color-outline);
			.ai-file & {
				display:none;
			}
			.material-icons {
				font-size: 24px;
				&.medium {
					font-size:40px;
				}
				&.large {
					font-size:56px;
				}
			}
			.headline {
				font-family: var(--md-sys-typescale-label-large-font-family-name);
				font-style: var(--md-sys-typescale-label-large-font-family-style);
				font-weight: var(--md-sys-typescale-label-large-font-weight);
				font-size: var(--md-sys-typescale-label-large-font-size);
				letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
				line-height: var(--md-sys-typescale-label-large-line-height);
			}
			.supporting-text{
				font-family: var(--md-sys-typescale-label-medium-font-family-name);
				font-style: var(--md-sys-typescale-label-medium-font-family-style);
				font-weight: var(--md-sys-typescale-label-medium-font-weight);
				font-size: var(--md-sys-typescale-label-medium-font-size);
				letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
				line-height: var(--md-sys-typescale-label-medium-line-height);
			}
		}
	}
}

/**** ******/
mvc-file {
	.md-field &{
		height:var(--md-sys-typescale-body-large-line-height);
	}
	.ylnodaer &.xrdonly {
		pointer-events: all;
		cursor: pointer;
	}
}

mvc-image {
	position:relative;
	.md-field &{
		height:var(--md-sys-typescale-body-large-line-height);
	}
	img {
		display:block;width:100%;height:100%;
		border:0;
		object-fit:cover;
		z-index:0;
	}
	.watermark {
		position:absolute;left:0px;top:0px;width: 100%;height:100%;
		display:flex; justify-content: center;align-items:center;
		mvc-image:has(.ai-file) &,
		md-field:has(.label) mvc-image:is(.placeholder-shown) &{
			display:none;
		}
	}
	/* background-color: var(--md-sys-color-outline-variant); */
}
mvc-video {
	.md-field &{
		height:var(--md-sys-typescale-body-large-line-height);
	}
	video {
		display:block;width:100%;height:100%;
		object-position:50% 50%;object-fit:contain;
		border:0;
		z-index:0;
	}
	&.poster_load:before {
		pointer-events: none;
		font-family: 'Material Icons';
		content: "\E1C4";
		font-size: 3rem;
		color: var(--md-sys-color-error);
		position: absolute;
		cursor: pointer;
		top: calc(50% - 1.5rem);
		left: calc(50% - 1.5rem);
	}
}
mvc-audio {
	.md-field &{
		height:var(--md-sys-typescale-body-large-line-height);
	}
	audio {
		width:100%;height:2rem;
		border:0;
		z-index:0;
	}
}
mvc-signature {
	display:block;
	background-color: white;
	.md-field &{
		height:var(--md-sys-typescale-body-large-line-height);
	}
	img {
		display:block;width:100%;height:100%;object-fit:contain;
		border:0 none;
		z-index:0;
		&.blank {
			display:none;
		}
	}
}

mvc-image.ai-file :not(img),
mvc-video.ai-file :not(video),
mvc-audio.ai-file :not(audio),
mvc-signature.ai-file :not(img) {
	display:none;
}
mvc-image[data-update="true"]:not([readonly]),
mvc-video[data-update="true"]:not([readonly]),
mvc-audio[data-update="true"]:not([readonly]) {
	cursor:pointer

}


mvc-accordion {
	display:block;
	background-color:  var(--md-sys-color-surface-container);
	border-radius:28px;overflow:hidden;
	& & {
		background-color:  var(--md-sys-color-surface-container-high);
	}
	& & &{
		background-color:  var(--md-sys-color-surface-container-highest);
	}
	>.title {
		display:flex;
		align-items: center;
		padding:0 16px;
		height:56px;
		gap:12px;
		color: var(--md-sys-color-on-surface);
		.headline {
			flex-grow: 1;
			text-align:left;
			font-family: var(--md-sys-typescale-title-medium-font-family-name);
			font-style: var(--md-sys-typescale-title-medium-font-family-style);
			font-weight: var(--md-sys-typescale-title-medium-font-weight);
			font-size: var(--md-sys-typescale-title-medium-font-size);
			letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
			line-height: var(--md-sys-typescale-title-medium-line-height);
			mvc-accordion:has(:invalid, .invalid) >.title & {
				color:var(--md-sys-color-error)
			}
		}
		.material-icons {
			mvc-accordion:has(:invalid, .invalid) >.title & {
				color:var(--md-sys-color-error)
			}
		}
		.headline + .md-button,
		.headline + .material-icons {
			cursor:pointer;
			mvc-accordion:has(:invalid, .invalid) >.title & {
				color:var(--md-sys-color-error)
			}
		}
		&:has(.headline + :is(.md-button, .button)) {
			padding-right:8px;
		}
		&:hover >.material-icons{
			font-variation-settings: 'FILL' 1;
		}
		mvc-accordion.expand > & {
			.expander.material-icons,
			.more, .expand-more, #expnad_more {
				transition:transform 0.3s;
				transform:rotate(180deg);
			}
		}		

	}
	>.container {
		padding:16px;
	}
	&:has(>.title) >.container{
		padding-top:0;
	}
}

mvc-tags {
	display:flex;
	flex-direction: column;
	height: fit-content !important;
	cursor:default !important;
	width:-webkit-fill-available;
	#tag_container {
		display:flex;
		flex-direction: row;
		gap:0.25rem;
		.material-icons#expander {
			align-self: center;
			transition:transform 0.35s;
			cursor:pointer;
		}
		#tag_box {
			flex-grow: 1;
			display:flex;
			flex-wrap: wrap;
			padding: 0 0.25rem;
			gap:0.5rem;
			align-items: flex-end;
			input {
				width:unset;
				height:fit-content;
				line-height: normal;
				margin: auto 0;
			}
		}
	}
	&:active #tag_container .material-icons#expander {
		transition:transform 0.35s;
		transform: rotateZ(180deg);
	}
	.tag #remove{
		cursor:pointer;
	}
	.md-chip-input {
		min-height: fit-content;
		height:fit-content !important;
	}
}
/** will insert to body **/
.mvc-tags-list {
	position: absolute;
	height: fit-content;
	background-color: var(--md-sys-color-surface-container-high);
	color:var(--md-sys-color-on-surface-container);
	z-index:1000;
	#list_box {
		height:fit-content;
		max-height: 240px;
		overflow-y: auto;
		display:flex;
		flex-direction: column;
		padding:0 1rem;
		padding-bottom: 0.5rem;
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		.item {
			padding:0.5rem 1rem;
			justify-content: left;
		}
	}
}
.md-tag-panel {
	overflow:hidden;
	width:100%;
	>.container {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		touch-action: pan-x;
		touch-action: auto;
		scroll-snap-type: x mandatory;
		display:flex;
		flex-wrap: nowrap;
		padding:8px;
		gap:8px;
		touch-action: pan-x;
		touch-action: auto;
		* {
			touch-action: pan-x;
			touch-action: auto;
		}
		&::-webkit-scrollbar {
			height:0px;
		}
		.tag {
			scroll-snap-align: start;
		}
		.md-tag-panel.visible &{
			overflow: visible;
			flex-wrap: wrap;
		}
	}
}
.md-progress{
	position:absolute;
	display:block;
	left:0px;
	bottom:0px;
	height:4px;
	width:100%;
	border-right: 4px solid var(--md-sys-color-primary);
	border-radius: 4px;
	--progress-percent:0%;
	margin:0 4px;
	&::before {
		position:absolute;
		content:'';
		left:0px;
		top:0px;
		height:4px;
		background-color: var(--md-sys-color-primary);
		width:var(--progress-percent);
	}
	&::after {
		position:absolute;
		content:'';
		top:0px;
		right:0px;
		height:4px;
		left: calc(var(--progress-percent + 4 px));
		width:calc( 100% - var(--progress-percent) - 4px);
		background-color: var(--md-sys-color-secondary-container)
	}
}

/* .md-progress-circle {
	display: flex;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: conic-gradient(red var(--progress), transparent 0deg);
	font-size: 0;
	&::after {
		content: attr(data-progress) '%';
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		margin: 10px;
		border-radius: 50%;
		background: white;
		font-size: 1rem;
		text-align: center;
	}
}
   */

/************ mvc-grid ***********/
mvc-grid {
	position:relative;
	border-radius: 0.25rem;
	background-color:var(--md-sys-color-surface-container); 
	/* border:1px solid var(--md-sys-color-primary); */
	overflow:auto;
	touch-action: pan-y pan-x !important;
	box-shadow: var(--md-sys-shadow1);
	* {
		touch-action: pan-y pan-x !important;
		touch-action: auto;
	}
	.grid {
		position:relative;
		display:grid !important;
		grid-template-rows:auto;
		grid-auto-columns:min-content;
		grid-auto-rows: min-content;
		grid-gap:3px 1px;
		touch-action:pan-y pan-x;
		touch-action: auto;
		overflow:visible;
		width:-webkit-fill-available;
		font-family: var(--md-sys-typescale-body-medium-font-family-name);
		font-style: var(--md-sys-typescale-body-medium-font-family-style);
		font-weight: var(--md-sys-typescale-body-medium-font-weight);
		font-size: var(--md-sys-typescale-body-medium-font-size);
		letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
		line-height: var(--md-sys-typescale-body-medium-line-height);
		/* mvc-grid.fill-available &{
			width:-webkit-fill-available;
		} */
		> :nth-child(n) {
			padding:8px;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			color:var(--md-sys-color-on-surface);
			text-align: center;
			cursor:default;
			z-index:1;
			&.select {
				margin:1px;
			} 
		}
		.even {
			background:var(--md-sys-color-surface-container-high);
		}
		.odd {
			background:var(--md-sys-color-surface-container-low);
		}
		.row-head{
			background:var(--md-sys-color-primary);
			background: linear-gradient(to bottom, rgb(from var(--md-sys-color-primary) r g b / 1), rgb(from var(--md-sys-color-primary) r g b / 0.8) 70.71%);

			color:var(--md-sys-color-on-primary);

			/* background:var(--md-sys-color-surface-variant);
			color:var(--md-sys-color-on-surface-variant); */

			position:sticky;
			top:0px;
			z-index:3;
			padding:8px 16px 8px 16px;
			height:fit-content;
			font-family: var(--md-sys-typescale-title-medium-font-family-name);
			font-style: var(--md-sys-typescale-title-medium-font-family-style);
			font-weight: var(--md-sys-typescale-title-medium-font-weight);
			font-size: var(--md-sys-typescale-title-medium-font-size);
			letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
			line-height: var(--md-sys-typescale-title-medium-line-height);
			.title {
				white-space:nowarp;
			}
			mvc-grid[data-sort="true"] & {
				padding:8px 20px 8px 20px;
			}
			&[data-ad="a"]:after{
				position:absolute;
				content: "arrow_drop_up";
				font-family: 'Material Symbols Outlined';
				font-size: 14px;
				right:4px;
				color:var(--md-sys-color-on-primary);
			}
			&[data-ad="d"]:after{
				position:absolute;
				content: "arrow_drop_up";
				font-family: 'Material Symbols Outlined';
				font-size: 14px;
				right:4px;
				color:var(--md-sys-color-on-primary);
				transition: 0.3s;
				transform: rotate(180deg);
			}
		}
		.row-head-last{
			border-radius:0 0.25rem 0 0;
		}
		.col-head{
			color:var(--md-sys-color-on-surface);
			position:sticky;
			left:0px;
			z-index:1;
			text-align:center;
			display:flex;
			align-items: center;
			justify-content: center;
			white-space:nowarp;
		}
		.root{
			background:var(--md-sys-color-primary);
			background: linear-gradient(to bottom, rgb(from var(--md-sys-color-primary) r g b / 1), rgb(from var(--md-sys-color-primary) r g b / 0.8) 70.71%);

			color:var(--md-sys-color-on-primary);
			position:sticky;
			left:0px;
			top:0px;
			z-index:4;
			min-width:3rem;
			height:auto;
			padding:0px;
			text-align:center;
			display:flex;
			align-items: center;
			justify-content: center;
			border-radius:0.25rem 0 0 0;
			.material-icons{
				color:var(--md-sys-color-on-primary);
				cursor:pointer;
			}
		} 
	} 
	&[data-select] .grid {
		.select{
			position:relative;
			grid-area:1/1/span 1/-1;
			border-radius:0.25rem;
			cursor:pointer;
			margin:0px !important;
		}
		.select:hover{
			border:1px solid var(--md-sys-color-secondary);
			background-color:transparent;
			z-index: 2;
		}
		.select:hover:before{
			display:none;
		}
		.cell {
			pointer-events: none;
			display:flex;
			align-items: center;
			z-index:0;
		}
	}
	&[data-sort="true"] .grid {
		.row-head {
			cursor:pointer;
			display:flex;
			align-items: center;
			justify-content: center;
		}
	} 
} 

/************ mvc-tree ***********/
mvc-tree {
	--tree-box-height:40px;
	--tree-op-left:-33px;
	--tree-color:var(--md-sys-color-on-surface);
	--tree-border: 1px solid var(--md-sys-color-outline-variant);
	--tree-icon-color:var(--md-sys-color-primary);
	--tree-op-background:transparent;
	--tree-op-color:var(--md-sys-color-outline);
	font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	line-height: var(--md-sys-typescale-body-large-line-height);
	.root {
		position:relative;
		color:var(--tree-color);
		margin:0px;padding:0px;
		padding:0 4px;
		ul {
			position:relative;
			margin-left:12px;
			padding-left:20px;
			li:not(:last-child):before {
				position: absolute;
				content: ' ';
				left:calc(-1 * var(--tree-box-height)/2 - 2px);
				top: 1px;
				bottom:calc(-1 * var(--tree-box-height) / 2);
				border-left: var(--tree-border);
			}
			li:first-child:last-child:before {
				position: absolute;
				content: ' ';
				left:calc(-1 * var(--tree-box-height)/2 - 2px);
				top: 1px;
				height:calc(var(--tree-box-height) / 2);
				border-left: var(--tree-border);
			}
			li:after {
				position: absolute;
				content: ' ';
				top:calc(var(--tree-box-height) / 2 + 1px);
				left:calc(-1* var(--tree-box-height) / 2);
				width: calc(var(--tree-box-height) / 2 - 8px);
				border-top:var(--tree-border);
				border-radius: 1px;
			}
			li {
				#op {
					display:block;
					position:absolute;
					left:var(--tree-op-left);
					background-color:var(--tree-op-background);
					color: var(--tree-op-color);
					z-index:1;
					/* top:8px; */
					top:11px;
					transition: all 0.3s;
				}
				&.shrink #op {
					display:block;
					transition: all 0.3s;
					transform: rotate(-90deg);
					transform-origin: center;
					/* top:auto; */
					top:9px;
					left: calc( var(--tree-op-left) + 1px);
				}
				&.leaf #op {
					display:none;
				}
				&.selected >.box > .content {
					color:var(--md-sys-color-tertiary);
					transform: scale(1.1);
				}
			}
		}
		li {
			position:relative;
			list-style:none;
			cursor:pointer;
			.material-icons {
				position:relative;
				color:var(--tree-icon-color);
			}
			#op{
				display:none;
			}
		}
		.box {
			position:relative;
			display:flex;align-items:center;
			height:var(--tree-box-height);
			.content {
				position:relative;
				display:flex;align-items:center;
				gap:8px;
				white-space:nowrap;
				min-width:1px;
				overflow: hidden;
			}
		}
	}
	li .content:hover #name{
		color:var(--md-sys-color-tertiary);
	}
}

/*******************************/


mvc-open-page {
	position:relative;
	cursor:pointer;
	&:not(:is([data-html$=".html"])){
		cursor:default;
	}
	:is(.md-field, .md-field-outline) > &::after {
		position:absolute;
		font-family: 'Material Symbols Outlined';
		content: "arrow_drop_down";
		color: var(--md-sys-color-outline);
		right:-8px;
		top:calc(50% - 12px);
	}
	:is(.md-field, .md-field-outline):has(.placeholder-shown)> &::after {
		top:calc(50% - 18px);
	}
	label {
		cursor:inherit;
	}
}

/* header */
.md-header {
	position:sticky;
	z-index:10;
	width:100%;left:0px;top:0px;
	display:flex;justify-content:left;align-items:center;
	padding:0 16px;
	padding-top:var(--safe-area-top);
	gap:16px;
	height:calc(64px + var(--safe-area-top));
	background-color: var(--md-sys-color-surface-container);
	/* background-color: rgb(from  var(--md-sys-color-surface-container) r g b / var(--scroll-md-header-percent)); */
	.scroller & {
		/* background-color: rgb(from  var(--md-sys-color-surface-container) r g b / var(--scroll-md-header-percent)); */
		background-color: rgb(from  var(--md-sys-color-surface) r g b / var(--scroll-md-header-percent));
	}
	> .headline {
		flex-grow:1;
		/* text-align: center; */
		font-family: var(--md-sys-typescale-title-large-font-family-name);
		font-style: var(--md-sys-typescale-title-large-font-family-style);
		font-weight: var(--md-sys-typescale-title-large-font-weight);
		font-size: var(--md-sys-typescale-title-large-font-size);
		letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
		line-height: var(--md-sys-typescale-title-large-line-height);
		color:var(--md-sys-color-on-surface);
	}
	> .material-icons {
		position: relative;
		flex-grow: 0;
		color:var(--md-sys-color-on-surface);
		cursor:pointer;
		&:active,
		&:hover {
			font-variation-settings: 'FILL' 1;
			overflow:visible;
			&::before {
				position:absolute;
				content:' ';
				left:-8px;top:-8px;right:-8px;bottom:-8px;
				border-radius: 100%;;
				background-color: var(--md-sys-color-on-surface);
				opacity: 0.08;
			}
		}
	}
	> .headline ~ .material-icons {
		color:var(--md-sys-color-on-surface-variant);
	} 
	> .avatar {
		position:relative;
		width:30px;height:30px;
		overflow:hidden;
		border-radius: 100%;
		> mvc-iamge {
			width:30px;height:30px;
		}
	}
	&.small {
		height:64px;
		padding:0 16px;
		padding-top:calc(0px + var(--safe-area-top));
		height:calc(64px + var(--safe-area-top));
		> .headline {
			flex-grow:1;
			text-align: left;
			font-family: var(--md-sys-typescale-title-large-font-family-name);
			font-style: var(--md-sys-typescale-title-large-font-family-style);
			font-weight: var(--md-sys-typescale-title-large-font-weight);
			font-size: var(--md-sys-typescale-title-large-font-size);
			letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
			line-height: var(--md-sys-typescale-title-large-line-height);
			color:var(--md-sys-color-on-surface);
		}
	}
	&.medium {
		flex-wrap: wrap;
		height:calc(112px + var(--safe-area-top));
		padding:20px 16px 24px 16px;
		padding-top:calc(20px + var(--safe-area-top));
		> :first-child {
			margin-right:auto;
		}
		> .headline {
			width:100%;
			text-align: left;
			font-family: var(--md-sys-typescale-headline-small-font-family-name);
			font-style: var(--md-sys-typescale-headline-small-font-family-style);
			font-weight: var(--md-sys-typescale-headline-small-font-weight);
			font-size: var(--md-sys-typescale-headline-small-font-size);
			letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
			line-height: var(--md-sys-typescale-headline-small-line-height);
		}

	}
	&.large {
		flex-wrap: wrap;
		height:calc(152px + var(--safe-area-top));
		padding:20px 16px 28px 16px;
		padding-top:calc(20px + var(--safe-area-top));
		> :first-child {
			margin-right:auto;
		}
		> .headline {
			width:100%;
			text-align: left;
			font-family: var(--md-sys-typescale-headline-medium-font-family-name);
			font-style: var(--md-sys-typescale-headline-medium-font-family-style);
			font-weight: var(--md-sys-typescale-headline-medium-font-weight);
			font-size: var(--md-sys-typescale-headline-medium-font-size);
			letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
			line-height: var(--md-sys-typescale-headline-medium-line-height);
		}
	}
}

mvc-tabs {
	position:relative;
	height:64px;
	display:grid;
	align-items: center;
	justify-items: center;
	grid-template-columns:repeat(3, 1fr); /*modify by js*/
	background-color: var(--md-sys-color-surface);
	overflow-x:auto;
	white-space: nowrap;
	touch-action:pan-x;
	touch-action: auto;
	-webkit-overflow-scrolling:touch;
	&::-webkit-scrollbar {
		height:0px;
		width:0px;
	}
	&.secondary{
		height:48px;
	}
	* {
		/* touch-action:pan-x; */
		touch-action: auto;
	}
	&::before {
		position:absolute;
		content:'';
		left:0px;bottom:0px;right:0px;height:1px;
		background-color: var(--md-sys-color-surface-variant);
	}
	--left:30px;
	--width:60px;
	&::after {
		position:absolute;
		content:'';
		bottom:0px;height:3px;
		left:var(--left);
		width:var(--width);
		background-color: var(--md-sys-color-primary);
		border-radius: 3px 3px 0 0;
		transition: 0.3s ease-out;
	}
	&.secondary::after{
		height:2px;
	}
	&.no-transition::after{
		transition: '';
		left:var(--left);
	}
	.tab {
		position:relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width:100%;
		height:100%;
		cursor:pointer;
		flex-wrap:nowrap;
		.secondary &{
			flex-direction: row;
			gap:8px;
		}
		>:is(label, .label) {
			font-family: var(--md-sys-typescale-title-small-font-family-name);
			font-style: var(--md-sys-typescale-title-small-font-family-style);
			font-weight: var(--md-sys-typescale-title-small-font-weight);
			font-size: var(--md-sys-typescale-title-small-font-size);
			letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
			line-height: var(--md-sys-typescale-title-small-line-height);
			color:var(--md-sys-color-on-surface-variant);
		}
		>.material-icons {
			font-size: 24px;
			color:var(--md-sys-color-on-surface-variant);
		}
		&.selected, &:active, &.selected .material-icons, &:active .material-icons {
			color:var(--md-sys-color-primary)
		}
		&.selected .material-icons, &:active .material-icons {
			font-variation-settings: 'FILL' 1;
		}
		&:hover {
			>:is(label, .label){
				color:var(--md-sys-color-on-surface);
			}
			.material-icons {
				color:var(--md-sys-color-on-surface);
				font-variation-settings: 'FILL' 1;
			}
			&.selected, &:active, &.selected .material-icons, &:active .material-icons {
				color:var(--md-sys-color-primary);
			}
			&::before {
				position:absolute;
				content:'';
				left:0px;top:0px;bottom:0px;right:0px;
				background-color: var(--md-sys-color-on-surface);
				opacity:0.08;
				&.selected,&:active {
					background-color: var(--md-sys-color-primary);
				}
			}
			&.selected::before, &:active::before {
				color:var(--md-sys-color-primary);
			}
		}
		&:focus {
			>:is(label, .label){
				color:var(--md-sys-color-on-surface);
			}
			.material-icons {
				color:var(--md-sys-color-on-surface);
			}
			&.selected, &:active, &.selected .material-icons, &:active .material-icons {
				color:var(--md-sys-color-primary);
			}
			::before {
				position:absolute;
				content:'';
				left:0px;bottom:0px;right:0px;bottom:0px;
				background-color: var(--md-sys-color-on-surface);
				opacity:0.08;
				&.selected,&:active {
					background-color: var(--md-sys-color-primary);
				}
			}
			&.selected::before, &:active::before {
				color:var(--md-sys-color-primary);
			}
		}
	}
	&:focus {
		&::after {
			background-color: var(--md-sys-color-primary);
		}
	}
}

mvc-scroll-panels {
	position:relative;
	display:grid;
	grid-template-rows:1fr;
	grid-auto-flow: column;
	grid-auto-columns:100%;
	touch-action:pan-x pan-y;
	touch-action: auto;
	height:-webkit-fill-available;
	overflow:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior:contain;
	mvc-scroll-panels &{
		overscroll-behavior:auto;
	}
	> div, > .panel {
		position:relative;
		text-align: center;
		scroll-snap-align: center;
		display:flex;
		flex-direction: column;
	}
	&::-webkit-scrollbar {
		height:0px;
	}
}
mvc-indicator {
	position:absolute;
	left:0px;
	width:100%;
	display:flex;
	padding:0 16px 0 16px;
	gap:4px;
	height:4px;
	mvc-images.indicator-outside & {
		bottom:0px;
	}
	mvc-images.indicator-circle & {
		justify-content: center;
	}
	.segment {
		position: relative;
		flex-grow: 1;
		height:4px;
		border-radius: 4px;
		background-color:var(--md-sys-color-secondary-container);
		cursor:pointer;
		mvc-images.indicator-circle & {
			flex-grow: 0;
			width:4px;
		}
	}
	--left:0px;
	--width:0px;
	&:has(.segment)::after {
		position:absolute;
		content:'';
		bottom:0px;height:4px;
		border-radius: 4px;
		left:var(--left);
		width:var(--width);
		/** LEO **/
		background-color: var(--md-sys-color-primary);
		border-radius: 4px;
		transition: 0.3s ease-out;
	}
	mvc-images.indicator-circle &:has(.segment)::after {
		border-radius: 100%;
		height:6px;
	}

	/* &.no-transition::after{
		transition: '';
		left:var(--left);
	} */
}

mvc-bottom-refresh {
	z-index:9;
	position:fixed;bottom:48px;width:100%;justify-content:center;
	display:none;/*flex*/
	pointer-events: none;
	&.show{
		display:flex;
	}
	.refresher{
		position:absolute;
		top:48px;
		color:var(--md-sys-color-on-primary);
		background:var(--md-sys-color-primary);
		font-size:small;
		padding: 0.25rem 0.75rem;
		border-radius: 1rem;
		cursor:pointer;
		pointer-events: all;
		transition: all 0.35s;
		mvc-bottom-refresh.show &{
			top:0px;
			transition: all 0.35s;
		}
	}

}

.adjustable {
	transition:all 500ms;
	transform: translateZ(0);
	will-change: translateY;
} 
.adjust .adjustable{
	transform: translateY(-110%) translateZ(0);
}
/******/
mvc-page .bound-area-fixed,
mvc-page .bound-area {
	pointer-events: none;
	z-index:-1;
	position:sticky;
	top:0px;
}
.ai-xs mvc-page .bound-area,
.ai-sm mvc-page .bound-area {
	position:fixed;
	left:0px;top:0px;right:0px;bottom:0px;width:100%;height:100%;
}

/*****/

@supports not (aspect-ratio: 4 / 3) {
	aspect-ratio-patch43::before {
		float: left;
		padding-top: 75%;
		content: "";
	}
	aspect-ratio-patch43::after {
		display: block;
		content: "";
		clear: both;
	}
}

@supports not (aspect-ratio: 16 / 9) {
	aspect-ratio-patch169::before {
		float: left;
		padding-top: 56.25%;
		content: "";
	}
	aspect-ratio-patch169::after {
		display: block;
		content: "";
		clear: both;
	}
}

/************************** question ************************/
mvc-q {
	position:relative;
	border:1px solid var(--md-sys-color-outline);
	border-radius:8px;
	padding:4px 16px 16px 0;
	padding-left:4px;
	counter-reset:dropdown 0;
}
mvc-q #q_drag {
	position:relative;
	display:flex;
	justify-content: center;
	cursor:move;
}
mvc-q #q_drag i{
	transform: rotate(90deg);
	visibility: hidden;
	pointer-events: none;
}
mvc-q .title{
	position:relative;
	display:flex;
	align-items: center;
	margin:8px 4px;
	width:80%
}
mvc-q .title:before{
	border-bottom:1px solid transparent;
} 
mvc-q .desc {
	position:relative;
	display:flex;
	align-items: center;
	margin:8px 4px;
	width:80%;
	font-size: small;
	color:var(--md-sys-color-outline);
}
mvc-q .desc:before {
	border-bottom:1px solid transparent;
}
mvc-q .desc textarea {
	color:var(--md-sys-color-outline);
}
/** container **/
mvc-q .container{
	display:flex;
	flex-direction: column;
}
/****/
mvc-q .pattern-item{
	display:flex;
	white-space:nowrap;
	align-items: center;
	padding:0 4px;
	height:48px;
}
/*** text ***/
mvc-q.short .pattern-item.text #text{
	width:50%;
}	
mvc-q.detail .pattern-item.text #text{
	width:80%;
}			
/*** check radio dropdown****/
mvc-q.dropdown .pattern-item,
mvc-q.check .pattern-item,
mvc-q.radio .pattern-item {
	padding:0;
	/*counter-reset:dropdown 0;*/
}
mvc-q .pattern-item #icon {
	position: relative;width:24px;height:24px;
}
mvc-q.check .pattern-item #icon:before {
	position: absolute;
	content:' ';
	left:0px;top:3px;right:6px;bottom:3px;
	border:2px solid var(--md-sys-color-outline);
	border-radius:2px;
}
mvc-q.radio .pattern-item #icon:before {
	position: absolute;
	content:' ';
	left:0px;top:2px;right:4px;bottom:2px;
	border:2px solid var(--md-sys-color-outline);
	border-radius:50%;
}
mvc-q.dropdown .pattern-item #icon:before {
	position: absolute;
	counter-increment: dropdown;
	content: counter(dropdown) '.';
	left:0px;top:2px;right:4px;bottom:2px;
}
mvc-q .pattern-item #input-cover{
	position:relative;
	flex-grow: 1;
}
mvc-q .pattern-item textarea,
mvc-q .pattern-item input{
	padding:4px 0;
	border-bottom:1px solid transparent;
	width:100%;
}
mvc-q .pattern-item textarea ~ span,
mvc-q .pattern-item input ~ span{
	position:absolute;
	bottom:0px;
	display:block;
	background-color:var(--md-sys-color-primary);
	left:50%;
	height:1px;
	width:0px;
	transition:all 500ms ;
}
/** price **/
mvc-q .pattern-item #price_box{
	position:relative;
	width:64px;
	margin-left:12px;
	display:none;
}
mvc-q.price .pattern-item #price_box{
	display:inline-block;
}
mvc-q .pattern-item input#price{
	padding:4px 0;
	border-bottom:1px solid transparent;
	width:100%;
	color:var(--md-sys-color-tertiary);
}
mvc-q .pattern-item input#price ~ span{
	position:absolute;
	bottom:0px;
	display:block;
	background-color:var(--md-sys-color-tertiary);
	left:50%;
	height:1px;
	width:0px;
	transition:all 500ms ;
}
/** count **/
mvc-q .pattern-item #count_box{
	position:relative;
	width:32px;
	margin-left:12px;
	display:none;
}
mvc-q.count .pattern-item #count_box{
	display:inline-block;
}
mvc-q .pattern-item input#count{
	padding:4px 0;
	border-bottom:1px solid transparent;
	width:100%;
	color:var(--md-sys-color-secondary);
}
mvc-q .pattern-item input#count ~ span{
	position:absolute;
	bottom:0px;
	display:block;
	background-color:var(--md-sys-color-secondary);
	left:50%;
	height:1px;
	width:0px;
	transition:all 500ms ;
}


mvc-q .pattern-item #del{
	padding:0 16px;
	cursor:pointer;
}
mvc-q .pattern-item #more{
	padding:0 16px;
	cursor:pointer;
}
/** other **/
mvc-q .pattern-item.other{
	padding-left:24px;
	cursor:pointer;
}
mvc-q .pattern-item.other #text{
	flex-grow: 1;
}
/** add add_other ***/
mvc-q .pattern-item.add {
	padding-left:24px;
}
mvc-q .pattern-item.add #add{
	white-space:nowrap;
	flex-grow:1;
	cursor:pointer;
}
mvc-q .pattern-item.add #add_other{
	white-space:nowrap;
	color:var(--md-sys-color-primary);
	display:none;
}
mvc-q .pattern-item.add.add-other #add_other{
	display:inline;
}
/***/
mvc-q .tool {
	display:flex;
	flex-direction: row-reverse;
	height:48px;
	border-top:1px solid var(--md-sys-color-outline);
	gap:16px;
	padding: 0 16px;
	align-items: center;
	margin:0 4px;
}
mvc-q .tool #remove:hover{
	color:var(--md-sys-color-error);
	cursor:pointer;
}
mvc-q .tool #sep {
	width:1px;
	background-color:var(--md-sys-color-outline-variant);
	height:16px;
}
/* hover*/
mvc-q .title:hover:before{
	border-bottom:1px solid var(--md-sys-color-outline-variant);
} 
mvc-q .desc:hover:before{
	border-bottom:1px solid var(--md-sys-color-outline-variant);
} 
mvc-q:hover #q_drag i{
	visibility: visible;
}
mvc-q .pattern-item #drag {
	cursor:move;
}
mvc-q .pattern-item #drag,
mvc-q .pattern-item #more,
mvc-q .pattern-item #del {
	visibility: hidden;
}
mvc-q .pattern-item:hover #drag,
mvc-q .pattern-item:hover #more,
mvc-q .pattern-item:hover #del {
	visibility:visible;
}
mvc-q .pattern-item:hover input#count,
mvc-q .pattern-item:hover input#price,
mvc-q .pattern-item:hover textarea,
mvc-q .pattern-item:hover input{
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
mvc-q .pattern-item:hover input#count:focus ~ span,
mvc-q .pattern-item input#count:focus ~ span,
mvc-q .pattern-item:hover input#price:focus ~ span,
mvc-q .pattern-item input#price:focus ~ span,
mvc-q .pattern-item:hover textarea:focus ~ span,
mvc-q .pattern-item textarea:focus ~ span,
mvc-q .pattern-item:hover input:focus ~ span,
mvc-q .pattern-item input:focus ~ span{
	left:0px;
	width:100%;
	transition:all 500ms ;
}
mvc-q .pattern-item.disabled input{
	color:var(--md-sys-color-outline-variant) !important;
}
/*
mvc-q .pattern-item.sortable-ghost{
	visibility:hidden;
}
*/
/*** mvc-qns ***/
mvc-qns {
	display:block;
	padding:1rem 0;
}
mvc-qns .pattern-buttons {
	display:inline-flex;align-items: center;
	padding:8px 12px;gap:4px;
	border:1px solid var(--md-sys-color-outline);
	border-radius:8px;
	&:hover {
		box-shadow: var(--md-sys-shadow1);
	}
	.material-icons {
		cursor:pointer;
		&:hover {
			color:var(--md-sys-color-primary);
		}
	}
}
mvc-qns .q-container {
	position:relative;
	display:flex;
	gap:1rem;
	flex-direction: column;
	padding: 1rem 0;
	width:100%;
	max-width:640px;
	mvc-q {
		background-color: var(--md-sys-color-surface-container);
	}
}
/***** mvc-ans  *****/
mvc-ans.mvc {
	display:flex;
	flex-direction: column;
	gap:8px;
}
mvc-ans mvc-accordion {
	background-color:var(--md-sys-color-surface-container-highest);
	border-radius:8px;
	overflow:hidden;
}
mvc-ans mvc-accordion .title {
	display:flex;font-size:medium;
	align-items:center;padding:16px;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	cursor:pointer;
	gap:8px;
}
mvc-ans mvc-accordion .title #title {
	position:relative;
	padding-right:8px;
}
mvc-ans mvc-accordion.require .title #title:after {
	position:absolute;
	content:'*';
	color:var(--md-sys-color-error);
	right:0px;
	top:0px;
}
mvc-ans mvc-accordion .title #grow_1 {
	flex-grow: 1;
}
mvc-ans mvc-accordion .title i{
	color:var(--md-sys-color-primary);
}
mvc-ans mvc-accordion .title i.more{
	color:var(--md-sys-color-outline-variant);
}
mvc-ans mvc-accordion .container {
	padding:16px !important;
	gap:8px;
}
mvc-ans mvc-accordion .container #desc{
	font-size:small;
}
mvc-ans mvc-accordion .container .item{
	position:relative;
}
mvc-ans mvc-accordion.short .container .item{
	width:80%;
}
mvc-ans mvc-accordion.detail .container .item{
	width:100%;
}
mvc-ans mvc-accordion.detail .container .item textarea,
mvc-ans mvc-accordion.short .container .item input{
	width:100%;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	padding:4px 0;
}
mvc-ans mvc-accordion.detail .container .item textarea {
	resize:none;
}
mvc-ans mvc-accordion.detail .container .item span,
mvc-ans mvc-accordion.short .container .item span{
	position:absolute;
	bottom:0px;
	display:block;
	background-color:var(--md-sys-color-primary);
	left:50%;
	height:1px;
	width:0px;
	transition:all 500ms ;
}
mvc-ans mvc-accordion.detail .container .item textarea:focus ~ span,
mvc-ans mvc-accordion.short .container .item input:focus ~ span{
	left:0px;
	width:100%;
	transition:all 500ms ;
}
mvc-ans mvc-accordion.detail .container .item .placeholder,
mvc-ans mvc-accordion.short .container .item .placeholder{
	display:none;
	position:absolute;
	overflow:hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	color:var(--md-sys-color-outline-variant);
	/* top:calc(50% - 0.5rem); */
	top:0px;
}
mvc-ans mvc-accordion.detail .container .item textarea:placeholder-shown + .placeholder,
mvc-ans mvc-accordion.short .container .item input:placeholder-shown + .placeholder {
	display:block;
}
mvc-ans mvc-accordion.radio .container .item,
mvc-ans mvc-accordion.check .container .item{
	display:flex;
	flex-direction: column;
	padding:8px 0;
	gap:16px;
}
mvc-ans mvc-accordion.radio .container .item mvc-radio #input_box{
	position:relative;
	margin:0 32px;
	flex-grow:1;
}
mvc-ans mvc-accordion.radio .container .item mvc-radio input{
	padding-bottom:4px;
	border-bottom:1px solid var(--md-sys-color-outline-variant);
	width:100%
}
mvc-ans mvc-accordion.radio .container .item input ~ span,
mvc-ans mvc-accordion.check .container .item input ~ span{
	position:absolute;
	bottom:0px;
	display:block;
	background-color:var(--md-sys-color-primary);
	left:50%;
	height:1px;
	width:0px;
	transition:all 800ms ;
}
mvc-ans mvc-accordion.radio .container .item input:focus ~ span,
mvc-ans mvc-accordion.check .container .item input:focus ~ span{
	left:0px;
	width:100%;
	transition:all 800ms ;
}
mvc-ans .container .item mvc-radio.ylnodaer,
mvc-ans .container .item mvc-checkbox.ylnodaer{
	color:var(--md-sys-color-outline-variant) !important;
}
mvc-ans mvc-accordion.dropdown mvc-selector{
	padding:8px 16px 8px 0;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	cursor:pointer;
}

/**/

mvc-number-input {
	position:relative;
	padding-right: 8px;
	min-height:24px;
	width:-webkit-fill-available;
	cursor:pointer;
	.md-field-outline & {
		padding-right: 8px;
		min-height:24px;
		width:-webkit-fill-available;
		&::after {
			top:calc(50% - 12px);
		}
	}
	&::after {
		position:absolute;
		font-family: 'Material Symbols Outlined';
		content: "arrow_drop_down";
		color: var(--md-sys-color-outline);
		right:-8px;
		top:calc(50% - 18px);
	}
	&:has(.selector-item :nth-child(n):not(:empty)):after {
		top:calc(50% - 12px);
	}
	.selector-item {
		display:flex;
	}
}

mvc-brand,mvc-series,mvc-model,
mvc-selector {
	display:block;
	position:relative;
	padding-right: 8px;
	min-height:24px;
	width:-webkit-fill-available;
	cursor:pointer;
	.md-field-outline & {
		padding-right: 8px;
		min-height:24px;
		width:-webkit-fill-available;
		&::after {
			top:calc(50% - 12px);
		}
	}
	&::after {
		position:absolute;
		font-family: 'Material Symbols Outlined';
		content: "arrow_drop_down";
		color: var(--md-sys-color-outline);
		right:-8px;
		top:calc(50% - 18px);
	}
	&:has(.selector-item :nth-child(n):not(:empty)):after {
		top:calc(50% - 12px);
	}
	.selector-item {
		display:flex;
		gap:4px;
	}
}
mvc-tree-selector {
	position:relative;
	padding-right: 8px;
	min-height:24px;
	width:-webkit-fill-available;
	cursor:pointer;
	.md-field-outline & {
		padding-right: 8px;
		min-height:24px;
		width:-webkit-fill-available;
		&::after {
			top:calc(50% - 10px);
		}
	}
	&::after {
		position:absolute;
		font-family: 'Material Symbols Outlined';
		content: "arrow_drop_down";
		color: var(--md-sys-color-outline);
		right:-8px;
		top:calc(50% - 18px);
	}
	&:has(.selector-item :nth-child(n):not(:empty)):after {
		top:calc(50% - 12px);
	}
	.selector-item {
		display:flex;
		align-items: center;
		gap:0.25rem;
	}
}


.selectable {
	cursor:pointer;
}

/**** sortable ****/
/*
mvc-q .sortable-chosen {
	background-color:rgba(255,255,255, 0.4);
}
*/
/****/
/**** language ****/
.i18n > i {
	display:none;
	font-style: normal;
}
body.i18n.zh-tw .i18n>i.zh-tw {
	display:inline;
}
body.i18n.en .i18n>i.en {
	display:inline;
}
body.i18n.fr .i18n>i.fr {
	display:inline;
}
body.i18n.ja .i18n>i.ja {
	display:inline;
}
body.i18n.ko .i18n>i.ko {
	display:inline;
}
body.i18n.zh-cn .i18n>i.zh-cn {
	display:inline;
}
/******web ios and ****/
body.web .ios, body.web .and{
	display:none;
}
body.ios .web, body.ios .and{
	display:none;
}
body.and .web, body.and .ios {
	display:none;
}
/**************/
/* android keyboard spacer*/
body.and mvc-page .scroller:has(input:focus, textarea:focus) {
	padding-bottom:300px;
}
/***/
i18n-handle {
	flex-grow:1;
	display:flex;
	align-items: center;
}

mvc-delete {
	display:flex;
	justify-content: center;
	cursor: pointer;
}
.md-link,
.md-file {
	display:flex;
	align-items: center;
	gap:8px;
	height:40px;
	border-bottom:1px solid var(--md-sys-color-outline-variant);
	&:last-of-type{
		border-bottom:1px solid transparent;
	}
	.material-icons:first-of-type {
		color:var(--md-sys-color-on-surface-variant);
	}
	.material-icons:last-of-type {
		color:var(--md-sys-color-on-secondary-container);
	}
	mvc-openurl,
	mvc-file {
		flex-grow: 1;
		padding-top:0px;
		padding-bottom: 0px;
		/* color:var(--md-sys-color-on-surface); */
		color:var(--md-sys-color-primary);
		caret-color: var(--md-sys-color-primary);
		font-weight: var(--md-sys-typescale-body-large-font-weight);
		font-size: var(--md-sys-typescale-body-large-font-size);
		letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
		line-height: var(--md-sys-typescale-body-large-line-height);
		cursor:pointer;
		&:hover {
			text-decoration: underline;
			color:var(--md-sys-color-tertiary);
			/* font-weight: bold; */
		}
	}
	&:hover {
		.material-icons {
			font-variation-settings: 'FILL' 1;
		}
	}
}


/*************/
body:is(.ai-md, .ai-lg, .ai-xl) mvc-page.bound .ai-md-lg-xl-hide {
	display:none;
}
body:is(.ai-lg, .ai-xl) mvc-page.bound .ai-lg-xl-hide {
	display:none;
}
body:is(.ai-xs, .ai-sm) .ai-xs-sm-hide {
	display:none;
}
body.ai-xs .ai-xs-hide {
	display:none;
}
.layout-info-bound {
	display:flex;
	.info-area {
		position:relative;
		min-height:100%;
		height:fit-content;
		width:fit-content;
		:is(.ai-xs, .ai-sm) & {
			width:100%;
			max-width:100%;
		}
		:is(.ai-md, .ai-lg, .ai-xl) &{
			width:fit-content;
		}
	}
	.bound-area {
		flex-grow: 1;
	}
}
mvc-image.loading-effect{
	background-color:var(--md-sys-color-outline-variant);
	&:has(.ai-file) &{
		background-color:transparent;
	}
}
mvc-qrcode{
	display: flex;
    justify-content: center;
}

load-wraper{
	position: relative;
	height: 100%;
	width: 100%;
	background-color: rgb(211,211,211);
	z-index: 44;
	overflow: hidden;
	border-radius: 5px;
  }
  .activity{
	position: absolute;
	left: -45%;
	height: 100%;
	width: 45%;
	background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
	animation: loading 1s infinite;
	z-index: 45;
  }
  
  @keyframes loading {
	0%{
	  left: -45%;
	}
	100%{
	  left: 100%;
	}
  }



  @keyframes placeHolderShimmer{
		0%{
			background-position: 120% 0
		}
		100%{
			background-position: -120% 0
		}
	}
	.animated-background {
		animation-duration: 1s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: placeHolderShimmer;
		animation-timing-function: linear;
		/* background: #f6f7f8;  */
		background:var(--md-sys-color-surface-container-high);
		/* background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); */
		background: linear-gradient(to right, var(--md-sys-color-surface-container-high) 8%, var(--md-sys-color-surface) 18%,  var(--md-sys-color-surface-container-high) 33%);
		background-size: 240% 100%;
		/* height: 96px; */
		position: relative;
		&:has(.ai-file),
		:is(mvc-images, mvc-image):has(.ai-file) &{
			animation-iteration-count: 0;
			background:unset;
		}
	}

mvc-page {
	.md-field {
		mvc-page[data-auth] &, 
		mvc-page.ylnodaer &, &:has([data-field].ylnodaer){
			&:not(.xrdonly) {
				background-color: transparent;
			}
		}
	}
	[data-field] {
		mvc-accordion.ylnodaer .container &,
		mvc-accordion.ylnodaer:not(:has(>.title)) &,
		mvc-page[data-auth] &, 
		mvc-page.ylnodaer &, &.ylnodaer {
			&:not(.xrdonly) {
				pointer-events: none !important;
				cursor: default !important;
			}
			&:is(.xrdonly){
				pointer-events: all;
				cursor:pointer;
			}
			&:is(mvc-image-editor) {
				>.md-button {
					display:none;
				}
			}
			&:is(mvc-images-editor) {
				>mvc-open-page {
					display:none;
				}
			}
			&:is(mvc-links-editor){
				>mvc-open-page {
					display:none;
				}
			}
			&:is(mvc-files-editor){
				>mvc-open-page {
					display:none;
				}
			}
			&:is(mvc-selector,mvc-brand,mvc-series,mvc-model), &:is(mvc-tree-selector, mvc-open-page, mvc-open-panel){
				&:after{
					display:none;
				}
			}
			&:is(input) {
				cursor:default;
				&::-webkit-calendar-picker-indicator {
					display:none;
					-webkit-appearance: none;
				}
			}
		}
	}
	[data-auth] {
		pointer-events: none;
	}
	mvc-accordion .title .expander,
	mvc-image[data-pinch="true"] {
		pointer-events: all !important;
		cursor:pointer !important;
		&.ylnodaer, .ylnodaer & {
			pointer-events: all !important;
			cursor:pointer !important;
		}
	}
}

/**safe area padding**/
/**
check every md-header and NO md-header
nav.html : size matter
**/
body {
	--safe-area-top:0px; /**test**/
	--safe-area-bottom:0px;
	&.ios {
		--safe-area-top: calc(var(--ios-safe-area-top, 0px));
		--safe-area-bottom: calc(var(--ios-safe-area-bottom, 0px));
	}
	&.and {
		--safe-area-top: calc(var(--and-safe-area-top, 0px));
		--safe-area-bottom: calc(var(--and-safe-area-bottom, 0px));
	}
}